/* ============================================================
   THE CASCADES NEOPOLIS — NRI landing page
   Self-contained, and built on the main site's design system exactly:
   the same tokens, type scale, colours, tracking, radii and components
   (site/css/style.css). Where this page has a component the site has
   too — header, hero, section heads, glance ledger, typologies, partner
   panels, consultants, location rows, form, modal, floating enquiry,
   footer — the rules below are the site's own. What is new is the motion.
   ============================================================ */

/* ---------- fonts — the brand kit ---------- */
@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-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; 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; }

/* ---------- tokens — the main site's, unchanged ---------- */
: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 */
  --gold-foil:  #E3A244;   /* KURZ LUXOR 397 screen equivalent — the hero's lustrous highlight only */
  --gold-line:  rgba(189, 140, 84, .55);
  --gold-faint: rgba(189, 140, 84, .3);
  --cream-line: rgba(246, 238, 230, .25);

  --sans:  'Greenwich', 'Avenir Next', 'Century Gothic', sans-serif;
  --serif: 'Collapse', 'Didot', 'Bodoni MT', 'Playfair Display', serif;

  /* type scale — the only sizes the site uses. 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 */
  --t-h4:     clamp(19px, 1.8vw, 25px);    /* small serif names */
  --t-h5:     19px;                        /* serif figures inside rows */
  --t-num-xl: clamp(40px, 4.6vw, 72px);
  --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 */
  --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:    .04em;                       /* brand book: Greenwich Medium in capitals, tracking +40 */
  --track-body: -.02em;                    /* brand book: Greenwich Light in sentence case, tracking -20 */

  /* rhythm */
  --gutter: clamp(20px, 4.5vw, 80px);
  --measure: 62ch;
  --edge-r: clamp(40px, 5vw, 96px);        /* the brochure's rounded corner on an open side */
  --typ-r:  clamp(56px, 6.4vw, 120px);     /* the brochure's large curve */
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ink-ghost: rgba(14, 52, 83, .16);      /* words not yet read */
}

/* ---------- reset — the site's ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body {
  background: var(--white);
  color: var(--navy-ink);
  font-family: var(--sans);
  font-synthesis: none;
  font-weight: 300;
  font-size: var(--t-base);
  line-height: 1.75;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
}
/* Collapse carries its own spacing; the -20 is Greenwich Light's alone */
h1, h2, h3, h4, h5, .display, .rk-n, .wb-t, .vo-n, .rc-name, .std-n, .jy-n,
.th-n, .typ-sizes li, .typ-range, .gcell .n, .modal-title, .lv-title, .neo-line, .typ-tw { letter-spacing: .01em; }
img, video { display: block; max-width: 100%; }
button { font: inherit; }
ol, ul { list-style: none; }
::selection { background: var(--gold); color: var(--navy-deep); }
a { color: inherit; }
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); }
p  { line-height: 1.75; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.svg-defs { position: absolute; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 18px; background: var(--navy); color: var(--cream); border-radius: 999px; font-size: var(--t-caption); text-decoration: none; }
.skip:focus { top: 12px; }

/* the emblem travels with the hand (desktop pointers only) */
@media (hover: hover) and (pointer: fine) {
  body { cursor: url('../assets/img/cursor-emblem-32.png') 15 15, auto; }
  a, button, label.chip, select, .spot { cursor: url('../assets/img/cursor-emblem-gold-32.png') 15 15, pointer; }
}

/* lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ============================================================
   TYPE ROLES — the site's
   ============================================================ */
.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); }
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--navy);
}
.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; }
.small { font-size: var(--t-small); line-height: 1.65; }
.fine  { font-size: var(--t-fine); line-height: 1.7; opacity: .62; }

/* split words rise out of their own line (JS wraps them; GSAP gives each
   its own layer only while it moves) */
.w  { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; }

/* ============================================================
   PRIMITIVES — capsule, textlink (the site's)
   ============================================================ */
.capsule {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--sans); font-weight: 500;
  font-size: var(--t-caption); letter-spacing: var(--track); 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 var(--ease), color .45s var(--ease), border-color .45s;
}
.capsule:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.capsule--solid { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.capsule--solid:hover { background: transparent; color: var(--navy); }

.textlink {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: var(--t-caption); letter-spacing: var(--track); 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 var(--ease);
}
.textlink:hover::after { transform: scaleX(.35); }

/* ============================================================
   LOADER — the full logo, poured in; then it flies to the header
   ============================================================ */
.loader { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
html:not(.js) .loader { display: none; }
.ld-bg { position: absolute; inset: 0; background: var(--cream); pointer-events: auto; overflow: hidden; }
.ld-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('../assets/img/grain.png') repeat; mix-blend-mode: multiply; opacity: .55; }
/* the brand book's gold lines, drawing in from two corners */
/* the emblem again, drawn huge and faint behind — as the site's footer does */
.ld-ghost { position: absolute; left: 50%; top: 50%; width: min(92vh, 92vw); height: auto; translate: -50% -50%; fill: none; stroke: var(--gold); stroke-width: .22; opacity: .07; }
.ld-lines { position: absolute; width: min(56vw, 760px); height: auto; overflow: visible; }
.ld-lines--tr { top: 0; right: 0; }
.ld-lines--bl { bottom: 0; left: 0; transform: rotate(180deg); }
.ld-lines path { fill: none; stroke: var(--gold-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* the mark, centred; its own layer so it can leave the paper behind */
.ld-logo {
  position: fixed; left: 50%; top: 46%;
  width: clamp(156px, 15vw, 236px); aspect-ratio: 116 / 102;
  margin: calc(clamp(156px, 15vw, 236px) * -102 / 232) 0 0 calc(clamp(156px, 15vw, 236px) / -2);   /* centred without a transform: the flight owns the transform */
  will-change: transform;
}
.ld-svg { display: block; width: 100%; height: 100%; overflow: visible; color: #BE8D56; }   /* the logo file's own gold — never recoloured */
.ld-svg path { fill: currentColor; }
/* a foil glint across the whole mark — the logo file itself is the mask */
.ld-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, rgba(255,246,228,0) 38%, rgba(255,246,228,.95) 50%, rgba(255,246,228,0) 62%) 120% 0 / 300% 100% no-repeat;
  -webkit-mask: url('../assets/logo.svg') center / contain no-repeat; mask: url('../assets/logo.svg') center / contain no-repeat;
}
.ld-foot {
  position: absolute; left: 50%; bottom: clamp(40px, 9vh, 96px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ld-count { font-family: var(--sans); font-weight: 500; font-size: var(--t-label); letter-spacing: var(--track); color: var(--bronze); font-variant-numeric: tabular-nums; }
.ld-line { width: min(200px, 46vw); height: 1px; background: var(--gold-faint); overflow: hidden; }
.ld-line i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
/* the header's own logo waits until the flying one lands on it */
.site-head.ld-hold .brand img { opacity: 0; }

/* ============================================================
   HEADER — the site's bar: over the film, then a glass capsule
   ============================================================ */
.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 var(--ease), max-width .6s var(--ease), padding .6s var(--ease),
    border-radius .6s var(--ease), background .5s, border-color .5s, backdrop-filter .5s,
    transform .7s var(--ease), opacity .5s var(--ease);
}
/* while the page rides up over the opening, the bar steps up out of the
   way; it comes back down as the capsule when the second section arrives
   (or at once, for a keyboard that reaches it) */
.site-head.away { transform: translate(-50%, calc(-100% - 24px)); opacity: 0; pointer-events: none; }
.site-head.away:focus-within { transform: translateX(-50%); opacity: 1; pointer-events: auto; }
.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, opacity .45s; }
.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); }
.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); }
/* WhatsApp, as the site's floating chat button */
.head-wa {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid var(--gold-faint); color: var(--navy);
  transition: background .4s, border-color .4s, color .4s;
}
.head-wa svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.head-wa:hover { background: var(--cream); border-color: var(--gold); }
.site-head:not(.solid) .head-wa { color: var(--cream); border-color: rgba(246,238,230,.6); }
.site-head:not(.solid) .head-wa:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
@media (max-width: 640px) { .head-cta .capsule { display: none; } }
/* on a desktop the chat steps back: the header keeps only the booking
   button (a phone keeps the chat, its one quick way in) */
@media (min-width: 901px) { .head-wa { display: none; } }

/* ============================================================
   01 · HERO — the render in two layers, the Custom Type between them
   The back layer is the sky alone (the towers painted out of it); the
   towers, trees and city are cut out and sit in front; COME HOME. lives in
   the open sky between — beside the towers on a wide screen, above them
   on a phone. The words rise from behind the towers; on scroll the towers
   rise and the words settle in behind them.
   ============================================================ */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  /* the Custom Type, COME HOME. on one line: sized to the width of open sky
     left of the towers (about half the frame on a wide screen, less as
     the frame narrows and the render is cropped at its sides) */
  --ht: clamp(48px, min(7.2vw, 9vw - 2.95vh, 15vh), 150px);
  --ht-top: clamp(140px, 25vh, 280px);                /* a clear breath of sky under the header */
}
.hero-frame { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 round var(--fr, 0px)); background: #9CC6F2; will-change: transform; }   /* clipped as one, so every layer shares the same edge as it scales */
/* both layers fill the frame the same way, so they always line up */
.hero-layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; will-change: transform; }
.hero-base { z-index: 0; }
.hero-type { position: absolute; z-index: 1; left: var(--gutter); top: var(--ht-top); filter: drop-shadow(0 1px 0 rgba(0,43,73,.3)); }
.hero-cut { z-index: 2; pointer-events: none; }
.hero-dim { position: absolute; inset: 0; z-index: 3; background: var(--navy-deep); opacity: 0; pointer-events: none; }
/* the zenith deepens under the header, so the white mark reads on the sky;
   a breath of navy at the foot carries the mandates over the trees */
.hero-frame::before, .hero-frame::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-frame::before { background: linear-gradient(180deg, rgba(0,43,90,.42) 0%, rgba(0,43,90,.16) 9%, rgba(0,43,90,0) 18%); }
.hero-frame::after { background: linear-gradient(0deg, rgba(0,30,51,.72) 0%, rgba(0,30,51,.38) 13%, rgba(0,30,51,0) 28%); }
.hero-type { white-space: nowrap; }
.ht-line { display: inline-block; font-size: var(--ht); line-height: .9; }
.ht-line + .ht-line { margin-left: .26em; }   /* the word space, which the letter split would swallow */
/* on the sky the Custom Type keeps to the deeper blues, so it never fades into it */
.hero-type .ch {
  background:
    linear-gradient(105deg, rgba(246,238,230,0) 42%, rgba(246,238,230,.85) 50%, rgba(246,238,230,0) 58%) calc((var(--sweep, 100) + var(--ci, 0) * 26) * 1%) 0 / 300% 100% no-repeat,
    url('../assets/img/grain.png') repeat,
    linear-gradient(118deg, var(--navy) 0%, #164781 46%, #2C5794 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* one column from under COME HOME. to the foot of the frame: the eyebrow,
   the line and the button at its top, the mandates pushed to its foot.
   Stacked in one column, they can only ever sit apart */
.hero-copy {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(var(--ht-top) + var(--ht) * .9 + clamp(26px, 3.6vh, 40px)) var(--gutter) clamp(18px, 3vh, 30px);
}
.hero-copy > * { pointer-events: auto; }
.hero-content { max-width: min(44vw, 640px); margin-bottom: 24px; }
.hero-eyebrow { display: block; margin-bottom: clamp(12px, 1.8vh, 18px); font-size: var(--t-eyebrow); }
.hero-eyebrow span { white-space: nowrap; }   /* if it must wrap, it breaks at the dot */
.hero-h { font-size: inherit; line-height: inherit; color: inherit; }
.hero-line { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.12; letter-spacing: .01em; color: var(--navy); }
.hero-line em { font-style: italic; }
.hero-cta { margin-top: clamp(20px, 3.2vh, 32px); }
.rera-strip {
  margin-top: auto;
  text-align: left; font-size: var(--t-fine); line-height: 1.8; color: rgba(246,238,230,.86);
}
.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); }

/* portrait (phones, tablets upright): the towers stand in the lower half,
   COME HOME. in the sky above them; the eyebrow, line and button gather
   at the foot over a breath of navy */
@media (max-aspect-ratio: 4/5) {
  /* one line across the sky, kept above the tallest tower's crown, which
     stands higher the wider the screen (it lands near 40vh - 25vw) */
  .hero {
    --ht: clamp(40px, min(14vw, 7.5vh), 104px);
    --ht-top: calc(env(safe-area-inset-top, 0px) + clamp(108px, 40vh - 25.2vw - var(--ht) * .9 - 20px, min(20vh, 220px)));
  }
  .hero-layer { object-position: 50% 40%; }
  .hero-frame::after { background: linear-gradient(0deg, rgba(0,30,51,.88) 0%, rgba(0,30,51,.68) 30%, rgba(0,30,51,.32) 50%, rgba(0,30,51,0) 64%); }
  .hero-content { align-self: stretch; margin: auto 0 0; max-width: none; }   /* down to the foot, just above the mandates */
  .rera-strip { margin-top: 28px; }
  .hero .hero-eyebrow { font-size: var(--t-micro); color: rgba(246,238,230,.92); }   /* on the navy, over the towers, gold would sink into the facade */
  .hero-line { color: var(--cream); }
  .hero-cta { white-space: nowrap; padding: 15px 24px; }
  .rera-strip { font-size: 10.5px; }
}
/* short phones: the line lands on the towers' glass, so the shade reaches higher */
@media (max-aspect-ratio: 4/5) and (max-height: 620px) {
  .hero-frame::after { background: linear-gradient(0deg, rgba(0,30,51,.86) 0%, rgba(0,30,51,.64) 36%, rgba(0,30,51,0) 66%); }
}
/* narrow phones: the CTA wraps rather than running off the screen */
@media (max-aspect-ratio: 4/5) and (max-width: 359px) {
  .hero-cta { white-space: normal; text-align: center; line-height: 1.35; padding: 13px 22px; }
}

/* the page proper: everything after the opening rides up over it */
.sheet { position: relative; z-index: 2; background: var(--white); border-radius: 26px 26px 0 0; }

/* ============================================================
   SECTION SHELL — the site's
   ============================================================ */
.sect { padding: clamp(72px, 9.5vh, 124px) var(--gutter); }
.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; }
.sect-head .sub { margin: 18px auto 0; max-width: 56ch; font-size: var(--t-lead); line-height: 1.7; }
/* the same head, set to the left where a layout runs from there */
.sect-head--left { text-align: left; }
.sect-head--left .display, .sect-head--left .sub { margin-inline: 0; }

/* ============================================================
   02 · NEOPOLIS — the brand book's own terms
   Custom Type: uppercase Collapse "crafted to create a three dimensional,
   lustrous surface with interplay of texture, light and shadow" — the
   brand's textured blue, a sunlit glint passing across. Collapse Regular
   for the line, italics for its key words; Greenwich Light for the story;
   the brochure's gold lines in from the page edge, framing a window onto
   the towers — rounded where it is open, running off the page where it
   is not — which opens until it is the page. The film is always fitted
   to the window, so the towers stand in its middle.
   ============================================================ */
.neo { position: relative; }
.neo-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--white); display: flex; align-items: center; padding: 0 var(--gutter); }
.neo-copy { position: relative; z-index: 2; width: min(50vw, 800px); }   /* centred by the stage's flex, so no transform for the scroll to take over */
.neo-label { display: block; margin-bottom: 22px; font-size: var(--t-eyebrow); }
.neo-h { font-weight: 400; }
.custom-type { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.neo-word {
  display: block; font-size: clamp(58px, 9.2vw, 164px); line-height: .9;
  filter: drop-shadow(0 1px 0 rgba(0,43,73,.3));   /* the hairline of shadow that lifts the letters — no haze */
}
/* each letter carries the textured blue: navy into the brand's light blue,
   the paper grain over it, and a cream glint that travels letter to letter */
.custom-type .ch {
  display: inline-block;
  /* the painted box must hold the whole capital: Collapse's tops and the
     full stop rise above a .9 line, so the box is opened up and the
     margins give the room back */
  padding: .2em .03em .08em; margin: -.2em -.03em -.08em;
  background:
    linear-gradient(105deg, rgba(246,238,230,0) 42%, rgba(246,238,230,.9) 50%, rgba(246,238,230,0) 58%) calc((var(--sweep, 100) + var(--ci, 0) * 26) * 1%) 0 / 300% 100% no-repeat,
    url('../assets/img/grain.png') repeat,
    linear-gradient(118deg, var(--navy) 0%, #1F4F8A 38%, #4F78B6 70%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) { .custom-type .ch { background: none; -webkit-text-fill-color: var(--navy); } }
.neo-line { display: block; margin-top: clamp(16px, 2.6vh, 28px); max-width: 15em; font-family: var(--serif); font-size: var(--t-h2); line-height: 1.12; color: var(--navy); }
.neo-line em { font-style: italic; }
.neo-text { margin-top: clamp(22px, 3.6vh, 36px); max-width: 46ch; font-size: var(--t-lead); line-height: 1.7; color: var(--navy-ink); }
.neo-text .fw { display: inline-block; }
/* the brochure's gold lines: thin, in from the page edge, rounding the
   window's corners and back out, fading as they step away */
.neo-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.neo-lines path { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.neo-lines path:nth-child(2) { stroke: var(--gold-line); }
.neo-lines path:nth-child(3) { stroke: var(--gold-faint); }
/* the window: the whole stage, clipped to a panel running off the right
   edge with the brochure's rounded corners on its open side (JS sets it,
   and fits the film to it) */
.neo-window { position: absolute; inset: 0; z-index: 1; background: var(--navy-deep); overflow: hidden; clip-path: inset(14% 0 14% 58% round var(--typ-r) 0 0 var(--typ-r)); }
.neo-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.neo-scrim {
  position: absolute; inset: 0; pointer-events: none; opacity: 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%);
}
.neo-after { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(96px, 13vh, 130px); opacity: 0; }
.neo-after .display { color: var(--cream); }

/* ============================================================
   CHIPS — the site's (the form's configuration choice), and the soft
   gold pulse the room's markers wear
   ============================================================ */
.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; }
@keyframes mkPulse { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* ============================================================
   04 · AT A GLANCE — the site's ledger cells, either side of the
   towers in the site's rounded panel
   ============================================================ */
.glance-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 80px); align-items: center;
  margin-top: clamp(34px, 5.2vh, 60px);
}
.glance-col { 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);
}
.glance-col--l .gcell { align-items: flex-end; text-align: right; padding-left: 6px; padding-right: 0; }
.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;
}
.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); }
.glance-fig { position: relative; width: min(100%, 56vh); aspect-ratio: 1122 / 1402; margin: 0 auto; border-radius: 26px; overflow: hidden; background: var(--cream); }
.glance-fig img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   05 · GLOBAL STANDARDS — the three houses side by side, in the site's
   partner-panel treatment. They open in turn as the row arrives; under
   the hand a scene warms back towards its colour, the mark lifts and
   the gold rule runs out under it
   ============================================================ */
.std-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 36px);
  margin-top: clamp(34px, 5.2vh, 60px);
}
.std-pic { position: relative; margin: 0; aspect-ratio: 4 / 4.4; max-height: 64vh; border-radius: 26px; overflow: hidden; background: var(--pc); isolation: isolate; }
/* the scene in monochrome, washed in the house's colour (the site's) */
.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 var(--ease), filter 1s var(--ease);
}
.pt-veil { position: absolute; inset: 0; background: var(--pc); mix-blend-mode: multiply; opacity: .84; transition: opacity 1s var(--ease); }
.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%); }
.pt-logo { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); display: block; width: auto; max-width: min(78%, 300px); height: clamp(30px, 3vw, 44px); object-fit: contain; transition: transform 1s var(--ease); }
.pt-logo--stack { height: clamp(52px, 5.1vw, 76px); }
.pt-logo--wide  { height: clamp(18px, 1.8vw, 26px); }
.pt-logo--ink   { filter: brightness(0) invert(1); opacity: .96; }
/* the house's line, under a short gold rule */
.std-meta { padding-top: clamp(18px, 2.6vh, 24px); }
.std-meta::before { content: ''; display: block; height: 1px; background: var(--gold); transform: scaleX(calc(var(--rule, 1) * .14)); transform-origin: left; transition: transform 1.1s var(--ease); }   /* --rule draws it in on arrival */
.pt-tag { margin: 14px 0 6px; font-family: var(--sans); font-weight: 500; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); line-height: 1.7; }
.std-n { font-family: var(--serif); font-weight: 400; font-size: var(--t-h4); line-height: 1.15; color: var(--navy); }
.sn-text { margin-top: 8px; max-width: 38ch; font-size: var(--t-small); line-height: 1.7; color: var(--navy-ink); }
@media (hover: hover) {
  .std-card:hover .pt-bg { transform: scale(1.1); filter: grayscale(.25) contrast(1.05) brightness(1.02); }
  .std-card:hover .pt-veil { opacity: .5; }
  .std-card:hover .pt-logo { transform: translate(-50%, -58%); }
  .std-card:hover .std-meta::before { transform: scaleX(1); }
}

/* the minds — the site's consultant names, under their portraits */
.minds { margin-top: clamp(56px, 9vh, 104px); }
.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); }
.minds-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); padding-top: clamp(24px, 3.6vh, 36px); }
.mind figure { aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--cream); margin: 0 0 18px; }
.mind img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mind:hover img { transform: scale(1.04); }
.rc-role { font-size: var(--t-micro); letter-spacing: var(--track); color: var(--bronze); }
.rc-name { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: var(--t-h4); line-height: 1.15; color: var(--navy); }
.rc-pos { margin-top: 5px; font-size: var(--t-small); line-height: 1.5; color: rgba(14,52,83,.72); }

/* ============================================================
   06 · WELLNESS — one spread, after the site's WELL page: the claim on
   a still from the wellness film, the six beside it ruled in gold
   ============================================================ */
.well-spread {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 72px); align-items: stretch;
  margin-top: clamp(34px, 5.2vh, 60px);
}
/* the claim, on the picture — the site's 26px panel */
.well-panel { position: relative; margin: 0; min-height: clamp(440px, 62vh, 640px); border-radius: 26px; overflow: hidden; background: var(--navy-deep); }
.well-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
/* the still is bright mist where the claim sits, so the navy rises from
   the foot well past the words, and leans in from the side they start on */
.well-panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,30,51,.16) 0%, rgba(0,30,51,0) 20%, rgba(0,30,51,.46) 40%, rgba(0,30,51,.82) 62%, rgba(0,30,51,.94) 100%),
    linear-gradient(90deg, rgba(0,30,51,.34) 0%, rgba(0,30,51,0) 72%);
}
.well-claim {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.ws-badge { width: clamp(84px, 7vw, 112px); height: auto; border-radius: 8px; margin-bottom: 6px; }
.ws-title { max-width: 15em; font-family: var(--serif); font-size: var(--t-h3); line-height: 1.12; letter-spacing: .01em; color: var(--cream); text-shadow: 0 2px 22px rgba(0,22,38,.5); }
.ws-title em { font-style: normal; text-transform: uppercase; color: var(--gold); }
.ws-note { max-width: 40ch; font-size: var(--t-small); line-height: 1.6; color: rgba(246,238,230,.9); text-shadow: 0 1px 12px rgba(0,22,38,.55); }
/* the six — a ledger in two columns, ruled in gold */
.well-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr;
  border-top: 1px solid var(--gold-line);
}
.wg {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
  padding: clamp(22px, 3.4vh, 36px) clamp(18px, 2.2vw, 36px);
  border-bottom: 1px solid var(--gold-line);
}
.wg:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--gold-line); }
.wb-t { font-family: var(--serif); font-size: var(--t-h4); line-height: 1.15; color: var(--navy); }
.wl-t { max-width: 34ch; font-size: var(--t-body); line-height: 1.6; color: var(--navy-ink); }
@media (max-width: 1100px) and (min-width: 901px) { .well-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }

/* ============================================================
   07 · RESIDENCES — the site's typology pair, verbatim
   ============================================================ */
.typ-pair {
  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); }
.typ-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px clamp(22px, 2.8vw, 48px); align-items: end; }
.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; }
.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; }
.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; }
.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-dots { display: flex; align-items: center; gap: 7px; }
.th-dots i { width: 11px; height: 11px; border: 1px solid var(--gold); border-radius: 50%; }
.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);
}
.typ-cta { margin-top: clamp(16px, 2.6vh, 26px); padding: 14px 30px; }
@media (max-width: 1100px) and (min-width: 861px) { .typ-top { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .typ-sizes { display: grid; grid-template-columns: repeat(3, max-content); } }
@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 room, with its features pointed out — notes in the site's
   residence-key type, on the site's frosted glass */
.spots { position: relative; margin-top: clamp(56px, 9vh, 110px); }
.spots-fig { position: relative; margin: 0; aspect-ratio: 1600 / 960; border-radius: 26px; overflow: hidden; background: var(--cream); }
.spots-fig img { width: 100%; height: 100%; object-fit: cover; }
.spot {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(246,238,230,.9); background: rgba(246,238,230,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .45s var(--ease), background .45s;
}
.spot i { width: 9px; height: 9px; border-radius: 50%; background: var(--cream); }
.spot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(227,162,68,.55); animation: mkPulse 2.6s var(--ease) infinite; }
.spot:hover, .spot.is-on { transform: scale(1.12); background: var(--gold-line); }
.spot-cards { position: absolute; inset: 0; pointer-events: none; }
.spot-card {
  position: absolute; left: var(--x); top: var(--y); z-index: 3;
  width: min(270px, 22vw); padding: 16px 20px 17px;
  border-radius: 26px; border: 1px solid var(--gold-faint);
  background: rgba(250, 245, 238, .82);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transform: translate(30px, -50%);
  transition: border-color .4s;
}
.spot-card[data-side="l"] { transform: translate(calc(-100% - 30px), -50%); }
.spot-card.is-on { border-color: var(--gold); }
.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: 6px; font-size: var(--t-small); line-height: 1.55; color: rgba(14,52,83,.72); }

/* ============================================================
   08 · SEVEN LEVELS — the ascent; captions in the site's level-slide
   type, the rail in its level marks
   ============================================================ */
.lv-intro { padding-bottom: clamp(32px, 5vh, 56px); }
.lv-stage { height: 100vh; height: 100svh; padding: clamp(8px, 1.2vw, 16px); }
.lv-frame { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: var(--navy-deep); }
.lv-pics, .lv-pic { position: absolute; inset: 0; }
.lv-pics { z-index: 0; isolation: isolate; }
.lv-pic { margin: 0; clip-path: inset(100% 0 0 0); overflow: hidden; }
.lv-pic:first-child { clip-path: inset(0 0 0 0); }
.lv-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); will-change: transform; }
.lv-pic::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,30,51,.42) 0%, rgba(0,30,51,0) 30%),
    linear-gradient(180deg, rgba(0,30,51,0) 40%, rgba(0,30,51,.42) 62%, rgba(0,30,51,.78) 84%, rgba(0,30,51,.92) 100%);
}
/* the caption ends above the floating buttons, so its list is never under them */
.lv-cap { position: absolute; z-index: 1; right: var(--gutter); bottom: calc(clamp(16px, 2.4vw, 34px) + 70px); width: min(680px, 52%); text-align: right; 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);
}
.lv-title { margin-top: 8px; color: var(--cream); }
.hslide-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 18px; margin-top: 14px; }
.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); }
/* the rail sits on navy glass, so every level's name reads on every picture */
.lv-railbox {
  position: absolute; left: clamp(18px, 2.6vw, 44px); top: 50%; transform: translateY(-50%); z-index: 3;
  padding: clamp(14px, 2vh, 22px) clamp(20px, 1.8vw, 28px) clamp(14px, 2vh, 22px) clamp(14px, 1.3vw, 20px);
  border-radius: 26px; border: 1px solid rgba(246,238,230,.16);
  background: rgba(0, 30, 51, .58);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.lv-rail { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(4px, 1.2vh, 12px); }
.lv-rail li { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; cursor: pointer; color: rgba(246,238,230,.74); transition: color .6s var(--ease); }
.lv-rail li:hover { color: var(--cream); }
.lv-rail li::before {
  content: ''; flex: none; width: clamp(30px, 2.8vw, 40px); height: clamp(30px, 2.8vw, 40px); background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.lv-rail li:nth-child(1) { --ico: url(../assets/img/levels/sky-garden.svg); }
.lv-rail li:nth-child(2) { --ico: url(../assets/img/levels/sky-lounge.svg); }
.lv-rail li:nth-child(3) { --ico: url(../assets/img/levels/tower-lounge.svg); }
.lv-rail li:nth-child(4) { --ico: url(../assets/img/levels/clubhouse.svg); }
.lv-rail li:nth-child(5) { --ico: url(../assets/img/levels/under-tower.svg); }
.lv-rail li:nth-child(6) { --ico: url(../assets/img/levels/podium.svg); }
.lv-rail li:nth-child(7) { --ico: url(../assets/img/levels/groundscape.svg); }
.lv-t { font-weight: 500; font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase; }
.lv-rail li.is-past { color: rgba(246,238,230,.92); }
.lv-rail li.is-on { color: var(--gold); }
/* the climb: a hairline up the rail, gold to the level you've reached */
.lv-climb { position: absolute; z-index: 0; width: 1px; background: var(--cream-line); pointer-events: none; }
.lv-climb i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--gold); transform: scaleY(0); transform-origin: bottom; }

/* ============================================================
   09 · THE NRI EXPERIENCE — five ways in on one screen, and the booking
   for the way chosen
   ============================================================ */
.vx-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
/* the five ways, as the site's capsules. The one on screen fills with the
   brand's bronze from the left over five seconds — its name turning cream
   as the fill passes — then the fill flows out of its right edge and the
   next one begins. A way the visitor picks is filled outright, and the
   turns stop. Bronze, not navy: the booking button under them is the navy */
.vx-ways { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3.6vh, 36px); }
.vx-way {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center;
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(14,52,83,.28); color: var(--navy);
  font-family: var(--sans); font-weight: 500; font-size: var(--t-fine); letter-spacing: var(--track); text-transform: uppercase; line-height: 1.3; white-space: nowrap;
  transition: border-color .45s var(--ease);
}
.vx-way:hover, .vx-way.is-on { border-color: var(--bronze); }
/* the fill: a bronze copy of the pill, its name in cream, revealed from the left */
.vw-fill {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; padding: inherit;
  background: var(--bronze); color: var(--cream);
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}
.vx-way.is-on .vw-fill { animation: vwfill var(--vx-dur, 5s) linear forwards; }
.vx-ways.paused .vw-fill { animation-play-state: paused; }
.vx-ways.held .vx-way.is-on .vw-fill { animation: none; clip-path: inset(0 0 0 0); }
@keyframes vwfill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* the way chosen, in a line, and its booking */
.vx-pick { margin-top: clamp(22px, 3.4vh, 32px); padding-top: clamp(18px, 2.6vh, 24px); border-top: 1px solid var(--gold-faint); }
.vx-kind { font-weight: 500; font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--bronze); line-height: 1.6; }
.vx-desc { margin-top: 6px; min-height: 3.2em; font-size: var(--t-body); line-height: 1.6; color: var(--navy-ink); }   /* the column's full width: no early breaks */

.vx-screen-wrap { position: relative; }
.vx-screen { position: relative; aspect-ratio: 16 / 11; border-radius: 26px; overflow: hidden; background: var(--navy-deep); }
.vx-media { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .9s var(--ease), transform 1.4s var(--ease); }
.vx-media.is-on { opacity: 1; transform: none; z-index: 1; }
.vx-media > video, .vx-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the VR glimpse: the room drifts slowly side to side until you take it
   and look around yourself */
.vx-media--vr { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vx-media--vr.grab { cursor: grabbing; }
.vx-media--vr > img { object-position: var(--vr-x, 0%) 50%; animation: pan 22s ease-in-out infinite alternate; }
.vx-media--vr.held > img { animation: none; }
/* it drifts only while it is the way on screen and the section is in view:
   the drift repaints the whole picture every frame */
.vx-media--vr:not(.is-on) > img, .vx-grid.off .vx-media--vr > img { animation-play-state: paused; }
@keyframes pan { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
.vr-hint {
  position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px;
  background: rgba(0, 30, 51, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-weight: 500; font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--cream);
  transition: opacity .6s var(--ease); pointer-events: none;
}
.vr-hint svg { width: 22px; height: 11px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vx-media--vr.held .vr-hint { opacity: 0; }
/* glass, as the site's floating chat */
.vx-chip {
  position: absolute; left: 18px; top: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; 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);
  font-weight: 500; font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--navy);
}

.vx-cta { margin-top: clamp(16px, 2.4vh, 22px); }

/* ============================================================
   10 · YOUR JOURNEY HOME — the brand's gold line, on the brand's paper:
   six steps in one row, lit as the line reaches them
   ============================================================ */
.journey { position: relative; background: var(--cream); }
.journey::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('../assets/img/grain.png') repeat; mix-blend-mode: multiply; opacity: .55; }
.jy-stage { position: relative; padding: clamp(64px, 9vh, 112px) var(--gutter) clamp(56px, 8vh, 96px); }
.jy-head .display { max-width: 16em; }
/* the line runs dot to dot: faint all the way, gold as far as you've come */
.jy-steps { position: relative; margin-top: clamp(44px, 7vh, 76px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jy-steps::before, .jy-steps::after { content: ''; position: absolute; top: 22px; left: calc(100% / 12); right: calc(100% / 12); height: 1px; background: var(--gold-faint); }
.jy-steps::after { background: var(--gold); transform: scaleX(var(--jy, 0)); transform-origin: left; will-change: transform; }   /* its own layer: drawing it never repaints the grained paper */
.jy-step { position: relative; display: grid; grid-template-rows: 44px auto; justify-items: center; padding: 0 clamp(6px, 1vw, 16px); text-align: center; }
.jy-dot {
  position: relative; z-index: 1; align-self: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--gold);
  outline: 1px solid transparent; outline-offset: 5px;
  transition: background .5s var(--ease), outline-color .5s var(--ease);
}
.jy-step.is-on .jy-dot { background: var(--gold); outline-color: var(--gold-faint); }
.jy-step--home .jy-dot { width: 44px; height: 44px; display: grid; place-items: center; }
.jy-step--home .jy-dot svg { width: 22px; height: 22px; fill: var(--gold); transition: fill .5s; }
.jy-step--home.is-on .jy-dot svg { fill: var(--cream); }
.jy-lab {
  margin-top: 18px; max-width: 22ch;
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.jy-step.is-on .jy-lab { opacity: 1; transform: none; }
html:not(.js) .jy-lab { opacity: 1; transform: none; }
.jy-n { font-family: var(--serif); font-size: var(--t-h4); line-height: 1.15; color: var(--navy); }
.jy-t { margin-top: 6px; font-size: var(--t-small); line-height: 1.55; color: var(--navy-ink); }

/* ============================================================
   11 · THE CLOSING — the balcony at sunset; the frame opens to the
   page's edge as it arrives, and the line lands
   ============================================================ */
.closing { position: relative; background: var(--white); }
.cl-stage { height: 100vh; height: 100svh; min-height: 560px; }
.cl-frame { position: relative; height: 100%; overflow: hidden; background: var(--navy-deep); will-change: clip-path; }
.cl-pic { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 50%; will-change: transform; }
.cl-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,43,73,.42) 0%, rgba(0,43,73,0) 22%),
    linear-gradient(90deg, rgba(0,43,73,.7) 0%, rgba(0,43,73,.38) 46%, rgba(0,43,73,0) 70%);
}
.cl-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); }
.cl-title { color: var(--cream); }
.cl-title span { display: block; }
.cl-end-copy { margin-top: clamp(22px, 3.4vh, 34px); display: flex; flex-direction: column; align-items: flex-start; }
.cl-end-copy .hero-cta { margin-top: 0; }   /* the button sits straight under the line */
/* filled, in the cream of the line above it: a navy fill would sink into the film's navy shade */
.cl-end-copy .capsule { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.cl-end-copy .capsule:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }   /* fills with the brand's navy, never left bare on the picture */

/* ============================================================
   FOOTER — the site's: the brand's textured blue, identity, mandates,
   contact, band; the name rising out of it
   ============================================================ */
#foot { position: relative; color: var(--cream); overflow: clip; background: linear-gradient(160deg, #234C86 0%, #21467C 100%); }
.foot-tex { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.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; }
.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; }
.foot-grain { position: absolute; inset: 0; z-index: 1; background: url('../assets/img/grain.png') repeat; opacity: 1; }
.foot-shell { position: relative; z-index: 2; padding: clamp(56px, 8vh, 96px) var(--gutter) 0; }
.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); }
.foot-rera a { color: rgba(246,238,230,.9); text-decoration: none; border-bottom: 1px solid rgba(246,238,230,.3); }
.foot-rera a:hover { color: var(--gold); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); 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); }
.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); }
.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); }
.fp-urban { height: clamp(23px, 2.5vw, 32px); }
/* the name, rising out of the footer as the page ends */
.foot-word {
  position: relative; z-index: 2;
  font-family: var(--serif); font-size: 15.6vw; line-height: .74; text-align: center;
  text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
  color: rgba(246,238,230,.07); overflow: clip; padding-top: .04em;
}
.foot-word span { display: block; transform: translateY(18%); }
@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; }
}

/* ============================================================
   ENQUIRY — the site's modal and form, field for field: name | email,
   phone | configuration, then the date. The phone carries the country
   (and its code); the date opens a calendar under itself.
   ============================================================ */
.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); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s .45s;
}
.modal-veil[hidden] { display: none; }
.modal-veil.open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.modal-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: min(92vh, 92svh); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--gold-faint) transparent;
  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 var(--ease);
}
.modal-veil.open .modal-panel { transform: none; }
.modal-close {
  position: absolute; top: 14px; right: 18px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  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 var(--ease), 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: 0 32px 16px;
  position: relative;
}
.modal-title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 34px; height: 2px; background: var(--gold); }
.form-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px clamp(24px, 3vw, 48px); text-align: left; }
.form-grid .ffield--wide { grid-column: 1 / -1; }
.ffield { padding-top: 18px; min-width: 0; }
.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 {
  width: 100%; min-width: 0; 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 input:focus { border-bottom-color: var(--gold); }
/* the phone: the country's code, a picker of its own, then the number, on one rule */
.ph-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(14,52,83,.4); transition: border-color .4s; }
.ph-row:focus-within { border-bottom-color: var(--gold); }
.ph-row input { border-bottom: 0; }
.ph-code {
  position: relative; flex: none; display: flex; align-items: center;
  margin: 4px 12px 6px 0; padding: 0 22px 0 0;
  border-right: 1px solid var(--gold-faint);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A6239' stroke-width='1.2'/%3E%3C/svg%3E") right 8px center / 9px no-repeat;
}
.ph-dial { font-size: 16px; color: var(--bronze); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ph-code select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; appearance: none; -webkit-appearance: none; }
.ph-code:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
/* the date: a field like the others, a calendar icon at its end */
.date-field {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid rgba(14,52,83,.4);
  padding: 6px 0 10px; cursor: pointer; text-align: left;
  font-family: var(--sans); font-weight: 300; font-size: 16px; color: var(--navy-ink);
  transition: border-color .4s;
}
.date-field:focus-visible, .date-field[aria-expanded="true"] { outline: 0; border-bottom-color: var(--gold); }
.date-txt.is-empty { color: rgba(14,52,83,.45); }
.date-field svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--bronze); stroke-width: 1.2; }
/* the calendar, opening under the field */
.cal {
  margin-top: 12px; max-width: 340px; padding: 16px 16px 12px;
  background: var(--cream-lift); border: 1px solid var(--gold-faint); border-radius: 22px;
}
.cal[hidden] { display: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-m { font-family: var(--serif); font-size: var(--t-h5); line-height: 1.2; letter-spacing: .01em; color: var(--navy); }
.cal-nav {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--gold-faint); color: var(--navy);
  transition: border-color .3s, opacity .3s;
}
@media (hover: hover) { .cal-nav:hover:not(:disabled) { border-color: var(--gold); } }
.cal-nav svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cal-nav:disabled { opacity: .25; cursor: default; }
.cal-wk, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wk { margin-top: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--gold-faint); }
.cal-wk span { text-align: center; font-weight: 500; font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--bronze); }
.cal-grid { gap: 2px 0; margin-top: 6px; }
.cd {
  justify-self: center; width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  font-family: var(--sans); font-weight: 300; font-size: var(--t-body); line-height: 1; color: var(--navy-ink);
  font-variant-numeric: tabular-nums;
  transition: background .3s, border-color .3s, color .3s;
}
@media (hover: hover) { .cd:hover:not(:disabled) { border-color: var(--navy); } }   /* a tapped day keeps no ring on a phone */
.cd--today { border-color: var(--gold); }
.cd.is-on { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.cd:disabled { opacity: .28; cursor: default; }
.cd:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ff-hint { margin-top: 8px; font-size: var(--t-fine); line-height: 1.5; color: var(--bronze); }
/* a field still to fill: the site marks it in blush */
.ffield .bad, .ph-row.bad, .date-field.bad { border-bottom-color: var(--blush); }
.chiprow.bad .chip span { border-color: var(--blush); }
.form-actions { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.form-note { font-size: var(--t-small); }
.form-note svg { display: none; }
.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: 18px 0 -10px; font-size: var(--t-small); color: #B5624A; text-align: center; }
form.is-sending button[type="submit"] { opacity: .55; cursor: progress; pointer-events: none; }
/* phones: a sheet from the foot of the screen; the button stays in reach */
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .modal-veil { place-items: end center; padding: 0; }
  .modal-panel { width: 100%; max-height: 94svh; border-radius: 26px 26px 0 0; border-bottom: 0; padding: 30px 20px 0; transform: translateY(48px); }
  .cal { max-width: none; }
  .cd { max-width: 42px; }
  .form-actions {
    position: sticky; bottom: 0; z-index: 2;
    flex-direction: row; justify-content: center; gap: 10px;
    margin: 22px -20px 0; padding: 18px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(246,238,230,0) 0%, var(--cream) 26%);
  }
  .form-actions .capsule { flex: 1; padding-inline: 18px; }
  .form-note { flex: none; width: 50px; height: 50px; padding: 0; justify-content: center; align-items: center; border: 1px solid var(--gold-line); border-radius: 50%; }
  .form-note::after { display: none; }
  .form-note span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .form-note svg { display: block; width: 21px; height: 21px; fill: none; stroke: var(--navy); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
}

/* ============================================================
   FLOATING ENQUIRY — the site's, once the film is behind you
   ============================================================ */
.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 var(--ease), transform .6s var(--ease);
}
.floatcta.on { opacity: 1; transform: none; pointer-events: auto; }
.floatcta.foot-in, .floatcta.modal-in, .floatcta.cta-in { opacity: 0; pointer-events: none; }
.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 var(--ease), color .45s, transform .5s var(--ease);
}
.fc-enquire:hover { background: var(--cream); color: var(--navy); transform: translateY(-2px); }
@media (max-width: 560px) { .fc-enquire { padding: 14px 20px; font-size: var(--t-fine); } }
/* phones: the booking button alone, centred at the foot */
@media (max-width: 900px) { .floatcta { left: 0; right: 0; width: max-content; margin-inline: auto; } }

/* thank-you — the site's: one line and the way back */
.note-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 140px var(--gutter) 64px; }
.note-page .display-m { margin-top: 14px; }
.note-page p.sub { margin: 16px auto 28px; max-width: 46ch; font-size: var(--t-lead); }
.note-page .note-rera { margin-top: 40px; }

/* ============================================================
   INTRO STATES — held until the loader lets go (JS only)
   ============================================================ */
html.js [data-rise] { opacity: 0; }

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1100px) {
  .glance-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .glance-fig { grid-column: 1 / -1; grid-row: 1; width: min(420px, 70%); margin-bottom: 30px; }
  .glance-col--l .gcell { align-items: flex-start; text-align: left; padding-left: 0; padding-right: 6px; }
  .minds-row { grid-template-columns: repeat(5, minmax(170px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .minds-row::-webkit-scrollbar { display: none; }
  .mind { scroll-snap-align: start; }
  .spot-card { width: min(250px, 30vw); }
}

/* ============================================================
   PHONE & SMALL TABLET — no pins but the films; the page reads down
   ============================================================ */
@media (max-width: 900px) {
  /* the opening isn't pinned on a phone: it scrolls away like any section,
     and the page's rounded top laps over its foot (the mandates keep clear
     of the lap). Nothing on it moves after the entrance, so its layers
     give their GPU memory back */
  .sheet { margin-top: -26px; }
  .hero-copy { padding-bottom: calc(clamp(18px, 3vh, 30px) + 26px); }
  .hero-frame, .hero-layer, .neo-film, .cl-pic, .lv-pic img { will-change: auto; }

  .neo-stage { display: block; height: auto; overflow: visible; padding: clamp(72px, 9.5vh, 124px) var(--gutter) clamp(56px, 8vh, 96px); border-radius: 26px 26px 0 0; }   /* the sheet's rounded top, over the opening */
  .neo-copy { position: static; width: auto; }
  .neo-lines { display: none; }
  .neo-window { position: relative; inset: auto; margin: 36px calc(-1 * var(--gutter)) 0 0; aspect-ratio: 4 / 4.6; border-radius: var(--edge-r) 0 0 var(--edge-r); clip-path: none; }   /* to the page's edge, as the map does */
  .neo-scrim { opacity: 1; }
  .neo-after { opacity: 1; bottom: 28px; left: 24px; right: 24px; }

  /* the three houses, a swipe across rather than a long way down */
  .std-row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 380px);
    gap: 14px; margin: 32px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .std-row::-webkit-scrollbar { display: none; }
  .std-card { scroll-snap-align: start; }
  .std-pic { border-radius: 22px; }
  .minds { margin-top: 56px; }
  .minds-row { grid-template-columns: repeat(5, 62vw); }

  .well-spread { grid-template-columns: 1fr; gap: 8px; }
  .well-panel { min-height: 0; aspect-ratio: 4 / 4.6; border-radius: 22px; }
  .well-grid { grid-template-columns: 1fr; grid-auto-rows: auto; border-top: 0; }
  .wg, .wg:nth-child(odd) { padding: 18px 0; border-right: 0; }

  .spots-fig { aspect-ratio: 4 / 3.4; border-radius: 22px; }
  .spots-fig img { object-position: 60% 50%; }
  .spot-cards { position: static; margin-top: 18px; border-top: 1px solid var(--gold-faint); }
  .spot-card { position: static; width: auto; transform: none !important; padding: 14px 0 15px; border: 0; border-bottom: 1px solid var(--gold-faint); border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .spot-card.is-on .rk-n { color: var(--bronze); }

  .lv-stage { height: auto; padding: 0 var(--gutter) clamp(72px, 9.5vh, 124px); }
  .lv-frame { height: auto; background: none; border-radius: 0; overflow: visible; }
  .lv-pics { position: static; display: grid; gap: 14px; }
  .lv-pic { position: relative; inset: auto; clip-path: none; aspect-ratio: 4 / 4.7; border-radius: 22px; }
  .lv-pic img { transform: none; }
  .lv-cap { left: 22px; right: 22px; bottom: 22px; width: auto; text-align: left; }
  .hslide-list { justify-content: flex-start; }
  .lv-railbox { display: none; }

  /* a phone reads it in order: the title, the screen, the five ways, then the booking */
  .vx-grid { display: flex; flex-direction: column; gap: 0; }
  .vx-side, .vx-screen-wrap { display: contents; }
  .vx-head { order: 1; }
  .vx-screen { order: 2; width: 100%; margin-top: 28px; aspect-ratio: 4 / 3.3; border-radius: 22px; }   /* a set width, or a flex column gives an aspect-ratio box no height */
  .vx-ways { order: 3; margin-top: 22px; gap: 8px; }
  .vx-way { padding: 11px 16px; }
  .vx-pick { order: 4; }
  .vx-cta { width: 100%; }
  .vr-hint { bottom: 14px; }

  /* a phone reads the steps down, the line beside them */
  .jy-steps { grid-template-columns: 1fr; gap: 22px; margin-top: 34px; padding-left: 46px; }
  .jy-steps::before, .jy-steps::after { top: 8px; bottom: 8px; left: 21px; right: auto; width: 1px; height: auto; }
  .jy-steps::after { transform: scaleY(var(--jy, 0)); transform-origin: top; }
  .jy-step { display: block; justify-items: normal; padding: 0; text-align: left; }
  .jy-dot { position: absolute; left: -33px; top: 5px; }
  .jy-step--home .jy-dot { left: -47px; top: -8px; }
  .jy-lab { margin-top: 0; max-width: none; }

  .cl-pic { object-position: 88% 50%; }
  .cl-scrim { 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%); }
  .cl-copy { justify-content: flex-end; padding-bottom: clamp(60px, 12vh, 110px); }
}

/* ============================================================
   REDUCED MOTION — everything shown, nothing travels
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.js [data-rise] { opacity: 1; }
  .spot::after { animation: none; }
  .vx-media--vr > img { animation: none; object-position: var(--vr-x, 50%) 50%; }

  .jy-lab { opacity: 1; transform: none; }
}
/* on a large screen the pinned ascent reads as a list instead */
.still .lv-stage { height: auto; padding: 0 var(--gutter) clamp(72px, 9.5vh, 124px); }
.still .lv-frame { height: auto; background: none; border-radius: 0; overflow: visible; }
.still .lv-pics { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.still .lv-pic { position: relative; inset: auto; clip-path: none; aspect-ratio: 4 / 3; border-radius: 26px; }
.still .lv-pic img { transform: none; }
.still .lv-cap { left: 24px; right: 24px; bottom: 24px; width: auto; text-align: left; }
.still .hslide-list { justify-content: flex-start; }
.still .lv-railbox { display: none; }

@media (max-width: 900px) { .still .lv-pics { grid-template-columns: 1fr; } }

/* Kenyt chat bubble: on a phone it rises clear of the booking button at
   the foot (the main site lifts it 65px; this button sits a little higher) */
@media screen and (max-width: 480px) {
  #kenytChatBubble.style1 { margin-bottom: 80px !important; }
}