/* ==========================================================================
   Palm Court — Milestone 15 prototype (390×844 primary)
   Single-row nav · day → night hero (architectural leader-line annotations) ·
   At a Glance · Why · Gallery · Official Walkthrough · Choose Your Home ·
   Current Buyer Benefits · Amenities · Location · FAQ · Final Conversion ·
   mid-right Call + WhatsApp utility stack · conversion modal.
   Color tokens preserved from prior foundation.
   ========================================================================== */

:root {
  --white: #ffffff;
  --warm: #faf8f4;
  --warm-2: #f3efe8;
  --teal: #0a8f88;
  --teal-soft: rgba(10, 143, 136, 0.12);
  --gold: #d5a83f;
  --gold-deep: #b8902e;
  --charcoal: #1f1e1c;
  --ink: #2c2a26;
  --muted: #6b6760;
  --line: rgba(10, 143, 136, 0.28);
  --line-soft: rgba(31, 30, 28, 0.08);
  --night: #0c1218;
  --navy: #141c28;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-row: 52px;
  --nav-h: var(--nav-row);
  --gutter: 20px;
  --dock-h: 0px;
  /* Desktop measures — values applied at min-width: 1024px */
  --measure-wide: 100%;
  --measure-reading: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--warm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100%;
  padding-bottom: var(--dock-h);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--teal);
  color: var(--white);
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Nav — single row: CHG icon × Prestige badge ··· Check if it fits
   -------------------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}

body.is-hero-dark .site-nav {
  background: rgba(12, 18, 24, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: var(--nav-row);
  padding: 0 var(--gutter);
  max-width: 720px;
  margin: 0 auto;
  min-width: 0;
}

/* CHG logo intentionally removed from the nav — its place is taken by the
   genuine Prestige "Authorised Sales Partner" composite (never redrawn), kept
   deliberately small so it reads as a trust mark, not a co-brand lockup. CHG's
   own identity lives in the footer instead. */
.site-nav__badge {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  margin: 0;
  line-height: 0;
}

.site-nav__badge img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 100%;
}

.site-nav__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 0.3rem 0.68rem;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: var(--teal);
  color: var(--white);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.site-nav__cta:hover,
.site-nav__cta:focus-visible {
  background: #087a74;
  border-color: #087a74;
  color: var(--white);
  outline: none;
}

.site-nav__cta:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.site-nav__cta-label {
  display: block;
}

body.is-hero-dark .site-nav__cta {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

body.is-hero-dark .site-nav__cta:hover,
body.is-hero-dark .site-nav__cta:focus-visible {
  background: #087a74;
  border-color: #087a74;
  color: var(--white);
}

body.is-hero-dark .site-nav__cta:focus-visible {
  outline-color: var(--warm);
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn--gold {
  background: var(--gold);
  color: var(--charcoal);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(213, 168, 63, 0.28);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  outline: none;
}

.btn--teal {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(10, 143, 136, 0.22);
}

.btn--teal:hover,
.btn--teal:focus-visible {
  background: #087a74;
  border-color: #087a74;
  outline: none;
}

.btn--teal:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.btn--teal-ghost {
  background: transparent;
  color: var(--teal);
  border-color: var(--line);
  box-shadow: none;
}

.btn--teal-ghost:hover,
.btn--teal-ghost:focus-visible {
  background: var(--teal-soft);
  border-color: var(--teal);
  outline: none;
}

.btn--teal-ghost:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Shared chapter head
   -------------------------------------------------------------------------- */

.chapter-head {
  margin-bottom: 1.5rem;
}

.chapter-head__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.chapter-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 6.5vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  overflow-wrap: break-word;
  max-width: 18ch;
}

/* --------------------------------------------------------------------------
   HERO — sticky pin + continuous day→night progress
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--warm);
}

.hero__track {
  position: relative;
  /* Sticky viewport + the day->night scroll-jack's actual buffer. Was
     1000px (day->night took most of a screen's worth of extra scrolling
     before night was clearly visible); shortened so the same smooth,
     continuous --hero-p curve now completes within roughly one normal
     mobile swipe instead of several. The 10 sentinels below intentionally
     still span 0-900px — they're not read by app.js's scroll math at all
     (scrollable is this track/sticky height difference, not a sentinel
     count), so leaving their span alone doesn't affect this. */
  height: calc(100svh - var(--nav-h) + 400px);
}

.hero__sentinel {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

.hero__sentinel[data-stage="0"] { top: 0; }
.hero__sentinel[data-stage="1"] { top: 100px; }
.hero__sentinel[data-stage="2"] { top: 200px; }
.hero__sentinel[data-stage="3"] { top: 300px; }
.hero__sentinel[data-stage="4"] { top: 400px; }
.hero__sentinel[data-stage="5"] { top: 500px; }
.hero__sentinel[data-stage="6"] { top: 600px; }
.hero__sentinel[data-stage="7"] { top: 700px; }
.hero__sentinel[data-stage="8"] { top: 800px; }
.hero__sentinel[data-stage="9"] { top: 900px; }

.hero__sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
  --hero-p: 0;
  background: transparent;
}

.hero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__sky-layer {
  position: absolute;
  inset: 0;
  transition: none;
}

.hero__sky-layer--day {
  background:
    radial-gradient(120% 80% at 50% 0%, #fff8e8 0%, transparent 55%),
    linear-gradient(180deg, #e8f2f4 0%, #f7f3ea 42%, #f3efe8 100%);
  opacity: calc(1 - (var(--hero-p) * 1.15));
}

.hero__sky-layer--dusk {
  background:
    radial-gradient(100% 70% at 70% 10%, rgba(213, 168, 63, 0.35) 0%, transparent 50%),
    linear-gradient(180deg, #c9a06a 0%, #8a6a58 40%, #3d3a42 100%);
  opacity: calc(
    min(1, max(0, (var(--hero-p) - 0.15) * 3.2))
    * (1 - min(1, max(0, (var(--hero-p) - 0.55) * 2.8)))
  );
}

.hero__sky-layer--night {
  background:
    radial-gradient(90% 60% at 30% 0%, rgba(40, 70, 110, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, #0a1018 0%, #121a24 45%, #0c1218 100%);
  opacity: calc(min(1, max(0, (var(--hero-p) - 0.35) * 1.8)));
}

.hero__canvas {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "type"
    "stage"
    "footer";
  height: 100%;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0.45rem var(--gutter) 0.85rem;
  gap: 0.2rem;
}

/* Transparent on mobile so type/stage/footer keep their grid areas.
   Desktop (1024+) turns this into the optically-centered copy cluster. */
.hero__content {
  display: contents;
}

/* ---- Type — discrete tones (readable at every progress, no muddy mid-mix) ---- */

.hero__type {
  position: relative;
  z-index: 3;
  grid-area: type;
  min-width: 0;
  max-width: 100%;
}

/* Subtle premium eyebrow — not a sales badge. Gold-tinted outline, quiet at
   rest; tone-aware like every other first-fold text element so it stays
   readable through the day → dusk → night sequence. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(184, 144, 46, 0.4);
  background: rgba(213, 168, 63, 0.08);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}

.hero__badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--teal);
  flex-shrink: 0;
}

.hero__sticky[data-tone="dusk"] .hero__badge,
.hero__sticky[data-tone="night"] .hero__badge {
  border-color: rgba(244, 227, 168, 0.45);
  background: rgba(244, 227, 168, 0.12);
  color: #f4e3a8;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 8.6vw, 2.55rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  overflow-wrap: break-word;
  max-width: 100%;
  transition: color 0.35s var(--ease);
}

.hero__sticky[data-tone="dusk"] .hero__title,
.hero__sticky[data-tone="night"] .hero__title {
  color: #f4f1ea;
}

.hero__title-line {
  display: block;
}

.hero__place {
  margin: 0.28rem 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal);
  transition: color 0.35s var(--ease);
}

.hero__sticky[data-tone="dusk"] .hero__place,
.hero__sticky[data-tone="night"] .hero__place {
  color: #9ad9d4;
}

/* ---- Stage: clips oversized render; facts stay in the 390 frame ---- */

.hero__stage {
  position: relative;
  z-index: 2;
  grid-area: stage;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__render {
  position: relative;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform:
    translate3d(0, calc(var(--hero-p) * -8px), 0)
    scale(calc(1 + (var(--hero-p) * 0.035)));
  transform-origin: 50% 48%;
  will-change: transform;
}

/* Mobile now shows the same wide masterplan render as desktop (reused asset,
   not a separate crop) — full-bleed cover instead of the old contain-fit
   1490×1056 box, so the towers read at real size instead of shrinking to fit
   a taller frame. object-position tuned to keep the main tower cluster,
   clubhouse and pool in frame; see .hero__leaders--mobile above for why the
   old leader-line overlay is hidden rather than reused here. */
.hero__render-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__render-layer {
  display: block;
  margin: 0;
  position: absolute;
  inset: 0;
}

.hero__render-layer img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 62% center;
  filter: none;
}

.hero__render-layer--day {
  z-index: 2;
  opacity: calc(1 - var(--hero-p));
}

.hero__render-layer--night {
  z-index: 1;
  opacity: var(--hero-p);
}

/* Fact chips + leader lines — overlay the render-stack (image content rect) */

.hero__leaders {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.hero__leader {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.hero__leader.is-visible {
  opacity: 1;
}

.hero__leader path,
.hero__leader-path {
  stroke: var(--teal);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.35s var(--ease);
}

/* Mobile now reuses the desktop-shaped render (see .hero__render-stack below) —
   the mobile leader-line coordinates were plotted against the old 1490×1056
   crop and would misplace over the new image, so they stay hidden at every
   width. Desktop SVG (already tied to the desktop asset via JS) is gated at
   1024+ same as before. The same fact callouts (typology/SBA/clubhouse/pool)
   are shown again immediately below in Palm Court Essentials. */
.hero__leaders--mobile {
  display: none;
}

.hero__leaders--desktop {
  display: none;
}

/* .hero__fact--a/b/c/d below are also plotted in old-stack % (see the
   render-edge-fraction comment above them) — same reasoning, hidden on
   mobile for the same reason as the leader SVG. Desktop is unaffected: its
   .hero__fact--a/b/c/d positions come from separate JS-synced custom
   properties (syncDesktopHeroCrop()), not these base percentages. */
.hero__facts {
  display: none;
}

.hero__leader circle {
  fill: var(--teal);
  transition: fill 0.35s var(--ease);
}

.hero__sticky[data-tone="dusk"] .hero__leader path,
.hero__sticky[data-tone="dusk"] .hero__leader-path,
.hero__sticky[data-tone="night"] .hero__leader path,
.hero__sticky[data-tone="night"] .hero__leader-path {
  stroke: rgba(244, 241, 234, 0.88);
}

.hero__sticky[data-tone="dusk"] .hero__leader circle,
.hero__sticky[data-tone="night"] .hero__leader circle {
  fill: var(--gold);
}

.hero__facts {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.hero__fact {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  padding: 0.12rem 0.2rem;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
  max-width: min(42%, 8.5rem);
  /* Soft scrim for legibility — must not read as a floating card */
  text-shadow:
    0 0 10px rgba(250, 248, 244, 0.92),
    0 1px 2px rgba(250, 248, 244, 0.85),
    0 0 1px rgba(250, 248, 244, 0.95);
}

.hero__sticky[data-tone="dusk"] .hero__fact,
.hero__sticky[data-tone="night"] .hero__fact {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow:
    0 0 12px rgba(12, 18, 24, 0.95),
    0 1px 3px rgba(0, 0, 0, 0.75),
    0 0 1px rgba(0, 0, 0, 0.9);
}

.hero__fact.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__fact.is-hidden-a11y {
  visibility: hidden;
}

.hero__fact-label {
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal);
  line-height: 1.15;
}

.hero__sticky[data-tone="dusk"] .hero__fact-label,
.hero__sticky[data-tone="night"] .hero__fact-label {
  color: var(--gold);
}

.hero__fact-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.64rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--charcoal);
}

.hero__sticky[data-tone="dusk"] .hero__fact-value,
.hero__sticky[data-tone="night"] .hero__fact-value {
  color: #f4f1ea;
}

/* Label zones — % of render-stack (image box), NOT % of the visible viewport.
   The stack is intentionally oversized (max-width: 142%, centred, clipped by
   .hero__stage overflow) for the cinematic crop — ~14.8% of the stack's own
   width is clipped off each side. The SVG leaders self-correct for this via
   preserveAspectRatio="xMidYMid meet" (same "contain" mapping as the image),
   but plain CSS % on .hero__fact does not — it resolves against the full,
   partly-offscreen stack box. left/right values below are chosen so the
   *visible* margin from the render box's real edge stays >= ~16px across
   the whole mobile range (390/430, degrading gracefully at 360/320), using
   renderEdgeFraction = 1.42 * stackFraction - 0.21 (derived from the fixed
   142%/centred stack geometry — constant across this breakpoint, since it
   is not width-dependent). Do not eyeball-adjust these independently of
   that relationship — recompute from it. */
.hero__fact--a {
  /* Typology — open sky above/right of tallest towers.
     72% put the label flush against the stack's clipped edge (~2-9px real
     margin, at clipping risk). 68% restores ~16-27px of real edge margin. */
  top: 3%;
  left: 68%;
  max-width: 5.75rem;
}

.hero__fact--b {
  /* SBA — left open margin of the visible crop. left:16% intentionally
     matches the leader's near-label endpoint (248/1490 ≈ 16.6%) and gives a
     safe, stable left-edge margin (~21-27px) — do not move it inward; the
     stack's left overflow grows faster than the render box's near-constant
     left offset, so nudging left% down thins the LEFT margin as viewport
     widens (measured 13px→10px across 320-430, worse than the original).
     Narrower max-width instead (was 5.5rem) pulls in the right edge only,
     giving the leader's rightward stub clearance from the value text
     without touching left-edge safety. */
  top: 27%;
  left: 16%;
  max-width: 5rem;
}

.hero__fact--c {
  /* Clubhouse — street/road open area, right of clubhouse.
     16% left only ~2-9px real margin from the stack's clipped right edge
     (the reported crowding). 18% restores ~15-18px. */
  top: 61%;
  left: auto;
  right: 18%;
  max-width: 5.5rem;
  text-align: right;
}

.hero__fact--d {
  /* Rooftop pool — anchor corrected to match the leader's own near-label
     endpoint (679/1490 ≈ 45.6%; was 28%, a real drift from the leader it's
     meant to connect to — see SVG comment "Rooftop pool → endpoint 834,644"). */
  top: 47%;
  left: 46%;
  max-width: 5.75rem;
}

/* ---- Footer copy + CTA ---- */

.hero__footer {
  position: relative;
  z-index: 3;
  grid-area: footer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
}

/* While the fixed consent banner is unresolved, reserve exactly its own
   real height (plus a small gap) below the hero CTAs so they're never
   physically covered by it — the banner never gets a z-index fight,
   because there's nothing left for it to sit on top of. Padding (not the
   CTA group's own margin) so this can never be lost to margin collapsing
   regardless of how .hero__footer's own box model changes later.
   --chg-consent-h is set/cleared by app.js's reserveHeroSpaceForConsent()/
   releaseHeroSpaceForConsent() — real measured height, not a guess, since
   the banner's own text wraps differently across mobile widths.
   Explicitly wrapped in max-width:1023.98px (the same boundary used
   elsewhere against the 1024px desktop breakpoint) rather than left as a
   base rule relying on no desktop override existing — a bare base rule
   here silently cascaded into the desktop layout during QA (caught
   before deploy, not assumed safe): desktop's hero CTAs already sit
   nowhere near the bottom-fixed consent banner, so this must never
   apply there at all. */
@media (max-width: 1023.98px) {
  body.has-pending-consent .hero__footer {
    padding-bottom: calc(var(--chg-consent-h, 0px) + 12px);
  }
}

.hero__lede {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.4;
  max-width: 34ch;
  color: var(--muted);
  transition: color 0.35s var(--ease), opacity 0.35s var(--ease);
}

.hero__sticky[data-tone="dusk"] .hero__lede,
.hero__sticky[data-tone="night"] .hero__lede {
  color: rgba(244, 241, 234, 0.86);
}

/* ---- Starting price (visible in the first fold, no scroll required) ---- */

.hero__price {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin: 0 0 0.1rem;
}

.hero__price-eyebrow {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}

.hero__price-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 6.2vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  transition: color 0.35s var(--ease);
}

.hero__price-star {
  font-size: 0.55em;
  color: var(--gold);
  margin-left: 1px;
}

.hero__price-qualifier {
  font-size: 0.62rem;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}

.hero__sticky[data-tone="dusk"] .hero__price-eyebrow,
.hero__sticky[data-tone="night"] .hero__price-eyebrow,
.hero__sticky[data-tone="dusk"] .hero__price-qualifier,
.hero__sticky[data-tone="night"] .hero__price-qualifier {
  color: rgba(244, 241, 234, 0.72);
}

.hero__sticky[data-tone="dusk"] .hero__price-value,
.hero__sticky[data-tone="night"] .hero__price-value {
  color: #f4f1ea;
}

.hero__footer .btn {
  min-height: 44px;
  padding: 0.7rem 1.3rem;
}

.hero__footer .btn--gold {
  /* Gold stays gold — readable on both sky states */
  box-shadow:
    0 8px 22px rgba(213, 168, 63, 0.32),
    0 0 0 1px rgba(31, 30, 28, 0.06);
}

/* Two clearly-weighted, intentionally-paired paths: gold primary
   (exploration) and the established solid dark-teal button (conversion) —
   same .btn/.btn--teal system used everywhere else on the page, not a
   separate button design. */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.hero__footer .btn.is-hidden-a11y,
.hero__lede.is-hidden-a11y {
  visibility: hidden;
}

/* Late-scroll: soften lede/CTA slightly so chips read against night scene */
.hero__sticky[data-sticky-stage="7"] .hero__lede,
.hero__sticky[data-sticky-stage="8"] .hero__lede,
.hero__sticky[data-sticky-stage="9"] .hero__lede {
  opacity: 0.55;
}

.hero__sticky[data-sticky-stage="8"] .hero__footer .btn,
.hero__sticky[data-sticky-stage="9"] .hero__footer .btn {
  opacity: 0.92;
}

/* --------------------------------------------------------------------------
   02 — At a Glance
   -------------------------------------------------------------------------- */

.glance {
  background: var(--warm);
  padding: 3.25rem 0 3rem;
}

.glance__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.glance__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.glance__card {
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 28px rgba(31, 30, 28, 0.04);
  min-width: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.glance__card:has(.glance__card-link:hover),
.glance__card:has(.glance__card-link:focus-visible) {
  border-color: var(--teal);
}

.glance__card-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.05rem 1rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  position: relative;
}

.glance__card-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 14px;
}

.glance__key {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
}

.glance__val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  overflow-wrap: break-word;
}

.glance__go {
  position: absolute;
  top: 1.05rem;
  right: 1rem;
  font-size: 0.85rem;
  color: var(--teal);
  opacity: 0.55;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.glance__card-link:hover .glance__go,
.glance__card-link:focus-visible .glance__go {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .glance__card-link:hover .glance__go,
  .glance__card-link:focus-visible .glance__go {
    transform: translateX(2px);
  }
}

/* --------------------------------------------------------------------------
   03 — Why Palm Court (opening)
   -------------------------------------------------------------------------- */

.why {
  background: linear-gradient(180deg, var(--warm) 0%, var(--white) 35%, var(--warm) 100%);
  padding: 1.5rem 0 4.5rem;
}

.why__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.why__media {
  margin: 0 0 1.5rem;
}

.why__frame {
  overflow: hidden;
  border-radius: 16px;
  background: var(--warm-2);
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 40px rgba(31, 30, 28, 0.1);
}

.why__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.why__lead {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 34ch;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   10 — FAQ (compact before-you-visit accordion)
   -------------------------------------------------------------------------- */

.faq {
  background: var(--warm);
  padding: 2.25rem 0 2.5rem;
  overflow-x: clip;
  max-width: 100%;
  border-top: 1px solid var(--line-soft);
}

.faq__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-width: 0;
}

.faq .chapter-head {
  margin-bottom: 0.45rem;
}

.faq .chapter-head__title {
  max-width: 18ch;
}

.faq__lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 34ch;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.faq__item {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--white);
  overflow: clip;
  min-width: 0;
}

.faq__question {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.faq__trigger:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
  border-radius: 16px;
}

.faq__trigger-text {
  flex: 1 1 auto;
  min-width: 0;
}

.faq__icon {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.1rem;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.faq__item.is-open .faq__icon {
  transform: rotate(225deg);
  margin-top: 0.35rem;
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s var(--ease);
}

.faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
}

.faq__panel-body {
  overflow: hidden;
  min-height: 0;
}

.faq__answer {
  margin: 0;
  padding: 0 1rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
}

@media (min-width: 431px) {
  .faq__inner {
    max-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__icon,
  .faq__panel {
    transition: none;
  }
}

.faq.faq--instant .faq__icon,
.faq.faq--instant .faq__panel {
  transition: none;
}

/* --------------------------------------------------------------------------
   11 — Final Conversion (calm journey conclusion; dock/call suppression zone)
   -------------------------------------------------------------------------- */

.decide {
  background: var(--white);
  padding: 2.75rem 0 3.25rem;
  overflow-x: clip;
  max-width: 100%;
  border-top: 1px solid var(--line-soft);
}

.decide__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-width: 0;
}

.decide .chapter-head {
  margin-bottom: 1rem;
}

.decide .chapter-head__title {
  max-width: 16ch;
}

.decide__lead {
  margin: 0 0 1.35rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 36ch;
}

.decide__cta {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 431px) {
  .decide__inner {
    max-width: 480px;
  }
}

/* --------------------------------------------------------------------------
   04 — Gallery (swipe rail + lightbox)
   Scoped under .gallery / .gallery-lightbox only — never touches .hero.
   -------------------------------------------------------------------------- */

.gallery {
  background: var(--warm);
  /* Top padding 0 — .why already ends with 4.5rem, matching glance→why rhythm */
  padding: 0 0 4.5rem;
  overflow-x: clip;
  max-width: 100%;
}

.gallery__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.gallery__inner--meta {
  margin-top: 1rem;
}

.gallery__viewport {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  max-width: 100%;
}

/* Continuous auto-scroll writes sub-pixel scrollLeft increments every
   frame — mandatory (mobile) and proximity (desktop) snap both pull those
   back toward the nearest slide edge, so movement never accumulates. Snap
   is suspended only while the animation is actively running; manual
   scroll/keyboard/dot navigation always keeps snap (this class is removed
   the instant the user takes over). Applies at ALL widths. */
.gallery__viewport.is-auto-scrolling {
  scroll-snap-type: none;
}

.gallery__viewport::-webkit-scrollbar {
  display: none;
}

.gallery__track {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter);
  display: flex;
  gap: 0.75rem;
  width: max-content;
  max-width: none;
}

.gallery__slide {
  flex: 0 0 auto;
  /* ~86% of a 390px frame → large dominant card + clear peek of next */
  width: min(86vw, 340px);
  scroll-snap-align: start;
  min-width: 0;
}

.gallery__trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  border-radius: 16px;
}

.gallery__trigger:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.gallery__figure {
  margin: 0;
}

.gallery__frame {
  overflow: hidden;
  border-radius: 16px;
  background: var(--warm-2);
  aspect-ratio: 4 / 3;
  box-shadow: 0 14px 36px rgba(31, 30, 28, 0.1);
}

.gallery__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.gallery__cap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.7rem;
  padding: 0 0.15rem;
}

.gallery__cap-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
}

.gallery__cap-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--charcoal);
}

.gallery__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 1rem;
}

.gallery__dot {
  /* Visible dot stays 7px (unchanged design) — the button's own box is
     enlarged to a real tap target via the centered ::before below, since
     a 7x7px hit area is too small to reliably tap on mobile. */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gallery__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(10, 143, 136, 0.28);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.gallery__dot[aria-current="true"]::before {
  background: var(--teal);
  transform: scale(1.15);
}

.gallery__dot:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Lightbox — teal/neutral chrome (not gold conversion) */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 24, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 0;
  cursor: pointer;
}

.gallery-lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(100%, 720px);
  max-height: min(94dvh, 94vh);
  padding: 0.85rem 0.85rem 1rem;
  background: var(--warm);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  overflow: auto;
}

.gallery-lightbox__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

.gallery-lightbox__close:hover,
.gallery-lightbox__close:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  outline: none;
}

.gallery-lightbox__close:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.gallery-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.35rem;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--warm-2);
  touch-action: pan-y;
}

.gallery-lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(62dvh, 62vh);
  object-fit: contain;
}

.gallery-lightbox__chrome {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-right: 0.25rem;
}

.gallery-lightbox__cap {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-right: 2.5rem;
}

.gallery-lightbox__cap-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
}

.gallery-lightbox__cap-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--charcoal);
}

.gallery-lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.gallery-lightbox__prev,
.gallery-lightbox__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.gallery-lightbox__prev:hover,
.gallery-lightbox__next:hover,
.gallery-lightbox__prev:focus-visible,
.gallery-lightbox__next:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  outline: none;
}

.gallery-lightbox__prev:focus-visible,
.gallery-lightbox__next:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.gallery-lightbox__counter {
  margin: 0;
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

body.is-lightbox-open {
  overflow: hidden;
}

@media (min-width: 431px) {
  .gallery__inner {
    max-width: 480px;
  }

  .gallery__slide {
    width: min(86vw, 392px);
  }

  .gallery-lightbox__image {
    max-height: min(70dvh, 70vh);
  }
}

/* --------------------------------------------------------------------------
   05 — Configurations (product selector)
   Scoped under .configs only — never touches .hero / .gallery / .dock.
   -------------------------------------------------------------------------- */

.configs {
  background: linear-gradient(180deg, var(--warm) 0%, var(--white) 42%, var(--warm) 100%);
  /* Gallery already ends with 4.5rem — match glance→why continuity */
  padding: 0 0 4.5rem;
  overflow-x: clip;
  max-width: 100%;
}

.configs__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   Fit Finder — inline stepper (never a modal overlay: avoids stacking on
   top of the existing convert-modal/lightbox overlays, and keeps native
   focus order == visual order). No PII collected here.
   -------------------------------------------------------------------------- */

.fitfinder {
  margin: 0 0 2rem;
  padding: 1.35rem 1.25rem;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 28px rgba(31, 30, 28, 0.04);
}

.fitfinder__intro-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}

.fitfinder__intro-lead {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.fitfinder__progress {
  margin: 0 0 0.9rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.fitfinder__q-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--charcoal);
}

.fitfinder__q-title:focus-visible {
  outline: none;
}

.fitfinder__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fitfinder__opt {
  min-height: 42px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.fitfinder__opt:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.fitfinder__opt:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.fitfinder__back {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.fitfinder__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}

.fitfinder__eyebrow:focus-visible {
  outline: none;
}

.fitfinder__result-card {
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
  border-radius: 12px;
  background: var(--warm);
  border: 1px solid var(--line-soft);
}

.fitfinder__result-family {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--charcoal);
}

.fitfinder__result-area,
.fitfinder__result-price {
  margin: 0 0 0.2rem;
  font-size: 0.88rem;
  color: var(--ink);
}

.fitfinder__star {
  color: var(--muted);
}

.fitfinder__result-note {
  margin: 0.5rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted);
}

.fitfinder__result-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.fitfinder__cta-lead {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--ink);
}

.fitfinder__restart {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .fitfinder {
    padding: 1.75rem 2rem;
  }

  .fitfinder__result-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .fitfinder__cta-lead {
    margin: 0;
  }
}

.configs__selector {
  display: flex;
  align-items: stretch;
  gap: 0.28rem;
  padding: 0.28rem;
  margin: 0 0 1.15rem;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: 0 14px 36px rgba(31, 30, 28, 0.08);
  min-width: 0;
}

.configs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  flex: 0.72 1 0;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 0.55rem 0.4rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    flex-grow 0.35s var(--ease),
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.configs__tab:hover {
  color: var(--teal);
}

.configs__tab:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.configs__tab[aria-selected="true"] {
  flex-grow: 1.55;
  background: var(--teal);
  color: var(--white);
  box-shadow: 0 10px 22px rgba(10, 143, 136, 0.28);
}

.configs__tab-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.configs__tab[aria-selected="false"] .configs__tab-name {
  font-size: 0.8rem;
  font-weight: 600;
}

.configs__tab-meta {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease), opacity 0.25s var(--ease);
}

.configs__tab[aria-selected="true"] .configs__tab-meta {
  max-height: 1.4rem;
  opacity: 0.92;
}

.configs__stage {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding: 1.2rem 1.05rem 1.25rem;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: 0 14px 36px rgba(31, 30, 28, 0.08);
  min-width: 0;
  transition: opacity 0.28s var(--ease), transform 0.32s var(--ease);
}

.configs__stage.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.configs__identity {
  min-width: 0;
}

.configs__bhk {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.configs__name {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 6vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--charcoal);
}

.configs__units {
  margin: 0 0 0.85rem;
  min-width: 0;
}

.configs__units-label {
  margin: 0 0 0.4rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.configs__unit-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0.1rem 0.05rem 0.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.configs__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  flex: 0 0 auto;
  min-width: 3.35rem;
  min-height: 44px;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--warm);
  color: var(--charcoal);
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.configs__unit:hover {
  border-color: rgba(10, 143, 136, 0.35);
  color: var(--teal);
}

.configs__unit:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.configs__unit.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
  box-shadow: 0 8px 18px rgba(10, 143, 136, 0.22);
}

.configs__unit-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.configs__unit-sba {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.15;
  opacity: 0.78;
}

.configs__unit.is-active .configs__unit-sba {
  opacity: 0.9;
}

.configs__mirror {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.configs__mirror[hidden] {
  display: none !important;
}

.configs__mirror-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Compact segmented control — plan orientation only (same SBA as B2). */
.configs__mirror-group {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  min-width: 11.5rem;
  max-width: 100%;
  padding: 0;
  border-radius: 8px;
  background: rgba(31, 30, 28, 0.04);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.configs__mirror-opt {
  margin: 0;
  min-height: 34px;
  padding: 0.32rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    font-weight 0.18s var(--ease);
}

.configs__mirror-opt + .configs__mirror-opt {
  border-left: 1px solid var(--line-soft);
}

.configs__mirror-opt:hover:not(.is-active) {
  color: var(--charcoal);
  background: rgba(255, 255, 255, 0.45);
}

.configs__mirror-opt:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
  z-index: 1;
}

.configs__mirror-opt.is-active {
  background: var(--white);
  color: var(--charcoal);
  font-weight: 700;
  box-shadow:
    inset 0 0 0 1px rgba(10, 143, 136, 0.35),
    0 1px 2px rgba(31, 30, 28, 0.06);
}

.configs__sba {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.configs__sba-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.configs__sba-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  overflow-wrap: break-word;
}

.configs__price {
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.15rem;
}

.configs__price-label {
  flex-basis: 100%;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.configs__price-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}

.configs__price-star {
  font-size: 0.55em;
  color: var(--gold);
  margin-left: 1px;
}

.configs__price-from {
  font-size: 0.75rem;
  color: var(--muted);
}

.configs__price-disclosure {
  margin: 0.9rem 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--muted);
}

.configs__source-note {
  margin: 0.4rem 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Behaviour-triggered contextual nudge — revealed by JS only after genuine
   dwell on a deliberately-chosen (non-default) configuration. Inline, not a
   second fixed/floating CTA competing with the existing dock. */
.configs__nudge[hidden] {
  display: none;
}

.configs__nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--teal-soft);
  border: 1px solid var(--line);
}

.configs__nudge-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
}

.configs__nudge-cta {
  flex-shrink: 0;
  min-height: 38px;
  padding: 0.45rem 0.95rem;
  font-size: 0.78rem;
}

.configs__plan {
  margin: 0;
  min-width: 0;
  width: 100%;
}

.configs__plan-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  border-radius: 16px;
}

.configs__plan-trigger:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Large inspectable plan — sole inspection surface after Floor Plans merge.
   Height follows each plan's native aspect (Premia D1 is taller). */
.configs__plan-frame {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: 0 18px 44px rgba(31, 30, 28, 0.1);
}

.configs__plan-frame picture {
  display: block;
  width: 100%;
}

  .configs__plan-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  background: var(--white);
}

.configs__plan-hint {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}

.configs__plan-cap {
  margin: 0.35rem 0 0;
  padding: 0 0.1rem;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

.configs__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.configs__actions-primary {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.configs__action {
  align-self: stretch;
  width: 100%;
}

.configs__action--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 0.35rem 0.15rem;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-color: rgba(10, 143, 136, 0.35);
  text-underline-offset: 0.22em;
  cursor: pointer;
  box-shadow: none;
}

.configs__action--secondary:hover,
.configs__action--secondary:focus-visible {
  color: #087a74;
  text-decoration-color: var(--teal);
  outline: none;
}

.configs__action--secondary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (min-width: 431px) {
  .configs__inner {
    max-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .configs__tab,
  .configs__tab-meta,
  .configs__stage,
  .configs__unit,
  .configs__mirror-opt {
    transition: none !important;
  }

  .configs__stage.is-swapping {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Current Buyer Benefits — premium benefit pass / privilege voucher
   Deep charcoal pass · gold foil rules · ticket perforation · ₹ watermark
   -------------------------------------------------------------------------- */

.benefits {
  --benefits-notch: 0.7rem;
  background: var(--warm);
  padding: 0 0 2.75rem;
  overflow-x: clip;
  max-width: 100%;
}

.benefits__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0.85rem var(--gutter) 0;
  min-width: 0;
}

.benefits__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border-radius: 14px;
  /* Clip outer half of edge notches into punch-holes; keep corner radius clean */
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(155deg, rgba(10, 143, 136, 0.16) 0%, transparent 40%),
    linear-gradient(180deg, #252420 0%, var(--charcoal) 52%, #181716 100%);
  border: 1px solid rgba(213, 168, 63, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(10, 143, 136, 0.1),
    0 14px 36px rgba(31, 30, 28, 0.2);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.benefits__card:hover {
  border-color: rgba(213, 168, 63, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(10, 143, 136, 0.12),
    0 16px 40px rgba(31, 30, 28, 0.24);
}

/* Fine corner privilege mark — geometric, not ornate */
.benefits__mark {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(213, 168, 63, 0.55);
  border-right: 1px solid rgba(213, 168, 63, 0.55);
  z-index: 3;
  pointer-events: none;
}

.benefits__mark::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-top: 1px solid rgba(10, 143, 136, 0.45);
  border-right: 1px solid rgba(10, 143, 136, 0.45);
}

.benefits__main,
.benefits__stub {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.benefits__main {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.35rem 1.2rem 1.25rem;
}

.benefits__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.benefits__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 4.2vw, 1.2rem);
  line-height: 1.22;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--white);
}

.benefits__title-line {
  display: block;
}

.benefits__copy {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(250, 248, 244, 0.72);
  max-width: 38ch;
}

.benefits__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.benefits__note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(250, 248, 244, 0.88);
  max-width: 36ch;
}

.benefits__cta {
  width: auto;
  max-width: 100%;
  min-height: 48px;
  padding: 0.7rem 1.25rem;
  font-size: 0.82rem;
  box-shadow: 0 6px 18px rgba(213, 168, 63, 0.28);
  transition: box-shadow 0.3s var(--ease);
}

.benefits__cta:hover,
.benefits__cta:focus-visible {
  box-shadow: 0 8px 22px rgba(213, 168, 63, 0.36);
}

/* ---- Pass stub (categories + ₹ watermark) ---- */
.benefits__stub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem 1.2rem 1.4rem;
  /* visible so ticket notches can sit on the tear axis outside the stub box */
  overflow: visible;
  background: linear-gradient(180deg, rgba(10, 143, 136, 0.08) 0%, transparent 55%);
}

/* Horizontal perforated tear line (mobile vertical pass) */
.benefits__stub::before {
  content: "";
  position: absolute;
  left: var(--benefits-notch);
  right: var(--benefits-notch);
  top: 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(213, 168, 63, 0.55) 0 3px,
    transparent 3px 9px
  );
  pointer-events: none;
  z-index: 2;
}

/* Ticket edge notches — page-bg circles on the tear axis */
.benefits__notch {
  position: absolute;
  z-index: 4;
  width: calc(var(--benefits-notch) * 2);
  height: calc(var(--benefits-notch) * 2);
  border-radius: 50%;
  background: var(--warm);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(213, 168, 63, 0.28);
}

.benefits__notch--start {
  left: calc(var(--benefits-notch) * -1);
  top: calc(var(--benefits-notch) * -1);
}

.benefits__notch--end {
  right: calc(var(--benefits-notch) * -1);
  top: calc(var(--benefits-notch) * -1);
}

/* Bare ₹ glyph — decorative watermark only, never with an amount */
.benefits__rupee {
  position: absolute;
  right: 0.05em;
  bottom: -0.22em;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5.5rem, 28vw, 7rem);
  line-height: 0.8;
  color: rgba(213, 168, 63, 0.07);
  pointer-events: none;
  user-select: none;
}

.benefits__pass-id {
  position: relative;
  z-index: 1;
  margin: 0 0 0.65rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(213, 168, 63, 0.7);
}

/* Thin warm-gold foil rule under the pass micro-detail */
.benefits__foil {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 1px;
  margin: 0 0 0.85rem;
  background: linear-gradient(
    90deg,
    rgba(213, 168, 63, 0.55) 0%,
    rgba(213, 168, 63, 0.18) 55%,
    transparent 100%
  );
}

.benefits__secondary-label {
  position: relative;
  z-index: 1;
  margin: 0 0 0.55rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(213, 168, 63, 0.75);
}

.benefits__categories {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.benefits__tag {
  margin: 0;
  padding: 0.32rem 0.65rem;
  border: 1px solid rgba(213, 168, 63, 0.32);
  border-radius: 999px;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: rgba(250, 248, 244, 0.78);
  white-space: nowrap;
}

.benefits__qualify {
  position: relative;
  z-index: 1;
  margin: 0.55rem 0 0;
  font-size: 0.68rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgba(250, 248, 244, 0.42);
}

@media (min-width: 431px) {
  .benefits__inner {
    max-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefits__card,
  .benefits__cta {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   06 — Amenities (cinematic opening + moving rail)
   Scoped under .amenities only — never touches .hero / .gallery / .configs.
   -------------------------------------------------------------------------- */

.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;
}

.amenities {
  background: var(--warm);
  padding: 0 0 4.5rem;
  overflow-x: clip;
  max-width: 100%;
}

.amenities__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.amenities__cinematic {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 1.75rem;
  overflow: hidden;
  max-width: 100%;
}

.amenities__moment {
  position: relative;
  margin: 0;
  min-height: min(78svh, 680px);
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}

.amenities__moment-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.amenities__moment-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform: scale(1.08);
  opacity: 0.92;
  transition:
    transform 1.35s var(--ease),
    opacity 1.1s var(--ease);
  will-change: transform;
}

.amenities__moment.is-inview .amenities__moment-media img {
  transform: scale(1);
  opacity: 1;
}

.amenities__moment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(12, 18, 24, 0.18) 0%,
      rgba(12, 18, 24, 0.08) 38%,
      rgba(12, 18, 24, 0.55) 72%,
      rgba(12, 18, 24, 0.82) 100%
    );
}

.amenities__moment-type {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  /* Clear the persistent dock so layered facts stay fully readable */
  padding: 2.4rem var(--gutter) calc(1.35rem + var(--dock-h, 0px));
  color: var(--warm);
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.9s var(--ease) 0.12s,
    transform 1s var(--ease) 0.12s;
}

.amenities__moment.is-inview .amenities__moment-type {
  opacity: 1;
  transform: translateY(0);
}

.amenities__moment-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.78);
}

.amenities__moment-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  line-height: 0.95;
}

.amenities__moment-fact-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.55rem, 11vw, 3.4rem);
  letter-spacing: -0.03em;
  color: var(--warm);
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.amenities__moment-fact-unit {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.92);
}

.amenities__moment-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 6.2vw, 2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--warm);
}

.amenities__moment-name--stack {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  font-size: clamp(1.7rem, 7vw, 2.25rem);
  letter-spacing: 0.03em;
}

.amenities__moment--pool .amenities__moment-media img {
  object-position: center 40%;
}

.amenities__rail-block {
  margin: 0 0 2rem;
  overflow-x: clip;
  max-width: 100%;
}

.amenities__rail-eyebrow {
  max-width: 430px;
  margin: 0 auto 0.95rem;
  padding: 0 var(--gutter);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.amenities__rail {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  padding: 0.55rem 0 0.7rem;
  outline: none;
}

.amenities__rail:focus-visible {
  box-shadow: inset 0 0 0 2px var(--teal);
}

.amenities__rail-track {
  display: flex;
  width: max-content;
  animation: amenities-rail-marquee 72s linear infinite;
  will-change: transform;
}

.amenities__rail:hover .amenities__rail-track,
.amenities__rail:focus-within .amenities__rail-track {
  animation-play-state: paused;
}

.amenities__rail-set {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  /* Trailing pad = item gap so each half is identical → -50% loops cleanly */
  padding: 0 2.75rem 0 0;
  gap: 2.75rem;
  flex: 0 0 auto;
}

.amenities__rail-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 0;
}

.amenities__rail-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
  /* Official gray SVGs → CHG teal */
  filter: invert(43%) sepia(42%) saturate(720%) hue-rotate(131deg) brightness(93%) contrast(92%);
}

.amenities__rail-label {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}

@keyframes amenities-rail-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Swipeable static rail — hidden unless reduced motion */
.amenities__rail-static {
  display: none;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  max-width: 100%;
  outline: none;
}

.amenities__rail-static::-webkit-scrollbar {
  display: none;
}

.amenities__rail-static:focus-visible {
  box-shadow: inset 0 0 0 2px var(--teal);
}

.amenities__rail-static-track {
  list-style: none;
  margin: 0;
  padding: 0.55rem var(--gutter) 0.7rem;
  display: flex;
  align-items: center;
  gap: 2.1rem;
  width: max-content;
  max-width: none;
}

.amenities__rail-static-track .amenities__rail-item {
  scroll-snap-align: start;
}

.amenities__cta {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.95rem;
}

.amenities__cta-copy {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 28ch;
  font-weight: 400;
}

.amenities__cta-btn {
  width: 100%;
}

@media (min-width: 431px) {
  .amenities__inner,
  .amenities__rail-eyebrow,
  .amenities__cta {
    max-width: 480px;
  }

  .amenities__moment {
    min-height: min(72svh, 720px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .amenities__moment-media img,
  .amenities__moment-type {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .amenities__rail {
    display: none;
  }

  .amenities__rail-track {
    animation: none !important;
  }

  .amenities__rail-static {
    display: block;
  }

  #amenities-list {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Google Ads sitelink anchors — scroll-margin only, so a direct #anchor
   landing isn't hidden behind the sticky nav. --nav-h already accounts for
   both breakpoints (52px mobile/tablet, 76px at 1024px+) — no new media
   query needed. No layout/visual change: this affects only where the
   browser stops scrolling, never element position/size/appearance.
   -------------------------------------------------------------------------- */

#configs,
#price-details,
#brochure,
#amenities,
#location,
#site-visit {
  scroll-margin-top: var(--nav-h);
}

/* --------------------------------------------------------------------------
   07 — Location (clarity / orientation — real Google Maps embed)
   Scoped under .location only — never touches approved chapters.
   -------------------------------------------------------------------------- */

.location {
  background: var(--warm);
  padding: 0.5rem 0 4.5rem;
  overflow-x: clip;
  max-width: 100%;
}

.location__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-width: 0;
}

.location__place {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 32ch;
}

.location .chapter-head {
  margin-bottom: 1.35rem;
}

.location__map {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--warm-2);
  box-shadow: 0 18px 40px rgba(31, 30, 28, 0.1);
  /* Fixed map surface — page scroll continues when touch starts outside */
  height: 310px;
}

.location__map-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  border: 0;
  /* Keep Google's own chrome/tiles untouched */
}

.location__connectivity {
  margin: 1.35rem 0 0;
}

.location__approx {
  margin: 0 0 0.65rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.location__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

.location__fact {
  display: grid;
  grid-template-columns: 4.6rem auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.45rem 0.55rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}

.location__fact-time {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
  white-space: nowrap;
}

.location__fact-sep {
  color: var(--line);
  font-weight: 400;
  line-height: 1;
}

.location__fact-place {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--charcoal);
  overflow-wrap: break-word;
  min-width: 0;
}

.location__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.45rem;
}

/* Floating utilities (call/WhatsApp/dock) are pure viewport overlays — they
   must never change document/content width. Page content keeps its full
   intended width at all times and may scroll underneath a fixed utility;
   that's expected, not a bug. (Previously this block reserved a right-side
   corridor via width calc() while the dock was visible — removed.) */

.location__directions {
  width: 100%;
}

.location__visit {
  align-self: stretch;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  font-size: 0.84rem;
  font-weight: 600;
  background: rgba(255, 252, 247, 0.92);
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: none;
}

.location__directions:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.location__visit:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

@media (min-width: 431px) {
  .location__inner {
    max-width: 480px;
  }

  .location__map {
    height: 330px;
  }
}

/* --------------------------------------------------------------------------
   05 — Official Walkthrough (YouTube facade — no load until click)
   Scoped under .walkthrough only — never touches approved chapters.
   -------------------------------------------------------------------------- */

.walkthrough {
  background: var(--warm);
  padding: 0.25rem 0 3rem;
  overflow-x: clip;
  max-width: 100%;
}

.walkthrough__inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-width: 0;
}

.walkthrough .chapter-head {
  margin-bottom: 1rem;
}

.walkthrough__lead {
  margin: 0.65rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 34ch;
}

.walkthrough__media {
  margin: 0;
  min-width: 0;
}

.walkthrough__surface {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--charcoal);
  min-width: 0;
}

.walkthrough__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.walkthrough__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(12, 18, 24, 0.22);
  color: var(--white);
  cursor: pointer;
  transition: background 0.28s var(--ease);
}

.walkthrough__play:hover,
.walkthrough__play:focus-visible {
  background: rgba(12, 18, 24, 0.32);
  outline: none;
}

.walkthrough__play:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -4px;
}

.walkthrough__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.4rem, 14vw, 4.25rem);
  height: clamp(3.4rem, 14vw, 4.25rem);
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 12px 32px rgba(10, 143, 136, 0.38);
  transition: transform 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.walkthrough__play-icon svg {
  width: 1.05rem;
  height: auto;
  margin-left: 0.18rem;
}

.walkthrough__play:hover .walkthrough__play-icon,
.walkthrough__play:focus-visible .walkthrough__play-icon {
  background: #087a74;
  transform: scale(1.04);
  box-shadow: 0 14px 36px rgba(10, 143, 136, 0.45);
}

.walkthrough__embed {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  border: 0;
}

.walkthrough__surface.is-playing .walkthrough__poster,
.walkthrough__surface.is-playing .walkthrough__play {
  display: none;
}

.walkthrough__attr {
  margin: 0.65rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}

.walkthrough__outro {
  margin: 1.15rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 32ch;
}

@media (min-width: 431px) {
  .walkthrough__inner {
    max-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .walkthrough__play,
  .walkthrough__play-icon {
    transition: none !important;
  }

  .walkthrough__play:hover .walkthrough__play-icon,
  .walkthrough__play:focus-visible .walkthrough__play-icon {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Conversion modal (reusable intents)
   -------------------------------------------------------------------------- */

.convert-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.convert-modal[hidden] {
  display: none;
}

.convert-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 24, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 0;
  cursor: pointer;
}

.convert-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  max-height: min(92dvh, 92vh);
  margin: 0 auto;
  padding: 1.35rem 1.15rem 1.25rem;
  background: var(--warm);
  border-radius: 18px 18px 14px 14px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.32);
  overflow: auto;
  overflow-x: hidden;
  transform: translateY(0);
  transition: transform 0.32s var(--ease), opacity 0.28s var(--ease);
}

.convert-modal.is-open .convert-modal__panel {
  transform: translateY(0);
  opacity: 1;
}

.convert-modal__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

.convert-modal__close:hover,
.convert-modal__close:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  outline: none;
}

.convert-modal__close:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.convert-modal__view {
  min-width: 0;
  padding-right: 0.15rem;
}

.convert-modal__title {
  margin: 0 2.4rem 0.55rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 5.5vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  overflow-wrap: break-word;
}

.convert-modal__lead {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
  max-width: 36ch;
}

.convert-modal__lead[hidden] {
  display: none;
}

.convert-modal__context {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted);
}

.convert-modal__context[hidden] {
  display: none;
}

[data-modal-form-mount] {
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
}

.convert-modal__form-loading,
.convert-modal__form-error {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

.convert-modal__form-error {
  color: #9b3b3b;
}

.convert-modal__brochure-unlock {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #e2e2e2);
  text-align: center;
}

.convert-modal__brochure-msg {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
}

.convert-modal__brochure-btn {
  display: inline-block;
}

/* HubSpot Forms v2 — scoped to modal mount only (no global .hs-* leakage) */
[data-modal-form-mount] .hs-form,
[data-modal-form-mount] form.hs-form {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-body);
}

[data-modal-form-mount] .hs-form fieldset {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

[data-modal-form-mount] .hs-form .hs-form-field,
[data-modal-form-mount] .hs-form .field {
  margin-bottom: 0.85rem;
  float: none;
  width: 100%;
  max-width: 100%;
}

[data-modal-form-mount] .hs-form label:not(.hs-error-msg) {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.35rem;
}

[data-modal-form-mount] .hs-form .hs-form-required {
  margin-left: 0.15em;
  color: var(--teal);
}

[data-modal-form-mount] .hs-form .input {
  margin-right: 0 !important;
  width: 100%;
  max-width: 100%;
}

[data-modal-form-mount] .hs-form .hs-input,
[data-modal-form-mount] .hs-form input.hs-input,
[data-modal-form-mount] .hs-form textarea.hs-input,
[data-modal-form-mount] .hs-form select.hs-input {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 1rem;
  line-height: 1.35;
  appearance: none;
  -webkit-appearance: none;
}

[data-modal-form-mount] .hs-form .hs-input:focus,
[data-modal-form-mount] .hs-form .hs-input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-color: var(--teal);
}

[data-modal-form-mount] .hs-form .hs-input.error,
[data-modal-form-mount] .hs-form .hs-form-field.error .hs-input,
[data-modal-form-mount] .hs-form .field.error .hs-input {
  border-color: #c87872;
}

[data-modal-form-mount] .hs-form ul.hs-error-msgs,
[data-modal-form-mount] .hs-form .hs-error-msgs {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

[data-modal-form-mount] .hs-form .hs-error-msgs label,
[data-modal-form-mount] .hs-form label.hs-error-msg {
  display: block;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: #9b3b3b;
}

[data-modal-form-mount] .hs-form .hs-submit,
[data-modal-form-mount] .hs-form .actions {
  margin: 0.35rem 0 0;
  padding: 0;
}

[data-modal-form-mount] .hs-form .hs-button,
[data-modal-form-mount] .hs-form input[type="submit"],
[data-modal-form-mount] .hs-form .hs-submit .hs-button {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
}

[data-modal-form-mount] .hs-form .legal-consent-container,
[data-modal-form-mount] .hs-form .hs-richtext {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Iframe shell (v2 styled forms) — keep full width inside the panel */
[data-modal-form-mount] iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
  margin: 0;
}

body.is-modal-open {
  overflow: hidden;
}

@media (min-width: 480px) {
  .convert-modal {
    align-items: center;
  }

  .convert-modal__panel {
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .convert-modal__panel {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Persistent dock CTA
   -------------------------------------------------------------------------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0.55rem var(--gutter) calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(250, 248, 244, 0.92) 28%);
  pointer-events: none;
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
}

.dock:not([hidden]) {
  transform: translateY(0);
}

.dock[hidden] {
  display: flex !important;
  transform: translateY(110%);
  visibility: hidden;
}

.dock.is-visible {
  visibility: visible;
  transform: translateY(0);
}

.dock__cta {
  /* Only tappable while the dock is genuinely shown — without this, the
     button stayed pointer-events:auto through the whole 420ms slide-out
     (is-visible removed, [hidden] not yet set), so a tap during that
     window could still register on an invisible/departing control. */
  pointer-events: none;
  width: min(100%, 390px);
  min-height: 46px;
  padding: 0.7rem 1.25rem;
  font-size: 0.82rem;
}

.dock.is-visible .dock__cta {
  pointer-events: auto;
}

body.has-dock {
  --dock-h: calc(58px + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   Launch-moment toast — one-time, dismissible, non-blocking. Vertically
   centred in the viewport on both breakpoints (never bottom-anchored) so it
   can never sit behind the dock or collide with the consent banner, and is
   always shown/hidden by JS only after the consent banner is no longer
   visible as a second layer of protection against overlap.
   -------------------------------------------------------------------------- */

/* A genuinely centered card, not an edge-attached toast — sits at the
   viewport's vertical center on every breakpoint (desktop is centered
   horizontally too; see the 1024+ override below). Distinct from the hero's
   own "New Launch" badge (item 4 of the spec): this is the floating
   availability prompt, shown once, persisting until explicit dismiss or
   click-through — see initLaunchToast() in app.js for the reveal/dismiss
   logic (no more benefitsObserver auto-hide). */
.launch-toast {
  position: fixed;
  top: 50%;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 45;
  max-width: 360px;
  margin: 0 auto;
  padding: 1.5rem 1.4rem 1.5rem;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: 0 28px 72px rgba(31, 30, 28, 0.24);
  transform: translateY(-50%) translateY(8px);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  pointer-events: none;
}

.launch-toast.is-visible {
  transform: translateY(-50%);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .launch-toast {
    transition: none;
  }
}

.launch-toast__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(184, 144, 46, 0.4);
  background: rgba(213, 168, 63, 0.08);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.launch-toast__eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--teal);
  flex-shrink: 0;
}

.launch-toast__project {
  margin: 0 0 0.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--charcoal);
}

.launch-toast__text {
  margin: 0 0 1.1rem;
  padding-right: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.launch-toast__cta {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  font-size: 0.85rem;
}

.launch-toast__dismiss {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--warm);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.launch-toast__dismiss:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Desktop: truly centered in the viewport (was right:2rem edge-attached —
   the "awkward toast hanging off the right side" this round removes). */
@media (min-width: 1024px) {
  .launch-toast {
    left: 50%;
    right: auto;
    width: 380px;
    margin: 0;
    transform: translate(-50%, -50%) translateY(8px);
  }

  .launch-toast.is-visible {
    transform: translate(-50%, -50%);
  }
}

/* --------------------------------------------------------------------------
   Floating utilities — mid-right Call + WhatsApp stack; shared dock visibility
   -------------------------------------------------------------------------- */

.float-utils {
  position: fixed;
  /* Upper-mid right — clears Google Maps bottom-right chrome with the
     taller Call+WhatsApp stack, and stays above the dock band. */
  top: 32%;
  right: max(0.7rem, env(safe-area-inset-right, 0px));
  bottom: auto;
  z-index: 49;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(6px) scale(0.96);
  transition:
    opacity 0.35s var(--ease),
    transform 0.4s var(--ease),
    visibility 0.4s,
    top 0.4s var(--ease);
  visibility: hidden;
}

.float-utils[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

.float-utils.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
  pointer-events: auto;
}

.float-utils__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  width: auto;
  min-width: 48px;
  min-height: 48px;
  padding: 0.5rem 0.55rem;
  margin: 0;
  border-radius: 12px;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font);
  box-shadow: 0 8px 22px rgba(12, 18, 24, 0.22);
  pointer-events: none;
}

.float-utils.is-visible .float-utils__btn {
  pointer-events: auto;
}

.float-utils__btn--request {
  display: none;
  background: var(--gold);
  color: var(--charcoal);
  box-shadow: 0 8px 22px rgba(213, 168, 63, 0.34);
  border: 0;
  cursor: pointer;
  min-width: 5.5rem;
  max-width: 6.25rem;
  padding: 0.55rem 0.5rem;
  text-align: center;
}

.float-utils__btn--request:hover,
.float-utils__btn--request:focus-visible {
  background: var(--gold-deep);
  outline: none;
}

.float-utils__btn--request .float-utils__label {
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

.float-utils__btn--call {
  /* Darker than --teal specifically for the small 0.52rem label text —
     white-on-var(--teal) computes to 3.96:1 (fails 4.5:1 for normal-size
     text); this shade computes to ~5.19:1. */
  background: #087a74;
  box-shadow: 0 8px 22px rgba(10, 143, 136, 0.28);
}

.float-utils__btn--call:hover,
.float-utils__btn--call:focus-visible {
  background: #06615c;
  outline: none;
}

.float-utils__btn--wa {
  /* White label text on the bright WhatsApp mark (#25d366) computes to only
     ~1.98:1 (fails 4.5:1) — so the brand green lives on the small icon badge
     below instead, where it reads as a logo mark rather than body text, and
     the button itself uses the same dark neutral as the rest of the CHG
     system (white-on-charcoal computes to ~16.7:1). */
  background: var(--charcoal);
  box-shadow: 0 8px 22px rgba(31, 30, 28, 0.32);
}

.float-utils__btn--wa:hover,
.float-utils__btn--wa:focus-visible {
  background: #0f0e0d;
  outline: none;
}

.float-utils__btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.float-utils__btn--wa:focus-visible {
  outline-color: var(--charcoal);
}

.float-utils__icon {
  display: block;
  flex-shrink: 0;
}

.float-utils__icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
}

.float-utils__label {
  font-family: var(--font);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 2rem var(--gutter) 2rem;
  border-top: 1px solid var(--line-soft);
  background: var(--white);
}

.site-footer__disclaimer {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}

.site-footer__disclaimer-heading {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.site-footer__disclaimer-text {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--muted);
}

.site-footer__identity {
  max-width: 480px;
  margin: 1.35rem auto 0;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}

.site-footer__authorisation {
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--teal);
}

.site-footer__brand {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.site-footer__tagline {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--charcoal);
}

.site-footer__initiative,
.site-footer__operator,
.site-footer__agent-rera {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}

.site-footer__agent-rera {
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

.site-footer__project-rera {
  max-width: 480px;
  margin: 1.15rem auto 0;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  line-height: 1.45;
  color: var(--muted);
}

.site-footer__meta {
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: 430px;
}

/* --------------------------------------------------------------------------
   Calm reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--ease), transform 0.7s var(--ease);
}

[data-reveal].is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Reduced motion — one complete static day composition with all facts
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__track {
    height: auto;
  }

  .hero__sentinel {
    display: none;
  }

  .hero__sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    --hero-p: 0 !important;
  }

  .hero__canvas {
    min-height: calc(100svh - var(--nav-h));
    padding-bottom: 1.5rem;
    gap: 0.85rem;
  }

  .hero__stage {
    overflow: visible;
    min-height: 0;
  }

  .hero__render {
    transform: none !important;
    height: auto;
  }

  .hero__render-stack {
    max-height: none;
    height: auto;
    width: 112%;
    max-width: 112%;
  }

  .hero__render-layer--day {
    opacity: 1 !important;
  }

  .hero__render-layer--night {
    opacity: 0 !important;
  }

  .hero__sky-layer--day {
    opacity: 1 !important;
  }

  .hero__sky-layer--dusk,
  .hero__sky-layer--night {
    opacity: 0 !important;
  }

  .hero__fact {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: none;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    margin-bottom: 0.45rem;
    text-align: left !important;
    text-shadow: none;
  }

  .hero__facts {
    position: relative;
    inset: auto;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.75rem;
    pointer-events: auto;
  }

  .hero__leaders {
    display: none;
  }

  .hero__lede,
  .hero__footer .btn {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero__render,
  .hero__fact,
  .hero__leader,
  [data-reveal],
  .dock,
  .float-utils,
  .gallery__dot {
    transition: none !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .dock {
    transform: none;
  }

  .float-utils {
    transform: translateY(-50%);
  }

  .gallery__dot[aria-current="true"] {
    transform: none;
  }
}

/* Desktop / wider — keep composition centered, no overflow */
@media (min-width: 431px) {
  .hero__canvas,
  .glance__inner,
  .why__inner {
    max-width: 480px;
  }

  .hero__title {
    font-size: clamp(2.35rem, 4.8vw, 2.9rem);
  }

  .hero__render-stack {
    max-width: 140%;
  }

  .hero__fact {
    max-width: 9.5rem;
  }

  .hero__fact-value {
    font-size: 0.74rem;
  }
}

/* ==========================================================================
   Desktop / tablet — single structural breakpoint (min-width: 1024px)
   Fluid clamp/min sizing scales 1024 → 1280 → 1440+. Mobile rules untouched.
   ========================================================================== */

@media (min-width: 1024px) {
  :root {
    --gutter: clamp(2rem, 3.5vw, 3rem);
    --nav-row: 76px;
    --nav-h: var(--nav-row);
    /* Shared content measure — all textual chapters snap here */
    --measure-wide: min(72rem, calc(100vw - (2 * var(--gutter))));
    --measure-reading: min(38rem, 62ch);
  }

  /* ---- 10. Global content grid helpers ---- */
  .site-nav__inner,
  .glance__inner,
  .why__inner,
  .gallery__inner,
  .walkthrough__inner,
  .configs__inner,
  .benefits__inner,
  .amenities__inner,
  .amenities__rail-eyebrow,
  .amenities__cta,
  .location__inner,
  .faq__inner,
  .decide__inner {
    max-width: var(--measure-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* ---- 1. Header — intentional 1440 presence ---- */
  .site-nav__inner {
    height: var(--nav-row);
    gap: 1.75rem;
  }

  .site-nav__badge img {
    height: 28px;
  }

  .site-nav__cta {
    min-height: 48px;
    padding: 0.65rem 1.45rem;
    font-size: 0.9rem;
    letter-spacing: 0.015em;
  }

  /* ---- 2. Hero — image-as-canvas (full-bleed cover), copy on top ---- */
  .hero {
    background: var(--night);
  }

  .hero__track {
    /* Restores the day->night scroll-jack's original 1000px buffer for
       desktop specifically — the base rule above was shortened to 400px
       for the mobile "too much scrolling before night" fix this override
       exists for; desktop wasn't part of that request, so its own pacing
       stays exactly as it was rather than changing as a side effect of a
       value the two breakpoints happened to share. */
    height: calc(100svh - var(--nav-h) + 1000px);
  }

  .hero__sticky {
    /* Tighter first fold — full vertical cover crop still clears towers/pool/clubhouse */
    height: clamp(600px, calc(100svh - var(--nav-h)), 700px);
  }

  .hero__sky {
    /* Desktop assets carry their own sky — hide page-tone washes */
    display: none;
  }

  .hero__canvas {
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    grid-template-areas: none;
  }

  .hero__stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    display: block;
    grid-area: auto;
  }

  .hero__render {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 42% 48%;
  }

  .hero__render-stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    container-type: size;
    container-name: hero-render;
  }

  /* Soft left scrim — reinforces baked-in dark zone for copy contrast */
  .hero__render-stack::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(12, 18, 24, 0.62) 0%,
      rgba(12, 18, 24, 0.34) 26%,
      rgba(12, 18, 24, 0.1) 44%,
      transparent 58%
    );
  }

  .hero__render-layer img {
    object-fit: cover;
    object-position: 32% center;
    filter: none;
  }

  .hero__leaders--mobile {
    display: none;
  }

  .hero__leaders--desktop {
    display: block;
  }

  /* Type + price/lede/CTA as one optically-centered left cluster.
     translateY(-48%): near-center with a light downward settle so the
     group doesn't read top-pinned against the heavier lower architecture. */
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    z-index: 5;
    left: max(var(--gutter), calc((100vw - var(--measure-wide)) / 2));
    top: 50%;
    transform: translateY(-48%);
    max-width: min(28rem, 40%);
    /* Preserves the prior absolute-top breath between place and price */
    gap: clamp(2.75rem, 4vh, 4.25rem);
    pointer-events: none;
  }

  .hero__type {
    position: relative;
    z-index: auto;
    left: auto;
    top: auto;
    max-width: none;
    width: 100%;
    grid-area: auto;
    pointer-events: none;
  }

  .hero__footer {
    position: relative;
    z-index: auto;
    left: auto;
    top: auto;
    bottom: auto;
    max-width: none;
    width: 100%;
    grid-area: auto;
    gap: clamp(0.55rem, 1.1vw, 0.85rem);
    pointer-events: none;
  }

  .hero__footer .btn {
    pointer-events: auto;
  }

  /* Always over dark image zone — reuse existing dusk/night warm-light tones */
  .hero__title,
  .hero__sticky[data-tone="day"] .hero__title,
  .hero__sticky[data-tone="dusk"] .hero__title,
  .hero__sticky[data-tone="night"] .hero__title {
    color: #f4f1ea;
    font-size: clamp(2.75rem, 3.6vw, 3.55rem);
  }

  .hero__place,
  .hero__sticky[data-tone="day"] .hero__place,
  .hero__sticky[data-tone="dusk"] .hero__place,
  .hero__sticky[data-tone="night"] .hero__place {
    color: #9ad9d4;
    font-size: 0.8rem;
  }

  .hero__lede,
  .hero__sticky[data-tone="day"] .hero__lede,
  .hero__sticky[data-tone="dusk"] .hero__lede,
  .hero__sticky[data-tone="night"] .hero__lede {
    color: rgba(244, 241, 234, 0.88);
    font-size: clamp(0.88rem, 1.05vw, 0.98rem);
    /* Modest widen vs mobile 34ch — stops short of the SBA label at 1024 */
    max-width: 35ch;
  }

  .hero__price-value,
  .hero__sticky[data-tone="day"] .hero__price-value,
  .hero__sticky[data-tone="dusk"] .hero__price-value,
  .hero__sticky[data-tone="night"] .hero__price-value {
    color: #f4f1ea;
    font-size: clamp(1.55rem, 2vw, 1.9rem);
  }

  .hero__price-eyebrow,
  .hero__price-qualifier,
  .hero__sticky[data-tone="day"] .hero__price-eyebrow,
  .hero__sticky[data-tone="night"] .hero__price-eyebrow,
  .hero__sticky[data-tone="day"] .hero__price-qualifier,
  .hero__sticky[data-tone="night"] .hero__price-qualifier,
  .hero__sticky[data-tone="dusk"] .hero__price-eyebrow,
  .hero__sticky[data-tone="dusk"] .hero__price-qualifier {
    color: rgba(244, 241, 234, 0.72);
  }

  .hero__fact {
    max-width: min(22%, 10rem);
    text-shadow:
      0 0 12px rgba(12, 18, 24, 0.55),
      0 1px 3px rgba(0, 0, 0, 0.45);
  }

  .hero__fact-label {
    font-size: clamp(0.5rem, 1.35cqw, 0.62rem);
  }

  .hero__fact-value {
    font-size: clamp(0.64rem, 1.85cqw, 0.84rem);
  }

  /* Restore visibility hidden at the base/mobile rule above — desktop's
     positions come from the JS-synced custom properties below, not the
     mobile % values, so they're unaffected by the mobile hero image change. */
  .hero__facts {
    display: block;
  }

  /*
    Desktop label zones — % of the visible cover crop (same window as the
    JS-synced leaders viewBox). Custom props set by syncDesktopHeroCrop().
    Fallbacks approximate the 1280-wide crop if JS has not run yet.
    a/d/c: left edge of chip = leader origin (leader leaves left side).
    b: right edge of chip = leader origin (translateX -100%).
  */
  .hero__fact--a {
    top: var(--hero-ann-a-top, 10%);
    left: var(--hero-ann-a-left, 83%);
    right: auto;
    max-width: min(12%, 7.5rem);
    text-align: left;
  }

  .hero__fact--b {
    top: var(--hero-ann-b-top, 30%);
    left: var(--hero-ann-b-left, 47%);
    right: auto;
    max-width: min(13%, 7.25rem);
    text-align: right;
    transform: translateX(-100%) translateY(6px);
  }

  .hero__fact--b.is-visible {
    transform: translateX(-100%) translateY(0);
  }

  .hero__fact--c {
    top: var(--hero-ann-c-top, 77%);
    left: var(--hero-ann-c-left, 84%);
    right: auto;
    max-width: min(13%, 7.25rem);
    text-align: left;
  }

  .hero__fact--d {
    top: var(--hero-ann-d-top, 68%);
    left: var(--hero-ann-d-left, 54%);
    right: auto;
    max-width: min(15%, 8rem);
    text-align: right;
    transform: translateX(-100%) translateY(6px);
  }

  .hero__fact--d.is-visible {
    transform: translateX(-100%) translateY(0);
  }

  /* ---- 02 At a Glance ---- */
  .glance {
    padding: clamp(3.5rem, 6vw, 4.75rem) 0 clamp(3.25rem, 5.5vw, 4.25rem);
  }

  .glance__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.1rem);
  }

  .glance__card {
    padding: clamp(0.95rem, 1.4vw, 1.15rem) clamp(0.9rem, 1.2vw, 1.05rem);
  }

  .glance .chapter-head__title {
    max-width: 22ch;
    font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  }

  /* ---- Why Palm Court ---- */
  .why {
    padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(4.5rem, 7vw, 5.5rem);
  }

  .why__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, var(--measure-reading));
    column-gap: clamp(1.75rem, 4vw, 3.25rem);
    row-gap: clamp(1.25rem, 2vw, 1.75rem);
    align-items: center;
  }

  .why .chapter-head {
    grid-column: 1 / -1;
    margin-bottom: 0;
    max-width: var(--measure-reading);
  }

  .why .chapter-head__title {
    max-width: 22ch;
    font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  }

  .why__media {
    margin: 0;
    grid-column: 1;
  }

  .why__lead {
    grid-column: 2;
    margin: 0;
    max-width: none;
    font-size: clamp(1.05rem, 1.25vw, 1.15rem);
  }

  /* ---- Gallery ---- */
  .gallery {
    padding: 0 0 clamp(4.5rem, 7vw, 5.5rem);
  }

  .gallery .chapter-head__title {
    max-width: 22ch;
    font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  }

  /* Edge gutter only — rail breaks toward the viewport edge; chapter
     heading stays on the centered measure via .gallery__inner.
     proximity (not mandatory) so continuous auto-scroll isn't fought.
     Snap suspension while auto-scrolling is base-rule (all widths). */
  .gallery__viewport {
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
  }

  .gallery__track {
    padding-inline: var(--gutter);
    gap: clamp(0.85rem, 1.4vw, 1.15rem);
  }

  .gallery__slide {
    width: clamp(22rem, 38vw, 32.5rem);
  }

  .gallery-lightbox__panel {
    width: min(100%, 880px);
  }

  .gallery-lightbox__image {
    max-height: min(74dvh, 74vh);
  }

  /* ---- Official Walkthrough ---- */
  .walkthrough {
    padding: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(3.25rem, 5vw, 4rem);
  }

  .walkthrough .chapter-head {
    max-width: var(--measure-reading);
  }

  .walkthrough .chapter-head__title {
    max-width: 20ch;
    font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  }

  .walkthrough__lead,
  .walkthrough__outro {
    max-width: none;
  }

  .walkthrough__media {
    max-width: 100%;
  }

  .walkthrough__outro {
    max-width: var(--measure-reading);
  }

  /* ---- 5. Choose Your Home ----
     Stage card left edge sits on the shared --measure-wide / --gutter
     grid (via .configs__inner). Desktop only: widen the identity column
     modestly, give the plan more height presence, tighten left rhythm. */
  .configs {
    padding: 0 0 clamp(4.5rem, 7vw, 5.5rem);
  }

  .configs .chapter-head__title {
    max-width: 20ch;
    font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  }

  .configs__selector {
    width: 100%;
    max-width: min(100%, 26.5rem);
    margin-bottom: clamp(1rem, 1.8vw, 1.35rem);
  }

  .configs__stage {
    display: grid;
    /* Was 17–24rem left / 1fr plan — modest left breathe, plan keeps 1fr */
    grid-template-columns: minmax(18rem, 26.5rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 2.6vw, 2.5rem);
    row-gap: 0.7rem;
    align-items: start;
    width: 100%;
    padding: clamp(1.2rem, 1.9vw, 1.55rem);
  }

  .configs__identity {
    grid-column: 1;
    grid-row: 1;
  }

  .configs__bhk {
    margin-bottom: 0.22rem;
  }

  .configs__name {
    margin-bottom: 0.45rem;
    font-size: clamp(1.6rem, 1.85vw, 1.9rem);
  }

  .configs__units {
    margin-bottom: 0.7rem;
  }

  .configs__unit-list {
    flex-wrap: wrap;
    overflow-x: visible;
    padding: 0;
  }

  .configs__sba {
    gap: 0.12rem;
  }

  .configs__price {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
  }

  .configs__plan {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .configs__plan-trigger {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .configs__actions {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    gap: 0.5rem;
  }

  .configs__price-disclosure {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
    line-height: 1.4;
  }

  .configs__source-note {
    grid-column: 1;
    grid-row: 4;
    margin-top: 0;
    line-height: 1.4;
  }

  .configs__plan-frame {
    flex: 0 0 auto;
  }

  .configs__plan-hint {
    margin-top: 0.45rem;
  }

  .configs__plan-cap {
    margin-top: 0.28rem;
  }

  .configs__actions-primary {
    gap: 0.5rem;
  }

  .configs__action {
    width: 100%;
  }

  /* ---- Current Buyer Benefits — horizontal premium benefit pass ---- */
  .benefits {
    --benefits-notch: 0.8rem;
    padding: 0 0 clamp(3rem, 5vw, 3.75rem);
  }

  .benefits__inner {
    max-width: var(--measure-wide);
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(1.1rem, 1.8vw, 1.5rem);
  }

  .benefits__card {
    grid-template-columns: minmax(0, 1.95fr) minmax(15rem, 1fr);
    align-items: stretch;
    border-radius: 16px;
  }

  .benefits__main {
    gap: 1.35rem;
    padding: clamp(1.75rem, 2.8vw, 2.35rem) clamp(1.6rem, 2.6vw, 2.25rem)
      clamp(1.75rem, 2.8vw, 2.35rem) clamp(1.75rem, 3vw, 2.5rem);
  }

  .benefits__stub {
    justify-content: center;
    padding: clamp(1.75rem, 2.8vw, 2.35rem) clamp(1.5rem, 2.4vw, 2rem)
      clamp(1.75rem, 2.8vw, 2.35rem) clamp(1.6rem, 2.5vw, 2.15rem);
    background: linear-gradient(165deg, rgba(10, 143, 136, 0.1) 0%, transparent 50%);
  }

  /* Vertical perforated tear between message and pass stub */
  .benefits__stub::before {
    left: 0;
    right: auto;
    top: var(--benefits-notch);
    bottom: var(--benefits-notch);
    width: 1px;
    height: auto;
    background-image: repeating-linear-gradient(
      180deg,
      rgba(213, 168, 63, 0.55) 0 3px,
      transparent 3px 9px
    );
  }

  /* Desktop notches sit on top/bottom of the vertical perforation */
  .benefits__notch--start {
    left: calc(var(--benefits-notch) * -1);
    top: calc(var(--benefits-notch) * -1);
    right: auto;
  }

  .benefits__notch--end {
    left: calc(var(--benefits-notch) * -1);
    right: auto;
    top: auto;
    bottom: calc(var(--benefits-notch) * -1);
  }

  .benefits__rupee {
    right: -0.05em;
    bottom: -0.18em;
    font-size: clamp(7.5rem, 11vw, 10.5rem);
    color: rgba(213, 168, 63, 0.065);
  }

  .benefits__mark {
    top: 1.15rem;
    right: 1.15rem;
    width: 18px;
    height: 18px;
  }

  .benefits__title {
    font-size: clamp(1.35rem, 1.85vw, 1.7rem);
    max-width: 22ch;
    letter-spacing: 0.04em;
  }

  .benefits__title-line {
    white-space: nowrap;
  }

  .benefits__copy {
    max-width: 46ch;
    font-size: 0.95rem;
  }

  .benefits__note {
    max-width: 42ch;
    font-size: 0.9rem;
  }

  .benefits__pass-id {
    margin-bottom: 0.75rem;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
  }

  .benefits__foil {
    margin-bottom: 1rem;
  }

  .benefits__secondary-label {
    margin-bottom: 0.75rem;
  }

  .benefits__categories {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.55rem;
  }

  .benefits__tag {
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    white-space: normal;
  }

  .benefits__qualify {
    margin-top: 0.75rem;
  }

  .benefits__cta {
    min-height: 48px;
    padding: 0.75rem 1.4rem;
    font-size: 0.875rem;
  }

  /* ---- Amenities ---- */
  .amenities {
    padding: 0 0 clamp(4.5rem, 7vw, 5.5rem);
  }

  .amenities .chapter-head__title {
    max-width: 22ch;
    font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  }

  .amenities__cinematic {
    gap: clamp(0.75rem, 1.4vw, 1.1rem);
    margin-bottom: clamp(1.75rem, 3vw, 2.35rem);
  }

  .amenities__moment {
    min-height: clamp(22rem, 48vh, 34rem);
    max-height: clamp(26rem, 56vh, 38rem);
  }

  /* The mobile crop (object-position: center 40%) keeps the pool visible
     in a tall narrow frame, but a wide/short desktop panel at that same
     vertical anchor shows mostly towers and sky — the pool itself (which
     sits in the lower third of the source photo) gets cropped out. */
  .amenities__moment--pool .amenities__moment-media img {
    object-position: center 78%;
  }

  .amenities__moment-type {
    padding: clamp(2rem, 3.5vw, 2.75rem) max(var(--gutter), calc((100vw - var(--measure-wide)) / 2))
      clamp(1.1rem, 2vw, 1.5rem);
  }

  .amenities__moment-fact-num {
    font-size: clamp(2.75rem, 4.5vw, 3.6rem);
  }

  .amenities__moment-name,
  .amenities__moment-name--stack {
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  }

  .amenities__rail-set {
    gap: clamp(2.75rem, 4.5vw, 4rem);
    padding-right: clamp(2.75rem, 4.5vw, 4rem);
  }

  .amenities__rail-static-track {
    padding-inline: max(var(--gutter), calc((100vw - var(--measure-wide)) / 2));
    gap: clamp(2.1rem, 3.5vw, 3rem);
  }

  /* ---- 6. Amenities closing band — horizontal ---- */
  .amenities__cta {
    max-width: var(--measure-wide);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-top: 0.25rem;
  }

  .amenities__cta-copy {
    margin: 0;
    max-width: min(36ch, 100%);
    flex: 1 1 auto;
  }

  .amenities__cta-btn {
    width: auto;
    flex: 0 0 auto;
    align-self: center;
    min-height: 48px;
    padding: 0.75rem 1.4rem;
  }

  /* ---- 7. Location ---- */
  .location {
    /* Tighter bottom pad — tall map is the chapter closer; avoid an empty band */
    padding: clamp(0.75rem, 2vw, 1.25rem) 0 clamp(2.75rem, 4.5vw, 3.5rem);
  }

  .location__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.85fr);
    column-gap: clamp(1.5rem, 3.2vw, 2.75rem);
    /* Row 2 absorbs map growth so drive-times can breathe; actions stay in row 3 */
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: clamp(1rem, 1.8vw, 1.35rem);
    align-items: stretch;
  }

  .location .chapter-head {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .location .chapter-head__title {
    max-width: 18ch;
    font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  }

  /* Keep address on one line — 32ch orphaned "Road." at 1024–1440 */
  .location__place {
    max-width: 42ch;
  }

  .location__map {
    grid-column: 1;
    grid-row: 2 / 4;
    height: auto;
    /* Dominant exploration surface — judged at 1024/1280/1440 screenshots
       (was clamp(22rem, 48vh, 32rem) ≈ 432px @900vh; now ≈ 540px) */
    min-height: clamp(30rem, 60vh, 37rem);
    align-self: stretch;
  }

  .location__connectivity {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .location__facts {
    flex: 1 1 auto;
    justify-content: space-evenly;
  }

  /* At the narrowest desktop width, the longest place name's own text run
     reaches far enough right to pass under the fixed floating utility
     cluster. Capping the wrap width (not the column/section) keeps it
     clear without reserving permanent space for the overlay. */
  .location__fact-place {
    max-width: 15ch;
  }

  .location__fact {
    /* Extra breathing room as the map grows — still a list, not stat cards */
    padding: clamp(0.95rem, 1.6vw, 1.2rem) 0;
  }

  .location__actions {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
    align-self: end;
  }

  .location__directions,
  .location__visit {
    width: 100%;
    min-height: 48px;
  }

  /* ---- 8. FAQ — asymmetric intro + accordion ---- */
  .faq {
    padding: clamp(2.5rem, 4vw, 3.25rem) 0 clamp(2.75rem, 4.5vw, 3.5rem);
  }

  .faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.55fr);
    column-gap: clamp(1.75rem, 4vw, 3.25rem);
    row-gap: 0;
    align-items: start;
  }

  .faq__intro {
    padding-top: 0.15rem;
  }

  .faq .chapter-head {
    margin-bottom: 0.55rem;
  }

  .faq .chapter-head__title {
    max-width: 14ch;
    font-size: clamp(1.7rem, 2.2vw, 2.15rem);
  }

  .faq__lead {
    margin: 0;
    max-width: 32ch;
    font-size: 0.95rem;
  }

  .faq__list {
    gap: 0.55rem;
  }

  .faq__trigger {
    padding: 0.95rem 1.15rem;
    font-size: 0.95rem;
  }

  .faq__answer {
    padding: 0 1.15rem 1.05rem;
    font-size: 0.9rem;
    max-width: 62ch;
  }

  /* ---- 9. Final Conversion — horizontal band ---- */
  .decide {
    padding: clamp(3rem, 5vw, 4rem) 0 clamp(3.5rem, 5.5vw, 4.5rem);
  }

  .decide__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(1.75rem, 4vw, 3.5rem);
    row-gap: 1rem;
    align-items: center;
  }

  .decide .chapter-head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .decide .chapter-head__title {
    max-width: 18ch;
    font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  }

  .decide__lead {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    max-width: 42ch;
  }

  .decide__cta {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
    max-width: none;
    min-width: 12.5rem;
    justify-self: end;
    align-self: center;
  }

  /* ---- 10. Footer / Trust — three columns ---- */
  .site-footer {
    padding-top: clamp(2.25rem, 4vw, 3rem);
    padding-bottom: clamp(2.25rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1.35fr);
    column-gap: clamp(1.5rem, 3.5vw, 2.75rem);
    row-gap: clamp(1.25rem, 2vw, 1.75rem);
    align-items: start;
  }

  .site-footer__identity {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* Agent RERA stays in identity; Project RERA is its own labeled column */
  .site-footer__project-rera {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--line-soft);
    padding-left: clamp(1.25rem, 2.5vw, 2rem);
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .site-footer__agent-rera {
    margin-top: 0.55rem;
  }

  .site-footer__disclaimer {
    grid-column: 3;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
    border-left: 1px solid var(--line-soft);
    padding-left: clamp(1.25rem, 2.5vw, 2rem);
  }

  .site-footer__disclaimer-text {
    font-size: 0.78rem;
    line-height: 1.55;
  }

  .site-footer__meta {
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  /* ---- 4. Persistent conversion cluster — float-utils owns desktop ---- */
  .dock {
    display: none !important;
  }

  body.has-dock {
    --dock-h: 0px;
  }

  .float-utils {
    top: 36%;
    right: max(1.15rem, env(safe-area-inset-right, 0px));
    gap: 0.4rem;
  }

  .float-utils__btn--request {
    display: inline-flex;
  }

  .float-utils__btn {
    min-width: 52px;
    min-height: 52px;
  }

  /* ---- HubSpot modal shell ---- */
  .convert-modal {
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }

  .convert-modal__panel {
    width: min(100%, 34rem);
    max-width: 560px;
    max-height: min(88dvh, 88vh);
    padding: 1.55rem 1.45rem 1.4rem;
    border-radius: 18px;
  }
}

/* 1024-only: lift float-utils above #benefits card while near it.
   1280+ keeps the default 36% top — do not reposition there. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .float-utils.is-near-benefits {
    top: 14%;
  }
}

/* --------------------------------------------------------------------------
   Minimal blocking consent gate — Meta Pixel measurement only. Restrained,
   not a full cookie-category platform: one plain-language line, Accept /
   Reject. Removed entirely from the DOM the instant a choice is made.
   -------------------------------------------------------------------------- */

.chg-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: 0.9rem var(--gutter) calc(0.9rem + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -8px 24px rgba(31, 30, 28, 0.08);
}

.chg-consent__panel {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chg-consent__text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

.chg-consent__actions {
  display: flex;
  gap: 0.6rem;
}

.chg-consent__btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.chg-consent__btn--reject {
  background: var(--white);
  border: 1px solid var(--line-soft);
  color: var(--ink);
}

.chg-consent__btn--reject:hover {
  border-color: var(--charcoal);
}

.chg-consent__btn--accept {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: var(--white);
}

.chg-consent__btn--accept:hover {
  background: #078076;
}

@media (min-width: 431px) {
  .chg-consent__panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .chg-consent__text {
    max-width: 60ch;
  }

  .chg-consent__actions {
    flex: 0 0 auto;
    width: auto;
  }

  .chg-consent__btn {
    flex: 0 0 auto;
    min-width: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chg-consent__btn {
    transition: none;
  }
}

/* Narrow phones only (matches the row-layout breakpoint above): the
   column layout's text + full-width button row was eating close to a
   fifth of a 390px viewport. Tighter padding/gap/line-height claws
   back space without touching button min-height (44px stays — the
   accessible tap target, not a layout knob) or the copy itself. */
@media (max-width: 430px) {
  .chg-consent {
    padding: 0.55rem 14px calc(0.55rem + env(safe-area-inset-bottom, 0px));
  }

  .chg-consent__panel {
    gap: 0.45rem;
  }

  .chg-consent__text {
    font-size: 0.74rem;
    line-height: 1.35;
  }
}