@charset "utf-8";
/* ==========================================================================
   KOHINOOR BELLA, Nilje, Dombivli East
   Concept: THE ARCADE. A cream broadsheet built on the developer's own arch.
   Street-level arcade at the foot of the page, sky clubhouse at the top, and
   every photograph placed as a framed plate rather than washed behind text.

   Two rules govern the whole file:
     1. Nothing is ever drawn on top of a photograph or the film. No wash, no
        gradient, no badge, no caption. Copy sits beside or beneath the plate.
     2. This is a LIGHT site with exactly two dark bands. The network default
        is a dark site with a gold accent; that inversion is the point.

   Colour is assigned by role, never by vibe. Every ratio in the comments was
   computed, not estimated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPE FILES
   Self-hosted, latin subset only, swap. No runtime request to Google.
   The rupee sign U+20B9 sits in the latin-ext block, which is why every price
   on this site is written "Rs 33 Lakh". That decision buys one fewer font file.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/marcellus-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/jost-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ground ---------------------------------------------------------------- */
  --ground: #FCF5EC;        /* sampled, the page field                        */
  --surface: #FFFAF3;       /* panels, cards, the form                        */
  --tint: #F5EBDC;          /* alternating band                               */
  --ink-band: #1A1714;      /* the only dark ground on the site               */

  /* Text ------------------------------------------------------------------ */
  --ink: #1A1714;           /* headings          16.50:1 on ground            */
  --body: #443C34;          /* running copy      10.00:1 on ground            */
  --muted: #58595B;         /* labels, captions   6.48:1 on ground            */
  --on-dark: #FCF5EC;       /* copy on the band  16.50:1                      */
  --on-dark-2: #CAC4BC;     /* secondary on band 10.31:1                      */

  /* Brand ----------------------------------------------------------------- */
  --gold: #DF9B32;          /* 7.54:1 on the band. NEVER text on cream (2.19) */
  --gold-deep: #C27218;     /* arch rules, bullets, focus ring. 3.40:1 nontext*/
  --bronze: #A58049;
  --bronze-light: #D5B269;  /* 8.84:1 on the band                             */

  /* Action ---------------------------------------------------------------- */
  --action: #98653C;        /* primary button fill, cream label at 4.55:1     */
  --action-hover: #7E5330;  /* hover fill, cream label at 6.13:1              */
  --action-ink: #7E5330;    /* the action colour used AS TEXT, 6.13:1         */
  --cta-chip: #C3814D;      /* decorative fill only. 2.96:1, never a label    */

  /* WhatsApp. The brand #25D366 carries a cream glyph at 1.83:1 and a cream
     label at the same, which fails 1.4.3 and 1.4.11. Deepened until it passes:
     cream on --wa 5.02:1, and --wa against the cream ground 5.02:1.          */
  --wa: #0B7A3E;

  /* Structure ------------------------------------------------------------- */
  --line: #E7DCC9;          /* decorative hairline, 1.25:1, never load bearing*/
  --line-strong: #8E7C60;   /* interactive boundary, 3.73 / 3.89 / 3.42:1     */
  --hair-dark: rgba(252, 245, 236, .18);  /* hairline on the band            */
  --edge-dark: rgba(252, 245, 236, .42);  /* frame edge on the band, 3.86:1  */

  /* State ----------------------------------------------------------------- */
  --err: #9B1B12;           /* 7.58:1 on ground, and cream on it is 7.58:1    */
  --ok: #1F6B3B;            /* 6.02:1 on ground                               */

  /* Developer credit only -------------------------------------------------- */
  --dev-blue-deep: #025581; /* 7.41:1 on ground. One line on the whole site   */

  /* Type ------------------------------------------------------------------ */
  --font-display: "Marcellus", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  /* Space, 4px base ------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 20px;
  --maxw: 1140px;
  --block: clamp(48px, 8vw, 96px);

  /* Radius ---------------------------------------------------------------- */
  --r-0: 0;
  --r-1: 3px;
  --r-2: 6px;
  --r-pill: 999px;

  /* Shadow. Warm, because a cool grey shadow on cream reads as dirt.
     Only four elements in the whole site may cast one.                       */
  --sh-1: 0 1px 2px rgba(74, 52, 26, .06), 0 2px 8px -4px rgba(74, 52, 26, .10);
  --sh-2: 0 12px 32px -18px rgba(74, 52, 26, .28);
  --sh-3: 0 28px 70px -30px rgba(26, 23, 20, .55);

  /* Motion ---------------------------------------------------------------- */
  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 520ms; --d-5: 1100ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Depth ----------------------------------------------------------------- */
  --z-base: 0; --z-plate: 10; --z-header: 30; --z-mobile-bar: 40;
  --z-drawer-backdrop: 50; --z-drawer: 60; --z-float: 70;
  --z-modal-backdrop: 80; --z-modal: 90; --z-lightbox: 100;
}
@media (max-width: 380px) { :root { --gutter: 16px; } }

/* --------------------------------------------------------------------------
   3. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(1rem, .98rem + .09vw, 1.0625rem);
  line-height: 1.72;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: `overflow:hidden` on the root makes a scroll container
     and quietly kills position:sticky on the header. */
  overflow-x: clip;
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--bronze-light); color: var(--ink); }

:where(a, button, summary, input, select, textarea, video, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
.screening :where(a, button, video):focus-visible,
.contact :where(a, button, input, select, textarea):focus-visible,
.footer :where(a, button):focus-visible,
.topbar a:focus-visible {
  outline-color: var(--gold);            /* 7.54:1 on the band */
}

/* --------------------------------------------------------------------------
   4. TYPE SCALE
   Mobile ratio 1.20, desktop 1.25. Values are real at 360px and at 1100px+.
   Marcellus has one weight, so hierarchy comes from size, tracking and colour.
   Never synthesise a bold on it.
   -------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); }
h4, h5, h6 { font-family: var(--font-ui); font-weight: 500; color: var(--ink); }

h1 { font-size: clamp(1.875rem, 1.35rem + 2.6vw, 3.625rem); line-height: 1.06; letter-spacing: -.008em; }
h2 { font-size: clamp(1.5rem, 1.19rem + 1.55vw, 2.375rem); line-height: 1.12; letter-spacing: -.004em; }
h3 { font-size: clamp(1.1875rem, 1.1rem + .42vw, 1.5rem); line-height: 1.25; }
h4 { font-size: clamp(1.0625rem, 1.03rem + .16vw, 1.1875rem); line-height: 1.3; letter-spacing: .005em; }

p { font-size: clamp(1rem, .98rem + .09vw, 1.0625rem); line-height: 1.72; }
strong, b { font-weight: 500; color: var(--ink); }
small, .small { font-size: clamp(.84375rem, .83rem + .06vw, .875rem); line-height: 1.55; letter-spacing: .006em; }

.lead { font-size: clamp(1.0625rem, .98rem + .38vw, 1.25rem); line-height: 1.62; letter-spacing: .003em; color: var(--body); }

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }

.section { padding-block: var(--block); }
.section + .section { border-top: 0; }        /* bands separate by colour and space */
.section--tint { background: var(--tint); }
.section--surface { background: var(--surface); }

.section__head { max-width: 62ch; margin-bottom: clamp(24px, 4vw, 44px); }
.section__head.center { margin-inline: auto; text-align: center; }
.section__title { margin-top: var(--s-2); }
.center { text-align: center; }

/* The eyebrow carries the arch: a 26px half-round rule above the label. */
.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(.71875rem, .71rem + .04vw, .75rem);
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--action-ink);               /* 6.13:1 on ground */
}
.eyebrow::before {
  content: "";
  display: block;
  width: 26px; height: 6px;
  margin-bottom: 12px;
  background: var(--gold-deep);
  border-radius: 26px 26px 0 0;           /* the arch, in miniature */
}
.section__head.center .eyebrow::before { margin-inline: auto; }
.eyebrow--light { color: var(--gold); }    /* 7.54:1 on the band */
.eyebrow--light::before { background: var(--gold); }
.section__title--light { color: var(--on-dark); }

.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose ol { padding-left: 21px; list-style: decimal; }
.prose li + li { margin-top: var(--s-2); }
.prose ul li { position: relative; padding-left: 18px; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 8px; height: 4px; background: var(--gold-deep); border-radius: 8px 8px 0 0;
}
.prose a { color: var(--action-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose blockquote {
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: 3px solid var(--gold-deep);
  color: var(--ink);
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prose th {
  font-family: var(--font-ui); font-weight: 500; font-size: .71875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------------------
   6. THE ARCH PLATE
   Elliptical top, near-square bottom. It scales with the box, so it reads as
   an arch at 328px on a phone and at 620px on a desktop.
   Banned on: the film frame, the location map, connectivity rings, any floor
   plan, any logo, any landscape image.
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--tint);       /* the shape is drawn before the image decodes */
  border-radius: var(--r-2);
}
.plate--arch { border-radius: 50% 50% var(--r-2) var(--r-2) / 26% 26% var(--r-2) var(--r-2); }
.plate--square { border-radius: var(--r-0); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate[data-lightbox], .g-item[data-lightbox] { cursor: zoom-in; }
.plate__cap, .figcap {
  display: block; margin-top: var(--s-3);
  font-size: clamp(.84375rem, .83rem + .06vw, .875rem);
  line-height: 1.55; color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   Flat fills only. The gradient wash the network puts on every button is gone.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 13px 22px;
  font-family: var(--font-ui); font-weight: 500; font-size: .8125rem;
  line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--r-1);
  background: transparent; color: var(--ink);
  cursor: pointer; text-align: center;
  transition: background-color var(--d-2) var(--ease-out),
              color var(--d-2) var(--ease-out),
              border-color var(--d-2) var(--ease-out);
}
.btn--lg { min-height: 52px; padding: 17px 28px; font-size: .84375rem; }
.btn--block { width: 100%; }

/* --gold is the legacy class name for the primary action. Kept because the
   page generator writes it; re-skinned to the flat accessible fill. */
.btn--gold, .btn--primary { background: var(--action); color: var(--on-dark); border-color: var(--action); }
.btn--gold:hover, .btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--action); color: var(--action-ink); }

.btn--outline-light { border-color: var(--edge-dark); color: var(--on-dark); background: transparent; }
.btn--outline-light:hover { background: rgba(252, 245, 236, .10); border-color: var(--on-dark); }

.btn--phone { border-color: var(--line-strong); color: var(--ink); padding-inline: 16px; }
.btn--phone:hover { border-color: var(--action); color: var(--action-ink); }
.btn[disabled] { opacity: .62; cursor: default; }

.ask { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   8. TOPBAR
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink-band); color: var(--on-dark-2);
  font-size: .71875rem; letter-spacing: .04em;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 18px; padding-block: var(--s-2);
}
.topbar__rera { color: var(--gold); font-weight: 500; letter-spacing: .06em; }
.topbar__contact { display: flex; align-items: center; gap: var(--s-2); }
.topbar a { color: var(--on-dark); }
.topbar a:hover { color: var(--gold); }
.topbar__sep { color: var(--on-dark-2); opacity: .5; }
@media (max-width: 620px) {
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__contact > span:last-child, .topbar__sep { display: none; }
}

/* --------------------------------------------------------------------------
   9. HEADER, NAV, DRAWER
   The header carries the real lockup. Fixed height at every breakpoint: it
   does not shrink on scroll, because a moving header is a template tell.
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(252, 245, 236, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.header.scrolled { background: var(--ground); border-bottom-color: var(--line); box-shadow: var(--sh-1); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 68px; }
@media (min-width: 900px) { .header__inner { height: 76px; } }

.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 44px; width: auto; }
@media (min-width: 900px) { .brand__logo { height: 48px; } }

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__link {
  position: relative;
  font-weight: 500; font-size: .8125rem; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; color: var(--body);
  padding-block: var(--s-2);
  transition: color var(--d-2) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--gold-deep);
  transition: right var(--d-2) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"], .nav__link.active { color: var(--action-ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__link.active::after { right: 0; }
.nav__link--mobile-cta { display: none; }
.nav__close { display: none; }
.nav-backdrop { display: none; }

.header__actions { display: flex; align-items: center; gap: var(--s-2); }
.nav-toggle {
  display: none; min-width: 44px; min-height: 44px;
  place-content: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform var(--d-2) var(--ease-out), opacity var(--d-1); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* backdrop-filter creates a containing block, which breaks the fixed drawer */
  .header, .header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ground); }
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86%, 340px); z-index: var(--z-drawer);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 76px var(--s-5) var(--s-6);
    background: var(--ground); box-shadow: var(--sh-2);
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--d-3) var(--ease-in-out), visibility var(--d-3);
    overflow-y: auto;
  }
  .nav.open { transform: none; visibility: visible; }
  .nav__link { font-size: .9375rem; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
  .nav__link::after { display: none; }
  .nav__link--mobile-cta { display: block; }
  .nav__close {
    display: grid; place-content: center;
    position: absolute; top: 14px; right: 14px;
    min-width: 44px; min-height: 44px;
    font-size: 1.6rem; line-height: 1; color: var(--ink);
    background: transparent; border: 0; cursor: pointer;
  }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: var(--z-drawer-backdrop);
    background: rgba(26, 23, 20, .55);
    opacity: 0; visibility: hidden; transition: opacity var(--d-3) var(--ease-in-out), visibility var(--d-3);
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
  .btn--phone span { display: none; }
}
@media (max-width: 420px) { .header__actions .btn--gold { display: none; } }

/* --------------------------------------------------------------------------
   10. THE HERO, pattern name: THE MARQUEE
   No text, no chip, no badge and no gradient ever sits on top of the plate.
   The overlay question therefore never arises: it is answered by removal.
   -------------------------------------------------------------------------- */
.hero { background: var(--ground); padding-block: clamp(28px, 5vw, 88px) clamp(40px, 6vw, 88px); }
.hero__grid { display: grid; gap: clamp(28px, 4vw, 40px); }

.hero__eyebrow {
  display: block; margin-bottom: var(--s-4);
  font-weight: 500; font-size: .71875rem; line-height: 1.2;
  letter-spacing: .2em; text-transform: uppercase; color: var(--action-ink);
}
.hero__eyebrow::before {
  content: ""; display: block; width: 26px; height: 6px; margin-bottom: 12px;
  background: var(--gold-deep); border-radius: 26px 26px 0 0;
}
.hero__title { color: var(--ink); }
.hero__title-2 {
  display: block; margin-top: var(--s-4);
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(.8125rem, .77rem + .19vw, 1rem);
  line-height: 1.5; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.hero__lead { margin-top: var(--s-5); max-width: 38ch; font-size: clamp(1.0625rem, .98rem + .38vw, 1.25rem); line-height: 1.62; color: var(--body); }

.hero__price {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8);
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.hero__price-k {
  display: block; margin-bottom: var(--s-2);
  font-weight: 500; font-size: .71875rem; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.hero__price-v {
  display: block;
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(1.625rem, 1.42rem + .9vw, 2.125rem);
  line-height: 1; letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero__price-note {
  flex-basis: 100%; margin-top: calc(var(--s-2) * -1);
  font-size: clamp(.84375rem, .83rem + .06vw, .875rem); line-height: 1.55; color: var(--muted);
}
.hero__cta { display: grid; gap: var(--s-3); margin-top: var(--s-6); }

.hero__media { position: relative; z-index: var(--z-plate); }
.hero__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 1000 / 1388; max-height: 58svh;
  background: var(--tint);
  border-radius: 50% 50% var(--r-2) var(--r-2) / 26% 26% var(--r-2) var(--r-2);
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;   /* keeps the crown of the tower */
  background-size: cover; background-position: 50% 32%;
  animation: heroDrift 24s linear infinite alternate;
  will-change: transform;
}
/* Frame 1 is the permanent base, so there is never a moment with no image on
   the plate, and it is still correct if the second frame never paints. Frame 2
   crossfades on top of it: 14s dwell, 1.12s fade, opacity only, linear because
   an eased opacity on a long dwell visibly pumps. */
.hero__slide--first { opacity: 1; }
.hero__slide:nth-child(2) {
  opacity: 0;
  animation: heroDrift 24s linear infinite alternate, heroCross 28s linear infinite;
  will-change: opacity, transform;
}
@keyframes heroCross {
  0%, 46%  { opacity: 0; }
  50%, 96% { opacity: 1; }
  100%     { opacity: 0; }
}
/* 4.5 per cent, not the network's 12: a hard-edged architectural render shears
   visibly at high scale. */
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.045); } }

/* The stat strip. A hairline grid, built by a 1px gap over a --line ground so
   there is no doubled 2px seam. Not interactive, so it has no hover state. */
.ledger {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
}
.ledger > * { background: var(--ground); padding: 16px 14px; }
.ledger strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 1.2rem + .72vw, 1.875rem);
  line-height: 1.05; letter-spacing: -.01em; color: var(--ink);
}
.ledger span {
  display: block; margin-top: var(--s-2);
  font-weight: 500; font-size: .71875rem; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.section--tint .ledger > * { background: var(--tint); }

@media (min-width: 720px) { .ledger { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    grid-template-areas: "copy media" "ledger media";
    align-items: center;
    column-gap: clamp(32px, 4vw, 64px);
  }
  .hero__plate { grid-area: copy; }
  .hero__media { grid-area: media; }
  .hero__grid .ledger { grid-area: ledger; align-self: end; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  /* Bleeds to the right viewport edge, so the plate reads as a marquee panel
     rather than a boxed card. It carries no text, so nothing is cropped. */
  .hero__media { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--maxw)) / 2)); }
  .hero__frame {
    aspect-ratio: auto; height: min(76svh, 720px); max-height: none;
    border-radius: 46% 0 0 var(--r-2) / 30% 0 0 var(--r-2);
  }
}

/* --------------------------------------------------------------------------
   11. ABOUT / INTRO
   -------------------------------------------------------------------------- */
.about__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.about__media { position: relative; }
.about__media .plate { aspect-ratio: 1000 / 1388; max-height: 62svh; }
.about__list { list-style: none; margin: var(--s-5) 0; }
.about__list li { position: relative; padding-left: 18px; margin-bottom: var(--s-3); color: var(--ink); }
.about__list li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 8px; height: 4px; background: var(--gold-deep); border-radius: 8px 8px 0 0;
}
.about__text p + p { margin-top: var(--s-4); }

.devcredit {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.devcredit img { height: 28px; width: auto; flex: none; }
.devcredit p { font-size: .875rem; line-height: 1.55; color: var(--dev-blue-deep); }

@media (min-width: 900px) { .about__grid { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   12. PRICE TABLE
   -------------------------------------------------------------------------- */
.pricetable { width: 100%; border-collapse: collapse; }
.pricetable th, .pricetable td { text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.pricetable th {
  font-family: var(--font-ui); font-weight: 500; font-size: .71875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  border-bottom-color: var(--line-strong);
}
.pricetable thead th:last-child, .pricetable td:last-child { text-align: right; }
.pricetable tbody th { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 500; }
.pricetable td:last-child {
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(1rem, .96rem + .18vw, 1.125rem);
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pricetable tr:last-child th, .pricetable tr:last-child td { border-bottom: 0; }

/* Under 560px the table restacks into row blocks instead of scrolling sideways. */
@media (max-width: 560px) {
  .pricetable, .pricetable tbody, .pricetable tr, .pricetable th, .pricetable td { display: block; width: 100%; }
  .pricetable thead { position: absolute; left: -9999px; }
  .pricetable tr { border: 1px solid var(--line); padding: 16px; margin-bottom: var(--s-3); background: var(--surface); }
  .pricetable th, .pricetable td { border-bottom: 0; padding: 0; text-align: left; }
  .pricetable thead th:last-child, .pricetable td:last-child { text-align: left; }
  .pricetable td { margin-top: var(--s-3); }
  .pricetable td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-ui); font-weight: 500; font-size: .71875rem; line-height: 1.2;
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
}

/* The emphasis rule sits on the LEFT. The network's border-top: 2px panel is
   its single most recognisable shared tell. */
.note--rule, .plan-request, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-deep);
  padding: 20px;
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
.note--rule p, .panel p { font-size: clamp(.9375rem, .92rem + .06vw, .96875rem); }
.panel h3, .plan-request h3 { margin-bottom: var(--s-2); }
.panel--tint { background: var(--tint); }
.plan-request .btn { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   13. CONFIG CARDS
   -------------------------------------------------------------------------- */
.configs__grid { display: grid; gap: clamp(12px, 2.2vw, 20px); grid-template-columns: 1fr; }
.config-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 24px 22px;
}
.config-card__k { font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + .72vw, 1.75rem); line-height: 1.1; color: var(--ink); }
.config-card__area {
  margin-top: var(--s-3);
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.config-card__meta { margin-top: var(--s-1); font-size: .875rem; color: var(--muted); }
.config-card hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
.config-card p { font-size: .96875rem; }
.config-card .btn { margin-top: var(--s-5); }
@media (min-width: 481px) { .configs__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); } }

/* --------------------------------------------------------------------------
   14. AMENITIES, the realm ledger
   Not a card grid and not an icon wall: the icon libraries available here are
   the same stock the competitor already runs.
   -------------------------------------------------------------------------- */
.realm { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.realm:first-of-type { border-top: 0; padding-top: 0; }
.realm__name { font-family: var(--font-display); font-size: clamp(1.1875rem, 1.1rem + .42vw, 1.5rem); line-height: 1.25; color: var(--ink); }
.realm__size { display: block; margin-top: var(--s-1); font-weight: 500; font-size: .71875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.realm__lead { margin-top: var(--s-2); max-width: 62ch; color: var(--muted); }
.realm__list { display: grid; gap: var(--s-2) 26px; list-style: none; grid-template-columns: 1fr; }
.realm__list li { position: relative; padding-left: 18px; font-size: clamp(1rem, .98rem + .09vw, 1.0625rem); line-height: 1.55; color: var(--body); }
.realm__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 3.5px; background: var(--gold-deep); border-radius: 7px 7px 0 0;
}
@media (min-width: 481px) { .realm__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } }
@media (min-width: 720px) { .realm { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6); } }

/* --------------------------------------------------------------------------
   15. THE SCREENING ROOM
   The only dark band on the hub besides the contact section.
   Nothing is drawn on top of the film. Ever. Every control and every word is
   outside the frame, which is why the copy passes AA on its own.
   -------------------------------------------------------------------------- */
.screening { background: var(--ink-band); color: var(--on-dark-2); }
.screening h2, .screening h3 { color: var(--on-dark); }
.screening__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.screening__stage-wrap { width: min(100%, 340px); margin-inline: auto; }
.screening__stage {
  position: relative;
  aspect-ratio: 464 / 832;
  background: #000;
  border: 1px solid var(--edge-dark);      /* 3.86:1, a compliant non-text edge */
  border-radius: var(--r-0);               /* rounding a frame crops footage */
}
.screening__stage video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Loading, then playback progress. Both sit BELOW the frame, never over it. */
.screening__meter { position: relative; height: 2px; margin-top: 10px; background: var(--hair-dark); overflow: hidden; }
.screening__meter i { display: block; height: 100%; width: 0; background: var(--gold); transition: width 160ms linear; }
.screening__meter--buffering i { width: 90%; transition: width 1200ms var(--ease-out); }
.screening__time {
  display: flex; justify-content: space-between; gap: var(--s-3); margin-top: 6px;
  font-size: .78125rem; letter-spacing: .06em; color: var(--on-dark-2);
  font-variant-numeric: tabular-nums;
}
.screening__copy > * + * { margin-top: var(--s-4); }
.screening__note { font-size: clamp(.84375rem, .83rem + .06vw, .875rem); color: var(--on-dark-2); }
.screening__cta { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.screening__look { list-style: none; margin-top: var(--s-6); }
.screening__look li {
  padding: 14px 0;
  border-top: 1px solid var(--hair-dark);
  font-size: clamp(.9375rem, .92rem + .06vw, .96875rem); line-height: 1.55;
  color: var(--on-dark-2);
}
.screening__look b { color: var(--on-dark); font-weight: 500; }
@media (min-width: 900px) {
  .screening { padding-block: 0; }
  .screening__grid { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; min-height: min(92svh, 760px); padding-block: var(--block); }
  .screening__stage-wrap { margin-inline: 0; }
  .screening__cta { display: flex; flex-wrap: wrap; }
}

/* The same stage, reused once at the foot of /gallery/. Same contract. */
.reelbox { display: grid; gap: var(--s-6); align-items: start; }
.reelbox__stage {
  width: min(100%, 340px); aspect-ratio: 464 / 832;
  background: #000; border: 1px solid var(--line-strong); border-radius: var(--r-0);
}
.reelbox__stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (min-width: 900px) { .reelbox { grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-7); } }

/* --------------------------------------------------------------------------
   16. FACTS, NEARBY, REGISTRATION
   -------------------------------------------------------------------------- */
.facts { border-top: 1px solid var(--line); }
.facts__row {
  display: grid; grid-template-columns: 1fr; gap: var(--s-1);
  padding-block: 14px; border-bottom: 1px solid var(--line);
}
.facts__row dt { font-weight: 500; font-size: .71875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts__row dd { font-size: clamp(1rem, .98rem + .09vw, 1.0625rem); line-height: 1.6; color: var(--ink); }
.facts__note { margin-top: var(--s-5); font-size: clamp(.84375rem, .83rem + .06vw, .875rem); color: var(--muted); }
.facts__note a { color: var(--action-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 561px) { .facts__row { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); align-items: baseline; } }

.near__group { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.near__group:last-child { border-bottom: 0; }
.near__label { margin-bottom: var(--s-3); font-weight: 500; font-size: .71875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--action-ink); }
.near__items { display: grid; gap: var(--s-2) 24px; list-style: none; grid-template-columns: 1fr; }
.near__items li { position: relative; padding-left: 18px; font-size: clamp(1rem, .98rem + .09vw, 1.0625rem); line-height: 1.6; }
.near__items li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 7px; height: 3.5px; background: var(--gold-deep); border-radius: 7px 7px 0 0;
}
@media (min-width: 481px) { .near__items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } }

.rera { background: var(--tint); }
.rera__grid { display: grid; gap: var(--s-6); align-items: start; }
.rera__no {
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + .66vw, 1.625rem);
  letter-spacing: .04em; color: var(--ink); word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.rera .facts__row { border-bottom-color: var(--line); }
.rera a { color: var(--action-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 820px) { .rera__grid { grid-template-columns: 1.5fr .9fr; gap: var(--s-7); } }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq__list { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  line-height: 1.35; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px;
  border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep);
  transform: rotate(45deg); transition: transform var(--d-2) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item__body { padding-bottom: 20px; }
.faq-item__body p { color: var(--body); }
.faq-item__body p + p { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   18. CONTACT AND FORM
   Real visible labels, above each field. The placeholder-only pattern the
   network ships is an accessibility failure and does not survive here.
   -------------------------------------------------------------------------- */
.contact { background: var(--ink-band); color: var(--on-dark-2); }
.contact__grid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
.contact__lead { color: var(--on-dark-2); margin-top: var(--s-4); }
.contact__details { list-style: none; margin-top: var(--s-6); }
.contact__details li { display: flex; gap: var(--s-3); padding-block: 14px; border-bottom: 1px solid var(--hair-dark); }
.contact__details li:last-child { border-bottom: 0; }
.contact__icon { flex: none; font-size: 1.05rem; line-height: 1.5; }
.contact__details strong { display: block; margin-bottom: 2px; font-weight: 500; font-size: .71875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.contact__details div { color: var(--on-dark); font-size: .96875rem; line-height: 1.6; }
.contact__details a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }

.contact__form { background: var(--surface); border-radius: var(--r-2); padding: clamp(22px, 3.4vw, 32px); }
.contact__form h3, .modal__head h3 { color: var(--ink); }
.contact__form h3 { margin-bottom: var(--s-5); }

.field { margin-bottom: var(--s-4); }
.field > label, .modal__form label {
  display: block; margin-bottom: 6px;
  font-weight: 500; font-size: .71875rem; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);                     /* 6.75:1 on surface */
}
.field input, .field select, .field textarea,
.modal__form input, .modal__form select, .modal__form textarea {
  width: 100%; min-height: 48px; padding: 13px 14px;
  font-size: 1rem;                         /* 16px stops iOS Safari zooming */
  background: #FFFFFF; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  transition: border-color var(--d-2) var(--ease-out);
}
.field textarea, .modal__form textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .modal__form input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .78; }
.field :is(input, select, textarea):focus-visible,
.modal__form :is(input, select, textarea):focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-color: var(--action); }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--err); }
.field__err { display: block; margin-top: 6px; font-size: .84375rem; color: var(--err); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: var(--s-4); font-weight: 500; color: var(--ok); }
.form-note--err { color: var(--err); }
.form-fineprint { margin-top: var(--s-3); font-size: .8125rem; line-height: 1.55; color: var(--muted); }
.form-done { padding: var(--s-5); background: var(--surface); border-left: 3px solid var(--ok); }
.form-done h3 { color: var(--ok); }

@media (min-width: 900px) { .contact__grid { grid-template-columns: 1.05fr .95fr; } }

/* --------------------------------------------------------------------------
   19. GALLERY
   Seven stills at seven ratios, so tiles keep their true shape. `height:auto`
   plus `aspect-ratio` on the IMG, never `height:100%` inside an auto grid row:
   that exact combination is what collapses these tiles to 0px on a phone.
   -------------------------------------------------------------------------- */
.g-grid { display: grid; gap: clamp(12px, 2.2vw, 20px); grid-template-columns: 1fr; }
.g-item { display: block; overflow: hidden; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-2); }
.g-item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--d-4) var(--ease-out); }
.g-item:hover img { transform: scale(1.03); }
.g-item--sq img { aspect-ratio: 1 / 1; }
.g-item--tall img { aspect-ratio: 3 / 4; }
.g-item--wide img { aspect-ratio: 16 / 9; }
.g-item--band img { aspect-ratio: 2 / 1; }
.g-item.plate--arch { border-radius: 50% 50% var(--r-2) var(--r-2) / 26% 26% var(--r-2) var(--r-2); }
.g-cap {
  display: block; padding: 10px 12px;
  border-top: 1px solid var(--line); background: var(--surface);
  font-size: .84375rem; line-height: 1.5; color: var(--muted);
}
@media (min-width: 481px) { .g-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } }
@media (max-width: 480px) {
  /* one column, and the only tiles allowed to stay tall are the elevations:
     squashing an elevation is worse than a taller tile */
  .g-item img, .g-item--sq img, .g-item--wide img, .g-item--band img { aspect-ratio: 4 / 3; }
  .g-item--tall img { aspect-ratio: 3 / 4; }
}

/* --------------------------------------------------------------------------
   20. SPOKE MASTHEAD, EXPLORE, SIBLINGS
   The shared .page-hero painted a render behind the H1 and covered it with a
   90 per cent gradient, which is a wash doing the work of a solid colour.
   The masthead is a plain band; the render goes below it, at full strength.
   -------------------------------------------------------------------------- */
.masthead { background: var(--ink-band); color: var(--on-dark-2); padding-block: clamp(32px, 5vw, 64px); }
.masthead h1 { color: var(--on-dark); }
.masthead p { margin-top: var(--s-4); max-width: 62ch; color: var(--on-dark-2); }
.crumbs { margin-bottom: var(--s-4); font-size: .8125rem; letter-spacing: .04em; color: var(--on-dark-2); }
.crumbs a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { padding-inline: 6px; opacity: .55; }

.explore-grid { display: grid; gap: clamp(12px, 2.2vw, 16px); grid-template-columns: 1fr; }
.explore-card {
  display: block; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  transition: border-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.explore-card:hover { border-color: var(--action); transform: translateY(-2px); }
.explore-card h4 { margin-bottom: 2px; }
.explore-card span { font-size: .84375rem; color: var(--muted); }

.siblings { display: grid; gap: clamp(12px, 2.2vw, 16px); grid-template-columns: 1fr; }
.sibling {
  display: block; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  transition: border-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.sibling:hover { border-color: var(--action); transform: translateY(-2px); }
.sibling strong { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 1.0625rem; margin-bottom: 2px; }
.sibling span { font-size: .84375rem; color: var(--muted); }
@media (min-width: 481px) {
  .explore-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
  .siblings { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--ink-band); color: var(--on-dark-2); padding-top: clamp(48px, 7vw, 80px); }
.footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; padding-bottom: var(--s-7); }
.footer__logo { height: 40px; width: auto; margin-bottom: var(--s-4); }
.footer__brand p { font-size: .90625rem; line-height: 1.7; color: var(--on-dark-2); }
.footer h4 { margin-bottom: var(--s-4); font-weight: 500; font-size: .71875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.footer a { display: block; padding-block: 5px; font-size: .90625rem; color: var(--on-dark-2); transition: color var(--d-2) var(--ease-out); }
.footer a:hover { color: var(--on-dark); }     /* no padding shift: it is a template tell */
.footer__rera { display: inline-block; margin-top: var(--s-4); font-size: .8125rem; letter-spacing: .05em; color: var(--gold); }
.footer__addr { margin-top: var(--s-3); font-size: .90625rem; line-height: 1.6; }
.footer__socials { margin-top: var(--s-5); }
.footer__socials-label { display: block; margin-bottom: var(--s-2); font-weight: 500; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-2); }
.footer__social { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--on-dark); }
.footer__social:hover { color: var(--gold); }
.footer__bar { margin-top: var(--s-6); border-top: 1px solid var(--hair-dark); font-size: .8125rem; }
.footer__bar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-block: var(--s-5); }
.footer__bar p { font-size: .8125rem; }
.footer__legal a { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.footer__disclaimer { display: block; padding-block: var(--s-4) var(--s-7); max-width: 96ch; font-size: .78125rem; line-height: 1.62; color: var(--on-dark-2); }
@media (min-width: 600px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); } }

/* --------------------------------------------------------------------------
   22. FLOAT, STICKY BAR, MODAL, LIGHTBOX
   -------------------------------------------------------------------------- */
.float {
  position: fixed; right: 18px; bottom: 22px; z-index: var(--z-float);
  display: none; place-content: center;
  width: 56px; height: 56px; border-radius: var(--r-pill);
  color: var(--on-dark);
  transition: transform var(--d-2) var(--ease-out);
}
/* the infinite pulse keyframe is deleted: it is the loudest shared tell in
   this network and it holds a compositor layer for the life of the page */
.float--wa { background: var(--wa); }
.float:hover { transform: translateY(-2px); }
@media (min-width: 900px) { .float { display: grid; } }

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobile-bar);
  display: none; grid-template-columns: repeat(3, 1fr);
  background: var(--ink-band); border-top: 1px solid var(--hair-dark);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform var(--d-3) var(--ease-in-out);
  box-shadow: var(--sh-1);
}
.mobile-cta.show { transform: none; }
.mcta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 8px 4px; border: 0; cursor: pointer;
  font-weight: 500; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink-band); color: var(--on-dark);
}
.mcta--wa { background: var(--wa); color: var(--on-dark); }
.mcta--enquire { background: var(--action); color: var(--on-dark); }
.mcta:active { filter: brightness(.94); }
@media (max-width: 899px) { .mobile-cta { display: grid; } }

.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; z-index: var(--z-modal-backdrop); background: rgba(26, 23, 20, .62); }
.modal__dialog {
  position: relative; z-index: var(--z-modal);
  width: min(100%, 440px); max-height: 90svh; overflow-y: auto;
  padding: clamp(24px, 4vw, 32px);
  background: var(--surface); border-radius: var(--r-2); box-shadow: var(--sh-2);
}
.modal__close {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-content: center; min-width: 44px; min-height: 44px;
  font-size: 1.5rem; line-height: 1; color: var(--muted);
  background: transparent; border: 0; cursor: pointer;
}
.modal__close:hover { color: var(--ink); }
.modal__head { margin-bottom: var(--s-5); }
.modal__head p { margin-top: var(--s-2); font-size: .9375rem; color: var(--muted); }
.modal__form { display: grid; gap: var(--s-4); }

.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(26, 23, 20, .94); }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86svh; width: auto; height: auto; border-radius: var(--r-2); box-shadow: var(--sh-3); }
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-content: center;
  min-width: 44px; min-height: 44px;
  font-size: 1.75rem; line-height: 1; color: var(--on-dark);
  background: rgba(252, 245, 236, .12); border: 1px solid var(--edge-dark); border-radius: var(--r-1);
  cursor: pointer;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(252, 245, 236, .24); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   23. MOTION
   Transition only opacity, transform and colour. Never `all`, never height.
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.configs__grid .reveal:nth-child(2), .explore-grid .reveal:nth-child(2) { transition-delay: 60ms; }
.configs__grid .reveal:nth-child(3), .explore-grid .reveal:nth-child(3) { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__slide { animation: none; }
  .hero__slide:nth-child(2) { opacity: 0; }
  .hero__slide--first { opacity: 1; }
  .screening__meter { display: none; }
}

/* --------------------------------------------------------------------------
   24. SMALL-SCREEN GUARANTEES
   360px is the design canvas, so everything above is written mobile-first and
   these are the last-mile guarantees, not the layout.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .about__grid, .contact__grid, .rera__grid, .screening__grid,
  .hero__grid, .reelbox, .configs__grid, .realm, .realm__list,
  .near__items, .g-grid, .explore-grid, .siblings, .footer__grid {
    grid-template-columns: 1fr;
  }
  .ledger { grid-template-columns: repeat(2, 1fr); }  /* an intentional stat pair */
}
@media (max-width: 380px) {
  .btn { padding-inline: 16px; letter-spacing: .08em; }
  .btn--lg { padding: 16px 18px; }
  .hero__price { gap: var(--s-5) var(--s-6); }
  .screening__stage-wrap { width: 100%; }
}