:root{
    --gulf-night: #17324c;
    --ink: #0e2032;
    --brass: #c9a15a;
    --brass-light: #e4c989;
    --sandstone: #ede3ce;
    --teal: #2e6b6b;
    --teal-light: #4c8f8f;
    --ember: #b9502c;
    --line: rgba(237,227,206,0.14);
    --font-display: 'Big Shoulders', sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    background: var(--gulf-night);
    color: var(--sandstone);
    font-family: var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  img,svg{ display:block; max-width:100%; }

  :focus-visible{ outline:2px solid var(--brass-light); outline-offset:3px; }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

  /* ---------- Mashrabiya pattern (used as SVG defs, referenced via fill) ---------- */
  .pattern-defs{ position:absolute; width:0; height:0; }

  .lattice-band{
    height:34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='34' viewBox='0 0 64 34'><g fill='none' stroke='%23c9a15a' stroke-width='1' opacity='0.55'><path d='M0 17 L16 0 L32 17 L16 34 Z'/><path d='M32 17 L48 0 L64 17 L48 34 Z'/></g></svg>");
    background-repeat: repeat-x;
    background-size: 64px 34px;
    opacity:0.5;
  }

  .lattice-bg{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'><g fill='none' stroke='%23c9a15a' stroke-width='1' opacity='0.16'><rect x='2' y='2' width='38' height='38'/><rect x='44' y='2' width='38' height='38'/><rect x='2' y='44' width='38' height='38'/><rect x='44' y='44' width='38' height='38'/><circle cx='21' cy='21' r='9'/><circle cx='63' cy='21' r='9'/><circle cx='21' cy='63' r='9'/><circle cx='63' cy='63' r='9'/></g></svg>");
    background-repeat: repeat;
  }

  /* ---------- Accessibility ---------- */
  .skip-link{position:absolute;left:-9999px;top:10px;z-index:9999;background:var(--brass);color:var(--ink);padding:10px 16px;font-weight:700;}
  .skip-link:focus{left:10px;}

  /* ---------- Nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background: rgba(23,50,76,0.86);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
    transition: border-color .3s ease;
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    max-width:1180px; margin:0 auto; padding:18px 32px;
  }
  .logo{
    font-family: var(--font-display);
    font-weight:700; font-size:26px; letter-spacing:0.5px;
    color: var(--sandstone);
    display:flex; align-items:baseline; gap:8px;
  }
  .logo span{
    font-family: var(--font-mono); font-size:10px; font-weight:500;
    color: var(--brass); letter-spacing:2px; text-transform:uppercase;
  }
  .nav-links{ display:flex; gap:36px; align-items:center; }
  .nav-links a{
    font-size:14px; font-weight:500; color: var(--sandstone);
    opacity:0.82; transition: opacity .2s ease;
    position:relative;
  }
  .nav-links a:hover{ opacity:1; }
  .nav-cta{
    background: var(--brass); color: var(--ink) !important;
    padding:10px 20px; border-radius:2px; font-weight:600;
    opacity:1 !important; font-size:13px;
    transition: background .2s ease, transform .2s ease;
  }
  .nav-cta:hover{ background: var(--brass-light); transform:translateY(-1px); }

  .menu-toggle{ display:none; background:none; border:none; color:var(--sandstone); cursor:pointer; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:flex-start;
    padding-top:200px; padding-bottom:110px;
    overflow:hidden;
    background-image: url("/images/dubai-hero-v2.webp");
    background-size: cover;
    background-position: 64% 32%;
    background-repeat: no-repeat;
  }
  .hero-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(14,32,50,0.75) 0%, rgba(14,32,50,0.34) 26%, rgba(14,32,50,0.06) 48%, rgba(14,32,50,0.5) 100%),
      linear-gradient(100deg, rgba(14,32,50,0.85) 0%, rgba(14,32,50,0.46) 38%, rgba(14,32,50,0.1) 62%, transparent 80%);
  }
  .eyebrow{
    font-family: var(--font-mono); font-size:12px; letter-spacing:3px;
    text-transform:uppercase; color: var(--brass);
    display:flex; align-items:center; gap:12px; margin-bottom:28px;
  }
  .eyebrow::before{ content:''; width:28px; height:1px; background: var(--brass); }

  .hero-content{ position:relative; z-index:2; }

  h1.hero-title{
    font-family: var(--font-display);
    font-weight:900;
    font-size: clamp(48px, 10vw, 128px);
    line-height:1.05;
    letter-spacing:-1px;
    text-transform:uppercase;
    color: var(--sandstone);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    text-shadow: 0 8px 34px rgba(0,0,0,0.6);
  }
  h1.hero-title .accent{ color: var(--brass); }

  .hero-sub{
    max-width:520px; margin-top:24px;
    font-size:18px; line-height:1.65; color: rgba(237,227,206,0.9);
    text-shadow: 0 3px 16px rgba(0,0,0,0.55);
  }

  .hero-cta-row{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }

  .btn-primary{
    background: var(--brass); color: var(--ink);
    padding:15px 30px; font-weight:600; font-size:14px;
    border-radius:2px; border:1px solid var(--brass);
    transition: background .2s ease, transform .2s ease;
    display:inline-block;
  }
  .btn-primary:hover{ background: var(--brass-light); transform:translateY(-2px); }

  .btn-secondary{
    padding:15px 30px; font-weight:600; font-size:14px;
    border-radius:2px; border:1px solid var(--line); color: var(--sandstone);
    transition: border-color .2s ease, background .2s ease;
    display:inline-block;
  }
  .btn-secondary:hover{ border-color: var(--brass); background: rgba(201,161,90,0.08); }

  /* ---------- Section scaffolding ---------- */
  section{ position:relative; padding:110px 0; }
  .section-label{
    font-family: var(--font-mono); font-size:12px; letter-spacing:3px;
    text-transform:uppercase; color: var(--brass); margin-bottom:16px;
    display:block;
  }
  h2.section-title{
    font-family: var(--font-display); font-weight:700;
    font-size: clamp(34px, 5vw, 58px);
    line-height:0.98; text-transform:uppercase; letter-spacing:-0.5px;
    max-width:780px;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .section-intro{
    max-width:560px; margin-top:20px; font-size:17px;
    color: rgba(237,227,206,0.72); line-height:1.7;
  }

  .reveal{ opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- Stats band ---------- */
  .stats-section{
    background: var(--ink);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:0;
  }
  .stats-grid{
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  .stat{
    padding:56px 32px; border-right:1px solid var(--line);
    text-align:left;
  }
  .stat:last-child{ border-right:none; }
  .stat-num{
    font-family: var(--font-mono); font-size:44px; font-weight:600;
    color: var(--brass-light); letter-spacing:-1px;
  }
  .stat-label{
    margin-top:10px; font-size:14px; color: rgba(237,227,206,0.68);
    line-height:1.5; max-width:220px;
  }
  .stats-footnote{
    font-family: var(--font-mono); font-size:11px; color: rgba(237,227,206,0.4);
    padding:18px 32px; letter-spacing:0.3px;
  }

  /* ---------- Why Dubai ---------- */
  .why-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap:64px; margin-top:64px; align-items:start;
  }
  .why-list{ display:flex; flex-direction:column; }
  .why-item{
    padding:26px 0; border-bottom:1px solid var(--line);
    display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  }
  .why-item:first-child{ padding-top:0; }
  .why-icon{
    width:38px; height:38px; border:1px solid var(--brass); border-radius:50%;
    display:flex; align-items:center; justify-content:center; color: var(--brass); flex-shrink:0;
  }
  .why-item h3{
    font-family: var(--font-serif); font-style:italic; font-weight:500;
    font-size:21px; margin-bottom:6px; color: var(--sandstone);
  }
  .why-item p{ font-size:14.5px; color: rgba(237,227,206,0.65); line-height:1.6; }

  .why-visual{
    border:1px solid var(--line); border-radius:4px; padding:48px 36px;
    position:sticky; top:120px;
    background: linear-gradient(160deg, rgba(46,107,107,0.14), transparent 60%);
  }
  .why-visual-inner{ position:relative; z-index:1; }
  .why-quote{
    font-family: var(--font-serif); font-style:italic; font-size:26px;
    line-height:1.4; color: var(--sandstone);
  }
  .why-quote-attr{
    margin-top:18px; font-family: var(--font-mono); font-size:12px;
    color: var(--brass); letter-spacing:1px; text-transform:uppercase;
  }
  .lattice-corner{
    position:absolute; inset:0; opacity:1; z-index:0;
  }

  /* ---------- Services ---------- */
  .services-section{ background: var(--ink); }
  .services-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    margin-top:56px; background: var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background: var(--ink); padding:44px 40px; position:relative; overflow:hidden;
    transition: background .3s ease;
  }
  .service-card:hover{ background: #182c42; }
  .service-card::before{
    content:''; position:absolute; inset:0; z-index:0;
  }
  .service-num{
    font-family: var(--font-mono); font-size:13px; color: var(--brass);
    letter-spacing:1px; position:relative; z-index:1;
  }
  .service-card h3{
    font-family: var(--font-display); font-weight:700; font-size:30px;
    text-transform:uppercase; margin-top:18px; margin-bottom:14px;
    position:relative; z-index:1; letter-spacing:0.2px;
  }
  .service-card p{
    font-size:14.5px; color: rgba(237,227,206,0.66); line-height:1.7;
    max-width:380px; position:relative; z-index:1;
  }

  /* ---------- Process ---------- */
  .process-list{ margin-top:64px; }
  .process-item{
    display:grid; grid-template-columns:100px 1fr; gap:32px;
    padding:34px 0; border-top:1px solid var(--line);
    align-items:baseline;
  }
  .process-item:last-child{ border-bottom:1px solid var(--line); }
  .process-num{
    font-family: var(--font-mono); font-size:15px; color: var(--brass);
  }
  .process-item h3{
    font-family: var(--font-display); font-weight:700; font-size:26px;
    text-transform:uppercase; margin-bottom:8px;
  }
  .process-item p{ font-size:15px; color: rgba(237,227,206,0.66); max-width:520px; }

  /* ---------- Testimonials ---------- */
  .testimonial-section{ background: var(--ink); }
  .testimonial-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px;
  }
  .testimonial-card{
    border:1px solid var(--line); padding:32px 28px; border-radius:4px;
  }
  .testimonial-card p{
    font-family: var(--font-serif); font-style:italic; font-size:16.5px;
    line-height:1.6; color: var(--sandstone);
  }
  .testimonial-attr{
    margin-top:20px; font-family: var(--font-mono); font-size:11.5px;
    color: var(--brass); letter-spacing:0.5px; text-transform:uppercase;
  }
  .sample-note{
    margin-top:28px; font-size:12.5px; color: rgba(237,227,206,0.38);
    font-family: var(--font-mono);
  }

  /* ---------- Contact ---------- */
  .contact-section{ padding-bottom:0; }
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:72px; margin-top:56px;
  }
  .agent-card{
    display:flex; align-items:center; gap:24px; margin-bottom:32px;
  }
  .agent-photo{
    width:190px; height:190px; border-radius:50%; object-fit:cover;
    border:3px solid var(--brass); flex-shrink:0;
  }
  .agent-name{
    font-family: var(--font-serif); font-style:italic; font-size:24px;
    color: var(--sandstone);
  }
  .agent-title{
    font-family: var(--font-mono); font-size:12px; letter-spacing:1.5px;
    text-transform:uppercase; color: var(--brass); margin-top:6px;
  }
  .contact-info h3{
    font-family: var(--font-serif); font-style:italic; font-size:24px; margin-bottom:16px; font-weight:500;
  }
  .contact-info p{ font-size:15px; color: rgba(237,227,206,0.68); line-height:1.7; margin-bottom:28px; }
  .contact-detail{ margin-bottom:18px; }
  .contact-detail-label{
    font-family: var(--font-mono); font-size:11px; letter-spacing:1.5px;
    text-transform:uppercase; color: var(--brass); display:block; margin-bottom:4px;
  }
  .contact-detail-value{ font-size:16px; }

  form{ display:flex; flex-direction:column; gap:20px; }
  .field label{
    font-family: var(--font-mono); font-size:11px; letter-spacing:1.5px;
    text-transform:uppercase; color: rgba(237,227,206,0.55); display:block; margin-bottom:8px;
  }
  .field input, .field textarea, .field select{
    width:100%; background: transparent; border:none; border-bottom:1px solid var(--line);
    color: var(--sandstone); font-family: var(--font-body); font-size:15px; padding:10px 2px;
    transition: border-color .2s ease;
  }
  .field select option{ background: var(--gulf-night); color:var(--sandstone); }
  .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--brass); outline:none; }
  .field textarea{ resize:vertical; min-height:70px; }
  .submit-btn{
    background: var(--brass); color: var(--ink); border:none;
    padding:16px 30px; font-weight:600; font-size:14px; border-radius:2px;
    cursor:pointer; margin-top:8px; align-self:flex-start;
    transition: background .2s ease, transform .2s ease;
  }
  .submit-btn:hover{ background: var(--brass-light); transform:translateY(-2px); }
  .form-note{ font-size:12px; color: rgba(237,227,206,0.4); margin-top:2px; }
  .form-success{
    display:none; padding:20px; border:1px solid var(--teal-light); border-radius:4px;
    color: var(--sandstone); font-size:14.5px;
  }
  .form-success.show{ display:block; }

  /* ---------- Footer ---------- */
  footer{ margin-top:110px; border-top:1px solid var(--line); }
  .footer-inner{
    display:flex; justify-content:space-between; align-items:center;
    padding:32px 0; flex-wrap:wrap; gap:16px;
  }
  .footer-inner p{ font-size:12.5px; color: rgba(237,227,206,0.42); }
  .footer-links{ display:flex; gap:24px; }
  .footer-links a{ font-size:12.5px; color: rgba(237,227,206,0.55); transition: color .2s ease; }
  .footer-links a:hover{ color: var(--brass); }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    .hero{ background-position: 68% 28%; padding-top:170px; padding-bottom:80px; }
    .logo{ font-size:20px; gap:6px; }
    .logo span{ display:none; }
    .nav-links{
      position:fixed; top:64px; left:0; right:0; bottom:0;
      background: var(--gulf-night); flex-direction:column; justify-content:flex-start;
      padding:40px 32px; gap:24px; transform:translateX(100%);
      transition: transform .3s ease; z-index:99;
    }
    .nav-links.open{ transform:translateX(0); }
    .menu-toggle{ display:block; }
    .stats-grid{ grid-template-columns:repeat(2,1fr); }
    .stat{ border-bottom:1px solid var(--line); }
    .why-grid{ grid-template-columns:1fr; }
    .why-visual{ position:static; order:-1; }
    .services-grid{ grid-template-columns:1fr; }
    .testimonial-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; gap:48px; }
    .process-item{ grid-template-columns:60px 1fr; }
  }

  @media (max-width: 560px){
    .hero{ background-position: 72% 26%; padding-top:150px; padding-bottom:70px; }
    .logo{ font-size:16px; }
    .wrap{ padding:0 20px; }
    nav{ padding:16px 20px; }
    .stats-grid{ grid-template-columns:1fr; }
    .hero-cta-row{ flex-direction:column; }
    .hero-cta-row a{ text-align:center; }
    .agent-photo{ width:120px; height:120px; }
    .agent-name{ font-size:20px; }
  }

  .skip-link{
    position:fixed; left:16px; top:16px; z-index:1000;
    padding:10px 14px; background:var(--brass); color:var(--ink);
    transform:translateY(-200%); transition:transform .2s ease;
  }
  .skip-link:focus{ transform:translateY(0); }
  .contact-detail-value{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ transition:none !important; animation:none !important; }
  }


  /* ---------- SEO 2.0 sections ---------- */
  .seo-intro-section,.guide-section,.faq-section{background:var(--ink);padding:92px 0;}
  .seo-intro-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:start;}
  .seo-intro-copy{color:rgba(237,227,206,.78);font-size:17px;line-height:1.8;}
  .seo-intro-copy p{margin-bottom:18px;}
  .text-link{display:inline-block;color:var(--brass-light);font-weight:600;margin-top:8px;}
  .guide-section{background:var(--gulf-night);}
  .guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;}
  .guide-card{border:1px solid var(--line);padding:28px;background:rgba(255,255,255,.025);}
  .guide-num{font-family:var(--font-mono);color:var(--brass);font-size:12px;}
  .guide-card h3{font-size:21px;margin:20px 0 12px;}
  .guide-card p{color:rgba(237,227,206,.7);font-size:14px;line-height:1.7;}
  .faq-section{background:#10263b;}
  .faq-list{max-width:900px;margin:42px auto 0;}
  .faq-item{border-top:1px solid var(--line);padding:0;}
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-item summary{cursor:pointer;list-style:none;padding:24px 42px 24px 0;font-weight:600;font-size:18px;position:relative;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+';position:absolute;right:4px;top:20px;color:var(--brass);font-size:24px;font-weight:400;}
  .faq-item[open] summary::after{content:'–';}
  .faq-item p{max-width:780px;color:rgba(237,227,206,.72);line-height:1.8;padding:0 0 25px;}
  .faq-cta{margin-top:45px;text-align:center;padding:34px;border:1px solid var(--line);}
  .faq-cta p{margin-bottom:22px;color:rgba(237,227,206,.78);}
  @media(max-width:900px){
    .seo-intro-grid{grid-template-columns:1fr;gap:28px;}
    .guide-grid{grid-template-columns:1fr 1fr;}
  }
  @media(max-width:560px){
    .seo-intro-section,.guide-section,.faq-section{padding:68px 0;}
    .guide-grid{grid-template-columns:1fr;}
    .faq-item summary{font-size:16px;}
  }