/* The Sustainable City, Yiti -- shared stylesheet for all pages.
   Edit tokens in :root. Homepage and component pages both link this file. */

/* =========================================================================
   THE SUSTAINABLE CITY, YITI
   Single-file homepage. Vanilla HTML / CSS / JS so the client team can edit
   it directly. GSAP + Lenis are progressive enhancement only: first paint
   and the lead form work with zero JavaScript.

   PUNCTUATION STANDARD: no em dashes, no en dashes anywhere in copy or UI.
   ========================================================================= */

/* ---- Design tokens -------------------------------------------------- */
:root{
  /* ---- TSC Primary colors (the SEE palette) ---- */
  --green:#00A96F;        /* TSC Green  -- Environmental; PRIMARY brand colour */
  --blue:#1492A5;         /* TSC Blue   -- Economic */
  --orange:#E37826;       /* TSC Orange -- Social */
  --teal:#1492A5;         /* legacy alias, maps to TSC Blue */

  /* ---- Extended tones ---- */
  --green-dark:#007343;
  --blue-dark:#007A88;
  --blue-light:#58BEC9;
  --orange-dark:#BF4D27;
  --orange-light:#F9A95E;

  /* ---- Secondary colours ---- */
  --lime:#7FCF35;
  --green-pale:#F3F8E8;   /* light tint for alternating sections */
  --amber:#FDBB53;
  --peach:#FFDAB9;
  --olive:#6F9B47;
  --green-soft:#D7EBBE;

  /* ---- Neutral UI ramp ---- */
  --black:#231F20;        /* text, deep backgrounds */
  --grey-900:#2E2E2E;
  --grey-700:#5A5A5A;
  --grey-500:#969696;
  --grey-300:#B5B4B5;
  --grey-100:#E5E5E5;

  /* ---- Surfaces (brand: white + neutral, no warm tints) ---- */
  --offwhite:#FAFBF9;     /* near-white page and card surface */
  --sand:#F3F8E8;         /* pale-green tinted sections */
  --sand-deep:#E5E5E5;    /* neutral fills and dividers */

  /* Cinematic dark sections (white logo on deep green is on-brand) */
  --green-night:#062a20;
  --green-night-2:#0a3a2a;

  --ink-soft:rgba(35,31,32,.66);
  --ink-faint:rgba(35,31,32,.42);
  --line:rgba(35,31,32,.14);

  /* ---- Type (brand: Uniform Pro Condensed + Uniform Pro;
     Barlow is the web-safe fallback that renders today) ---- */
  --display:"Uniform Pro Condensed","Barlow Condensed",Barlow,system-ui,sans-serif;
  --body:"Uniform Pro","Barlow",system-ui,-apple-system,sans-serif;

  /* Scale */
  --measure:68rem;
  --pad:clamp(1.25rem,5vw,6rem);

  /* Motion */
  --ease-weight:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;max-width:100%}
body{
  font-family:var(--body);
  color:var(--black);
  background:var(--offwhite);
  line-height:1.55;
  font-size:clamp(1rem,.6rem + .6vw,1.125rem);
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* Display type */
.display{
  font-family:var(--display);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.01em;
  text-transform:none;
}
.eyebrow{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  color:var(--green-dark);
}
.eyebrow--light{color:rgba(255,255,255,.7)}
.lede{font-size:clamp(1.15rem,.9rem + .9vw,1.5rem);line-height:1.45;color:var(--ink-soft)}

/* ---- Accessibility helpers ----------------------------------------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:200;
  background:var(--green-dark);color:#fff;padding:.7rem 1rem;border-radius:6px;
  transition:top .2s var(--ease-weight);
}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:2px}

/* ---- Layout primitives --------------------------------------------- */
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(4.5rem,9vw,9rem);position:relative}
.section--dark{background:var(--green-night);color:#fff}
.section--sand{background:var(--sand)}
.section--offwhite{background:var(--offwhite)}

/* ---- Header -------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--pad);
  transition:background .4s var(--ease-weight),box-shadow .4s var(--ease-weight),color .4s var(--ease-weight);
  color:#fff;
}
.site-header.is-solid{
  background:rgba(247,245,240,.92);
  backdrop-filter:saturate(140%) blur(10px);
  color:var(--black);
  box-shadow:0 1px 0 var(--line);
}
.wordmark{display:flex;flex-direction:column;justify-content:center;min-height:44px;line-height:1;letter-spacing:.02em}
.wordmark b{font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:.06em}
.wordmark span{font-family:var(--display);font-weight:600;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;opacity:.82}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;opacity:.9}
.nav a:hover{opacity:1}
.btn{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.82rem;padding:.72rem 1.25rem;border-radius:999px;
  background:var(--green);color:#fff;transition:transform .3s var(--ease-weight),background .3s;
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:44px;
}
.btn:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--ghost:hover{background:currentColor}
.btn--ghost:hover span{color:var(--offwhite)}
.nav-toggle{display:none}

/* Persistent lead CTA (reachable from anywhere, one interaction) */
.lead-dock{
  position:fixed;z-index:80;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s var(--ease-weight),transform .4s var(--ease-weight);
  box-shadow:0 12px 30px rgba(6,42,32,.28);
}
.lead-dock.is-shown{opacity:1;transform:none;pointer-events:auto}

/* ---- HERO: The Arrival --------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;color:#fff;
  /* Meaningful first frame, zero asset dependency: a CSS sea and sky.
     Drop real drone footage into .hero__video below to take over. */
  background:linear-gradient(180deg,#bfe6e6 0%,#7fc6c9 26%,#2f8a93 52%,#0c5f5a 74%,#063b3a 100%);
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0; /* set to 1 once a real <video src> is supplied */
}
/* Parallax atmosphere layers (pure CSS / SVG, cheap) */
.hero__layer{position:absolute;inset:0;z-index:1;will-change:transform}
/*SUN*/.hero__sun{
  opacity:.45;position:absolute;left:50%;top:18%;width:min(46vmin,360px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,230,.95),rgba(255,221,170,.5) 45%,transparent 68%);
  filter:blur(2px);
}
.hero__sea{
  position:absolute;left:-5%;right:-5%;bottom:0;height:46%;
  background:linear-gradient(180deg,rgba(8,60,58,.0),rgba(6,42,32,.55));
}
.hero__horizon{
  position:absolute;left:0;right:0;top:54%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
.hero__grain{position:absolute;inset:0;z-index:2;opacity:.06;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 40%,rgba(6,42,32,.55) 100%)}
.hero__content{position:relative;z-index:4;width:100%;padding-bottom:clamp(3.5rem,8vw,7rem)}
.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(3.2rem,11vw,9.5rem);line-height:.9;letter-spacing:-.015em;
  text-wrap:balance;max-width:16ch;
}
.hero h1 em{font-style:normal;color:#cdeede}
.hero__sub{margin-top:1.4rem;max-width:40ch;color:rgba(255,255,255,.86);font-size:clamp(1.05rem,.9rem + .6vw,1.4rem)}
.hero__cta{margin-top:2rem;display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.scroll-cue{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.28em;font-size:.7rem;color:rgba(255,255,255,.8)
}
.scroll-cue .dot{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.8),transparent);animation:cue 2.4s var(--ease-weight) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media(max-width:860px),(max-height:720px){.scroll-cue{display:none}}

/* ---- Reveal utility ------------------------------------------------ */
.reveal{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1s var(--ease-weight),transform 1s var(--ease-weight),filter 1s var(--ease-weight);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none;filter:none}
.stagger>*{opacity:0;transform:translateY(22px);filter:blur(8px)}
.stagger.in>*{opacity:1;transform:none;filter:none;transition:opacity .85s var(--ease-weight),transform .85s var(--ease-weight),filter .85s var(--ease-weight)}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}

/* ---- Thesis -------------------------------------------------------- */
.thesis .display{font-size:clamp(2.1rem,1.2rem + 4vw,4.6rem);max-width:18ch;text-wrap:balance}
.thesis .lede{margin-top:1.6rem;max-width:52ch}

/* ---- Credibility / track record ------------------------------------ */
.cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;margin-top:2.6rem;background:var(--line);border:1px solid var(--line)}
.city{background:var(--offwhite);padding:1.6rem 1.4rem}
.city b{font-family:var(--display);font-weight:700;font-size:1.7rem;display:block}
.city span{color:var(--ink-faint);font-size:.85rem}
.city--logo{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:.9rem;background:#fff}
.city__logo{height:44px;width:auto;align-self:flex-start}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.1rem;margin-top:3rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{display:flex;gap:3rem;width:max-content;animation:slide 32s linear infinite}
.marquee__row span{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.4rem,3vw,2.4rem);color:var(--ink-faint)}
.marquee__row span i{font-style:normal;color:var(--green)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---- Net-zero engine ----------------------------------------------- */
.engine .eyebrow{color:var(--teal)}
.engine h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.2rem + 3.5vw,4rem);max-width:16ch;margin-top:.6rem}
.engine__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.4rem);margin-top:3.4rem;position:relative}
@media(min-width:560px){.engine__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.engine__grid{grid-template-columns:repeat(4,1fr)}}
.metric{position:relative;padding-top:1.6rem;border-top:2px solid rgba(20,146,165,.4)}
.metric__num{font-family:var(--display);font-weight:700;line-height:1;font-size:clamp(3rem,2rem + 5vw,5.6rem);color:#eafcff}
.metric__num .u{font-size:.45em;color:var(--teal);vertical-align:.5em;margin-left:.1em}
.metric__label{margin-top:.6rem;color:rgba(255,255,255,.78);max-width:26ch}
.engine__connector{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;pointer-events:none}
.engine__connector path{fill:none;stroke:rgba(20,146,165,.5);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.engine__more{margin-top:2.8rem;display:flex;gap:1.2rem;flex-wrap:wrap;color:rgba(255,255,255,.7)}
.engine__more div{flex:1 1 220px;border-left:1.5px solid rgba(255,255,255,.2);padding-left:1rem}
.engine__more b{font-family:var(--display);font-weight:600;color:#fff;display:block;font-size:1.05rem;letter-spacing:.02em}
.engine__note{margin-top:2.4rem;font-size:.82rem;color:rgba(255,255,255,.5);max-width:60ch}

/* ---- Components: one place, three ways to live --------------------- */
.components__intro{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.components__intro h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.2rem + 3.5vw,4.2rem);max-width:16ch}

/* Desktop: horizontal pinned track. Mobile / reduced-motion: vertical stack. */
.track{margin-top:3rem}
.panels{display:grid;gap:1.5rem}
.panel{
  position:relative;border-radius:18px;overflow:hidden;min-height:62vh;
  display:flex;align-items:flex-end;color:#fff;isolation:isolate;
  background:var(--green-night);
}
.panel__media{position:absolute;inset:0;z-index:-2}
/* Placeholder media. Replace each gradient with the real render named in the comment. */
.panel--district .panel__media{background:linear-gradient(135deg,#0a3a2a,#0e5a3e 60%,#13715a)} /* Sustainable District villa front-view render */
.panel--plaza .panel__media{background:linear-gradient(135deg,#0c4b52,#13808f 55%,#1aa1a8)}      /* The Plaza exterior render */
.panel--arc .panel__media{background:linear-gradient(135deg,#16110e,#3a2a1c 55%,#6e4a27)}        /* The Arc exterior render ACGI01 / ACGI07 / ACGI08 */
.panel__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.6))}
.panel__tag{position:absolute;top:1.2rem;left:1.4rem;font-family:var(--display);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:rgba(255,255,255,.75)}
.panel__body{padding:clamp(1.6rem,3vw,2.6rem);position:relative;z-index:1}
.panel__name{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,1.4rem + 3vw,4rem);line-height:.95}
.panel__facts{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1rem}
.panel__facts div b{font-family:var(--display);font-weight:700;font-size:1.5rem;display:block}
.panel__facts div span{font-size:.82rem;color:rgba(255,255,255,.72)}
.panel__link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;border-bottom:1.5px solid rgba(255,255,255,.5);padding-bottom:.2rem}
.panel__link:hover{border-color:#fff}

@media(min-width:900px){
  .track.is-horizontal{position:relative}
  .track.is-horizontal .panels{
    display:flex;gap:2rem;flex-wrap:nowrap;width:max-content;
  }
  .track.is-horizontal .panel{width:min(78vw,860px);min-height:74vh}
}

/* ---- Nikki Beach moment (the exhale) ------------------------------- */
.arc{background:var(--sand);color:var(--black);overflow:hidden}
.arc__inner{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:980px){.arc__inner{grid-template-columns:1.05fr .95fr}}
.arc__media{
  position:relative;border-radius:16px;min-height:56vh;overflow:hidden;
  /* The Arc Residences exterior render (ACGI08). Replace gradient with the real asset. */
  background:linear-gradient(140deg,#1a130d,#4a3320 55%,#8a5a2e);
}
.arc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 55%)}
.arc__media .badge{position:absolute;left:1.4rem;bottom:1.3rem;z-index:1;font-family:var(--display);font-weight:700;letter-spacing:.04em;color:#fff;font-size:1.2rem}
.arc__media .badge i{font-style:normal;color:var(--orange)}
.arc h2{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,1.4rem + 4vw,4.8rem);line-height:.95;max-width:14ch}
.arc h2 em{font-style:normal;color:var(--orange)}
.arc .lede{margin-top:1.4rem;max-width:46ch;color:var(--ink-soft)}
.collections{display:grid;gap:1px;margin-top:2rem;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.collection{background:var(--offwhite);padding:1.1rem 1.3rem;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.collection b{font-family:var(--display);font-weight:700;font-size:1.25rem}
.collection span{font-size:.82rem;color:var(--ink-soft);text-align:right;max-width:24ch}
.tier{display:inline-block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;padding:.2rem .5rem;border-radius:999px;margin-left:.4rem;vertical-align:middle}
.tier--full{background:var(--orange);color:#fff}
.tier--light{background:var(--sand-deep);color:var(--black)}

/* ---- Masterplan ---------------------------------------------------- */
.plan h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.2rem + 3.5vw,4rem);max-width:14ch}
.plan__stage{
  position:relative;margin-top:2.4rem;border-radius:16px;overflow:hidden;
  aspect-ratio:16/10;min-height:340px;color:#fff;
  /* Replace this gradient + SVG with the real Yiti masterplan render. Keep hotspots aligned to it. */
  background:radial-gradient(120% 90% at 70% 20%,#bfe3df,#6db7b4 35%,#1f7d77 70%,#0c4f4c);
}
.plan__water{position:absolute;inset:0;background:linear-gradient(120deg,rgba(20,146,165,.0),rgba(20,146,165,.25));mix-blend-mode:screen}
.plan__coast{position:absolute;inset:0}
.hotspot{
  position:absolute;transform:translate(-50%,-50%);z-index:3;
  width:clamp(44px,4vw,46px);height:clamp(44px,4vw,46px);border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 2px rgba(255,255,255,.55) inset;backdrop-filter:blur(2px);
  transition:transform .3s var(--ease-weight),background .3s;
}
.hotspot::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.hotspot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.hotspot:hover,.hotspot[aria-expanded="true"]{background:var(--green);transform:translate(-50%,-50%) scale(1.08)}
.hotspot__label{
  position:absolute;left:50%;top:-2.2rem;transform:translateX(-50%);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;
  white-space:nowrap;background:rgba(6,42,32,.8);padding:.25rem .55rem;border-radius:6px;opacity:0;transition:opacity .25s
}
.hotspot:hover .hotspot__label,.hotspot:focus-visible .hotspot__label{opacity:1}
/* Detail panel (desktop) becomes a bottom sheet on mobile */
.plan__detail{
  position:absolute;right:1rem;bottom:1rem;z-index:4;width:min(360px,80%);
  background:rgba(247,245,240,.96);color:var(--black);border-radius:14px;padding:1.2rem 1.3rem;
  box-shadow:0 16px 40px rgba(6,42,32,.3);transform:translateY(8px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-weight),transform .3s var(--ease-weight)
}
.plan__detail.is-open{opacity:1;transform:none;pointer-events:auto}
.plan__detail h3{font-family:var(--display);font-weight:700;font-size:1.5rem}
.plan__detail .eyebrow{margin-bottom:.3rem}
.plan__detail p{margin-top:.5rem;font-size:.92rem;color:var(--ink-soft)}
.plan__detail .close{position:absolute;top:.4rem;right:.4rem;font-size:1.2rem;line-height:1;color:var(--ink-faint);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.plan__hint{margin-top:1rem;font-size:.82rem;color:var(--ink-faint)}
@media(max-width:640px){
  .plan__detail{right:0;left:0;bottom:0;width:100%;border-radius:16px 16px 0 0;transform:translateY(100%)}
  .plan__detail.is-open{transform:none}
}

/* ---- Investment ---------------------------------------------------- */
.invest__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2.6rem}
.invest__card{background:var(--offwhite);border:1px solid var(--line);border-radius:14px;padding:1.5rem}
.invest__card b{font-family:var(--display);font-weight:700;font-size:1.4rem;display:block;margin-bottom:.4rem}
.invest__card p{font-size:.92rem;color:var(--ink-soft)}
.recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:1.5rem}
.recap div{background:var(--offwhite);padding:1.2rem}
.recap b{font-family:var(--display);font-weight:700;font-size:1.6rem;display:block}
.recap span{font-size:.82rem;color:var(--ink-faint)}

/* ---- Proof: partners ----------------------------------------------- */
.proof{background:var(--offwhite)}
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.4rem}
.partner{background:var(--offwhite);display:grid;place-items:center;padding:1.8rem 1rem;text-align:center}
.partner b{font-family:var(--display);font-weight:700;letter-spacing:.04em;font-size:1.05rem;color:var(--ink-soft)}
.awards-note{margin-top:1.5rem;font-size:.82rem;color:var(--ink-faint)}

/* ---- Register interest --------------------------------------------- */
.register{background:var(--green-night);color:#fff}
.register h2{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,1.4rem + 4vw,4.6rem);max-width:14ch}
.register .lede{color:rgba(255,255,255,.78);max-width:46ch;margin-top:1rem}
.form{margin-top:2.6rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.col-2{grid-column:1 / -1}
.field label{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:rgba(255,255,255,.7)}
.field .req{color:var(--orange)}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;
  padding:.8rem .9rem;border-radius:10px;font:inherit;width:100%;min-height:44px;transition:border-color .25s
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.4)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:none}
.field select option{color:#000}
.phone-row{display:grid;grid-template-columns:120px 1fr;gap:.6rem}
.form__actions{grid-column:1 / -1;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
.form__submit{background:var(--green);color:#fff;padding:.95rem 1.8rem;border-radius:999px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.form__submit:hover{background:#fff;color:var(--green-dark)}
.form__small{font-size:.78rem;color:rgba(255,255,255,.55);max-width:40ch}
.form__status{grid-column:1 / -1;font-size:.92rem;min-height:1.2em}
.form__status.ok{color:#9fe9c8}
.form__status.err{color:#ffb59a}
@media(max-width:640px){.form{grid-template-columns:1fr}}

/* ---- Footer -------------------------------------------------------- */
.site-footer{background:var(--black);color:rgba(255,255,255,.8);padding-block:clamp(3rem,6vw,5rem)}
.footer__top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer__nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer__nav a{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;opacity:.8}
.footer__nav a:hover{opacity:1}
.footer__legal{margin-top:2.5rem;font-size:.78rem;color:rgba(255,255,255,.45);max-width:70ch;line-height:1.6}

/* ---- Mobile nav ---------------------------------------------------- */
@media(max-width:860px){
  .nav{
    position:fixed;inset:0;z-index:95;flex-direction:column;justify-content:center;gap:1.8rem;
    background:var(--green-night);transform:translateX(100%);transition:transform .45s var(--ease-weight),visibility .45s;
    color:#fff;visibility:hidden;
  }
  .nav.is-open{transform:none;visibility:visible}
  .nav a{font-size:1.4rem}
  .nav .btn{font-size:1rem}
  .nav-toggle{display:inline-flex;flex-direction:column;gap:5px;z-index:96;width:30px;padding:4px 0}
  .nav-toggle span{height:2px;background:currentColor;transition:transform .3s,opacity .3s}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---- Reduced motion: elegant static experience --------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal,.stagger>*{opacity:1 !important;transform:none !important;filter:none !important}
  .marquee__row{animation:none;transform:none}
  .hotspot::after{display:none}
}

/* =========================================================================
   COMPONENT / DEEPER PAGE SHARED STYLES
   Used by district.html, plaza.html, arc.html, sustainability.html
   ========================================================================= */

/* Page hero (image-backed, real renders where the product is real) */
.page-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--green-night)}
.page-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,42,32,.15) 0%,rgba(6,42,32,.2) 45%,rgba(6,42,32,.82) 100%)}
.page-hero__content{position:relative;z-index:2;width:100%;padding-block:clamp(2.5rem,6vw,5rem)}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,1.6rem+6vw,6.5rem);line-height:.92;letter-spacing:-.015em;max-width:16ch;text-wrap:balance}
.page-hero__sub{margin-top:1rem;max-width:46ch;color:rgba(255,255,255,.86);font-size:clamp(1.05rem,.9rem+.5vw,1.35rem)}
/* Placeholder hero variant: clearly not a real render, brand-coloured */
.page-hero--placeholder .page-hero__img{display:none}
.page-hero--district{background:linear-gradient(135deg,#0a3a2a,#0e5a3e 60%,#13715a)}
.page-hero--plaza{background:linear-gradient(135deg,#0c4b52,#13808f 55%,#1aa1a8)}

/* Breadcrumb */
.crumb{display:flex;gap:.6rem;align-items:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:rgba(255,255,255,.7);margin-bottom:1rem}
.crumb a{opacity:.85}.crumb a:hover{opacity:1}.crumb span{opacity:.5}

/* Lead statement */
.statement{font-family:var(--display);font-weight:700;line-height:.98;font-size:clamp(1.9rem,1.2rem+3.4vw,4rem);max-width:18ch;text-wrap:balance}

/* Spec strip */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:2.4rem}
.specs div{background:var(--offwhite);padding:1.3rem 1.2rem}
.section--dark .specs div{background:rgba(255,255,255,.03)}
.specs b{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.2rem+2vw,2.6rem);display:block;line-height:1}
.specs span{font-size:.84rem;color:var(--ink-faint);margin-top:.3rem;display:block}
.section--dark .specs span{color:rgba(255,255,255,.6)}

/* Two-column prose + media */
.split{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split--rev>.split__media{order:-1}}
.split__media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--sand-deep)}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.2rem+2.6vw,3.2rem);line-height:1;margin-bottom:1rem}
.split p+p{margin-top:1rem}

/* Captioned figure (truthful provenance for model imagery) */
figure{margin:0}
.figcap{font-size:.78rem;color:var(--ink-faint);margin-top:.6rem;font-style:italic}
.section--dark .figcap{color:rgba(255,255,255,.5)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,1.2vw,1rem);margin-top:2.4rem}
@media(min-width:720px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:var(--sand-deep);cursor:zoom-in}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-weight)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery .span-2{grid-column:span 2;aspect-ratio:3/2}
.gallery figcaption{position:absolute;left:.7rem;bottom:.6rem;z-index:1;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(6,20,16,.92);display:none;align-items:center;justify-content:center;padding:4vw}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px}
.lightbox__close{position:absolute;top:1.2rem;right:1.4rem;font-size:2rem;color:#fff;line-height:1}

/* Collection cards (Arc) */
.collcards{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.4rem}
@media(min-width:780px){.collcards{grid-template-columns:repeat(3,1fr)}}
.collcard{border:1px solid var(--line);border-radius:14px;padding:1.5rem;background:var(--offwhite);display:flex;flex-direction:column;gap:.5rem}
.collcard h3{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.collcard p{font-size:.92rem;color:var(--ink-soft)}
.collcard .tier{margin:0}

/* Feature list */
.featurelist{list-style:none;margin-top:1.6rem;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.featurelist li{background:var(--offwhite);padding:1.1rem 1.3rem;display:flex;gap:1rem;align-items:baseline}
.section--dark .featurelist li{background:rgba(255,255,255,.03)}
.featurelist b{font-family:var(--display);font-weight:600;letter-spacing:.02em;min-width:9ch}
.featurelist span{color:var(--ink-soft)}
.section--dark .featurelist span{color:rgba(255,255,255,.72)}

/* CTA band */
.cta-band{background:var(--green-dark);color:#fff;border-radius:18px;padding:clamp(2rem,5vw,3.5rem);display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1rem}
.cta-band h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,1.2rem+2vw,2.8rem);max-width:18ch;line-height:1}
.cta-band .btn{background:#fff;color:var(--green-dark)}
.cta-band .btn:hover{background:var(--black);color:#fff}

/* Model strip (truthful proven-model context) */
.modelstrip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:1.6rem}
@media(min-width:760px){.modelstrip{grid-template-columns:repeat(4,1fr)}}
.modelstrip figure{position:relative;aspect-ratio:1;background:var(--sand-deep)}
.modelstrip img{width:100%;height:100%;object-fit:cover}
.modelstrip figcaption{position:absolute;inset:auto 0 0 0;padding:.5rem .6rem;font-size:.68rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));font-family:var(--display);letter-spacing:.08em;text-transform:uppercase}

/* Homepage hero real image layer (sits over the CSS sea, under the scrim) */
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Panel media images (real renders) fill the component cards */
.panel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel__media{background-size:cover;background-position:center}
/* Arc moment + masterplan real images */
.arc__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.plan__stage img.plan__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.96}

/* =========================================================================
   UNIT CARDS / FLOOR PLANS / CONTACT  (brochure-driven component pages)
   ========================================================================= */
.unit{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--offwhite);margin-top:2rem}
.unit__media{position:relative;aspect-ratio:16/9;background:var(--sand-deep);overflow:hidden}
.unit__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-weight)}
.unit:hover .unit__media img{transform:scale(1.04)}
.unit__badge{position:absolute;top:1rem;left:1rem;z-index:2;background:rgba(6,42,32,.82);color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;padding:.4rem .8rem;border-radius:999px;backdrop-filter:blur(6px)}
.unit__body{padding:clamp(1.4rem,3vw,2.2rem)}
.unit__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.unit__name{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);line-height:1}
.unit__loc{font-size:.82rem;color:var(--ink-faint);margin-top:.2rem}
.unit__stats{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.unit__stats span{font-size:.84rem;border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;color:var(--ink-soft);background:#fff}
.unit__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}
.unit__gallery figure{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--sand-deep);cursor:zoom-in}
.unit__gallery img{width:100%;height:100%;object-fit:cover}
.unit__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* Floor plan figure (wide, zoomable, light) */
.floorplan{margin-top:1rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in}
.floorplan img{width:100%;height:auto;display:block}

/* Feature chips row */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.chips span{font-size:.82rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .85rem;color:var(--ink-soft)}
.section--dark .chips span{background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.14)}

/* Secondary button (Book a visit / Download brochure) */
.btn--line{background:transparent;border:1.5px solid currentColor;color:var(--green-dark)}
.btn--line:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}

/* Contact block in footer */
.footer__contact{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;margin:1.4rem 0 .4rem;font-size:.95rem}
.footer__contact a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.footer__contact b{font-family:var(--display);letter-spacing:.02em;font-weight:600}
.footer__social{display:flex;gap:1.1rem;margin-top:.4rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}
.footer__social a{color:rgba(255,255,255,.7)}
.footer__social a:hover{color:#fff}

/* =========================================================================
   MOBILE REFINEMENTS (applied last so they win)
   ========================================================================= */
@media(max-width:860px){
  /* Comfortable tap targets (>=44px) for secondary links */
  .footer__nav a,
  .footer__social a,
  .footer__contact a{display:inline-flex;align-items:center;min-height:44px;padding-block:.35rem}
  .footer__nav{gap:.4rem 1.4rem}
  .crumb a{display:inline-flex;align-items:center;min-height:44px}
  /* Open-menu links get a full 44px tap height */
  .nav a{padding-block:.45rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

  /* Keep the floating CTA clear of content and the home-bar / notch */
  .lead-dock{bottom:calc(1rem + env(safe-area-inset-bottom,0px));right:calc(1rem + env(safe-area-inset-right,0px))}
  /* Reserve space at the foot of the page so the dock never hides footer links */
  .site-footer{padding-bottom:6rem}

  /* Bigger unit-gallery thumbnails so renders and floor plans stay legible */
  .unit__gallery{grid-template-columns:repeat(2,1fr)}
  /* Let the floor-plan thumbnail (last child) span the full width on small screens */
  .unit__gallery figure:last-child{grid-column:1 / -1;aspect-ratio:16/9}
}

@media(max-width:460px){
  /* Single-column galleries on the smallest screens for clarity */
  .unit__gallery{grid-template-columns:1fr}
  .unit__gallery figure:last-child{aspect-ratio:16/10}
  /* Specs read better as two tidy columns rather than squeezing */
  .specs{grid-template-columns:repeat(2,1fr)}
}

/* Touch-area refinements for the remaining small controls */
@media(max-width:860px){
  .nav-toggle{min-height:44px;min-width:44px;justify-content:center;padding:10px 7px}
  /* Expand the panel link's tap zone without detaching its underline */
  .panel__link{position:relative}
  .panel__link::before{content:"";position:absolute;inset:-12px -8px;}
}

/* =========================================================================
   ABOUT + CONTACT page components
   ========================================================================= */
.brandcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:2.2rem}
.brandcard{background:var(--offwhite);border:1px solid var(--line);border-top:4px solid var(--grey-300);border-radius:14px;padding:1.7rem 1.5rem}
.brandcard--green{border-top-color:var(--green)}
.brandcard--blue{border-top-color:var(--blue)}
.brandcard--orange{border-top-color:var(--orange)}
.brandcard small{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin-bottom:.6rem;color:var(--ink-faint)}
.brandcard h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.4rem;margin-bottom:.5rem;line-height:1.05}
.brandcard p{color:var(--ink-soft);font-size:.98rem}

.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem}
.ccard{background:var(--offwhite);border:1px solid var(--line);border-radius:14px;padding:1.8rem 1.6rem}
.ccard h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:1.25rem;margin-bottom:1.1rem}
.contact-line{display:block;margin-bottom:1rem;font-size:1.08rem}
.contact-line b{font-family:var(--display);letter-spacing:.04em;display:block;font-size:.74rem;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.2rem}
.contact-line a{color:var(--green-dark);border-bottom:1px solid var(--line)}
.dirlist{list-style:none;display:grid;gap:.75rem;margin-top:.4rem}
.dirlist li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.65rem}
.dirlist b{font-family:var(--display);white-space:nowrap;color:var(--green-dark)}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}}

/* =========================================================================
   EXPERIENCE LAYER  (cinematic motion, gated by .anim so reduced-motion and
   no-JS users get the calm static site; .anim is only added when motion is OK)
   ========================================================================= */

/* ---- Intro reveal (homepage) ---- */
.intro{position:fixed;inset:0;z-index:300;background:var(--green-night);display:grid;place-items:center;pointer-events:none}
.intro__mark{display:flex;flex-direction:column;align-items:center;line-height:1;color:#fff;text-align:center}
.intro__mark img{width:clamp(230px,44vw,460px);height:auto;display:block}
.intro__mark b{font-family:var(--display);font-weight:700;letter-spacing:.18em;font-size:clamp(2.6rem,8vw,5rem)}
.intro__mark span{font-family:var(--display);text-transform:uppercase;letter-spacing:.42em;font-size:clamp(.7rem,1.6vw,1rem);margin-top:.5rem;opacity:.85}
html:not(.anim) .intro, html.introdone .intro{display:none}
.anim .intro{animation:introOut 1.7s var(--ease-weight) forwards}
.anim .intro__mark{animation:introMark 1.7s var(--ease-weight) forwards}
@keyframes introMark{
  0%{opacity:0;transform:translateY(14px) scale(.98);letter-spacing:.5em}
  26%{opacity:1;transform:none}
  62%{opacity:1}
  100%{opacity:0;transform:translateY(-10px)}
}
@keyframes introOut{
  0%,58%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 0 100% 0);pointer-events:none;visibility:hidden}
}

/* ---- Page entrance + exit transitions ---- */
.anim main{animation:pageIn .5s var(--ease-weight) both}
@keyframes pageIn{from{opacity:.35}to{opacity:1}}
body.is-leaving{opacity:0;transition:opacity .32s var(--ease-weight)}

/* ---- Living hero: slow ambient drift + staged headline reveal ---- */
.anim .hero__img{animation:heroDrift 28s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.05)}to{transform:scale(1.13)}}
.anim .hero__content>*{opacity:0;animation:heroRise 1s var(--ease-weight) forwards}
.anim .hero__content>*:nth-child(1){animation-delay:.95s}
.anim .hero__content>*:nth-child(2){animation-delay:1.12s}
.anim .hero__content>*:nth-child(3){animation-delay:1.34s}
.anim .hero__content>*:nth-child(4){animation-delay:1.54s}
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.anim .hero h1{overflow:hidden}

/* ---- Engine: a continuous "current" flowing through the system ---- */
.engine__flow{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 16;opacity:.65;filter:drop-shadow(0 0 6px rgba(0,169,111,.6))}
.anim .engine__flow{animation:current 1.6s linear infinite}
@keyframes current{to{stroke-dashoffset:-36}}
.metric__num{position:relative}

/* ---- Interactive masterplan: zoom-to-pin + imagery in the detail card ---- */
.plan__bg{transition:transform 1.1s var(--ease-weight)}
.plan__stage.is-zoomed .plan__bg{transform:scale(1.32)}
.plan__detailimg{width:100%;height:120px;object-fit:cover;border-radius:10px;margin:-.2rem 0 .8rem;display:none}
.plan__detail.has-img .plan__detailimg{display:block}
.hotspot{cursor:pointer}
.hotspot[aria-expanded="true"]{background:var(--green);box-shadow:0 0 0 3px rgba(255,255,255,.85) inset,0 0 0 8px rgba(0,169,111,.35)}

/* Arc section call-to-action (replaces the collections breakdown) */
.arc__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.9rem}

/* =========================================================================
   EXPERIENCE REFINEMENTS
   ========================================================================= */
/* Slim scroll-progress bar (informational, kept for everyone) */
.scrollprog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;background:linear-gradient(90deg,var(--green),var(--blue));z-index:120;pointer-events:none}

/* Tactile hover refinements (pointer devices only, so touch has no stuck states) */
.panel__media{overflow:hidden}
.panel__media img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){
  .panel__media img,.arc__media img,.unit__gallery figure img{transition:transform 1.1s var(--ease-weight)}
  .panel:hover .panel__media img,.arc__media:hover img{transform:scale(1.06)}
  .arc__media{overflow:hidden}
  .unit__gallery figure{overflow:hidden}
  .unit__gallery figure:hover img{transform:scale(1.05)}
  .brandcard,.ccard,.invest__card,.collcard,.unit{transition:transform .45s var(--ease-weight),box-shadow .45s var(--ease-weight)}
  .brandcard:hover,.ccard:hover,.invest__card:hover,.collcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(35,31,32,.09)}
  .panel__link{transition:gap .3s var(--ease-weight)}
  .panel__link:hover{gap:.95rem}
  .btn{transition:transform .3s var(--ease-weight),background .3s,box-shadow .3s}
  .btn:hover{box-shadow:0 10px 26px rgba(0,169,111,.28)}
}

/* =========================================================================
   MASTERPLAN (full-community watercolour from the brochure, brand-adapted)
   ========================================================================= */
.mp{background:var(--green-night);color:#fff}
.mp .eyebrow{color:var(--lime)}
.mp-header{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;padding-bottom:30px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.mp-h-left h2{color:#fff;margin:.4rem 0 0}
.mp-h-left h2 em{font-style:italic;color:var(--lime)}
.mp-h-right{max-width:460px;color:rgba(255,255,255,.62);line-height:1.7;margin:0}

.mp-scroll{position:relative}
.mp-stage{position:relative;width:100%;aspect-ratio:2400/1696;overflow:visible}
.mp-img{width:100%;height:100%;display:block;object-fit:contain;border-radius:10px}
.mp-mask{position:absolute;inset:0;background:rgba(5,28,21,.72);opacity:0;pointer-events:none;border-radius:10px;transition:opacity .45s var(--ease-weight)}
.mp-stage.zone-active .mp-mask{opacity:1;-webkit-mask-image:radial-gradient(ellipse var(--rx,8%) var(--ry,8%) at var(--cx,50%) var(--cy,50%),transparent 40%,#000 96%);mask-image:radial-gradient(ellipse var(--rx,8%) var(--ry,8%) at var(--cx,50%) var(--cy,50%),transparent 40%,#000 96%)}
.mp-stage.zone-spine{overflow:hidden}
.mp-stage.zone-spine .mp-mask{-webkit-mask-image:radial-gradient(ellipse 18% 2% at 45.9% 47.6%,transparent 45%,#000 96%);mask-image:radial-gradient(ellipse 18% 2% at 45.9% 47.6%,transparent 45%,#000 96%);transform:rotate(12deg) scale(1.6);transform-origin:45.9% 47.6%}
.mp-overlay{position:absolute;inset:0;pointer-events:none}

/* markers */
.mp-spot{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;z-index:2}
.mp-spot .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,169,111,.2),0 0 18px rgba(0,169,111,.5);transition:width .35s var(--ease-weight),height .35s var(--ease-weight),box-shadow .35s ease}
.mp-spot .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,169,111,.5);transition:width .4s ease,height .4s ease,border-color .3s ease}
.mp-spot .ring2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(0,169,111,.18)}
.anim .mp-spot .ring{animation:mppulse 5s ease-in-out infinite}
.anim .mp-spot .ring2{animation:mppulse 5s 1.5s ease-in-out infinite}
@keyframes mppulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.55}50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
.mp-spot:hover .core,.mp-spot:focus-visible .core,.mp-spot.active .core{width:16px;height:16px;box-shadow:0 0 0 6px rgba(0,169,111,.22),0 0 28px rgba(0,169,111,.65)}
.mp-spot:hover .ring,.mp-spot:focus-visible .ring,.mp-spot.active .ring{width:50px;height:50px;border-color:rgba(0,169,111,.85)}
.mp-spot:focus-visible{outline:none}
.mp-spot:focus-visible .core{outline:2px solid #fff;outline-offset:4px}

/* primary (The Arc) = orange accent */
.mp-spot.primary .core{width:14px;height:14px;background:var(--orange);box-shadow:0 0 0 6px rgba(227,120,38,.22),0 0 32px rgba(227,120,38,.7)}
.mp-spot.primary .ring{width:50px;height:50px;border-color:rgba(227,120,38,.7)}
.mp-spot.primary .ring2{width:84px;height:84px;border-color:rgba(227,120,38,.22)}
.mp-stage:not(.zone-active) .mp-spot.primary .core{box-shadow:0 0 0 6px rgba(227,120,38,.2),0 0 38px rgba(227,120,38,.6)}

/* label */
.mp-spot .label{position:absolute;top:50%;left:30px;transform:translateY(-50%);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s ease,transform .4s var(--ease-weight);background:rgba(5,26,20,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-left:2px solid var(--green);padding:9px 15px;border-radius:5px;z-index:3}
.mp-spot .label::before{content:"";position:absolute;left:-30px;top:50%;width:30px;height:1px;background:linear-gradient(to right,transparent,rgba(0,169,111,.6))}
.mp-spot .label .l-eyebrow{display:block;font-family:var(--body);font-size:8px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--lime);margin-bottom:4px}
.mp-spot .label .l-title{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:.01em;color:#fff;line-height:1.12}
.mp-spot .label .l-title em{font-style:normal;color:var(--lime)}
.mp-spot .label .l-meta{display:block;margin-top:4px;font-family:var(--body);font-size:.72rem;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.mp-spot:hover .label,.mp-spot:focus-visible .label,.mp-spot.active .label{opacity:1;transform:translate(4px,-50%)}
.mp-spot.primary .label{border-left-color:var(--orange)}
.mp-spot.primary .label .l-eyebrow,.mp-spot.primary .label .l-title em{color:var(--orange-light)}
.mp-spot.primary .label .l-title{font-size:1.12rem}
.mp-spot.flip .label{left:auto;right:30px;border-left:none;border-right:2px solid var(--green)}
.mp-spot.flip.primary .label{border-right-color:var(--orange)}
.mp-spot.flip .label::before{left:auto;right:-30px;background:linear-gradient(to left,transparent,rgba(0,169,111,.6))}
.mp-spot.flip:hover .label,.mp-spot.flip:focus-visible .label,.mp-spot.flip.active .label{transform:translate(-4px,-50%)}

.mp-hint{margin-top:1.4rem;font-size:.82rem;color:rgba(255,255,255,.5);text-align:center}
.mp-hint__drag{display:none}

/* mobile: pan a larger plan so all 17 zones stay legible */
@media (max-width:760px){
  .mp-header{flex-direction:column;align-items:flex-start;gap:14px}
  .mp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
  .mp-stage{width:760px}
  .mp-hint__drag{display:inline}
}

/* ============================================================
   Interactive master plan: watercolour + spotlight (homepage #plan)
   Ported from the brochure mechanic, re-themed to the TSC palette.
   Uses an mp-* namespace so the legacy .plan__* rules don't apply.
   ============================================================ */
.mp-stage{position:relative;width:100%;margin-top:2.4rem;border-radius:16px;overflow:hidden;
  aspect-ratio:2000/1413;background:var(--sand);
  box-shadow:0 18px 50px rgba(6,42,32,.10);border:1px solid var(--line)}
.mp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.03) contrast(1.02)}
.mp-overlay{position:absolute;inset:0;pointer-events:none;z-index:3}
.mp-scrim{position:absolute;inset:0;z-index:2;background:rgba(6,42,32,.46);opacity:0;
  pointer-events:none;transition:opacity .5s var(--ease-weight)}
.mp-stage.zone-active .mp-scrim{opacity:1;
  -webkit-mask-image:radial-gradient(ellipse var(--rx,8%) var(--ry,8%) at var(--cx,50%) var(--cy,50%),transparent 38%,#000 94%);
          mask-image:radial-gradient(ellipse var(--rx,8%) var(--ry,8%) at var(--cx,50%) var(--cy,50%),transparent 38%,#000 94%)}
.mp-stage.zone-spine .mp-scrim{
  -webkit-mask-image:radial-gradient(ellipse 18% 2% at 45.9% 47.6%,transparent 45%,#000 95%);
          mask-image:radial-gradient(ellipse 18% 2% at 45.9% 47.6%,transparent 45%,#000 95%)}

.mp-hotspot{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;
  pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;z-index:4}
.mp-hotspot .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(0,169,111,.20),0 0 16px rgba(0,169,111,.55);
  transition:width .35s var(--ease-weight),height .35s var(--ease-weight),box-shadow .35s ease}
.mp-hotspot .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(0,169,111,.55);
  animation:mpPulse 5s ease-in-out infinite}
.mp-hotspot .ring2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(0,169,111,.22);
  animation:mpPulse 5s 1.5s ease-in-out infinite}
@keyframes mpPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}
  50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
.mp-hotspot:hover .core,.mp-hotspot:focus-visible .core,.mp-hotspot.active .core{
  width:15px;height:15px;box-shadow:0 0 0 6px rgba(0,169,111,.24),0 0 26px rgba(0,169,111,.65)}
.mp-hotspot:hover .ring,.mp-hotspot:focus-visible .ring,.mp-hotspot.active .ring{
  width:50px;height:50px;border-color:rgba(0,169,111,.85)}
.mp-hotspot.primary .core{width:13px;height:13px;
  box-shadow:0 0 0 6px rgba(0,169,111,.24),0 0 30px rgba(0,169,111,.70)}
.mp-hotspot.primary .ring{width:52px;height:52px;border-color:rgba(0,169,111,.70)}
.mp-hotspot.primary .ring2{width:90px;height:90px;border-color:rgba(0,169,111,.22)}
.mp-hotspot:focus-visible{outline:none}
.mp-hotspot:focus-visible .core{box-shadow:0 0 0 3px var(--offwhite),0 0 0 6px var(--green)}

.mp-hotspot .label{position:absolute;top:50%;left:34px;transform:translateY(-50%);
  white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .3s ease,transform .4s var(--ease-weight);
  background:rgba(6,42,32,.90);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);border-left:2px solid var(--green);
  padding:9px 15px;border-radius:4px;box-shadow:0 10px 30px rgba(6,42,32,.28)}
.mp-hotspot .label::before{content:"";position:absolute;left:-30px;top:50%;width:30px;height:1px;
  background:linear-gradient(to right,transparent,rgba(0,169,111,.70))}
.mp-hotspot .l-eyebrow{display:block;font-family:var(--body);font-size:.56rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--blue-light);margin-bottom:4px}
.mp-hotspot .l-title{display:block;font-family:var(--display);font-weight:700;font-size:1.08rem;
  letter-spacing:.01em;color:var(--offwhite);line-height:1.08}
.mp-hotspot .l-title em{font-style:italic;color:var(--green-soft)}
.mp-hotspot .l-meta{display:block;margin-top:4px;font-family:var(--body);font-size:.62rem;
  font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.mp-hotspot:hover .label,.mp-hotspot:focus-visible .label,.mp-hotspot.active .label{
  opacity:1;transform:translate(4px,-50%)}
.mp-hotspot.primary .l-title{font-size:1.2rem}
.mp-hotspot.flip .label{left:auto;right:34px;border-left:none;border-right:2px solid var(--green)}
.mp-hotspot.flip .label::before{left:auto;right:-30px;
  background:linear-gradient(to left,transparent,rgba(0,169,111,.70))}
@media(prefers-reduced-motion:reduce){.mp-hotspot .ring,.mp-hotspot .ring2{animation:none}}
@media(max-width:640px){
  .mp-hotspot{width:44px;height:44px}
  .mp-hotspot .label{white-space:normal;max-width:44vw;padding:8px 11px}
  .mp-hotspot .l-title{font-size:.92rem}
  .mp-hotspot .l-meta{font-size:.6rem;max-width:none}
}

/* Garden Villa gallery has two true interior renders (living + plan):
   show them as a balanced pair instead of leaving an empty third cell. */
.unit__gallery--pair{grid-template-columns:repeat(2,1fr)}
.unit__gallery--pair figure:last-child{grid-column:auto;aspect-ratio:4/3}

/* Brand logo (official TSC Yiti mark), swaps with the header's light/solid state */
.wordmark{flex-direction:row;align-items:center}
.wordmark__logo{height:40px;width:auto;display:block}
.wordmark__logo--dark{display:none}
.site-header.is-solid .wordmark__logo--light{display:none}
.site-header.is-solid .wordmark__logo--dark{display:block}
@media(max-width:480px){.wordmark__logo{height:34px}}

/* ============ Motion layer (html.anim = GSAP active) ============ */
/* Hand .display reveals over to the word-rise animation */
html.anim .display.reveal{opacity:1;transform:none;filter:none;transition:none}
.wline{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.wline>span{display:inline-block;transform:translateY(112%)}
html.anim .hero__img,html.anim .page-hero__img{will-change:transform}
html.anim .split__media,html.anim .panel__media{overflow:hidden}
html.anim .split__media img,html.anim .panel__media img{will-change:transform}
html.anim .marquee__row{will-change:transform}
html.anim .mp-stage{will-change:transform,opacity}
.btn--primary,.fab{will-change:transform}

/* Awards rail */
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.2rem}
.award{background:var(--offwhite);padding:1.6rem 1.4rem}
.award b{font-family:var(--display);font-weight:700;font-size:1.25rem;display:block}
.award span{color:var(--ink-faint);font-size:.85rem}

/* Masterplan on phones: swipeable stage so pins keep breathing room */
.mp-scroll{overflow:visible}
@media(max-width:640px){
  .mp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(50% - 50vw);padding:0 5vw;scrollbar-width:none}
  .mp-scroll::-webkit-scrollbar{display:none}
  .mp-scroll .mp-stage{width:720px;min-width:720px}
  .mp-hotspot .l-eyebrow{font-size:.6rem}
  .mp-hotspot .l-meta{font-size:.66rem}
  .plan__swipe{display:block}
}
.plan__swipe{display:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--ink-faint);margin:.8rem 0 0;text-align:center}

/* Order fix: swipe hint visible on phones; nudge plan label sizes */
@media(max-width:640px){
  .plan__swipe{display:block}
  .mp-hotspot .l-eyebrow{font-size:.66rem}
  .mp-hotspot .l-meta{font-size:.72rem}
}

/* Construction update video */
.update__frame{margin:0}
.update__frame video{width:100%;height:auto;display:block;border-radius:14px;background:var(--green-night)}
.update__frame figcaption{margin-top:.8rem;font-size:.82rem;color:var(--ink-faint)}

/* Partner logos */
.partner__logo{max-height:34px;width:auto;max-width:170px;object-fit:contain;display:block}
.partner__logo--tall{max-height:58px}

/* The Arc: elevation gallery moment */
.arc__head{text-align:center}
.arc__foot{text-align:center}
.arcpan{overflow:hidden;margin-top:3.2rem;position:relative}
.arcpan__img{height:clamp(230px,42vh,470px);width:auto;max-width:none;display:block;will-change:transform}
html:not(.anim) .arcpan__img{width:100%;height:auto}
.arcpan__caption{margin-top:1.2rem;font-size:.82rem;color:var(--ink-faint)}
.arc__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
@media(max-width:640px){.arcpan__img{height:clamp(190px,30vh,300px)}}

/* Two-partner strip: a little more presence */
.partner{padding:2.2rem 1rem}
.partner__logo--tall{max-height:66px}

/* Linked partner cells */
a.partner{text-decoration:none;transition:background .3s var(--ease-weight)}
a.partner:hover{background:#fff}

/* ===== Grid integrity: no exposed background slabs, ever ===== */
/* Amenity/logo strips: fixed divisors of 4 and 8 so rows always complete */
.cities{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cities{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cities{grid-template-columns:1fr}}

/* ===== The value trio: what makes Yiti different ===== */
.value{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.4rem);margin-top:2.6rem}
.value__card{background:#fff;border-top:3px solid var(--green);padding:1.8rem 1.5rem 1.6rem;border-radius:0 0 12px 12px;box-shadow:0 1px 0 var(--line),0 10px 30px rgba(6,42,32,.05);transition:transform .35s var(--ease-weight),box-shadow .35s}
.value__card:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 18px 44px rgba(6,42,32,.09)}
.value__card b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);line-height:1;color:var(--green-dark)}
.value__card span{display:block;margin-top:.7rem;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
@media(max-width:820px){.value{grid-template-columns:1fr}}

/* ===== Alive layer ===== */
/* 1. Engine charges up under the pointer */
.engine.is-charged .engine__flow{animation-duration:.55s;opacity:1;stroke-width:3}
.engine .metric{transition:transform .35s var(--ease-weight)}
.engine .metric:hover{transform:translateY(-3px)}

/* 4. Tilt + light sweep cards */
.tiltable{transform-style:preserve-3d;position:relative;overflow:hidden}
.tiltable::after{content:"";position:absolute;inset:-40%;background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.tiltable:hover::after{opacity:1}

/* The Sustainable City, Yiti -- shared stylesheet for all pages.
   Edit tokens in :root. Homepage and component pages both link this file. */

/* =========================================================================
   THE SUSTAINABLE CITY, YITI
   Single-file homepage. Vanilla HTML / CSS / JS so the client team can edit
   it directly. GSAP + Lenis are progressive enhancement only: first paint
   and the lead form work with zero JavaScript.

   PUNCTUATION STANDARD: no em dashes, no en dashes anywhere in copy or UI.
   ========================================================================= */

/* ---- Design tokens -------------------------------------------------- */
:root{
  /* ---- TSC Primary colors (the SEE palette) ---- */
  --green:#00A96F;        /* TSC Green  -- Environmental; PRIMARY brand colour */
  --blue:#1492A5;         /* TSC Blue   -- Economic */
  --orange:#E37826;       /* TSC Orange -- Social */
  --teal:#1492A5;         /* legacy alias, maps to TSC Blue */

  /* ---- Extended tones ---- */
  --green-dark:#007343;
  --blue-dark:#007A88;
  --blue-light:#58BEC9;
  --orange-dark:#BF4D27;
  --orange-light:#F9A95E;

  /* ---- Secondary colours ---- */
  --lime:#7FCF35;
  --green-pale:#F3F8E8;   /* light tint for alternating sections */
  --amber:#FDBB53;
  --peach:#FFDAB9;
  --olive:#6F9B47;
  --green-soft:#D7EBBE;

  /* ---- Neutral UI ramp ---- */
  --black:#231F20;        /* text, deep backgrounds */
  --grey-900:#2E2E2E;
  --grey-700:#5A5A5A;
  --grey-500:#969696;
  --grey-300:#B5B4B5;
  --grey-100:#E5E5E5;

  /* ---- Surfaces (brand: white + neutral, no warm tints) ---- */
  --offwhite:#FAFBF9;     /* near-white page and card surface */
  --sand:#F3F8E8;         /* pale-green tinted sections */
  --sand-deep:#E5E5E5;    /* neutral fills and dividers */

  /* Cinematic dark sections (white logo on deep green is on-brand) */
  --green-night:#062a20;
  --green-night-2:#0a3a2a;

  --ink-soft:rgba(35,31,32,.66);
  --ink-faint:rgba(35,31,32,.42);
  --line:rgba(35,31,32,.14);

  /* ---- Type (brand: Uniform Pro Condensed + Uniform Pro;
     Barlow is the web-safe fallback that renders today) ---- */
  --display:"Uniform Pro Condensed","Barlow Condensed",Barlow,system-ui,sans-serif;
  --body:"Uniform Pro","Barlow",system-ui,-apple-system,sans-serif;

  /* Scale */
  --measure:68rem;
  --pad:clamp(1.25rem,5vw,6rem);

  /* Motion */
  --ease-weight:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;max-width:100%}
body{
  font-family:var(--body);
  color:var(--black);
  background:var(--offwhite);
  line-height:1.55;
  font-size:clamp(1rem,.6rem + .6vw,1.125rem);
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* Display type */
.display{
  font-family:var(--display);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.01em;
  text-transform:none;
}
.eyebrow{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  color:var(--green-dark);
}
.eyebrow--light{color:rgba(255,255,255,.7)}
.lede{font-size:clamp(1.15rem,.9rem + .9vw,1.5rem);line-height:1.45;color:var(--ink-soft)}

/* ---- Accessibility helpers ----------------------------------------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:200;
  background:var(--green-dark);color:#fff;padding:.7rem 1rem;border-radius:6px;
  transition:top .2s var(--ease-weight);
}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:2px}

/* ---- Layout primitives --------------------------------------------- */
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(4.5rem,9vw,9rem);position:relative}
.section--dark{background:var(--green-night);color:#fff}
.section--sand{background:var(--sand)}
.section--offwhite{background:var(--offwhite)}

/* ---- Header -------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--pad);
  transition:background .4s var(--ease-weight),box-shadow .4s var(--ease-weight),color .4s var(--ease-weight);
  color:#fff;
}
.site-header.is-solid{
  background:rgba(247,245,240,.92);
  backdrop-filter:saturate(140%) blur(10px);
  color:var(--black);
  box-shadow:0 1px 0 var(--line);
}
.wordmark{display:flex;flex-direction:column;justify-content:center;min-height:44px;line-height:1;letter-spacing:.02em}
.wordmark b{font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:.06em}
.wordmark span{font-family:var(--display);font-weight:600;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;opacity:.82}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;opacity:.9}
.nav a:hover{opacity:1}
.btn{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.82rem;padding:.72rem 1.25rem;border-radius:999px;
  background:var(--green);color:#fff;transition:transform .3s var(--ease-weight),background .3s;
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:44px;
}
.btn:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--ghost:hover{background:currentColor}
.btn--ghost:hover span{color:var(--offwhite)}
.nav-toggle{display:none}

/* Persistent lead CTA (reachable from anywhere, one interaction) */
.lead-dock{
  position:fixed;z-index:80;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s var(--ease-weight),transform .4s var(--ease-weight);
  box-shadow:0 12px 30px rgba(6,42,32,.28);
}
.lead-dock.is-shown{opacity:1;transform:none;pointer-events:auto}

/* ---- HERO: The Arrival --------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;color:#fff;
  /* Meaningful first frame, zero asset dependency: a CSS sea and sky.
     Drop real drone footage into .hero__video below to take over. */
  background:linear-gradient(180deg,#bfe6e6 0%,#7fc6c9 26%,#2f8a93 52%,#0c5f5a 74%,#063b3a 100%);
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0; /* set to 1 once a real <video src> is supplied */
}
/* Parallax atmosphere layers (pure CSS / SVG, cheap) */
.hero__layer{position:absolute;inset:0;z-index:1;will-change:transform}
/*SUN*/.hero__sun{
  opacity:.45;position:absolute;left:50%;top:18%;width:min(46vmin,360px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,230,.95),rgba(255,221,170,.5) 45%,transparent 68%);
  filter:blur(2px);
}
.hero__sea{
  position:absolute;left:-5%;right:-5%;bottom:0;height:46%;
  background:linear-gradient(180deg,rgba(8,60,58,.0),rgba(6,42,32,.55));
}
.hero__horizon{
  position:absolute;left:0;right:0;top:54%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
.hero__grain{position:absolute;inset:0;z-index:2;opacity:.06;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 40%,rgba(6,42,32,.55) 100%)}
.hero__content{position:relative;z-index:4;width:100%;padding-bottom:clamp(3.5rem,8vw,7rem)}
.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(3.2rem,11vw,9.5rem);line-height:.9;letter-spacing:-.015em;
  text-wrap:balance;max-width:16ch;
}
.hero h1 em{font-style:normal;color:#cdeede}
.hero__sub{margin-top:1.4rem;max-width:40ch;color:rgba(255,255,255,.86);font-size:clamp(1.05rem,.9rem + .6vw,1.4rem)}
.hero__cta{margin-top:2rem;display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.scroll-cue{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.28em;font-size:.7rem;color:rgba(255,255,255,.8)
}
.scroll-cue .dot{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.8),transparent);animation:cue 2.4s var(--ease-weight) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media(max-width:860px),(max-height:720px){.scroll-cue{display:none}}

/* ---- Reveal utility ------------------------------------------------ */
.reveal{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1s var(--ease-weight),transform 1s var(--ease-weight),filter 1s var(--ease-weight);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none;filter:none}
.stagger>*{opacity:0;transform:translateY(22px);filter:blur(8px)}
.stagger.in>*{opacity:1;transform:none;filter:none;transition:opacity .85s var(--ease-weight),transform .85s var(--ease-weight),filter .85s var(--ease-weight)}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}

/* ---- Thesis -------------------------------------------------------- */
.thesis .display{font-size:clamp(2.1rem,1.2rem + 4vw,4.6rem);max-width:18ch;text-wrap:balance}
.thesis .lede{margin-top:1.6rem;max-width:52ch}

/* ---- Credibility / track record ------------------------------------ */
.cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;margin-top:2.6rem;background:var(--line);border:1px solid var(--line)}
.city{background:var(--offwhite);padding:1.6rem 1.4rem}
.city b{font-family:var(--display);font-weight:700;font-size:1.7rem;display:block}
.city span{color:var(--ink-faint);font-size:.85rem}
.city--logo{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:.9rem;background:#fff}
.city__logo{height:44px;width:auto;align-self:flex-start}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.1rem;margin-top:3rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{display:flex;gap:3rem;width:max-content;animation:slide 32s linear infinite}
.marquee__row span{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.4rem,3vw,2.4rem);color:var(--ink-faint)}
.marquee__row span i{font-style:normal;color:var(--green)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---- Net-zero engine ----------------------------------------------- */
.engine .eyebrow{color:var(--teal)}
.engine h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.2rem + 3.5vw,4rem);max-width:16ch;margin-top:.6rem}
.engine__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.4rem);margin-top:3.4rem;position:relative}
@media(min-width:560px){.engine__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.engine__grid{grid-template-columns:repeat(4,1fr)}}
.metric{position:relative;padding-top:1.6rem;border-top:2px solid rgba(20,146,165,.4)}
.metric__num{font-family:var(--display);font-weight:700;line-height:1;font-size:clamp(3rem,2rem + 5vw,5.6rem);color:#eafcff}
.metric__num .u{font-size:.45em;color:var(--teal);vertical-align:.5em;margin-left:.1em}
.metric__label{margin-top:.6rem;color:rgba(255,255,255,.78);max-width:26ch}
.engine__connector{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;pointer-events:none}
.engine__connector path{fill:none;stroke:rgba(20,146,165,.5);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.engine__more{margin-top:2.8rem;display:flex;gap:1.2rem;flex-wrap:wrap;color:rgba(255,255,255,.7)}
.engine__more div{flex:1 1 220px;border-left:1.5px solid rgba(255,255,255,.2);padding-left:1rem}
.engine__more b{font-family:var(--display);font-weight:600;color:#fff;display:block;font-size:1.05rem;letter-spacing:.02em}
.engine__note{margin-top:2.4rem;font-size:.82rem;color:rgba(255,255,255,.5);max-width:60ch}

/* ---- Components: one place, three ways to live --------------------- */
.components__intro{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.components__intro h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.2rem + 3.5vw,4.2rem);max-width:16ch}

/* Desktop: horizontal pinned track. Mobile / reduced-motion: vertical stack. */
.track{margin-top:3rem}
.panels{display:grid;gap:1.5rem}
.panel{
  position:relative;border-radius:18px;overflow:hidden;min-height:62vh;
  display:flex;align-items:flex-end;color:#fff;isolation:isolate;
  background:var(--green-night);
}
.panel__media{position:absolute;inset:0;z-index:-2}
/* Placeholder media. Replace each gradient with the real render named in the comment. */
.panel--district .panel__media{background:linear-gradient(135deg,#0a3a2a,#0e5a3e 60%,#13715a)} /* Sustainable District villa front-view render */
.panel--plaza .panel__media{background:linear-gradient(135deg,#0c4b52,#13808f 55%,#1aa1a8)}      /* The Plaza exterior render */
.panel--arc .panel__media{background:linear-gradient(135deg,#16110e,#3a2a1c 55%,#6e4a27)}        /* The Arc exterior render ACGI01 / ACGI07 / ACGI08 */
.panel__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.6))}
.panel__tag{position:absolute;top:1.2rem;left:1.4rem;font-family:var(--display);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:rgba(255,255,255,.75)}
.panel__body{padding:clamp(1.6rem,3vw,2.6rem);position:relative;z-index:1}
.panel__name{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,1.4rem + 3vw,4rem);line-height:.95}
.panel__facts{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1rem}
.panel__facts div b{font-family:var(--display);font-weight:700;font-size:1.5rem;display:block}
.panel__facts div span{font-size:.82rem;color:rgba(255,255,255,.72)}
.panel__link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;border-bottom:1.5px solid rgba(255,255,255,.5);padding-bottom:.2rem}
.panel__link:hover{border-color:#fff}

@media(min-width:900px){
  .track.is-horizontal{position:relative}
  .track.is-horizontal .panels{
    display:flex;gap:2rem;flex-wrap:nowrap;width:max-content;
  }
  .track.is-horizontal .panel{width:min(78vw,860px);min-height:74vh}
}

/* ---- Nikki Beach moment (the exhale) ------------------------------- */
.arc{background:var(--sand);color:var(--black);overflow:hidden}
.arc__inner{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:980px){.arc__inner{grid-template-columns:1.05fr .95fr}}
.arc__media{
  position:relative;border-radius:16px;min-height:56vh;overflow:hidden;
  /* The Arc Residences exterior render (ACGI08). Replace gradient with the real asset. */
  background:linear-gradient(140deg,#1a130d,#4a3320 55%,#8a5a2e);
}
.arc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 55%)}
.arc__media .badge{position:absolute;left:1.4rem;bottom:1.3rem;z-index:1;font-family:var(--display);font-weight:700;letter-spacing:.04em;color:#fff;font-size:1.2rem}
.arc__media .badge i{font-style:normal;color:var(--orange)}
.arc h2{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,1.4rem + 4vw,4.8rem);line-height:.95;max-width:14ch}
.arc h2 em{font-style:normal;color:var(--orange)}
.arc .lede{margin-top:1.4rem;max-width:46ch;color:var(--ink-soft)}
.collections{display:grid;gap:1px;margin-top:2rem;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.collection{background:var(--offwhite);padding:1.1rem 1.3rem;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.collection b{font-family:var(--display);font-weight:700;font-size:1.25rem}
.collection span{font-size:.82rem;color:var(--ink-soft);text-align:right;max-width:24ch}
.tier{display:inline-block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;padding:.2rem .5rem;border-radius:999px;margin-left:.4rem;vertical-align:middle}
.tier--full{background:var(--orange);color:#fff}
.tier--light{background:var(--sand-deep);color:var(--black)}

/* ---- Masterplan ---------------------------------------------------- */
.plan h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.2rem + 3.5vw,4rem);max-width:14ch}
.plan__stage{
  position:relative;margin-top:2.4rem;border-radius:16px;overflow:hidden;
  aspect-ratio:16/10;min-height:340px;color:#fff;
  /* Replace this gradient + SVG with the real Yiti masterplan render. Keep hotspots aligned to it. */
  background:radial-gradient(120% 90% at 70% 20%,#bfe3df,#6db7b4 35%,#1f7d77 70%,#0c4f4c);
}
.plan__water{position:absolute;inset:0;background:linear-gradient(120deg,rgba(20,146,165,.0),rgba(20,146,165,.25));mix-blend-mode:screen}
.plan__coast{position:absolute;inset:0}
.hotspot{
  position:absolute;transform:translate(-50%,-50%);z-index:3;
  width:clamp(44px,4vw,46px);height:clamp(44px,4vw,46px);border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 2px rgba(255,255,255,.55) inset;backdrop-filter:blur(2px);
  transition:transform .3s var(--ease-weight),background .3s;
}
.hotspot::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.hotspot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.hotspot:hover,.hotspot[aria-expanded="true"]{background:var(--green);transform:translate(-50%,-50%) scale(1.08)}
.hotspot__label{
  position:absolute;left:50%;top:-2.2rem;transform:translateX(-50%);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;
  white-space:nowrap;background:rgba(6,42,32,.8);padding:.25rem .55rem;border-radius:6px;opacity:0;transition:opacity .25s
}
.hotspot:hover .hotspot__label,.hotspot:focus-visible .hotspot__label{opacity:1}
/* Detail panel (desktop) becomes a bottom sheet on mobile */
.plan__detail{
  position:absolute;right:1rem;bottom:1rem;z-index:4;width:min(360px,80%);
  background:rgba(247,245,240,.96);color:var(--black);border-radius:14px;padding:1.2rem 1.3rem;
  box-shadow:0 16px 40px rgba(6,42,32,.3);transform:translateY(8px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-weight),transform .3s var(--ease-weight)
}
.plan__detail.is-open{opacity:1;transform:none;pointer-events:auto}
.plan__detail h3{font-family:var(--display);font-weight:700;font-size:1.5rem}
.plan__detail .eyebrow{margin-bottom:.3rem}
.plan__detail p{margin-top:.5rem;font-size:.92rem;color:var(--ink-soft)}
.plan__detail .close{position:absolute;top:.4rem;right:.4rem;font-size:1.2rem;line-height:1;color:var(--ink-faint);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.plan__hint{margin-top:1rem;font-size:.82rem;color:var(--ink-faint)}
@media(max-width:640px){
  .plan__detail{right:0;left:0;bottom:0;width:100%;border-radius:16px 16px 0 0;transform:translateY(100%)}
  .plan__detail.is-open{transform:none}
}

/* ---- Investment ---------------------------------------------------- */
.invest__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2.6rem}
.invest__card{background:var(--offwhite);border:1px solid var(--line);border-radius:14px;padding:1.5rem}
.invest__card b{font-family:var(--display);font-weight:700;font-size:1.4rem;display:block;margin-bottom:.4rem}
.invest__card p{font-size:.92rem;color:var(--ink-soft)}
.recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:1.5rem}
.recap div{background:var(--offwhite);padding:1.2rem}
.recap b{font-family:var(--display);font-weight:700;font-size:1.6rem;display:block}
.recap span{font-size:.82rem;color:var(--ink-faint)}

/* ---- Proof: partners ----------------------------------------------- */
.proof{background:var(--offwhite)}
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.4rem}
.partner{background:var(--offwhite);display:grid;place-items:center;padding:1.8rem 1rem;text-align:center}
.partner b{font-family:var(--display);font-weight:700;letter-spacing:.04em;font-size:1.05rem;color:var(--ink-soft)}
.awards-note{margin-top:1.5rem;font-size:.82rem;color:var(--ink-faint)}

/* ---- Register interest --------------------------------------------- */
.register{background:var(--green-night);color:#fff}
.register h2{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,1.4rem + 4vw,4.6rem);max-width:14ch}
.register .lede{color:rgba(255,255,255,.78);max-width:46ch;margin-top:1rem}
.form{margin-top:2.6rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.col-2{grid-column:1 / -1}
.field label{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:rgba(255,255,255,.7)}
.field .req{color:var(--orange)}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;
  padding:.8rem .9rem;border-radius:10px;font:inherit;width:100%;min-height:44px;transition:border-color .25s
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.4)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:none}
.field select option{color:#000}
.phone-row{display:grid;grid-template-columns:120px 1fr;gap:.6rem}
.form__actions{grid-column:1 / -1;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
.form__submit{background:var(--green);color:#fff;padding:.95rem 1.8rem;border-radius:999px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.form__submit:hover{background:#fff;color:var(--green-dark)}
.form__small{font-size:.78rem;color:rgba(255,255,255,.55);max-width:40ch}
.form__status{grid-column:1 / -1;font-size:.92rem;min-height:1.2em}
.form__status.ok{color:#9fe9c8}
.form__status.err{color:#ffb59a}
@media(max-width:640px){.form{grid-template-columns:1fr}}

/* ---- Footer -------------------------------------------------------- */
.site-footer{background:var(--black);color:rgba(255,255,255,.8);padding-block:clamp(3rem,6vw,5rem)}
.footer__top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer__nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer__nav a{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;opacity:.8}
.footer__nav a:hover{opacity:1}
.footer__legal{margin-top:2.5rem;font-size:.78rem;color:rgba(255,255,255,.45);max-width:70ch;line-height:1.6}

/* ---- Mobile nav ---------------------------------------------------- */
@media(max-width:860px){
  .nav{
    position:fixed;inset:0;z-index:95;flex-direction:column;justify-content:center;gap:1.8rem;
    background:var(--green-night);transform:translateX(100%);transition:transform .45s var(--ease-weight),visibility .45s;
    color:#fff;visibility:hidden;
  }
  .nav.is-open{transform:none;visibility:visible}
  .nav a{font-size:1.4rem}
  .nav .btn{font-size:1rem}
  .nav-toggle{display:inline-flex;flex-direction:column;gap:5px;z-index:96;width:30px;padding:4px 0}
  .nav-toggle span{height:2px;background:currentColor;transition:transform .3s,opacity .3s}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---- Reduced motion: elegant static experience --------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal,.stagger>*{opacity:1 !important;transform:none !important;filter:none !important}
  .marquee__row{animation:none;transform:none}
  .hotspot::after{display:none}
}

/* =========================================================================
   COMPONENT / DEEPER PAGE SHARED STYLES
   Used by district.html, plaza.html, arc.html, sustainability.html
   ========================================================================= */

/* Page hero (image-backed, real renders where the product is real) */
.page-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--green-night)}
.page-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,42,32,.15) 0%,rgba(6,42,32,.2) 45%,rgba(6,42,32,.82) 100%)}
.page-hero__content{position:relative;z-index:2;width:100%;padding-block:clamp(2.5rem,6vw,5rem)}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,1.6rem+6vw,6.5rem);line-height:.92;letter-spacing:-.015em;max-width:16ch;text-wrap:balance}
.page-hero__sub{margin-top:1rem;max-width:46ch;color:rgba(255,255,255,.86);font-size:clamp(1.05rem,.9rem+.5vw,1.35rem)}
/* Placeholder hero variant: clearly not a real render, brand-coloured */
.page-hero--placeholder .page-hero__img{display:none}
.page-hero--district{background:linear-gradient(135deg,#0a3a2a,#0e5a3e 60%,#13715a)}
.page-hero--plaza{background:linear-gradient(135deg,#0c4b52,#13808f 55%,#1aa1a8)}

/* Breadcrumb */
.crumb{display:flex;gap:.6rem;align-items:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:rgba(255,255,255,.7);margin-bottom:1rem}
.crumb a{opacity:.85}.crumb a:hover{opacity:1}.crumb span{opacity:.5}

/* Lead statement */
.statement{font-family:var(--display);font-weight:700;line-height:.98;font-size:clamp(1.9rem,1.2rem+3.4vw,4rem);max-width:18ch;text-wrap:balance}

/* Spec strip */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:2.4rem}
.specs div{background:var(--offwhite);padding:1.3rem 1.2rem}
.section--dark .specs div{background:rgba(255,255,255,.03)}
.specs b{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.2rem+2vw,2.6rem);display:block;line-height:1}
.specs span{font-size:.84rem;color:var(--ink-faint);margin-top:.3rem;display:block}
.section--dark .specs span{color:rgba(255,255,255,.6)}

/* Two-column prose + media */
.split{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split--rev>.split__media{order:-1}}
.split__media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--sand-deep)}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.2rem+2.6vw,3.2rem);line-height:1;margin-bottom:1rem}
.split p+p{margin-top:1rem}

/* Captioned figure (truthful provenance for model imagery) */
figure{margin:0}
.figcap{font-size:.78rem;color:var(--ink-faint);margin-top:.6rem;font-style:italic}
.section--dark .figcap{color:rgba(255,255,255,.5)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,1.2vw,1rem);margin-top:2.4rem}
@media(min-width:720px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:var(--sand-deep);cursor:zoom-in}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-weight)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery .span-2{grid-column:span 2;aspect-ratio:3/2}
.gallery figcaption{position:absolute;left:.7rem;bottom:.6rem;z-index:1;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(6,20,16,.92);display:none;align-items:center;justify-content:center;padding:4vw}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px}
.lightbox__close{position:absolute;top:1.2rem;right:1.4rem;font-size:2rem;color:#fff;line-height:1}

/* Collection cards (Arc) */
.collcards{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.4rem}
@media(min-width:780px){.collcards{grid-template-columns:repeat(3,1fr)}}
.collcard{border:1px solid var(--line);border-radius:14px;padding:1.5rem;background:var(--offwhite);display:flex;flex-direction:column;gap:.5rem}
.collcard h3{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.collcard p{font-size:.92rem;color:var(--ink-soft)}
.collcard .tier{margin:0}

/* Feature list */
.featurelist{list-style:none;margin-top:1.6rem;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.featurelist li{background:var(--offwhite);padding:1.1rem 1.3rem;display:flex;gap:1rem;align-items:baseline}
.section--dark .featurelist li{background:rgba(255,255,255,.03)}
.featurelist b{font-family:var(--display);font-weight:600;letter-spacing:.02em;min-width:9ch}
.featurelist span{color:var(--ink-soft)}
.section--dark .featurelist span{color:rgba(255,255,255,.72)}

/* CTA band */
.cta-band{background:var(--green-dark);color:#fff;border-radius:18px;padding:clamp(2rem,5vw,3.5rem);display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1rem}
.cta-band h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,1.2rem+2vw,2.8rem);max-width:18ch;line-height:1}
.cta-band .btn{background:#fff;color:var(--green-dark)}
.cta-band .btn:hover{background:var(--black);color:#fff}

/* Model strip (truthful proven-model context) */
.modelstrip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:1.6rem}
@media(min-width:760px){.modelstrip{grid-template-columns:repeat(4,1fr)}}
.modelstrip figure{position:relative;aspect-ratio:1;background:var(--sand-deep)}
.modelstrip img{width:100%;height:100%;object-fit:cover}
.modelstrip figcaption{position:absolute;inset:auto 0 0 0;padding:.5rem .6rem;font-size:.68rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));font-family:var(--display);letter-spacing:.08em;text-transform:uppercase}

/* Homepage hero real image layer (sits over the CSS sea, under the scrim) */
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Panel media images (real renders) fill the component cards */
.panel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel__media{background-size:cover;background-position:center}
/* Arc moment + masterplan real images */
.arc__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.plan__stage img.plan__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.96}

/* =========================================================================
   UNIT CARDS / FLOOR PLANS / CONTACT  (brochure-driven component pages)
   ========================================================================= */
.unit{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--offwhite);margin-top:2rem}
.unit__media{position:relative;aspect-ratio:16/9;background:var(--sand-deep);overflow:hidden}
.unit__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-weight)}
.unit:hover .unit__media img{transform:scale(1.04)}
.unit__badge{position:absolute;top:1rem;left:1rem;z-index:2;background:rgba(6,42,32,.82);color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;padding:.4rem .8rem;border-radius:999px;backdrop-filter:blur(6px)}
.unit__body{padding:clamp(1.4rem,3vw,2.2rem)}
.unit__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.unit__name{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);line-height:1}
.unit__loc{font-size:.82rem;color:var(--ink-faint);margin-top:.2rem}
.unit__stats{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.unit__stats span{font-size:.84rem;border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;color:var(--ink-soft);background:#fff}
.unit__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}
.unit__gallery figure{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--sand-deep);cursor:zoom-in}
.unit__gallery img{width:100%;height:100%;object-fit:cover}
.unit__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* Floor plan figure (wide, zoomable, light) */
.floorplan{margin-top:1rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in}
.floorplan img{width:100%;height:auto;display:block}

/* Feature chips row */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.chips span{font-size:.82rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .85rem;color:var(--ink-soft)}
.section--dark .chips span{background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.14)}

/* Secondary button (Book a visit / Download brochure) */
.btn--line{background:transparent;border:1.5px solid currentColor;color:var(--green-dark)}
.btn--line:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}

/* Contact block in footer */
.footer__contact{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;margin:1.4rem 0 .4rem;font-size:.95rem}
.footer__contact a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.footer__contact b{font-family:var(--display);letter-spacing:.02em;font-weight:600}
.footer__social{display:flex;gap:1.1rem;margin-top:.4rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}
.footer__social a{color:rgba(255,255,255,.7)}
.footer__social a:hover{color:#fff}

/* =========================================================================
   MOBILE REFINEMENTS (applied last so they win)
   ========================================================================= */
@media(max-width:860px){
  /* Comfortable tap targets (>=44px) for secondary links */
  .footer__nav a,
  .footer__social a,
  .footer__contact a{display:inline-flex;align-items:center;min-height:44px;padding-block:.35rem}
  .footer__nav{gap:.4rem 1.4rem}
  .crumb a{display:inline-flex;align-items:center;min-height:44px}
  /* Open-menu links get a full 44px tap height */
  .nav a{padding-block:.45rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

  /* Keep the floating CTA clear of content and the home-bar / notch */
  .lead-dock{bottom:calc(1rem + env(safe-area-inset-bottom,0px));right:calc(1rem + env(safe-area-inset-right,0px))}
  /* Reserve space at the foot of the page so the dock never hides footer links */
  .site-footer{padding-bottom:6rem}

  /* Bigger unit-gallery thumbnails so renders and floor plans stay legible */
  .unit__gallery{grid-template-columns:repeat(2,1fr)}
  /* Let the floor-plan thumbnail (last child) span the full width on small screens */
  .unit__gallery figure:last-child{grid-column:1 / -1;aspect-ratio:16/9}
}

@media(max-width:460px){
  /* Single-column galleries on the smallest screens for clarity */
  .unit__gallery{grid-template-columns:1fr}
  .unit__gallery figure:last-child{aspect-ratio:16/10}
  /* Specs read better as two tidy columns rather than squeezing */
  .specs{grid-template-columns:repeat(2,1fr)}
}

/* Touch-area refinements for the remaining small controls */
@media(max-width:860px){
  .nav-toggle{min-height:44px;min-width:44px;justify-content:center;padding:10px 7px}
  /* Expand the panel link's tap zone without detaching its underline */
  .panel__link{position:relative}
  .panel__link::before{content:"";position:absolute;inset:-12px -8px;}
}

/* =========================================================================
   ABOUT + CONTACT page components
   ========================================================================= */
.brandcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:2.2rem}
.brandcard{background:var(--offwhite);border:1px solid var(--line);border-top:4px solid var(--grey-300);border-radius:14px;padding:1.7rem 1.5rem}
.brandcard--green{border-top-color:var(--green)}
.brandcard--blue{border-top-color:var(--blue)}
.brandcard--orange{border-top-color:var(--orange)}
.brandcard small{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin-bottom:.6rem;color:var(--ink-faint)}
.brandcard h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.4rem;margin-bottom:.5rem;line-height:1.05}
.brandcard p{color:var(--ink-soft);font-size:.98rem}

.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem}
.ccard{background:var(--offwhite);border:1px solid var(--line);border-radius:14px;padding:1.8rem 1.6rem}
.ccard h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:1.25rem;margin-bottom:1.1rem}
.contact-line{display:block;margin-bottom:1rem;font-size:1.08rem}
.contact-line b{font-family:var(--display);letter-spacing:.04em;display:block;font-size:.74rem;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.2rem}
.contact-line a{color:var(--green-dark);border-bottom:1px solid var(--line)}
.dirlist{list-style:none;display:grid;gap:.75rem;margin-top:.4rem}
.dirlist li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.65rem}
.dirlist b{font-family:var(--display);white-space:nowrap;color:var(--green-dark)}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}}

/* =========================================================================
   EXPERIENCE LAYER  (cinematic motion, gated by .anim so reduced-motion and
   no-JS users get the calm static site; .anim is only added when motion is OK)
   ========================================================================= */

/* ---- Intro reveal (homepage) ---- */
.intro{position:fixed;inset:0;z-index:300;background:var(--green-night);display:grid;place-items:center;pointer-events:none}
.intro__mark{display:flex;flex-direction:column;align-items:center;line-height:1;color:#fff;text-align:center}
.intro__mark img{width:clamp(230px,44vw,460px);height:auto;display:block}
.intro__mark b{font-family:var(--display);font-weight:700;letter-spacing:.18em;font-size:clamp(2.6rem,8vw,5rem)}
.intro__mark span{font-family:var(--display);text-transform:uppercase;letter-spacing:.42em;font-size:clamp(.7rem,1.6vw,1rem);margin-top:.5rem;opacity:.85}
html:not(.anim) .intro, html.introdone .intro{display:none}
.anim .intro{animation:introOut 1.7s var(--ease-weight) forwards}
.anim .intro__mark{animation:introMark 1.7s var(--ease-weight) forwards}
@keyframes introMark{
  0%{opacity:0;transform:translateY(14px) scale(.98);letter-spacing:.5em}
  26%{opacity:1;transform:none}
  62%{opacity:1}
  100%{opacity:0;transform:translateY(-10px)}
}
@keyframes introOut{
  0%,58%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 0 100% 0);pointer-events:none;visibility:hidden}
}

/* ---- Page entrance + exit transitions ---- */
.anim main{animation:pageIn .5s var(--ease-weight) both}
@keyframes pageIn{from{opacity:.35}to{opacity:1}}
body.is-leaving{opacity:0;transition:opacity .32s var(--ease-weight)}

/* ---- Living hero: slow ambient drift + staged headline reveal ---- */
.anim .hero__img{animation:heroDrift 28s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.05)}to{transform:scale(1.13)}}
.anim .hero__content>*{opacity:0;animation:heroRise 1s var(--ease-weight) forwards}
.anim .hero__content>*:nth-child(1){animation-delay:.95s}
.anim .hero__content>*:nth-child(2){animation-delay:1.12s}
.anim .hero__content>*:nth-child(3){animation-delay:1.34s}
.anim .hero__content>*:nth-child(4){animation-delay:1.54s}
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.anim .hero h1{overflow:hidden}

/* ---- Engine: a continuous "current" flowing through the system ---- */
.engine__flow{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 16;opacity:.65;filter:drop-shadow(0 0 6px rgba(0,169,111,.6))}
.anim .engine__flow{animation:current 1.6s linear infinite}
@keyframes current{to{stroke-dashoffset:-36}}
.metric__num{position:relative}

/* ---- Interactive masterplan: zoom-to-pin + imagery in the detail card ---- */
.plan__bg{transition:transform 1.1s var(--ease-weight)}
.plan__stage.is-zoomed .plan__bg{transform:scale(1.32)}
.plan__detailimg{width:100%;height:120px;object-fit:cover;border-radius:10px;margin:-.2rem 0 .8rem;display:none}
.plan__detail.has-img .plan__detailimg{display:block}
.hotspot{cursor:pointer}
.hotspot[aria-expanded="true"]{background:var(--green);box-shadow:0 0 0 3px rgba(255,255,255,.85) inset,0 0 0 8px rgba(0,169,111,.35)}

/* Arc section call-to-action (replaces the collections breakdown) */
.arc__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.9rem}

/* =========================================================================
   EXPERIENCE REFINEMENTS
   ========================================================================= */
/* Slim scroll-progress bar (informational, kept for everyone) */
.scrollprog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;background:linear-gradient(90deg,var(--green),var(--blue));z-index:120;pointer-events:none}

/* Tactile hover refinements (pointer devices only, so touch has no stuck states) */
.panel__media{overflow:hidden}
.panel__media img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){
  .panel__media img,.arc__media img,.unit__gallery figure img{transition:transform 1.1s var(--ease-weight)}
  .panel:hover .panel__media img,.arc__media:hover img{transform:scale(1.06)}
  .arc__media{overflow:hidden}
  .unit__gallery figure{overflow:hidden}
  .unit__gallery figure:hover img{transform:scale(1.05)}
  .brandcard,.ccard,.invest__card,.collcard,.unit{transition:transform .45s var(--ease-weight),box-shadow .45s var(--ease-weight)}
  .brandcard:hover,.ccard:hover,.invest__card:hover,.collcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(35,31,32,.09)}
  .panel__link{transition:gap .3s var(--ease-weight)}
  .panel__link:hover{gap:.95rem}
  .btn{transition:transform .3s var(--ease-weight),background .3s,box-shadow .3s}
  .btn:hover{box-shadow:0 10px 26px rgba(0,169,111,.28)}
}

/* =========================================================================
   MASTERPLAN (full-community watercolour from the brochure, brand-adapted)
   ========================================================================= */
.mp{background:var(--green-night);color:#fff}
.mp .eyebrow{color:var(--lime)}
.mp-header{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;padding-bottom:30px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.mp-h-left h2{color:#fff;margin:.4rem 0 0}
.mp-h-left h2 em{font-style:italic;color:var(--lime)}
.mp-h-right{max-width:460px;color:rgba(255,255,255,.62);line-height:1.7;margin:0}

.mp-scroll{position:relative}
.mp-stage{position:relative;width:100%;aspect-ratio:2400/1696;overflow:visible}
.mp-img{width:100%;height:100%;display:block;object-fit:contain;border-radius:10px}
.mp-mask{position:absolute;inset:0;background:rgba(5,28,21,.72);opacity:0;pointer-events:none;border-radius:10px;transition:opacity .45s var(--ease-weight)}
.mp-stage.zone-active .mp-mask{opacity:1;-webkit-mask-image:radial-gradient(ellipse var(--rx,8%) var(--ry,8%) at var(--cx,50%) var(--cy,50%),transparent 40%,#000 96%);mask-image:radial-gradient(ellipse var(--rx,8%) var(--ry,8%) at var(--cx,50%) var(--cy,50%),transparent 40%,#000 96%)}
.mp-stage.zone-spine{overflow:hidden}
.mp-stage.zone-spine .mp-mask{-webkit-mask-image:radial-gradient(ellipse 18% 2% at 45.9% 47.6%,transparent 45%,#000 96%);mask-image:radial-gradient(ellipse 18% 2% at 45.9% 47.6%,transparent 45%,#000 96%);transform:rotate(12deg) scale(1.6);transform-origin:45.9% 47.6%}
.mp-overlay{position:absolute;inset:0;pointer-events:none}

/* markers */
.mp-spot{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;z-index:2}
.mp-spot .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,169,111,.2),0 0 18px rgba(0,169,111,.5);transition:width .35s var(--ease-weight),height .35s var(--ease-weight),box-shadow .35s ease}
.mp-spot .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,169,111,.5);transition:width .4s ease,height .4s ease,border-color .3s ease}
.mp-spot .ring2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(0,169,111,.18)}
.anim .mp-spot .ring{animation:mppulse 5s ease-in-out infinite}
.anim .mp-spot .ring2{animation:mppulse 5s 1.5s ease-in-out infinite}
@keyframes mppulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.55}50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
.mp-spot:hover .core,.mp-spot:focus-visible .core,.mp-spot.active .core{width:16px;height:16px;box-shadow:0 0 0 6px rgba(0,169,111,.22),0 0 28px rgba(0,169,111,.65)}
.mp-spot:hover .ring,.mp-spot:focus-visible .ring,.mp-spot.active .ring{width:50px;height:50px;border-color:rgba(0,169,111,.85)}
.mp-spot:focus-visible{outline:none}
.mp-spot:focus-visible .core{outline:2px solid #fff;outline-offset:4px}

/* primary (The Arc) = orange accent */
.mp-spot.primary .core{width:14px;height:14px;background:var(--orange);box-shadow:0 0 0 6px rgba(227,120,38,.22),0 0 32px rgba(227,120,38,.7)}
.mp-spot.primary .ring{width:50px;height:50px;border-color:rgba(227,120,38,.7)}
.mp-spot.primary .ring2{width:84px;height:84px;border-color:rgba(227,120,38,.22)}
.mp-stage:not(.zone-active) .mp-spot.primary .core{box-shadow:0 0 0 6px rgba(227,120,38,.2),0 0 38px rgba(227,120,38,.6)}

/* label */
.mp-spot .label{position:absolute;top:50%;left:30px;transform:translateY(-50%);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s ease,transform .4s var(--ease-weight);background:rgba(5,26,20,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-left:2px solid var(--green);padding:9px 15px;border-radius:5px;z-index:3}
.mp-spot .label::before{content:"";position:absolute;left:-30px;top:50%;width:30px;height:1px;background:linear-gradient(to right,transparent,rgba(0,169,111,.6))}
.mp-spot .label .l-eyebrow{display:block;font-family:var(--body);font-size:8px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--lime);margin-bottom:4px}
.mp-spot .label .l-title{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:.01em;color:#fff;line-height:1.12}
.mp-spot .label .l-title em{font-style:normal;color:var(--lime)}
.mp-spot .label .l-meta{display:block;margin-top:4px;font-family:var(--body);font-size:.72rem;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.mp-spot:hover .label,.mp-spot:focus-visible .label,.mp-spot.active .label{opacity:1;transform:translate(4px,-50%)}
.mp-spot.primary .label{border-left-color:var(--orange)}
.mp-spot.primary .label .l-eyebrow,.mp-spot.primary .label .l-title em{color:var(--orange-light)}
.mp-spot.primary .label .l-title{font-size:1.12rem}
.mp-spot.flip .label{left:auto;right:30px;border-left:none;border-right:2px solid var(--green)}
.mp-spot.flip.primary .label{border-right-color:var(--orange)}
.mp-spot.flip .label::before{left:auto;right:-30px;background:linear-gradient(to left,transparent,rgba(0,169,111,.6))}
.mp-spot.flip:hover .label,.mp-spot.flip:focus-visible .label,.mp-spot.flip.active .label{transform:translate(-4px,-50%)}

.mp-hint{margin-top:1.4rem;font-size:.82rem;color:rgba(255,255,255,.5);text-align:center}
.mp-hint__drag{display:none}

/* mobile: pan a larger plan so all 17 zones stay legible */
@media (max-width:760px){
  .mp-header{flex-direction:column;align-items:flex-start;gap:14px}
  .mp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
  .mp-stage{width:760px}
  .mp-hint__drag{display:inline}
}

/* ============================================================
   Interactive master plan: watercolour + spotlight (homepage #plan)
   Ported from the brochure mechanic, re-themed to the TSC palette.
   Uses an mp-* namespace so the legacy .plan__* rules don't apply.
   ============================================================ */
.mp-stage{position:relative;width:100%;margin-top:2.4rem;border-radius:16px;overflow:hidden;
  aspect-ratio:2000/1413;background:var(--sand);
  box-shadow:0 18px 50px rgba(6,42,32,.10);border:1px solid var(--line)}
.mp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.03) contrast(1.02)}
.mp-overlay{position:absolute;inset:0;pointer-events:none;z-index:3}
.mp-scrim{position:absolute;inset:0;z-index:2;background:rgba(6,42,32,.46);opacity:0;
  pointer-events:none;transition:opacity .5s var(--ease-weight)}
.mp-stage.zone-active .mp-scrim{opacity:1;
  -webkit-mask-image:radial-gradient(ellipse var(--rx,8%) var(--ry,8%) at var(--cx,50%) var(--cy,50%),transparent 38%,#000 94%);
          mask-image:radial-gradient(ellipse var(--rx,8%) var(--ry,8%) at var(--cx,50%) var(--cy,50%),transparent 38%,#000 94%)}
.mp-stage.zone-spine .mp-scrim{
  -webkit-mask-image:radial-gradient(ellipse 18% 2% at 45.9% 47.6%,transparent 45%,#000 95%);
          mask-image:radial-gradient(ellipse 18% 2% at 45.9% 47.6%,transparent 45%,#000 95%)}

.mp-hotspot{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;
  pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;z-index:4}
.mp-hotspot .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(0,169,111,.20),0 0 16px rgba(0,169,111,.55);
  transition:width .35s var(--ease-weight),height .35s var(--ease-weight),box-shadow .35s ease}
.mp-hotspot .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(0,169,111,.55);
  animation:mpPulse 5s ease-in-out infinite}
.mp-hotspot .ring2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(0,169,111,.22);
  animation:mpPulse 5s 1.5s ease-in-out infinite}
@keyframes mpPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}
  50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
.mp-hotspot:hover .core,.mp-hotspot:focus-visible .core,.mp-hotspot.active .core{
  width:15px;height:15px;box-shadow:0 0 0 6px rgba(0,169,111,.24),0 0 26px rgba(0,169,111,.65)}
.mp-hotspot:hover .ring,.mp-hotspot:focus-visible .ring,.mp-hotspot.active .ring{
  width:50px;height:50px;border-color:rgba(0,169,111,.85)}
.mp-hotspot.primary .core{width:13px;height:13px;
  box-shadow:0 0 0 6px rgba(0,169,111,.24),0 0 30px rgba(0,169,111,.70)}
.mp-hotspot.primary .ring{width:52px;height:52px;border-color:rgba(0,169,111,.70)}
.mp-hotspot.primary .ring2{width:90px;height:90px;border-color:rgba(0,169,111,.22)}
.mp-hotspot:focus-visible{outline:none}
.mp-hotspot:focus-visible .core{box-shadow:0 0 0 3px var(--offwhite),0 0 0 6px var(--green)}

.mp-hotspot .label{position:absolute;top:50%;left:34px;transform:translateY(-50%);
  white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .3s ease,transform .4s var(--ease-weight);
  background:rgba(6,42,32,.90);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);border-left:2px solid var(--green);
  padding:9px 15px;border-radius:4px;box-shadow:0 10px 30px rgba(6,42,32,.28)}
.mp-hotspot .label::before{content:"";position:absolute;left:-30px;top:50%;width:30px;height:1px;
  background:linear-gradient(to right,transparent,rgba(0,169,111,.70))}
.mp-hotspot .l-eyebrow{display:block;font-family:var(--body);font-size:.56rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--blue-light);margin-bottom:4px}
.mp-hotspot .l-title{display:block;font-family:var(--display);font-weight:700;font-size:1.08rem;
  letter-spacing:.01em;color:var(--offwhite);line-height:1.08}
.mp-hotspot .l-title em{font-style:italic;color:var(--green-soft)}
.mp-hotspot .l-meta{display:block;margin-top:4px;font-family:var(--body);font-size:.62rem;
  font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.mp-hotspot:hover .label,.mp-hotspot:focus-visible .label,.mp-hotspot.active .label{
  opacity:1;transform:translate(4px,-50%)}
.mp-hotspot.primary .l-title{font-size:1.2rem}
.mp-hotspot.flip .label{left:auto;right:34px;border-left:none;border-right:2px solid var(--green)}
.mp-hotspot.flip .label::before{left:auto;right:-30px;
  background:linear-gradient(to left,transparent,rgba(0,169,111,.70))}
@media(prefers-reduced-motion:reduce){.mp-hotspot .ring,.mp-hotspot .ring2{animation:none}}
@media(max-width:640px){
  .mp-hotspot{width:44px;height:44px}
  .mp-hotspot .label{white-space:normal;max-width:44vw;padding:8px 11px}
  .mp-hotspot .l-title{font-size:.92rem}
  .mp-hotspot .l-meta{font-size:.6rem;max-width:none}
}

/* Garden Villa gallery has two true interior renders (living + plan):
   show them as a balanced pair instead of leaving an empty third cell. */
.unit__gallery--pair{grid-template-columns:repeat(2,1fr)}
.unit__gallery--pair figure:last-child{grid-column:auto;aspect-ratio:4/3}

/* Brand logo (official TSC Yiti mark), swaps with the header's light/solid state */
.wordmark{flex-direction:row;align-items:center}
.wordmark__logo{height:40px;width:auto;display:block}
.wordmark__logo--dark{display:none}
.site-header.is-solid .wordmark__logo--light{display:none}
.site-header.is-solid .wordmark__logo--dark{display:block}
@media(max-width:480px){.wordmark__logo{height:34px}}

/* ============ Motion layer (html.anim = GSAP active) ============ */
/* Hand .display reveals over to the word-rise animation */
html.anim .display.reveal{opacity:1;transform:none;filter:none;transition:none}
.wline{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.wline>span{display:inline-block;transform:translateY(112%)}
html.anim .hero__img,html.anim .page-hero__img{will-change:transform}
html.anim .split__media,html.anim .panel__media{overflow:hidden}
html.anim .split__media img,html.anim .panel__media img{will-change:transform}
html.anim .marquee__row{will-change:transform}
html.anim .mp-stage{will-change:transform,opacity}
.btn--primary,.fab{will-change:transform}

/* Awards rail */
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.2rem}
.award{background:var(--offwhite);padding:1.6rem 1.4rem}
.award b{font-family:var(--display);font-weight:700;font-size:1.25rem;display:block}
.award span{color:var(--ink-faint);font-size:.85rem}

/* Masterplan on phones: swipeable stage so pins keep breathing room */
.mp-scroll{overflow:visible}
@media(max-width:640px){
  .mp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(50% - 50vw);padding:0 5vw;scrollbar-width:none}
  .mp-scroll::-webkit-scrollbar{display:none}
  .mp-scroll .mp-stage{width:720px;min-width:720px}
  .mp-hotspot .l-eyebrow{font-size:.6rem}
  .mp-hotspot .l-meta{font-size:.66rem}
  .plan__swipe{display:block}
}
.plan__swipe{display:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--ink-faint);margin:.8rem 0 0;text-align:center}

/* Order fix: swipe hint visible on phones; nudge plan label sizes */
@media(max-width:640px){
  .plan__swipe{display:block}
  .mp-hotspot .l-eyebrow{font-size:.66rem}
  .mp-hotspot .l-meta{font-size:.72rem}
}

/* Construction update video */
.update__frame{margin:0}
.update__frame video{width:100%;height:auto;display:block;border-radius:14px;background:var(--green-night)}
.update__frame figcaption{margin-top:.8rem;font-size:.82rem;color:var(--ink-faint)}

/* Partner logos */
.partner__logo{max-height:34px;width:auto;max-width:170px;object-fit:contain;display:block}
.partner__logo--tall{max-height:58px}

/* The Arc: elevation gallery moment */
.arc__head{text-align:center}
.arc__foot{text-align:center}
.arcpan{overflow:hidden;margin-top:3.2rem;position:relative}
.arcpan__img{height:clamp(230px,42vh,470px);width:auto;max-width:none;display:block;will-change:transform}
html:not(.anim) .arcpan__img{width:100%;height:auto}
.arcpan__caption{margin-top:1.2rem;font-size:.82rem;color:var(--ink-faint)}
.arc__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
@media(max-width:640px){.arcpan__img{height:clamp(190px,30vh,300px)}}

/* Two-partner strip: a little more presence */
.partner{padding:2.2rem 1rem}
.partner__logo--tall{max-height:66px}

/* Linked partner cells */
a.partner{text-decoration:none;transition:background .3s var(--ease-weight)}
a.partner:hover{background:#fff}

/* ===== Grid integrity: no exposed background slabs, ever ===== */
/* Amenity/logo strips: fixed divisors of 4 and 8 so rows always complete */
.cities{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cities{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cities{grid-template-columns:1fr}}

/* ===== The value trio: what makes Yiti different ===== */
.value{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.4rem);margin-top:2.6rem}
.value__card{background:#fff;border-top:3px solid var(--green);padding:1.8rem 1.5rem 1.6rem;border-radius:0 0 12px 12px;box-shadow:0 1px 0 var(--line),0 10px 30px rgba(6,42,32,.05);transition:transform .35s var(--ease-weight),box-shadow .35s}
.value__card:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 18px 44px rgba(6,42,32,.09)}
.value__card b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);line-height:1;color:var(--green-dark)}
.value__card span{display:block;margin-top:.7rem;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
@media(max-width:820px){.value{grid-template-columns:1fr}}

/* ===== Alive layer ===== */
/* 1. Engine charges up under the pointer */
.engine.is-charged .engine__flow{animation-duration:.55s;opacity:1;stroke-width:3}
.engine .metric{transition:transform .35s var(--ease-weight)}
.engine .metric:hover{transform:translateY(-3px)}

/* 4. Tilt + light sweep cards */
.tiltable{transform-style:preserve-3d;position:relative;overflow:hidden}
.tiltable::after{content:"";position:absolute;inset:-40%;background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.tiltable:hover::after{opacity:1}

/* Native cursor where it matters */

/* Count-aware grids: columns always divide the item count, no gaps anywhere */
.cities:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.recap:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.recap:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){
  .recap{grid-template-columns:repeat(2,1fr)}
  .recap:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .cities:has(>:nth-child(3):last-child){grid-template-columns:1fr}
}
@media(max-width:640px){
  .recap:has(>:nth-child(3):last-child){grid-template-columns:1fr}
}

/* ===== Contact page: light-scheme form and channels (the dark-band form styles are for the green CTA only) ===== */
#enquire .form label{color:var(--ink-soft)}
#enquire .form input,#enquire .form select,#enquire .form textarea{
  color:var(--black);background:#fff;border:1px solid var(--line)}
#enquire .form input::placeholder,#enquire .form textarea::placeholder{color:var(--ink-faint)}
#enquire .form input:focus,#enquire .form select:focus,#enquire .form textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(0,169,111,.14)}
#enquire .form select{background-color:#fff}
#enquire .form__status{color:var(--ink-soft)}
#enquire .form .form__consent, #enquire .form small{color:var(--ink-faint)}
#enquire .footer__social a{color:var(--ink-soft)}
#enquire .footer__social a:hover{color:var(--green-dark)}

/* Floating WhatsApp */
.fab-wa{position:fixed;right:clamp(.9rem,2vw,1.6rem);bottom:calc(clamp(.9rem,2vw,1.6rem) + 64px);z-index:900;width:52px;height:52px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(6,42,32,.28);transition:transform .3s var(--ease-weight)}
.fab-wa:hover{transform:translateY(-3px) scale(1.04)}
@media(max-width:640px){.fab-wa{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}}

/* Header logo: more presence (exec request) */
.wordmark__logo{height:44px}
@media(max-width:640px){.wordmark__logo{height:36px}}

/* Hero primary CTA: more visible */
.hero .btn:not(.btn--ghost){font-size:.92rem;padding:.95rem 1.7rem;box-shadow:0 12px 30px rgba(0,115,67,.35)}

/* Masterplan labels: sit above the dot (exec request); .flip now means below (top edge) */
.mp-hotspot .label{top:auto;bottom:calc(100% + 16px);left:50%;right:auto;transform:translateX(-50%);border-left:none;border-bottom:2px solid var(--green)}
.mp-hotspot .label::before{content:"";position:absolute;left:50%;right:auto;top:auto;bottom:-16px;width:2px;height:16px;background:linear-gradient(to bottom,var(--green),transparent);transform:translateX(-50%)}
.mp-hotspot.flip .label{bottom:auto;top:calc(100% + 16px);border-bottom:none;border-top:2px solid var(--green)}
.mp-hotspot.flip .label::before{bottom:auto;top:-16px;background:linear-gradient(to top,var(--green),transparent)}
.mp-hotspot.active .label,.mp-hotspot:hover .label{opacity:1}

/* FAQ */
.faq{display:grid;gap:.7rem}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0}
.faq__item summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:1.05rem;padding:1.1rem 1.3rem;position:relative}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);color:var(--green-dark);font-size:1.3rem;font-family:var(--body)}
.faq__item[open] summary::after{content:"\2212"}
.faq__item p{padding:0 1.3rem 1.2rem;color:var(--ink-soft);line-height:1.65;max-width:64ch}