/* ============================================================
   Stalwart Atmosphere — full landing page
   Hand-authored. No framework, no build step.
   Editorial dark: warm near-black ground, gold hairlines, type-led.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:#0A0A0A;
  --ink-2:#101010;
  --panel:#141412;
  --panel-2:#191916;
  --gold:#A8864A;
  --champagne:#C9A867;
  --cream:#F2ECE0;
  --cream-dim:#B9B3A6;
  --muted:#7E837B;
  --line:rgba(201,168,103,.22);
  --line-soft:rgba(242,236,224,.10);

  --display:'Cinzel',Georgia,serif;
  --body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gut:clamp(1.25rem,4vw,3.5rem);
  --max:1320px;
  --sec:clamp(3.5rem,6.5vw,6.5rem);   /* deliberately tight, not the usual 12rem */
  --r:4px;      /* controls, inputs */
  --r-lg:14px;   /* cards, images, tables, panels */

  --z-nav:40; --z-rail:30; --z-lightbox:60; --z-popup:70;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--body);font-weight:300;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:.005em}
p{margin:0}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative}
.sec--flush{padding-block:0}

/* Section label. Just the words — the numerals and hairline rules that used
   to sit in front of them read as decoration, not information. */
.mark{display:block;margin-bottom:clamp(1.1rem,2.2vw,1.7rem);
  padding-top:clamp(.8rem,1.6vw,1.2rem);border-top:1px solid var(--line)}
.mark__t{
  display:inline-block;font-family:var(--body);font-weight:400;
  font-size:clamp(.82rem,1.05vw,.95rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--champagne);
}

/* display scale */
.d1{font-size:clamp(2.6rem,7vw,6rem)}
.d2{font-size:clamp(2.15rem,4.7vw,4rem)}
.d3{font-size:clamp(1.35rem,2.2vw,1.9rem)}
.lede{font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.75;color:var(--cream-dim);max-width:60ch}
.small{font-size:.85rem;line-height:1.7;color:var(--muted)}
em{font-style:italic;color:var(--champagne)}

/* image placeholder shell */
.ph{display:block;position:relative;overflow:hidden;background-size:cover;background-position:center;border-radius:var(--r)}
.ph>img{width:100%;height:100%;opacity:0;transition:opacity .7s ease}
.ph>img.on,.ph>img[data-loaded]{opacity:1}
.img-missing{display:grid;place-items:center;min-height:180px;background:#1b1b1b;color:#777;font:12px/1 var(--body);border:1px dashed #444}

/* ============================================================ nav */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--gut);
  /* Transparent over the hero: the header used to paint its own gradient,
     which terminated at its bottom edge and read as a hard line across the
     render. The hero scrim already carries the contrast up there. */
  background:transparent;
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(10,11,10,.94);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
/* Phones: once the bar is solid it must be fully opaque - the light sections
   scrolling under a translucent bar were showing through. */
@media(max-width:999px){
  .nav.solid{background:rgba(9,9,9,.985);backdrop-filter:blur(16px)}
}
.nav__brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.nav__brand img{height:34px;width:auto;flex:none}
.nav__links{display:none;gap:clamp(1rem,2.2vw,2rem);align-items:center}
.nav__links a{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);
  padding:.4rem 0;position:relative;transition:color .25s ease}
.nav__links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s ease}
.nav__links a:hover{color:var(--cream)}
.nav__links a:hover::after{right:0}
@media(min-width:1000px){.nav__links{display:flex}}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:44px;padding:.72rem 1.5rem;border-radius:var(--r);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  border:1px solid var(--gold);color:var(--cream);
  transition:background .28s ease,color .28s ease,border-color .28s ease;
  cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--gold);color:#0A0A0A}
.btn--solid{background:var(--gold);color:#0A0A0A}
.btn--solid:hover{background:var(--champagne);border-color:var(--champagne)}
.btn--ghost{border-color:var(--line-soft);color:var(--cream-dim)}
.btn--ghost:hover{border-color:var(--gold);background:transparent;color:var(--cream)}
.btn--sm{min-height:38px;padding:.5rem 1rem;font-size:.68rem}
.btn svg{width:15px;height:15px;flex:none}

/* ============================================================ hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg .ph{width:100%;height:100%;border-radius:0;aspect-ratio:auto!important}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:
    /* vertical: darken the nav band and the copy foot */
    linear-gradient(180deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.10) 30%,rgba(8,8,8,.62) 74%,rgba(8,8,8,.97) 100%),
    /* horizontal: a reading ground under the headline column, so type never
       sits on bright sky. Falls away past the text column on wide screens. */
    linear-gradient(90deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.62) 34%,rgba(8,8,8,.12) 62%,transparent 82%);
}
@media(max-width:760px){
  .hero__bg::after{
    background:
      linear-gradient(180deg,rgba(8,8,8,.82) 0%,rgba(8,8,8,.22) 26%,rgba(8,8,8,.72) 66%,rgba(8,8,8,.98) 100%),
      linear-gradient(90deg,rgba(8,8,8,.7),rgba(8,8,8,.35));
  }
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 45%,transparent 42%,rgba(0,0,0,.42) 100%);
}
.hero__in{position:relative;z-index:2;padding-bottom:clamp(1.1rem,2.6vw,2.2rem);padding-top:clamp(5rem,11vh,7rem)}
.hero__head{display:block}
.hero__logo{width:clamp(118px,13vw,180px);height:auto;margin-bottom:clamp(.9rem,2vw,1.5rem);filter:drop-shadow(0 2px 18px rgba(0,0,0,.6))}
.hero h1{font-size:clamp(2.35rem,6.1vw,5.3rem);line-height:1.02;max-width:10ch;
  text-shadow:0 2px 40px rgba(0,0,0,.55);letter-spacing:-.005em}
.hero h1 em{display:block}
.hero__sub{margin-top:1.15rem;max-width:44ch;color:var(--cream-dim);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.7}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.4rem,2.6vw,2rem)}

/* hero stat strip — sits on the fold edge, doubles as a summary */
.hero__stats{
  position:relative;z-index:2;margin-top:clamp(1.8rem,3.6vw,2.8rem);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){.hero__stats{grid-template-columns:repeat(4,1fr)}}
.hstat{padding:clamp(2.2rem,3.4vw,3rem) clamp(1.1rem,2vw,1.8rem) clamp(1.6rem,2.4vw,2.1rem);
  border-right:1px solid var(--line-soft)}
.hstat:first-child{padding-left:0}
.hstat:last-child{border-right:0}
@media(max-width:759px){
  .hstat:nth-child(2n){border-right:0}
  .hstat:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}
.hstat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.1rem);color:var(--cream);letter-spacing:.01em;line-height:1}
.hstat span{display:block;margin-top:.55rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#9A9A93}


/* ============================================================ statement */
.statement{background:var(--ink)}
.statement__grid{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:end}
@media(min-width:900px){.statement__grid{grid-template-columns:1.15fr .85fr}}
.statement h2{max-width:18ch}
.statement__side{display:flex;flex-direction:column;gap:1.4rem}
.factline{display:flex;gap:1rem;align-items:baseline;padding-bottom:.9rem;border-bottom:1px solid var(--line-soft)}
.factline b{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--champagne);flex:none;min-width:5.2ch}
.factline span{font-size:.9rem;color:var(--cream-dim);line-height:1.5}

/* ============================================================ full-bleed figure */
.bleed{position:relative;margin-block:0}
/* The picture box and the <img> used to be sized by different rules
   (aspect-ratio vs a clamped height), so the image never filled its frame and
   the low-quality placeholder behind it showed through as a blurred band. */
.bleed .ph{width:100%;border-radius:0;aspect-ratio:auto!important;height:clamp(340px,60vh,660px)}
.bleed .ph > img{width:100%;height:100%;object-fit:cover}
/* The caption sat bottom-left over a bright render and was unreadable.
   Overlay the figure and centre it. */
.bleed::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,.52),rgba(6,6,6,.62)),
             radial-gradient(90% 80% at 50% 50%,rgba(6,6,6,.18),rgba(6,6,6,.66));
}
.bleed__cap{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding-inline:var(--gut);
  font-family:var(--display);
  font-size:clamp(1.7rem,4.4vw,3.6rem);line-height:1.14;color:var(--cream);
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}

/* ============================================================ address */
.address{background:var(--panel)}
.address__grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem)}
@media(min-width:940px){.address__grid{grid-template-columns:.9fr 1.1fr}}
.dist{display:grid;gap:clamp(1.2rem,2.4vw,2rem)}
@media(min-width:600px){.dist{grid-template-columns:1fr 1fr}}
.dist__g h4{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-family:var(--body);font-weight:500;margin-bottom:.7rem}
.dist__g ul{list-style:none;margin:0;padding:0}
.dist__g li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.42rem 0;border-bottom:1px solid var(--line-soft);font-size:.87rem;color:var(--cream-dim)}
.dist__g li b{font-weight:400;color:var(--champagne);font-variant-numeric:tabular-nums;flex:none;font-size:.82rem}

/* ============================================================ residences */
.res{background:var(--ink)}

/* config table — real data, tabular, no card fluff */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-soft)}
table.cfg{width:100%;border-collapse:collapse;min-width:640px;font-size:.86rem}
table.cfg caption{text-align:left;padding:1rem clamp(.9rem,2vw,1.3rem);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line-soft)}
table.cfg th,table.cfg td{padding:.78rem clamp(.9rem,2vw,1.3rem);text-align:left;border-bottom:1px solid var(--line-soft)}
table.cfg th{font-family:var(--body);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
table.cfg td{color:var(--cream-dim);font-variant-numeric:tabular-nums}
table.cfg tbody tr:last-child td{border-bottom:0}
table.cfg tbody tr:hover td{background:rgba(201,168,103,.045)}
table.cfg .carpet{color:var(--champagne)}
table.cfg .cfgname{color:var(--cream)}

/* ============================================================ amenities rail */
.amen{background:var(--panel-2)}
.rail{display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;padding-bottom:1.1rem;
  scrollbar-width:thin;scrollbar-color:var(--gold) rgba(255,255,255,.06)}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--gold)}
.rail::-webkit-scrollbar-track{background:var(--line-soft)}
.rcard{flex:0 0 min(84vw,540px);scroll-snap-align:start;position:relative;background:var(--ink-2);
  border-radius:var(--r-lg);overflow:hidden;border:0;padding:0;display:block;text-align:left;cursor:pointer}
.rcard .ph{aspect-ratio:3/2}
.rcard img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.rcard:hover img{transform:scale(1.045)}
.rcard__t{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.1rem .95rem;
  background:linear-gradient(180deg,transparent,rgba(10,11,10,.9));
  font-family:var(--display);font-size:1rem;letter-spacing:.02em}
.rail-hint{margin-top:.9rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#979C94}

/* ============================================================ gallery */
.gal{background:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.filters button{
  min-height:38px;padding:.45rem 1.05rem;border:1px solid var(--line-soft);border-radius:var(--r);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  transition:color .25s ease,border-color .25s ease,background .25s ease;cursor:pointer}
.filters button:hover{color:var(--cream);border-color:var(--line)}
.filters button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0A0A0A}
/* Horizontal scroller, not a grid. Stacked tiles read as blocks and made the
   gallery the longest thing on the page; a rail keeps it cinematic and short. */
.gscroll{
  display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;padding-bottom:1.1rem;
  scrollbar-width:thin;scrollbar-color:var(--gold) rgba(255,255,255,.06);
}
.gscroll::-webkit-scrollbar{height:3px}
.gscroll::-webkit-scrollbar-thumb{background:var(--gold)}
.gscroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.gitem{
  flex:0 0 min(84vw,540px);scroll-snap-align:start;position:relative;
  background:var(--ink-2);cursor:pointer;overflow:hidden;border:0;padding:0;display:block;
  border-radius:var(--r);
}
.gitem .ph{aspect-ratio:3/2}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.gitem::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(8,8,8,.86));
  opacity:.85;transition:opacity .45s ease;
}
.gitem:hover img,.gitem:focus-visible img{transform:scale(1.06)}
.gitem:hover::after{opacity:1}
.gitem__t{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1.2rem 1.05rem;text-align:left;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
}
.gitem__t::before{
  content:'';display:block;width:26px;height:1px;background:var(--gold);
  margin-bottom:.6rem;transform-origin:left;transform:scaleX(0);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.gitem:hover .gitem__t::before,.gitem:focus-visible .gitem__t::before{transform:scaleX(1)}
@media(hover:none){.gitem__t::before{transform:scaleX(1)}}
.gitem[hidden]{display:none}

/* lightbox */
.lb{position:fixed;inset:0;z-index:var(--z-lightbox);background:rgba(6,7,6,.97);
  display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:84vh;object-fit:contain;border-radius:var(--r)}
.lb__cap{position:absolute;left:0;right:0;bottom:clamp(1rem,3vw,2rem);text-align:center;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim)}
.lb__x,.lb__p,.lb__n{position:absolute;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line-soft);border-radius:50%;color:var(--cream);background:rgba(10,11,10,.6);
  transition:border-color .25s ease,background .25s ease}
.lb__x:hover,.lb__p:hover,.lb__n:hover{border-color:var(--gold);background:rgba(168,134,74,.2)}
.lb__x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb__p{left:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.lb__n{right:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.lb svg{width:18px;height:18px}

/* ============================================================ media (films / voices) */
.media{background:var(--panel)}
.mgrid{display:grid;gap:clamp(1rem,2vw,1.6rem)}
@media(min-width:820px){.mgrid{grid-template-columns:repeat(2,1fr)}}
.mcard{border:1px solid var(--line-soft);background:var(--ink-2);overflow:hidden}
.mcard__frame{position:relative;aspect-ratio:16/9;background:#0c100d;display:grid;place-items:center;overflow:hidden}
.mcard__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mcard__ph{display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--muted);text-align:center;padding:1.4rem}
.mcard__ph svg{width:44px;height:44px;opacity:.5}
.mcard__ph b{font-family:var(--display);font-weight:400;font-size:.95rem;color:var(--cream-dim);letter-spacing:.02em}
.mcard__ph span{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase}
.mcard__body{padding:1rem clamp(.9rem,2vw,1.3rem) 1.15rem;border-top:1px solid var(--line-soft)}
.mcard__body h4{font-family:var(--display);font-weight:400;font-size:1.02rem;margin-bottom:.25rem}
.mcard__body p{font-size:.82rem;color:var(--muted)}

/* ============================================================ downloads / cta band */
.cta{position:relative;background:var(--ink);overflow:hidden}
.cta__bg{position:absolute;inset:0;opacity:.2}
.cta__bg .ph{width:100%;height:100%;border-radius:0;aspect-ratio:auto!important}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(10,11,10,.55),var(--ink))}
.cta__in{position:relative;z-index:2;text-align:center;max-width:56ch;margin-inline:auto}
.cta__acts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.6rem}

/* ============================================================ footer */
.foot{background:#060606;border-top:1px solid var(--line-soft);padding-block:clamp(2.2rem,4vw,3.2rem)}
.foot h5{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  font-family:var(--body);font-weight:500;margin:0 0 .7rem}
.foot p,.foot li,.foot a{font-size:.83rem;color:var(--muted);line-height:1.75}
.foot a:hover{color:var(--champagne)}
.foot ul{list-style:none;margin:0;padding:0}
.foot__logo{height:44px;width:auto;margin-bottom:.9rem}
.rera{display:inline-block;margin-top:.8rem;padding:.5rem .85rem;border:1px solid var(--line);
  font-size:.68rem;letter-spacing:.12em;color:var(--champagne);border-radius:var(--r)}
.disclaimer{margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:1.2rem;border-top:1px solid var(--line-soft);
  font-size:.72rem;line-height:1.7;color:var(--muted);max-width:100ch}
.foot__bar{margin-top:clamp(1.8rem,3.4vw,2.6rem);padding-top:1.3rem;
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font-size:.92rem;color:#9A9A93}
.foot__bar a{color:var(--champagne)}
.foot__bar a:hover{text-decoration:underline}
.foot__cta p{margin-bottom:.9rem;max-width:34ch}

/* sticky mobile action bar */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line-soft);
  border-top:1px solid var(--line);transform:translateY(100%);transition:transform .35s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
.mobar.on{transform:none}
.mobar a,.mobar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  min-height:56px;background:rgba(10,11,10,.97);backdrop-filter:blur(10px);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.mobar svg{width:17px;height:17px}
.mobar .primary{background:var(--gold);color:#0A0A0A}
@media(min-width:1000px){.mobar{display:none}}
@media(max-width:999px){body{padding-bottom:0}}

/* ============================================================ reveal */
/* Gated on .js: if scripting is off or the bundle fails, nothing is ever
   hidden. Content visibility must never depend on an observer firing. */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.js [data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .rcard img,.gitem img{transition:none}
}

/* ============================================================ popup
   Same lead-capture flow proved on the teaser: form -> thank-you with
   action buttons. Restyled to this page's system. */
.pop{position:fixed;inset:0;z-index:var(--z-popup);background:rgba(6,7,6,.86);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,2rem);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.pop.open{opacity:1;visibility:visible}
.pop__box{position:relative;width:100%;max-width:430px;max-height:92svh;overflow-y:auto;
  background:#FAF7F0;color:#1B1A17;border-radius:var(--r);padding:clamp(1.6rem,4vw,2.4rem);
  transform:translateY(16px) scale(.985);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.pop.open .pop__box{transform:none}
.pop__x{position:absolute;top:.7rem;right:.7rem;width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;color:#6B665C;transition:background .25s ease,color .25s ease}
.pop__x:hover{background:rgba(0,0,0,.06);color:#1B1A17}
.pop__x svg{width:15px;height:15px}
.pop__eyebrow{font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:#6F5A30;text-align:center;margin-bottom:.5rem}
.pop h3{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,3vw,1.7rem);color:#1B1A17;text-align:center;line-height:1.2}
.pop h3 em{color:var(--gold)}
.pop__sub{text-align:center;font-size:.84rem;color:#6B665C;margin-top:.5rem;line-height:1.6}
.pop form{margin-top:1.4rem;display:flex;flex-direction:column;gap:1rem}
.field label{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#6B665C;margin-bottom:.3rem}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid #D8D1C2;color:#1B1A17;
  font:400 .95rem/1.5 var(--body);padding:.5rem 0;border-radius:0;transition:border-color .25s ease}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:#B3ACA0}
.field textarea{resize:none}
.pop .btn{border-color:var(--gold);color:#0A0A0A;background:var(--gold);width:100%}
.pop .btn:hover{background:#96773F;border-color:#96773F}
.pop__note{font-size:.68rem;color:#6B665C;text-align:center;line-height:1.6}
.pop__err{font-size:.75rem;color:#A8322A;text-align:center;display:none}
.pop__err.on{display:block}

.thanks{text-align:center;display:none}
.thanks.on{display:block}
.thanks__acts{display:grid;gap:.55rem;margin-top:1.3rem}
.tbtn{display:flex;align-items:center;gap:.7rem;min-height:48px;padding:.7rem 1rem;
  border:1px solid #DED7C7;border-radius:var(--r);color:#1B1A17;font-size:.8rem;
  letter-spacing:.04em;transition:border-color .25s ease,background .25s ease}
.tbtn:hover{border-color:var(--gold);background:rgba(168,134,74,.07)}
.tbtn svg{width:17px;height:17px;flex:none;color:var(--gold)}
.tbtn--wa{border-color:#25D366}
.tbtn--wa svg{color:#128C7E}
.tbtn--wa:hover{background:rgba(37,211,102,.08);border-color:#128C7E}
.hair{width:54px;height:1px;background:var(--gold);margin:1rem auto}

/* ---------- touch sizing ----------
   Desktop keeps the tight editorial scale; coarse pointers get the full
   44px target the WCAG guidance asks for. */
@media (pointer:coarse){
  .btn--sm{min-height:44px;padding:.6rem 1.1rem}
  .filters button{min-height:44px;padding:.6rem 1.15rem}
  .nav__brand{min-height:44px;display:flex;align-items:center}
  .pop__x,.lb__x,.lb__p,.lb__n{width:46px;height:46px}
  .dist__g li{padding:.55rem 0}
  .foot li{padding:.15rem 0}
}

/* ============================================================ motion
   Images previously just appeared. Every figure now wipes up from its
   own frame while easing off a slight over-scale — the movement reads as
   the photograph settling, not as a UI element sliding in. */
.js .ph[data-anim]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s cubic-bezier(.22,.61,.24,1);
  will-change:clip-path;
}
/* One transform rule owns every image, composed from two custom properties:
   --par (parallax offset) and --s (reveal over-scale). Two separate rules
   both writing `transform` meant the reveal silently cancelled the parallax. */
.ph > img{transform:translate3d(0,var(--par,0px),0) scale(var(--s,1))}
.js .ph[data-anim] > img{
  --s:1.12;
  transition:transform 1.5s cubic-bezier(.22,.61,.24,1),opacity .6s ease;
}
.js .ph[data-anim].shown{clip-path:inset(0 0 0 0)}
.js .ph[data-anim].shown > img{--s:1}

/* stagger anything sitting in a row */
.js .ph[data-anim][data-d="1"]{transition-delay:.10s}
.js .ph[data-anim][data-d="1"] > img{transition-delay:.10s}
.js .ph[data-anim][data-d="2"]{transition-delay:.20s}
.js .ph[data-anim][data-d="2"] > img{transition-delay:.20s}

/* Parallax on the full-bleed figures. Driven by a CSS variable the script
   sets, so there is no layout work per frame. */
.bleed .ph{overflow:hidden}
.bleed .ph > img{--s:1.14;will-change:transform}
.js .bleed .ph[data-anim].shown > img{--s:1.14}   /* never settle to 1: parallax needs the bleed */

/* hero: a very slow drift so the first frame is never static */
@keyframes heroDrift{from{transform:scale(1.04)}to{transform:scale(1.13)}}
.hero__bg img{animation:heroDrift 26s ease-out forwards}

/* nav + text reveal easing, slightly richer than before */
.js [data-reveal]{transform:translateY(26px)}

/* amenity cards lift on hover */
.rcard{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.rcard:hover{transform:translateY(-6px)}
.rcard__t::before{
  content:'';display:block;width:24px;height:1px;background:var(--gold);
  margin-bottom:.55rem;transform-origin:left;transform:scaleX(0);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.rcard:hover .rcard__t::before{transform:scaleX(1)}
@media(hover:none){.rcard__t::before{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .js .ph[data-anim]{clip-path:none!important;transition:none!important}
  .js .ph[data-anim] > img{transform:none!important;transition:none!important}
  .hero__bg img{animation:none}
  .bleed .ph > img{--s:1;--par:0px}
  .rcard:hover{transform:none}
}


/* ============================================================ light sections
   Alternating white against the ink ground. The mid-grey panels read as
   washed-out next to the black, so the palette is now only two values:
   near-black and true white, with gold carrying across both. */
.sec--light{
  --cream:#141410;
  --cream-dim:#4A4A42;
  --muted:#6E6E64;
  --line:rgba(168,134,74,.38);
  --line-soft:rgba(20,20,16,.13);
  background:#FFFFFF;
  color:var(--cream);
}
.sec--light .mark{border-top-color:rgba(20,20,16,.16)}
.sec--light .mark__t{color:#8A6F3C}
.sec--light em{color:#8A6F3C}
.sec--light .lede{color:var(--cream-dim)}
.sec--light .dist__g h4{color:#8A6F3C}
.sec--light .dist__g li{color:var(--cream-dim);border-bottom-color:var(--line-soft)}
.sec--light .dist__g li b{color:#141410}
.sec--light .rcard{background:#F4F1EA}
.sec--light .rcard__t{
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));color:#fff;
}
.sec--light .rail-hint{color:var(--muted)}
.sec--light .mcard{background:#F7F5F0;border-color:var(--line-soft)}
.sec--light .mcard__frame{background:#EBE7DE}
.sec--light .mcard__ph{color:#5C5C53}
.sec--light .mcard__ph b{color:#141410}
.sec--light .mcard__body{border-top-color:var(--line-soft)}
.sec--light .mcard__body p{color:var(--muted)}
.sec--light .sec--light .btn{border-color:#8A6F3C;color:#141410}
.sec--light .btn:hover{background:#8A6F3C;color:#fff}
.sec--light .btn--solid{background:#8A6F3C;color:#fff}
.sec--light .btn--solid:hover{background:#6F5A30;border-color:#6F5A30}
.sec--light .rail::-webkit-scrollbar-track,
.sec--light .gscroll::-webkit-scrollbar-track{background:rgba(20,20,16,.10)}
.sec--light .rail,.sec--light .gscroll{scrollbar-color:#8A6F3C rgba(20,20,16,.10)}


/* ---------- amenities header: two columns so the right side is not dead space ---------- */
.amen__head{display:grid;gap:clamp(1.6rem,3vw,3rem);margin-bottom:clamp(1.8rem,3.4vw,2.8rem);align-items:end}
@media(min-width:900px){.amen__head{grid-template-columns:1.05fr .95fr}}
.amen__aside{display:flex;flex-direction:column;gap:clamp(1.2rem,2.2vw,1.8rem)}
.amen__figs{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft)}
.amen__figs > div{background:#fff;padding:clamp(.9rem,1.8vw,1.25rem)}
.sec:not(.sec--light) .amen__figs > div{background:var(--ink)}
.amen__figs small{font-size:.5em;letter-spacing:.06em;margin-left:.3em;color:var(--muted)}
.amen__figs b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,2vw,1.55rem);color:var(--cream);line-height:1}
.amen__figs sup{font-size:.5em}
.amen__figs span{display:block;margin-top:.4rem;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* larger primary CTA now that it stands alone */
.btn--lg{min-height:54px;padding:1rem 2.4rem;font-size:.8rem;letter-spacing:.2em}


/* ---------- counters ---------- */
[data-count]{font-style:normal;font-variant-numeric:tabular-nums;display:inline-block}
.hstat b small{font-size:.5em;letter-spacing:.06em;margin-left:.35em;color:var(--cream-dim)}

/* ---------- richer text entrance ----------
   Headings wipe up behind their own line box; body copy just rises. Both
   replay every time the block re-enters the viewport. */
.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,.61,.24,1),transform .9s cubic-bezier(.22,.61,.24,1)}
.js [data-reveal].in{opacity:1;transform:none}

.js [data-reveal] h1,.js [data-reveal] h2,.js [data-reveal] h3{
  clip-path:inset(0 0 110% 0);
  transition:clip-path 1s cubic-bezier(.22,.61,.24,1) .06s;
}
.js [data-reveal].in h1,.js [data-reveal].in h2,.js [data-reveal].in h3{clip-path:inset(0 0 -10% 0)}

/* section rails drift a little as they cross the fold */
[data-drift]{transform:translate3d(0,var(--drift,0px),0)}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal] h1,.js [data-reveal] h2,.js [data-reveal] h3{clip-path:none!important}
  [data-drift]{transform:none}
}


/* Phones: the 2x2 stat grid doubles the vertical cost of the padding that
   gives the rules room on desktop, so trim it back to keep the hero on one
   screen. */
@media(max-width:759px){
  .hstat{padding:clamp(1.2rem,4.5vw,1.6rem) clamp(.8rem,3vw,1.1rem) clamp(.9rem,3.4vw,1.2rem)}
  .hstat:first-child,.hstat:nth-child(3){padding-left:0}
}




/* ============================================================ corrections pass */

/* ---- nav: links centred in the viewport, CTA pinned right ---- */
/* .nav is already position:fixed - do not override it here, that stopped
   the header sticking. Absolute children still anchor to it. */

/* ---- softer corners across cards, media and panels ---- */
.ph{border-radius:var(--r-lg)}
.hero__bg .ph,.cta__bg .ph,.bleed .ph{border-radius:0}
.rcard,.gitem,.mcard,.tbl-wrap,.amen__figs,.pop__box{border-radius:var(--r-lg);overflow:hidden}
.rcard .ph,.gitem .ph{border-radius:0}
.amen__figs > div:first-child{border-top-left-radius:var(--r-lg)}
.amen__figs > div:nth-child(2){border-top-right-radius:var(--r-lg)}
.amen__figs > div:nth-child(3){border-bottom-left-radius:var(--r-lg)}
.amen__figs > div:last-child{border-bottom-right-radius:var(--r-lg)}
.rera,.mcard__frame{border-radius:var(--r)}
.lb img{border-radius:var(--r-lg)}

/* ---- footer: the Atmosphere lockup is a tall mark, 44px made it unreadable ---- */
.foot__logo{height:auto;width:clamp(135px,13.5vw,189px);margin-bottom:1.1rem}

/* ---- scroller shell: arrows + autoscroll ---- */
.scroller{position:relative}
.scroller__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;display:none;place-items:center;border-radius:50%;
  background:rgba(10,10,10,.62);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:background .25s ease,border-color .25s ease,opacity .25s ease;
}
@media(min-width:760px){.scroller__nav{display:grid}}
.scroller__nav:hover{background:var(--gold);border-color:var(--gold);color:#0A0A0A}
.scroller__nav[disabled]{opacity:.28;pointer-events:none}
.scroller__nav svg{width:19px;height:19px}
.scroller__nav--prev{left:8px}
.scroller__nav--next{right:8px}
.sec--light .scroller__nav{background:rgba(255,255,255,.82);border-color:rgba(20,20,16,.2);color:#141410}
.sec--light .scroller__nav:hover{background:#8A6F3C;border-color:#8A6F3C;color:#fff}

/* ---- voices: a rail, since there will be 7-8 of them ---- */
.vscroll{display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;padding-bottom:1.1rem;
  scrollbar-width:thin;scrollbar-color:var(--gold) rgba(255,255,255,.06)}
.vscroll::-webkit-scrollbar{height:3px}
.vscroll::-webkit-scrollbar-thumb{background:var(--gold)}
.vscroll .mcard{flex:0 0 min(82vw,420px);scroll-snap-align:start}

/* single walkthrough film reads better as one wide card */
.film{max-width:820px;margin-inline:auto;text-align:center}
.film .lede{margin:1rem auto clamp(1.6rem,3vw,2.4rem);max-width:52ch}
.mgrid--single{display:block;max-width:820px;margin-inline:auto}
.mgrid--single .mcard__frame{aspect-ratio:16/9}

/* ---- popup: compensate for the scrollbar so the page does not jump ---- */
html{scrollbar-gutter:stable}
body.locked{overflow:hidden}


/* ============================================================ nav / mobile menu */
.burger{display:none;width:46px;height:46px;position:relative;z-index:calc(var(--z-nav) + 2);
  border-radius:50%;background:rgba(10,10,10,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);box-shadow:0 3px 14px rgba(0,0,0,.4);
  transition:background .25s ease,border-color .25s ease}
.burger:hover,.burger[aria-expanded="true"]{background:rgba(10,10,10,.9);border-color:var(--gold)}
.burger span{display:block;width:20px;height:1.5px;background:var(--cream);margin:4px auto;border-radius:2px;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .2s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

.mmenu{
  position:fixed;inset:0;z-index:calc(var(--z-nav) + 1);
  background:rgba(9,9,9,.985);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease;
}
.mmenu.open{opacity:1;visibility:visible}
.mmenu nav{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.mmenu nav a{
  font-family:var(--display);font-size:clamp(1.45rem,6vw,2rem);color:var(--cream);
  padding:.5rem 1rem;letter-spacing:.02em;
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease;
}
.mmenu.open nav a{opacity:1;transform:none}
.mmenu.open nav a:nth-child(1){transition-delay:.06s}
.mmenu.open nav a:nth-child(2){transition-delay:.11s}
.mmenu.open nav a:nth-child(3){transition-delay:.16s}
.mmenu.open nav a:nth-child(4){transition-delay:.21s}
.mmenu.open nav a:nth-child(5){transition-delay:.26s}
.mmenu__foot{display:flex;flex-direction:column;gap:.6rem;width:min(320px,74vw)}

@media(max-width:999px){
  .burger{display:block}
}
@media(min-width:1000px){.mmenu{display:none}}

/* ============================================================ footer */
.foot{padding-block:clamp(1.9rem,3.2vw,2.6rem) clamp(1rem,1.8vw,1.4rem)}
.foot__about{margin-bottom:.8rem;max-width:44ch;font-size:.84rem;line-height:1.75;color:var(--muted)}
.foot__brand .rera{margin-top:.4rem}
.foot h5{margin-bottom:.8rem}
.foot ul li{margin-bottom:.15rem}

/* mobile: everything centred, no dangling space */
@media(max-width:759px){
  .foot{text-align:center;padding-block:clamp(2rem,7vw,2.6rem) clamp(1.1rem,4vw,1.5rem)}
  .foot__logo{margin-inline:auto}
  .foot__about{margin-inline:auto}
  .foot__bar{justify-content:center;text-align:center;gap:.4rem}
  .foot__bar span{width:100%}
  .foot__ask .btn{margin-inline:auto}   /* brand block only - the links grid is left-aligned */
}


/* ---------- footer balance ----------
   The logo asset carried 38% transparent height, which opened a gap under it
   and stretched the brand column far past the link columns. Cropped asset +
   tighter rhythm, and the columns share a baseline instead of one running long. */
.foot__logo{margin-bottom:.85rem}
.foot__about{margin-bottom:.9rem;max-width:38ch}
.foot__brand .rera{margin-top:0}


/* five even columns: brand + four short link stacks, so no column runs long
   enough to leave a visible well of empty space beneath its neighbours */
.foot__bar{align-items:center}
.foot__bar .rera{margin:0;font-size:.7rem;padding:.4rem .7rem}
@media(max-width:759px){.foot__bar .rera{display:inline-block;margin-bottom:.3rem}}


/* ============================================================ footer layout
   Two bands. A logo-height brand block in the same grid row as four short
   link lists is what left those wells of empty space beneath them. */
.foot__top{
  display:grid;gap:clamp(1.4rem,3vw,2.4rem);align-items:center;
  padding-bottom:clamp(1.3rem,2.2vw,1.7rem);
  border-bottom:1px solid var(--line-soft);
}
@media(min-width:820px){.foot__top{grid-template-columns:1.6fr 1fr;align-items:center}}
.foot__logo{display:block;width:clamp(135px,13.5vw,189px);height:auto;margin-bottom:.8rem}
.foot__about{margin:0;max-width:46ch;font-size:.86rem;line-height:1.7;color:var(--muted)}
.foot__ask p{margin-bottom:.85rem;font-size:.86rem;color:var(--muted);max-width:34ch}
@media(min-width:820px){.foot__ask{justify-self:end;text-align:right}
  .foot__ask p{margin-left:auto}}

.foot__links{
  display:grid;gap:clamp(1.2rem,2.2vw,1.9rem);align-items:stretch;
  padding-block:clamp(1.3rem,2.2vw,1.7rem) clamp(.9rem,1.5vw,1.15rem);
}
.foot__links{grid-template-columns:repeat(2,1fr)}
@media(min-width:960px){.foot__links{grid-template-columns:repeat(4,1fr)}}

.foot__bar{
  margin:0;padding-top:1rem;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;
  justify-content:space-between;font-size:.86rem;color:#9A9A93;
}
.foot__bar a{color:var(--champagne)}
.foot__bar a:hover{text-decoration:underline}

@media(max-width:559px){
  /* brand and the sign-off stay centred; the link columns run two-up and
     left-aligned inside each, which reads better than centred lists */
  .foot__top,.foot__bar{text-align:center}
  .foot__logo,.foot__about{margin-inline:auto}
  .foot__ask{text-align:center}
  .foot__ask p{margin-inline:auto}
  .foot__ask .btn{margin-inline:auto}
  .foot__bar{justify-content:center}
  .foot__bar > *{width:100%}
  .foot__links{gap:1.4rem 1.2rem;text-align:left}
  .foot__links .rera{margin-top:.7rem}
}

.foot__links .rera{margin-top:.5rem}


/* ============================================================ nav contact actions */
/* Three-column grid rather than an absolutely positioned action block: the
   absolute version sat on top of the centred menu at wide viewports. The two
   1fr rails are equal, so the middle column stays viewport-centred while the
   actions can never overlap it. */
.nav--nologo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.nav--nologo .nav__cta{grid-column:3;justify-self:end}
.nav--nologo .nav__links{grid-column:2;justify-self:center}
.nav--nologo .burger{grid-column:3;justify-self:end}
.nav__actions{display:flex;align-items:center;gap:.5rem}

/* WhatsApp keeps its own brand colour so it is recognisable at a glance */
.mmenu .btn{display:inline-flex;align-items:center;gap:.55rem}
.mmenu .btn svg{width:16px;height:16px;flex:none}

@media(max-width:999px){
  .nav--nologo{grid-template-columns:1fr auto;gap:.5rem}
  .nav--nologo .nav__cta{grid-column:1;justify-self:end}
  .nav--nologo .burger{grid-column:2}
}


/* ============================================================ sticky contact
   Round buttons on the right edge — deliberately not a full-width bottom bar.
   Circular at rest, widening into a pill to reveal the label on hover. */
.sticky-contact{
  position:fixed;right:clamp(12px,1.6vw,20px);bottom:clamp(16px,3vh,28px);
  z-index:var(--z-nav);display:flex;flex-direction:column;gap:.6rem;align-items:flex-end;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .4s ease,transform .4s ease;
}
.sticky-contact.on{opacity:1;transform:none;pointer-events:auto}

.scta{
  --sz:54px;
  display:flex;align-items:center;gap:0;
  height:var(--sz);width:var(--sz);padding:0;
  border-radius:999px;overflow:hidden;
  background:rgba(12,12,12,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);color:var(--cream);
  box-shadow:0 6px 22px rgba(0,0,0,.42);
  transition:width .42s cubic-bezier(.2,.7,.3,1),gap .42s cubic-bezier(.2,.7,.3,1),
             background .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease;
}
.scta svg{width:21px;height:21px;flex:none;margin-inline:calc((var(--sz) - 21px) / 2)}
.scta span{
  white-space:nowrap;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transition:opacity .3s ease .06s;padding-right:1.15rem;
}
@media(hover:hover){
  .scta:hover,.scta:focus-visible{width:var(--w,190px);gap:0}
  .scta:hover span,.scta:focus-visible span{opacity:1}
}
.scta--tel{--w:200px}
.scta--wa{--w:190px;border-color:rgba(37,211,102,.5)}
.scta--wa svg{color:#25D366}
.scta--wa:hover{background:#25D366;color:#07230F;border-color:#25D366}
.scta--wa:hover svg{color:#07230F}
.scta--tel svg{color:var(--champagne)}
.scta--tel:hover{background:var(--gold);color:#0A0A0A;border-color:var(--gold)}
.scta--tel:hover svg{color:#0A0A0A}

@media(max-width:759px){.scta{--sz:50px}.scta svg{width:20px;height:20px;margin-inline:15px}}
@media(prefers-reduced-motion:reduce){.sticky-contact,.scta{transition:none}}


/* ============================================================ mobile hero
   The render is 16:9. Full-bleeding it into a portrait viewport crops the
   outer two towers away, so on phones the image sits as a band at the top at
   its own aspect and the rest of the hero is brand black — the copy then
   reads on a solid ground instead of over a busy render. */
@media(max-width:759px){
  .hero{background:var(--ink);justify-content:flex-end}

  /* Full width, flush left - nudging it right left a bare strip down the left
     edge. Sized by the crop's own aspect so the podium is never trimmed. */
  .hero__bg{inset:0 0 auto 0;width:100%;height:auto}
  .hero__bg .ph{aspect-ratio:3640/2364!important;width:100%;height:auto;border-radius:0}
  .hero__bg .ph > img{width:100%;height:100%;object-fit:cover}
  /* The slow drift scales the image 1.04-1.13; on a fitted band that re-crops
     the outer towers and the podium straight back off. Hold it still here. */
  .hero__bg img{animation:none!important;transform:none!important;--s:1}

  /* Vertical merge stays ON THE IMAGE, so it resolves to solid ink exactly at
     the image's own bottom edge rather than somewhere down the hero. */
  .hero__bg::after{
    /* Copy now sits below the band, so no reading scrim is needed over the
       render - only the merge into the black beneath it. */
    background:linear-gradient(180deg,
      rgba(10,10,10,.20) 0%,
      rgba(10,10,10,.03) 18%,
      rgba(10,10,10,.01) 42%,
      rgba(10,10,10,.05) 58%,
      rgba(10,10,10,.14) 70%,
      rgba(10,10,10,.30) 79%,
      rgba(10,10,10,.50) 87%,
      rgba(10,10,10,.73) 92%,
      var(--ink)         98%,
      var(--ink)         100%);
  }
  /* a hairline of the render was showing under the gradient on some DPRs */
  .hero__bg::after{inset:0 0 -1px 0}

  /* Reading ground is a HERO-level layer: the image no longer spans the full
     width, so a scrim drawn on the image would leave the copy column unshaded.
     Held near-solid across the first third where the logo and headline sit. */
  .hero::after{background:none}   /* copy below the image sits on black already */

  /* Copy sits at the TOP so the logo and headline land beside the towers
     rather than below the image; the stat strip still holds the fold edge. */
  .hero{justify-content:stretch}
  .hero__in{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
    /* The aerial band is 100vw / 1.3737 tall, so offsetting by that plus a
       gap starts the copy immediately below it rather than over it. */
    padding-top:calc(76vw + 1.4rem);     /* = the band's own height + a gap */
    padding-bottom:clamp(.5rem,1.8vw,.9rem)}
  /* A fixed gap rather than margin-top:auto - auto pinned the strip to the
     fold and opened ~200px of dead space under the buttons. The hero now sizes
     to its content, so the next section also peeks in as a scroll cue. */
  .hero{min-height:auto}
  .hero__stats{margin-top:clamp(1.6rem,5vw,2.4rem)}
  /* both calls to action the same width, so they read as a pair */
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__logo{margin-top:0}
}

/* Enquire lives in the hamburger menu on phones — no need for it twice */
@media(max-width:999px){
  .nav--nologo .nav__cta{display:none}
  .nav--nologo{grid-template-columns:1fr auto}
  .nav--nologo .burger{grid-column:2}
}

@media(max-width:759px){
  /* claw back the height the image band needs, without dropping any content */
  .hero__logo{width:clamp(104px,26vw,130px);margin-bottom:.7rem}
  .hero h1{font-size:clamp(2.05rem,8.4vw,2.6rem)}
  .hero__sub{margin-top:.75rem;font-size:.95rem;line-height:1.6;max-width:36ch}
  .hero__cta{margin-top:1rem;gap:.55rem}
  .hstat{padding:clamp(.85rem,3.4vw,1.15rem) clamp(.7rem,2.6vw,1rem) clamp(.7rem,2.6vw,.95rem)}
  .hstat b{font-size:clamp(1.25rem,5.4vw,1.6rem)}
  .hstat span{margin-top:.35rem;font-size:.63rem;letter-spacing:.18em}
}


/* ---------- mobile footer trims ----------
   The brochure ask duplicates the sticky buttons and the hamburger menu on a
   phone, and the RERA badge was wider than its 158px grid column, which is
   what opened the blank strip beside the link lists. */
@media(max-width:759px){
  .foot__ask{display:none}
  .foot__top{padding-bottom:clamp(1rem,4vw,1.4rem)}
  .foot__links .rera{
    font-size:.63rem;letter-spacing:.04em;padding:.32rem .5rem;
    margin-top:.45rem;white-space:nowrap;
  }
}


/* ---------- short phone viewports ----------
   Below roughly 720px tall the image band plus the full hero stack cannot both
   fit, so the copy rides up over the render. The left scrim keeps it readable;
   these trims keep it out from under the fixed header and off the podium. */
@media(max-width:759px) and (max-height:720px){
  /* NOTE: do not re-cap the band by height here. Any height that is not the
     crop's own aspect makes object-fit:cover trim the podium off again. On a
     short screen the copy simply rides over the render, and the left scrim
     carries the legibility. */
  .hero__logo{width:clamp(92px,22vw,112px);margin-bottom:.5rem}
  .hero h1{font-size:clamp(1.85rem,7.4vw,2.25rem)}
  .hero__sub{margin-top:.6rem;font-size:.88rem;line-height:1.55}
  .hero__cta{margin-top:.8rem}
  .hstat{padding:.7rem .6rem .6rem}
  .hstat b{font-size:1.2rem}
  .hstat span{font-size:.58rem;margin-top:.25rem}
}

@media(max-width:759px){
  .hero__logo{filter:drop-shadow(0 2px 10px rgba(0,0,0,.85)) drop-shadow(0 0 30px rgba(0,0,0,.7))}
}




/* Areas table renders one figure (built-up), so it fits every width without a
   scroll. */
@media(max-width:759px){
  table.cfg{min-width:0;font-size:.84rem}
  table.cfg th,table.cfg td{padding:.72rem .6rem}
  table.cfg caption{padding:.85rem .6rem}
}


/* ============================================================ wing tabs
   Three wings x six units was three stacked tables' worth of page. As tabs the
   section holds one table's height and the wings read as a choice. */
.wingtabs{display:grid;gap:clamp(1rem,2vw,1.6rem);align-items:start}
@media(min-width:900px){.wingtabs{grid-template-columns:minmax(230px,.85fr) 1.7fr}}

.wingtabs__list{display:flex;flex-direction:column;gap:.5rem}
.wingtab{
  text-align:left;padding:clamp(.85rem,1.8vw,1.15rem) clamp(.9rem,1.8vw,1.2rem);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:transparent;cursor:pointer;position:relative;
  transition:border-color .3s ease,background .3s ease;
}
.wingtab:hover{border-color:var(--line)}
.wingtab[aria-selected="true"]{border-color:var(--gold);background:rgba(168,134,74,.07)}
.wingtab__name{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.1rem,1.7vw,1.4rem);color:var(--cream);line-height:1.1;
}
.wingtab__tag{display:block;margin-top:.3rem;font-size:.84rem;color:var(--cream-dim);line-height:1.5}
.wingtab__meta{
  display:block;margin-top:.5rem;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.wingtab[aria-selected="true"] .wingtab__meta{color:var(--champagne)}

/* phones: the wings run across as a scrollable strip, table underneath */
@media(max-width:899px){
  .wingtabs__list{flex-direction:row;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;
    scrollbar-width:none}
  .wingtabs__list::-webkit-scrollbar{display:none}
  .wingtab{flex:0 0 auto;min-width:9.5rem}
  .wingtab__tag{display:none}
  .wingtab__meta{margin-top:.35rem}
}

.wingpanel[hidden]{display:none}
.wingpanel .tbl-wrap{margin:0}
@media(prefers-reduced-motion:no-preference){
  .wingpanel:not([hidden]){animation:panelIn .45s cubic-bezier(.22,.61,.24,1)}
}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}


/* ---------- mobile hero head ----------
   Logo beside the heading rather than stacked above it, so the pair reads as
   one lockup directly under the aerial. */
@media(max-width:759px){
  .hero__head{display:flex;align-items:center;gap:clamp(.7rem,3vw,1rem)}
  .hero__logo{flex:0 0 auto;width:clamp(76px,21vw,96px);margin:0;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.8))}
  .hero__head h1{flex:1 1 auto;font-size:clamp(1.5rem,6.4vw,1.95rem);line-height:1.06;max-width:none}
  .hero__head h1 em{display:block}
  .hero__bg .ph{aspect-ratio:1850/1407!important}   /* the evening crop, zoomed */
}


/* Desktop copy column is held narrow so it clears the towers, which sit
   right-of-centre in the evening crop. */
@media(min-width:760px){
  .hero__sub{max-width:30ch}
}


/* ============================================================ address layout
   Heading left, render right; then one row of equal-height category cards so
   the section reads as a set rather than four ragged lists. */
.addr__top{display:grid;gap:clamp(1.6rem,3vw,2.6rem);align-items:center;
  margin-bottom:clamp(1.8rem,3.4vw,2.8rem)}
@media(min-width:940px){.addr__top{grid-template-columns:1fr 1fr}}
.addr__map{margin-top:1.3rem;display:inline-flex;align-items:center;gap:.45rem;
  min-height:34px;padding:.4rem .95rem;font-size:.62rem;letter-spacing:.14em}
.addr__map svg{width:13px;height:13px;flex:none}
@media(pointer:coarse){.addr__map{min-height:38px}}

.dist{display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:620px){.dist{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.dist{grid-template-columns:repeat(4,1fr)}}
.dist__g{background:#fff;padding:clamp(1.1rem,2.2vw,1.5rem);display:flex;flex-direction:column}
.sec:not(.sec--light) .dist__g{background:var(--ink)}
.dist__g h4{margin-bottom:.9rem}
.dist__g ul{flex:1 1 auto}
.dist__g li:last-child{border-bottom:0}

/* ============================================================ the 31st floor */
.sky31{background:var(--panel-2)}
.sky31__head{display:grid;gap:clamp(1rem,2.4vw,2rem);margin-bottom:clamp(1.6rem,3vw,2.4rem)}
@media(min-width:900px){.sky31__head{grid-template-columns:1fr 1fr;align-items:end}}
.sky31__note{
  margin-top:clamp(1.2rem,2.4vw,1.8rem);
  padding:clamp(.95rem,2vw,1.25rem) clamp(1rem,2.2vw,1.4rem);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);
  font-size:.76rem;line-height:1.65;color:var(--muted);max-width:none;
}
.sky31__note strong{color:var(--champagne);font-weight:500}

/* ============================================================ footer developer */
.foot__dev ul li a{color:var(--champagne)}
.foot__dev ul li a:hover{text-decoration:underline}
/* `.foot a` sets a font-size, so this needs to out-specify it. */
.foot a.foot__mapbtn{margin-top:.8rem;display:inline-flex;align-items:center;gap:.4rem;
  min-height:30px;padding:.3rem .7rem;font-size:.6rem;letter-spacing:.13em}
.foot a.foot__mapbtn svg{width:12px;height:12px;flex:none}
/* `.foot a:hover` (0,2,1) out-specifies `.btn:hover` (0,2,0), so the label was
   going champagne on the gold fill instead of black. The icon uses
   currentColor, so it follows once the text colour is right. */
.foot a.foot__mapbtn:hover,
.foot a.foot__mapbtn:focus-visible{background:var(--gold);border-color:var(--gold);color:#0A0A0A}
.foot a.foot__mapbtn:hover svg,
.foot a.foot__mapbtn:focus-visible svg{color:#0A0A0A}
@media(pointer:coarse){.foot a.foot__mapbtn{min-height:34px;padding:.4rem .8rem}}

/* ============================================================ back to top */
.scta--top{--w:170px;border-color:var(--line-soft)}
.scta--top svg{color:var(--cream-dim)}
.scta--top:hover{background:var(--cream);color:#0A0A0A;border-color:var(--cream)}
.scta--top:hover svg{color:#0A0A0A}


/* ---------- mobile menu close ----------
   Sized and placed to sit exactly over the burger, so it reads as the same
   control turning into an X rather than a second button appearing. */
.mmenu__close{
  position:absolute;top:14px;right:var(--gut);
  width:46px;height:46px;border-radius:50%;
  background:rgba(10,10,10,.72);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 3px 14px rgba(0,0,0,.4);
  display:grid;place-content:center;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.mmenu__close:hover,.mmenu__close:focus-visible{background:rgba(10,10,10,.92);border-color:var(--gold)}
.mmenu__close span{
  display:block;width:20px;height:1.5px;background:var(--cream);border-radius:2px;
  grid-area:1/1;
}
.mmenu__close span:first-child{transform:rotate(45deg)}
.mmenu__close span:last-child{transform:rotate(-45deg)}
@media(min-width:1000px){.mmenu__close{display:none}}

.lb__count{display:block;margin-top:.4rem;font-size:.66rem;letter-spacing:.2em;color:var(--muted)}

/* Both halves share a line-height so the gap between them matches the gap
   between the address's own wrapped lines. */
.site__near,.site__addr{display:block;line-height:1.75}
.site__near{color:var(--champagne);font-size:.83rem;margin-bottom:0}


/* Trailing chips in the footer columns share a baseline: the Google Maps
   button and the ORERA badge are pushed to the foot of their columns so they
   line up with each other instead of floating at different heights. */
.foot__links > div{display:flex;flex-direction:column}
.foot__links > div > ul{flex:0 0 auto}
.foot__links .rera,
.foot a.foot__mapbtn{margin-top:auto;align-self:flex-start}



/* Same box for both trailing chips so their tops line up as well as their
   bottoms — they sit side by side across adjacent columns. */
.foot__links .rera,
.foot a.foot__mapbtn{
  min-height:32px;padding:.35rem .8rem;font-size:.62rem;letter-spacing:.13em;
  display:inline-flex;align-items:center;
}
@media(pointer:coarse){
  .foot__links .rera,
  .foot a.foot__mapbtn{min-height:36px}
}


/* Phones: the shared chip tracking (.13em) pushed the ORERA badge past its
   158px column. Tighten it back so it fits, and keep the auto margin so both
   chips still sit on the same line. */
@media(max-width:759px){
  .foot__links .rera{letter-spacing:.03em;padding:.35rem .55rem;white-space:nowrap}
  .foot a.foot__mapbtn{letter-spacing:.1em;padding:.35rem .7rem}
}