/* ============================================================
   THE CASCADES NEOPOLIS — design system
   Brand book: TCN Brand Guidelines 2025
   Shape law: no tiles, no cards, no shadows. Separation is by
   gold hairline and by space. Radii exist only as capsules and
   as the brochure's large rounded-path corners.
   Layout: centred brochure flow per the approved wireframe.
   ============================================================ */

/* ---------- fonts — full brand kit (Collapse display serif + Greenwich) ---------- */
@font-face {
  font-family: 'Collapse';
  src: url('../assets/fonts/Collapse-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Collapse';
  src: url('../assets/fonts/Collapse-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Greenwich';
  src: url('../assets/fonts/Greenwich-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Greenwich';
  src: url('../assets/fonts/Greenwich-LightItalic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Greenwich';
  src: url('../assets/fonts/Greenwich-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Greenwich';
  src: url('../assets/fonts/Greenwich-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Greenwich';
  src: url('../assets/fonts/Greenwich-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Greenwich';
  src: url('../assets/fonts/Greenwich-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Greenwich';
  src: url('../assets/fonts/Greenwich-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* colour — brand book, exact */
  --navy:       #00426B;   /* PANTONE 7694 C */
  --navy-deep:  #002B49;   /* derived shade for gradients only */
  --navy-ink:   #0E3453;   /* long-form text on cream */
  --cream:      #F6EEE6;   /* PANTONE 2309 C 32% */
  --cream-lift: #FAF4EC;
  --white:      #FFFFFF;
  --blue:       #93B4E4;   /* PANTONE 2128 C */
  --blush:      #E8BEB0;   /* PANTONE 7520 C */
  --bronze:     #8A6239;   /* PANTONE 8580 C */
  --gold:       #BD8C54;   /* the brochure's gold — the brand book's modulating lines and the client's own level marks (was the brighter foil equivalent #E3A244; matched to print per Aadhaar, 2026-09-07) */
  --gold-foil:  #E3A244;   /* KURZ LUXOR 397 screen equivalent — kept only for the hero's lustrous type highlight */
  --gold-line:  rgba(189, 140, 84, .55);
  --gold-faint: rgba(189, 140, 84, .3);
  --cream-line: rgba(246, 238, 230, .25);

  /* type — Collapse (brand display serif) for headlines,
     Greenwich for everything spoken: body, labels, CTAs */
  --sans:  'Greenwich', 'Avenir Next', 'Century Gothic', sans-serif;
  --serif: 'Collapse', 'Didot', 'Bodoni MT', 'Playfair Display', serif;

  /* type scale — the only sizes the site uses. Display tiers are
     Collapse; text tiers are Greenwich. Reach for a token, never a px. */
  --t-hero:   clamp(30px, 4.4vw, 70px);    /* h1 — hero only */
  --t-h2:     clamp(28px, 3.4vw, 54px);    /* every section title */
  --t-h2-lg:  clamp(34px, 3.6vw, 58px);    /* the one feature title (WELL) */
  --t-h3:     clamp(24px, 2.6vw, 40px);    /* panel, slide and partner names; menu links */
  --t-h4:     clamp(19px, 1.8vw, 25px);    /* small serif names, modal title, footer mark */
  --t-h5:     19px;                        /* serif figures inside rows */
  --t-num-xl: clamp(40px, 4.6vw, 72px);    /* the biggest figure on a page */
  --t-num-l:  clamp(28px, 3.1vw, 50px);    /* ledger figures */
  --t-num-m:  clamp(24px, 2.4vw, 38px);    /* smaller figures, rails */
  --t-lead:   clamp(17px, 1.6vw, 21px);    /* lead line under a section title */
  --t-body-l: clamp(15.5px, 1.3vw, 17.5px);/* long-form paragraph */
  --t-base:   17px;                        /* the page default — bare paragraphs inherit it */
  --t-body:   15px;                        /* rows, addresses, quieter copy */
  --t-small:  13.5px;                      /* captions, hover copy, lists, notes */
  --t-caption:12.5px;                      /* capsules, textlinks, meta lines */
  --t-label:  12.5px;                      /* every caps label */
  --t-fine:   11.5px;                      /* fine print, RERA, form labels */
  --t-micro:  10.5px;                      /* the smallest caps: tags, realms, rails */
  --t-eyebrow:clamp(14px, 1.15vw, 16px);   /* the caps line above a section title */
  --track:    .12em;                       /* one tracking for every caps label */

  /* rhythm */
  --gutter: clamp(20px, 4.5vw, 80px);   /* one gutter for every section, the WELL spread included */
  --measure: 62ch;
  interpolate-size: allow-keywords;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { display: block; max-width: 100%; }
html, body { overflow-x: clip; }
body {
  background: var(--white);
  color: var(--navy-ink);
  font-family: var(--sans);
  font-synthesis: none;   /* real italics shipped — never let the browser fake a face */
  font-weight: 300;
  font-size: var(--t-base);
  line-height: 1.75;   /* Greenwich Light, sentence case: tracking −20 */
  -webkit-font-smoothing: antialiased;
}
/* full-bleed media rises into the page instead of appearing in it */
.wide-media:not(.wide-media--screen) img,
.wide-media--film video,
.hscroll .hslide img,
.glance-fig img {
  clip-path: inset(11% 0 11% 0);
  transition: clip-path 1.4s cubic-bezier(.22,.61,.36,1);
}
.wide-media.in:not(.wide-media--screen) img,
.wide-media--film.in video,
.hscroll.in .hslide img,
.glance-fig.in img {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .wide-media:not(.wide-media--screen) img,
  .wide-media--film video,
  .hscroll .hslide img,
  .glance-fig img { clip-path: none; transition: none; }
}

::selection { background: var(--gold); color: var(--navy-deep); }
a { color: inherit; }

/* headings and paragraphs land on the scale even without a class:
   h1–h5 in Collapse, navy; h6 is a caps label; p is body copy */
h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 400; line-height: 1.15; color: var(--navy); }
h1 { font-size: var(--t-hero); line-height: 1.02; }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h5 { font-size: var(--t-h5); }
h6 { font-family: var(--sans); font-weight: 500; font-size: var(--t-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--bronze); }
p  { line-height: 1.75; }   /* size is inherited — a bare paragraph is base copy */

/* ---------- custom cursor — the logo emblem travels with the hand
   (after the Sobha Realty reference; desktop pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: url('../assets/img/cursor-emblem-32.png') 15 15, auto; }
  a, button, summary, .capsule, .textlink,
  label.chip, label.consent, select {
    cursor: url('../assets/img/cursor-emblem-gold-32.png') 15 15, pointer;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   TYPE ROLES
   ============================================================ */
.label {
  font-family: var(--sans); font-weight: 500;
  font-size: var(--t-label); line-height: 1.4; letter-spacing: var(--track);
  text-transform: uppercase;
}
.label--gold   { color: var(--gold); }
.label--bronze { color: var(--bronze); }
.label--blue   { color: var(--blue); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--navy);
}
/* emphasis inside display type: the brand's true Collapse italic */
.display i, .display em { font-style: italic; font-weight: 400; }
.display-xl { font-size: var(--t-hero); }
.display-l  { font-size: var(--t-h2-lg); line-height: 1.05; }
.display-m  { font-size: var(--t-h2); line-height: 1.12; }
.display-s  { font-size: var(--t-h4); line-height: 1.24; }

/* ---------- text reveal — masked line-rise, word by word (mild) ----------
   JS wraps display headings' words in .w/.wi; each word rises out of its
   own clip as the heading enters. Degrades to the plain .rv fade. */
.tsplit .w { display: inline-block; overflow: clip; vertical-align: bottom; }
.tsplit .wi { display: inline-block; transform: translateY(112%); }
.tsplit.in .wi {
  transform: none;
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--wd, 0) * 65ms);
}
.tsplit.rv { opacity: 1; transform: none; }   /* the words carry the motion, not the block */
@media (prefers-reduced-motion: reduce) {
  .tsplit .wi { transform: none; transition: none; }
}

.small { font-size: var(--t-small); line-height: 1.65; }
.fine  { font-size: var(--t-fine); line-height: 1.7; opacity: .62; }

/* ============================================================
   PRIMITIVES — capsule, textlink, hairline
   ============================================================ */
.capsule {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--sans); font-weight: 500;
  font-size: var(--t-caption); text-transform: uppercase;
  padding: 17px 36px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent;
  color: var(--navy); text-decoration: none; cursor: pointer;
  transition: background .45s cubic-bezier(.22,.61,.36,1), color .45s cubic-bezier(.22,.61,.36,1), border-color .45s;
}
.capsule:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
/* on navy grounds: off-white, never light blue (brand don't 05) */
.capsule--solid { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.capsule--solid:hover { background: transparent; color: var(--navy); }
.capsule--onnavy { color: var(--cream); border-color: var(--cream-line); }
.capsule--onnavy:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
/* the way on to a page: an outlined capsule with an arrow that leads
   the eye; it fills navy on hover and the arrow steps forward */
.capsule--go {
  gap: 14px; padding: 15px 18px 15px 30px;
  border-color: var(--gold); color: var(--navy); background: rgba(255,255,255,.6);
}
.capsule--go .cg-arrow {
  flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%;
  background: var(--navy); fill: none; stroke: var(--cream); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), background .45s, stroke .45s;
}
.capsule--go:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.capsule--go:hover .cg-arrow { background: var(--gold); transform: translateX(4px); }

.textlink {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: var(--t-caption); text-transform: uppercase; text-decoration: none;
  color: var(--navy);
  padding-bottom: 6px; position: relative;
}
.textlink::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform-origin: left; transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.textlink:hover::after { transform: scaleX(.35); }
button.textlink { background: none; border: 0; padding-inline: 0; padding-top: 0; cursor: pointer; }

.hairline { border: 0; height: 1px; background: var(--gold-line); }
.hairline--faint { background: var(--gold-faint); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   REVEALS — water-weighted settles
   ============================================================ */
.rv { opacity: 0; transform: translateY(26px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.rv2.in { transition-delay: .12s; }
.rv3.in { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}

/* ============================================================
   HEADER — solid bar, wordmark left, menu right (wireframe)
   ============================================================ */
.site-head {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 60;
  width: 100%; max-width: 100vw;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gutter);
  background: transparent;
  border: 1px solid transparent; border-radius: 0;
  transition:
    top .6s cubic-bezier(.22,.61,.36,1),
    max-width .6s cubic-bezier(.22,.61,.36,1),
    padding .6s cubic-bezier(.22,.61,.36,1),
    border-radius .6s cubic-bezier(.22,.61,.36,1),
    background .5s, border-color .5s, backdrop-filter .5s;
}
/* scrolled: a floating glass capsule, ~2/3 of the page */
.site-head.solid {
  top: clamp(10px, 1.8vh, 18px);
  max-width: min(920px, 94vw);
  padding: 9px clamp(16px, 2vw, 26px) 9px clamp(20px, 2.4vw, 32px);
  border-radius: 999px;
  background: rgba(250, 245, 238, .58);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-color: var(--gold-faint);
}
.site-head .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.site-head .brand img {
  height: clamp(56px, 6vw, 74px); width: auto;
  transition: filter .5s, height .5s;
}
/* reversed logo over the film; the bronze-gold master returns on solid */
.site-head:not(.solid) .brand img { filter: brightness(0) invert(1); }
.site-head.solid .brand img { height: clamp(42px, 4.2vw, 50px); }
.head-cta { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.head-cta .capsule { padding: 12px 24px; font-size: var(--t-fine); }
/* over the hero film: off-white outline, never light blue (brand don't 05) */
.site-head:not(.solid) .head-cta .capsule {
  background: transparent; color: var(--cream); border-color: rgba(246,238,230,.6);
}
.site-head:not(.solid) .head-cta .capsule:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
@media (max-width: 640px) { .head-cta .capsule { display: none; } }

/* hamburger — two lines, the lower one trailing */
.menu-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 8px;
  width: 48px; height: 48px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.menu-btn span {
  display: block; height: 1.5px; width: 100%;
  background: var(--navy);
  transition: width .45s cubic-bezier(.22,.61,.36,1), background .3s;
}
.menu-btn span:nth-child(2) { width: 62%; align-self: flex-end; }
.menu-btn:hover span { background: var(--bronze); width: 100%; }
.site-head:not(.solid) .menu-btn span { background: var(--cream); }
.site-head:not(.solid) .menu-btn:hover span { background: var(--gold); }

/* half-page menu (client round, 15 Sep) — a panel from the right over the
   dimmed page: the logo first, then the page names in the display serif.
   Nothing else. Three grounds ride on
   body[data-menu] (set from ?menu=a|b|c): a = the brand's paper (default),
   b = navy with the cascade lines, c = cream with gold rules drawing in.
   All three sit side by side in menu-directions.html. */
.menu-veil {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 43, 73, .42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1), visibility 0s .5s;
}
.menu-veil.open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(36vw, 480px); min-width: min(400px, 100vw);
  overflow: hidden auto;
  display: flex; flex-direction: column;
  padding: clamp(28px, 4vh, 44px) clamp(32px, 4.2vw, 76px) clamp(36px, 6vh, 64px);
  background: var(--cream); color: var(--navy);
  transform: translateX(100%);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.menu-veil.open .menu-panel { transform: none; }
/* the grain and the two soft fields the footer's ground uses, on paper */
.menu-panel::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../assets/img/grain.png) repeat;
  mix-blend-mode: multiply; opacity: .55;
}
.menu-panel::after {
  content: ''; position: absolute; right: 0; bottom: 0; z-index: 0; pointer-events: none;   /* inside the box: past its edge it made the panel scroll */
  width: 52%; height: 34%;
  border-radius: clamp(64px, 6.5vw, 120px) 0 0 0;
  background: var(--blue); opacity: .1;
}
.menu-panel > * { position: relative; z-index: 1; }
.menu-close {
  position: absolute; top: clamp(14px, 2vh, 22px); right: clamp(20px, 2.4vw, 36px); z-index: 2;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 300; font-size: var(--t-num-m); line-height: 1;
  color: var(--gold);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), color .3s;
}
.menu-close:hover { transform: rotate(90deg); color: var(--navy); }
.menu-brand { display: inline-block; align-self: flex-start; text-decoration: none; }
.menu-logo { display: block; height: clamp(84px, 11vh, 120px); width: auto; }
.menu-nav { display: flex; flex-direction: column; align-items: stretch; margin-top: clamp(30px, 5.5vh, 56px); }
.menu-nav a {
  position: relative;
  display: block;
  padding: clamp(9px, 1.5vh, 15px) 0;
  font-family: var(--serif); font-weight: 400;
  font-size: min(var(--t-h3), 2.2vh + 12px, 2.4vw + 6px);   /* nine names, one screen: never scrolls, never wraps */
  line-height: 1.15; white-space: nowrap;
  text-decoration: none; color: var(--navy);
  opacity: 0; transform: translateX(28px);
}
.menu-nav a span { display: inline-block; transition: transform .45s cubic-bezier(.22,.61,.36,1), color .35s; }
.menu-nav a:hover span { transform: translateX(8px); color: var(--bronze); }
.menu-nav a[aria-current="page"] span { color: var(--bronze); }
.menu-veil.open .menu-nav a {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.menu-veil.open .menu-nav a:nth-child(1) { transition-delay: .22s; }
.menu-veil.open .menu-nav a:nth-child(2) { transition-delay: .27s; }
.menu-veil.open .menu-nav a:nth-child(3) { transition-delay: .32s; }
.menu-veil.open .menu-nav a:nth-child(4) { transition-delay: .37s; }
.menu-veil.open .menu-nav a:nth-child(5) { transition-delay: .42s; }
.menu-veil.open .menu-nav a:nth-child(6) { transition-delay: .47s; }
.menu-veil.open .menu-nav a:nth-child(7) { transition-delay: .52s; }
.menu-veil.open .menu-nav a:nth-child(8) { transition-delay: .57s; }
.menu-veil.open .menu-nav a:nth-child(9) { transition-delay: .62s; }
.menu-veil.open .menu-nav a:nth-child(10) { transition-delay: .67s; }
/* the cascade lines — only direction b shows them */
.menu-arcs { display: none; }

/* b · navy, the cascade lines rising from the panel's foot */
[data-menu="b"] .menu-panel {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream);
}
[data-menu="b"] .menu-panel::before, [data-menu="b"] .menu-panel::after { display: none; }
[data-menu="b"] .menu-arcs {
  display: block; position: absolute; right: 0; bottom: 0; z-index: 0;
  width: 78%; height: auto; pointer-events: none;
}
[data-menu="b"] .menu-arcs path { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: .45; }
[data-menu="b"] .menu-nav a { color: var(--cream); }
[data-menu="b"] .menu-nav a:hover span, [data-menu="b"] .menu-nav a[aria-current="page"] span { color: var(--gold); }
[data-menu="b"] .menu-close:hover { color: var(--cream); }

/* c · cream, a gold rule under every name, drawn in with the name */
[data-menu="c"] .menu-panel { background: var(--cream-lift); }
[data-menu="c"] .menu-panel::before, [data-menu="c"] .menu-panel::after { display: none; }
[data-menu="c"] .menu-nav a { padding-block: clamp(12px, 2vh, 18px); }
[data-menu="c"] .menu-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold-line);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: inherit;
}
[data-menu="c"] .menu-veil.open .menu-nav a::after { transform: none; }
[data-menu="c"] .menu-nav a:first-child::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-line);
}

@media (max-width: 860px) {
  .menu-panel { width: 100vw; min-width: 0; }
  .menu-nav a { font-size: min(var(--t-h3), 2.6vh + 12px, 7.2vw); }
  .menu-veil { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-veil.open .menu-panel { transition: none; }
  .menu-nav a, .menu-veil.open .menu-nav a { opacity: 1; transform: none; transition-delay: 0s; }
  .menu-nav a:hover span { transform: none; }
  [data-menu="c"] .menu-nav a::after { transform: none; transition: none; }
}

/* ============================================================
   HERO — full-bleed image, centred proposition
   ============================================================ */
#hero { position: relative; color: var(--cream); }
#hero .hero-img { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; }
#hero .hero-img video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  transform: scale(1.05);
}
#hero.in .hero-img video { transform: scale(1); transition: transform 6s cubic-bezier(.16,.5,.3,1); }
#hero .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,43,73,.42) 0%, rgba(0,43,73,0) 22%),
    linear-gradient(180deg, rgba(0,43,73,0) 34%, rgba(0,43,73,.38) 66%, rgba(0,43,73,.7) 100%);
}
/* a phone shows the film's misty middle alone, so the title needs a
   breath of navy behind it (client round, 18 Sep) */
@media (max-width: 720px) {
  #hero:not(.phero) .scrim {
    background:
      linear-gradient(180deg, rgba(0,43,73,.42) 0%, rgba(0,43,73,0) 22%),
      radial-gradient(ellipse 90% 34% at 50% 50%, rgba(0,26,44,.5) 0%, rgba(0,26,44,.18) 60%, rgba(0,26,44,0) 100%),
      linear-gradient(180deg, rgba(0,43,73,0) 34%, rgba(0,43,73,.38) 66%, rgba(0,43,73,.7) 100%);
  }
}
/* proposition centred in the film, CTA beneath it
   (references: The Ranch / VRetreats) */
.hero-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 var(--gutter);
  text-align: center;
}
.hero-content .label { color: var(--gold); margin-bottom: 16px; font-size: var(--t-fine); }
/* the brochure's custom type (brand book p19, brochure p3): uppercase Collapse,
   a lustrous water-lit surface (cream over light blue) with a soft navy
   extrusion beneath — the "Life Appreciates Here" spread, on the film */
.hero-title {
  color: var(--cream);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.02;
  background: linear-gradient(180deg, #FBF6EF 0%, #F6EEE6 34%, #CFDDF1 60%, #93B4E4 88%, #A9C3E8 100%);   /* lit from above, shaded below — every letter the same way, as in the brochure */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,43,73,.5)) drop-shadow(0 3px 0 rgba(0,43,73,.3)) drop-shadow(0 14px 26px rgba(0,22,38,.3));
}
@supports not (background-clip: text) { .hero-title { background: none; -webkit-text-fill-color: var(--cream); filter: none; } }
.hero-cta {
  margin-top: clamp(22px, 3.4vh, 34px);
  padding: 12px 26px; font-size: var(--t-fine);
  background: var(--navy); color: var(--cream); border-color: var(--navy);
}
.hero-cta:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }

/* mandates on the banner (client round, 15 Sep) — three plain lines,
   bottom-left of the film, the same text the footer carries */
.rera-strip {
  position: absolute; left: var(--gutter); bottom: clamp(18px, 3vh, 30px); z-index: 2;
  text-align: left; font-size: var(--t-fine); line-height: 1.8; color: rgba(246,238,230,.82);
}
.rera-strip a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(246,238,230,.35); transition: color .35s, border-color .35s; }
.rera-strip a:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 640px) { .rera-strip { right: var(--gutter); } }

/* ============================================================
   SECTION SHELL — centred brochure spreads
   ============================================================ */
.sect { padding: clamp(72px, 9.5vh, 124px) var(--gutter); }
/* immersive flow: no alternating grounds — every section is transparent
   over the one fixed atmosphere; the page never "breaks" into bands */
.sect--white, .sect--cream { background: transparent; }
.sect--navy  { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--cream); }

/* internal pages (no hero): breathing room under the fixed header */
.subpage main > .sect:first-child { padding-top: clamp(150px, 20vh, 220px); }
.sect-inner { max-width: none; margin: 0 auto; }   /* content runs gutter to gutter, matching the WELL spread on wide screens */
.sect-head { text-align: center; }
.sect-head .label { display: block; margin-bottom: 22px; font-size: var(--t-eyebrow); }
.sect-head .display { margin-inline: auto; max-width: 20em; }
#concierge .sect-head .display { max-width: 24em; }   /* the partnerships line runs long; hold it to two even lines */
/* the amenities line reads as one: held on a single line, the size easing
   down with the viewport so it never has to break */
.sect-head .lv-title { max-width: none; white-space: nowrap; font-size: min(var(--t-h2), 3.25vw); }
@media (max-width: 860px) { .sect-head .lv-title { max-width: 20em; white-space: normal; font-size: var(--t-h2); } }
.sect-head__title--tight { margin-top: 14px; }   /* when a title sits directly under a mark, not a label */
.sect-head__aside { margin-top: 26px; }          /* a quiet line after the sub, e.g. the WhatsApp link */
.svg-defs { position: absolute; }                /* zero-size symbol sheets: out of flow, never a gap */
.sect-head .sub {
  margin: 18px auto 0; max-width: 56ch;
  font-size: var(--t-lead); line-height: 1.7;
}
#experience .sect-head .sub { max-width: 92ch; }   /* one line on a desktop measure */

/* ============================================================
   DEVELOPED BY — mark, label, logos. No rules, no dividers:
   the partners sit in open space.
   ============================================================ */
#developers { position: relative; padding: clamp(56px, 9vh, 110px) var(--gutter) clamp(20px, 3vh, 40px); overflow: clip; }
/* cascade arcs framing the title from both edges — the menu's line
   language, faint, drawing themselves in as the section arrives */
.sect-arcs {
  position: absolute; top: 0; width: clamp(220px, 26vw, 420px); height: clamp(180px, 22vw, 340px);
  pointer-events: none; opacity: 1; transform: none;
}
.sect-arcs--l { left: 0; }
.sect-arcs--r { right: 0; }
.sect-arcs path {
  fill: none; stroke: var(--gold); stroke-width: 1;
  opacity: .28;
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
}
.sect-arcs.in path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.22,.61,.36,1); }
.sect-arcs.in path:nth-child(2) { transition-delay: .2s; }
.sect-arcs.in path:nth-child(3) { transition-delay: .4s; }
@media (max-width: 860px) { .sect-arcs { width: 38vw; height: 30vw; } .sect-arcs path { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .sect-arcs path { stroke-dashoffset: 0; transition: none; } }
.dev-band { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* the brand's own cascading symbol, rising as the band arrives */
.dev-ornament {
  width: 62px; height: auto; fill: var(--gold);
  opacity: 0; transform: translateY(8px);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.dev-band.in .dev-ornament { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dev-ornament { opacity: 1; transform: none; transition: none; } }
.dev-eyebrow { margin-top: 18px; font-size: var(--t-label); letter-spacing: var(--track); }

/* the three marks, each in its brochure colours on a soft rounded tab
   washed in a light tint of its own; a gold rule rides under the live one
   (the residences switcher's gesture) and its record settles in beneath */
.dev-view { margin-top: clamp(48px, 7vh, 80px); }
.dev-pick {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(14px, 2.4vw, 36px);
  border-bottom: 1px solid var(--gold-faint);   /* the one rule: marks above, record below */
}
/* each tab rises from the rule like the brochure's framed pages: no
   border, straight sides standing on the ground line, the top corners
   curved; one light, solid tint of the mark's own colour */
.dev-tab {
  --dt-bg: #F3F3F2;
  display: grid; place-items: center;
  width: clamp(168px, 17vw, 256px); height: clamp(108px, 9.8vw, 142px);
  padding: clamp(12px, 1.4vw, 20px) clamp(18px, 2vw, 30px);
  border: 0; border-radius: clamp(26px, 2.6vw, 40px) clamp(26px, 2.6vw, 40px) 0 0; cursor: pointer;
  background: var(--dt-bg);
  opacity: .74; filter: saturate(.8);   /* resting marks keep their colours, just quieter */
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), filter .55s cubic-bezier(.22,.61,.36,1);
}
/* tints drawn from each mark: GHR's purple, Lakshmi's gold, Urbanblocks' ink */
.dev-tab--ghr     { --dt-bg: #F3EDF6; }
.dev-tab--lakshmi { --dt-bg: #F9F2E2; }
.dev-tab--urban   { --dt-bg: #F2F2F1; }
.dev-tab img { height: clamp(44px, 4.2vw, 62px); width: auto; max-width: 100%; object-fit: contain; display: block; }
.dev-tab--lakshmi img { height: clamp(34px, 3.2vw, 46px); }   /* the wide lockup: mark beside the words */
.dev-tab:hover, .dev-tab.is-active { opacity: 1; filter: none; }
@media (max-width: 600px) {
  .dev-tab { width: auto; flex: 1 1 0; height: 90px; border-radius: 20px 20px 0 0; padding: 10px 12px; }
  .dev-tab img { height: 36px; }
  .dev-tab--lakshmi img { height: 26px; }
}
.dev-pick::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: var(--tw, 0px); height: 2px; background: var(--gold);
  transform: translateX(var(--tx, 0px));
  transition: transform .6s cubic-bezier(.32,.72,.28,1), width .6s cubic-bezier(.32,.72,.28,1);
}

/* the record: figures large and plainly labelled, then the story at
   reading size beside the founders — everything given room */
.dev-stage { position: relative; margin-top: clamp(44px, 7vh, 72px); text-align: left; }
.dev-rec[hidden] { display: none; }
.dev-rec.is-on { animation: resIn .7s cubic-bezier(.32,.72,.28,1) both; }
/* the record's figures: two by two, each ruled off from what it counts */
.dr-figs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5.4vh, 56px) clamp(26px, 3.2vw, 52px);
  text-align: left;
}
.dr-fig { display: flex; align-items: stretch; gap: clamp(14px, 1.5vw, 20px); }
.dr-fig .n {
  flex: 0 0 auto; min-width: 2.4em; text-align: right;
  font-family: var(--serif);
  font-size: var(--t-num-l); line-height: 1.1; color: var(--navy); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dr-fig .t {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: clamp(14px, 1.5vw, 20px); border-left: 1px solid var(--gold-faint);
  max-width: 13ch;
  font-size: var(--t-label); letter-spacing: .08em; line-height: 1.5;
  text-transform: uppercase; font-weight: 500; color: var(--bronze);
}
.dr-fig .t i {
  font-style: normal; font-family: var(--sans); font-weight: 300;
  font-size: 1.05em; letter-spacing: .02em; text-transform: none; color: var(--bronze);
}
.dev-rec {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5.6fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}

.dr-name { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.15; color: var(--navy); margin-bottom: 18px; }
.dr-story p:not(.dr-name) { max-width: 68ch; font-size: var(--t-body-l); line-height: 1.85; color: var(--navy-ink); }
@media (max-width: 860px) {
  .dev-rec { grid-template-columns: minmax(0, 1fr); gap: 36px; }   /* minmax: the figures must never widen the column past the screen */
  .dev-pick { gap: 12px; }
}
.dr-fig .n .n-u { display: none; }   /* desktop keeps the unit above its label; phones show it beside the number */
/* phones: two figures a row, each number over its label, so nothing runs off the edge */
@media (max-width: 600px) {
  .dr-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .dr-fig { flex-direction: column; gap: 8px; }
  .dr-fig .n { min-width: 0; text-align: left; }
  .dr-fig .t { padding-left: 0; border-left: 0; padding-top: 8px; border-top: 1px solid var(--gold-faint); max-width: none; }
  /* the unit rides beside its number, so every label below is one line */
  .dr-fig .n .n-u {
    display: inline; margin-left: 6px;
    font-family: var(--sans); font-style: normal; font-weight: 300;
    font-size: 13px; letter-spacing: .02em; color: var(--bronze);
  }
  .dr-fig .t i { display: none; }
  .dr-fig .t { white-space: nowrap; font-size: clamp(10px, 3.05vw, 12.5px); letter-spacing: .05em; }
}
@media (prefers-reduced-motion: reduce) { .dev-tab, .dev-pick::after { transition: none; } .dev-rec.is-on { animation: none; } }

/* ============================================================
   PROJECT OVERVIEW — the mandated particulars beside the towers
   ============================================================ */
.glance-wrap {
  display: grid; grid-template-columns: minmax(0, 6.4fr) minmax(0, 5fr);
  gap: 48px clamp(48px, 6vw, 110px);
  align-items: stretch;               /* the two columns end on the same line */
}
.glance-side { display: flex; flex-direction: column; }
.glance-side .label { display: block; margin-bottom: clamp(16px, 2.4vh, 22px); font-size: var(--t-eyebrow); }
.glance-side .display-m { max-width: 9em; }
/* the ledger takes whatever height the render leaves — three rows, evenly */
.glance-ledger {
  flex: 1 1 auto; margin-top: clamp(28px, 4.2vh, 44px);
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr;
  border-top: 1px solid var(--gold-faint);
}
.gcell {
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(96px, 13vh, 150px);
  padding: clamp(18px, 2.6vh, 28px) 6px clamp(18px, 2.6vh, 28px) 0;
  text-align: left;
  border-bottom: 1px solid var(--gold-faint);
}
.gcell:nth-child(even) { border-left: 1px solid var(--gold-faint); padding-left: clamp(18px, 2.4vw, 34px); }
.gcell .n {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-num-l); line-height: 1.1;
  color: var(--gold); white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* steady width while the figures count up */
}
/* every stat is two lines — the figure, then its label; a unit rides
   beside its figure rather than taking a line of its own */
.gcell .n i { margin-left: .3em; font-style: normal; font-family: var(--sans); font-weight: 300; font-size: .36em; letter-spacing: .04em; color: var(--bronze); }
.gcell .t { margin-top: 10px; font-size: var(--t-label); letter-spacing: var(--track); text-transform: uppercase; font-weight: 500; color: var(--navy-ink); }

/* the towers, holding the column's full height */
/* the elevation (client round, 15 Sep): the whole building, never
   cropped, at the height the figures on the left give the row */
.glance-fig { position: relative; margin: 0; overflow: clip; min-height: 0; }
.glance-fig img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 50%; display: block;
}
/* the elevation runs to the page's right edge, the brochure's rounded
   corners on its open side (client round, 18 Sep) */
.glance-fig--edge {
  margin-right: calc(-1 * var(--gutter));
  border-radius: clamp(40px, 5vw, 96px) 0 0 clamp(40px, 5vw, 96px);
}
.glance-fig--edge img { object-fit: cover; object-position: 50% 45%; }
.glance-wrap--edge { gap: 48px clamp(32px, 4.5vw, 80px); }
@media (max-width: 900px) {
  .glance-wrap { grid-template-columns: 1fr; }
  .glance-fig { max-width: 520px; margin: 0 auto; width: 100%; min-height: 0; aspect-ratio: 4 / 5; }
  .glance-fig img { position: static; width: 100%; height: 100%; }
  /* the edge plate keeps its edge: full width from the gutter to the page's
     right, a landscape rather than a portrait */
  .glance-fig--edge { max-width: none; width: auto; margin: 0 calc(-1 * var(--gutter)) 0 0; aspect-ratio: 16 / 10; border-radius: clamp(28px, 6vw, 56px) 0 0 clamp(28px, 6vw, 56px); }
  .glance-fig--edge img { object-fit: cover; }
}
@media (max-width: 600px) { .glance-fig--edge { aspect-ratio: 4 / 3; } }

/* ============================================================
   WELL — the brochure's spread (pp. 26–27): a navy page carrying the
   claim, a sand page carrying the ten concepts as a bento of cells
   ruled in gold, the brochure's own drawings in each.
   ============================================================ */
.sect--well { padding-top: clamp(64px, 9vh, 112px); padding-bottom: clamp(64px, 9vh, 112px); }
.well-spread {
  display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
/* the claim — on the page's own white, navy and bronze doing the talking */
.ws-navy {
  position: sticky; top: clamp(96px, 14vh, 140px);
  display: flex; flex-direction: column; gap: clamp(32px, 5vh, 56px);
}
.ws-badge { align-self: flex-start; width: clamp(120px, 10vw, 156px); height: auto; border-radius: 10px; }
.ws-copy .label { display: block; margin-bottom: 20px; letter-spacing: .2em; color: var(--bronze); }
.ws-title { color: var(--navy); max-width: 11em; }
.ws-title em { font-style: normal; text-transform: uppercase; color: var(--bronze); }
.ws-text {
  margin-top: clamp(24px, 3.6vh, 34px); max-width: 46ch;
  font-weight: 400; font-size: var(--t-body-l); line-height: 1.8;
  color: var(--navy-ink);
}
/* also IGBC — a second seal, given the same weight as the first */
.ws-igbc {
  margin-top: clamp(30px, 4.6vh, 44px); padding-top: clamp(24px, 3.6vh, 36px);
  border-top: 1px solid var(--gold-faint);
  display: flex; align-items: center; gap: clamp(18px, 2vw, 30px);
}
.ws-igbc img { height: clamp(88px, 8.4vw, 124px); width: auto; flex: 0 0 auto; }
.ws-igbc-t { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.1; color: var(--navy); }
.ws-igbc-s { margin-top: 10px; max-width: 30ch; font-size: var(--t-body); line-height: 1.6; color: var(--navy-ink); }

/* the ten concepts — a bento ruled in gold on the white, the brochure's
   drawings in each; the feature cell carries a breath of the sand */
.ws-sand {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    "a a b"
    "a a c"
    "d e f"
    "g i j"
    "h i j";
  border-top: 1px solid var(--gold-line); border-left: 1px solid var(--gold-line);
}
.wb-cell {
  position: relative;
  padding: clamp(18px, 2.4vh, 28px) clamp(14px, 1.6vw, 24px);
  border-right: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  transition: background .5s cubic-bezier(.22,.61,.36,1);
}
.wb-cell:hover { background: rgba(246,238,230,.6); }
.wb-cell img { width: auto; max-width: 100%; height: clamp(48px, 5.2vw, 76px); object-fit: contain; object-position: left bottom; margin-bottom: auto; padding-bottom: 14px; }
.wb-a { grid-area: a; background: rgba(246,238,230,.55); } .wb-b { grid-area: b; } .wb-c { grid-area: c; } .wb-d { grid-area: d; } .wb-e { grid-area: e; }
.wb-f { grid-area: f; } .wb-g { grid-area: g; } .wb-h { grid-area: h; } .wb-i { grid-area: i; } .wb-j { grid-area: j; }
.wb-a img { height: clamp(120px, 14vw, 210px); margin-left: auto; margin-right: clamp(0px, 3vw, 48px); padding-bottom: clamp(24px, 4vh, 48px); }
.wb-i img, .wb-j img { height: clamp(72px, 7.6vw, 112px); }
.wb-cell--side { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wb-cell--side img { margin: 0; padding: 0; height: clamp(38px, 3.6vw, 52px); order: 2; }
.wb-no { font-weight: 500; font-size: var(--t-label); letter-spacing: var(--track); color: var(--bronze); }
.wb-t {
  font-family: var(--serif); font-size: var(--t-h4); line-height: 1.15; color: var(--navy);
}
.wb-t--big { font-size: var(--t-h3); line-height: 1.08; }

@media (max-width: 980px) {
  .well-spread { grid-template-columns: 1fr; gap: 44px; }
  .ws-navy { position: static; gap: 28px; }
}
@media (max-width: 600px) {
  .ws-sand {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a a" "b c" "d e" "f g" "h i" "j j";
  }
  .ws-sand { border-left: 0; }
  .wb-cell { border-right: 0; border-bottom: 1px solid var(--gold-line); }
  .wb-cell:nth-child(even) { border-left: 1px solid var(--gold-line); }
  .wb-cell--side { flex-direction: column; align-items: flex-start; }
  .wb-cell--side img { order: 0; }
}

/* ============================================================
   MINDS — full-bleed cinematic band, three consultants
   ============================================================ */
/* full-screen media moments: the render breaks out of the column and
   runs edge to edge, Damac-style — the page becomes the picture */
.wide-media {
  margin-top: clamp(44px, 7vh, 72px);
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: clip;
}
.wide-media img,
.wide-media--film video {
  display: block;
  width: 100%; height: clamp(420px, 82vh, 780px); object-fit: cover;
  /* drifts slowly against the scroll — set by JS as --py */
  transform: translateY(calc(var(--py, 0) * 1px)) scale(1.12);
  will-change: transform;
}
@media (max-width: 720px) { .wide-media img, .wide-media--film video { height: 58vh; min-height: 320px; } }
@media (prefers-reduced-motion: reduce) { .wide-media img, .wide-media--film video { transform: none; } }

/* the film's one control: a small glass disc in the corner — pause, play */
.film-toggle {
  position: absolute; right: var(--gutter); bottom: clamp(18px, 3.2vh, 34px); z-index: 2;
  width: clamp(46px, 3.8vw, 56px); height: clamp(46px, 3.8vw, 56px);
  border-radius: 999px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(250, 245, 238, .6);
  border: 1px solid var(--gold-faint);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: background .4s, border-color .4s, transform .5s cubic-bezier(.22,.61,.36,1);
}
.film-toggle:hover { background: rgba(250, 245, 238, .9); border-color: var(--gold); transform: scale(1.06); }
.film-toggle svg { grid-area: 1 / 1; width: 40%; height: 40%; }
.film-toggle .ft-pause path { fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; }
.film-toggle .ft-play { fill: var(--navy); margin-left: 6%; }
.film-toggle .ft-play, .film-toggle[aria-pressed="true"] .ft-pause { display: none; }
.film-toggle[aria-pressed="true"] .ft-play { display: block; }

/* the experience render stays as it was: a gently curved cinema screen,
   held inside the column — no full-bleed break-out, no drift */
.wide-media--screen { width: auto; margin-left: 0; }
.wide-media--screen img,
.wide-media--screen video {
  display: block; width: 100%;
  height: auto; aspect-ratio: 21 / 9; object-fit: cover; transform: none;
  clip-path: url(#screenClip);
}
@media (max-width: 720px) {
  .wide-media--screen img,
  .wide-media--screen video { aspect-ratio: 4 / 3; height: auto; }
}

/* floating glass button, centred on a wide-media render —
   the header's scrolled glass-capsule treatment, in circular form */
.media-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(60px, 6.4vw, 84px); height: clamp(60px, 6.4vw, 84px);
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(250, 245, 238, .55);
  border: 1px solid var(--gold-faint);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  cursor: pointer;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), background .4s, border-color .4s;
}
.media-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(250, 245, 238, .85);
  border-color: var(--gold);
}
.media-btn svg { width: 38%; height: 38%; fill: var(--navy); }

/* the consultants — after the reference: a solid navy panel rises up each
   picture as it arrives (full, a beat, then down to a band that names the
   person); rest on one and it rises again, carrying the house's mark and
   their words. One gallery: the three design portraits lead, the two
   engineering houses follow, three to a view. */
.cons-group { margin-top: clamp(56px, 8vh, 96px); }
.cg-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--gold-faint);
  text-align: left;
}
.cg-head .label { font-size: var(--t-eyebrow); }
.cg-line { font-size: var(--t-body-l); color: var(--navy-ink); }
.cons-row {
  --cgap: clamp(18px, 2.2vw, 32px);
  margin-top: clamp(32px, 5vh, 56px);
  display: grid; gap: var(--cgap);
  text-align: left;
}
/* the gallery: native scroll-snap does the moving (swipe on touch, the
   arrows on desktop); a card is a third of the row, then a half, then most
   of the screen */
.cons-frame { position: relative; }
.cons-track {
  --per: 3;
  display: flex;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.cons-track::-webkit-scrollbar { display: none; }
.cons-track .rise-card {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--cgap)) / var(--per));
  scroll-snap-align: start;
  outline-offset: -3px;                 /* the track clips anything outside it */
}
@media (prefers-reduced-motion: reduce) { .cons-track { scroll-behavior: auto; } }
/* arrows straddle the row's edges; only the way still open is shown */
.cons-arrow.hs-prev { left: calc(clamp(46px, 3.8vw, 60px) / -2); }
.cons-arrow.hs-next { right: calc(clamp(46px, 3.8vw, 60px) / -2); }
.cons-arrow { transition: background .4s, border-color .4s, opacity .4s, visibility 0s, transform .5s cubic-bezier(.22,.61,.36,1); }
.cons-arrow[hidden] { display: grid; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility 0s .4s; }
@media (max-width: 720px) { .cons-arrow, .cons-arrow[hidden] { display: none; } }
.rise-card {
  --band: 22%;                          /* the resting sheet: the name, and nothing more — JS fits it to the name exactly */
  position: relative; overflow: clip; aspect-ratio: 4 / 5;
  background: var(--navy); color: var(--cream); outline-offset: 6px;
  contain: paint;
}
.rc-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  display: block; opacity: 0;
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1.4s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.rise-card.in .rc-img { opacity: 1; }
.rise-card:hover .rc-img, .rise-card.is-open .rc-img { transform: scale(1.04); }
/* the sheet is the full tile and only ever moves — it waits below the
   picture, slides up to show the name as the tile arrives (JS staggers
   the arrival; nothing here is delayed), and slides to the top when you
   rest on it, uncovering the house's mark and their words beneath */
.rc-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(18px, 2vw, 28px);
  background: linear-gradient(180deg, #0B3557 0%, var(--navy) 100%);
  transform: translate3d(0, 100%, 0);
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.rise-card.in .rc-panel { transform: translate3d(0, calc(100% - var(--band)), 0); }
.rise-card.in:hover .rc-panel, .rise-card.in:focus-within .rc-panel, .rise-card.in.is-open .rc-panel { transform: translate3d(0, 0, 0); }
.rc-head { flex: 0 0 auto; }
.rc-role { font-size: var(--t-micro); letter-spacing: var(--track); color: var(--gold); }
.rc-name { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: var(--t-h4); line-height: 1.15; color: var(--cream); }
.rc-pos { margin-top: 5px; font-size: var(--t-small); line-height: 1.5; color: rgba(246,238,230,.7); }
.rc-logo { display: inline-block; align-self: flex-start; margin-top: clamp(6px, 1vh, 12px); margin-bottom: clamp(10px, 1.6vh, 18px); padding-top: clamp(14px, 1.8vh, 22px); border-top: 1px solid rgba(246,238,230,.18); width: 100%; opacity: 0; transition: opacity .5s; }
.rc-logo img { height: clamp(30px, 2.6vw, 40px); width: auto; max-width: 170px; object-fit: contain; object-position: left center; display: block; filter: brightness(0) invert(1); opacity: .95; }
.rc-logo--sq img { height: clamp(46px, 4.2vw, 62px); }   /* stacked and square marks need the height */
.rc-logo--uha img { height: clamp(36px, 3.2vw, 48px); }  /* uha's tall ascender reads large — held a step below the square marks */
.rc-logo--wide img { height: clamp(32px, 2.8vw, 42px); max-width: 100%; }   /* a long lockup: mark and name on one line */
.rc-logo:hover img { opacity: 1; }
.rc-quote, .rc-body { margin: 0; opacity: 0; transition: opacity .5s; }
.rc-quote { position: relative; padding-left: 20px; }
.rc-quote::before { content: '\201C'; position: absolute; left: 0; top: -.1em; font-family: var(--serif); font-size: 2em; line-height: 1; color: var(--gold); }
.rc-quote p { font-family: var(--sans); font-weight: 300; font-size: var(--t-small); line-height: 1.7; color: rgba(246,238,230,.94); }
.rc-body { max-width: 44ch; font-size: var(--t-body-l); line-height: 1.7; color: rgba(246,238,230,.92); }
.rise-card:hover .rc-logo, .rise-card:focus-within .rc-logo, .rise-card.is-open .rc-logo,
.rise-card:hover .rc-quote, .rise-card:focus-within .rc-quote, .rise-card.is-open .rc-quote,
.rise-card:hover .rc-body, .rise-card:focus-within .rc-body, .rise-card.is-open .rc-body { opacity: 1; transition-delay: .3s; }
@media (max-width: 1020px) { .cons-track { --per: 2; } }
@media (max-width: 640px) {
  .cons-track { --per: 1.18; }          /* the next card peeks in, so the row reads as swipeable */
  .rise-card { aspect-ratio: 4 / 4.6; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-panel, .rc-img, .rc-logo, .rc-quote, .rc-body { transition: none; }
  .rc-img { opacity: 1; }
}

/* ============================================================
   RESIDENCES — a brochure spread. One tall render, the two
   typologies as a hairline ledger, one wide render. No cards:
   separation is gold hairline and air, as everywhere else.
   ============================================================ */
.eyebrow { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; font-size: var(--t-eyebrow); }
.eyebrow::before { content: ''; width: 56px; height: 1px; background: var(--gold); flex: 0 0 auto; }


/* the two typologies, told in type alone. Each is framed the brochure's
   way (pp. 116–117): a gold line in from the page edge that turns down
   through one large curve at the gutter — the pair mirrored across it,
   the inner lines facing — and fades out as it falls. */
.typ-pair {
  --typ-r: clamp(56px, 6.4vw, 120px);          /* the brochure's large curve */
  margin-top: clamp(34px, 5.2vh, 60px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.4vw, 56px);
}
.typ { position: relative; padding-block: clamp(28px, 4.2vh, 46px) clamp(10px, 1.8vh, 20px); }
.typ--l { padding-right: clamp(28px, 4.4vw, 80px); }
.typ--r { padding-left: clamp(28px, 4.4vw, 80px); }
.typ::before {
  content: ''; position: absolute; top: 0; bottom: 0; pointer-events: none;
  border-top: 1px solid var(--gold-line);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.typ--l::before { left: calc(-1 * var(--gutter)); right: 0; border-right: 1px solid var(--gold-line); border-top-right-radius: var(--typ-r); }
.typ--r::before { right: calc(-1 * var(--gutter)); left: 0; border-left: 1px solid var(--gold-line); border-top-left-radius: var(--typ-r); }

/* the numeral beside its range and line — one compact head */
.typ-top {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 14px clamp(22px, 2.8vw, 48px); align-items: end;
}
/* the numeral in the brochure's layered figure — a gold offset behind navy */
.typ-name { display: flex; align-items: baseline; gap: clamp(10px, 1vw, 16px); margin: 0; line-height: .86; color: var(--navy); }
.typ-n {
  font-size: clamp(84px, 8.2vw, 136px); letter-spacing: -.02em;
  text-shadow: .045em .012em 0 rgba(189, 140, 84, .3);
}
.typ-u { font-size: clamp(24px, 2.4vw, 38px); letter-spacing: .05em; color: var(--bronze); }
.typ-sum { padding-bottom: .2em; }
.typ-line { margin-top: 8px; max-width: 36ch; font-size: var(--t-body); line-height: 1.6; color: var(--navy-ink); }

.typ-range {
  font-family: var(--serif); font-size: var(--t-num-m); line-height: 1.1;
  color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.typ-range i { font-style: normal; font-family: var(--sans); font-weight: 300; font-size: .46em; color: var(--bronze); margin-left: .2em; }

/* the particulars on hairlines: the sizes across the full width, then
   homes a floor and the towers sharing one row */
.typ-facts {
  margin-top: clamp(18px, 2.8vh, 28px);
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--gold-faint);
}
.tf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: clamp(10px, 1.4vh, 14px) 0; border-bottom: 1px solid var(--gold-faint);
}
.tf--full {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 16px;
}
.tf:nth-child(3) { border-left: 1px solid var(--gold-faint); padding-left: clamp(16px, 1.8vw, 28px); }
.tf dt { font-weight: 500; font-size: var(--t-micro); line-height: 1.5; letter-spacing: var(--track); text-transform: uppercase; color: var(--bronze); }
.tf dt em { display: block; font-style: normal; font-weight: 300; letter-spacing: .04em; text-transform: none; color: rgba(14, 52, 83, .6); }
.tf dd { margin: 0; }
/* the sizes on one line where there's room, wrapping cleanly where not */
.typ-sizes { list-style: none; display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 1.4vw, 22px); }
.typ-sizes li { font-family: var(--serif); font-size: var(--t-h5); line-height: 1.3; color: var(--navy); font-variant-numeric: tabular-nums; }
/* homes a floor — a figure, then one small gold arch for each home */
.typ-homes { display: flex; align-items: center; gap: 16px; }
.th-n { font-family: var(--serif); font-size: var(--t-h4); line-height: 1; color: var(--navy); }
.th-arcs { display: flex; align-items: flex-end; gap: 7px; }
.th-arcs i { width: 15px; height: 21px; border: 1px solid var(--gold); border-bottom: 0; border-radius: 8px 8px 0 0; }
/* the towers — each a pin into the master plan below, as on the plan itself */
.typ-towers { display: flex; gap: 8px; }
.typ-tw {
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  font-family: var(--serif); font-size: var(--t-h5); line-height: 1; color: var(--navy); text-decoration: none;
  transition: background .4s, color .4s, border-color .4s;
}
.typ-tw:hover, .typ-tw:focus-visible { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.typ-cta { margin-top: clamp(16px, 2.6vh, 26px); padding: 14px 30px; }

/* a narrower pair: the numeral sits above its range */
@media (max-width: 1100px) and (min-width: 861px) {
  .typ-top { grid-template-columns: 1fr; }
}
/* where the sizes can't hold one line, three to a row — an even 3 + 3 */
@media (max-width: 1100px) {
  .typ-sizes { display: grid; grid-template-columns: repeat(3, max-content); }
}
/* stacked, both frames turn the same way so the two columns align */
@media (max-width: 860px) {
  .typ-pair { grid-template-columns: 1fr; gap: clamp(24px, 5vh, 40px); }
  .typ--r { padding-left: 0; padding-right: clamp(28px, 4.4vw, 80px); }
  .typ--r::before {
    left: calc(-1 * var(--gutter)); right: 0;
    border-left: 0; border-top-left-radius: 0;
    border-right: 1px solid var(--gold-line); border-top-right-radius: var(--typ-r);
  }
}
@media (max-width: 480px) {
  .typ-top { grid-template-columns: 1fr; }
  .tf--full { grid-template-columns: 1fr; gap: 8px; }
  .typ-range { white-space: normal; }
  .typ-cta { width: 100%; }
}

/* the five things that make a difference, on one hairline */
.res-keys {
  list-style: none; margin-top: clamp(52px, 7.5vh, 90px);
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint);
}
.res-keys li {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(20px, 3vh, 30px) clamp(14px, 1.8vw, 28px);
  border-left: 1px solid var(--gold-faint);
}
.res-keys li:first-child { border-left: 0; padding-left: 0; }
.rk-n { font-family: var(--serif); font-weight: 400; font-size: var(--t-h4); line-height: 1.15; color: var(--navy); }
.rk-n i { font-style: normal; font-family: var(--sans); font-weight: 300; font-size: .62em; color: var(--bronze); margin: 0 .18em 0 .05em; }
.rk-t { margin-top: auto; font-size: var(--t-small); line-height: 1.55; color: rgba(14,52,83,.72); }

@media (max-width: 960px) {
  .res-keys { grid-template-columns: 1fr 1fr; }
  .res-keys li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .res-keys li:nth-child(n+3) { border-top: 1px solid var(--gold-faint); }
}
@media (max-width: 1200px) and (min-width: 961px) {
  .res-keys { grid-template-columns: repeat(3, 1fr); }
  .res-keys li:nth-child(4) { border-left: 0; padding-left: 0; }
  .res-keys li:nth-child(n+4) { border-top: 1px solid var(--gold-faint); }
}

/* ---------- master plan: the plan on the left, the tower rail and
   its unit ledger on the right. Choosing a tower — on the rail or
   a pin on the plan — settles its homes in beside it. ---------- */
.plan { margin-top: clamp(44px, 6.4vh, 80px); }
.plan-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; }
.plan-head .label { display: block; margin-bottom: 14px; }
.plan-title { margin: 0; }
.plan-line { max-width: 40ch; padding-bottom: .3em; font-size: var(--t-body-l); line-height: 1.7; color: var(--navy-ink); }
.plan-wrap {
  margin-top: clamp(18px, 2.6vh, 30px);   /* the plan sits close under its title */
  display: grid; grid-template-columns: minmax(0, 8.6fr) minmax(0, 3.4fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
/* the plate takes the side's full height — the plan fills it edge to edge */
.plan-plate {
  position: relative; margin: 0; min-height: 0;
  border: 1px solid var(--gold-faint); background: var(--white);
  overflow: clip;
  width: 100%;                 /* the column sets the width; the ratio only sets how tall it must be */
  aspect-ratio: 2180 / 1140;   /* never shorter than the plan itself; taller when the side column is */
  container-type: size;
}
/* the plan and its pins in one box of the image's own proportions, covering
   the plate the way object-fit: cover would — pins are placed in image
   percentages, so they stay on the tower cores whatever the crop */
.plan-map {
  position: absolute; left: 50%; top: 50%;
  width: 100%; aspect-ratio: 2180 / 1140;
  transform: translate(-50%, -50%);
}
@supports (width: 1cqw) {
  .plan-map { width: max(100cqw, 100cqh * 2180 / 1140); }
}
.plan-map img { display: block; width: 100%; height: 100%; }

/* the pins: a gold ring on each tower core, the live one filled */
.plan-pin {
  position: absolute; left: var(--x); top: var(--y);
  width: clamp(30px, 3.4vw, 46px); height: clamp(30px, 3.4vw, 46px);
  transform: translate(-50%, -50%);
  border-radius: 999px; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--gold);
  color: var(--navy);
  font-family: var(--serif); font-size: var(--t-h5); line-height: 1;
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .4s, color .4s, box-shadow .5s;
}
.plan-pin::before {
  content: ''; position: absolute; inset: -7px; border-radius: 999px;
  border: 1px solid var(--gold); opacity: 0;
  transition: opacity .5s, transform .6s cubic-bezier(.22,.61,.36,1);
  transform: scale(.85);
}
.plan-pin:hover, .plan-pin.is-active { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.plan-pin.is-active::before { opacity: 1; transform: none; }
@keyframes pinPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.plan-pin.is-active::after {
  content: ''; position: absolute; inset: -2px; border-radius: 999px;
  border: 1px solid var(--gold);
  animation: pinPulse 2.2s cubic-bezier(.22,.61,.36,1) infinite;
}
.plan-zoom {
  position: absolute; right: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px);
  width: 46px; height: 46px; border-radius: 999px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(250, 245, 238, .82); border: 1px solid var(--gold-faint);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .4s, border-color .4s;
}
.plan-zoom:hover { background: var(--cream); border-color: var(--gold); }
.plan-zoom svg { width: 20px; height: 20px; }
.plan-zoom svg path, .plan-zoom svg circle { fill: none; stroke: var(--navy); stroke-width: 1.4; stroke-linecap: round; }

/* the side: rail, ledger, actions — pinned to the plate's height */
.plan-side { display: flex; flex-direction: column; min-height: 0; }
.tw-rail {
  position: relative; display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--gold-faint);
}
.tw-tab {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 2px 0 14px; background: none; border: 0; cursor: pointer;
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-num-m); line-height: 1; color: var(--bronze);
  transition: color .45s cubic-bezier(.22,.61,.36,1);
}
.tw-tab:hover, .tw-tab.is-active { color: var(--navy); }
.tw-rail::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: var(--tw, 0px); height: 2px; background: var(--gold);
  transform: translateX(var(--tx, 0px));
  transition: transform .6s cubic-bezier(.32,.72,.28,1), width .6s cubic-bezier(.32,.72,.28,1);
}
.tw-panels { flex: 1 1 auto; margin-top: clamp(16px, 2.4vh, 24px); display: grid; }
.tw-panel { grid-area: 1 / 1; visibility: hidden; }
.tw-panel[hidden] { display: block; }
.tw-panel.is-on { visibility: visible; }
@keyframes twIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tw-panel.is-on { animation: twIn .6s cubic-bezier(.32,.72,.28,1) both; }
.tw-kind { font-weight: 500; font-size: var(--t-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--gold); }
.tw-units { list-style: none; margin-top: 10px; }
.tw-units li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: clamp(10px, 1.6vh, 16px) 0; border-top: 1px solid var(--gold-faint);
  font-size: var(--t-small); color: var(--navy-ink);
}
.tw-units li:last-child { border-bottom: 1px solid var(--gold-faint); }
.tw-units b { font-family: var(--serif); font-weight: 400; font-size: var(--t-h5); color: var(--navy); font-variant-numeric: tabular-nums; }
.tw-units b i { font-style: normal; font-family: var(--sans); font-weight: 300; font-size: var(--t-label); color: var(--bronze); margin-left: 4px; }
.plan-acts { margin-top: auto; padding-top: clamp(20px, 3vh, 28px); }
.plan-acts .capsule { width: 100%; }
.plan-acts .more-link { margin-top: 12px; }

/* 13-inch laptops (MacBook 1280–1470 px): the plan takes a little more of
   the row and the unit list tightens, so the list never outgrows the plan
   and the whole site plan shows uncropped */
@media (min-width: 1201px) and (max-width: 1520px) {
  .plan-wrap { grid-template-columns: minmax(0, 9.2fr) minmax(0, 2.8fr); gap: clamp(28px, 3vw, 44px); }
  .tw-units li { padding: 9px 0; }
  .tw-tab { padding-bottom: 10px; }
}
/* narrower: the side outgrows the plan, so the plan keeps its own height */
@media (max-width: 1200px) {
  .plan-wrap { align-items: start; }
  .tw-units li { padding: 9px 0; }   /* the side tightens so it ends nearer the plan's own height */
}
@media (max-width: 960px) {
  .plan-wrap { grid-template-columns: 1fr; gap: 28px; }
  .plan-acts .capsule { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-rail::after, .plan-pin, .plan-pin::before { transition: none; }
  .tw-panel.is-on { animation: none; }
  .plan-pin.is-active::after { animation: none; opacity: 0; }
}

.plan-veil {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 64px);
  background: rgba(0, 22, 38, .94);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1), visibility 0s .5s;
}
.plan-veil.open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.plan-stage { width: min(1500px, 100%); margin: 0; }
.plan-stage img {
  width: 100%; max-height: 82vh; object-fit: contain; display: block;
  background: var(--white);
  transform: scale(.985); transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.plan-veil.open .plan-stage img { transform: none; }
.plan-stage figcaption { margin-top: 12px; text-align: center; color: rgba(246,238,230,.75); opacity: 1; }

/* ============================================================
   SEVEN LEVELS — an arrow-driven gallery that also advances on
   its own. No pinning, no scroll hijack: the page scrolls past
   normally and the levels move at their own pace.
   ============================================================ */
/* the gallery carries its own weight — less air above and below it */
.sect--levels { padding-top: clamp(60px, 8vh, 104px); padding-bottom: clamp(40px, 5vh, 68px); }

/* the brochure's level marks, as the way in */
.lv-rail {
  margin-top: clamp(36px, 5.4vh, 58px);
  display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;
  gap: clamp(4px, 1vw, 14px);
}
.lv-tab {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px clamp(10px, 1.4vw, 20px) 14px;
  background: none; border: 0; border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: border-color .45s cubic-bezier(.22,.61,.36,1);
}
/* the brand's level marks, inlined and coloured through currentColor */
.lv-ico {
  width: clamp(38px, 3.4vw, 50px); height: clamp(38px, 3.4vw, 50px);
  color: var(--bronze);
  transition: color .45s cubic-bezier(.22,.61,.36,1);
}
.lv-ico svg { width: 100%; height: 100%; display: block; }
.lv-t {
  font-weight: 500; font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--navy-ink); transition: color .45s;
}
.lv-tab:hover .lv-ico, .lv-tab.is-active .lv-ico { color: var(--gold); }
.lv-tab.is-active { border-bottom-color: var(--gold); }
.lv-tab.is-active .lv-t { color: var(--bronze); }
@media (max-width: 720px) { .lv-t { display: none; } .lv-rail { gap: 0; } }

.hscroll {
  margin-top: clamp(32px, 4.6vh, 54px);
  width: 100vw; margin-left: calc(50% - 50vw);
}
.hscroll-frame { position: relative; }
.hscroll-track {
  display: flex; align-items: stretch;
  gap: clamp(16px, 2.2vw, 36px);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.hscroll-track::-webkit-scrollbar { display: none; }
/* drag to travel — snap and smoothing step aside while the hand is down */
@media (hover: hover) { .hscroll-track { cursor: grab; } }
.hscroll-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none; -webkit-user-select: none;
}
.hscroll-track.is-dragging img { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hscroll-track { scroll-behavior: auto; } }

.hslide {
  position: relative; flex: 0 0 auto;
  width: min(47vw, 664px);
  scroll-snap-align: center;
  overflow: clip;
}
.hslide img {
  width: 100%; height: min(43vh, 404px); object-fit: cover; display: block;
}
.hslide-cap {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(58px, 8.5vh, 98px) clamp(16px, 1.8vw, 32px) clamp(16px, 2.4vh, 26px);
  /* the level's name reads over the render, so the foot is carried deeper */
  background: linear-gradient(180deg, rgba(0,30,51,0) 0%, rgba(0,30,51,.42) 34%, rgba(0,30,51,.78) 68%, rgba(0,30,51,.92) 100%);
  color: var(--cream);
}
.hslide-no {
  font-family: var(--sans); font-weight: 500; font-size: var(--t-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
  text-shadow: 0 1px 12px rgba(0,22,38,.65);
}
.hslide-title { margin-top: 8px; font-size: clamp(20px, 1.9vw, 29px); line-height: 1.1; color: var(--cream); }
/* the amenities, unfolding under the title on hover */
.hslide-list {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 5px 18px;
  max-width: 60ch;
  max-height: 0; opacity: 0; overflow: clip; margin-top: 0;
  transition: max-height .75s cubic-bezier(.22,.61,.36,1), opacity .55s cubic-bezier(.22,.61,.36,1), margin-top .55s cubic-bezier(.22,.61,.36,1);
}
.hslide-list li {
  position: relative; padding-left: 14px;
  font-size: var(--t-caption); line-height: 1.6; color: rgba(246,238,230,.92);
}
.hslide-list li::before { content: ''; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: var(--gold); }
.hslide-list li.more { color: var(--gold); }
.hslide:hover .hslide-list, .hslide:focus-within .hslide-list { max-height: 170px; opacity: 1; margin-top: 12px; }
@media (hover: none) { .hslide-list { max-height: none; opacity: 1; margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .hslide-list { transition: none; } }

/* arrows — glass discs on the frame's edges */
.hs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: clamp(46px, 3.8vw, 60px); height: clamp(46px, 3.8vw, 60px);
  border-radius: 999px; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(250, 245, 238, .72);
  border: 1px solid var(--gold-faint);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition: background .4s, border-color .4s, opacity .4s, transform .5s cubic-bezier(.22,.61,.36,1);
}
.hs-prev { left: clamp(10px, 1.6vw, 26px); }
.hs-next { right: clamp(10px, 1.6vw, 26px); }
.hs-arrow svg { width: 40%; height: 40%; }
.hs-arrow svg path {
  fill: none; stroke: var(--navy); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.hs-arrow:hover { background: var(--cream); border-color: var(--gold); }
.hs-prev:hover { transform: translateY(-50%) translateX(-3px); }
.hs-next:hover { transform: translateY(-50%) translateX(3px); }
.hs-arrow[disabled] { opacity: .3; pointer-events: none; }
@media (max-width: 720px) { .hs-arrow { display: none; } }   /* swipe instead */

/* travel line — reads the real scroll position */
.hscroll-progress {
  margin: clamp(24px, 3.6vh, 38px) auto 0;
  width: min(320px, 46vw); height: 1px;
  background: var(--gold-faint); overflow: hidden;
}
.hscroll-progress i {
  display: block; height: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 860px) {
  .hslide { width: min(86vw, 640px); }
  .hslide img { height: min(56vh, 460px); }
}

/* ============================================================
   EXPERIENCE — centre visit + schedule form
   ============================================================ */
.exp-cta { margin-top: clamp(36px, 5vh, 56px); text-align: center; }

/* the last invitation rests on the emblem, drawn large and faint behind it */
#journey { position: relative; overflow: clip; }
#journey .sect-inner { position: relative; z-index: 1; }
.journey-mark {
  position: absolute; left: 50%; top: clamp(18px, 3vh, 36px);
  height: min(112%, 680px); width: auto;
  transform: translate(-50%, 0) scale(.96); transform-origin: 50% 0;
  pointer-events: none;
  fill: none; stroke: var(--gold); stroke-width: .14;
  opacity: 0;
}
.journey-mark.in {
  opacity: .2; transform: translate(-50%, 0) scale(1);
  transition: opacity 1.6s cubic-bezier(.22,.61,.36,1), transform 2.2s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) { .journey-mark, .journey-mark.in { transition: none; transform: translate(-50%, 0); } }

.form-panel {
  margin: clamp(56px, 8vh, 88px) auto 0;
  max-width: 720px;
  padding: clamp(36px, 5vh, 56px) clamp(24px, 3vw, 56px);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  text-align: center;
}
.form-panel .label { display: block; margin-bottom: 10px; }
.form-grid {
  margin-top: 26px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px clamp(24px, 3vw, 48px);
  text-align: left;
}
.form-grid .ffield--wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.ffield { padding-top: 18px; }
.ffield label, .ffield .flabel {
  display: block; font-family: var(--sans); font-weight: 500;
  font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--bronze); margin-bottom: 4px;
}
.ffield input, .ffield select {
  width: 100%; background: transparent; border: 0; outline: 0; border-radius: 0;
  border-bottom: 1px solid rgba(14,52,83,.4);
  font-family: var(--sans); font-weight: 300; font-size: 16px; color: var(--navy-ink);
  padding: 6px 0 10px;
  transition: border-color .4s;
  appearance: none; -webkit-appearance: none;
}
.ffield select { cursor: pointer; }
.ffield input:focus, .ffield select:focus { border-bottom-color: var(--gold); }
.ffield input::-webkit-calendar-picker-indicator { opacity: .55; }

/* chip radios — Configuration */
.chiprow { display: flex; gap: 12px; padding-top: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: var(--t-fine); letter-spacing: var(--track); text-transform: uppercase; color: var(--navy);
  padding: 10px 22px; border: 1px solid rgba(14,52,83,.4); border-radius: 999px;
  transition: background .35s, color .35s, border-color .35s;
}
.chip input:checked + span { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.form-actions { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.form-note { font-size: var(--t-small); }
.form-done { padding: 26px 0 6px; text-align: center; }
.form-done .t { font-weight: 500; font-size: var(--t-h5); color: var(--bronze); }
.form-done p { margin-top: 8px; font-size: var(--t-small); }
.form-err { margin: 14px 0 -6px; font-size: var(--t-small); color: #B5624A; }
form.is-sending button[type="submit"] { opacity: .55; cursor: progress; pointer-events: none; }

/* ============================================================
   MODAL — begin your journey
   ============================================================ */
.modal-veil {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(0, 30, 51, .58);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s cubic-bezier(.22,.61,.36,1), visibility 0s .45s;
}
.modal-veil.open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.modal-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: min(88vh, 88svh); overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--gold-line); border-radius: 26px;
  padding: clamp(36px, 6vh, 56px) clamp(24px, 4vw, 56px) clamp(32px, 5vh, 48px);
  text-align: center;
  transform: translateY(22px);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.modal-veil.open .modal-panel { transform: none; }
.modal-close {
  position: absolute; top: 16px; right: 22px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 300; font-size: var(--t-num-m); line-height: 1;
  color: var(--bronze);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), color .3s;
}
.modal-close:hover { color: var(--navy); transform: rotate(90deg); }
.modal-title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-h4); line-height: 1.25;
  color: var(--navy);
  padding-bottom: 16px;
  position: relative;
}
.modal-title::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 34px; height: 2px; background: var(--gold);
}
.modal-panel .form-grid { margin-top: 22px; }

/* ============================================================
   THE NEOPOLIS — live map + drive times
   ============================================================ */
/* brochure spread: category accordion left, live map right */
.addr-grid {
  margin-top: clamp(48px, 8vh, 88px);
  display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr);
  gap: 44px clamp(44px, 5vw, 96px);
  align-items: start;
  text-align: left;
}
.addr-acc details { border-top: 1px solid var(--gold-faint); }
.addr-acc details:last-of-type { border-bottom: 1px solid var(--gold-faint); }
.addr-acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 17px 0;
  font-family: var(--sans); font-weight: 500; font-size: var(--t-small);
  text-transform: uppercase; color: var(--navy-ink);
  transition: color .4s;
}
.addr-acc summary::-webkit-details-marker { display: none; }
.addr-acc summary:hover { color: var(--navy); }
.addr-acc details[open] summary { color: var(--navy); font-weight: 700; }
.addr-acc summary .x {
  font-family: var(--sans); font-weight: 300; font-size: var(--t-h5); line-height: 1;
  color: var(--bronze); transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.addr-acc details[open] summary .x { transform: rotate(45deg); }
.addr-acc .acc-rows { padding: 2px 0 20px; }
.addr-acc .row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 9px 0; cursor: pointer;
}
.addr-acc .row .nm { font-weight: 300; font-size: var(--t-body); color: var(--navy-ink); transition: color .3s; }
.addr-acc .row:hover .nm { color: var(--bronze); }
.addr-acc .row .dots { flex: 1; border-bottom: 1px dotted rgba(138, 98, 57, .35); transform: translateY(-4px); }
.addr-acc .row .mn { font-weight: 500; font-size: var(--t-small); color: var(--bronze); white-space: nowrap; }
.addr-acc details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .5s cubic-bezier(.22,.61,.36,1), content-visibility .5s allow-discrete;
}
.addr-acc details[open]::details-content { block-size: auto; }

.map-wrap {
  position: sticky; top: 108px;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--gold-line);
}
#neoMap { height: clamp(440px, 62vh, 640px); background: #E9E4DC; }
#neoMap .leaflet-control-attribution { font-size: 9px; }
@media (max-width: 980px) {
  .addr-grid { grid-template-columns: 1fr; }
  .map-wrap { position: relative; top: auto; }
  #neoMap { height: 60vh; min-height: 380px; }
}

/* project marker: gold-ringed logo with a soft pulse */
.mk-home-wrap { pointer-events: none; }
.mk-home {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,30,51,.92); border: 1.5px solid var(--gold);
}
.mk-home::after {
  content: ''; position: absolute; inset: -7px; border-radius: 999px;
  border: 1px solid rgba(227,162,68,.55);
  animation: mkPulse 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes mkPulse {
  0% { transform: scale(.9); opacity: .9; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mk-home::after { animation: none; opacity: 0; } }
/* leaflet.css forces width:auto on marker-pane imgs — out-specify it */
#neoMap .mk-home img { width: 32px !important; height: auto !important; }
.mk-home-tag {
  position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%);
  font-family: var(--sans); font-weight: 500; font-size: var(--t-micro);
  text-transform: uppercase; text-align: center; line-height: 1.7; white-space: nowrap;
  color: var(--navy); text-shadow: 0 1px 6px rgba(255,255,255,.9);
}
/* destination pin — bare navy location icon, dropped on hover */
.mk-pin-wrap { pointer-events: none; }
.mk-pin { width: 100%; height: 100%; animation: pinDrop .45s cubic-bezier(.22,.61,.36,1); transform-origin: 50% 100%; }
.mk-pin path { fill: var(--navy); stroke: rgba(255,255,255,.85); stroke-width: 1; }
.mk-pin circle { fill: var(--cream); }
@keyframes pinDrop {
  from { transform: translateY(-12px) scale(.85); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .mk-pin { animation: none; } }

/* destination labels (.leaflet-tooltip.mk-tip beats leaflet.css's white default) */
.leaflet-tooltip.mk-tip {
  background: rgba(0,30,51,.92); border: 1px solid rgba(227,162,68,.45);
  border-radius: 8px; box-shadow: none;
  color: var(--cream); padding: 6px 11px;
}
.mk-tip b { font-weight: 500; font-size: var(--t-caption); }
.mk-tip span { margin-left: 8px; font-weight: 500; font-size: var(--t-micro); text-transform: uppercase; color: var(--gold); }
.leaflet-tooltip.mk-tip::before { display: none; }


/* ============================================================
   PARTNERSHIPS — three houses on one hairline, each carrying its
   own colour quietly (a rule above, a wash beneath on hover).
   Rest on one and its story unfolds.
   ============================================================ */
.partners {
  margin-top: clamp(52px, 7.5vh, 88px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.partner {
  position: relative; overflow: clip;
  min-height: clamp(460px, 62vh, 640px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(34px, 5vh, 58px) clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px);
  color: var(--cream); text-align: center;
  background: var(--pc);
}
/* the scene in monochrome, washed in the house's colour */
.pt-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(1.02);
  transform: scale(1.04);
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1), opacity .8s;
}
.pt-veil {
  position: absolute; inset: 0;
  background: var(--pc); mix-blend-mode: multiply; opacity: .84;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1);
}
.pt-veil::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.34) 100%);
}
.partner:hover .pt-bg, .partner:focus-within .pt-bg { transform: scale(1); }
.partner:hover .pt-veil, .partner:focus-within .pt-veil { opacity: .93; }
.pt-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* the house's own mark, in cream on its colour. Every mark is centred in a
   box of one height, so all three tag lines start on the same line. */
.pt-name { margin: 0; display: grid; place-items: center; height: clamp(64px, 6.4vw, 92px); }
.pt-logo { display: block; width: auto; max-width: min(78%, 300px); max-height: 100%; height: clamp(30px, 3vw, 44px); object-fit: contain; }
.pt-logo--stack { height: clamp(52px, 5.1vw, 76px); }    /* monogram over wordmark — held to the others' visual weight */
.pt-logo--wide  { height: clamp(18px, 1.8vw, 26px); }     /* a long, thin wordmark */
.pt-logo--ink   { filter: brightness(0) invert(1); opacity: .96; }   /* a navy file, turned cream */
.pt-tag { font-family: var(--sans); font-weight: 500; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: rgba(246,238,230,.82); line-height: 1.7; white-space: nowrap; }
.pt-more {
  position: relative;
  margin: 0 calc(-1 * clamp(22px, 2.6vw, 34px)) calc(-1 * clamp(22px, 2.6vw, 34px));
  padding: clamp(30px, 4vh, 52px) clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px);
  background: linear-gradient(180deg, rgba(4,18,30,0) 0%, rgba(4,18,30,.66) 44%, rgba(4,18,30,.78) 100%);
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.pt-more p { margin: 0 auto; max-width: 36ch; font-size: var(--t-small); line-height: 1.7; color: rgba(246,238,230,.94); text-wrap: pretty; }
.partner:hover .pt-more, .partner:focus-within .pt-more { opacity: 1; transform: none; }
/* the three stories sit on one line: the script levels the story blocks
   to the tallest, and each reads from its top (client round, 18 Sep) */
.pt-more { display: flex; flex-direction: column; justify-content: flex-start; }
@media (max-width: 860px) {
  .partners { grid-template-columns: 1fr; }
  .partner { min-height: 420px; }
  .pt-more { opacity: 1; transform: none; }
}
@media (max-width: 420px) { .pt-tag { white-space: normal; } }
@media (hover: none) { .pt-more { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pt-bg, .pt-veil, .pt-more { transition: none; } }

/* ============================================================
   FLOATING ENQUIRY — the one persistent CTA, after the Damac
   reference Ruben liked: present, never shouting. Appears once
   the hero is behind you; steps aside for the menu and modals.
   ============================================================ */
.floatcta {
  position: fixed; z-index: 55;
  right: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 2.4vw, 34px);
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.floatcta.on { opacity: 1; transform: none; pointer-events: auto; }
.fc-chat {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 999px;
  background: rgba(250, 245, 238, .82);
  border: 1px solid var(--gold-faint);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition: background .4s, border-color .4s, transform .5s cubic-bezier(.22,.61,.36,1);
}
.fc-chat svg { width: 21px; height: 21px; }
.fc-chat svg path {
  fill: none; stroke: var(--navy); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.fc-chat:hover { background: var(--cream); border-color: var(--gold); transform: translateY(-2px); }
.fc-enquire {
  border: 1px solid var(--navy); border-radius: 999px; cursor: pointer;
  background: var(--navy); color: var(--cream);
  font-family: var(--sans); font-weight: 500;
  font-size: var(--t-fine); letter-spacing: var(--track); text-transform: uppercase;
  padding: 15px 26px;
  transition: background .45s cubic-bezier(.22,.61,.36,1), color .45s, transform .5s cubic-bezier(.22,.61,.36,1);
}
.fc-enquire:hover { background: var(--cream); color: var(--navy); transform: translateY(-2px); }
body.no-scroll .floatcta, .floatcta.foot-in { opacity: 0; pointer-events: none; }   /* steps aside for menus, modals and the footer */
@media (max-width: 560px) { .fc-enquire { padding: 14px 20px; font-size: var(--t-fine); } }
@media (prefers-reduced-motion: reduce) { .floatcta { transition: none; } }

/* ============================================================
   FILM — the walkthrough, full screen over the page
   ============================================================ */
.film-veil {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 64px);
  background: rgba(0, 22, 38, .94);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1), visibility 0s .5s;
}
.film-veil.open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.film-stage { width: min(1600px, 100%); }
.film-stage video {
  width: 100%; max-height: 84vh; display: block;
  background: #000;
  transform: scale(.985);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.film-veil.open .film-stage video { transform: none; }
.film-close {
  position: absolute; top: clamp(14px, 2.4vw, 30px); right: clamp(16px, 2.6vw, 36px);
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 300; font-size: var(--t-num-m); line-height: 1;
  color: var(--gold);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), color .3s;
}
.film-close:hover { color: var(--cream); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .film-veil, .film-stage video, .film-close { transition: none; }
}

/* ============================================================
   NOTES & QUESTIONS — the essentials as an accordion on hairlines
   ============================================================ */
.faq-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 40px clamp(48px, 7vw, 130px); align-items: start;
}
.faq-side { position: sticky; top: clamp(96px, 14vh, 140px); text-align: left; }
.faq-side .label { display: block; margin-bottom: 20px; font-size: var(--t-eyebrow); }
.faq-side .display { max-width: 10em; }
.faq-line { margin-top: clamp(18px, 2.6vh, 26px); max-width: 34ch; font-size: var(--t-body); line-height: 1.7; color: var(--navy-ink); }
.faq-acc { border-top: 1px solid var(--gold-faint); }
.faq-acc details { border-bottom: 1px solid var(--gold-faint); }
.faq-acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(18px, 2.6vh, 26px) 0;
  font-family: var(--serif); font-size: var(--t-h4); line-height: 1.2; color: var(--navy);
  transition: color .35s;
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary:hover, .faq-acc details[open] summary { color: var(--bronze); }
.faq-acc summary .x { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.faq-acc summary .x::before, .faq-acc summary .x::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--gold);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.faq-acc summary .x::after { transform: rotate(90deg); }
.faq-acc details[open] summary .x::after { transform: rotate(0deg); }
.faq-a { padding: 0 0 clamp(20px, 3vh, 28px); max-width: 62ch; }
.faq-a p { font-size: var(--t-body-l); line-height: 1.8; color: var(--navy-ink); }
.faq-a a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold-line); transition: color .35s; }
.faq-a a:hover { color: var(--bronze); }
/* the specification's rows inside an open row (residences) */
.faq-a .spec-ledger { margin-top: 0; border-top: 0; max-width: none; }
.faq-a .spec-ledger li { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.faq-a .spec-ledger li:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-side { position: static; }
}

/* ============================================================
   FOOTER — identity, mandates, contact, visit, a quiet subscribe;
   the night render is the full-bleed ground behind everything
   ============================================================ */
#foot {
  position: relative; color: var(--cream); overflow: clip;
  /* the brand asset's textured gradient (brand book p18): one blue across the
     whole field, travelling only slightly. Set a shade under the target,
     because the grain above lifts it back onto #294B78–#355986. */
  background: linear-gradient(160deg, #234C86 0%, #21467C 100%);
}
/* the brand's textured gradient (brand book p18) laid over the ground:
   soft rounded fields, then the grain that carries the light */
.foot-tex {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
/* two rounded fields that follow the ground's own light — the lighter one
   held to the left where the gradient starts, the deeper one to the right */
/* the deeper field to the left, turning on its bottom-right corner */
.foot-tex::before {
  content: ''; position: absolute; left: 0; top: -10%;
  width: 27%; height: 64%;
  border-radius: 0 0 clamp(64px, 6.5vw, 120px) 0;
  background: #08203C; opacity: .34;
}
/* the lighter one to the right, turning on its top-left */
.foot-tex::after {
  content: ''; position: absolute; right: 0; top: 32%; bottom: -14%;
  width: 31%;
  border-radius: clamp(64px, 6.5vw, 120px) 0 0 0;
  background: #86A6CD; opacity: .12;
}
/* the paper grain over both fields — a tile, repeated at its own size */
/* the grain rides above both fields — light-blue specks on the blue, the
   brand asset's own tooth. No white, and no blend mode to go wrong. */
.foot-grain {
  position: absolute; inset: 0; z-index: 1;
  background: url(../assets/img/grain.png) repeat;
  opacity: 1;
}
/* the emblem, drawn large and faint, as the footer's only ornament */
.foot-mark {
  position: absolute; right: clamp(-120px, -7vw, -40px); top: -6%; z-index: 1;
  height: 112%; width: auto; pointer-events: none;
  fill: none; stroke: var(--gold); stroke-width: .22; opacity: .045;
}
.foot-shell { position: relative; z-index: 2; padding: clamp(56px, 8vh, 96px) var(--gutter) 0; }

/* identity row — horizontal logo left, mandates right */
.foot-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
  padding-bottom: clamp(32px, 5vh, 52px);
  border-bottom: 1px solid var(--cream-line);
  flex-wrap: wrap;
}
.foot-brand { display: block; text-decoration: none; color: var(--cream); }
.fb-logo { display: block; width: clamp(196px, 17vw, 250px); height: auto; fill: currentColor; }
.foot-rera { text-align: right; font-size: var(--t-fine); line-height: 1.8; color: rgba(246,238,230,.82); }
/* follow — up with the identity, labelled, where it can be seen */
.foot-follow { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); }
.foot-follow .label { margin: 0; white-space: nowrap; }
.ff-row { display: flex; gap: clamp(10px, 1.1vw, 16px); }
.ff-row a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ff-row a {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cream); text-decoration: none;
  font-weight: 500; font-size: var(--t-caption); letter-spacing: var(--track); text-transform: uppercase;
  transition: color .35s;
}
.ff-row a svg {
  width: 38px; height: 38px; padding: 9px; border-radius: 999px;
  border: 1px solid rgba(246,238,230,.35);
  transition: border-color .4s, transform .5s cubic-bezier(.22,.61,.36,1);
}
.ff-row a svg path, .ff-row a svg rect, .ff-row a svg circle {
  fill: none; stroke: var(--cream); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.ff-row a svg .dot { fill: var(--cream); stroke: none; }
.ff-row a:hover { color: var(--gold); }
.ff-row a:hover svg { border-color: var(--gold); transform: translateY(-2px); }
.foot-rera a { color: rgba(246,238,230,.9); text-decoration: none; border-bottom: 1px solid rgba(246,238,230,.3); }   /* the light blue no longer reads on the brand blue ground */
.foot-rera a:hover { color: var(--gold); }

.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 44px clamp(26px, 3vw, 56px);
  padding: clamp(40px, 6vh, 64px) 0 clamp(36px, 5vh, 56px);
}
.fcol .label { display: block; margin-bottom: 16px; }
.fc-line {
  display: block; padding: 4px 0;
  font-weight: 300; font-size: var(--t-body); color: var(--cream); text-decoration: none;
  transition: color .35s;
}
.fc-line:hover { color: var(--gold); }
.fc-addr { font-size: var(--t-body); line-height: 1.85; color: rgba(246,238,230,.88); }
.fc-nav { display: flex; flex-direction: column; align-items: flex-start; }
.fc-nav a {
  padding: 4px 0; font-weight: 300; font-size: var(--t-body);
  color: rgba(246,238,230,.88); text-decoration: none;
  transition: color .35s;
}
.fc-nav a:hover { color: var(--gold); }

/* subscribe — one line, one arrow */
.fc-subline { margin-bottom: 18px; font-size: var(--t-small); line-height: 1.7; color: rgba(246,238,230,.85); }
.sub-row {
  display: flex; align-items: flex-end; gap: 12px;
  border-bottom: 1px solid rgba(246,238,230,.55);
  transition: border-color .4s;
}
.sub-row:focus-within { border-color: var(--gold); }
.sub-row input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; border-radius: 0;
  font-family: var(--sans); font-weight: 300; font-size: var(--t-body); color: var(--cream);
  padding: 8px 0 12px;
}
.sub-row input::placeholder { color: rgba(246,238,230,.5); }
.sub-go { flex: 0 0 auto; background: none; border: 0; cursor: pointer; padding: 8px 2px 10px; }
.sub-go svg { width: 24px; height: 24px; display: block; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.sub-go svg path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sub-go:hover svg { transform: translateX(4px); }

.consent {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  margin-top: 18px; max-width: 400px;
}
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent .box {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px;
  border: 1px solid rgba(227,162,68,.8); position: relative;
  transition: background .3s, border-color .3s;
}
.consent input:checked + .box { background: var(--gold); border-color: var(--gold); }
.consent input:focus-visible + .box { outline: 2px solid var(--gold); outline-offset: 2px; }
.consent .ctext { font-size: var(--t-caption); line-height: 1.6; color: rgba(246,238,230,.72); }
.consent .ctext .textlink {
  font-size: inherit; letter-spacing: 0; text-transform: none;
  color: rgba(246,238,230,.85); border-bottom-color: rgba(246,238,230,.35);
}
.consent .ctext .textlink:hover { color: var(--gold); border-bottom-color: var(--gold); }

.foot-disc { max-width: 980px; color: rgba(246,238,230,.74); opacity: 1; }

.foot-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 24px;
  margin-top: clamp(22px, 3.4vh, 34px);
  padding: 18px 0 clamp(22px, 3.4vh, 34px);
  border-top: 1px solid var(--cream-line);
  flex-wrap: wrap;
}
.fb-copy { font-size: var(--t-caption); color: rgba(246,238,230,.8); }
.fb-copy a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(246,238,230,.4); transition: color .35s, border-color .35s; }
.fb-copy a:hover { color: var(--gold); border-color: var(--gold); }
.foot-partners { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.foot-partners .label { color: rgba(246,238,230,.7); font-size: var(--t-micro); margin-right: 4px; }
.foot-partners img { width: auto; opacity: .95; }
.fp-ghr   { height: clamp(17px, 1.7vw, 21px); }
.fp-laxmi { height: clamp(14px, 1.4vw, 18px); }   /* the wide lockup — mark beside the words */
.fp-urban { height: clamp(23px, 2.5vw, 32px); }

.foot-done { padding: 6px 0; }
.foot-done .t { font-weight: 500; font-size: var(--t-h5); color: var(--gold); }
.foot-done p { margin-top: 6px; font-size: var(--t-small); }
#subscribeForm .form-err { margin: 10px 0 0; color: #E8BEB0; }

.fcol--addr { display: flex; flex-direction: column; gap: clamp(24px, 3.4vh, 34px); }
@media (max-width: 1080px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .foot-top { flex-direction: column; }
  .foot-rera { text-align: left; }
  .foot-cols { grid-template-columns: 1fr; gap: 36px; }
  .foot-band { flex-direction: column; align-items: flex-start; }
  .foot-partners { flex-wrap: wrap; }
  .foot-mark { display: none; }
  .foot-follow { flex-wrap: wrap; gap: 12px; }
}

/* ============================================================
   INNER PAGES — the homepage's language carried on: the same
   gutter, type scale, gold hairlines and rising media. Each page
   opens on a render and runs straight into its sections; nothing
   sits in a box, nothing waits in empty air.
   ============================================================ */
/* one rhythm for inner sections — a step tighter than the homepage's
   long scroll, so a page reads as one continuous spread */
.sect--tight { padding-block: clamp(56px, 8vh, 100px); }
/* two light sections in a row share one gap, never two */
.sect--tight + .sect--tight { padding-top: clamp(8px, 2vh, 24px); }
/* anchors land clear of the floating header */
.inner-page [id] { scroll-margin-top: 96px; }

/* ---------- page hero: the homepage banner, shorter ---------- */
#hero.phero .hero-img { height: clamp(460px, 78vh, 780px); height: clamp(460px, 78svh, 780px); min-height: 0; }
.phero .hero-img > img, .phero .hero-img > video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(1.05);
}
#hero.phero.in .hero-img > img, #hero.phero.in .hero-img > video { transform: scale(1); transition: transform 6s cubic-bezier(.16,.5,.3,1); }
/* a film behind an inner title (about, wellness, residences): the veil the
   homepage banner carries, not the deeper one cut for busy renders */
#hero.phero--film .scrim {
  background:
    linear-gradient(180deg, rgba(0,43,73,.42) 0%, rgba(0,43,73,0) 22%),
    radial-gradient(ellipse 62% 40% at 50% 47%, rgba(0,26,44,.4) 0%, rgba(0,26,44,.12) 70%, rgba(0,26,44,0) 100%),
    linear-gradient(180deg, rgba(0,43,73,0) 34%, rgba(0,43,73,.38) 66%, rgba(0,43,73,.7) 100%);
}
.phero .hero-title { font-size: min(var(--t-hero), 4.3vw); max-width: 20em; text-wrap: balance; }
.phero-line {
  margin-top: clamp(14px, 2.2vh, 22px); max-width: 54ch;
  font-size: var(--t-lead); line-height: 1.6; color: rgba(246,238,230,.94);
  text-shadow: 0 1px 14px rgba(0,22,38,.45);
}
/* a line the client wants unbroken (media): no measure, no wrap, until the
   viewport is too narrow to hold it */
.phero-line--one { max-width: none; white-space: nowrap; }
@media (max-width: 860px) { .phero-line--one { white-space: normal; } }
/* renders behind inner titles are busier than the film — a deeper veil through the middle */
#hero.phero .scrim {
  background:
    linear-gradient(180deg, rgba(0,43,73,.5) 0%, rgba(0,43,73,0) 26%),
    radial-gradient(ellipse 62% 40% at 50% 47%, rgba(0,26,44,.62) 0%, rgba(0,26,44,.2) 70%, rgba(0,26,44,0) 100%),
    linear-gradient(180deg, rgba(0,43,73,.18) 0%, rgba(0,43,73,.18) 50%, rgba(0,43,73,.62) 100%);
}
.phero .hero-content .label { color: var(--cream); letter-spacing: .2em; text-shadow: 0 1px 12px rgba(0,22,38,.6); }
@media (max-width: 720px) { .phero .hero-title { font-size: clamp(26px, 7.4vw, 40px); } }
@media (prefers-reduced-motion: reduce) { .phero .hero-img > img, .phero .hero-img > video { transform: none; } }

/* the level marks laid along the foot of the banner, as the page's index */
.phero-rail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(2px, 1vw, 14px);
  padding: 0 var(--gutter);
  border-top: 1px solid rgba(246,238,230,.22);
  background: linear-gradient(180deg, rgba(0,30,51,0) 0%, rgba(0,30,51,.35) 100%);
}
.phero-rail a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: clamp(12px, 1.8vh, 18px) clamp(8px, 1.3vw, 18px);
  text-decoration: none; color: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color .45s, color .45s;
}
.phero-rail .lv-ico { color: rgba(246,238,230,.85); width: clamp(30px, 2.8vw, 40px); height: clamp(30px, 2.8vw, 40px); }
.phero-rail .lv-t { color: rgba(246,238,230,.9); }
.phero-rail a:hover { border-bottom-color: var(--gold); }
.phero-rail a:hover .lv-ico { color: var(--gold); }
@media (max-width: 720px) { .phero-rail { gap: 0; } .phero-rail a { padding-inline: 6px; } }

/* ---------- split head: label and title left, one line right ---------- */
.split-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px clamp(32px, 5vw, 96px); flex-wrap: wrap;
}
.split-head .label { display: block; margin-bottom: clamp(12px, 1.8vh, 18px); font-size: var(--t-eyebrow); }
.split-head > div { flex: 1 1 0; min-width: min(100%, 26rem); }
.split-head .display-m { max-width: 16em; }
.split-line { flex: 0 1 42ch; max-width: 42ch; padding-bottom: .35em; font-size: var(--t-body-l); line-height: 1.75; color: var(--navy-ink); }

/* ---------- spread: a render beside its words (glance proportions) ---------- */
.spread {
  display: grid; grid-template-columns: minmax(0, 6.4fr) minmax(0, 5fr);
  gap: 40px clamp(40px, 5.4vw, 100px);
  align-items: stretch;
}
.spread--flip > .spread-fig { order: 2; }
.spread-fig { position: relative; margin: 0; overflow: clip; min-height: clamp(380px, 60vh, 640px); }
.spread-fig > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spread-body { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(4px, 1vh, 12px); }
.spread-body > .label { display: block; margin-bottom: clamp(14px, 2vh, 20px); font-size: var(--t-eyebrow); }
.spread-body .display-m { max-width: 13em; }
.spread-line {
  margin-top: clamp(16px, 2.4vh, 24px); max-width: 48ch;
  font-size: var(--t-body-l); line-height: 1.8; color: var(--navy-ink);
}
.spread-body .capsule { align-self: flex-start; margin-top: clamp(24px, 3.6vh, 34px); }
@media (max-width: 900px) {
  .spread { grid-template-columns: 1fr; gap: 32px; }
  .spread--flip > .spread-fig { order: 0; }
  .spread-fig { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- the ledger: label and particular on one hairline ---------- */
.ledger { list-style: none; margin-top: clamp(24px, 3.6vh, 36px); border-top: 1px solid var(--gold-faint); }
.ledger li {
  display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 6px 24px; align-items: baseline;
  padding: clamp(12px, 1.8vh, 17px) 0; border-bottom: 1px solid var(--gold-faint);
}
.ledger .k { font-weight: 500; font-size: var(--t-label); line-height: 1.5; letter-spacing: var(--track); text-transform: uppercase; color: var(--bronze); }
.ledger .v { font-size: var(--t-body); line-height: 1.65; color: var(--navy-ink); }
.ledger .v b { font-family: var(--serif); font-weight: 400; font-size: var(--t-h5); color: var(--navy); }
/* a ledger of single lines, each opened by a short gold rule */
.ledger--plain li { grid-template-columns: 22px minmax(0, 1fr); gap: 14px; }
.ledger--plain li::before { content: ''; width: 22px; height: 1px; background: var(--gold); transform: translateY(-.3em); }
@media (max-width: 560px) { .ledger li:not(.ledger--plain li) { grid-template-columns: 1fr; gap: 2px; } }


/* media rises into the page, as on the homepage */
.spread-fig > img, .es-fig > img {
  clip-path: inset(11% 0 11% 0);
  transition: clip-path 1.4s cubic-bezier(.22,.61,.36,1);
}
.spread-fig.in > img, .es-fig.in > img { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .spread-fig > img, .es-fig > img { clip-path: none; transition: none; } }

/* a picture and its caption — small caps under the frame */
.cap-fig { position: relative; margin: 0; }
.cap-fig .frame { position: relative; overflow: clip; }
.cap-fig .frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.22,.61,.36,1); }
.cap-fig:hover .frame img { transform: scale(1.04); }
.cap-fig figcaption {
  margin-top: 12px; font-weight: 500; font-size: var(--t-micro); line-height: 1.5;
  letter-spacing: var(--track); text-transform: uppercase; color: var(--bronze);
}
/* the caption laid over the foot of the picture instead */
.cap-fig--over figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: clamp(40px, 6vh, 70px) clamp(14px, 1.6vw, 24px) clamp(12px, 1.8vh, 18px);
  background: linear-gradient(180deg, rgba(0,30,51,0) 0%, rgba(0,30,51,.7) 100%);
  color: var(--cream);
}
@media (prefers-reduced-motion: reduce) { .cap-fig .frame img { transition: none; } }

/* ============================================================
   ABOUT
   ============================================================ */
/* vision and mission — two statements on hairlines under the story */
.vm { margin-top: clamp(28px, 4.4vh, 44px); border-top: 1px solid var(--gold-faint); }
.vm-row {
  display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 8px 28px;
  padding: clamp(18px, 2.8vh, 28px) 0; border-bottom: 1px solid var(--gold-faint);
}
.vm-k { font-family: var(--serif); font-style: italic; font-size: var(--t-h4); line-height: 1.2; color: var(--bronze); }
.vm-v { font-size: var(--t-body-l); line-height: 1.75; color: var(--navy-ink); }
@media (max-width: 560px) { .vm-row { grid-template-columns: 1fr; } }

/* the building in figures — the brochure's navy fact spread (p. 06) */
/* the building's figures: the homepage ledger, gold figures on white,
   framed by the brochure's rounded gold path in from the page edge */
.figband { position: relative; }
.figband.sect--tight { padding-block: clamp(56px, 8vh, 100px); }
.figband-wrap { position: relative; padding: clamp(26px, 4vh, 44px) 0 clamp(26px, 4vh, 44px) clamp(28px, 3.4vw, 60px); }
.figband-wrap::before {
  content: ''; position: absolute; inset: 0 calc(-1 * var(--gutter)) 0 0; pointer-events: none;
  border: 1px solid var(--gold-line); border-right: 0;
  border-radius: clamp(56px, 6.4vw, 120px) 0 0 clamp(56px, 6.4vw, 120px);
}
.figband-wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr);
  gap: 40px clamp(40px, 6vw, 110px); align-items: center;
}
.figband-wrap .label { display: block; margin-bottom: clamp(14px, 2vh, 20px); font-size: var(--t-eyebrow); }
.figband-wrap .display-m { max-width: 9em; }
.fig-ledger { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 0; }
.fig-ledger .gcell {
  min-height: clamp(110px, 15vh, 160px); border-bottom: 0;
  padding-left: clamp(18px, 2.4vw, 34px);
  border-left: 1px solid var(--gold-faint);
}
.fig-ledger .gcell:first-child { border-left: 0; padding-left: 0; }
.fig-ledger .gcell .s { margin-top: 4px; font-size: var(--t-small); line-height: 1.5; color: rgba(14,52,83,.62); }
@media (max-width: 900px) { .figband-wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .figband-wrap { padding-left: 20px; }
  .fig-ledger { grid-template-columns: 1fr; }
  .fig-ledger .gcell + .gcell { border-top: 1px solid var(--gold-faint); }
  .fig-ledger .gcell { min-height: 0; border-left: 0; padding-left: 0; }
}

.seal { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(18px, 2.8vh, 26px); }
.seal img { height: clamp(64px, 6vw, 88px); width: auto; }

/* the specialist houses — role over name, a hairline grid of four */
.roster {
  margin-top: clamp(32px, 5vh, 52px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--gold-faint);
}
.roster li {
  list-style: none;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: clamp(96px, 13vh, 130px);
  transition: background .5s cubic-bezier(.22,.61,.36,1);
  padding: clamp(16px, 2.4vh, 24px) clamp(14px, 1.8vw, 28px);
  border-bottom: 1px solid var(--gold-faint); border-left: 1px solid var(--gold-faint);
}
.roster li:nth-child(4n+1) { border-left: 0; padding-left: 0; }
/* each house's own mark, held in one box so every role starts on one line */
/* each mark sized by its area, not its height, so a wordmark and a tall
   emblem carry the same weight on the row */
.roster { --ls: 1; }
.roster li { justify-content: flex-start; }
.roster .lg { display: flex; align-items: center; height: calc(84px * var(--ls)); margin-bottom: clamp(12px, 1.8vh, 18px); }
.roster .lg img { width: calc(var(--w) * var(--ls) * 1px); height: calc(var(--h) * var(--ls) * 1px); max-width: 100%; object-fit: contain; filter: saturate(.9); transition: filter .5s; }
@media (max-width: 1200px) { .roster { --ls: .86; } }
@media (max-width: 560px) { .roster { --ls: .62; } }
.roster li:hover { background: rgba(246,238,230,.55); }
.roster li:hover .lg img { filter: none; }
.roster .r { font-weight: 500; font-size: var(--t-micro); line-height: 1.5; letter-spacing: var(--track); text-transform: uppercase; color: var(--bronze); }
.roster .f { font-family: var(--serif); font-size: var(--t-h4); line-height: 1.2; color: var(--navy); }
@media (max-width: 1000px) {
  .roster { grid-template-columns: repeat(2, 1fr); }
  .roster li:nth-child(4n+1) { border-left: 1px solid var(--gold-faint); padding-left: clamp(14px, 1.8vw, 28px); }
  .roster li:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ============================================================
   RESIDENCES
   ============================================================ */
/* unit plans — the chooser beside the sheet */
.uplan {
  margin-top: clamp(28px, 4.4vh, 44px);
  display: grid; grid-template-columns: minmax(0, 3.7fr) minmax(0, 8.3fr);
  gap: clamp(28px, 4vw, 64px); align-items: stretch;
}
.up-side { display: flex; flex-direction: column; min-width: 0; }
.up-types { position: relative; display: flex; border-bottom: 1px solid var(--gold-faint); }
.up-type {
  flex: 1 1 0; display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 0 0 14px; background: none; border: 0; cursor: pointer;
  font-family: var(--serif); font-size: var(--t-num-m); line-height: 1; color: var(--bronze);
  transition: color .45s cubic-bezier(.22,.61,.36,1);
}
.up-type i { font-style: normal; font-family: var(--sans); font-weight: 500; font-size: var(--t-label); letter-spacing: var(--track); }
.up-type:hover, .up-type.is-active { color: var(--navy); }
.up-types::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--gold);
  width: var(--tw, 50%); transform: translateX(var(--tx, 0px));
  transition: transform .6s cubic-bezier(.32,.72,.28,1), width .6s cubic-bezier(.32,.72,.28,1);
}
.up-list { list-style: none; margin-top: 6px; }
.up-list[hidden] { display: none; }
.up-size {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: clamp(10px, 1.6vh, 15px) 0 clamp(10px, 1.6vh, 15px) 0;
  background: none; border: 0; border-bottom: 1px solid var(--gold-faint); cursor: pointer; text-align: left;
  transition: padding .45s cubic-bezier(.22,.61,.36,1);
}
.up-size b { font-family: var(--serif); font-weight: 400; font-size: var(--t-h5); color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.up-size b i { font-style: normal; font-family: var(--sans); font-weight: 300; font-size: var(--t-label); color: var(--bronze); margin-left: 4px; }
.up-size span { font-size: var(--t-small); line-height: 1.4; color: rgba(14,52,83,.7); text-align: right; }
.up-size:hover b { color: var(--bronze); }
.up-size.is-active { padding-left: 14px; box-shadow: inset 2px 0 0 var(--gold); }
.up-size.is-active span { color: var(--navy); }
.up-facing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: clamp(16px, 2.4vh, 24px); }
.up-facing .k { margin-right: 6px; font-weight: 500; font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--bronze); }
.up-face {
  font-family: var(--sans); font-weight: 500; font-size: var(--t-fine); letter-spacing: var(--track); text-transform: uppercase;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--navy); border: 1px solid rgba(14,52,83,.35);
  transition: background .35s, color .35s, border-color .35s;
}
.up-face.is-active { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.up-acts { margin-top: auto; padding-top: clamp(20px, 3vh, 28px); }
.up-acts .capsule { width: 100%; }
.up-plate {
  position: relative; margin: 0; overflow: clip;
  background: #F2E6DA; border: 1px solid var(--gold-faint);
  aspect-ratio: 1660 / 1100;
}
.up-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.up-plate img.is-swap { opacity: 0; }
/* the whole sheet opens full screen */
.up-open { position: absolute; inset: 0; z-index: 1; background: none; border: 0; padding: 0; cursor: zoom-in; }
.up-open:focus-visible { outline-offset: -4px; }
.up-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.up-note { margin-top: 10px; }
@media (max-width: 960px) {
  .uplan { grid-template-columns: 1fr; }
  .up-acts .capsule { width: auto; }
}

/* the penthouses — the brochure's navy page, the render running to the edge */
.edge-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: stretch;
}
.edge-split .es-body { padding: clamp(56px, 9vh, 110px) clamp(32px, 5vw, 90px) clamp(56px, 9vh, 110px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
/* a render running to the edge never butts against a full-bleed one */
.bleed + .edge-split { margin-top: clamp(56px, 8vh, 100px); }
/* the render runs to the left edge instead */
.edge-split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.edge-split--flip .es-fig { order: -1; }
.edge-split--flip .es-body { padding-left: clamp(32px, 5vw, 90px); padding-right: var(--gutter); }
.edge-split .es-body > .label { display: block; margin-bottom: clamp(14px, 2vh, 20px); font-size: var(--t-eyebrow); }
.edge-split .es-body .display-m { max-width: 11em; }
.edge-split .es-fig { position: relative; margin: 0; overflow: clip; min-height: clamp(460px, 76vh, 760px); }
.edge-split .es-fig > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.edge-split .capsule { align-self: flex-start; margin-top: clamp(26px, 4vh, 38px); }
@media (max-width: 900px) {
  .edge-split, .edge-split--flip { grid-template-columns: 1fr; }
  .edge-split .es-body, .edge-split--flip .es-body { padding: clamp(32px, 5vh, 48px) var(--gutter) clamp(48px, 8vh, 72px); }
  .edge-split .es-fig { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
}

/* specifications — the brochure's rounded gold paths (pp. 120–123) */
.specs {
  --sp-r: clamp(40px, 4.4vw, 80px);
  margin-top: clamp(28px, 4.4vh, 44px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vh, 34px) clamp(24px, 3vw, 48px);
}
.spec {
  position: relative;
  padding: clamp(20px, 3vh, 30px) clamp(16px, 1.6vw, 26px) clamp(8px, 1.4vh, 14px) clamp(20px, 2vw, 32px);
}
.spec::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-top: 1px solid var(--gold-line); border-left: 1px solid var(--gold-line);
  border-top-left-radius: var(--sp-r);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.spec h3 { font-size: var(--t-h4); line-height: 1.2; color: var(--navy); }
.spec p { margin-top: 10px; max-width: 40ch; font-size: var(--t-body); line-height: 1.7; color: var(--navy-ink); }
@media (max-width: 960px) { .specs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .specs { grid-template-columns: 1fr; } }

/* ============================================================
   AMENITIES
   ============================================================ */
/* ground and podium: the words and three renders in one field */
.mosaic {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto clamp(250px, 36vh, 380px);
  gap: clamp(16px, 2.2vw, 32px);
}
.mosaic-t { display: flex; flex-direction: column; justify-content: center; padding-right: clamp(0px, 2vw, 32px); }
.mosaic-t > .label { display: block; margin-bottom: clamp(14px, 2vh, 20px); font-size: var(--t-eyebrow); }
.mosaic-t .display-m { max-width: 12em; }
.mosaic .m-big { grid-column: 2; grid-row: 1; min-height: clamp(340px, 48vh, 500px); }
.mosaic .m-a { grid-column: 1; grid-row: 2; }
.mosaic .m-b { grid-column: 2; grid-row: 2; }
.mosaic .cap-fig, .mosaic .cap-fig .frame { height: 100%; }
.mosaic .mosaic-list { display: flex; flex-direction: column; justify-content: center; }   /* the podium's list in the mosaic's last cell */
.mosaic .mosaic-list .ledger { margin-top: 0; }
@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mosaic-t { grid-column: 1 / -1; padding: 0; }
  .mosaic .m-big { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .mosaic .m-a, .mosaic .m-b { grid-column: auto; grid-row: auto; aspect-ratio: 1; }
  .mosaic .mosaic-list { grid-column: 1 / -1; aspect-ratio: auto; }
}

/* a strip of rooms, captions beneath */
.strip { margin-top: clamp(28px, 4.4vh, 44px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 28px); }
.strip .frame { aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .strip { grid-template-columns: 1fr 1fr; } }

/* clubhouse: the building standing tall beside four of its rooms */
.club {
  display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  gap: clamp(24px, 3.4vw, 56px); align-items: stretch;
}
.club .spread-fig { min-height: 0; }
.club-body > .label { display: block; margin-bottom: clamp(14px, 2vh, 20px); font-size: var(--t-eyebrow); }
.club-grid { margin-top: clamp(24px, 3.6vh, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 24px); }
.club-grid .frame { aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .club { grid-template-columns: 1fr; }
  .club .spread-fig { aspect-ratio: 4 / 3; }
}

/* the lounges at the top of the towers — two columns on navy */
.lounges { display: grid; grid-template-columns: minmax(0, 4.8fr) minmax(0, 7.2fr); gap: clamp(28px, 4vw, 72px); align-items: stretch; }
/* pictures on one row, words on the next — the two columns share both lines */
.lounges { grid-template-rows: auto auto; row-gap: 0; }
.lounge { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.lounge-a .cap-fig, .lounge-a .cap-fig .frame { height: 100%; }
.lounge-t { padding-top: clamp(20px, 3vh, 28px); }
.lounge-t > .label { display: block; margin-bottom: 12px; }
.lounge h2 { font-size: var(--t-h3); line-height: 1.12; }
.lounge .spread-line { margin-top: 12px; }
.lounge-b .l-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); }
.lounge-b .l-grid .cap-fig:first-child { grid-column: 1 / -1; }
.lounge-b .l-grid .cap-fig:first-child .frame { aspect-ratio: 16 / 7.4; }
.lounge-b .l-grid .frame { aspect-ratio: 4 / 2.7; }
@media (max-width: 900px) {
  .lounges { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 40px; }
  .lounge { grid-row: auto; grid-template-rows: none; }
  .lounge-a .cap-fig .frame { aspect-ratio: 4 / 3; height: auto; }
}

/* the sky garden — full bleed, its words laid over the render */
.bleed { position: relative; overflow: clip; color: var(--cream); }
.bleed > img {
  display: block; width: 100%; height: clamp(460px, 82vh, 800px); object-fit: cover;
  transform: translateY(calc(var(--py, 0) * 1px)) scale(1.12); will-change: transform;
}
.bleed-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 48px; flex-wrap: wrap;
  padding: clamp(90px, 16vh, 180px) var(--gutter) clamp(30px, 5vh, 56px);
  background: linear-gradient(180deg, rgba(0,30,51,0) 0%, rgba(0,30,51,.5) 45%, rgba(0,30,51,.86) 100%);
}
.bleed-cap .label { display: block; margin-bottom: 14px; font-size: var(--t-eyebrow); color: var(--gold); }
.bleed-cap .display-m { color: var(--cream); max-width: 14em; }
.bleed-cap .split-line { color: rgba(246,238,230,.9); }
@media (prefers-reduced-motion: reduce) { .bleed > img, .bleed > video { transform: none; } }
/* the same bleed, carrying a film (the tower entrance, 18 Sep) */
.bleed > video {
  display: block; width: 100%; height: clamp(460px, 82vh, 800px); object-fit: cover;
  transform: translateY(calc(var(--py, 0) * 1px)) scale(1.12); will-change: transform;
}

/* born in the sky — three tall renders on one hairline of air */
.trio { margin-top: clamp(32px, 5vh, 52px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.trio .cap-fig .frame { height: clamp(420px, 62vh, 620px); }
.trio figcaption { padding-top: clamp(80px, 14vh, 150px); }
.trio figcaption .h { display: block; margin-bottom: 8px; font-family: var(--serif); font-weight: 400; font-size: var(--t-h4); letter-spacing: 0; text-transform: none; line-height: 1.15; color: var(--cream); }
.trio figcaption .d { display: block; max-width: 34ch; font-family: var(--sans); font-weight: 300; font-size: var(--t-small); letter-spacing: 0; text-transform: none; line-height: 1.6; color: rgba(246,238,230,.88); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } .trio .cap-fig .frame { height: 56vh; } }

/* ============================================================
   ARRIVAL
   ============================================================ */
/* lobbies and lifts: two renders at one height, the particulars on one hairline beneath */
.pair { margin-top: clamp(28px, 4.4vh, 44px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: clamp(14px, 1.8vw, 28px); }
.pair .frame { height: clamp(300px, 50vh, 520px); }
.keys {
  list-style: none; margin-top: clamp(24px, 3.6vh, 36px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint);
}
.keys li { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2.8vh, 26px) clamp(16px, 2vw, 32px); border-left: 1px solid var(--gold-faint); }
.keys li:first-child { border-left: 0; padding-left: 0; }
.keys .k { font-family: var(--serif); font-size: var(--t-h4); line-height: 1.2; color: var(--navy); }
.keys .v { font-size: var(--t-body); line-height: 1.6; color: rgba(14,52,83,.75); }
@media (max-width: 760px) {
  .pair { grid-template-columns: 1fr; }
  .keys { grid-template-columns: 1fr; }
  .keys li { border-left: 0; padding-left: 0; }
  .keys li + li { border-top: 1px solid var(--gold-faint); }
}

/* ============================================================
   CONTACT
   ============================================================ */
.visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; min-height: 100svh; }
.visit-fig { position: relative; margin: 0; overflow: clip; }
.visit-fig > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visit-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(110px, 15vh, 150px) var(--gutter) clamp(48px, 7vh, 80px) clamp(36px, 5vw, 96px);
}
.visit-body > .label { display: block; margin-bottom: clamp(14px, 2vh, 20px); font-size: var(--t-eyebrow); }
.visit-body .form-grid { margin-top: clamp(18px, 3vh, 28px); }
.visit-body .form-actions { align-items: flex-start; margin-top: clamp(26px, 4vh, 36px); }
.visit-reach { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 2.4vw, 36px); margin-top: clamp(28px, 4.4vh, 44px); padding-top: clamp(18px, 2.8vh, 26px); border-top: 1px solid var(--gold-faint); }
.visit .form-done { text-align: left; }
@media (max-width: 900px) {
  .visit { grid-template-columns: 1fr; min-height: 0; }
  .visit-fig { aspect-ratio: 4 / 3; }
  .visit-body { padding: clamp(40px, 6vh, 64px) var(--gutter); }
}
.visit-map { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: clamp(28px, 4vw, 72px); align-items: stretch; }
.visit-map .map-wrap { position: relative; top: auto; }
#visitMap { height: 100%; min-height: clamp(380px, 56vh, 560px); background: #E9E4DC; }
/* Google's map in the same frame, filling the row */
.map-wrap--google { height: 100%; min-height: clamp(380px, 56vh, 560px); background: #E9E4DC; }
.map-wrap--google iframe { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.visit-map .ledger { margin-top: clamp(20px, 3vh, 28px); }
.visit-map .ledger .v .textlink { margin-top: 6px; }
@media (max-width: 900px) { .visit-map { grid-template-columns: 1fr; } }

/* thank-you and 404 — one line and the way back */
.note-page { min-height: 72vh; display: grid; place-items: center; text-align: center; }
.note-page .display-m { margin-top: 14px; }
.note-page p.sub { margin: 16px auto 28px; max-width: 46ch; font-size: var(--t-lead); }

/* homepage: the way on to a page */
.more-link { margin-top: clamp(22px, 3.4vh, 32px); text-align: center; }
.glance-side .more-link { text-align: left; }
.pt-fine { margin: 10px auto 0; max-width: 34ch; font-size: var(--t-micro); line-height: 1.6; color: rgba(246,238,230,.66); }
.addr-note { margin-top: 14px; }
#neopolis .sect-head .sub { max-width: 60ch; }
@media (max-width: 960px) { .up-plate { order: -1; } }

/* ============================================================
   WELLNESS — the page (client round, 15 Sep): the concept note as a
   spread, the ten elements on one hairline grid, the certification, the
   spaces. Reuses the inner-page vocabulary; only these three are new.
   ============================================================ */
.spread-copy { margin-top: clamp(14px, 2vh, 20px); max-width: 52ch; }
.spread-copy p { font-size: var(--t-body); line-height: 1.8; color: var(--navy-ink); }
.spread-copy p + p { margin-top: 12px; }

/* the ten concepts: five to a row, hairlines between, the brochure's icons */
.ten {
  list-style: none; margin-top: clamp(32px, 5vh, 52px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--gold-faint);
}
.ten-cell {
  display: flex; flex-direction: column;
  padding: clamp(22px, 3.2vh, 34px) clamp(14px, 1.6vw, 24px) clamp(22px, 3.2vh, 34px) 0;
  border-bottom: 1px solid var(--gold-faint);
}
.ten-cell:not(:nth-child(5n+1)) { padding-left: clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--gold-faint); }
.ten-cell img { width: auto; max-width: 100%; height: clamp(44px, 4.4vw, 64px); object-fit: contain; object-position: left center; margin-bottom: clamp(16px, 2.4vh, 24px); }
.ten-no { font-weight: 500; font-size: var(--t-label); letter-spacing: var(--track); color: var(--bronze); }
.ten-t { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: var(--t-h4); line-height: 1.15; color: var(--navy); }
.ten-d { margin-top: 10px; max-width: 26ch; font-size: var(--t-small); line-height: 1.6; color: rgba(14,52,83,.72); }
@media (max-width: 1100px) {
  .ten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ten-cell:not(:nth-child(5n+1)) { padding-left: 0; border-left: 0; }
  .ten-cell:nth-child(even) { padding-left: clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--gold-faint); }
}
@media (max-width: 480px) {
  /* two across still, the drawing beside its number, the line beneath */
  .ten-cell { padding: 16px 10px 16px 0; }
  .ten-cell img { height: 30px; margin-bottom: 10px; }
  .ten-t { font-size: var(--t-h5); }
  .ten-t br { display: none; }
  .ten-d { margin-top: 6px; font-size: 12px; line-height: 1.5; }
}

/* the two seals above the certification ledger */
.certs { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); margin-bottom: clamp(18px, 2.8vh, 26px); }
.certs img { height: clamp(64px, 6vw, 88px); width: auto; }
.certs img:first-child { border-radius: 8px; }
.ledger .v .fine { display: inline; margin-left: 4px; }

/* ============================================================
   ABOUT — the new flow (client round, 15 Sep)
   ============================================================ */
/* a ledger set full width under a split head, two columns of rows */
.ledger--wide { margin-top: clamp(28px, 4.4vh, 44px); }
.ledger--wide li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.more-link--left { text-align: left; margin-top: clamp(18px, 2.8vh, 28px); }

/* the consultants, much smaller: six to a row, two rows */
.roster.roster--compact { grid-template-columns: repeat(6, 1fr); --ls: .56; }
.roster.roster--compact li { min-height: 0; gap: 3px; padding: clamp(12px, 1.8vh, 18px) clamp(10px, 1.2vw, 18px); }
.roster.roster--compact li:nth-child(n) { border-left: 1px solid var(--gold-faint); }
.roster.roster--compact li:nth-child(6n+1) { border-left: 0; padding-left: 0; }
.roster.roster--compact .lg { height: calc(84px * var(--ls)); margin-bottom: 8px; }
.roster.roster--compact .f { font-family: var(--sans); font-weight: 400; font-size: var(--t-small); line-height: 1.4; }
@media (max-width: 1000px) {
  .roster.roster--compact { grid-template-columns: repeat(3, 1fr); --ls: .5; }
  .roster.roster--compact li:nth-child(n) { border-left: 1px solid var(--gold-faint); padding-left: clamp(10px, 1.2vw, 18px); }
  .roster.roster--compact li:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .roster.roster--compact { grid-template-columns: repeat(2, 1fr); }
  .roster.roster--compact li:nth-child(n) { border-left: 1px solid var(--gold-faint); padding-left: clamp(10px, 1.2vw, 18px); }
  .roster.roster--compact li:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* construction updates: the consultants' snap track carrying a month's
   film each — its own still, the month as an eyebrow, a play ring; the
   embed only arrives on a tap and only one plays at a time */
.updates { margin-top: clamp(32px, 5vh, 56px); }
.updates-track { --per: 2.4; }
.yt-card {
  position: relative; overflow: clip; aspect-ratio: 16 / 10;
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--cgap)) / var(--per));
  scroll-snap-align: start;
  background: var(--navy); color: var(--cream);
}
.yt-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.yt-card:hover > img { transform: scale(1.04); }
.yt-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,43,73,0) 55%, rgba(0,43,73,.45) 100%);
}
.yt-play { position: absolute; inset: 0; z-index: 3; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.yt-play span {
  width: clamp(52px, 4.4vw, 68px); height: clamp(52px, 4.4vw, 68px); border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(250, 245, 238, .84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(189,140,84,.45);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), background .4s, border-color .4s;
}
.yt-play svg { width: 38%; height: 38%; fill: var(--navy); margin-left: 6%; }
.yt-play:hover span, .yt-play:focus-visible span { transform: scale(1.08); background: rgba(250,245,238,.96); border-color: var(--gold); }
.yt-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
.yt-card.is-playing > img, .yt-card.is-playing .yt-play, .yt-card.is-playing::after { display: none; }
@media (max-width: 1020px) { .updates-track { --per: 1.6; } }
@media (max-width: 640px) { .updates-track { --per: 1.15; } }
@media (prefers-reduced-motion: reduce) { .yt-card > img, .yt-play span { transition: none; } .yt-card:hover > img { transform: none; } }

/* design intent (about): one statement under the emblem, centred — a pause
   between the two picture spreads */
/* the statement left, the film right, each centred on the other */
.intent-spread { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 4vw, 72px); align-items: center; }
/* the film takes the larger share and a 2:1 frame, so it stands as tall as the
   statement (client round, 23 Sep); the trim comes off the left, keeping the
   mark in the clip's top-right corner */
.intent-film { margin: 0; overflow: clip; border-radius: 26px; border: 1px solid var(--gold-line); background: var(--navy); aspect-ratio: 2 / 1; }
.intent-film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.intent-band { display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 34em; }
.intent-band .more-link { text-align: left; }
@media (max-width: 900px) {
  .intent-spread { grid-template-columns: 1fr; gap: 28px; }
  .intent-band { align-items: center; text-align: center; margin-inline: auto; max-width: 52em; }
  .intent-band .more-link { text-align: center; }
  .intent-film { border-radius: 20px; aspect-ratio: auto; }
  .intent-film video { height: auto; }
}
.intent-mark { width: clamp(48px, 4.4vw, 64px); height: auto; fill: var(--gold); margin-bottom: clamp(18px, 2.8vh, 26px); }
.intent-band .label { display: block; margin-bottom: clamp(16px, 2.4vh, 22px); font-size: var(--t-eyebrow); }
.intent-line { max-width: 30em; line-height: 1.35; color: var(--navy); }
.intent-band .more-link { margin-top: clamp(24px, 3.6vh, 34px); }

/* the distinctive-design note in two columns under its head */
.cols { margin-top: clamp(28px, 4.4vh, 44px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); }
.cols p { font-size: var(--t-body-l); line-height: 1.8; color: var(--navy-ink); }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; gap: 16px; } }

/* the distinctive-design note as three parts on one hairline */
.pillars {
  list-style: none; margin-top: clamp(28px, 4.4vh, 44px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--gold-faint);
}
.pillars li { padding-top: clamp(20px, 3vh, 28px); }
.pillars li + li { border-left: 1px solid var(--gold-faint); padding-left: clamp(20px, 2.4vw, 36px); margin-left: calc(-1 * clamp(24px, 3vw, 48px) / 2); }
.pl-t { font-family: var(--serif); font-weight: 400; font-size: var(--t-h4); line-height: 1.15; color: var(--navy); }
.pillars p { margin-top: 10px; max-width: 34ch; font-size: var(--t-body); line-height: 1.75; color: var(--navy-ink); }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; gap: 0; }
  .pillars li + li { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--gold-faint); margin-top: clamp(16px, 2.4vh, 22px); }
}

/* ============================================================
   IN THE PRESS — the titles as one open row of marks, the latest story
   as a spread, the rest as a two-up grid with room to read
   ============================================================ */
.press-marks {
  list-style: none; margin-top: clamp(28px, 4.4vh, 44px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(28px, 4vh, 40px) clamp(40px, 5vw, 96px);
  padding-block: clamp(30px, 4.6vh, 44px);
  border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint);
}
.press-marks a { display: block; opacity: .85; transition: opacity .4s, transform .5s cubic-bezier(.22,.61,.36,1); }
.press-marks a:hover { opacity: 1; transform: translateY(-2px); }
.press-marks img { display: block; height: clamp(26px, 2.8vw, 40px); width: auto; max-width: 60vw; object-fit: contain; }
.press-marks li:nth-child(3) img, .press-marks li:nth-child(6) img { height: clamp(40px, 4.2vw, 60px); }   /* the stacked marks read smaller at the same height */

/* the stories, three to a row, with room between */
.press-grid {
  margin-top: clamp(40px, 6vh, 64px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 6.5vh, 80px) clamp(28px, 3.4vw, 56px);
}
.press-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pc-fig { position: relative; margin: 0; overflow: clip; aspect-ratio: 3 / 2; background: var(--navy); }
.pc-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.press-card:hover .pc-fig img { transform: scale(1.04); }
.pc-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(22px, 3.2vh, 30px) 0 0; }
.pc-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pc-mark { height: 22px; width: auto; max-width: 46%; object-fit: contain; object-position: left center; opacity: .9; }
.pc-meta time { font-weight: 500; font-size: var(--t-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--bronze); }
.pc-t { margin-top: 18px; max-width: 22em; font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.7vw, 27px); line-height: 1.2; color: var(--navy); transition: color .35s; }
.press-card:hover .pc-t { color: var(--bronze); }
.pc-line { margin-top: 12px; max-width: 52ch; font-size: var(--t-body); line-height: 1.7; color: rgba(14,52,83,.75); }
.pc-go {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-weight: 500; font-size: var(--t-caption); letter-spacing: var(--track); text-transform: uppercase; color: var(--navy);
}
.pc-go svg { width: 14px; height: 14px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.press-card:hover .pc-go svg { transform: translate(2px, -2px); }
@media (max-width: 1000px) { .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phone: the stories side by side, as a magazine's contents page — not
   six full-width plates one under another */
@media (max-width: 640px) {
  .press-grid { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .press-marks { gap: 24px 36px; }
  .pc-fig { aspect-ratio: 4 / 3; }
  .pc-mark { height: 16px; }
  .pc-t { margin-top: 12px; font-size: 16px; line-height: 1.25; }
  .pc-line { font-size: 12.5px; line-height: 1.55; }
  .pc-body { padding-top: 12px; }
  .pc-meta { flex-wrap: wrap; gap: 6px 10px; }
  .pc-go { padding-top: 12px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pc-fig img, .press-marks a, .pc-go svg { transition: none; } .press-card:hover .pc-fig img { transform: none; } }

/* ============================================================
   TABLET AND PHONE (client round, 18 Sep)
   Above 900px the pages are laid out as spreads; below it everything
   fell to one column, so a tablet held phone pages at twice the width
   and three times the scroll. Two tiers instead:
   — tablet (601–900): the spreads stay spreads, trios stay three across,
     strips four across, the three houses side by side;
   — phone (≤600): the three-picture rows and the three houses become
     one swipe rail each, as the consultants and the updates already are,
     and figure ledgers sit three across instead of one under another.
   ============================================================ */
@media (min-width: 601px) and (max-width: 900px) {
  /* a render and its words, side by side; the render takes a portrait */
  .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(24px, 3.6vw, 40px); align-items: center; }
  .spread--flip > .spread-fig { order: 2; }
  .spread-fig { min-height: 0; aspect-ratio: 4 / 5; }
  .spread-body .display-m { max-width: 10em; }
  /* a render running to the edge, the words beside it */
  .edge-split, .edge-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .edge-split .es-fig { min-height: 380px; aspect-ratio: auto; order: 0; }
  .edge-split--flip .es-fig { order: -1; }
  .edge-split .es-body { padding: clamp(36px, 6vh, 56px) clamp(24px, 3.6vw, 40px) clamp(36px, 6vh, 56px) var(--gutter); }
  .edge-split--flip .es-body { padding-left: clamp(24px, 3.6vw, 40px); padding-right: var(--gutter); }
  /* three pictures stay three across, each a portrait */
  .trio { grid-template-columns: repeat(3, 1fr); }
  .trio .cap-fig .frame { height: auto; aspect-ratio: 3 / 4; }
  .trio figcaption { padding-top: clamp(40px, 7vh, 80px); }
  /* a strip of small pictures stays four across */
  .strip { grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 18px); }
  /* the three houses side by side, each as tall as its words */
  .partners { grid-template-columns: repeat(3, 1fr); }
  .partner { min-height: 0; padding: clamp(26px, 4vh, 36px) 18px 18px; }
  .pt-more { margin: 0 -18px -18px; padding: 28px 18px 18px; }
  .pt-more p { max-width: none; }
  .pt-tag { white-space: normal; }
  /* the note's three parts on one hairline */
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 32px); }
  .pillars li + li { border-top: 0; margin-top: 0; border-left: 1px solid var(--gold-faint); padding-left: clamp(16px, 2.2vw, 24px); margin-left: calc(-1 * clamp(20px, 3vw, 32px) / 2); }
  /* the building's figures beside their head */
  .figband-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fig-ledger .gcell { min-height: clamp(90px, 12vh, 120px); }
  /* the podium: words over, the lagoon and the kids' pool side by side, the list under */
  .mosaic { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto; }
  .mosaic-t { grid-column: 1 / -1; }
  .mosaic .m-big { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
  .mosaic .m-a { grid-column: 2; grid-row: 2; aspect-ratio: auto; }
  .mosaic .m-a .frame { height: 100%; }
  .mosaic .mosaic-list { grid-column: 1 / -1; grid-row: 3; }
  /* the clubhouse beside its four rooms */
  .club { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(18px, 3vw, 32px); }
  .club .spread-fig { aspect-ratio: auto; min-height: 0; }
  /* the ten concepts three across, as the phone's ledgers go */
  .ten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ten-cell:nth-child(even) { padding-left: 0; border-left: 0; }
  .ten-cell:not(:nth-child(3n+1)) { padding-left: clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--gold-faint); }
  /* a spread whose words run long (the certification): the render
     stretches to them rather than leaving air beneath itself */
  .spread { align-items: stretch; }
  .spread-fig { aspect-ratio: auto; min-height: 380px; }
  /* the developers' three records side by side */
  .dev-rec { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 600px) {
  /* one swipe rail for three pictures: the next one peeks in, as on the
     consultants' row */
  .trio {
    display: flex; gap: 10px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .trio::-webkit-scrollbar { display: none; }
  .trio .cap-fig { flex: 0 0 78vw; scroll-snap-align: start; }
  .trio .cap-fig .frame { height: auto; aspect-ratio: 4 / 5; }
  .trio figcaption { padding-top: 48px; }
  /* the three houses on one rail, each as tall as its words */
  .partners {
    display: flex; gap: 8px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .partners::-webkit-scrollbar { display: none; }
  .partner { flex: 0 0 84vw; min-height: 0; scroll-snap-align: start; padding: 30px 22px 22px; display: flex; }
  .pt-more { margin-top: 26px; padding-top: 26px; }
  /* the building's figures three across, not one under another */
  .figband-wrap { padding-left: 16px; }
  .fig-ledger { grid-template-columns: repeat(3, 1fr); }
  .fig-ledger .gcell { min-height: 0; padding: 14px 0 14px 12px; border-top: 0; border-left: 1px solid var(--gold-faint); }
  .fig-ledger .gcell + .gcell { border-top: 0; }
  .fig-ledger .gcell:first-child { border-left: 0; padding-left: 0; }
  .fig-ledger .gcell .n { font-size: clamp(28px, 8.4vw, 36px); }
  .fig-ledger .gcell .t { margin-top: 6px; font-size: 9.5px; }
  .fig-ledger .gcell .s { font-size: 11px; }
  /* the podium's two pictures side by side, the lagoon the wider */
  .mosaic { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; }
  .mosaic .m-big { grid-column: 1; aspect-ratio: auto; }
  .mosaic .m-a { grid-column: 2; aspect-ratio: auto; }
  .mosaic .m-big .frame, .mosaic .m-a .frame { height: 100%; min-height: 220px; }
  .mosaic .mosaic-list { grid-column: 1 / -1; }
  /* the strip's pictures a touch squarer, so eight of them take four rows, not five screens */
  .strip { gap: 10px 12px; }
  .strip .frame { aspect-ratio: 1 / 1; }
  /* a render above its words needs no more than a 4:3 */
  .spread-fig, .edge-split .es-fig { aspect-ratio: 4 / 3; }
}

/* phone: the ten concepts as ten lines, the drawing at the head of each;
   the foot's four columns two by two */
@media (max-width: 600px) {
  .ws-sand { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j"; }
  .wb-cell, .wb-cell--side {
    display: grid; grid-template-columns: 40px auto minmax(0, 1fr); align-items: center; column-gap: 12px;
    padding: 10px 6px;
  }
  .ws-sand .wb-cell:nth-child(even) { border-left: 0; }
  .wb-cell img, .wb-cell--side img, .wb-i img, .wb-j img { height: 34px; margin: 0; padding: 0; order: 0; object-position: center; justify-self: center; }
  .wb-t br { display: none; }
  .wb-cell--side > div { display: contents; }
  .wb-t, .wb-t--big { font-size: var(--t-h5); line-height: 1.2; }
  .wb-a { background: none; }
  .wb-a img { height: 44px; margin: 0; padding: 0; }
  .foot-cols { grid-template-columns: 1fr; gap: 32px; }   /* one block under another on phones */
}


/* ---------- legal pages: privacy policy, disclaimer, terms ---------- */
.legal-hero { padding-bottom: 0; text-align: center; }
.legal-hero .display-m { margin-top: 14px; }
.legal-sect { padding-top: clamp(36px, 5vh, 56px); }
.legal { max-width: 72ch; margin: 0 auto; color: var(--navy-ink); font-size: var(--t-body-l); line-height: 1.75; }
.legal p, .legal ul { margin: 0 0 1.05em; }
.legal ul { padding-left: 1.3em; }
.legal li { margin-bottom: .35em; }
.legal li::marker { color: var(--gold); }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2;
  color: var(--navy); margin: 2.2em 0 .7em; padding-top: 1.1em; border-top: 1px solid var(--gold-faint); }
.legal h3 { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .02em; color: var(--bronze); margin: 1.8em 0 .55em; }
.legal h4 { font-size: var(--t-body); font-weight: 600; color: var(--navy); margin: 1.5em 0 .45em; }
.legal b { font-weight: 600; color: var(--navy); }
.legal a { color: var(--navy); border-bottom: 1px solid var(--gold-line); text-decoration: none; overflow-wrap: anywhere; }
.legal a:hover { color: var(--gold); border-bottom-color: var(--gold); }