/* ==========================================================================
   House2Home Real Estate — Design System
   Palette drawn from the brand mark: deep navy + brushed gold on ivory.
   ========================================================================== */
:root{
  --navy:#0B2545; --navy-2:#13385F; --navy-3:#1E4E85; --brand-blue:#0F4A7C;
  --gold:#C9A348; --gold-2:#E3C66C; --gold-3:#8F6E22; --gold-soft:rgba(201,163,72,.14);
  --ivory:#F6F2EA; --cream:#FBF9F4; --white:#FFFFFF; --sand:#EFE9DD;
  --ink:#141A26; --ink-2:#2C3545; --muted:#6B7280; --line:#E6E0D3; --line-2:#D9D1C0;
  --success:#1F7A4D; --wa:#25D366;
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:14px; --radius-lg:22px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(11,37,69,.06),0 2px 8px rgba(11,37,69,.06);
  --shadow:0 10px 30px rgba(11,37,69,.10),0 2px 6px rgba(11,37,69,.06);
  --shadow-lg:0 30px 60px rgba(11,37,69,.18);
  --container:1240px; --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;margin:0;color:var(--navy);letter-spacing:-.005em}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
h2{font-size:clamp(2rem,3.8vw,3.1rem)}
h3{font-size:clamp(1.35rem,2vw,1.7rem)}
p{margin:0 0 1em}
.container{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.container-wide{width:min(1440px,100% - 2*var(--gutter));margin-inline:auto}
section{position:relative}
.section{padding-block:clamp(64px,8vw,112px)}
.section-tight{padding-block:clamp(40px,5vw,72px)}
.bg-ivory{background:var(--ivory)}
.bg-navy{background:var(--navy);color:#DCE3EE}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff}
.bg-white{background:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-3);margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.bg-navy .eyebrow{color:var(--gold-2)}
.panel > .eyebrow{display:flex}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-2);max-width:62ch}
.bg-navy .lead{color:#C7D2E0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(32px,4vw,52px);flex-wrap:wrap}
.section-head .lead{margin:12px 0 0}
.muted{color:var(--muted)}
.gold{color:var(--gold-3)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lead{margin-inline:auto}
.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* Buttons */
.btn{--bg:var(--navy);--fg:#fff;--bd:var(--navy);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);font-weight:700;font-size:.92rem;letter-spacing:.02em;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(11,37,69,.18)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{--bg:linear-gradient(135deg,#D6B35A,#B88F2E);--fg:#1B1407;--bd:transparent}
.btn-gold:hover{box-shadow:0 12px 28px rgba(201,163,72,.4)}
.btn-outline{--bg:transparent;--fg:var(--navy);--bd:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-light{--bg:#fff;--fg:var(--navy);--bd:#fff}
.btn-ghost{--bg:rgba(255,255,255,.08);--fg:#fff;--bd:rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-wa{--bg:var(--wa);--fg:#fff;--bd:var(--wa)}
.btn-sm{padding:10px 18px;font-size:.84rem}
.btn-lg{padding:17px 34px;font-size:1rem}
.btn-block{width:100%}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:2px;transition:gap .2s}
.link:hover{gap:12px}
.link svg{width:16px;height:16px}

/* Header */
.header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s,box-shadow .35s,transform .35s}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.header .logo img{height:54px;width:auto;transition:height .3s}
.header .logo .logo-dark{display:none}
.header .logo .logo-light{display:block}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:10px 12px;border-radius:999px;font-weight:600;font-size:.9rem;color:#fff;opacity:.9;transition:background .2s,opacity .2s}
.nav a:hover,.nav a.active{opacity:1;background:rgba(255,255,255,.12)}
.header-cta{display:flex;align-items:center;gap:10px}
.header.solid,.header.always-solid{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(11,37,69,.06)}
.header.solid .header-inner,.header.always-solid .header-inner{height:72px}
.header.solid .logo img,.header.always-solid .logo img{height:40px}
.header.solid .logo .logo-dark,.header.always-solid .logo .logo-dark{display:block}
.header.solid .logo .logo-light,.header.always-solid .logo .logo-light{display:none}
.header.solid .nav a,.header.always-solid .nav a{color:var(--navy)}
.header.solid .nav a:hover,.header.solid .nav a.active,.header.always-solid .nav a:hover,.header.always-solid .nav a.active{background:var(--gold-soft)}
.header.solid .btn-ghost,.header.always-solid .btn-ghost{--fg:var(--navy);--bd:var(--navy);--bg:transparent;backdrop-filter:none}
.header.hide{transform:translateY(-100%)}
.burger{display:none;position:relative;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;cursor:pointer}
.burger span{position:absolute;left:12px;top:22px;width:20px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){transform:translateY(-6px)}.burger span:nth-child(3){transform:translateY(6px)}
.header.solid .burger,.header.always-solid .burger{border-color:var(--navy)}
.header.solid .burger span,.header.always-solid .burger span{background:var(--navy)}
@media (max-width:1180px){.nav,.header-cta .btn-text{display:none}.burger{display:grid}}
.mobile-nav{position:fixed;inset:0;z-index:99;background:var(--navy);color:#fff;padding:110px var(--gutter) 40px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .4s var(--ease);overflow:auto}
.mobile-nav.open{transform:none}
.mobile-nav a{font-family:var(--font-display);font-size:2rem;font-weight:600;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav .mobile-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:30px}
body.nav-open{overflow:hidden}
body.nav-open .header{background:transparent;box-shadow:none}
body.nav-open .header .logo .logo-dark{display:none}body.nav-open .header .logo .logo-light{display:block}
body.nav-open .burger{border-color:#fff}body.nav-open .burger span{background:#fff}
body.nav-open .burger span:nth-child(1){transform:rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:rotate(-45deg)}

/* Hero */
.hero{position:relative;min-height:min(100vh,920px);display:grid;align-items:end;color:#fff;overflow:hidden;background:var(--navy)}
.hero-media{position:absolute;inset:0}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;transform:scale(1.06)}
.hero-media img.on{opacity:1;animation:kenburns 9s ease forwards}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,.55) 0%,rgba(11,37,69,.15) 35%,rgba(11,37,69,.72) 100%)}
.hero-content{position:relative;z-index:2;padding:160px 0 56px}
.hero .eyebrow{color:#F2DFA4;text-shadow:0 1px 3px rgba(11,37,69,.85),0 2px 14px rgba(11,37,69,.6)}
.hero h1{color:#fff;max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero h1 em{font-style:italic;color:var(--gold-2)}
.hero .lead{color:#E7ECF3;max-width:56ch;margin-top:20px;font-size:clamp(1.05rem,1.5vw,1.25rem)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-badges{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#D4DCE8}
.hero-badges span{display:inline-flex;align-items:center;gap:8px}
.hero-badges svg{width:16px;height:16px;color:var(--gold-2)}
.hero-dots{position:absolute;right:var(--gutter);bottom:36px;z-index:3;display:flex;gap:8px}
.hero-dots button{width:34px;height:3px;border:0;background:rgba(255,255,255,.35);cursor:pointer;padding:0;border-radius:2px}
.hero-dots button.on{background:var(--gold-2)}

/* Search panel */
.search-panel{position:relative;z-index:5;margin-top:-54px}
.search-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;display:grid;gap:12px}
.search-tabs{display:flex;gap:4px;background:var(--ivory);padding:4px;border-radius:999px;width:max-content}
.search-tabs button{border:0;background:transparent;padding:9px 22px;border-radius:999px;font-weight:700;font-size:.86rem;cursor:pointer;color:var(--muted);transition:.2s}
.search-tabs button.on{background:var(--navy);color:#fff}
.search-fields{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr auto;gap:10px}
.field{display:grid;gap:4px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--cream);min-width:0}
.field label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field select,.field input{border:0;background:transparent;padding:0;font-weight:600;font-size:.95rem;color:var(--navy);outline:none;width:100%;min-width:0}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;padding-right:18px}
@media (max-width:1000px){.search-fields{grid-template-columns:1fr 1fr}.search-fields .btn{grid-column:1/-1}}
@media (max-width:520px){.search-fields{grid-template-columns:1fr}}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-block:1px solid var(--line)}
.stat{padding:30px 22px;border-right:1px solid var(--line);text-align:center}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(2rem,3.2vw,2.8rem);font-weight:600;color:var(--navy);line-height:1}
.stat b i{font-style:normal;color:var(--gold-3)}
.stat span{display:block;margin-top:8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
@media (max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}.stat{border-bottom:1px solid var(--line)}.stat:nth-child(3n){border-right:0}}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3n){border-right:1px solid var(--line)}.stat:nth-child(2n){border-right:0}
  .stat:last-child:nth-child(odd){grid-column:1/-1;border-right:0}}

/* Property cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-media img{transform:scale(1.06)}
.card-media::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(0deg,rgba(11,37,69,.82) 0%,rgba(11,37,69,.45) 45%,transparent 100%)}
.badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.badge{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--navy);backdrop-filter:blur(6px)}
.badge.gold{background:linear-gradient(135deg,#D6B35A,#B88F2E);color:#1B1407}
.badge.navy{background:var(--navy);color:#fff}
.badge.green{background:#DCF5E6;color:#0F5A32}
.card-price{position:absolute;left:14px;bottom:12px;z-index:2;color:#fff;font-family:var(--font-display);font-size:1.5rem;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.card-price small{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.06em;opacity:.9}
.card-body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-title{font-family:var(--font-body);font-size:1.02rem;font-weight:700;color:var(--navy);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-loc{font-size:.85rem;color:var(--muted);display:flex;gap:6px;align-items:flex-start}
.card-loc svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--gold-3)}
.specs{display:flex;gap:16px;font-size:.84rem;font-weight:600;color:var(--ink-2);padding-top:12px;border-top:1px solid var(--line);margin-top:auto;flex-wrap:wrap}
.specs span{display:inline-flex;align-items:center;gap:6px}
.specs svg{width:16px;height:16px;color:var(--navy-3)}
.card-agent{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted)}
.card-agent img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.card-agent b{color:var(--ink-2);font-weight:700}
.card.wide{grid-column:span 2}
.card.wide .card-media{aspect-ratio:16/9}
@media (max-width:1000px){.card.wide{grid-column:span 2}}
@media (max-width:620px){.card.wide{grid-column:auto}}

/* Pillars / features */
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:transform .3s var(--ease),box-shadow .3s}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pillar .icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-3);margin-bottom:20px}
.pillar .icon svg{width:24px;height:24px}
.pillar h3{margin-bottom:10px}
.pillar p{color:var(--muted);font-size:.95rem;margin:0}
.num{font-family:var(--font-display);font-size:3.4rem;font-weight:500;color:var(--gold);line-height:1;opacity:.7;margin-bottom:10px}

/* Services */
.service{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);overflow:hidden;transition:.3s var(--ease)}
.service::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--gold-2),var(--gold-3));transform:scaleY(0);transform-origin:top;transition:.35s var(--ease)}
.service:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service:hover::before{transform:none}
.service .icon{width:48px;height:48px;border-radius:12px;background:var(--navy);color:var(--gold-2);display:grid;place-items:center}
.service .icon svg{width:22px;height:22px}
.service h3{font-size:1.3rem}
.service p{color:var(--muted);font-size:.93rem;margin:0}
.service .link{margin-top:auto;align-self:flex-start;font-size:.86rem}

/* Areas */
.areas{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.area{position:relative;border-radius:var(--radius);overflow:hidden;color:#fff;display:flex;align-items:flex-end;padding:20px;background:var(--navy)}
.area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.area::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,37,69,.85),rgba(11,37,69,.05) 60%)}
.area:hover img{transform:scale(1.07)}
.area > div{position:relative;z-index:2}
.area h3{color:#fff;font-size:1.45rem}
.area span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);font-weight:700}
.area.tall{grid-row:span 2}
.area.wide{grid-column:span 2}
@media (max-width:1000px){.areas{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}}
@media (max-width:560px){.areas{grid-template-columns:1fr}.area.wide,.area.tall{grid-column:auto;grid-row:auto}}

/* Agents / team */
.agent-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.35s var(--ease)}
.agent-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.agent-card .photo{aspect-ratio:5/6;overflow:hidden;background:var(--sand);position:relative}
.agent-card .photo img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.agent-card:hover .photo img{transform:scale(1.04)}
.agent-card .photo .badge{position:absolute;top:12px;left:12px}
.agent-card{display:flex;flex-direction:column}
.agent-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.agent-card .meta{margin-bottom:4px}
.agent-card h3{font-size:1.4rem}
.agent-card .role{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-3);font-weight:700;margin:4px 0 10px}
.agent-card .meta{font-size:.84rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px}
.agent-card .meta span{display:inline-flex;gap:5px;align-items:center}
.agent-card .meta svg{width:14px;height:14px;color:var(--navy-3)}
.agent-card .actions{display:flex;gap:8px;margin-top:auto;padding-top:14px}
.agent-card .actions .btn{flex:1;padding:10px 12px;font-size:.8rem}
.stars{color:var(--gold);letter-spacing:1px;font-size:.9rem}

/* Testimonials */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;position:relative;display:flex;flex-direction:column}
.quote::before{content:"\201C";position:absolute;top:10px;left:22px;font-family:var(--font-display);font-size:6rem;line-height:1;color:var(--gold);opacity:.35}
.quote p{position:relative;font-size:1.02rem;color:var(--ink-2);margin:12px 0 20px}
.quote .who{margin-top:auto;display:flex;align-items:center;gap:12px;font-weight:700;color:var(--navy)}
.quote .who i{width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gold-2);display:grid;place-items:center;font-style:normal;font-family:var(--font-display);font-size:1.2rem}
.quote .who small{display:block;color:var(--muted);font-weight:500;font-size:.8rem}

/* Developers marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 38s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:46px;width:auto;filter:grayscale(1) contrast(1.1);opacity:.6;transition:.3s;mix-blend-mode:multiply}
.marquee-track img:hover{filter:none;opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}

/* CTA band */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--navy);color:#fff;padding:clamp(40px,6vw,72px);display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.cta-band::before{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(201,163,72,.35),transparent 60%);pointer-events:none}
.cta-band h2{color:#fff}
.cta-band p{color:#C7D2E0}
.cta-band .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){.cta-band{grid-template-columns:1fr}.cta-band .actions{justify-content:flex-start}}

/* Split sections */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split .media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-lg)}
.split .media img{width:100%;height:100%;object-fit:cover}
.split .media .float{position:absolute;left:20px;bottom:20px;background:#fff;border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow);min-width:200px}
.split .media .float b{display:block;font-family:var(--font-display);font-size:2.2rem;line-height:1;color:var(--navy)}
.split .media .float span{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.split.rev .media{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.rev .media{order:0}.split .media{aspect-ratio:4/3}.split .media .float{left:14px;bottom:14px}}
.checks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.checks li svg{width:20px;height:20px;flex:none;color:var(--gold-3);margin-top:3px}

/* Page hero (inner pages) */
.page-hero{position:relative;background:var(--navy);color:#fff;padding:150px 0 70px;overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,.3),rgba(11,37,69,.9))}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(2.4rem,5vw,4rem)}
.page-hero .lead{color:#D4DCE8;margin-top:16px}
.crumbs{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#B7C3D3;display:flex;gap:8px;margin-bottom:14px;font-weight:700}
.crumbs a:hover{color:var(--gold-2)}

/* Listing page filters */
.results{position:relative}
.filters{position:sticky;top:72px;transition:top .3s var(--ease);z-index:40;background:var(--cream);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:14px 0}
.filters .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filters .field{padding:8px 12px;flex:1 1 140px}
.filters .search-tabs{flex:none}
.filters .count{margin-left:auto;font-size:.86rem;color:var(--muted);font-weight:600;white-space:nowrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 12px;font-size:.78rem;font-weight:700;cursor:pointer;color:var(--ink-2)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.empty{padding:60px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--radius);color:var(--muted)}

/* Property detail */
.gallery{min-width:0;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:280px 280px;gap:10px;border-radius:var(--radius-lg);overflow:hidden}
.gallery a{position:relative;overflow:hidden;background:var(--sand);display:block}
.gallery a:first-child{grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery a:hover img{transform:scale(1.04)}
.gallery .more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,37,69,.55);color:#fff;font-weight:700}
@media (max-width:800px){.gallery{grid-template-columns:1fr;grid-template-rows:260px 160px 160px}.gallery a:first-child{grid-row:auto}}
.detail>*{min-width:0}
.detail{display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:980px){.detail{grid-template-columns:1fr}}
.detail h1{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.price-tag{font-family:var(--font-display);font-size:clamp(2rem,3.5vw,2.8rem);color:var(--navy);font-weight:600;line-height:1}
.price-tag small{font-family:var(--font-body);font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.06em}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:26px 0}
.fact{min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.fact span{display:block;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1.3}
/* break-word, not anywhere: only split a word when it genuinely cannot fit, so "Zoya Developments"
   wraps at the space instead of rendering as "Developm / ents". */
.fact b{display:block;overflow-wrap:break-word;font-size:1.05rem;color:var(--navy);margin-top:4px;line-height:1.35}
/* The detail layout gives the main column ~590px at laptop width — four tiles there are too narrow
   for a developer name, so step down to three before the usual phone breakpoint. */
/* Six-item variant sits as a clean 3x2 instead of leaving an orphan on the last row. */
.facts-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1180px){.facts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.facts{grid-template-columns:repeat(2,1fr);gap:8px}
  .fact{padding:12px 13px}.fact b{font-size:.98rem}}
.prose{color:var(--ink-2);font-size:1rem;line-height:1.8}
.prose p{margin-bottom:1.1em}
.amen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;list-style:none;padding:0;margin:0}
.amen li{display:flex;gap:10px;align-items:center;font-size:.92rem;font-weight:500}
.amen li svg{width:16px;height:16px;color:var(--gold-3);flex:none}
@media (max-width:640px){.amen{grid-template-columns:1fr 1fr}}
.sidebar{position:sticky;top:96px;display:grid;gap:18px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.panel h3{font-size:1.3rem;margin-bottom:14px}
.agent-mini{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.agent-mini img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top}
.agent-mini b{display:block;color:var(--navy)}
.agent-mini small{color:var(--muted);font-size:.8rem}
.form{display:grid;gap:10px}
.form .field{background:#fff}
.form textarea{border:0;background:transparent;resize:vertical;min-height:90px;outline:none;width:100%;font-weight:500;color:var(--navy)}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.form .row2{grid-template-columns:1fr}}
.form .note{font-size:.76rem;color:var(--muted);margin:4px 0 0}
.calc{display:grid;gap:12px}
.calc .out{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--line)}
.calc .out b{font-family:var(--font-display);font-size:1.9rem;color:var(--navy)}
.calc input[type=range]{width:100%;accent-color:var(--gold-3)}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;background:var(--sand)}
.map-embed iframe{width:100%;height:100%;border:0}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,14,28,.94);display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1400px,100%);max-height:100%;object-fit:contain;border-radius:8px}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.lightbox .close{top:20px;right:20px}
.lightbox .prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox .next{right:20px;top:50%;transform:translateY(-50%)}
.lightbox .counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:.85rem;letter-spacing:.1em}

/* Packages */
.package{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 30px;display:flex;flex-direction:column;gap:14px;position:relative}
.package.featured{border-color:var(--gold);box-shadow:0 20px 50px rgba(201,163,72,.18)}
.package .tier{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--gold-3)}
.package h3{font-size:1.9rem}
.package .ribbon{position:absolute;top:-14px;right:24px}
.package .checks{margin-top:4px}
.package .btn{margin-top:auto}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,64px)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.info-list{display:grid;gap:18px}
.info-list a,.info-list div{display:flex;gap:14px;align-items:flex-start}
.info-list .icon{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-3);display:grid;place-items:center;flex:none}
.info-list .icon svg{width:20px;height:20px}
.info-list b{display:block;color:var(--navy)}
.info-list span{color:var(--muted);font-size:.92rem}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--navy);transition:.25s}
.socials a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.socials svg{width:18px;height:18px}

/* Footer */
.footer{background:var(--navy);color:#B7C3D3;padding:72px 0 28px;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:auto auto -30% -10%;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(201,163,72,.18),transparent 60%);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:clamp(24px,2.6vw,40px);position:relative}
@media (max-width:1140px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr;row-gap:36px}}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:32px}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:26px}
  .footer-grid > :first-child{grid-column:1/-1}
  .footer h4{font-size:.68rem;letter-spacing:.14em}
  .footer li a{font-size:.86rem}}
@media (max-width:360px){.footer-grid{grid-template-columns:1fr}}
.footer img.flogo{height:54px;width:auto;margin-bottom:18px}
.footer h4{color:#fff;font-family:var(--font-body);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.92rem}
.footer a:hover{color:var(--gold-2)}
.footer p{font-size:.92rem;line-height:1.7}
.footer .socials{gap:7px}
.footer .socials a{width:40px;height:40px;border-color:rgba(255,255,255,.2);color:#fff}
.footer .socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.footer-bottom{padding-right:76px;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#8EA0B8}
.footer-bottom .orn{color:var(--gold-2);font-weight:700;letter-spacing:.08em}

/* WhatsApp float */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:90;display:grid;place-items:center;
  width:54px;height:54px;background:var(--wa);color:#fff;border-radius:50%;box-shadow:0 10px 26px rgba(37,211,102,.38);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.wa-float span{display:none}                 /* icon only, so it never covers a line of text */
.wa-float svg{width:26px;height:26px}
body.scrolled .wa-float{opacity:1;visibility:visible;transform:none}
.wa-float:hover{transform:translateY(-3px) scale(1.04)}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}.reveal-d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-media img.on{animation:none}.marquee-track{animation:none}}

/* Toast */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:999px;font-size:.9rem;font-weight:600;opacity:0;transition:.3s;z-index:300;pointer-events:none;box-shadow:var(--shadow-lg)}
.toast.on{opacity:1;transform:translateX(-50%)}

/* Horizontal scroller on mobile for cards */
@media (max-width:620px){
  .scroll-x{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;padding-bottom:10px;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}
  .scroll-x::-webkit-scrollbar{display:none}
  .scroll-x > *{flex:0 0 84%;scroll-snap-align:start}
}
.divider-gold{width:64px;height:2px;background:linear-gradient(90deg,var(--gold-2),var(--gold-3));margin:18px 0}
.story-quote{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.2rem);font-style:italic;color:var(--navy);line-height:1.35;border-left:3px solid var(--gold);padding-left:24px;margin:30px 0}
.timeline{display:grid;gap:0;position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--line-2)}
.timeline li{list-style:none;position:relative;padding:0 0 26px}
.timeline li::before{content:"";position:absolute;left:-24px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.timeline b{display:block;color:var(--navy);font-size:1.05rem}
.timeline span{color:var(--muted);font-size:.92rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   Off-plan / new projects
   ========================================================================== */
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(14px,2vw,24px)}
.op-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);min-width:0}
.op-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.op-media{position:relative;aspect-ratio:16/11;background:var(--sand);overflow:hidden}
.op-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.op-card:hover .op-media img{transform:scale(1.05)}
.op-media::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(0deg,rgba(11,37,69,.84) 0%,rgba(11,37,69,.46) 45%,transparent 100%)}
.op-badges{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.op-dev{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(255,255,255,.95);border-radius:8px;padding:5px 7px;display:grid;place-items:center;height:36px;min-width:36px}
.op-dev img{max-height:26px;max-width:62px;width:auto;object-fit:contain}
.op-price{position:absolute;left:12px;bottom:10px;z-index:2;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.op-price b{display:block;font-family:var(--font-display);font-size:1.3rem;font-weight:600;line-height:1.1}
.op-price span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.92;font-weight:700}
.op-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.op-title{font-weight:700;font-size:1rem;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.op-sub{font-size:.82rem;color:var(--muted);display:flex;gap:5px;align-items:flex-start;line-height:1.4}
.op-sub svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--gold-3)}
.op-meta{display:flex;gap:10px 14px;flex-wrap:wrap;font-size:.78rem;font-weight:600;color:var(--ink-2);margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.op-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.op-meta svg{width:14px;height:14px;color:var(--navy-3);flex:none}
.badge.live{background:#E8F6EE;color:#0F5A32}
.badge.fast{background:#FDF0DC;color:#8A5A10}
.badge.sold{background:#EFEFEF;color:#6B7280}
.badge.plan{background:rgba(11,37,69,.92);color:#fff}

/* Filter bar / drawer */
.op-catalogue{position:relative}
.op-bar{position:sticky;top:72px;transition:top .3s var(--ease);z-index:45;background:var(--cream);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.op-bar-inner{display:flex;gap:10px;align-items:center;padding:12px 0;flex-wrap:wrap}
.op-search{flex:1;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 16px;min-width:0}
.op-search input{border:0;outline:none;background:transparent;width:100%;min-width:0;font-size:16px;font-weight:500}
.op-search svg{width:17px;height:17px;color:var(--muted);flex:none}
.op-filter-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.op-filter-btn .n{background:var(--gold);color:#1B1407;border-radius:999px;min-width:19px;height:19px;display:grid;place-items:center;font-size:.7rem;font-weight:800;padding:0 5px}
.op-count{font-size:.85rem;color:var(--muted);font-weight:600;white-space:nowrap}
.op-sheet{position:fixed;inset:0;z-index:120;display:none}
.op-sheet.open{display:block}
.op-sheet-bg{position:absolute;inset:0;background:rgba(11,37,69,.45);backdrop-filter:blur(2px)}
.op-sheet-panel{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--cream);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slideIn .32s var(--ease)}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.op-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);border-bottom:1px solid var(--line)}
.op-sheet-head h3{font-size:1.3rem}
.op-sheet-body{flex:1;overflow:auto;padding:18px var(--gutter);display:grid;gap:14px;align-content:start;-webkit-overflow-scrolling:touch}
.op-sheet-foot{padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:10px;background:#fff}
.op-sheet-foot .btn{flex:1}
.op-sheet .field{background:#fff}
.op-sheet .field select,.op-sheet .field input{font-size:16px}
@media (min-width:901px){
  .op-sheet{position:static;display:block!important}
  .op-sheet-bg{display:none}
  .op-sheet-panel{position:static;width:auto;background:transparent;box-shadow:none;animation:none;display:block}
  .op-sheet-head,.op-sheet-foot{display:none}
  .op-sheet-body{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 0 14px;overflow:visible}
  .op-filter-btn{display:none}
}
.op-chiprow{display:flex;gap:8px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.op-chiprow::-webkit-scrollbar{display:none}
.op-chiprow .chip{white-space:nowrap;flex:none;gap:6px}
.op-chiprow .chip .muted{font-weight:600}

/* Project detail */
.op-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--sand);aspect-ratio:16/9}
.op-hero img{width:100%;height:100%;object-fit:cover}
.op-thumbs{display:flex;gap:8px;overflow-x:auto;padding-top:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.op-thumbs::-webkit-scrollbar{display:none}
.op-thumbs button{flex:none;width:92px;aspect-ratio:3/2;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--sand);cursor:pointer}
.op-thumbs button.on{border-color:var(--gold)}
.op-thumbs img{width:100%;height:100%;object-fit:cover}
.unit-table{width:100%;border-collapse:collapse;font-size:.92rem}
.unit-table th{text-align:left;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;padding:0 12px 10px 0;white-space:nowrap}
.unit-table td{padding:12px 12px 12px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.unit-table td b{color:var(--navy)}
.plan-row{display:flex;gap:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-top:6px}
.plan-row div{flex:1;padding:12px 10px;text-align:center;background:#fff;border-right:1px solid var(--line)}
.plan-row div:last-child{border-right:0}
.plan-row b{display:block;font-family:var(--font-display);font-size:1.45rem;color:var(--navy);line-height:1}
.plan-row span{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* Sticky mobile action bar */
.mobile-bar[hidden]{display:none!important}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:8px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.mobile-bar .btn{flex:1;padding:13px 10px}
@media (max-width:760px){
  .mobile-bar{display:flex}
  body.has-mobile-bar{padding-bottom:78px}
  /* The sticky bar already carries a WhatsApp CTA, so the bubble is duplicate chrome here. */
  body.has-mobile-bar .wa-float{display:none}
}
/* Detail pages keep a WhatsApp button in the sticky sidebar; the floating bubble would sit
   on top of the form's submit button at laptop widths, so it stands down on those pages. */
@media (min-width:761px){ body.has-side-cta .wa-float{display:none} }

/* ==========================================================================
   Phone tuning
   ========================================================================== */
@supports (height:100svh){.hero{min-height:min(100svh,920px)}}
@media (max-width:760px){
  .hero{min-height:auto}
  .hero-content{padding:132px 0 40px}
  .hero h1{font-size:clamp(2.1rem,9vw,3rem);max-width:none}
  .hero .lead{font-size:1rem;margin-top:14px}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .hero-badges{gap:10px 16px;font-size:.68rem;margin-top:24px}
  .hero-dots{bottom:14px}
  .search-panel{margin-top:-28px}
  .search-card{padding:12px;border-radius:16px}
  .search-tabs{width:100%}
  .search-tabs button{flex:1}
  .section{padding-block:clamp(44px,9vw,72px)}
  .section-head{margin-bottom:24px;gap:16px}
  .section-head .link{font-size:.86rem}
  .split{gap:28px}
  .split .media{aspect-ratio:16/11}
  .split .media .float{left:12px;bottom:12px;padding:12px 16px;min-width:0}
  .split .media .float b{font-size:1.6rem}
  .cta-band{padding:30px 22px;border-radius:16px;gap:20px}
  .quote{padding:26px 22px}
  .quote::before{font-size:4.2rem;top:4px;left:16px}
  .story-quote{font-size:1.2rem;padding-left:16px;margin:20px 0}
  .page-hero{padding:124px 0 46px}
  .page-hero h1{font-size:clamp(2rem,8.5vw,2.8rem)}
  .footer{padding:52px 0 24px}
  .footer-grid{gap:30px}
  .marquee-track{gap:34px}
  .marquee-track img{height:34px}
  .num{font-size:2.6rem}
  .pillar,.service{padding:22px 20px}
  .op-bar{top:60px}
  .op-bar-inner{padding:10px 0;gap:8px}
  .op-search{order:1;flex:1 1 100%}
  .op-filter-btn{order:2}
  .op-count{order:3;margin-left:auto}
  .op-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .op-body{padding:11px 12px 13px;gap:5px}
  .op-title{font-size:.88rem;-webkit-line-clamp:2}
  .op-sub{font-size:.74rem}
  .op-meta{font-size:.7rem;gap:6px 10px;padding-top:9px}
  .op-price b{font-size:1.05rem}
  .op-dev{height:30px;min-width:30px;padding:4px 5px}
  .op-dev img{max-height:21px;max-width:48px}
  .op-media{aspect-ratio:4/3}
  .plan-row div{padding:10px 4px}
  .plan-row b{font-size:1.15rem}
  .plan-row span{font-size:.54rem;letter-spacing:.04em;line-height:1.25}
  .op-hero{aspect-ratio:4/3}
  .unit-table{font-size:.86rem}
  .unit-table td,.unit-table th{padding-right:8px}
}
@media (max-width:400px){.op-grid{grid-template-columns:1fr}.op-media{aspect-ratio:16/10}}
/* Inputs must be >=16px or iOS zooms the page on focus */
@media (max-width:900px){
  .field select,.field input,.form textarea,.op-search input{font-size:16px}
  .btn{padding:13px 22px}
  .btn-sm{padding:11px 16px}
  .nav a,.socials a,.chip{min-height:40px;display:inline-flex;align-items:center}
  .chip{padding:9px 14px}
}
.wa-float{bottom:calc(16px + env(safe-area-inset-bottom))}
@media (hover:none){
  .card:hover,.op-card:hover,.agent-card:hover,.pillar:hover,.service:hover{transform:none;box-shadow:var(--shadow-sm)}
  .card:hover .card-media img,.op-card:hover .op-media img{transform:none}
}
img{content-visibility:auto}
.skeleton{background:linear-gradient(90deg,var(--sand) 25%,#F7F3EA 50%,var(--sand) 75%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:var(--radius)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.op-skel{aspect-ratio:16/11;border-radius:var(--radius)}

/* ==========================================================================
   Legal / long-form documents
   ========================================================================== */
.legal{display:grid;grid-template-columns:260px 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.legal{grid-template-columns:1fr}}
.legal-toc{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px}
@media (max-width:900px){.legal-toc{position:static}}
.legal-toc h2{font-family:var(--font-body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:grid;gap:7px}
.legal-toc li{counter-increment:toc;font-size:.86rem;line-height:1.4}
.legal-toc a{color:var(--ink-2);display:flex;gap:8px}
.legal-toc ol a::before{content:counter(toc);color:var(--gold-3);font-weight:800;font-variant-numeric:tabular-nums;flex:none;min-width:14px}
.legal-toc a:hover{color:var(--navy)}
.legal-body{max-width:72ch;min-width:0}
.legal-body h2{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:44px 0 12px;scroll-margin-top:110px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body h3{font-size:1.1rem;font-family:var(--font-body);font-weight:800;color:var(--navy);margin:24px 0 8px}
.legal-body p,.legal-body li{color:var(--ink-2);line-height:1.75}
.legal-body ul,.legal-body ol{padding-left:20px;margin:0 0 1em}
.legal-body li{margin-bottom:8px}
.legal-body a{color:var(--navy);border-bottom:1px solid var(--gold);font-weight:600}
.legal-body a:hover{color:var(--gold-3)}
.legal-body strong{color:var(--navy)}
.legal-meta{display:flex;gap:10px 22px;flex-wrap:wrap;padding:14px 18px;background:var(--gold-soft);border-radius:12px;margin-bottom:30px;font-size:.86rem}
.legal-meta b{color:var(--navy)}
.legal-note{border-left:3px solid var(--gold);background:#fff;border-radius:0 12px 12px 0;padding:16px 20px;margin:22px 0}
.legal-note p{margin:0;font-size:.93rem}
.legal-body table{width:100%;border-collapse:collapse;font-size:.9rem;margin:16px 0}
.legal-body th{text-align:left;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;padding:0 12px 10px 0}
.legal-body td{padding:11px 12px 11px 0;border-top:1px solid var(--line);vertical-align:top}

/* Cookie notice */
.cookie-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:95;max-width:600px;margin-inline:auto;
  background:var(--navy);color:#DCE3EE;border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-lg);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  bottom:calc(16px + env(safe-area-inset-bottom));animation:cookieIn .4s var(--ease)}
@keyframes cookieIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cookie-note p{margin:0;font-size:.86rem;line-height:1.5;flex:1 1 260px;min-width:0}
.cookie-note a{color:var(--gold-2);border-bottom:1px solid var(--gold-3)}
.cookie-note .btn{flex:none;padding:10px 20px}
@media (max-width:620px){.cookie-note{left:10px;right:10px;padding:14px}.cookie-note .btn{width:100%}}
body.has-mobile-bar .cookie-note{bottom:calc(86px + env(safe-area-inset-bottom))}

/* FAQ accordion */
.faq{display:grid;gap:10px;max-width:860px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq details[open]{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;padding:18px 48px 18px 20px;font-weight:700;color:var(--navy);position:relative;list-style:none;font-size:1rem;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--gold-3);border-bottom:2px solid var(--gold-3);transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .answer{padding:0 20px 18px;color:var(--ink-2);line-height:1.75;font-size:.95rem}
.faq .answer p{margin:0 0 .8em}.faq .answer p:last-child{margin:0}
.footer-legal{display:flex;gap:8px;flex-wrap:wrap}
.footer-legal a{color:#B7C3D3}
.footer-legal a:hover{color:var(--gold-2)}
@media (max-width:620px){.footer-bottom{flex-direction:column;gap:10px}}

/* ==========================================================================
   Community (area) cards and pages
   ========================================================================== */
.area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(14px,2vw,24px)}
.area-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);min-width:0}
.area-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.area-card .pic{position:relative;aspect-ratio:16/10;background:var(--sand);overflow:hidden}
.area-card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.area-card:hover .pic img{transform:scale(1.05)}
.area-card .pic::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(0deg,rgba(11,37,69,.6),transparent)}
.area-card .pic h3{position:absolute;left:16px;bottom:12px;z-index:2;color:#fff;font-size:1.35rem;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.area-card .body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.area-card p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.area-stats{display:flex;gap:12px;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
.area-stats div{min-width:0}
.area-stats b{display:block;font-family:var(--font-display);font-size:1.25rem;color:var(--navy);line-height:1.1}
.area-stats span{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.area-tags{display:flex;gap:6px;flex-wrap:wrap}
.area-tags span{font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--gold-soft);color:var(--gold-3);padding:4px 9px;border-radius:999px}
@media (max-width:620px){
  .area-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .area-card .pic h3{font-size:1rem;left:11px;bottom:9px}
  .area-card .body{padding:11px;gap:9px}
  .area-card p{-webkit-line-clamp:2;font-size:.76rem}
  .area-stats b{font-size:1rem}.area-stats span{font-size:.56rem}
  .area-tags span{font-size:.58rem;padding:3px 7px}
}
@media (max-width:400px){.area-grid{grid-template-columns:1fr}}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
@media (max-width:1000px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.why-card .k{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--gold-3);margin-bottom:12px}
.why-card h3{font-size:1.2rem;margin-bottom:8px}
.why-card p{margin:0;color:var(--muted);font-size:.92rem}
.bg-navy .why-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.bg-navy .why-card h3{color:#fff}
.bg-navy .why-card p{color:#B7C3D3}
.seo-copy{max-width:78ch;color:var(--muted);font-size:.93rem;line-height:1.8}
.seo-copy h2{font-size:1.5rem;margin-bottom:12px}
.seo-copy p{margin-bottom:1em}
.seo-copy a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--gold)}

/* When the header retracts on scroll-down it leaves a strip of bare page above the sticky
   filter bar; following the header's real state closes it. */
body.nav-hidden .filters,body.nav-hidden .op-bar{top:0}
/* A six-field filter panel pinned on a phone eats 44% of the screen — let it scroll away there. */
@media (max-width:760px){
  .filters{position:static}
  .op-bar{top:60px}
  body.nav-hidden .op-bar{top:0}
}
.desc-list{list-style:none;padding:0;margin:0 0 1.1em;display:grid;gap:7px}
.desc-list li{position:relative;padding-left:20px;color:var(--ink-2)}
.desc-list li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ==========================================================================
   Cards with their own WhatsApp action
   Cards are <article> so the action can sit inside without nesting anchors.
   ========================================================================== */
.card,.op-card{position:relative}
.card-body,.op-body{position:relative}
.card-link{position:absolute;inset:0;z-index:1}
.card-media,.op-media{z-index:0}
.card-wa{position:relative;z-index:2;margin-top:12px;width:100%;justify-content:center;padding:11px 14px;font-size:.84rem}
.card-wa svg{width:17px;height:17px}
.op-card .card-wa{margin-top:10px}
.card:hover .card-wa,.op-card:hover .card-wa{box-shadow:0 8px 18px rgba(37,211,102,.32)}
@media (max-width:620px){.op-card .card-wa{padding:9px 10px;font-size:.74rem}.op-card .card-wa svg{width:14px;height:14px}}

/* ==========================================================================
   Hero — search lives inside it, and the copy has to read over photography
   ========================================================================== */
.hero{display:block;min-height:auto}
.hero-media::after{
  /* Dark from the left and the foot, so the headline never sits on bright sky or stonework. */
  background:
    linear-gradient(100deg, rgba(8,26,48,.92) 0%, rgba(8,26,48,.78) 34%, rgba(8,26,48,.34) 62%, rgba(8,26,48,.18) 100%),
    linear-gradient(0deg, rgba(8,26,48,.80) 0%, rgba(8,26,48,.12) 46%, rgba(8,26,48,.30) 100%);
}
.hero-content{padding:168px 0 76px;max-width:none}
.hero .eyebrow{color:#EBD49A;margin-bottom:20px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hero h1{
  max-width:16ch;font-weight:600;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.6rem,6.2vw,5.2rem);
  text-shadow:0 2px 4px rgba(8,26,48,.45),0 10px 40px rgba(8,26,48,.55);
}
.hero h1 em{font-style:italic;color:#F0D79B;text-shadow:0 2px 4px rgba(8,26,48,.5)}
.hero .lead{
  max-width:52ch;margin-top:20px;color:#E8EEF6;font-weight:500;
  font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.65;
  text-shadow:0 1px 3px rgba(8,26,48,.6);
}

/* Search bar, inside the hero */
.hero-search{
  margin-top:32px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-radius:999px;padding:8px 8px 8px 10px;max-width:860px;
  box-shadow:0 20px 50px rgba(8,26,48,.35);
}
.hero-search .search-tabs{background:var(--ivory);margin:0;flex:none}
.hero-search .search-tabs button{padding:9px 20px;font-size:.85rem}
.hs-input{flex:1 1 240px;display:flex;align-items:center;gap:10px;min-width:0;padding:0 6px}
.hs-input svg{width:18px;height:18px;color:var(--muted);flex:none}
.hs-input input{border:0;outline:none;background:transparent;width:100%;min-width:0;font-size:16px;font-weight:600;color:var(--navy)}
.hs-input input::placeholder{color:#9AA3AF;font-weight:500}
.hs-select{flex:none;border-left:1px solid var(--line);padding-left:12px}
.hs-select select{border:0;outline:none;background:transparent;font-size:15px;font-weight:700;color:var(--navy);appearance:none;-webkit-appearance:none;padding-right:18px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center}
.hs-go{flex:none;padding:14px 30px}

/* Quick links under the search */
.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hero-chips a{
  font-size:.82rem;font-weight:600;color:#fff;padding:8px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.1);backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s;
}
.hero-chips a:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}
.hero-badges{margin-top:34px;color:#CBD7E6}
.hero-badges span{text-shadow:0 1px 2px rgba(0,0,0,.5)}

@media (max-width:900px){
  .hero-content{padding:140px 0 56px}
  .hero h1{max-width:none;font-size:clamp(2.2rem,8.4vw,3.2rem)}
  .hero-search{border-radius:18px;padding:10px;gap:8px}
  .hero-search .search-tabs{width:100%}
  .hero-search .search-tabs button{flex:1}
  .hs-input{flex:1 1 100%;padding:4px 6px}
  .hs-select{flex:1 1 auto;border-left:0;padding-left:6px}
  .hs-go{flex:1 1 auto;justify-content:center}
  .hero-chips{gap:7px}
  .hero-chips a{font-size:.75rem;padding:7px 12px}
  .hero-badges{margin-top:26px}
}

/* ==========================================================================
   Dropdown navigation
   ========================================================================== */
.nav{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav .nav-link{display:inline-flex;align-items:center;gap:5px;padding:10px 12px;border-radius:999px;
  font-weight:600;font-size:.9rem;color:#fff;opacity:.92;transition:background .2s,opacity .2s;white-space:nowrap}
.nav .nav-link svg{width:12px;height:12px;opacity:.75;transition:transform .25s var(--ease)}
.nav-item.open .nav-link svg{transform:rotate(180deg)}
.nav .nav-link:hover,.nav .nav-link.active,.nav-item.open .nav-link{opacity:1;background:rgba(255,255,255,.14)}
.header.solid .nav .nav-link,.header.always-solid .nav .nav-link{color:var(--navy)}
.header.solid .nav .nav-link:hover,.header.solid .nav .nav-link.active,.header.solid .nav-item.open .nav-link,
.header.always-solid .nav .nav-link:hover,.header.always-solid .nav .nav-link.active,.header.always-solid .nav-item.open .nav-link{background:var(--gold-soft)}

.nav-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:290px;padding-top:12px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:60}
.nav-item.open .nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-menu-inner{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 48px rgba(11,37,69,.22);
  padding:8px;display:grid;gap:2px;overflow:hidden}
.nav-menu a{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:10px 12px;border-radius:9px;
  color:var(--ink-2);transition:background .18s}
.nav-menu a:hover,.nav-menu a:focus-visible{background:var(--ivory);outline:none}
.nav-menu a b{font-size:.92rem;font-weight:700;color:var(--navy);grid-column:1}
.nav-menu a i{grid-column:2;grid-row:1;font-style:normal;font-size:.72rem;font-weight:700;color:var(--gold-3);
  background:var(--gold-soft);border-radius:999px;padding:2px 8px;align-self:center}
.nav-menu a span{grid-column:1/-1;font-size:.79rem;color:var(--muted);line-height:1.4;margin-top:2px}

/* The breakpoint has to be restated here. The `.nav{display:flex}` that opens this section sits
   later in the file than the one at the top, so it was overriding it and the desktop menu rendered
   on phones, pushing the logo and the burger off the screen. */
@media (max-width:1180px){
  .nav,.header-cta .btn-text{display:none}
  .burger{display:grid}
}

/* Mobile: the same sections as a plain expandable list */
.mobile-nav .m-group{border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav .m-group summary{font-family:var(--font-display);font-size:2rem;font-weight:600;padding:10px 0;
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.mobile-nav .m-group summary::-webkit-details-marker{display:none}
.mobile-nav .m-group summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--gold-2);
  border-bottom:2px solid var(--gold-2);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:6px}
.mobile-nav .m-group[open] summary::after{transform:rotate(-135deg)}
.mobile-nav .m-group a{font-family:var(--font-body);font-size:1.02rem;font-weight:600;padding:9px 0 9px 16px;
  border-bottom:0;color:#C7D2E0;display:flex;gap:8px;align-items:center}
.mobile-nav .m-group a i{font-style:normal;font-size:.7rem;font-weight:700;color:var(--gold-2);
  background:rgba(255,255,255,.1);border-radius:999px;padding:2px 7px}
.mobile-nav .m-group a:last-of-type{padding-bottom:16px}

/* Developer cards and pages */
.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(14px,2vw,22px)}
.dev-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);min-width:0}
.dev-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.dev-pic{position:relative;aspect-ratio:16/10;background:var(--sand);overflow:hidden}
.dev-pic img{width:100%;height:100%;object-fit:cover}
.dev-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,37,69,.45),transparent 55%)}
.dev-logo{position:absolute;left:12px;bottom:12px;z-index:2;background:#fff;border-radius:9px;padding:6px 9px;display:grid;place-items:center;height:42px;min-width:42px}
.dev-logo img{max-height:28px;max-width:84px;width:auto;object-fit:contain}
.dev-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.dev-body h3{font-size:1.15rem}
.dev-body p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dev-hero-logo{background:#fff;border-radius:12px;padding:10px 14px;display:inline-grid;place-items:center;margin-bottom:16px}
.dev-hero-logo img{max-height:46px;max-width:160px;width:auto;object-fit:contain;display:block}
@media (max-width:620px){.dev-grid{grid-template-columns:repeat(2,1fr);gap:11px}.dev-body{padding:11px;gap:8px}.dev-body h3{font-size:.95rem}.dev-body p{-webkit-line-clamp:2;font-size:.76rem}}
@media (max-width:400px){.dev-grid{grid-template-columns:1fr}}
.guide-list{display:grid;gap:7px}
.guide-list a{font-size:.86rem;line-height:1.4;color:var(--ink-2);padding-left:12px;border-left:2px solid var(--line)}
.guide-list a:hover{color:var(--navy);border-left-color:var(--gold)}

/* ==========================================================================
   Dubai property guides
   Long-form editorial pages. Reuses .legal two-column shell, .faq accordion,
   .pillar cards and .checks lists; everything below is what those did not cover.
   ========================================================================== */
.guide-hero{padding:132px 0 46px}
.guide-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:22px;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.guide-meta span{display:inline-flex;align-items:center;gap:8px}
.guide-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);margin-right:10px}
.toc-sep{height:1px;background:var(--line);margin:20px 0 16px}
.guide-list{display:grid;gap:2px}
.guide-list a{font-size:.86rem;line-height:1.45;color:var(--ink-2);padding:6px 0 6px 12px;border-left:2px solid var(--line)}
.guide-list a:hover{color:var(--navy);border-left-color:var(--gold);background:var(--gold-soft)}

/* Numbered process lists */
.legal-body ol.steps{list-style:none;margin:18px 0 24px;padding:0;counter-reset:step;display:grid;gap:14px}
.legal-body ol.steps li{counter-increment:step;display:grid;grid-template-columns:30px 1fr;gap:14px;
  color:var(--ink-2);line-height:1.7;align-items:start}
.legal-body ol.steps li::before{content:counter(step);font-family:var(--font-body);font-weight:800;font-size:.8rem;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold-3);font-variant-numeric:tabular-nums}

/* Fee and comparison tables */
.table-wrap{margin:20px 0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data-table{width:100%;min-width:460px;border-collapse:collapse;font-size:.9rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.data-table th,table.data-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);
  color:var(--ink-2);line-height:1.55;vertical-align:top}
table.data-table thead th{background:var(--ivory);color:var(--navy);font-weight:800;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
table.data-table tbody th{font-weight:700;color:var(--navy);text-transform:none;letter-spacing:0;font-size:.9rem;padding:13px 16px}
table.data-table tbody tr:last-child th,table.data-table tbody tr:last-child td{border-bottom:0}
table.data-table tbody tr:hover{background:var(--cream)}
.table-foot{font-size:.82rem;color:var(--muted);line-height:1.6;margin:10px 2px 0}
.legal-body .faq{max-width:none;margin-top:18px}
.legal-body .faq summary{font-size:.98rem}

/* Hub cards */
.guide-grid .pillar{display:flex;flex-direction:column;gap:10px}
.pillar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pillar-tag{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-3);background:var(--gold-soft);border-radius:999px;padding:5px 11px}
.guide-grid .pillar h3{font-size:1.5rem;margin:0}
.guide-grid .pillar .link{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-body);font-size:.84rem;font-weight:800;letter-spacing:.04em;color:var(--gold-3)}
.guide-grid .pillar .link svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.guide-grid .pillar:hover .link svg{transform:translateX(4px)}
@media (max-width:620px){.guide-hero{padding:112px 0 34px}}

/* Hub link index: real anchors in the raw HTML for crawlers, collapsed by default for readers */
.hub-index-wrap{padding-top:0}
.hub-index{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.hub-index summary{cursor:pointer;list-style:none;padding:16px 20px;display:flex;align-items:center;gap:12px;
  font-weight:700;color:var(--navy);font-size:.95rem}
.hub-index summary::-webkit-details-marker{display:none}
.hub-index summary::after{content:"";width:8px;height:8px;margin-left:auto;
  border-right:2px solid var(--gold-3);border-bottom:2px solid var(--gold-3);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.hub-index[open] summary::after{transform:rotate(-135deg)}
.hub-index summary i{font-style:normal;font-size:.72rem;font-weight:800;color:var(--gold-3);
  background:var(--gold-soft);border-radius:999px;padding:3px 9px}
.hub-index-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 18px;
  padding:4px 20px 18px;border-top:1px solid var(--line);max-height:420px;overflow-y:auto}
.hub-index-links a{font-size:.84rem;line-height:1.5;color:var(--ink-2);padding:4px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-index-links a:hover{color:var(--navy);text-decoration:underline}
.hub-index-also{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hub-index-also a{font-size:.82rem;font-weight:700;color:var(--gold-3);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;background:#fff}
.hub-index-also a:hover{border-color:var(--gold);background:var(--gold-soft)}

/* ==========================================================================
   Phone layout corrections
   Narrow-screen fixes kept together so the breakpoints are in one place.
   ========================================================================== */
@media (max-width:620px){
  /* A three-column fee table cannot fit, and a sideways scroll goes unnoticed, so restack
     each row as a labelled block. data-label comes from the column heading. */
  .table-wrap{overflow:visible}
  table.data-table{min-width:0;border:0;background:transparent}
  table.data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.data-table tbody tr{display:block;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);padding:4px 2px;margin-bottom:10px}
  table.data-table tbody tr:hover{background:#fff}
  table.data-table tbody th{display:block;border-bottom:1px solid var(--line);
    font-size:.95rem;padding:11px 14px 9px;color:var(--navy)}
  table.data-table tbody td{display:grid;grid-template-columns:minmax(84px,38%) 1fr;gap:12px;
    border-bottom:1px solid var(--line);padding:9px 14px;font-size:.88rem}
  table.data-table tbody td:last-child{border-bottom:0}
  table.data-table tbody td::before{content:attr(data-label);font-size:.68rem;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}

  /* The eyebrow is set in wide tracking; at this width it needed to give some of it back. */
  .eyebrow{letter-spacing:.14em;font-size:.68rem;gap:9px;margin-bottom:14px}
  .hero-badges{gap:9px 14px;font-size:.66rem;letter-spacing:.06em}
  .hero-badges svg{width:14px;height:14px}

  /* Five stats over two columns left the last one stranded. Let it take the full width. */
  .stats .stat:last-child{grid-column:1/-1;border-right:0}

  /* The cookie notice covered a third of the screen. */
  .cookie-note{left:10px;right:10px;bottom:10px;padding:14px 16px;gap:10px}
  .cookie-note p{font-size:.8rem;flex-basis:100%}
  .cookie-note .btn{width:100%;padding:11px 20px}
}

@media (max-width:420px){
  /* Guide sidebar: the "other guides" links were running to two lines each. */
  .guide-list a{font-size:.82rem;padding:5px 0 5px 10px}
  .legal-toc{padding:18px 16px}
  .legal-toc li{font-size:.82rem}
  table.data-table tbody td{grid-template-columns:1fr;gap:3px}
  table.data-table tbody td::before{padding-top:0}
}

/* A button must never be wider than the screen. A long label used to force .btn past the
   container because the pill is inline-flex and does not wrap by default. */
.btn{max-width:100%}
@media (max-width:620px){
  .btn{white-space:normal;text-align:center}
  /* Native controls were rendering at 25-28px, well under a comfortable tap. */
  .form input,.form select,.form textarea,
  .filters input,.filters select,
  .search-card input,.search-card select{min-height:44px}
  .hs-input,.hs-select{min-height:44px}
  /* The hub A-Z index is dense by design, but give each row a real tap height. */
  .hub-index-links a{padding:8px 0;line-height:1.4}
  .hub-index-links{max-height:360px}
}
@media (max-width:620px){
  /* Footer lists and breadcrumbs were 18-21px tall, which is a small target on a phone. */
  .footer li a{display:inline-flex;align-items:center;min-height:36px}
  .crumbs a,.crumbs span{min-height:32px;display:inline-flex;align-items:center}
  .legal-toc li a{min-height:34px;align-items:center}
}
@media (max-width:620px){
  /* The 34px rule plus wide tracking pushed the eyebrow onto a second line, orphaning the
     licence number. Shorten the rule and tighten the gap so it holds one line. */
  .eyebrow::before{width:20px}
  .eyebrow{gap:8px}
}
@media (max-width:400px){
  .eyebrow::before{display:none}
  .eyebrow{font-size:.64rem;letter-spacing:.1em}
}

/* ==========================================================================
   Contrast and contained-context fixes
   ========================================================================== */

/* .cta-band is light-on-dark, but inside .legal-body the long-form typography rules sit later
   in this file and were repainting its text in body ink, leaving the paragraph and the ghost
   button almost unreadable on navy. State the band's own colours last so they hold anywhere. */
.cta-band .eyebrow{color:var(--gold-2)}
.cta-band .eyebrow::before{background:var(--gold-2)}
.cta-band h2,.cta-band h3{color:#fff}
.cta-band p,.cta-band li{color:#D6DFEA}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}
.cta-band .btn-gold{color:var(--navy)}
.cta-band a:not(.btn){color:var(--gold-2)}

/* Developer logos sat in a cramped tile underneath the image's darkening gradient, so the
   brand mark they exist to show was washed out. Lift the tile above the gradient, give the
   logo room to breathe, and keep the gradient clear of it. */
.dev-pic::after{background:linear-gradient(0deg,rgba(11,37,69,.42),transparent 48%);z-index:1}
.dev-logo{position:absolute;left:14px;bottom:14px;z-index:3;background:#fff;border-radius:12px;
  padding:10px 14px;display:grid;place-items:center;height:56px;min-width:72px;max-width:62%;
  box-shadow:0 6px 18px rgba(11,37,69,.22);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.dev-logo img{max-height:34px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
.dev-card:hover .dev-logo{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,37,69,.3)}
@media (max-width:620px){
  .dev-logo{left:9px;bottom:9px;height:42px;min-width:54px;padding:7px 10px;border-radius:9px}
  .dev-logo img{max-height:26px}
}

/* Per-person contact actions on the team and SuperAgent cards */
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.contact-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;
  padding:9px 10px;border-radius:999px;border:1px solid var(--line-2);background:#fff;
  font-size:.82rem;font-weight:700;color:var(--navy);transition:.22s var(--ease)}
.contact-btn svg{width:16px;height:16px;flex:none}
.contact-btn.wa{border-color:rgba(37,211,102,.45);color:#0E7A3C}
.contact-btn.wa:hover{background:var(--wa);border-color:var(--wa);color:#fff}
.contact-btn.mail:hover{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:420px){
  .contact-btn span{display:none}
  .contact-btn{min-height:44px}
}
/* The card body links to the profile; the footer holds its own links, so the card itself
   is no longer a single anchor. */
.agent-card-main{display:flex;flex-direction:column;flex:1;min-width:0;color:inherit}
.agent-card .body{flex:1}
.agent-foot{padding:0 20px 20px;display:flex;flex-direction:column;gap:10px}
.agent-foot .btn-block{width:100%}
.agent-foot .contact-row{margin-top:0}
@media (max-width:620px){.agent-foot{padding:0 14px 14px}}

/* Content swapped under the visitor's eye (a filter or tab change) fades in place instead of
   sliding up from below, which reads as the page jumping. Must sit after .reveal.in. */
.reveal.settle{transform:none;transition:opacity .26s var(--ease)}