/* ============================================================================
   VISHNU VERTEX, vishnuvertexdombivli.com
   Design system "Lantern". See work/design-direction.md for the reasoning.
   Shares its section architecture with the rest of the network; the visible
   layer, tokens, type, ornament and plate face are this project's own.

   Rules this file is held to:
     _BUILD-STANDARDS.md  s1 mobile-first, 360px canvas
     _BUILD-STANDARDS.md  s9 images contained, never stretched
     pro-web-dev.md       s5.1 the locked plate, s5.2 rhythm

   Contents
     1  Type files
     2  Tokens
     3  The brass rule
     4  Reset and base
     5  Type scale
     6  Layout primitives
     7  Buttons
     8  Topbar
     9  Header, nav, drawer
     10 Hero
     11 Section heads, the three variants
     12 Ledger, the glance strip
     13 Media, figures and the containment rules
     14 Locked plates
     15 Config table
     16 Commercial band
     17 Podium and amenities
     18 Reels rail
     19 Address and distances
     20 Register
     21 FAQ
     22 Enquire and forms
     23 Footer
     24 Float, mobile bar, modal, lightbox
     25 Spoke masthead and prose
     26 Motion
     27 Small-screen guarantees
   ========================================================================= */

/* -- 1. Type files ------------------------------------------------------- */
/* Marcellus, Roman inscriptional serif. ONE weight, so hierarchy comes from
   size, tracking and colour, never from a bolder cut. */
@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;
}
/* Archivo, variable weight 100 to 900. Text. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/archivo-latin-var.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;
}
/* Metric-matched fallbacks, so the webfont swap cannot reflow the page. */
@font-face {
  font-family: 'Marcellus Fallback';
  src: local('Palatino'), local('Palatino Linotype'), local('Georgia');
  size-adjust: 101%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 98%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%;
}

/* -- 2. Tokens ----------------------------------------------------------- */
:root {
  /* Ground and ink. Ivory field, indigo shadow, brass line. Ratios per pair. */
  --ground:        #FBF8F1;   /* DERIVED ivory, the lit-render field               */
  --surface:       #FFFFFF;
  --sand:          #F2ECDF;   /* the warm band                                     */
  --sand-deep:     #E8DFCB;   /* the plate face                                    */
  --ink:           #171A33;   /* headings.  on --ground 15.42:1                    */
  --body:          #3A3E5C;   /* body text. on --ground  8.94:1                    */
  --muted:         #565A72;   /* captions. 6.38:1 on --ground, 5.75:1 on --sand, 5.11:1 on --sand-deep, the worst case */
  --on-dark:       #F6F3EA;   /* text on --indigo        14.9:1                    */
  --on-dark-2:     #C3C4D6;   /* secondary on --indigo    7.9:1                    */
  --forest:        #12142B;   /* the dark band ground, indigo                      */
  --forest-2:      #1D2145;   /* the dark band, one step up                        */

  /* Brand. Read off the renders: cream masonry, brass light, night green. */
  --brass:         #B98A3C;
  --brass-lit:     #E0B463;
  --nightgreen:    #24402E;

  /* Action and state. */
  --action:        #262B58;   /* button fill. ivory label at 11.6:1                */
  --action-hover:  #171A3B;
  --action-ink:    #FBF8F1;
  --link:          #3C4380;   /* on --ground 7.31:1                                */
  --link-dark:     #E0B463;   /* on --indigo 8.44:1                                */
  --focus:         #4B53A0;
  --focus-dark:    #E9C888;
  --err:           #9C2B2B;   /* on --ground 6.71:1                                */
  --ok:            #1E6440;

  /* Structure */
  --line:          #E2DBCC;
  --line-strong:   #C8BFA9;
  --line-dark:     rgba(246,243,234,.16);
  --line-dark-strong: rgba(246,243,234,.34);

  /* Type */
  --font-display: "Marcellus", "Marcellus Fallback", Palatino, Georgia, "Times New Roman", serif;
  --font-text:    "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-label: clamp(.70rem, .66rem + .18vw, .78rem);
  --fs-cap:   clamp(.82rem, .78rem + .20vw, .90rem);
  --fs-body:  clamp(.98rem, .94rem + .26vw, 1.06rem);
  --fs-h4:    clamp(1.06rem, 1.00rem + .38vw, 1.24rem);
  --fs-h3:    clamp(1.22rem, 1.10rem + .70vw, 1.60rem);
  --fs-h2:    clamp(1.74rem, 1.38rem + 1.78vw, 2.90rem);
  --fs-h1:    clamp(2.40rem, 1.72rem + 3.40vw, 4.50rem);

  /* 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: 18px;
  --maxw: 1140px;
  --block: clamp(56px, 4.4vw + 34px, 96px);
  --h-header: 62px;

  /* Radius. Zero is the rule. */
  --r-0: 0; --r-1: 3px; --r-2: 6px; --r-pill: 999px;

  /* Shadow. Three tokens, five elements sitewide. */
  --sh-1: 0 1px 2px rgba(23,26,51,.07);
  --sh-2: 0 6px 22px rgba(23,26,51,.11);
  --sh-3: 0 18px 50px rgba(23,26,51,.24);

  /* Motion */
  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 520ms; --d-5: 900ms;
  --ease-out: cubic-bezier(.22,.71,.30,1);
  --ease-in-out: cubic-bezier(.60,.02,.30,1);

  /* Z. No literal z-index appears anywhere else in this file. */
  --z-base: 1; --z-sticky: 40; --z-header: 60; --z-drawer: 80;
  --z-float: 90; --z-modal: 200; --z-lightbox: 300;
}

/* -- 3. The brass rule --------------------------------------------------
   This site's one ornament, taken from the cornice detail in the renders:
   two brass hairlines with a small lozenge centred between them. It replaces
   the eyebrow divider used elsewhere in the network. Pure CSS, no request. */
.brassrule { position: relative; height: 13px; max-width: 100%; }
.brassrule::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 3px;
  border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); opacity: .78;
}
.brassrule::after {
  content: ""; position: absolute; left: 50%; top: 3px;
  width: 7px; height: 7px; margin-left: -3.5px;
  background: var(--brass); transform: rotate(45deg);
}
.brassrule--dark::before { border-color: var(--brass-lit); opacity: .72; }
.brassrule--dark::after  { background: var(--brass-lit); }

/* the short mark that sits under a section head */
.rule { display: block; width: 58px; height: 9px; margin-top: var(--s-4); position: relative; }
.rule::before { content: ""; position: absolute; inset: 4px 0 auto 0; height: 1px; background: var(--brass); }
.rule::after  { content: ""; position: absolute; left: 0; top: 1px; width: 7px; height: 7px;
                background: var(--brass); transform: rotate(45deg); }
.section--dark .rule::before, .section--dark .rule::after { background: var(--brass-lit); }

/* -- 4. Reset and base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }                 /* s9: paired with every aspect-ratio box */
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--action-hover); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.on-dark :focus-visible, .footer :focus-visible, .reels :focus-visible { outline-color: var(--focus-dark); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-modal);
  background: var(--action); color: var(--action-ink); padding: var(--s-3) var(--s-5);
}
.skip:focus { left: 0; }

/* -- 5. Type scale ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  margin: 0; line-height: 1.14; letter-spacing: -.005em;
}
h1 { font-size: var(--fs-h1); line-height: 1.02; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.04rem, .98rem + .40vw, 1.20rem); color: var(--body); }
.eyebrow {
  display: inline-block; font-size: var(--fs-label); font-weight: 650;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.eyebrow--light { color: var(--on-dark-2); }
.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

/* -- 6. Layout primitives ------------------------------------------------ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--block); }
.section--tint { background: var(--sand); }
.section--dark { background: var(--forest); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark a { color: var(--link-dark); }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.stack > * + * { margin-top: var(--s-4); }

/* -- 7. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-3) var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-1);
  font-weight: 600; font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--primary:hover { background: var(--action-hover); color: var(--action-ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn--light { background: var(--ground); color: var(--ink); }
.btn--light:hover { background: var(--surface); color: var(--ink); }
.btn--onDark { background: transparent; color: var(--on-dark); border-color: var(--line-dark-strong); }
.btn--onDark:hover { background: rgba(244,247,243,.10); color: var(--on-dark); }
.btn--lg { min-height: 52px; padding: var(--s-4) var(--s-6); font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* -- 8. Topbar ----------------------------------------------------------- */
.topbar { background: var(--forest); color: var(--on-dark-2); font-size: var(--fs-label); }
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: center; justify-content: space-between; min-height: 34px; padding-block: 6px;
}
.topbar a { color: var(--on-dark-2); text-decoration: none; }
.topbar a:hover { color: var(--on-dark); text-decoration: underline; }
.topbar__rera { letter-spacing: .08em; }
.topbar__contact { display: flex; align-items: center; gap: var(--s-2); }
.topbar__sep { opacity: .5; }

/* -- 9. Header, nav, drawer ---------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--ground); border-bottom: 1px solid var(--line);
  transition: box-shadow var(--d-2) var(--ease-out);
}
.header.scrolled { box-shadow: var(--sh-1); }
.header__inner { display: flex; align-items: center; gap: var(--s-4); min-height: var(--h-header); }
.brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand__mark { width: 118px; height: auto; }
/* No logo artwork was supplied for this project, so the header carries a
   typographic lockup. Swap it for an <img> the moment the client sends one. */
.brand__type { display: flex; flex-direction: column; gap: 1px; }
.brand__name {
  font-family: var(--font-display); font-size: 1.16rem; line-height: 1;
  color: var(--ink); letter-spacing: .05em; text-transform: uppercase;
}
.brand__where {
  font-size: .58rem; letter-spacing: .30em; text-transform: uppercase; color: var(--muted);
}
@media (min-width: 1080px) { .brand__name { font-size: 1.34rem; } .brand__where { font-size: .62rem; } }
.nav { display: none; }
.nav__link {
  color: var(--body); text-decoration: none; font-size: var(--fs-cap); font-weight: 560;
  padding: var(--s-2) 0; border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__link.is-active { color: var(--ink); border-bottom-color: var(--brass); }
.header__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; background: transparent; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform var(--d-2) var(--ease-out), opacity var(--d-1); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop {
  position: fixed; inset: 0; background: rgba(12,31,23,.55);
  opacity: 0; pointer-events: none; transition: opacity var(--d-2); z-index: var(--z-drawer);
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }
.nav__close { display: block; align-self: flex-end; width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; background: transparent; border: 0; color: var(--ink); cursor: pointer; }
@media (max-width: 1079px) {
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(310px, 84vw);
    display: flex; flex-direction: column; gap: var(--s-2);
    background: var(--ground); border-left: 1px solid var(--line);
    padding: var(--s-4) var(--s-5) var(--s-7);
    transform: translateX(100%); transition: transform var(--d-3) var(--ease-out);
    z-index: var(--z-drawer); overflow-y: auto;
  }
  .nav.open { transform: none; }
  .nav__link { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .nav__link--cta { margin-top: var(--s-4); border: 0; }
  /* The header CTA cluster is the one thing that used to force the document
     wider than 360px: brand 118 + gutter 36 + Call + "Cost sheet" + burger = 383.
     Below the drawer breakpoint the header is brand, a tap-to-call square and
     the burger. The full CTA lives in the drawer and in the sticky bottom bar,
     so nothing is lost and the page finally fits. */
  .header__actions .btn--primary { display: none; }
  .header__actions .btn--ghost {
    width: 44px; min-width: 44px; padding: 0; justify-content: center;
  }
  .header__actions .btn--ghost span { display: none; }

  /* Tap targets, s1. Buttons already clear 44px; these were the misses found in
     the 360px pass. The topbar's phone is dropped on mobile rather than padded
     to 44: it would double the height of the bar above the fold, and the same
     number is one tap away in the header and in the sticky bottom bar. What
     stays is the MahaRERA line, which Order 46C wants prominent anyway. */
  .topbar__contact { display: none; }
  .topbar a { display: inline-flex; align-items: center; min-height: 44px; }
  .brand { min-height: 44px; }
  .facts dd a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (min-width: 1080px) {
  .nav { display: flex; align-items: center; gap: var(--s-5); margin-left: var(--s-5); }
  .nav__close, .nav-toggle, .nav__link--cta { display: none; }
  .brand__mark { width: 140px; }
}

/* -- 10. Hero ------------------------------------------------------------ */
.hero { position: relative; isolation: isolate; background: var(--forest); }
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;                          /* s9: cover on a ratio-matched box, never fill */
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity var(--d-5) var(--ease-in-out);
}
.hero__slide.is-on, .hero__slide--first { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,31,23,.62) 0%, rgba(12,31,23,.44) 42%, rgba(12,31,23,.86) 100%);
}
.hero__inner {
  position: relative;
  min-height: clamp(510px, 82vh, 760px);
  display: flex; align-items: center; justify-content: center;
  padding-block: var(--s-9) var(--s-8);
  text-align: center;
}
.hero__copy { max-width: 640px; color: var(--on-dark); margin-inline: auto; }
.hero__copy .hero__cta { justify-content: center; }
.hero__copy .hero__price { align-items: center; }
.hero__copy .brassrule { margin-inline: auto; }
@media (max-width: 620px) {
  .hero__inner { text-align: left; justify-content: flex-start; align-items: flex-end; }
  .hero__copy { margin-inline: 0; }
  .hero__copy .hero__cta { justify-content: flex-start; }
  .hero__copy .hero__price { align-items: flex-start; }
}
.hero__eyebrow { color: var(--on-dark-2); }
.hero__title { color: var(--on-dark); margin-top: var(--s-3); }
.hero__sub { display: block; margin-top: var(--s-3); font-size: clamp(1rem, .94rem + .5vw, 1.24rem); color: var(--on-dark-2); }
.hero .brassrule { margin-block: var(--s-5); max-width: 300px; }
.hero__price { display: flex; flex-direction: column; gap: 2px; }
.hero__price-k { font-size: var(--fs-cap); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.hero__price-v { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); color: var(--on-dark); }
.hero__price-note { font-size: var(--fs-label); color: var(--on-dark-2); max-width: 46ch; margin-top: var(--s-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* -- 11. Section heads, the three variants, pro-web-dev s5.2 -------------- */
.section__head { margin-bottom: var(--s-7); }
.section__title { margin-top: var(--s-3); }
.section__sub { margin-top: var(--s-4); color: var(--muted); max-width: 62ch; }

/* stack: the default, left aligned */
.section__head--stack { max-width: 66ch; }

/* split: title left, sub right, divided by a rule */
.section__head--split { display: grid; gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-5); }
.section--dark .section__head--split { border-top-color: var(--line-dark); }
@media (min-width: 760px) {
  .section__head--split { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--s-7); align-items: start; }
  .section__head--split .section__sub { margin-top: 0; }
}

/* index: a number and the title on one line, no sub */
.section__head--index { display: flex; align-items: baseline; gap: var(--s-4); border-bottom: 1px solid var(--line); padding-bottom: var(--s-4); }
.section--dark .section__head--index { border-bottom-color: var(--line-dark); }
.section__head--index .section__idx {
  font-family: var(--font-display); font-size: var(--fs-h4); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.section--dark .section__head--index .section__idx { color: var(--on-dark-2); }
.section__head--index .section__title { margin-top: 0; }

/* centred: once per page, the enquiry section only */
.section__head--centre { max-width: 60ch; margin-inline: auto; text-align: center; }
.section__head--centre .rule { margin-inline: auto; }

/* -- 12. Ledger, the glance strip ---------------------------------------- */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ledger li { display: flex; flex-direction: column; gap: 2px; padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.ledger dt, .ledger__k { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ledger__v { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); }
.ledger__n { font-size: var(--fs-cap); color: var(--muted); }
@media (min-width: 620px) { .ledger { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
@media (min-width: 1000px) { .ledger { grid-template-columns: repeat(4, 1fr); } }
.footnote { margin-top: var(--s-5); font-size: var(--fs-cap); color: var(--muted); }

/* -- 13. Media, figures, and the s9 containment rules ---------------------
   Every ratio box below sets its own aspect-ratio AND leaves the image at
   height:auto via the global rule, or sets height:100% with object-fit.
   The banned stretch value never appears in this file and never will. */
.figure { margin: 0; }
.figure__box {
  position: relative; overflow: hidden; background: var(--sand); border-radius: var(--r-1);
  max-width: 100%;                       /* s1: never wider than the viewport */
}
.figure__box img { width: 100%; height: 100%; object-fit: cover; }
.figure__box--wide  { aspect-ratio: 2 / 1; }
.figure__box--square{ aspect-ratio: 1 / 1; }
.figure__box--4x3   { aspect-ratio: 4 / 3; }
/* a plan or a map is never cropped: contain it on the sand stage */
.figure__box--plan  { aspect-ratio: 1 / 1; background: var(--sand); }
.figure__box--plan img { object-fit: contain; padding: var(--s-4); }
.figure__cap { margin-top: var(--s-3); font-size: var(--fs-cap); color: var(--muted); }
.figure--zoom { cursor: zoom-in; }

.tiles { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.tiles .figure__box { aspect-ratio: 2 / 1; }

/* -- 14. Locked plates, pro-web-dev s5.1 ---------------------------------
   The plan raster is not on this site. The face below is a motif, not a plan. */
.plates { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.plate {
  margin: 0; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden;
}
.plate__face {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%;
  background:
    repeating-linear-gradient(45deg,  rgba(23,26,51,.05) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(23,26,51,.05) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 50% 44%, rgba(185,138,60,.20) 0 22%, transparent 22.6%),
    var(--sand-deep);
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
}
.plate__lock { display: grid; place-items: center; gap: var(--s-2); color: var(--ink); }
.plate__lock svg { width: 26px; height: 26px; opacity: .55; }
.plate__lock span { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.plate__meta { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5) var(--s-5) 0; }
.plate__type { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); }
.plate__area { font-size: var(--fs-body); color: var(--body); font-weight: 600; }
.plate__rooms { font-size: var(--fs-cap); color: var(--muted); }
.plate__price { font-size: var(--fs-cap); color: var(--body); margin-top: var(--s-2); }
.plate .btn { margin: var(--s-5) var(--s-5) 0; width: calc(100% - var(--s-5) * 2); }
.plate__note { margin: var(--s-3) var(--s-5) var(--s-5); font-size: var(--fs-label); color: var(--muted); }

/* -- 15. Config table ---------------------------------------------------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--s-6); }
table.data { width: 100%; min-width: 460px; border-collapse: collapse; font-size: var(--fs-cap); }
table.data caption { text-align: left; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: var(--s-3); }
table.data th, table.data td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
table.data thead th { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
table.data tbody th { font-family: var(--font-display); font-size: var(--fs-body); color: var(--ink); font-weight: 600; }
table.data td.num { font-variant-numeric: tabular-nums; }
.section--dark table.data th, .section--dark table.data td { border-bottom-color: var(--line-dark); }
.section--dark table.data thead th, .section--dark table.data tbody th { color: var(--on-dark); }

/* -- 16. Commercial band -------------------------------------------------- */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-8); } .split--flip > :first-child { order: 2; } }
.keylist { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.keylist li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); font-size: var(--fs-cap); }
.keylist li::before { content: ""; width: 7px; height: 7px; margin-top: .55em; background: var(--brass); transform: rotate(45deg); }
.section--dark .keylist li::before { background: var(--brass-lit); }

/* -- 17. Podium and amenities -------------------------------------------- */
.amen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.amen li { position: relative; padding-left: var(--s-5); font-size: var(--fs-cap); }
.amen li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 1px; background: var(--line-strong); }
.section--dark .amen li::before { background: var(--line-dark-strong); }
.amen-group { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: var(--s-6); }
.amen-group h3 { font-size: var(--fs-h4); margin-bottom: var(--s-4); }

/* -- 18. Reels rail, forked from _batch7-research/REEL-SYSTEM-REFERENCE.md
   Card ceiling 240px: the narrower source is 480px wide and a card may never
   exceed half the video width. */
.reels { background: var(--forest-2); color: var(--on-dark); }
.reels__rail {
  display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); padding-bottom: var(--s-4); scrollbar-width: thin;
}
.reels__card { flex: 0 0 auto; width: 240px; max-width: 74vw; scroll-snap-align: start; cursor: pointer; }
.reels__frame {
  position: relative; aspect-ratio: 9 / 16; max-width: 100%;
  overflow: hidden; background: #000;
}
.reels__frame video { width: 100%; height: 100%; object-fit: cover; }
.reels__cap { margin-top: var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.reels__cap h3 { font-size: var(--fs-h4); color: var(--on-dark); }
.reels__dur, .reels__hint { font-size: var(--fs-label); color: var(--on-dark-2); }
.reels__hint { letter-spacing: .14em; text-transform: uppercase; }
.reels__card.is-on .reels__hint { color: var(--focus-dark); }

/* -- 19. Address and distances ------------------------------------------- */
.facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: 2px; padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
@media (min-width: 620px) { .facts > div { grid-template-columns: 190px 1fr; gap: var(--s-5); align-items: baseline; } }
.facts dt { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--body); }
.dist { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 0; }
.dist li { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); font-size: var(--fs-cap); }
.dist li span:last-child { color: var(--ink); font-weight: 620; white-space: nowrap; font-variant-numeric: tabular-nums; }
.distcols { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: var(--s-6); }
.distcols h3 { font-size: var(--fs-h4); }

/* -- 20. Register --------------------------------------------------------- */
.register { background: var(--forest); color: var(--on-dark); }
.register .facts { border-top-color: var(--line-dark); }
.register .facts > div { border-bottom-color: var(--line-dark); }
.register .facts dt { color: var(--on-dark-2); }
.register .facts dd { color: var(--on-dark); }
.verify {
  border: 1px solid var(--line-dark-strong); padding: var(--s-5); display: grid; gap: var(--s-4);
  grid-template-columns: 96px 1fr; align-items: start;
}
.verify img { width: 96px; height: auto; background: #fff; padding: 6px; }
.verify p { font-size: var(--fs-cap); color: var(--on-dark-2); }

/* -- 21. FAQ -------------------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding-block: var(--s-4);
  display: flex; gap: var(--s-4); align-items: baseline; justify-content: space-between;
  font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink); min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--muted); line-height: 1; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item > div { padding-bottom: var(--s-5); max-width: 74ch; }

/* -- 22. Enquire and forms ----------------------------------------------- */
.contact { background: var(--sand); }
.contact__grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: var(--s-8); } }
.contact__form { background: var(--surface); border: 1px solid var(--line); padding: var(--s-6); }
.contact__form h3 { font-size: var(--fs-h3); margin-bottom: var(--s-5); }
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field .req { color: var(--err); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: var(--ground); color: var(--ink); font: inherit; font-size: var(--fs-cap);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--focus); }
.field__err { display: block; font-size: var(--fs-label); color: var(--err); min-height: 1em; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--err); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note { margin-top: var(--s-4); font-size: var(--fs-cap); color: var(--ok); }
.form-note--err { color: var(--err); }
.form-fineprint { margin-top: var(--s-4); font-size: var(--fs-label); color: var(--muted); }
.form-done { padding: var(--s-2) 0; }
.form-done h3 { margin-bottom: var(--s-3); }
.form-done p { font-size: var(--fs-cap); color: var(--body); }

/* -- 23. Footer ----------------------------------------------------------- */
.footer { background: var(--forest); color: var(--on-dark-2); padding-top: var(--s-8); font-size: var(--fs-cap); }
.footer h4 { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark); margin-bottom: var(--s-4); }
.footer a { display: block; color: var(--on-dark-2); text-decoration: none; padding-block: 5px; }
.footer a:hover { color: var(--on-dark); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-6); } }
.footer__brand p { color: var(--on-dark-2); max-width: 46ch; }
.footer__rera { display: inline-block !important; margin-top: var(--s-3); letter-spacing: .06em; color: var(--on-dark) !important; }
.footer__dev { margin-top: var(--s-5); background: #fff; display: inline-block; padding: var(--s-3) var(--s-4); }
.footer__dev img { width: 132px; height: auto; }
.footer__social { display: inline-flex !important; align-items: center; gap: var(--s-2); }
.footer__social svg { width: 18px; height: 18px; }
.footer__addr { margin-top: var(--s-4); color: var(--on-dark-2); }
.footer__bar { margin-top: var(--s-8); border-top: 1px solid var(--line-dark); }
.footer__bar-inner { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between; padding-block: var(--s-4); }
.footer__bar p { margin: 0; font-size: var(--fs-label); }
.footer__legal a { display: inline !important; }
.footer__disclaimer {
  margin: 0 auto; padding-block: var(--s-5) var(--s-7);
  font-size: var(--fs-label); line-height: 1.6; color: #93A69A; max-width: var(--maxw);
}

/* -- 24. Float, mobile bar, modal, lightbox ------------------------------- */
.float {
  position: fixed; right: 14px; bottom: 84px; z-index: var(--z-float);
  width: 52px; height: 52px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: #25D366; color: #073B22;
  box-shadow: var(--sh-2); text-decoration: none;
}
.float svg { width: 28px; height: 28px; }
@media (min-width: 1080px) { .float { bottom: 22px; } }

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--forest); border-top: 1px solid var(--line-dark);
}
.mcta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 54px; color: var(--on-dark); text-decoration: none;
  font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase;
  background: transparent; border: 0; border-left: 1px solid var(--line-dark); cursor: pointer;
}
.mcta:first-child { border-left: 0; }
.mcta--enquire { background: var(--action); color: var(--action-ink); }
@media (min-width: 1080px) { .mobile-cta { display: none; } }
@media (max-width: 1079px) { body { padding-bottom: 54px; } }

.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--s-4); }
.modal.open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(12,31,23,.72); }
.modal__dialog {
  position: relative; width: min(440px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--ground); border-top: 3px solid var(--brass); padding: var(--s-6); box-shadow: var(--sh-3);
}
.modal__close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; background: transparent; border: 0; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.modal__head { margin-bottom: var(--s-5); padding-right: var(--s-6); }
.modal__head h3 { font-size: var(--fs-h3); }
.modal__head p { margin-top: var(--s-2); font-size: var(--fs-cap); color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: none; align-items: center; justify-content: center; background: rgba(8,20,14,.95); padding: var(--s-5); }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lightbox__close, .lightbox__nav {
  position: absolute; width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(244,247,243,.10); border: 1px solid var(--line-dark-strong);
  color: var(--on-dark); font-size: 1.6rem; cursor: pointer; border-radius: var(--r-pill);
}
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav--prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 14px; top: 50%; transform: translateY(-50%); }

/* -- 25. Spoke masthead and prose ---------------------------------------- */
.masthead { background: var(--forest); color: var(--on-dark); padding-block: var(--s-8) var(--s-7); }
.masthead h1 { color: var(--on-dark); font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
.masthead p { margin-top: var(--s-4); color: var(--on-dark-2); max-width: 62ch; }
.masthead .brassrule { margin-top: var(--s-5); max-width: 240px; }
.crumbs { font-size: var(--fs-label); color: var(--on-dark-2); margin-bottom: var(--s-4); }
.crumbs a { color: var(--on-dark-2); }
.crumbs span { opacity: .5; margin-inline: 6px; }
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-7); }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--s-6); }
.prose ul { padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.siblings { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: var(--s-7); }
.siblings a {
  display: block; padding: var(--s-4); border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: var(--fs-cap);
}
.siblings a:hover { border-color: var(--ink); }

/* -- 26. Motion ----------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--d-4) var(--ease-out), transform var(--d-4) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__slide { transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* -- 27. Small-screen guarantees, s1 -------------------------------------
   Everything above is written mobile-first, so this section is a backstop,
   not the layout. If a rule here is doing real work, the rule above it is wrong. */
@media (max-width: 480px) {
  .grid--2, .grid--3, .grid--4, .plates, .tiles, .amen-group, .distcols, .split, .siblings { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; }
  .verify { grid-template-columns: 1fr; }
  .verify img { width: 84px; }
  .hero__inner { min-height: 448px; }
  .contact__form { padding: var(--s-5); }
}
@media (max-width: 380px) {
  :root { --gutter: 14px; }
  .reels__card { width: 214px; }
}

/* -- 28. Two spacing utilities -------------------------------------------
   Non-responsive, so they could live inline under s1, but a class keeps the
   markup clean and keeps every spacing value on the 4px scale. */
.pad-t { margin-top: var(--s-6); }
.siblings--flush { margin-top: 0; }

/* -- 29. Dark bands redefine the tokens, they do not restate the selectors ---
   (rewritten 2026-09-14, second attempt)

   First attempt listed the affected children one by one: h2, eyebrow,
   section__sub, footnote. That is unmaintainable and it was already wrong,
   because `.figure__cap` was not on the list and shipped at 2.51:1 on the dark
   commercial band. Any component added later would have been wrong too.

   The fix is to rebind the COLOUR TOKENS inside every dark band. Components go
   on using `var(--muted)` and friends exactly as they do on the light ground,
   and they are correct on both without knowing which band they landed in.
   A new component cannot reintroduce this bug.

   `.hero` and `.masthead` are in the list because both are dark, even though
   they mostly set colours explicitly today.

   THE ONE THING TO WATCH: a deliberately LIGHT card placed inside a dark band
   would inherit these and turn invisible. There is no such card today. If one
   is ever added, give it `.on-light` and it resets. */
.section--dark,
.reels,
.register,
.footer,
.hero,
.masthead {
  --ink:          var(--on-dark);
  --body:         var(--on-dark);
  --muted:        var(--on-dark-2);
  --line:         var(--line-dark);
  --line-strong:  var(--line-dark-strong);
  --link:         var(--link-dark);
  --focus:        var(--focus-dark);
}
/* Light surfaces are immune to the rebind above. `.btn--light` proved this is
   not hypothetical: it is a pale button that lives in the dark hero, it takes
   its label colour from `--ink`, and the rebind turned it white-on-white at
   1.01:1. Any component that paints its own light background belongs on this
   list, so it carries the light palette wherever it is placed. */
.on-light,
.btn--light,
.plate,
.siblings a,
.contact__form,
.modal__dialog {
  --ink: #171A33; --body: #3A3E5C; --muted: #565A72;
  --line: #E2DBCC; --line-strong: #C8BFA9; --link: #3C4380; --focus: #4B53A0;
}

/* The few dark-band rules that are not token-driven. */
.register table.data thead th { color: var(--on-dark-2); }
.register table.data tbody th { color: var(--on-dark); }
.reels :focus-visible, .register :focus-visible { outline-color: var(--focus-dark); }
.reels .rule::before, .reels .rule::after,
.register .rule::before, .register .rule::after,
.section--dark .rule::before, .section--dark .rule::after { background: var(--brass-lit); }
.reels .keylist li::before, .register .keylist li::before,
.section--dark .keylist li::before { background: var(--brass-lit); }

/* -- 30. Footer tap targets (added 2026-09-14) ---------------------------
   This has to live at the end of the file. The footer link rule in section 23
   sets `padding-block: 5px`, so an identical-specificity override written up in
   the section-9 drawer block lost the cascade and the links stayed 32px tall.
   Same lesson as the inline-style ban: position beats intent. */
@media (max-width: 1079px) {
  .footer a { padding-block: 11px; }
  .footer__legal a { padding-block: 0; }
  .footer__rera { padding-block: 11px; }
}

/* -- 31. The header can never widen the page (added 2026-09-14) ------------
   This bug shipped twice in one batch. First the mobile CTA cluster forced the
   document to 377px at a 360 viewport. Then, after that was fixed, the DESKTOP
   nav did the same at exactly 900px: the header wanted 1054px and the drawer
   handed over at 900, so every window between 900 and 1054 got a horizontal
   scrollbar and a thin strip of page background down the right edge.

   Both were the same mistake, which is choosing the breakpoint by eye instead
   of measuring what the header needs. So:

   1. THE BREAKPOINT IS MEASURED, NOT GUESSED. Sum brand + nav + actions + the
      gutter at a wide viewport, then hand over above that number, with margin.
      Measured for this build: Urban Hills 1035, Vishnu Vertex 1054. Both hand
      over at 1080. Re-measure whenever a nav label or a button label changes.
   2. FLEX CHILDREN GET `min-width: 0`. Without it a flex item refuses to
      shrink below its min-content width and pushes the row wider than its
      parent, which is what made the row exceed the container in the first place.
   3. THE HEADER CLIPS. `overflow-x: clip` means that if 1 and 2 are ever both
      wrong, the failure is a clipped button, which is ugly and local, instead
      of a horizontal scrollbar on every page, which is invisible in a desktop
      preview and obvious on a phone.
   4. `html` CLIPS TOO, as the last backstop for any other element. */
html { overflow-x: clip; }
.header { overflow-x: clip; }
.header__inner { min-width: 0; }
.header__inner > * { min-width: 0; }
.nav { min-width: 0; }
.brand { flex-shrink: 0; }