/* =========================================================================
   BRIGADE WHITEFIELD–KADUGODI · Integrated Township
   Light theme · Inter type system · layout + motion states
   ========================================================================= */

/* ---------------------------------- TOKENS */
:root{
  /* surfaces */
  --paper:#FFFFFF;
  --paper-2:#F7F6F2;
  --paper-3:#EFEDE5;

  /* ink */
  --ink:#101512;
  --ink-2:#2B312D;
  --ink-dim:rgba(16,21,18,.66);
  --ink-fade:rgba(16,21,18,.44);
  --ink-ghost:rgba(16,21,18,.24);

  /* accent */
  --gold:#8C6A1F;          /* accent text — passes contrast on white */
  --gold-bright:#C9A227;   /* fills, rules, decoration */
  --gold-soft:rgba(201,162,39,.12);

  --line:rgba(16,21,18,.13);
  --line-soft:rgba(16,21,18,.07);

  --ff-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ff-display:var(--ff-sans);

  --pad:clamp(1.25rem,4vw,4.5rem);
  --sec-y:clamp(5rem,11vw,11rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --r:18px;
}

/* ---------------------------------- RESET / BASE */
*,*::before,*::after{box-sizing:border-box}
/* Bootstrap sets `scroll-behavior:smooth` on :root. Native smooth scrolling
   fights Lenis writing scrollTop every frame — the result is visible judder
   and flicker. Anchor navigation is handled by GSAP ScrollTo instead. */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto!important}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-weight:400;
  font-size:clamp(.95rem,.86rem + .3vw,1.0625rem);
  line-height:1.7;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","calt";
}
body.no-scroll{overflow:hidden;height:100vh}
img{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-weight:300;letter-spacing:-.03em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--gold-bright);color:var(--ink)}

.container-xxl{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--pad)}

/* Entrance tweens that slide in from the right (e.g. the location rows start at
   x:40) widen the document until they play, which lets the page drift sideways
   on phones. `overflow-x:clip` stops that; unlike `hidden` it keeps overflow-y
   `visible`, so position:sticky inside still works. */
main{overflow-x:clip}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:rgba(16,21,18,.22);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(16,21,18,.4)}

/* ---------------------------------- TYPE HELPERS */
.sec-head{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-head--split{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.sec-kicker{
  display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1.35rem;
}
.sec-title{
  font-weight:200;font-size:clamp(2.2rem,5.6vw,4.9rem);
  line-height:1.02;letter-spacing:-.045em;max-width:20ch;
}
.sec-title em{font-style:italic;font-weight:300;color:var(--gold)}
.sec-note{color:var(--ink-dim);max-width:46ch;font-size:clamp(.95rem,.9rem + .25vw,1.06rem)}
.lbl{
  display:block;font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-fade);margin-bottom:.7rem;
}
.gold{color:var(--gold)}

/* ---------------------------------- LENIS (required for smooth scroll) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------------------------------- GRAIN + CURSOR */
/* static tile: an animated, blend-mode grain repaints the whole viewport
   every frame and reads as flicker while scrolling */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.cursor{position:fixed;inset:0;z-index:10000;pointer-events:none;opacity:0}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor__dot{width:6px;height:6px;background:var(--ink);margin:-3px 0 0 -3px}
.cursor__ring{
  width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(16,21,18,.35);
  display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),
  margin .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);
}
.cursor__label{
  font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s;white-space:nowrap;
}
.cursor.is-hover .cursor__ring{width:82px;height:82px;margin:-41px 0 0 -41px;background:var(--ink);border-color:transparent}
.cursor.is-hover .cursor__label{opacity:1;transform:scale(1)}
.cursor.is-hover .cursor__dot{opacity:0}
.cursor.is-link .cursor__ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(16,21,18,.10);border-color:transparent}
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* ---------------------------------- PROGRESS + EDGE */
.progress-rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:900;background:transparent}
/* scaleX rather than width: transforms stay on the compositor, width relayouts */
.progress-rail i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
}

.edge{position:fixed;z-index:600;pointer-events:none;display:flex;align-items:center;gap:1rem}
.edge--left{left:calc(var(--pad) * .42);bottom:clamp(2rem,8vh,5rem);flex-direction:column}
.edge__text{
  writing-mode:vertical-rl;font-size:.6rem;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-fade);
}
.edge__line{width:1px;height:70px;background:linear-gradient(var(--gold-bright),transparent)}
@media (max-width:1200px){.edge{display:none}}

/* ---------------------------------- NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  transition:transform .55s var(--ease),background .5s var(--ease);
}
.nav::after{content:"";position:absolute;inset:0;border-bottom:1px solid transparent;pointer-events:none;transition:border-color .5s}
.nav.is-solid{background:rgba(255,255,255,.93);backdrop-filter:blur(10px)}
.nav.is-solid::after{border-bottom-color:var(--line-soft)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__inner{
  max-width:1560px;margin-inline:auto;padding:clamp(.9rem,1.6vw,1.35rem) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--ink)}
.brand__mark{width:30px;height:30px;color:var(--gold);flex:none}
.brand__text{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.25}
.brand__text em{display:block;font-style:normal;font-weight:400;letter-spacing:.16em;font-size:.66rem;color:var(--ink-fade)}

.nav__links{display:flex;gap:clamp(1rem,2.4vw,2.4rem)}
.nlink{position:relative;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.4rem 0;overflow:hidden;display:block;color:var(--ink-dim);transition:color .35s}
.nlink span{display:block;transition:transform .45s var(--ease)}
.nlink::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
  transition:width .5s var(--ease);
}
.nlink:hover{color:var(--ink)}
.nlink:hover::after,.nlink.is-active::after{width:100%}
.nlink.is-active{color:var(--gold)}

.nav__cta{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.4rem)}
.nav__phone{display:flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:500;color:var(--ink-dim);transition:color .35s}
.nav__phone:hover{color:var(--gold)}
.nav__phone svg{color:var(--gold)}

.btn-magnet{
  position:relative;overflow:hidden;border:1px solid var(--ink);border-radius:100px;
  padding:.7rem 1.5rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);isolation:isolate;will-change:transform;
}
.btn-magnet__fill{position:absolute;inset:0;background:var(--ink);transform:translateY(101%);border-radius:100px;transition:transform .55s var(--ease);z-index:-1}
.btn-magnet__label{position:relative;transition:color .4s var(--ease)}
.btn-magnet:hover .btn-magnet__fill{transform:translateY(0)}
.btn-magnet:hover .btn-magnet__label{color:var(--paper)}

.burger{display:none;width:44px;height:44px;place-items:center;flex-direction:column;gap:6px}
.burger i{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .45s var(--ease),opacity .3s}
body.menu-open .burger i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

@media (max-width:1150px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__phone span{display:none}
}
@media (max-width:640px){.btn-magnet{display:none}}

/* ---------------------------------- FULLSCREEN MENU */
.menu{position:fixed;inset:0;z-index:790;visibility:hidden;pointer-events:none}
.menu.is-open{visibility:visible;pointer-events:auto}
.menu__bg{position:absolute;inset:0;background:var(--paper-2);clip-path:circle(0% at calc(100% - 60px) 48px)}
.menu__body{
  position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(2rem,6vh,4rem);padding:6rem var(--pad) 3rem;max-width:1560px;margin-inline:auto;
  overflow-y:auto;
}
.menu__item{display:flex;align-items:baseline;gap:1.4rem;padding:.35rem 0;overflow:hidden}
.menu__idx{font-size:.66rem;font-weight:600;letter-spacing:.18em;color:var(--gold);width:2rem;flex:none}
.menu__word{
  font-size:clamp(2rem,7vw,4.8rem);line-height:1.06;font-weight:200;letter-spacing:-.045em;
  transition:color .4s var(--ease),transform .5s var(--ease);display:inline-block;
}
.menu__item:hover .menu__word{color:var(--gold);transform:translateX(1.2rem)}
.menu__meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;
  border-top:1px solid var(--line);padding-top:2rem;
}
.menu__meta p{font-size:.88rem;color:var(--ink-dim);line-height:1.8}
.menu__meta a:hover{color:var(--gold)}
.menu__price{font-size:1.7rem!important;font-weight:200;letter-spacing:-.04em;color:var(--gold)!important}

/* ---------------------------------- BUTTONS */
.btn-primary{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  background:var(--ink);color:var(--paper);border-radius:100px;
  padding:1.05rem 2.1rem;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  overflow:hidden;transition:color .4s var(--ease),box-shadow .5s var(--ease);
  box-shadow:0 12px 34px -20px rgba(16,21,18,.7);
}
.btn-primary::before{
  content:"";position:absolute;inset:0;background:var(--gold-bright);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn-primary:hover{color:var(--ink)}
.btn-primary:hover::before{transform:translateY(0)}
.btn-primary>*{position:relative;z-index:1}
.btn-primary svg{transition:transform .45s var(--ease)}
.btn-primary:hover svg{transform:translateX(5px)}
.btn-primary--block{width:100%}
.btn-primary__load{position:absolute;inset:0;z-index:2;display:none;place-items:center;background:var(--ink)}
.btn-primary__load::after{
  content:"";width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--paper);
  border-radius:50%;animation:spin .7s linear infinite;
}
.btn-primary.is-busy .btn-primary__load{display:grid}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-ghost{
  position:relative;display:inline-flex;align-items:center;
  padding:1.05rem 2.1rem;border:1px solid var(--line);border-radius:100px;
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;overflow:hidden;
  transition:border-color .45s var(--ease);
}
.btn-ghost::before{
  content:"";position:absolute;inset:0;background:var(--ink);transform:scale(0);border-radius:100px;
  transition:transform .55s var(--ease);
}
.btn-ghost span{position:relative;z-index:1;transition:color .4s var(--ease)}
.btn-ghost:hover{border-color:transparent}
.btn-ghost:hover::before{transform:scale(1)}
.btn-ghost:hover span{color:var(--paper)}
.btn-ghost--sm{padding:.8rem 1.5rem;font-size:.66rem}

.pill{
  display:inline-flex;align-items:center;padding:.42rem 1rem;border:1px solid rgba(201,162,39,.4);
  border-radius:100px;background:var(--gold-soft);color:var(--gold);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------------------------------- TICKER */
.ticker{overflow:hidden;overflow:clip;width:100%;white-space:nowrap}
.ticker__track{display:inline-flex;align-items:center;gap:2.2rem;will-change:transform}
.ticker__track span{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.ticker__track i{color:var(--gold-bright);font-style:normal;font-size:.6rem}
.ticker--lg .ticker__track{gap:3rem}
.ticker--lg .ticker__track span{
  font-size:clamp(2.6rem,9vw,7.5rem);font-weight:200;letter-spacing:-.05em;text-transform:none;
  color:transparent;-webkit-text-stroke:1px rgba(16,21,18,.22);
}
.ticker--lg .ticker__track i{font-size:clamp(1.5rem,4vw,3rem);color:var(--gold-bright)}

/* =========================================================================
   HERO
   ========================================================================= */
/* `overflow:clip` not `hidden`: hidden makes the hero a scroll container, so
   focusing the banner form's inputs lets the browser scroll it internally and
   knock the background image out of register. clip cannot be scrolled. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;overflow:clip;isolation:isolate;background:var(--paper)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__layer{position:absolute;inset:-8%;will-change:transform}
/* background-image is set inline on the element (document-relative path) */
.hero__img{
  position:absolute;inset:0;background-size:cover;background-position:62% center;
  filter:saturate(.95) contrast(1.02);transform:scale(1.15);will-change:transform;
}
/* White veil, tuned for the twilight project render: near-opaque under the
   headline on the left, thinning through the middle so the tower reads, and
   a strong top fade to keep the dark nav legible against the sky. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.93) 36%,
      rgba(255,255,255,.55) 55%,
      rgba(255,255,255,.26) 76%,
      rgba(255,255,255,.42) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.86) 0%,
      rgba(255,255,255,.2) 30%,
      rgba(255,255,255,.28) 70%,
      var(--paper) 100%);
}
.hero__glow{
  position:absolute;right:-8%;top:-16%;width:60vw;height:60vw;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.09),transparent 62%);filter:blur(26px);
}
.hero__lines{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.45}
.hl__p{stroke-dasharray:2400;stroke-dashoffset:2400}
.hl__c{fill:var(--gold-bright);opacity:0}

.hero__content{position:relative;z-index:2;width:100%;padding-top:clamp(5.5rem,11vh,7.5rem);padding-bottom:clamp(6rem,12vh,8.5rem)}
.hero__eyebrow{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-bottom:clamp(.9rem,2.4vh,1.9rem)}
.hero__eyebrow-txt{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-fade)}

/* banner splits: copy left, call-back form right */
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,26vw,392px);
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
}
.hero__main{min-width:0}

.hero__title{
  font-weight:200;font-size:clamp(2.4rem,min(6.2vw,9.4vh),5.6rem);
  line-height:1;letter-spacing:-.055em;margin-bottom:clamp(1.2rem,3vh,2.2rem);
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .w{display:inline-block}
.hero__title .italic{font-style:italic;font-weight:300;color:var(--gold)}
.hero__title .outline{color:transparent;-webkit-text-stroke:1.1px var(--ink)}
.hero__title .char{display:inline-block}

/* single column, so the price stays over the opaque part of the veil rather
   than over the render where the gold loses contrast */
.hero__row{
  display:grid;grid-template-columns:1fr;gap:clamp(.8rem,1.8vh,1.3rem);
  padding-bottom:clamp(1rem,2.4vh,1.9rem);
  border-bottom:1px solid var(--line);margin-bottom:clamp(1rem,2.4vh,1.9rem);
}
.hero__lede{max-width:52ch;color:var(--ink-dim)}
/* compact one-line lockup: label · value · configurations */
.hero__price{display:flex;align-items:baseline;gap:.55rem .9rem;flex-wrap:wrap}
.hero__price .lbl{margin:0;font-size:.6rem;letter-spacing:.18em}
.hero__price-val{display:flex;align-items:baseline;gap:.06em;color:var(--gold);line-height:1;font-weight:200;letter-spacing:-.05em}
.hero__price-val .cur{font-size:clamp(1.05rem,1.9vw,1.5rem)}
.hero__price-val .num{font-size:clamp(1.9rem,3.6vw,3rem)}
.hero__price-val .unit{font-size:clamp(.85rem,1.3vw,1.05rem);margin-left:.2em;font-weight:600;letter-spacing:.02em}
.hero__price-sub{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-fade)}

.hero__actions{display:flex;gap:.9rem;flex-wrap:wrap}

/* ---- banner call-back form ---- */
.hform{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:calc(var(--r) + 4px);padding:clamp(1.4rem,1.9vw,1.9rem);
  box-shadow:0 40px 80px -46px rgba(16,21,18,.55);
}
.hform__head{margin-bottom:1.6rem}
.hform__kick{display:block;font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.55rem}
.hform__title{font-size:clamp(1.35rem,1.9vw,1.75rem);font-weight:200;letter-spacing:-.045em;line-height:1.1}
.hform__sub{font-size:.76rem;color:var(--ink-fade);margin-top:.4rem}
.hform .field{margin-bottom:1.55rem}
.hform .field input{font-size:.95rem;padding:.75rem 0 .6rem}
.hform .field label{font-size:.95rem;top:.75rem}
.hform__note{margin-top:.9rem;font-size:.63rem;line-height:1.55;color:var(--ink-fade);text-align:center}
.hform .form__success{border-radius:calc(var(--r) + 4px)}
.hform .tick{width:46px;height:46px;margin-bottom:1rem}
.hform .form__success h4{font-size:1.4rem}

@media (max-width:1150px){
  .hero__grid{grid-template-columns:minmax(0,1fr) clamp(300px,32vw,340px);gap:2rem}
}
@media (max-width:900px){
  .hero{align-items:flex-start}
  .hero__grid{grid-template-columns:1fr;gap:2.4rem;align-items:start}
  .hero__title{font-size:clamp(2.4rem,9.4vw,4.2rem)}
  .hero__aside{max-width:460px}
}

.hero__ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  border-top:1px solid var(--line);padding:1rem 0;background:rgba(255,255,255,.9);
}
.hero__scroll{
  position:absolute;right:var(--pad);bottom:clamp(4.5rem,10vh,7rem);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
}
.hero__scroll-line{width:1px;height:56px;background:var(--line);position:relative;overflow:hidden}
.hero__scroll-line::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--gold-bright);
  animation:scrollDrop 1.9s var(--ease-io) infinite;
}
@keyframes scrollDrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}
.hero__scroll-txt{writing-mode:vertical-rl;font-size:.58rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-fade)}

@media (max-width:900px){
  .hero__row{gap:1.2rem}
  .hero__scroll{display:none}
  .hero__content{padding-bottom:8rem}
}

/* =========================================================================
   STATS
   ========================================================================= */
.stats{padding:clamp(3rem,6vw,5.5rem) 0;border-bottom:1px solid var(--line-soft);background:var(--paper)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem)}
.stat{padding-left:1.6rem;border-left:1px solid var(--line)}
.stat__num{display:flex;align-items:baseline;gap:.3rem;font-size:clamp(2.3rem,4.4vw,3.9rem);line-height:1;font-weight:200;letter-spacing:-.05em}
.stat__num small{font-size:.28em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.stat__lbl{display:block;margin-top:.9rem;font-size:.76rem;color:var(--ink-fade);line-height:1.6}
@media (max-width:900px){.stats__grid{grid-template-columns:repeat(2,1fr);gap:2rem}}

/* =========================================================================
   OVERVIEW
   ========================================================================= */
.ovw{padding:var(--sec-y) 0;position:relative;background:var(--paper)}
.ovw__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,7rem);align-items:start}
.ovw__sticky{position:sticky;top:15vh}
.ovw__frame{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
  border:1px solid var(--line);will-change:transform;transform-style:preserve-3d;
  box-shadow:0 40px 80px -50px rgba(16,21,18,.5);
}
.ovw__stack{position:absolute;inset:0}
.ovw__frame::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(200deg,rgba(201,162,39,.10),transparent 40%,rgba(16,21,18,.42));
}
.ovw__im{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);transition:opacity .9s var(--ease),transform 1.4s var(--ease);
  filter:saturate(.85) contrast(1.02);
}
.ovw__im.is-active{opacity:1;transform:scale(1)}
.ovw__badge{
  position:absolute;z-index:2;left:1.4rem;bottom:1.4rem;padding:.9rem 1.2rem;border-radius:12px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border:1px solid var(--line);
  font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);line-height:1.6;
}
.ovw__steps{display:flex;flex-direction:column;gap:clamp(3rem,7vw,6rem);padding-top:2rem}
.ovw__step{opacity:.3;transition:opacity .6s var(--ease)}
.ovw__step.is-on{opacity:1}
.ovw__step-n{display:block;font-size:1.15rem;font-weight:600;letter-spacing:.02em;color:var(--gold);margin-bottom:.9rem}
.ovw__step h3{font-size:clamp(1.45rem,2.7vw,2.1rem);line-height:1.2;letter-spacing:-.04em;margin-bottom:1rem}
.ovw__step p{color:var(--ink-dim);max-width:46ch}
@media (max-width:900px){
  .ovw__grid{grid-template-columns:1fr}
  .ovw__sticky{position:relative;top:0}
  .ovw__step{opacity:1}
}

/* =========================================================================
   LOCATION
   ========================================================================= */
.loc{padding:var(--sec-y) 0;background:var(--paper-2)}
.loc__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}

.radar{
  position:relative;aspect-ratio:1;width:100%;max-width:min(540px,62vh);margin-inline:auto;
  border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(201,162,39,.10),transparent 68%);
}
.radar__ring{position:absolute;border:1px solid rgba(16,21,18,.14);border-radius:50%}
.radar .r1{inset:38%}.radar .r2{inset:26%}.radar .r3{inset:13%}
.radar .r4{inset:0;border-color:rgba(201,162,39,.4)}
/* The sweep rotates, and a rotating square's bounding box is √2 wider than the
   square — that overflowed the page sideways on narrow screens. This wrapper
   clips it to the dial, so it contributes no scrollable overflow. */
.radar__sweep-wrap{
  position:absolute;inset:0;border-radius:50%;
  overflow:hidden;overflow:clip;pointer-events:none;
}
.radar__sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(201,162,39,.16) 22deg,transparent 52deg);
  animation:sweep 7s linear infinite;
}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar__core{position:relative;z-index:3;text-align:center}
.radar__pulse{
  display:block;width:14px;height:14px;border-radius:50%;background:var(--gold-bright);margin:0 auto .8rem;
  box-shadow:0 0 0 0 rgba(201,162,39,.55);animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 34px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}
.radar__core-lbl{font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.7}

.pin{
  position:absolute;left:var(--x);top:var(--y);
  display:flex;align-items:center;gap:.55rem;padding:.4rem .75rem;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.96);
  font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
  white-space:nowrap;box-shadow:0 6px 18px -10px rgba(16,21,18,.5);
  /* GSAP owns `transform` here (xPercent/yPercent for centring, plus scale for
     the entrance and the active state). Declaring or transitioning transform in
     CSS fights the inline transform GSAP writes and strands the pins at scale 0. */
  transition:border-color .4s,color .4s,background .4s,box-shadow .4s;
}
.pin i{width:6px;height:6px;border-radius:50%;background:var(--gold-bright);flex:none;transition:background .4s}
.pin:hover,.pin.is-on{
  border-color:var(--ink);color:var(--paper);background:var(--ink);
  box-shadow:0 12px 26px -12px rgba(16,21,18,.75);
}
.pin:hover i,.pin.is-on i{background:var(--gold-bright)}
@media (max-width:620px){.pin span{display:none}.pin{padding:.5rem}}

.loc__list{display:flex;flex-direction:column}
.loc__item{
  display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;
  padding:1.5rem 0;border-bottom:1px solid var(--line-soft);
  transition:background .4s,padding-left .45s var(--ease);cursor:default;
}
.loc__item:first-child{border-top:1px solid var(--line-soft)}
.loc__item.is-on{padding-left:1rem;background:linear-gradient(90deg,var(--gold-soft),transparent)}
.loc__t{
  font-size:1.75rem;font-weight:200;letter-spacing:-.05em;line-height:1;color:var(--gold);
  min-width:4.4rem;display:flex;align-items:baseline;gap:.2rem;
}
.loc__t small{font-size:.34em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-fade)}
.loc__item h4{font-size:.98rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.35rem}
.loc__item p{font-size:.86rem;color:var(--ink-fade);line-height:1.65}

.loc__near{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line);padding-top:2.4rem}
.loc__near-lbl{display:block;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{
  padding:.55rem 1.1rem;border:1px solid var(--line);border-radius:100px;background:var(--paper);
  font-size:.72rem;font-weight:500;color:var(--ink-dim);
  transition:border-color .4s,color .4s,transform .4s var(--ease);
}
.chip:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
@media (max-width:900px){.loc__grid{grid-template-columns:1fr}.sec-head--split{grid-template-columns:1fr}}

/* =========================================================================
   RESIDENCES · HORIZONTAL SCROLL
   ========================================================================= */
.plans{padding-top:var(--sec-y);background:var(--paper)}
.plans__intro{margin-bottom:clamp(2.5rem,5vw,4rem)}
.plans__intro .sec-note{margin-top:1.6rem}
.hscroll{overflow:hidden;min-height:100svh;display:flex;align-items:center}
.hscroll__track{display:flex;gap:clamp(1.2rem,2.5vw,2.2rem);padding-inline:var(--pad);will-change:transform}
.hscroll.is-native{
  min-height:0;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.hscroll.is-native::-webkit-scrollbar{display:none}
.hscroll.is-native .hscroll__track{padding-bottom:.5rem}
.hscroll.is-native .pcard{scroll-snap-align:center;flex:0 0 min(78vw,380px)}

.pcard{
  flex:0 0 clamp(300px,32vw,460px);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--paper);display:flex;flex-direction:column;
  box-shadow:0 26px 50px -40px rgba(16,21,18,.45);
  transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);
}
.pcard:hover{border-color:rgba(201,162,39,.55);transform:translateY(-6px);box-shadow:0 40px 70px -44px rgba(16,21,18,.55)}
.pcard__media{position:relative;aspect-ratio:16/11;overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 1.2s var(--ease),filter .6s}
.pcard:hover .pcard__media img{transform:scale(1.07);filter:saturate(1)}
.pcard__tag{
  position:absolute;z-index:2;top:1rem;left:1rem;padding:.4rem .85rem;border-radius:100px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid rgba(201,162,39,.35);
  font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.pcard__body{padding:clamp(1.5rem,2.4vw,2.2rem);display:flex;flex-direction:column;gap:.85rem;flex:1}
.pcard__idx{font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--gold)}
.pcard__title{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.05;font-weight:200;letter-spacing:-.05em}
.pcard__title em{font-style:italic;font-weight:300;font-size:.6em;color:var(--ink-fade)}
.pcard__spec{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--line-soft);
}
.pcard__spec span{font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-fade)}
.pcard__spec b{font-weight:600;font-size:.98rem;letter-spacing:-.01em}
.pcard__spec b.gold{font-size:1.4rem;font-weight:200;letter-spacing:-.04em;color:var(--gold)}
.pcard__body p{font-size:.86rem;color:var(--ink-fade);line-height:1.7;flex:1}
.pcard__cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:.95rem 1.3rem;border:1px solid var(--line);border-radius:100px;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s;
}
.pcard__cta i{font-style:normal;transition:transform .45s var(--ease)}
.pcard__cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pcard__cta:hover i{transform:translateX(5px)}

.pcard--cta{background:linear-gradient(150deg,rgba(201,162,39,.16),rgba(255,255,255,.4));border-color:rgba(201,162,39,.4)}
.pcard__cta-inner{padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1.2rem;height:100%;justify-content:center}
.pcard__cta-inner h3{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;font-weight:200;letter-spacing:-.05em}
.pcard__cta-inner p{font-size:.88rem;color:var(--ink-dim)}
.pcard__cta-inner .btn-primary{align-self:flex-start}

.hscroll__hint{display:flex;align-items:center;gap:1.2rem;padding-top:2.2rem;padding-bottom:var(--sec-y)}
.hbar{flex:1;height:1px;background:var(--line);overflow:hidden;max-width:340px}
.hbar i{display:block;height:100%;width:100%;transform:scaleX(.08);transform-origin:0 50%;background:var(--gold-bright)}
.hlbl{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-fade)}

/* =========================================================================
   AMENITIES
   ========================================================================= */
.amen{padding:var(--sec-y) 0;background:var(--paper-2)}
.amen__marquee{padding:clamp(1.5rem,4vw,3rem) 0;margin-bottom:clamp(2rem,4vw,3.5rem);border-block:1px solid var(--line)}
.amen__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.6vw,1.4rem)}
.acard{
  position:relative;min-height:clamp(260px,26vw,380px);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);isolation:isolate;display:flex;align-items:flex-end;color:#fff;
  box-shadow:0 26px 50px -42px rgba(16,21,18,.6);
}
.acard--wide{grid-column:span 2}
/* Local project images must be declared HERE, not as an inline `--bg` on the
   element: a url() inside a custom property resolves against the stylesheet
   that consumes it, so an inline `assets/…` path 404s as `assets/css/assets/…`.
   This path is relative to THIS file. */
.acard--work{--bg:url('../main3.webp')}
.acard::before{
  content:"";position:absolute;inset:0;z-index:-2;background-image:var(--bg);
  background-size:cover;background-position:center;
  transform:scale(1.06);transition:transform 1.3s var(--ease);
}
.acard::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,21,18,.05) 25%,rgba(16,21,18,.86) 100%);
}
.acard:hover::before{transform:scale(1.14)}
.acard__in{padding:clamp(1.4rem,2.2vw,2rem);position:relative}
.acard__n{display:block;font-size:.6rem;font-weight:700;letter-spacing:.2em;color:var(--gold-bright);margin-bottom:.7rem}
.acard__in h3{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.035em;font-weight:300;margin-bottom:.55rem}
.acard__in p{
  font-size:.82rem;color:rgba(255,255,255,.82);line-height:1.65;max-width:42ch;
  opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.acard:hover .acard__in p{opacity:1;transform:translateY(0)}
@media (max-width:1100px){.amen__grid{grid-template-columns:repeat(2,1fr)}.acard--wide{grid-column:span 2}}
@media (max-width:640px){
  .amen__grid{grid-template-columns:1fr}.acard--wide{grid-column:span 1}
  .acard__in p{opacity:1;transform:none}
}

/* =========================================================================
   MASTER PLAN
   ========================================================================= */
.mplan{padding:var(--sec-y) 0;background:var(--paper)}
.mplan__wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.mplan__copy .sec-note{margin-top:1.6rem}
.mplan__legend{margin-top:2.4rem;display:flex;flex-direction:column;gap:.85rem}
.mplan__legend li{
  display:flex;align-items:center;gap:.9rem;font-size:.82rem;font-weight:500;color:var(--ink-dim);
  cursor:default;transition:color .35s;
}
.mplan__legend li i{width:14px;height:14px;border-radius:4px;flex:none;transition:transform .4s var(--ease)}
.mplan__legend li:hover{color:var(--ink)}
.mplan__legend li:hover i{transform:scale(1.35)}
.mplan__legend li[data-zone="res"] i{background:rgba(201,162,39,.6)}
.mplan__legend li[data-zone="ret"] i{background:rgba(93,124,104,.7)}
.mplan__legend li[data-zone="com"] i{background:rgba(16,21,18,.35)}
.mplan__legend li[data-zone="hos"] i{background:rgba(163,116,46,.75)}
.mplan__legend li[data-zone="grn"] i{background:rgba(122,158,132,.45)}

.mplan__art{position:relative}
.plan{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2)}
.pz{stroke:rgba(16,21,18,.18);stroke-width:1;opacity:0;transform-origin:center}
.pz[data-zone="res"]{fill:rgba(201,162,39,.3)}
.pz[data-zone="ret"]{fill:rgba(93,124,104,.42)}
.pz[data-zone="com"]{fill:rgba(16,21,18,.16)}
.pz[data-zone="hos"]{fill:rgba(163,116,46,.4)}
.pz[data-zone="grn"]{fill:rgba(122,158,132,.28)}
.pz.is-dim{opacity:.16!important}
.pz.is-hot{stroke:var(--gold);stroke-width:2}
.pr{stroke-dasharray:6 6;opacity:0}
.plabel{
  fill:rgba(16,21,18,.62);font-family:var(--ff-sans);font-size:11px;font-weight:600;letter-spacing:2.2px;opacity:0;
}
.mplan__scale{display:block;margin-top:1rem;font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-fade)}
@media (max-width:900px){.mplan__wrap{grid-template-columns:1fr}}

/* =========================================================================
   WHY INVEST — rows with a cursor-follow preview
   ========================================================================= */
.why{padding:var(--sec-y) 0;position:relative;background:var(--paper-2)}
.why__list{border-top:1px solid var(--line)}
.wrow{
  position:relative;display:grid;grid-template-columns:auto 1.05fr 1fr auto;gap:clamp(1.2rem,3vw,3rem);
  align-items:center;padding:clamp(1.8rem,3.6vw,3rem) 0;border-bottom:1px solid var(--line);
  transition:padding-inline .55s var(--ease);z-index:2;
}
.wrow::before{
  content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--gold);
  transition:width .7s var(--ease);
}
.wrow:hover::before{width:100%}
.wrow:hover{padding-inline:clamp(.8rem,2vw,2rem)}
.wrow__n{font-size:.64rem;font-weight:700;letter-spacing:.2em;color:var(--gold)}
.wrow__t{font-size:clamp(1.35rem,2.6vw,2.15rem);line-height:1.15;letter-spacing:-.045em;font-weight:300}
.wrow__d{font-size:.88rem;color:var(--ink-fade);line-height:1.7;max-width:44ch}
.wrow__go{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:background .45s var(--ease),color .45s,border-color .45s,transform .5s var(--ease);
}
.wrow:hover .wrow__go{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(-45deg)}

/* No transform here: GSAP owns this element's transform (it sets xPercent/
   yPercent/scale at init). A CSS translate would be parsed and fought over. */
.why__hoverimg{
  position:fixed;top:0;left:0;width:clamp(220px,22vw,340px);aspect-ratio:4/5;border-radius:14px;
  background-size:cover;background-position:center;pointer-events:none;z-index:1;
  opacity:0;will-change:transform,opacity;
  border:1px solid var(--line);box-shadow:0 40px 70px -40px rgba(16,21,18,.6);
}
@media (max-width:1000px){
  .wrow{grid-template-columns:auto 1fr;grid-template-areas:"n t" ". d";row-gap:.8rem}
  .wrow__n{grid-area:n}.wrow__t{grid-area:t}.wrow__d{grid-area:d}.wrow__go{display:none}
  .why__hoverimg{display:none}
}

/* =========================================================================
   CTA / FORM
   ========================================================================= */
.cta{position:relative;padding:var(--sec-y) 0;overflow:hidden;isolation:isolate;background:var(--paper)}
/* background-image is set inline on the element (document-relative path) */
.cta__bg{
  position:absolute;inset:-12% 0;z-index:-2;background-size:cover;
  background-position:center;filter:saturate(.42) brightness(1.06);will-change:transform;
}
.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,.97) 34%,rgba(255,255,255,.82) 100%);
}
.cta__grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.cta__title{
  font-weight:200;font-size:clamp(2.1rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.05em;
  margin-bottom:1.6rem;max-width:16ch;
}
.cta__title em{font-style:italic;font-weight:300;color:var(--gold)}
.cta__copy>p{color:var(--ink-dim);max-width:48ch}
.cta__points{margin-top:2rem;display:flex;flex-direction:column;gap:.9rem}
.cta__points li{display:flex;align-items:center;gap:.9rem;font-size:.92rem;color:var(--ink-dim)}
.cta__points i{color:var(--gold-bright);font-style:normal;font-size:.7rem}
.cta__call{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.cta__phone{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:200;letter-spacing:-.045em;color:var(--gold);transition:opacity .3s}
.cta__phone:hover{opacity:.7}

.form{
  position:relative;background:var(--paper);
  border:1px solid var(--line);border-radius:calc(var(--r) + 6px);
  padding:clamp(1.6rem,3vw,2.8rem);
  box-shadow:0 50px 90px -60px rgba(16,21,18,.6);
}
.form__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.form__head h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:200;letter-spacing:-.045em}
.form__badge{
  padding:.35rem .8rem;border-radius:100px;background:var(--gold-soft);border:1px solid rgba(201,162,39,.35);
  font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}

.field{position:relative;margin-bottom:1.9rem}
.field input,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.85rem 0 .7rem;color:var(--ink);font-family:var(--ff-sans);font-size:1rem;font-weight:400;
  outline:none;border-radius:0;appearance:none;
}
.field select{cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.35rem,calc(100% - 7px) 1.35rem;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--paper);color:var(--ink)}
.field label{
  position:absolute;left:0;top:.85rem;font-size:1rem;color:var(--ink-fade);pointer-events:none;
  transition:transform .4s var(--ease),font-size .4s var(--ease),color .4s var(--ease);transform-origin:left top;
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field select:focus+label,.field select:valid+label{
  transform:translateY(-1.5rem);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.field__line{position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .5s var(--ease)}
.field input:focus~.field__line,.field select:focus~.field__line{width:100%}
.field__err{
  position:absolute;left:0;top:100%;margin-top:.45rem;font-size:.7rem;font-style:normal;font-weight:500;
  color:#B3261E;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s;
}
.field.is-err input,.field.is-err select{border-bottom-color:#B3261E}
.field.is-err .field__err{opacity:1;transform:translateY(0)}

.consent{display:flex;gap:.85rem;align-items:flex-start;margin:1.4rem 0 1.8rem;cursor:pointer}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent__box{
  width:20px;height:20px;flex:none;border:1px solid var(--line);border-radius:5px;margin-top:.15rem;
  display:grid;place-items:center;transition:background .35s,border-color .35s;color:var(--paper);
}
.consent__box svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s}
.consent input:checked+.consent__box{background:var(--ink);border-color:var(--ink)}
.consent input:checked+.consent__box svg{opacity:1;transform:scale(1)}
.consent__txt{font-size:.74rem;color:var(--ink-fade);line-height:1.6}
.consent.is-err .consent__box{border-color:#B3261E}

.form__note{margin-top:1.1rem;font-size:.68rem;color:var(--ink-fade);text-align:center}

.form__success{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:2rem;
  background:rgba(255,255,255,.98);backdrop-filter:blur(10px);border-radius:calc(var(--r) + 6px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.form__success.is-on{opacity:1;visibility:visible}
.form__success-in{text-align:center;max-width:34ch}
.tick{width:60px;height:60px;color:var(--gold);margin:0 auto 1.4rem}
.tick circle,.tick path{stroke-dasharray:200;stroke-dashoffset:200}
.form__success.is-on .tick circle{animation:draw .9s var(--ease) forwards}
.form__success.is-on .tick path{animation:draw .6s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.form__success h4{font-size:1.8rem;font-weight:200;letter-spacing:-.045em;margin-bottom:.7rem}
.form__success p{font-size:.88rem;color:var(--ink-dim)}
@media (max-width:900px){.cta__grid{grid-template-columns:1fr}}

/* =========================================================================
   FOOTER
   ========================================================================= */
/* dark ink footer anchors the light page; tokens below are the inverse set */
.foot{
  --f-line:rgba(242,239,231,.14);
  --f-line-soft:rgba(242,239,231,.08);
  --f-dim:rgba(242,239,231,.68);
  --f-fade:rgba(242,239,231,.42);
  padding:clamp(3.5rem,7vw,6rem) 0 2rem;
  background:var(--ink);color:#F2EFE7;
}
.foot__big{
  font-weight:200;font-size:clamp(1.8rem,7.4vw,7.2rem);line-height:1;letter-spacing:-.055em;
  color:transparent;-webkit-text-stroke:1px rgba(242,239,231,.3);
  margin-bottom:clamp(2.5rem,6vw,5rem);
}
.foot .lbl{color:var(--f-fade)}
.foot__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  padding-bottom:3rem;border-bottom:1px solid var(--f-line-soft);
}
.foot__col p{font-size:.86rem;color:var(--f-dim);line-height:1.9}
.foot__col a{transition:color .3s}
.foot__col a:hover{color:var(--gold-bright)}
.foot__price{font-size:1.7rem!important;font-weight:200;letter-spacing:-.045em;color:var(--gold-bright)!important;margin-bottom:1rem!important}
/* ghost button reads on dark */
.foot .btn-ghost{border-color:var(--f-line);color:#F2EFE7}
.foot .btn-ghost::before{background:var(--gold-bright)}
.foot .btn-ghost:hover span{color:var(--ink)}
.foot__legal{padding-top:2rem}
.foot__legal>p{font-size:.7rem;color:rgba(242,239,231,.3);line-height:1.8;max-width:110ch}
.foot__bar{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--f-line-soft);
  font-size:.68rem;font-weight:500;color:var(--f-fade);
}
@media (max-width:900px){.foot__grid{grid-template-columns:repeat(2,1fr);gap:2.2rem}}

/* =========================================================================
   DOCK
   ========================================================================= */
.dock{
  position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,140%);z-index:700;
  display:none;align-items:center;gap:.5rem;padding:.5rem;border-radius:100px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border:1px solid var(--line);
  box-shadow:0 18px 50px -22px rgba(16,21,18,.55);
  transition:transform .6s var(--ease);
}
.dock.is-on{transform:translate(-50%,0)}
.dock__b{
  display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;border-radius:100px;
  font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-dim);
  transition:color .35s,background .35s;
}
.dock__b:hover{color:var(--gold)}
.dock__b--main{background:var(--ink);color:var(--paper)}
.dock__b--main:hover{background:var(--gold-bright);color:var(--ink)}
@media (max-width:900px){.dock{display:flex}}
@media (max-width:400px){.dock__b span{font-size:.6rem}.dock__b{padding:.7rem .8rem}}

/* =========================================================================
   MODAL
   ========================================================================= */
.modal{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:1rem;visibility:hidden;pointer-events:none}
.modal.is-open{visibility:visible;pointer-events:auto}
.modal__scrim{position:absolute;inset:0;background:rgba(16,21,18,.42);backdrop-filter:blur(8px);opacity:0;transition:opacity .5s var(--ease)}
.modal.is-open .modal__scrim{opacity:1}
.modal__panel{
  position:relative;width:min(940px,100%);max-height:92svh;overflow-y:auto;
  display:grid;grid-template-columns:.8fr 1fr;
  background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--r) + 6px);
  box-shadow:0 60px 120px -60px rgba(16,21,18,.7);
  opacity:0;transform:translateY(28px) scale(.97);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.modal.is-open .modal__panel{opacity:1;transform:translateY(0) scale(1)}
.modal__x{
  position:absolute;top:1rem;right:1rem;z-index:4;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;font-size:.8rem;color:var(--ink-dim);
  background:var(--paper);transition:background .35s,color .35s,transform .45s var(--ease);
}
.modal__x:hover{background:var(--ink);color:var(--paper);transform:rotate(90deg)}
.modal__aside{
  padding:clamp(1.8rem,3vw,2.6rem);background:linear-gradient(160deg,rgba(201,162,39,.16),var(--paper-2));
  border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1.4rem;justify-content:center;
}
.modal__kick{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.modal__aside h3{font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1.12;font-weight:200;letter-spacing:-.05em}
.modal__aside h3 em{font-style:italic;font-weight:300;color:var(--gold)}
.modal__aside ul{display:flex;flex-direction:column;gap:.6rem}
.modal__aside li{font-size:.8rem;color:var(--ink-dim);padding-left:1.1rem;position:relative}
.modal__aside li::before{content:"✦";position:absolute;left:0;color:var(--gold-bright);font-size:.6rem;top:.25rem}
.modal__price{font-size:1.8rem;font-weight:200;letter-spacing:-.045em;color:var(--gold);margin-top:.4rem}
.modal__form{position:relative;padding:clamp(1.8rem,3vw,2.6rem)}
.modal__form h4{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:200;letter-spacing:-.045em;margin-bottom:.4rem}
.modal__sub{font-size:.78rem;color:var(--ink-fade);margin-bottom:2rem}
.modal__form .form__success{border-radius:0}
@media (max-width:800px){
  .modal__panel{grid-template-columns:1fr}
  .modal__aside{border-right:0;border-bottom:1px solid var(--line);padding-top:3rem}
}

/* =========================================================================
   MOTION PRIMITIVES / A11Y
   ========================================================================= */
/* NB: no blanket `will-change` here — promoting dozens of elements to their own
   compositor layers costs more than it saves. It is set only on the handful of
   continuously-animated elements (hero layer, ticker tracks, hscroll track). */

/* generated by splitLines() / wrapWords() — descender-safe masking */
.line-mask{display:block;overflow:hidden;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
.line-inner{display:block}
.word{display:inline-block}
.word.is-em{font-style:italic;font-weight:300;color:var(--gold)}
.foot__big .word.is-em{color:inherit}

/* avoid a flash of unsplit text before GSAP takes over. opacity (not display)
   so splitLines() can still measure line boxes while these are hidden. */
body.pre-anim [data-split-lines],
body.pre-anim .hero__title{opacity:.001}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;
}

/* =========================================================================
   MOBILE REFINEMENTS
   ========================================================================= */
@media (max-width:900px){
  /* the floating dock is fixed over the page bottom — reserve room for it so it
     never sits on top of the last lines of content */
  .foot{padding-bottom:calc(7rem + env(safe-area-inset-bottom,0px))}
  .dock{bottom:calc(1.1rem + env(safe-area-inset-bottom,0px))}
  .dock__b{padding:.9rem 1.05rem}          /* 44px tap target */

  /* shorter amenity tiles: eight 260px cards made this section ~4 screens tall */
  .acard{min-height:200px}
  .acard--wide{min-height:220px}
  .amen__marquee{padding:1.2rem 0;margin-bottom:1.6rem}

  .radar{max-width:min(360px,78vw)}
  .plan{border-radius:12px}
}

@media (max-width:1150px){
  /* icon-only phone link was a 15px hit area */
  .nav__phone{
    width:42px;height:42px;justify-content:center;
    border:1px solid var(--line);border-radius:50%;
  }
}

@media (max-width:640px){
  /* nothing decorative below ~11px: it is unreadable on a phone */
  .lbl,.sec-kicker,.pill,.hero__eyebrow-txt,.hero__price-sub,.hform__kick,
  .acard__n,.pcard__idx,.pcard__spec span,.pcard__tag,.wrow__n,.loc__near-lbl,
  .modal__kick,.form__badge,.hlbl,.mplan__scale,.ticker__track span,
  .foot__bar,.menu__idx{font-size:.72rem;letter-spacing:.14em}
  .hform__note,.form__note,.consent__txt{font-size:.75rem}
  .hero__scroll-txt{font-size:.68rem}
  /* unit suffixes sat at ~8px next to the big numerals */
  .stat__num small,.loc__t small{font-size:.62rem;letter-spacing:.1em}
  .pin{font-size:.66rem}

  /* give text links a real hit area */
  .foot__col a,.menu__meta a{display:inline-block;padding:.3rem 0}
  .brand,.cta__phone{padding-block:.4rem}
  .loc__t{min-width:3.6rem;font-size:1.5rem}
  /* inherited 1.9 line-height left a gap between the price and "onwards" */
  .foot__price,.menu__price{line-height:1.25}
}

/* the dock label wrapped to two lines and made the bar 73px tall */
.dock__b{white-space:nowrap}
@media (max-width:430px){
  .dock{gap:.3rem;padding:.4rem}
  .dock__b{padding:.85rem .7rem;font-size:.62rem;letter-spacing:.07em}
  .dock__b--main{padding-inline:1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .grain{display:none}
  .hero__img{transform:none}
}