/* Self-hosted fonts (latin) — replaces Google Fonts chain for LCP */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/Inter-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Inter-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Inter-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Inter-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/Inter-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Lora-400i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Lora-500i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Lora-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Lora-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Lora-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Lora-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Marcellus-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ACE Parkway 2.0 — "The Address"  (ace-parkway.com)
   Art direction: dark-and-gold hospitality luxury (Saksham)
   Near-black obsidian · gold #B08D3D · gilt #E6C57E · candlelit cream
   Display Marcellus (elegant high-contrast titling serif) · Body Lora · Utility Inter
   ============================================================ */

/* ---------- Fallback metrics (CLS control on font swap) ---------- */
@font-face{
  font-family:"Marcellus Fallback";
  src:local("Georgia"),local("Times New Roman");
  size-adjust:98%; ascent-override:88%; descent-override:22%; line-gap-override:0%;
}
@font-face{
  font-family:"Lora Fallback";
  src:local("Georgia"),local("Times New Roman");
  size-adjust:104%; ascent-override:92%; descent-override:26%; line-gap-override:0%;
}
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  size-adjust:107%; ascent-override:90%; descent-override:22%; line-gap-override:0%;
}

:root{
  /* ---------- Palette — "dark-and-gold hospitality luxury" (Saksham) ----------
     A near-black warm ground lit by gold and gilt. The reskin is committed
     through the token system, so the whole page turns with these values.
     Legacy variable NAMES are kept (they thread through ~900 lines below);
     only their ASSIGNED colours change.
       --evergreen*  → near-black warm grounds (obsidian)
       --brass       → GOLD  #B08D3D  (the signature accent)
       --brass-soft  → GILT  #E6C57E  (lighter accent: text/icons on dark)
       --brass-deep  → GOLD-INK #7A5F26 (contrast-safe accent on cream)
       --paper*      → warm candlelit cream (the light interludes)
       --sage        → warm muted text on the dark ground (AA-checked)
  --------------------------------------------------------------- */
  --evergreen:   #0E0D0B;   /* obsidian — primary near-black ground (warm) */
  --evergreen-2: #080706;   /* deeper recess: topbar, footer, folio */
  --evergreen-3: #1A1712;   /* lifted panel drawn on the dark ground */
  --paper:       #F5F1E6;   /* warm cream — light-section ground */
  --paper-2:     #EBE3D0;   /* deeper cream well, recessed cards */
  --ivory:       #F4EFE2;   /* text on dark — warm ivory */
  --ink:         #1C1A15;   /* near-black ink — text on cream */
  --ink-soft:    #4A4636;   /* muted, AA-checked on cream */
  --sage:        #B9AE93;   /* warm muted text on the dark ground, AA-checked */
  --brass:       #B08D3D;   /* GOLD — the signature accent */
  --brass-soft:  #E6C57E;   /* GILT — lighter, text/icons on the dark ground */
  --brass-deep:  #7A5F26;   /* GOLD-INK — text/icons on cream (contrast-safe) */
  --line-dk:     rgba(230,197,126,.14);
  --line-lt:     rgba(28,26,21,.16);
  --line-brass:  rgba(176,141,61,.5);

  /* ---------- Type: Marcellus (display) · Lora (body) · Inter (utility) ---------- */
  --display: "Marcellus","Marcellus Fallback",Georgia,"Times New Roman",serif;
  --serif:   "Lora","Lora Fallback",Georgia,"Times New Roman",serif;
  --sans:    "Inter","Inter Fallback",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:    ui-monospace,"SF Mono","Space Mono",Menlo,Consolas,monospace; /* survey-strip figures only */

  /* ---------- Type scale ---------- */
  --step--1: clamp(.76rem, .73rem + .15vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.06rem);
  --step-1:  clamp(1.2rem, 1.08rem + .55vw, 1.5rem);
  --step-2:  clamp(1.32rem, 1.12rem + 1vw, 1.9rem);
  --step-3:  clamp(2.05rem, 1.5rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.2rem, 1.65rem + 2.4vw, 3.5rem);
  --step-5:  clamp(2.3rem, 1.35rem + 2.6vw + 1.6vh, 4.6rem);

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---------- Fine-grain material texture (evergreen ground) ---------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background-color:var(--evergreen);
  background-image:var(--grain);
  color:var(--ivory);
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--brass); color:var(--evergreen-2); font-family:var(--sans); font-weight:700;
  padding:10px 16px; border-radius:var(--r);
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Focus visibility (context-aware for AA) ---------- */
:focus-visible{ outline:2px solid var(--brass-soft); outline-offset:3px; border-radius:2px; }
.section--paper :focus-visible,
.lead-form :focus-visible,
.lead-card :focus-visible,
.modal__card :focus-visible,
.about-wrap :focus-visible,
.about-contact :focus-visible{ outline-color:var(--ink); }

/* ---------- Typography helpers ---------- */
/* Signature — the engraved brass nameplate: small-caps label framed by a
   thin double keyline, brass on evergreen (brass-deep on paper). */
.eyebrow{
  position:relative; display:inline-block;
  font-family:var(--sans); font-weight:600; font-size:var(--step--1);
  letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft);
  margin:0 0 1.35rem; padding:.6rem 0 .8rem;
}
.eyebrow::before,.eyebrow::after{ content:""; position:absolute; left:0; width:100%; height:1px; background:currentColor; }
.eyebrow::before{ top:0; box-shadow:0 -4px 0 0 currentColor; }
.eyebrow::after{ bottom:0; box-shadow:0 4px 0 0 currentColor; }
.eyebrow--dark{ color:var(--brass-deep); }
/* Secondary polish — a single specular sheen sweeps the double keyline
   on hover, as if light caught the engraved brass edge. Background-
   position only, so nothing reflows; hover-capable desktops only, and
   only when motion is not reduced. Resting appearance is untouched. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .eyebrow::before,.eyebrow::after{
    background-image:linear-gradient(90deg, transparent 0%, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%, transparent 100%);
    background-repeat:no-repeat; background-size:250% 100%; background-position:150% 0;
    transition:background-position .6s var(--ease);
  }
  .eyebrow:hover::before,.eyebrow:hover::after{ background-position:-50% 0; }
}
.h2{
  font-family:var(--serif); font-weight:600; line-height:1.05;
  font-size:var(--step-3); letter-spacing:.002em; margin:0 0 1.1rem;
}
.lede{ font-size:var(--step-2); color:var(--sage); max-width:56ch; margin:0; }
.ink{ color:var(--ink); }
.lede.ink{ color:var(--ink-soft); }
.ink-soft{ color:var(--ink-soft); }
.fineprint{ font-family:var(--sans); font-size:.8rem; line-height:1.65; color:var(--sage); margin:1.4rem 0 0; max-width:60ch; }
.section--paper .fineprint{ color:var(--ink-soft); }

.rule{ width:64px; height:1px; background:var(--brass); margin:1.7rem 0; position:relative; }
.rule::after{ content:""; position:absolute; left:0; top:4px; width:28px; height:1px; background:var(--brass); opacity:.6; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--brass); --fg:var(--evergreen-2);
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.03em;
  padding:.85rem 1.5rem; border-radius:var(--r); border:1px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.12);
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--brass:hover{ background:var(--brass-soft); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ivory); border-color:var(--line-dk); box-shadow:none; }
.btn--ghost:hover{ border-color:var(--brass); color:var(--brass-soft); transform:translateY(-2px); }
.btn--lg{ padding:1rem 1.8rem; font-size:.98rem; }
.btn--block{ width:100%; padding:1.05rem; font-size:1rem; }
/* post-submit WhatsApp handoff CTA (hidden until a lead form succeeds) */
.btn--wa-continue{ display:none; margin-top:.7rem; background:#1faa53; color:#fff; }
.btn--wa-continue:hover{ background:#189146; transform:translateY(-2px); }
/* in-place confirmation box — inserted after .js-status once a lead form succeeds;
   houses the check icon, the reassurance line, the RERA agent disclosure, and the
   WhatsApp fallback button (backend-failure-safe: the button still reaches Vidit
   even if the Sheet write silently failed). */
.lead-thanks{ margin-top:.9rem; padding:1rem 1.05rem; border:1px solid rgba(31,107,70,.28); border-radius:8px; background:rgba(31,107,70,.07); }
.lead-thanks__check{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#1f6b46; margin:0 0 .55rem; }
.lead-thanks__check svg{ width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lead-thanks__msg{ font-family:var(--sans); font-weight:700; font-size:.92rem; color:var(--ink); margin:0 0 .35rem; }
.lead-thanks__rera{ font-family:var(--sans); font-size:.72rem; color:var(--ink-soft); margin:0 0 .8rem; }
.lead-thanks .btn--wa-continue{ margin-top:0; }

.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans); color:var(--brass-soft); font-weight:600; font-size:.9rem; letter-spacing:.01em; }
.link-arrow span{ transition:transform .25s var(--ease); }
.link-arrow:hover span{ transform:translateX(5px); }

/* ---------- Topbar ---------- */
.topbar{ background:var(--evergreen-2); font-family:var(--sans); font-size:.78rem; color:var(--sage); border-bottom:1px solid var(--line-dk); }
.topbar__in{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.55rem; }
.topbar__tag{ display:inline-flex; align-items:center; gap:.5rem; letter-spacing:.04em; }
.topbar .dot{ width:7px; height:7px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 0 rgba(176,141,61,.6); animation:pulse 2.4s infinite; }
.topbar__call{ color:var(--ivory); font-weight:600; letter-spacing:.02em; }
.topbar__call:hover{ color:var(--brass-soft); }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(176,141,61,.5);} 70%{box-shadow:0 0 0 8px rgba(176,141,61,0);} 100%{box-shadow:0 0 0 0 rgba(176,141,61,0);} }

/* ---------- Header ---------- */
.site-head{ position:sticky; top:0; z-index:100; transition:box-shadow .35s var(--ease), border-color .35s; border-bottom:1px solid transparent; }
.site-head::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(14,13,11,0); transition:background .35s var(--ease); }
.site-head.is-stuck{ border-bottom-color:var(--line-brass); }
.site-head.is-stuck::before{ background:rgba(10,9,7,.94); backdrop-filter:blur(10px); }
/* backdrop-filter lives on this ::before, not on .site-head itself: filter/backdrop-filter
   on an element makes it the containing block for position:fixed descendants, which was
   pulling the fixed mobile .nav drawer's translateX(100%) off-canvas position out of the
   true viewport and past the right edge of the page (390px -> 710px, confirmed by measurement). */
.site-head__in{ display:flex; align-items:center; justify-content:space-between; padding-block:1rem; }
.brand{ display:flex; flex-direction:row; align-items:center; gap:.6rem; }
.brand__logo{ height:30px; width:auto; display:block; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; }
.foot-logo{ height:38px; width:auto; display:block; margin-bottom:1.1rem; }
.brand__name{ font-family:var(--display); font-weight:400; font-size:1.5rem; letter-spacing:.015em; color:var(--ivory); }
.brand__two{ color:var(--brass-soft); }
.brand__by{ font-family:var(--sans); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sage); }
.nav{ display:flex; align-items:center; gap:2rem; font-family:var(--sans); }
.nav a{ font-size:.88rem; font-weight:500; color:var(--ivory); letter-spacing:.015em; transition:color .2s; position:relative; }
.nav a:not(.nav__cta)::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--brass-soft); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav a:not(.nav__cta):hover{ color:var(--brass-soft); }
.nav a:not(.nav__cta):hover::after{ transform:scaleX(1); }
.nav__cta{ padding:.6rem 1.15rem; }
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.hamburger span{ width:26px; height:2px; background:var(--ivory); transition:.3s var(--ease); }

/* ---------- Hero — the address, stated plainly ---------- */
.hero{ position:relative; min-height:clamp(480px, calc(100svh - 128px), 820px); display:flex; align-items:center; background:var(--evergreen); overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
}
.hero__topo{
  position:absolute; inset:0; z-index:0; opacity:.9;
  background-image: radial-gradient(120% 90% at 78% 8%, rgba(176,141,61,.14), transparent 60%);
  animation:topoDrift 40s ease-in-out infinite alternate;
}
/* ambient only — opacity never changes, transform only, begins after
   the hero's own paint (a pure compositor animation costs nothing at
   first paint since .hero__bg is the LCP element, not this layer) */
@keyframes topoDrift{ from{ transform:translateX(0); } to{ transform:translateX(12px); } }
/* LIVING HERO — daypart wash. Sits at the same z-index tier as .hero__bg/
   .hero__topo (z:0), strictly BELOW .hero__field (z:1, the opaque scrim that
   already carries 100% of the text-contrast job) — so this layer can only
   ever tint the visible sliver of photograph the scrim doesn't fully cover.
   Worst case under the copy column, .hero__field's own two stacked washes
   already combine to ~95% opacity there, so this wash's max contribution to
   the backdrop behind text is ~(1-.95)×.18 ≈ 1%: AA is set by .hero__field
   alone and is untouched by daypart. Default (no JS / no data-daypart) =
   transparent = identical to the current live look ("day"). */
.hero__daypart{ position:absolute; inset:0; z-index:0; pointer-events:none; }
html[data-daypart="dawn"] .hero__daypart{ background:radial-gradient(120% 90% at 20% 4%, rgba(255,196,140,.16), transparent 62%); }
html[data-daypart="dusk"] .hero__daypart{ background:radial-gradient(120% 90% at 84% 96%, rgba(255,138,74,.16), transparent 60%); }
html[data-daypart="night"] .hero__daypart{ background:linear-gradient(160deg, rgba(8,16,34,.24) 0%, transparent 60%); }
.hero__field{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(8,7,5,.94) 0%, rgba(8,7,5,.84) 46%, rgba(8,7,5,.55) 66%, rgba(8,7,5,.78) 100%),
    linear-gradient(180deg, rgba(8,7,5,.5) 0%, rgba(8,7,5,.2) 26%, rgba(8,7,5,.55) 80%, rgba(8,7,5,.85) 100%);
}
.hero__marker{ position:absolute; top:9%; bottom:13%; right:clamp(16px,3.4vw,54px); width:1px; z-index:2; }
.hero__marker::before{ content:""; position:absolute; inset:0; background:linear-gradient(var(--brass), var(--brass) 92%, transparent); opacity:.6; }
.hero__marker-text{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl; background:var(--evergreen); padding:1rem .2rem;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.36em; font-weight:600; color:var(--brass-soft);
}
.hero__in{ position:relative; z-index:3; padding-block:clamp(28px,4.4vh,56px) clamp(24px,4vh,48px); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3.4rem); align-items:center; }
.hero__copy{ min-width:0; }
/* ---- fold fact chips ---- */
.hero__chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0; padding:0; list-style:none; }
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  padding:.5rem .8rem; border-radius:999px; line-height:1.1;
  background:rgba(246,243,234,.08); border:1px solid var(--line-dk); color:var(--ivory);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
a.chip:hover{ border-color:var(--brass); background:rgba(246,243,234,.14); }
.chip strong{ color:var(--brass-soft); font-weight:700; }
.chip--rera{ border-color:var(--line-brass); }
.hero__trust{ display:flex; align-items:center; gap:.5rem; margin:.9rem 0 0; font-family:var(--sans); font-size:.82rem; color:var(--sage); }
.hero__trust strong{ color:var(--ivory); font-weight:600; }
/* hero lead card + floor-plan modal */
.lead-card{ background:var(--paper); color:var(--ink); border-radius:9px; padding:1.5rem 1.4rem; box-shadow:0 26px 64px rgba(0,0,0,.4); font-family:var(--sans); }
.lead-card__h{ font-family:var(--serif); font-weight:600; font-size:1.55rem; line-height:1.1; color:var(--ink); margin:0 0 .25rem; }
.lead-card__s{ font-size:.82rem; color:var(--ink-soft); margin:0 0 1rem; letter-spacing:.02em; }
.lead-card input{ width:100%; font-family:var(--sans); font-size:1rem; padding:.82rem 1rem; border:1px solid var(--line-lt); border-radius:5px; margin-bottom:.7rem; background:#fff; color:var(--ink); }
.lead-card input::placeholder{ color:#8b9285; }
.lead-card input:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(176,141,61,.2); }
.lead-card .btn{ margin-top:.15rem; }
.lead-card__status{ font-size:.82rem; font-weight:600; margin:.6rem 0 0; min-height:1em; }
.lead-card__status.is-ok{ color:#1f6b46; } .lead-card__status.is-err{ color:#b23b3b; }
.lead-card__consent{ font-size:.66rem; line-height:1.5; color:var(--ink-soft); margin:.8rem 0 0; }
.modal{ position:fixed; inset:0; z-index:300; display:none; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(8,7,5,.76); backdrop-filter:blur(3px); }
.modal__card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,420px); background:var(--paper); color:var(--ink); border-radius:11px; padding:2rem 1.8rem 1.8rem; box-shadow:0 30px 80px rgba(0,0,0,.55); font-family:var(--sans); }
.modal__x{ position:absolute; right:13px; top:8px; background:none; border:0; font-size:1.7rem; line-height:1; color:var(--ink-soft); cursor:pointer; }
.modal__eyebrow{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-deep); margin:0 0 .5rem; font-weight:600; }
.modal__title{ font-family:var(--serif); font-weight:600; font-size:1.75rem; line-height:1.08; color:var(--ink); margin:0 0 .4rem; }
.modal__sub{ font-size:.9rem; color:var(--ink-soft); margin:0 0 1.2rem; }
.blocker-q{ margin:0 0 1.1rem; }
.blocker-label{ display:block; font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.02em; color:var(--ink-soft); margin:0 0 .5rem; }
.blocker-chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.blocker-chip{ font-family:var(--sans); font-size:.78rem; font-weight:600; line-height:1.2; padding:.5rem .8rem; border-radius:100px; border:1px solid var(--line-lt); background:#fff; color:var(--ink-soft); cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.blocker-chip:hover{ border-color:var(--brass); color:var(--brass-deep); transform:translateY(-1px); }
.blocker-chip[aria-pressed="true"]{ background:var(--brass); border-color:var(--brass); color:var(--evergreen-2); }
@media(prefers-reduced-motion: reduce){ .blocker-chip{ transition:none; } .blocker-chip:hover{ transform:none; } }

/* ---------- Exit-intent modal — "Before you go" ----------
   Desktop (hover-capable, ≥768px): centered estate-plate dialog,
   fired on mouseleave near the top chrome. Mobile (<768px): slide-up
   bottom sheet, fired at 50%-scroll depth. Both: once per session —
   see initExitModal() in script.js. Idle state uses visibility+opacity
   (never display:none) so the entrance transition can actually play,
   and position:fixed keeps it out of flow, so there's no CLS either way. */
.exitm{
  position:fixed; inset:0; z-index:310;
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.exitm.is-open{
  visibility:visible; opacity:1; pointer-events:auto;
  transition:opacity .3s var(--ease);
}
.exitm__backdrop{ position:absolute; inset:0; background:rgba(8,7,5,.76); backdrop-filter:blur(3px); }
.exitm__card{
  position:absolute; left:50%; top:50%; width:min(92vw,440px);
  max-height:88vh; overflow-y:auto;
  background:var(--paper); color:var(--ink); border-radius:11px;
  padding:2rem 1.8rem 1.7rem; box-shadow:0 30px 80px rgba(0,0,0,.55);
  font-family:var(--sans);
  transform:translate(-50%,-46%);
  transition:transform .32s var(--ease);
}
.exitm.is-open .exitm__card{ transform:translate(-50%,-50%); }
.exitm__x{ position:absolute; right:13px; top:8px; background:none; border:0; font-size:1.7rem; line-height:1; color:var(--ink-soft); cursor:pointer; }
.exitm__eyebrow{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-deep); margin:0 0 .5rem; font-weight:600; }
.exitm__title{ font-family:var(--serif); font-weight:600; font-size:1.55rem; line-height:1.16; color:var(--ink); margin:0 0 .5rem; }
.exitm__sub{ font-size:.92rem; color:var(--ink-soft); margin:0 0 1.2rem; }
.exitm__card .lead-card{ background:transparent; box-shadow:none; padding:0; border-radius:0; }
.exitm__desk{ text-align:center; font-family:var(--sans); font-size:.8rem; color:var(--ink-soft); margin:1.1rem 0 0; }
.exitm__desk a{ color:var(--brass-deep); font-weight:600; }
.exitm__card :focus-visible{ outline-color:var(--ink); }
@media(prefers-reduced-motion:reduce){
  .exitm,.exitm__card{ transition:none !important; }
}
@media(max-width:767px){
  .exitm__card{
    left:0; right:0; top:auto; bottom:0; width:100%;
    max-height:88vh; border-radius:16px 16px 0 0;
    padding:1.7rem 1.3rem calc(1.5rem + env(safe-area-inset-bottom,0px));
    transform:translate(0,100%);
  }
  .exitm.is-open .exitm__card{ transform:translate(0,0); }
  .exitm__card::before{ content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:36px; height:4px; border-radius:2px; background:var(--line-lt); }
}

@media(max-width:880px){ .hero__in{ grid-template-columns:1fr; gap:2rem; } .hero__form{ max-width:440px; } .hero__marker{ display:none; } }
.imgduo{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.imgduo figure{ margin:0; height:clamp(240px,34vw,440px); overflow:hidden; }
.imgduo figure img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero__title{ margin:0; }
.hero__copy > .eyebrow{ margin-bottom:.5rem; }
.hero__copy > .rule{ margin:.8rem 0; }
.hero__wordmark{ display:block; font-family:var(--display); font-weight:400; font-size:var(--step-5); line-height:.96; letter-spacing:.015em; color:var(--ivory); }
.hero__wordmark-two{ color:var(--brass-soft); }
.hero__tagline{ display:block; margin-top:.5rem; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.1rem, 1rem + .7vw, 1.55rem); line-height:1.22; color:var(--sage); letter-spacing:.003em; }
.h1-kicker{ display:block; } /* legacy hook, superseded visually by .hero__wordmark */
.hero__subline{ display:block; margin:.4rem 0 0; font-family:var(--sans); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--brass-soft); }
.hero__lede{ font-size:clamp(1rem, .92rem + .35vw, 1.15rem); line-height:1.55; color:var(--sage); max-width:52ch; margin:.7rem 0 0; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1rem; }
.hero__price{ margin:2rem 0 0; font-family:var(--sans); font-size:.94rem; color:var(--sage); letter-spacing:.01em; }
.hero__price strong{ color:var(--ivory); font-variant-numeric:tabular-nums; font-weight:700; }
.hero__scroll{ position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sage); }
.hero__scroll span{ width:1px; height:38px; background:linear-gradient(var(--brass), transparent); animation:scrolldown 2s var(--ease) infinite; }
@keyframes scrolldown{ 0%{transform:scaleY(0);transform-origin:top;} 45%{transform:scaleY(1);transform-origin:top;} 55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ---- hero orchestrated load sequence (one entrance, staggered) ---- */
@media (prefers-reduced-motion: no-preference){
  .hero__copy > .eyebrow{ transition-delay:.05s; }
  .hero__copy > .hero__title{ transition-delay:.16s; }
  .hero__copy > .hero__subline{ transition-delay:.24s; }
  .hero__copy > .rule{ transition-delay:.32s; }
  .hero__copy > .hero__lede{ transition-delay:.4s; }
  .hero__copy > .hero__chips{ transition-delay:.48s; }
  .hero__copy > .hero__cta{ transition-delay:.56s; }
  .hero__copy > .hero__trust{ transition-delay:.64s; }
  .hero__form.reveal{ transition-delay:.7s; }
  .hero__marker{ opacity:0; animation:markerIn .9s var(--ease) .7s forwards; }
}
@keyframes markerIn{ from{ opacity:0; transform:scaleY(.4); transform-origin:center; } to{ opacity:1; transform:none; } }

/* ---------- Fold-height discipline (desktop): keep every fold element —
   headline, lede, chips, CTA, trust line — inside short viewports
   (1440x900, 1366x768, 1536x864, 1600x900 etc.) with no clipping.
   Font-size is pulled down first (it's the single biggest lever — an
   uncontrolled wordmark wrap costs a whole extra line of height) then
   the vertical rhythm around it is tightened to match. Placed after the
   base hero rules so it wins the cascade at matching specificity. ---------- */
@media (min-width:881px) and (max-height:960px){
  .topbar__in{ padding-block:.4rem; }
  .site-head__in{ padding-block:.7rem; }
  .hero{ min-height:auto; }
  .hero__in{ padding-block:clamp(10px,2vh,22px) clamp(8px,1.8vh,18px); }
  .hero__copy > .eyebrow{ margin-bottom:.3rem; }
  .hero__wordmark{ font-size:clamp(1.9rem, 1.1rem + 2.2vw + .9vh, 3.4rem); line-height:1.04; }
  .hero__tagline{ font-size:clamp(1rem,.94rem + .5vw,1.25rem); margin-top:.3rem; }
  .hero__subline{ margin-top:.2rem; font-size:.68rem; }
  .hero__copy > .rule{ margin:.45rem 0; }
  .hero__lede{ font-size:.95rem; line-height:1.45; margin-top:.4rem; }
  .hero__chips{ margin-top:.6rem; gap:.4rem; }
  .chip{ padding:.42rem .7rem; font-size:.72rem; }
  .hero__cta{ margin-top:.6rem; }
  .hero__trust{ margin-top:.4rem; }
  .hero__scroll{ display:none; }
}

/* ---------- Heritage strip ---------- */
.strip{ background:var(--evergreen-2); border-block:1px solid var(--line-dk); }
.strip__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-block:2.4rem; text-align:center; }
.strip__item{ display:flex; flex-direction:column; gap:.4rem; }
.strip__n{ font-family:var(--display); font-size:var(--step-4); color:var(--brass-soft); line-height:1; font-variant-numeric:tabular-nums; }
.strip__l{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }

/* ---------- Section scaffolding ---------- */
section{ padding-block:clamp(64px, 9vw, 130px); }
.section--paper{ background:var(--paper); color:var(--ink); }
.sec-head{ max-width:60ch; margin:0 0 3.2rem; }

/* ---------- The Address ---------- */
.address__head{ max-width:62ch; margin:0 0 3.4rem; }
.address__grid{ display:grid; grid-template-columns:.85fr 1.3fr; gap:1.3rem; align-items:stretch; }
.addr-media{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; min-height:340px; }
.addr-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.addr-media__cap{ position:absolute; right:12px; bottom:12px; font-family:var(--sans); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.45); padding:5px 9px; border-radius:3px; }
.addr-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-lt); border:1px solid var(--line-lt); }
.addr-card{ background:var(--paper); padding:clamp(1.6rem,3vw,2.6rem); }
.addr-card h3{ font-family:var(--serif); font-weight:600; font-size:var(--step-1); margin:0 0 .6rem; color:var(--ink); }
.addr-card p{ margin:0; color:var(--ink-soft); font-size:.98rem; }
@media(max-width:880px){ .address__grid{ grid-template-columns:1fr; } .addr-media{ order:-1; min-height:260px; } }

/* representative image bands */
.imgband{ position:relative; width:100%; height:clamp(280px,44vw,540px); overflow:hidden; }
.imgband img{ width:100%; height:100%; object-fit:cover; display:block; }
.imgband__cap{ position:absolute; right:14px; bottom:12px; font-family:var(--sans); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.45); padding:5px 9px; border-radius:3px; z-index:3; }

/* image band with an overlaid lifestyle caption — the "story band" */
.imgband--story::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(8,7,5,.85) 0%, rgba(8,7,5,.35) 42%, rgba(8,7,5,.05) 72%);
}
.imgband__story{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(1.2rem,3vw,2.2rem) var(--pad) clamp(2.6rem,4.4vw,3.6rem); }
.imgband__story-h{ font-family:var(--serif); font-style:italic; font-weight:500; color:var(--ivory); font-size:clamp(1.2rem,1rem + 1.6vw,1.8rem); max-width:34ch; margin:0; line-height:1.28; }
.art-frame{
  height:100%; border:1px solid var(--line-dk); border-radius:var(--r); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(176,141,61,.16), transparent),
    repeating-linear-gradient(135deg, rgba(246,243,234,.03) 0 14px, transparent 14px 28px),
    var(--evergreen-2);
}
.art-frame__label{ font-family:var(--serif); font-style:italic; color:var(--brass-soft); font-size:1.1rem; }
.art-frame__hint{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }

/* ---------- Surveyed distances (brass-keyline ledger) ---------- */
.survey__h{ font-family:var(--serif); font-weight:600; font-size:var(--step-2); color:var(--ink); margin:0 0 1.4rem; max-width:26ch; }
.survey__table{ width:100%; border-collapse:collapse; }
.survey__table thead th{
  font-family:var(--sans); font-weight:700; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass-deep); text-align:left; padding:0 .6rem .7rem; position:relative;
}
.survey__table thead th::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--brass); box-shadow:0 3px 0 0 rgba(176,141,61,.35); }
.survey__table td{ padding:.85rem .6rem; border-bottom:1px solid var(--line-lt); vertical-align:baseline; }
.survey__table tbody tr:last-child td{ border-bottom:none; }
.survey__d{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--brass-deep); font-weight:600; white-space:nowrap; }
.survey__t{ font-family:var(--mono); font-weight:400; color:var(--ink-soft); }
.survey__s{ font-family:var(--sans); font-size:.78rem; color:var(--ink-soft); text-align:right; }
@media(max-width:640px){
  .survey__table thead{ display:none; }
  .survey__table, .survey__table tbody, .survey__table tr, .survey__table td{ display:block; width:100%; }
  .survey__table tr{ padding:.75rem 0; border-bottom:1px solid var(--line-lt); }
  .survey__table td{ padding:.15rem .6rem; border-bottom:none; text-align:left !important; }
  .survey__s{ text-align:left; }
}

/* ---------- Connectivity ---------- */
.connect__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:1.6rem; align-items:stretch; }
.connect__cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; align-content:center; }
.cc{ border:1px solid var(--line-dk); border-radius:8px; padding:1rem 1.1rem; background:rgba(255,255,255,.02); }
.cc__v{ display:block; font-family:var(--display); font-size:1.3rem; color:var(--brass-soft); font-variant-numeric:tabular-nums; line-height:1.1; }
.cc__l{ display:block; font-family:var(--sans); font-size:.78rem; color:var(--sage); margin-top:.3rem; line-height:1.4; }
.connect__map{ border-radius:10px; overflow:hidden; border:1px solid var(--line-dk); min-height:320px; }
.connect__map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }
@media(max-width:780px){ .connect__grid{ grid-template-columns:1fr; } }
@media(max-width:480px){ .connect__cards{ grid-template-columns:1fr; } }

/* ---------- Residences ---------- */
.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.res-card{ border:1px solid var(--line-dk); border-radius:var(--r); padding:2rem 1.8rem; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); display:flex; flex-direction:column; transition:transform .3s var(--ease), border-color .3s var(--ease); }
.res-card:hover{ transform:translateY(-6px); border-color:var(--brass); }
.res-card--feature{ background:linear-gradient(180deg, rgba(176,141,61,.14), rgba(176,141,61,.02)); border-color:var(--line-brass); }
.res-card__tag{ font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); }
.res-card__size{ font-family:var(--display); font-size:2.7rem; line-height:1.1; margin:.5rem 0 1rem; color:var(--ivory); }
.res-card__size em{ font-family:var(--sans); font-size:1rem; font-style:normal; color:var(--sage); letter-spacing:.04em; }
.res-card p{ color:var(--sage); font-size:.95rem; margin:0 0 1.4rem; flex:1; }
.res-card__price{ font-family:var(--sans); font-weight:600; color:var(--ivory); margin-bottom:1rem; font-variant-numeric:tabular-nums; }

/* ---------- Legacy ---------- */
.legacy__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.pullquote{ font-family:var(--serif); font-style:italic; font-size:var(--step-2); line-height:1.4; color:var(--ivory); border-left:2px solid var(--brass); padding-left:1.6rem; margin:2rem 0 1.4rem; }
.pullquote cite{ display:block; font-style:normal; font-family:var(--sans); font-size:.82rem; letter-spacing:.06em; color:var(--sage); margin-top:1rem; }
.legacy__art{ aspect-ratio:4/5; position:relative; margin:0; }
.legacy__art img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r); display:block; }
.legacy__art figcaption{ position:absolute; right:12px; bottom:12px; font-family:var(--sans); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory); background:rgba(10,9,7,.6); padding:5px 9px; border-radius:3px; }

/* ---------- Legacy — The Canopy Line ----------
   A brass rule that draws downward past three engraved milestone
   plates as the section enters view. Plates reuse the eyebrow's
   double-keyline "engraved nameplate" framing on their label line.
   Transform/opacity only — the line's own box never changes size,
   so nothing around it shifts. */
.legacy__canopy{ position:relative; margin:2.3rem 0 0; padding-left:2rem; display:flex; flex-direction:column; gap:1.35rem; max-width:26rem; }
.legacy__canopy-line{
  position:absolute; left:0; top:.15rem; bottom:.15rem; width:2px;
  background:linear-gradient(180deg, var(--brass) 0%, var(--brass-deep) 100%);
  transform:scaleY(0); transform-origin:top;
  transition:transform .9s var(--ease);
}
.legacy__canopy.is-drawn .legacy__canopy-line{ transform:scaleY(1); }
.legacy__plate{
  position:relative;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(.15s + var(--i, 0) * .12s);
}
.legacy__canopy.is-drawn .legacy__plate{ opacity:1; transform:none; }
.legacy__plate::before{
  content:""; position:absolute; left:-2rem; top:.3rem; width:8px; height:8px; border-radius:50%;
  background:var(--brass); box-shadow:0 0 0 3px var(--evergreen);
  transform:scale(0);
  transition:transform .35s var(--ease);
  transition-delay:calc(.15s + var(--i, 0) * .12s);
}
.legacy__canopy.is-drawn .legacy__plate::before{ transform:scale(1); }
.legacy__plate-n{ display:block; font-family:var(--display); font-weight:400; font-size:1.3rem; line-height:1.15; color:var(--ivory); }
.legacy__plate-l{
  position:relative; display:inline-block; margin-top:.35rem; padding:.35rem 0 .4rem;
  font-family:var(--sans); font-weight:600; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-soft);
}
.legacy__plate-l::before,.legacy__plate-l::after{ content:""; position:absolute; left:0; width:100%; height:1px; background:currentColor; }
.legacy__plate-l::before{ top:0; box-shadow:0 -3px 0 0 currentColor; }
.legacy__plate-l::after{ bottom:0; box-shadow:0 3px 0 0 currentColor; }

/* ---------- Amenities ---------- */
.amen-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-lt); border:1px solid var(--line-lt); font-family:var(--sans); }
.amen-grid li{ background:var(--paper); display:flex; flex-direction:column; gap:.9rem; padding:1.8rem 1.4rem; font-size:.94rem; font-weight:500; color:var(--ink); }
.amen-grid svg{ width:30px; height:30px; fill:none; stroke:var(--brass-deep); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Developer ---------- */
.developer__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.award-list{ list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.award-list li{ position:relative; padding-left:1.6rem; color:var(--sage); }
.award-list li::before{ content:""; position:absolute; left:0; top:.65em; width:8px; height:8px; background:var(--brass); border-radius:50%; }
.developer__folio{ border:1px solid var(--line-dk); border-radius:var(--r); padding:2rem; background:var(--evergreen-2); }
.folio__title{ font-family:var(--serif); font-style:italic; color:var(--brass-soft); margin:0 0 1.4rem; font-size:1.2rem; }
.folio__row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-dk); border:1px solid var(--line-dk); }
.folio__row span{ background:var(--evergreen-2); padding:1rem; font-family:var(--sans); font-size:.9rem; color:var(--ivory); letter-spacing:.02em; }

/* ---------- Disambiguation ("two ACE Parkways") + advisor's desk ---------- */
.disambig__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin:2rem 0 1.4rem; }
.disambig__card{ border:1px solid var(--line-lt); border-radius:var(--r); padding:1.6rem 1.5rem; background:var(--paper-2); }
.disambig__card--feature{ border-color:var(--brass); background:#fff; box-shadow:0 10px 26px rgba(176,141,61,.14); }
.disambig__tag{ font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-deep); margin:0 0 .5rem; }
.disambig__card h3{ font-family:var(--serif); font-size:1.2rem; margin:0 0 .5rem; color:var(--ink); }
.disambig__card p{ color:var(--ink-soft); font-size:.92rem; line-height:1.6; margin:0; }
.advisor-note{ margin-top:1.8rem; border-left:3px solid var(--brass); background:var(--paper-2); border-radius:0 var(--r) var(--r) 0; padding:1.4rem 1.6rem; max-width:74ch; }
.advisor-note__h{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-deep); margin:0 0 .6rem; }
.advisor-note p{ color:var(--ink); font-size:.94rem; line-height:1.65; margin:0 0 .6rem; }
.advisor-note__sig{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:.88rem; margin:0 !important; }
@media(max-width:680px){ .disambig__grid{ grid-template-columns:1fr; } }

/* ---------- Preview / Form ---------- */
.preview{ background:linear-gradient(180deg, var(--evergreen), var(--evergreen-2)); }
.preview__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.trust-list{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.trust-list li{ display:flex; align-items:center; gap:.7rem; color:var(--ivory); font-size:.96rem; }
.trust-list svg{ width:20px; height:20px; fill:none; stroke:var(--brass); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

.lead-form{ background:var(--paper); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.6rem); color:var(--ink); font-family:var(--sans); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brass-deep); margin-bottom:.5rem; }
.field .opt{ color:var(--ink-soft); font-weight:400; text-transform:none; letter-spacing:0; }
.field input, .field select{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:.85rem 1rem; border:1px solid var(--line-lt); border-radius:var(--r); background:#fff;
  box-shadow:inset 0 1px 2px rgba(34,38,31,.06);
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:#8b9285; }
.field input:focus, .field select:focus{ outline:none; border-color:var(--brass); box-shadow:inset 0 1px 2px rgba(34,38,31,.06), 0 0 0 3px rgba(176,141,61,.2); }
.field input:invalid:not(:placeholder-shown){ border-color:#b23b3b; }
.consent{ display:flex; gap:.65rem; align-items:flex-start; font-size:.84rem; color:var(--ink-soft); margin:.4rem 0 1.3rem; }
.consent input{ margin-top:.2rem; accent-color:var(--brass); width:16px; height:16px; flex:none; }
.lead-form .fineprint{ color:var(--ink-soft); }
.form-status{ margin:.9rem 0 0; font-size:.9rem; font-weight:600; min-height:1.2em; }
.form-status.is-ok{ color:#1f6b46; }
.form-status.is-err{ color:#b23b3b; }

/* ---------- Footer — corporate colophon ---------- */
.site-foot{ background:var(--evergreen-2); border-top:1px solid var(--line-brass); padding-block:3.6rem 2rem; font-family:var(--sans); }
.site-foot__in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; padding-bottom:2.6rem; border-bottom:1px solid var(--line-dk); }
.foot-brand .brand__name{ font-size:1.5rem; }
.foot-brand .brand__by{ display:block; margin:.35rem 0 1.1rem; }
.foot-contact{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.foot-contact a{ color:var(--brass-soft); font-weight:600; font-size:.9rem; }
.foot-contact a:hover{ color:var(--ivory); }
.foot-cp{ font-size:.84rem; color:var(--sage); max-width:42ch; line-height:1.65; }
.foot-cp__name{ color:var(--ivory); font-weight:600; margin:0 0 .35rem; font-family:var(--serif); font-size:1.02rem; }
.foot-cp p{ margin:.25rem 0; }
.disclaimer{ padding-top:1.9rem; }
.disclaimer p{ font-size:.74rem; line-height:1.7; color:var(--sage); margin:0 0 .8rem; }
.disclaimer strong{ color:var(--ivory); }
.copyright{ color:var(--sage) !important; opacity:.75; }

/* ---------- Floating WhatsApp ---------- */
.float-wa{ position:fixed; right:18px; bottom:18px; z-index:90; width:56px; height:56px; border-radius:50%; background:#1faa53; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.3); transition:transform .25s var(--ease); }
.float-wa:hover{ transform:scale(1.08); }

/* ---------- Reveal (scroll) ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
/* LCP: hero reveals slide but never hide the largest paint */
.hero .reveal{ opacity:1; }


/* ---------- FAQ accordion ---------- */
.faq-list{ max-width:840px; margin:0 auto; }
.faq-item{ border:1px solid var(--line-dk); border-left:2px solid transparent; border-radius:6px; margin-bottom:.7rem; background:rgba(255,255,255,.02); transition:border-color .25s var(--ease); }
.faq-item[open]{ border-left-color:var(--brass); }
.faq-item summary{ cursor:pointer; padding:1.05rem 1.3rem; font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--ivory); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--brass-soft); font-size:1.4rem; line-height:1; flex:none; transition:transform .25s var(--ease); }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ padding:0 1.3rem 1.15rem; margin:0; color:var(--sage); font-size:.95rem; line-height:1.62; }

/* ---------- sticky mobile bar ---------- */
.sticky-bar{ position:fixed; left:0; right:0; bottom:0; z-index:95; display:none; align-items:center; gap:.7rem; padding:.7rem 1rem; background:rgba(10,9,7,.97); backdrop-filter:blur(10px); border-top:1px solid var(--line-brass); }
.sticky-bar .btn{ margin-right:auto; }
.sticky-bar__call,.sticky-bar__wa{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.sticky-bar__call{ background:var(--brass); color:var(--evergreen-2); }
.sticky-bar__wa{ background:#1faa53; color:#fff; }
@media(max-width:780px){ .sticky-bar{ display:flex; } main{ padding-bottom:66px; } .float-wa{ display:none; } }

/* ---------- EMI calculator ---------- */
.emi-card{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; max-width:880px; margin:0 auto; font-family:var(--sans); }
.emi-controls{ display:flex; flex-direction:column; gap:1.3rem; justify-content:center; }
.emi-field__top{ display:flex; justify-content:space-between; font-size:.86rem; color:var(--sage); margin-bottom:.5rem; }
.emi-field__top output{ color:var(--brass-soft); font-weight:600; font-variant-numeric:tabular-nums; }
.emi-field input[type=range]{ width:100%; accent-color:var(--brass); height:4px; cursor:pointer; }
.emi-result{ background:rgba(255,255,255,.04); border:1px solid var(--line-dk); border-radius:12px; padding:1.6rem; display:flex; flex-direction:column; }
.emi-result__label{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sage); margin:0; }
.emi-result__big{ font-family:var(--display); font-size:2.6rem; color:var(--ivory); margin:.2rem 0 1.1rem; font-variant-numeric:tabular-nums; line-height:1; }
.emi-result__rows{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.3rem; }
.emi-result__rows div{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--sage); border-bottom:1px solid var(--line-dk); padding-bottom:.55rem; }
.emi-result__rows strong{ color:var(--ivory); font-weight:600; font-variant-numeric:tabular-nums; }
.emi-result .btn{ margin-top:auto; }
@media(max-width:680px){ .emi-card{ grid-template-columns:1fr; } }

/* ---------- Reviews / Trust badge ---------- */
.reviews{ background:var(--evergreen-2); border-top:1px solid var(--line-dk); }
.reviews__score{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.reviews__stars{ font-size:2.1rem; color:var(--brass); letter-spacing:.06em; line-height:1; }
.reviews__num{ font-family:var(--display); font-size:var(--step-4); line-height:1; color:var(--ivory); font-variant-numeric:tabular-nums; }
.reviews__meta{ display:flex; flex-direction:column; gap:.25rem; font-family:var(--sans); }
.reviews__count{ font-size:.92rem; color:var(--sage); }
.reviews__platform{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); opacity:.7; }
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.2rem; }
.review-q{ border:1px solid var(--line-dk); border-radius:var(--r); padding:1.5rem 1.4rem; background:rgba(255,255,255,.025); margin:0; }
.review-q__stars{ color:var(--brass); font-size:1rem; letter-spacing:.04em; display:block; margin-bottom:.75rem; }
.review-q p{ margin:0; color:var(--ivory); font-style:italic; font-family:var(--serif); font-size:1.08rem; line-height:1.58; }
.reviews__footer{ margin-top:2rem; display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }
.reviews__disclosure{ font-family:var(--sans); font-size:.74rem; color:var(--sage); line-height:1.6; max-width:66ch; margin:0; }
@media(max-width:780px){ .reviews__grid{ grid-template-columns:1fr; } .reviews__num{ font-size:2.6rem; } }

/* ============================================================
   Editorial system — blog / article / hub pages
   Measure ~68ch, brass keylines on tables, brass paragraph
   marks in place of drop caps, tabular numerals in data.
   ============================================================ */
.article-wrap{ max-width:min(68ch,780px); margin:0 auto; padding:clamp(2rem,5vw,4.2rem) 1.2rem; }
.article-wrap--data{ max-width:min(920px,94vw); }
.bc{ font-family:var(--sans); font-size:.78rem; letter-spacing:.02em; color:var(--sage); margin-bottom:1.2rem; }
.bc a{ color:var(--sage); }
.bc a:hover{ color:var(--brass-soft); }
.article__eyebrow{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); font-weight:600; margin:0 0 .6rem; }
.article h1{ font-family:var(--serif); font-weight:600; font-size:var(--step-3); line-height:1.1; color:var(--ivory); margin:.2rem 0 1.5rem; }
.article h2{ position:relative; font-family:var(--serif); font-weight:600; font-size:var(--step-1); color:var(--ivory); margin:2.1rem 0 .8rem; padding-left:1.35rem; }
.article h2::before{ content:"¶"; position:absolute; left:0; top:.06em; color:var(--brass); font-family:var(--display); font-size:.86em; font-weight:400; }
.article h3{ font-family:var(--serif); font-size:1.14rem; color:var(--ivory); margin:1.5rem 0 .55rem; }
.article p,.article li{ color:var(--sage); line-height:1.75; font-size:1rem; }
.article ul,.article ol{ padding-left:1.3rem; margin:.7rem 0; }
.article li{ margin-bottom:.45rem; }
.article a{ color:var(--brass-soft); text-decoration:underline; text-decoration-color:var(--line-brass); text-underline-offset:2px; }
.article a:hover{ text-decoration-color:currentColor; }
.article blockquote{ border-left:3px solid var(--brass); padding:.5rem 0 .5rem 1.2rem; margin:1.4rem 0; color:var(--ivory); font-family:var(--serif); font-style:italic; font-size:1.05rem; }
.tbl-wrap{ overflow-x:auto; margin:1.3rem 0; -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(90deg,#0E0D0B 30%,transparent),
    linear-gradient(270deg,#0E0D0B 30%,transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.28),transparent),
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.28),transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}
.article table{ width:100%; min-width:100%; border-collapse:collapse; margin:1.3rem 0; font-size:.92rem; font-variant-numeric:tabular-nums; }
.tbl-wrap .article table{ min-width:640px; margin:0; }
.article th,.article td{ border-bottom:1px solid var(--line-dk); padding:.7rem .9rem; text-align:left; color:var(--sage); vertical-align:top; }
.article th{ font-family:var(--sans); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--brass-soft); border-bottom:2px solid var(--brass); border-top:1px solid var(--brass); background:rgba(176,141,61,.05); }
.article td:first-child,.article th:first-child{ color:var(--ivory); font-weight:600; }
.win{ color:var(--brass-soft); font-weight:600; }
.confirm{ color:var(--brass-soft); font-style:italic; }

.takeaways{ border:1px solid var(--line-dk); border-left:2px solid var(--brass); border-radius:9px; background:rgba(255,255,255,.03); padding:1.2rem 1.4rem; margin:2rem 0; }
.takeaways h2{ margin:0 0 .6rem; padding-left:0; font-size:1.12rem; }
.takeaways h2::before{ content:none; }
.post-cta{ border-top:1px solid var(--line-dk); margin-top:2.4rem; padding-top:1.6rem; text-align:center; }
.rel-links{ border-top:1px solid var(--line-dk); margin-top:2rem; padding-top:1.2rem; font-family:var(--sans); font-size:.9rem; }
.rel-links a{ color:var(--brass-soft); margin-right:1rem; }

.new-launch-banner,.hub-banner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem; border:1px solid var(--brass); background:rgba(176,141,61,.08); border-radius:9px; padding:1rem 1.3rem; margin:1.5rem 0 1.9rem; }
.new-launch-banner p,.hub-banner p{ margin:0; color:var(--ivory); font-size:.95rem; }

.update-entry{ border:1px solid var(--line-dk); border-left:2px solid var(--brass-soft); border-radius:9px; background:rgba(255,255,255,.03); padding:1.4rem 1.6rem; margin:1.7rem 0; }
.update-entry .ue-date{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-soft); font-weight:700; margin:0 0 .4rem; }
.update-entry h2{ margin:0 0 .8rem; padding-left:0; }
.update-entry h2::before{ content:none; }
.watch-note{ border-left:3px solid var(--brass); padding:.5rem 0 .5rem 1.2rem; margin:1.5rem 0; color:var(--ivory); font-size:.94rem; }

.card-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:1.5rem 0; }
.card-row .c{ border:1px solid var(--line-dk); border-radius:9px; padding:1.1rem 1.25rem; background:rgba(255,255,255,.025); }
.card-row .c h3{ margin-top:0; font-size:1rem; }
.card-row .c p{ font-size:.9rem; margin:0; }

.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.2rem; max-width:1040px; margin:0 auto; }
.blog-card{ border:1px solid var(--line-dk); border-radius:10px; padding:1.5rem; background:rgba(255,255,255,.02); display:block; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.blog-card:hover{ border-color:var(--brass); transform:translateY(-3px); }
.blog-card h2{ font-family:var(--serif); font-weight:600; font-size:1.25rem; color:var(--ivory); margin:0 0 .55rem; line-height:1.22; padding-left:0; }
.blog-card h2::before{ content:none; }
.blog-index-title{ font-family:var(--display); color:var(--ivory); font-weight:400; font-size:var(--step-3); margin:.2rem 0 1.5rem; max-width:1040px; margin-inline:auto; }
.blog-card p{ color:var(--sage); font-size:.9rem; margin:0; line-height:1.6; }

/* ---------- About / contact page ---------- */
.about-wrap{ padding-block:clamp(48px,8vw,110px); }
.about-contact{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-lt); border:1px solid var(--line-lt); margin:2rem 0; font-family:var(--sans); }
.about-contact > div{ background:#fff; padding:1.3rem 1.5rem; }
.about-contact .l{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.4rem; }
.about-contact .v{ color:var(--ink); font-weight:500; }
.about-contact a{ color:var(--brass-deep); }
@media(max-width:680px){ .about-contact{ grid-template-columns:1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .legacy__in, .developer__in, .preview__in{ grid-template-columns:1fr; }
  .res-grid{ grid-template-columns:1fr; }
  .amen-grid{ grid-template-columns:repeat(2,1fr); }
  .legacy__art{ order:-1; aspect-ratio:16/10; }
}
/* Nav collapses to the hamburger drawer from 1180px down — below that,
   "The Address · Residences · The Legacy · Amenities · ACE Group · Insights
   · Request a Preview" plus the wordmark no longer fit one row and were
   overlapping the logo (visible ~880–1150px: tablets, small laptops). */
@media (max-width: 1180px){
  .nav{ position:fixed; inset:0 0 0 auto; width:min(82vw,340px); flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem; background:var(--evergreen-2); padding:3rem 2rem; transform:translateX(100%); transition:transform .35s var(--ease); border-left:1px solid var(--line-brass); }
  .nav.is-open{ transform:none; }
  .nav a{ font-size:1.1rem; }
  .nav__cta{ width:100%; }
  .hamburger{ display:flex; z-index:101; }
  .hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2){ opacity:0; }
  .hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width: 780px){
  .strip__in{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1rem; }
  .address__grid{ grid-template-columns:1fr; }
  .topbar__tag{ font-size:.72rem; }
}
@media (max-width: 480px){
  .amen-grid{ grid-template-columns:1fr; }
  .foot-contact{ gap:1rem; }
}
@media (max-width: 360px){
  .wrap{ padding-inline:16px; }
  .hero__wordmark{ font-size:clamp(2.6rem,13vw,3.4rem); }
  .lead-card,.lead-form{ padding:1.2rem 1.1rem; }
}

/* ---------- Ultra-wide composition pass (no dead space at 1920–2560+) ---------- */
@media (min-width:1700px){
  :root{ --wrap: 1320px; }
  .hero__in{ gap:clamp(3.4rem,4vw,5rem); }
  .hero__lede{ max-width:56ch; }
  .address__grid{ grid-template-columns:1fr 1.5fr; gap:1.8rem; }
  .res-grid{ gap:1.9rem; }
  .imgband, .imgband--story{ height:clamp(360px,30vw,640px); }
  .imgduo figure{ height:clamp(280px,26vw,480px); }
  .legacy__in, .developer__in, .preview__in{ gap:clamp(4rem,6vw,6.5rem); }
  .connect__grid{ gap:2.2rem; }
  .reviews__grid{ gap:1.4rem; }
}

/* ---------- Motion / contrast prefs ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .topbar .dot, .hero__scroll span{ animation:none; }
  .btn:hover, .res-card:hover, .float-wa:hover, .blog-card:hover{ transform:none; }
  .hero__marker{ opacity:1; animation:none; }
  .hero__topo{ animation:none; }
  .legacy__canopy-line{ transition:none; transform:scaleY(1); }
  .legacy__plate{ transition:none; opacity:1; transform:none; }
  .legacy__plate::before{ transition:none; transform:scale(1); }
}

/* ---------- Verify-before-you-buy (RERA self-verification stepper) ---------- */
.vb-widget{ margin:1.6rem 0 2.2rem; }
.vb-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.vb-step{ position:relative; border:1px solid var(--line-dk); border-radius:9px; background:rgba(255,255,255,.03); padding:1.5rem 1.4rem 1.3rem; overflow:hidden; }
.vb-step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--brass); }
.vb-num{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(2.3rem,1.9rem + 1.6vw,3.2rem); line-height:1; color:var(--brass); opacity:.92; margin:0 0 .4rem; }
.vb-step h3{ font-family:var(--serif); font-weight:600; font-size:1.03rem; color:var(--ivory); margin:0 0 .5rem; }
.vb-step p{ color:var(--sage); font-size:.92rem; line-height:1.65; margin:0; }
.vb-step p strong{ color:var(--brass-soft); }
.vb-step code{ font-family:var(--mono); font-size:.84em; background:rgba(176,141,61,.14); color:var(--brass-soft); padding:.08em .4em; border-radius:4px; letter-spacing:.01em; white-space:nowrap; }
.vb-portal-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.3rem; font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--brass-soft); text-decoration:underline; text-decoration-color:var(--line-brass); text-underline-offset:2px; }
.vb-portal-link:hover{ text-decoration-color:currentColor; }
@media(max-width:640px){ .vb-steps{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .vb-step{ transition:none; } }