/* ============================================================
   AVADH HABITAT — design system v3
   Warm white · stone · charcoal · soft black · muted brass
   ============================================================ */
:root{
  --paper:      #F4F0E9;   /* warm white */
  --paper-2:    #EBE5DB;   /* stone light */
  --paper-3:    #E2DACE;   /* stone */
  --ink:        #211E1A;   /* soft black */
  --charcoal:   #322E29;
  --muted:      #6E665B;   /* muted text */
  --faint:      #9A9183;
  --line:       rgba(33,30,26,.14);
  --line-soft:  rgba(33,30,26,.08);
  --brass:      #9C8862;   /* muted antique gold — hairlines only */
  --brass-lt:   #EAD9B8;   /* brass on dark surfaces */
  --green-soft: #B9C2A6;
  --water:      #AEC3C9;
  --night:      #211E1A;   /* always-dark surfaces */
  --ondark:     #F4F0E9;   /* always-light text on dark surfaces */

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --maxw: 1320px;
  --gut: clamp(22px, 5vw, 96px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-expo: cubic-bezier(.19,1,.22,1);

  /* z scale: nav 50 < menu 49? no — menu under nav toggle; lb 85 < pre 90 < progress 92 < cursor 95 */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lenis{scroll-behavior:auto}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic}

/* ---------- shared type ---------- */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.01em;
  font-size:clamp(2.4rem,5.6vw,5.2rem);
  text-wrap:balance;
}
.eyebrow,.mp__steplabel,.foot__h,.menu__meta,.stat__label{
  font-family:var(--sans);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,11vw,170px)}
.muted{color:var(--muted)}

/* section label — italic serif word led by a brass rule that draws in */
.sec-label{
  display:flex;align-items:center;gap:16px;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.4vw,1.25rem);letter-spacing:.02em;
  color:var(--charcoal);margin-bottom:clamp(28px,4vw,52px)}
.sec-label i{width:44px;height:1px;background:var(--brass);flex:none;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out) .15s}
.sec-label.in i,.sec-label:not(.reveal) i{transform:scaleX(1)}
.sec-label--dark{color:rgba(244,240,233,.88)}
@media (prefers-reduced-motion:reduce){.sec-label i{transform:scaleX(1);transition:none}}

/* ---------- reveal ---------- */
.reveal:not(.reveal--img){opacity:0;transform:translateY(13px);filter:blur(3px);
  transition:opacity .9s var(--ease),transform 1.15s var(--ease),filter .9s var(--ease)}
.reveal:not(.reveal--img).in{opacity:1;transform:none;filter:blur(0)}
.reveal--img{overflow:hidden}
.reveal--img img{clip-path:inset(0 0 100% 0);transform:scale(1.07);
  transition:clip-path 1.4s var(--ease),transform 1.5s var(--ease)}
.reveal--img.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal:not(.reveal--img){opacity:1;transform:none;filter:none;transition:none}
  .reveal--img img{clip-path:none;transform:none;transition:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper);
  background:var(--ink);padding:16px 30px;border:1px solid var(--ink);
  cursor:pointer;border-radius:1px;
  transition:background .5s var(--ease),color .5s var(--ease),transform .16s var(--ease-out);
}
.btn:hover{background:transparent;color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--full{width:100%;text-align:center}
.btn--onink{background:transparent;color:var(--ondark);border-color:rgba(244,240,233,.7)}
.btn--onink:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ---------- accessible focus ---------- */
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:1px}
.nav:not(.scrolled) a:focus-visible,.hero a:focus-visible{outline-color:var(--paper)}
.twr:focus-visible{outline:none}
.twr:focus-visible .tfill{stroke:var(--brass);stroke-width:2.5}
.btn:focus-visible{outline-offset:4px}

/* ============================================================
   ENTRY SEQUENCE
   ============================================================ */
.pre{
  position:fixed;inset:0;z-index:90;background:var(--night);color:var(--ondark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  transition:transform 1s var(--ease-expo);
}
.pre--out{transform:translateY(-101%)}
.pre--gone{display:none}
.pre__mark{display:flex;flex-direction:column;align-items:center;gap:18px}
.pre__avadh{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.5em;text-transform:uppercase;
  color:rgba(244,240,233,.75);padding-left:.5em;
  opacity:0;animation:preFade .8s var(--ease-out) .15s forwards}
.pre__rule{width:72px;height:1px;background:var(--brass);
  transform:scaleX(0);animation:preRule .9s var(--ease-out) .35s forwards}
.pre__habitat{
  font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,4.6rem);
  letter-spacing:.22em;padding-left:.22em;line-height:1.1;
  opacity:0;animation:preFade .9s var(--ease-out) .5s forwards}
.pre__foot{
  position:absolute;bottom:34px;font-family:var(--serif);font-style:italic;
  font-size:1rem;color:rgba(244,240,233,.55);
  opacity:0;animation:preFade .8s var(--ease-out) .75s forwards}
@keyframes preFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes preRule{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.pre{display:none}}

/* ============================================================
   CUSTOM CURSOR (fine pointers only)
   ============================================================ */
.cursor{
  position:fixed;top:0;left:0;z-index:95;pointer-events:none;
  width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:1px solid var(--brass);
  display:none;align-items:center;justify-content:center;
  opacity:0;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),
             margin .35s var(--ease-out),opacity .3s,background-color .35s var(--ease-out);
}
.cursor::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--brass);
  position:absolute;top:50%;left:50%;margin:-2px 0 0 -2px;transition:opacity .3s}
.cursor__label{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ondark);opacity:0;transition:opacity .3s;padding-left:.24em}
.cursor--on{opacity:1}
.cursor--hov{width:64px;height:64px;margin:-32px 0 0 -32px}
.cursor--view{width:92px;height:92px;margin:-46px 0 0 -46px;background:rgba(33,30,26,.72);border-color:rgba(156,136,98,.9)}
.cursor--view::after{opacity:0}
.cursor--view .cursor__label{opacity:1}
@media (hover:hover) and (pointer:fine){
  .cursor{display:flex}
}
@media (prefers-reduced-motion:reduce){.cursor{display:none}}

/* ============================================================
   FILM GRAIN
   ============================================================ */
.grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:92;
  background:var(--brass);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  transition:background .6s var(--ease),padding .5s var(--ease),box-shadow .6s;
  color:var(--ondark);
}
.nav:not(.scrolled){text-shadow:0 1px 24px rgba(15,13,11,.45)}
.nav.scrolled{background:var(--paper);color:var(--ink);padding-block:16px;box-shadow:0 1px 0 var(--line);text-shadow:none}
.nav__brand{display:flex;align-items:center;gap:14px}
.nav__logo{height:42px;width:auto;display:block}
.nav__logo--dark{display:none}
.nav.scrolled .nav__logo--light{display:none}
.nav.scrolled .nav__logo--dark{display:block}
.nav__branddiv{width:1px;height:30px;background:currentColor;opacity:.34}
.nav__brandtext{display:flex;flex-direction:column;line-height:.96}
.nav__brandtext em{font-family:var(--sans);font-style:normal;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;opacity:.8}
.nav__brandtext strong{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:.2em}
.nav__links{display:flex;gap:clamp(18px,2vw,30px)}
.nav__links a{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;opacity:.82;transition:opacity .3s;position:relative}
.nav__links a:hover{opacity:1}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__cta{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid currentColor;padding:11px 22px;transition:.4s var(--ease);
}
.nav.scrolled .nav__cta:hover{background:var(--ink);color:var(--paper)}
.nav:not(.scrolled) .nav__cta:hover{background:var(--paper);color:var(--ink)}
.nav__toggle{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:26px;height:1px;background:currentColor;display:block;transition:.4s}
.nav__right{display:flex;align-items:center;gap:clamp(14px,2vw,24px)}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:49;background:var(--night);color:var(--ondark);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.menu.open{opacity:1;pointer-events:auto}
.menu nav{display:flex;flex-direction:column;gap:6px}
.menu nav a{font-family:var(--serif);font-size:clamp(1.9rem,8vw,2.8rem);font-weight:300;
  display:flex;align-items:baseline;gap:18px}
.menu nav a em{font-size:.85rem;color:var(--brass);letter-spacing:.08em;font-style:italic;min-width:2ch}
.menu__meta{margin-top:42px;color:var(--faint)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:620px;display:flex;flex-direction:column;
  justify-content:flex-end;color:var(--ondark);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img,.hero__video{width:100%;height:100%;object-fit:cover;display:block}
.hero__video{animation:heroZoom 20s var(--ease) forwards;
  will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
@keyframes heroZoom{from{transform:scale(1.04) translateZ(0)}to{transform:scale(1) translateZ(0)}}
.hero__veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,18,15,.55) 0%,rgba(20,18,15,.12) 26%,rgba(20,18,15,.32) 56%,rgba(20,18,15,.86) 100%),
  linear-gradient(90deg,rgba(20,18,15,.58) 0%,rgba(20,18,15,.18) 44%,rgba(20,18,15,0) 72%)}
.hero__content{position:relative;padding:0 var(--gut);max-width:1180px;margin-bottom:clamp(40px,8vh,90px)}
.hero .eyebrow{color:rgba(244,240,233,.85);margin-bottom:24px}
.hero h1{font-family:var(--serif);font-weight:300;line-height:1.04;letter-spacing:-.015em;
  font-size:clamp(2.6rem,6.6vw,6rem)}
.hero h1 em{color:var(--brass-lt)}
.hero__sub{margin-top:26px;max-width:30ch;font-size:clamp(.95rem,1.4vw,1.18rem);color:rgba(244,240,233,.9)}
/* staged intro — masked line rise after the curtain lifts */
.hline{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hline__in{display:block;transform:translateY(112%);animation:hrise 1.25s var(--ease-out) forwards}
.hline:nth-child(1) .hline__in{animation-delay:1.5s}
.hline:nth-child(2) .hline__in{animation-delay:1.65s}
.hline:nth-child(3) .hline__in{animation-delay:1.8s}
@keyframes hrise{to{transform:translateY(0)}}
.hero__eyebrow,.hero__sub{opacity:0;animation:hsettle 1s var(--ease-out) forwards}
.hero__eyebrow{animation-delay:2.3s}
.hero__sub{animation-delay:2.45s}
.hero__foot{opacity:0;animation:hsettle 1s var(--ease-out) 2.6s forwards}
@keyframes hsettle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hline__in{transform:none;animation:none}
  .hero__eyebrow,.hero__sub,.hero__foot{opacity:1;animation:none}
}
.hero__foot{position:relative;display:flex;justify-content:space-between;align-items:center;
  padding:24px var(--gut);border-top:1px solid rgba(244,240,233,.22);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,240,233,.8)}
.hero__scroll{display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__scroll i{width:1px;height:34px;background:rgba(244,240,233,.6);animation:scrolldn 2.2s var(--ease) infinite}
@keyframes scrolldn{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   TICKER
   ============================================================ */
.tick{background:var(--night);color:rgba(244,240,233,.72);overflow:hidden;
  border-top:1px solid rgba(244,240,233,.1);padding:20px 0}
.tick__track{display:flex;align-items:center;gap:34px;width:max-content;
  animation:tickmove 36s linear infinite}
.tick__track span{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1rem,1.5vw,1.25rem);white-space:nowrap}
.tick__track i{width:5px;height:5px;background:var(--brass);transform:rotate(45deg);flex:none;opacity:.85}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick__track{animation:none}}

/* ============================================================
   THE VISION
   ============================================================ */
.innov{background:var(--paper)}
.innov .display{margin-bottom:30px}
.innov__lede{font-family:var(--serif);font-weight:300;line-height:1.4;
  font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--charcoal);max-width:34ch}
.innov__feature{max-width:var(--maxw);margin:clamp(44px,6vw,80px) auto;padding-inline:var(--gut)}
.innov__feature img{width:100%;height:auto;display:block;border:1px solid var(--line);background:#fff}

/* stats — hairline-topped counters */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,60px);
  padding-block:clamp(30px,4vw,60px)}
.stat{border-top:1px solid var(--ink);padding-top:clamp(18px,2.4vw,30px)}
.stat__num{font-family:var(--serif);font-weight:300;line-height:1;display:block;
  font-size:clamp(3.2rem,6vw,5.4rem);color:var(--ink);font-variant-numeric:tabular-nums}
.stat__num em{font-style:normal;color:var(--brass);font-size:.55em;vertical-align:.35em}
.stat__label{margin:12px 0 10px}
.stat__note{color:var(--muted);max-width:32ch}

/* ============================================================
   LIFE — editorial chapters with ghost words
   ============================================================ */
.life{background:var(--paper-2)}
.life .display{margin-bottom:clamp(40px,6vw,80px)}
.life__line{display:block}
.life__head.is-anim{will-change:opacity}
.life__head.is-anim .life__line{will-change:transform}
.editorial{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  gap:clamp(30px,5vw,80px);max-width:var(--maxw);margin:0 auto;
  padding:clamp(40px,6vw,90px) var(--gut)}
.editorial--rev{grid-template-columns:.85fr 1.15fr}
.editorial--rev .editorial__img{order:2}
.editorial--rev .editorial__txt{order:1}
.editorial__img{overflow:hidden;position:relative;z-index:1}
.editorial__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.editorial__txt{position:relative;z-index:1}
.editorial__txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.1;margin-bottom:18px}
.editorial__txt p{color:var(--muted);max-width:42ch}
/* ghost words — outlined italic serif, drifting slower than the page */
.ghost{position:absolute;z-index:0;top:-.12em;left:clamp(8px,3vw,60px);
  font-family:var(--serif);font-style:italic;font-weight:300;line-height:1;
  font-size:clamp(6rem,15vw,14rem);letter-spacing:.02em;user-select:none;pointer-events:none;
  color:transparent;-webkit-text-stroke:1px rgba(33,30,26,.16)}
@supports not (-webkit-text-stroke:1px black){.ghost{color:rgba(33,30,26,.06)}}
.ghost--r{left:auto;right:clamp(8px,3vw,60px)}

/* ============================================================
   AMENITIES — pinned stack
   ============================================================ */
.amen{background:var(--night);color:var(--ondark)}
.amen__intro{padding-block:clamp(72px,11vw,150px)}
.amen__panel{position:sticky;top:0;height:100svh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden}
.amen__bg{position:absolute;inset:0}
.amen__bg img{width:100%;height:100%;object-fit:cover}
.amen__bg.plx img{transform:scale(1.12);will-change:transform}
.amen__panel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,13,11,.35),rgba(15,13,11,.1) 40%,rgba(15,13,11,.82))}
.amen__cap{position:relative;z-index:2;padding:0 var(--gut) clamp(56px,9vh,110px);max-width:760px}
.amen__no{font-family:var(--serif);font-size:1rem;color:var(--brass-lt);letter-spacing:.2em}
.amen__cap h3{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.02;margin:14px 0 18px}
.amen__cap p{color:rgba(244,240,233,.86);max-width:46ch;font-size:clamp(.95rem,1.3vw,1.1rem)}
.amen__indexband{background:var(--paper);color:var(--ink);position:relative;z-index:3}
.amen__index{padding-block:clamp(72px,10vw,140px) 0}
.amen__index .sec-label{margin-bottom:22px}
.amen__index h4{font-family:var(--serif);font-weight:300;line-height:1.06;font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:clamp(20px,3vw,30px);color:var(--ink)}
.amenex{display:grid;grid-template-columns:minmax(240px,.85fr) 1.55fr;gap:clamp(34px,6vw,90px);
  padding-bottom:clamp(72px,10vw,140px);
  margin-top:clamp(20px,3vw,40px);align-items:start}
.amenex__tabs{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px)}
.amenex__tab{font-family:var(--serif);font-weight:300;line-height:1.05;text-align:left;cursor:pointer;
  background:none;border:0;padding:6px 0;color:var(--faint);
  font-size:clamp(1.7rem,3.2vw,2.7rem);transition:color .45s var(--ease);
  display:flex;align-items:baseline;gap:.5em}
.amenex__tab span{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.16em;color:var(--faint)}
.amenex__tab:hover{color:var(--charcoal)}
.amenex__tab.is-active{color:var(--ink)}
.amenex__tab.is-active span{color:var(--brass)}
.amenex__stage{position:relative;border-top:1px solid var(--line);padding-top:clamp(8px,1.5vw,18px)}
.amenex__panel{list-style:none;columns:2;column-gap:clamp(28px,4vw,56px)}
.amenex__panel[hidden]{display:none}
.amenex__panel li{break-inside:avoid;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--charcoal);
  padding:14px 0;border-bottom:1px solid var(--line-soft)}
.amenex__panel.is-active{animation:amenexIn .55s var(--ease)}
@keyframes amenexIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.amenex__panel.is-active{animation:none}}

/* ============================================================
   AVADH SECTION MARK
   ============================================================ */
.section{position:relative}
.section::after{content:"";position:absolute;top:clamp(24px,3.4vw,46px);right:var(--gut);
  width:36px;height:36px;background:url(assets/avadh-logo.png) no-repeat center/contain;
  opacity:.75;pointer-events:none}
.amen__intro{position:relative}
.amen__intro::after{content:"";position:absolute;top:0;right:var(--gut);
  width:36px;height:36px;background:url(assets/avadh-logo-white.png) no-repeat center/contain;opacity:.75}
.enq.section::after{background-image:url(assets/avadh-logo-white.png)}

/* ============================================================
   HORIZONTAL GALLERY — pinned drift
   ============================================================ */
.hg{background:var(--ink);color:var(--ondark);height:340svh}
.hg__pin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.hg__head{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:center;padding-top:clamp(28px,5vh,54px);max-width:none}
.hg__head .sec-label{margin-bottom:0}
.hg__count{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:rgba(244,240,233,.6);
  font-variant-numeric:tabular-nums}
.hg__track{display:flex;align-items:center;gap:clamp(24px,4vw,64px);
  padding-inline:var(--gut);will-change:transform}
.hg__item{flex:0 0 auto;width:min(72vw,960px)}
.hg__item img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hg__item figcaption{margin-top:16px;font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.4vw,1.2rem);color:rgba(244,240,233,.75)}
.hg__item figcaption em{font-style:normal;color:var(--brass-lt);margin-right:12px}
.hg__end{width:min(52vw,620px);display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.hg__endline{font-family:var(--serif);font-weight:300;line-height:1.12;
  font-size:clamp(2rem,3.6vw,3.4rem)}

/* ============================================================
   MASTER PLAN
   ============================================================ */
.mp{background:var(--paper-2)}
.mp__hint{color:var(--muted);max-width:48ch;margin-top:22px;margin-bottom:clamp(40px,5vw,64px)}
.mp__app{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);align-items:start}
.mp__plan{background:var(--paper);border:1px solid var(--line);padding:22px}
.mp__planhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mp__legend{display:flex;align-items:center;gap:8px;letter-spacing:.12em}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:14px}
.dot--3{background:var(--brass)}.dot--4{background:var(--charcoal)}
#siteSvg{width:100%;height:auto;display:block}
.mp__core{font-family:var(--sans);font-size:11px;letter-spacing:.24em;fill:var(--muted)}
.twr{cursor:pointer;transition:.35s var(--ease)}
.twr rect{transition:.35s var(--ease)}
.twr .tfill{fill:var(--paper-3);stroke:var(--faint);stroke-width:1}
.twr.is4 .tfill{fill:#D8CFC0}
.twr text{font-family:var(--sans);font-size:13px;fill:var(--charcoal);font-weight:400}
.twr:hover .tfill{fill:var(--brass);stroke:var(--brass)}
.twr.sel .tfill{fill:var(--ink);stroke:var(--ink)}
.twr:hover text,.twr.sel text{fill:var(--paper)}

.mp__detail{padding:6px 0}
.mp__step{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.mp__steplabel{margin-bottom:14px}
.mp__step h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.3rem)}
.mp__meta{color:var(--muted);margin-top:8px}
.mp__floors{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
.mp__floors button,.mp__units button{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.04em;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  padding:11px 6px;cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease),transform .15s var(--ease-out)}
.mp__floors button:active,.mp__units button:active{transform:scale(.96)}
.mp__floors button:hover,.mp__units button:hover{border-color:var(--ink)}
.mp__floors button.sel,.mp__units button.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mp__units{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mp__units button{text-align:left;padding:13px 14px;line-height:1.3}
.mp__units small{display:block;color:var(--faint);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.mp__units button.sel small{color:rgba(244,240,233,.7)}
.mp__result{background:var(--paper);border:1px solid var(--line);padding:clamp(20px,2.5vw,30px)}
.mp__resrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line-soft)}
.mp__resrow span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.mp__resrow strong{font-family:var(--serif);font-weight:400;font-size:1.25rem}
.mp__actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.mp__actions .btn{flex:1;text-align:center;padding-inline:18px}
.mp__dl{display:inline-block;margin-top:18px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.mp__dl:hover{color:var(--ink);border-color:var(--ink)}

/* ============================================================
   RESIDENCES — plan rows
   ============================================================ */
.res{background:var(--paper)}
.res .display{margin-bottom:clamp(36px,5vw,64px)}
.res__list{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
  display:grid;gap:clamp(24px,3vw,44px)}
.res__row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,72px);align-items:center;
  text-align:left;background:var(--paper-2);border:1px solid var(--line);
  padding:clamp(28px,4vw,56px);cursor:pointer;font-family:var(--sans);
  transition:background .55s var(--ease),color .55s var(--ease),transform .4s var(--ease-out)}
.res__row:hover{background:var(--ink);color:var(--paper)}
.res__row:active{transform:scale(.995)}
.res__type{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .55s var(--ease)}
.res__row:hover .res__type{color:var(--brass-lt)}
.res__area{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,4.4vw,3.6rem);margin:16px 0 6px;line-height:1;
  font-variant-numeric:tabular-nums}
.res__dash{color:var(--brass);font-size:.55em;vertical-align:.18em;margin:0 .08em}
.res__area span:last-child{font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;color:var(--muted);display:inline-block;margin-left:8px;transition:color .55s var(--ease)}
.res__row:hover .res__area span:last-child{color:rgba(244,240,233,.7)}
.res__desc{color:var(--muted);max-width:44ch;margin:18px 0 28px;transition:color .55s var(--ease)}
.res__row:hover .res__desc{color:rgba(244,240,233,.82)}
.res__view{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:4px}
.res__planimg{background:#fff;border:1px solid var(--line);padding:clamp(12px,1.6vw,22px);
  transition:opacity .55s var(--ease)}
.res__planimg img{width:100%;aspect-ratio:4/3;object-fit:contain;
  opacity:.55;filter:grayscale(1);transition:opacity .6s var(--ease),filter .6s var(--ease),transform .8s var(--ease-out)}
.res__row:hover .res__planimg img{opacity:1;filter:grayscale(0);transform:scale(1.03)}

/* ============================================================
   LOCATION
   ============================================================ */
.loc{background:var(--paper-2)}
.loc .display{margin-bottom:24px}
.loc__addr{color:var(--muted);letter-spacing:.04em;margin-bottom:clamp(40px,5vw,70px)}
.loc__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,72px);align-items:stretch}
.loc__times{list-style:none}
.loc__times li{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.loc__times strong{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3vw,2.4rem);min-width:108px;line-height:1;font-variant-numeric:tabular-nums}
.loc__times strong em{font-family:var(--sans);font-style:normal;font-size:.7rem;letter-spacing:.12em;color:var(--muted);margin-left:4px}
.loc__times span{color:var(--charcoal);letter-spacing:.04em}
.loc__map{min-height:420px;border:1px solid var(--line);overflow:hidden;background:var(--paper-3)}
.loc__map iframe{width:100%;height:100%;min-height:420px;border:0;filter:grayscale(1) contrast(.95);transition:filter .6s}
.loc__map:hover iframe{filter:grayscale(0)}

/* ============================================================
   SPECS
   ============================================================ */
.spec{background:var(--paper)}
.spec .display{margin-bottom:clamp(40px,6vw,72px)}
.spec__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.spec__col h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--ink)}
.spec__col dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.spec__col dt{font-family:var(--serif);font-size:1.05rem;padding:14px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.spec__col dd{padding:14px 0;border-bottom:1px solid var(--line-soft);color:var(--muted);text-align:right;font-size:.92rem}
.spec__broch p{color:var(--muted);margin:18px 0 26px;max-width:34ch}

/* ============================================================
   ENQUIRY — the closing act, on night
   ============================================================ */
.enq{background:var(--night);color:var(--ondark)}
.enq__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:start}
.enq__lead .sec-label{margin-bottom:20px}
.enq__lead .display{margin-bottom:24px}
.enq__copy{color:rgba(244,240,233,.72);max-width:36ch;margin-bottom:40px}
.enq__direct{display:flex;flex-direction:column;gap:10px}
.enq__direct a{font-family:var(--serif);font-size:1.3rem;width:max-content;border-bottom:1px solid transparent;transition:border-color .3s}
.enq__direct a:hover{border-color:rgba(244,240,233,.6)}
.enq__wa{color:var(--brass-lt)!important}
.enq__form{display:grid;gap:18px}
.enq__form label{display:flex;flex-direction:column;gap:8px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,240,233,.6);transition:color .3s}
.enq__form label:focus-within{color:rgba(244,240,233,.95)}
.enq__form input,.enq__form select{
  font-family:var(--serif);font-size:1.15rem;color:var(--ondark);
  background:transparent;border:0;border-bottom:1px solid rgba(244,240,233,.28);
  padding:12px 0;outline:none;transition:border-color .3s,box-shadow .3s}
.enq__form select option{color:var(--ink);background:var(--paper)}
.enq__form input:focus,.enq__form select:focus{border-color:var(--ondark);box-shadow:0 1px 0 var(--ondark)}
.enq__form .btn{margin-top:12px}
.enq__note{font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;text-transform:none;color:var(--brass-lt);min-height:1em}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--night);color:rgba(244,240,233,.82);
  padding-block:0 clamp(56px,8vw,90px);overflow:hidden;
  border-top:1px solid rgba(244,240,233,.12)}
.foot__mark{
  font-family:var(--serif);font-weight:300;line-height:.94;text-align:center;
  font-size:clamp(4.6rem,17.5vw,17rem);letter-spacing:.08em;padding-left:.08em;
  color:transparent;-webkit-text-stroke:1px rgba(244,240,233,.2);
  user-select:none;margin:clamp(30px,5vw,70px) 0 clamp(40px,6vw,80px);white-space:nowrap}
@supports not (-webkit-text-stroke:1px black){.foot__mark{color:rgba(244,240,233,.07)}}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding-bottom:48px;border-bottom:1px solid rgba(244,240,233,.14)}
.foot__brand .nav__brandtext{color:var(--ondark);margin-bottom:14px}
.foot__brand p{font-family:var(--serif);font-size:1.2rem;color:var(--brass-lt)}
.foot__h{color:var(--brass-lt);margin-bottom:16px}
.foot__col p{line-height:1.8;font-size:.92rem}
.foot__col a:hover{color:var(--paper)}
.foot__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;font-size:.74rem;letter-spacing:.04em;color:var(--faint)}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{position:fixed;inset:0;z-index:85;background:rgba(15,13,11,.96);display:flex;
  align-items:center;justify-content:center;padding:4vw;opacity:0;pointer-events:none;transition:opacity .4s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:94vw;max-height:90vh;object-fit:contain;box-shadow:0 40px 120px rgba(0,0,0,.5)}
.lb__close{position:absolute;top:24px;right:30px;background:none;border:0;color:var(--ondark);font-size:1.6rem;cursor:pointer;opacity:.8}
.lb__close:hover{opacity:1}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__toggle{display:flex}
}
@media (max-width:1024px){
  .mp__app{grid-template-columns:1fr}
  .enq__grid{grid-template-columns:1fr;gap:48px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr;gap:clamp(22px,4vw,36px)}
  .res__row{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  .nav__logo{height:34px}
  .nav__branddiv{height:24px}
  .nav__brandtext strong{font-size:1.1rem}
  .section::after,.amen__intro::after{width:26px;height:26px}
  /* mobile hero: full uncropped 16:9 video + charcoal text panel */
  .hero{height:auto;min-height:0;display:block;background:var(--night)}
  .hero__media{position:relative;inset:auto;z-index:1;height:auto}
  .hero__video{aspect-ratio:16/9;height:auto;animation:none}
  .hero__veil{background:linear-gradient(180deg,rgba(20,18,15,0) 58%,rgba(20,18,15,.8) 88%,var(--night) 100%)}
  .hero__content{position:relative;z-index:2;max-width:none;margin:-34px 0 0;
    background:var(--night);padding:6px var(--gut) 20px}
  .hero .eyebrow{margin-bottom:14px}
  .hero h1{font-size:clamp(2.1rem,8.6vw,3.1rem)}
  .hero__sub{max-width:40ch}
  .hero__foot{background:var(--night);font-size:.62rem;border-top:1px solid rgba(244,240,233,.18)}
  .hero__foot span:first-child,.hero__foot span:last-child{max-width:9ch}
  /* mobile editorial: full-bleed image + text in margin */
  .editorial,.editorial--rev{grid-template-columns:1fr;gap:0;padding-inline:0;padding-block:clamp(44px,10vw,64px)}
  .editorial--rev .editorial__img{order:0}
  .editorial--rev .editorial__txt{order:0}
  .editorial__img img{aspect-ratio:4/5}
  .editorial__txt{padding:clamp(22px,6vw,30px) var(--gut) 0}
  .editorial__txt h3{font-size:clamp(2rem,8vw,2.6rem)}
  .ghost{font-size:clamp(4.2rem,20vw,6rem);top:-.5em;left:var(--gut);z-index:2}
  .ghost--r{left:auto;right:var(--gut)}
  /* horizontal gallery becomes a vertical strip */
  .hg{height:auto}
  .hg__pin{position:static;height:auto;overflow:visible;display:block;padding-block:clamp(64px,14vw,90px) 40px}
  .hg__head{position:static;padding:0 0 34px;display:block}
  .hg__head .sec-label{margin-bottom:0;padding-inline:var(--gut)}
  .hg__count{display:none}
  .hg__track{flex-direction:column;align-items:stretch;gap:44px;transform:none!important}
  .hg__item,.hg__end{width:100%}
  .hg__item figcaption{padding-inline:0}
  .spec__grid{grid-template-columns:1fr;gap:28px}
  .loc__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .foot__mark{letter-spacing:.05em}
  .amenex{grid-template-columns:1fr;gap:clamp(24px,6vw,36px)}
  .amenex__tabs{flex-direction:row;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
  .amenex__tab{font-size:clamp(1.4rem,7vw,2rem)}
  .amenex__panel{columns:1}
  .amenex__panel li{font-size:clamp(1.05rem,4.5vw,1.3rem);padding:12px 0}
}
@media (max-width:420px){
  .loc__times strong{min-width:88px;font-size:1.5rem}
}