/* =========================================================================
   GODREJ NCR HOME FINDER, shared design system
   Loaded by index.html and by all six project pages plus both thank-you pages.
   Index-only styles live in a <style> block inside index.html.

   House rules baked in here:
   • Zero shouted text. No letter-casing transform is applied anywhere in this
     file. Labels take their emphasis from letter-spacing, size, weight, colour.
   • One family: General Sans, from Fontshare. Display and body both. No second
     family, no fixed-width family.
   • Soft radii, 12px on buttons and 20px on cards, as on the Mumbai build.
   • Deep green is the field, gold is the accent. The deepest green is reserved
     for the primary button and the one dark band.
   ========================================================================= */

/* ── tokens ─────────────────────────────────────────────────────────────────
   PALETTE, 5 Aug 2026, second revision. Ported wholesale from the live
   godrejmumbairesidences.com on operator instruction: take that site's colour
   scheme, design and typeface exactly and leave everything else alone. Values
   were sampled from the deployed page's computed styles, not from the older
   local copy of that build, which has since diverged from what is live.

   Source tokens on that site:
     --green #1E3D32  --green-2 #2E5B4F  --green-3 #16302A  --ink #14231B
     --ivory #F6F2E9  --ivory-2 #FBF8F0  --sand #EDE6D6     --card #FFFFFF
     --gold  #B6893F  --gold-2 #CBA765   --text #22322B     --muted #6A6A6A
     12px button radius, 20px card radius, General Sans throughout.

   Three values are deliberately darker than the source, and only these three.
   Each one failed a WCAG floor at the size this build sets it, measured on the
   real surfaces, not estimated:
     --gold   #B6893F -> #805E20   gold text read 2.54:1 on --mist
     --muted  #6A6A6A -> #606060   4.35:1 on --mist, just under the 4.5 floor
     placeholder      -> #868D88   3.20:1 on --paper-2
   #B6893F is kept intact as --gold-brand for every non-text use (rules, dots,
   fills, focus rings), so the page still reads in the source palette. Ratios in
   the comments below are measured; keep them above 4.5:1 if anything is retuned.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  /* surfaces */
  --paper:#F6F2E9;       /* page base, ivory */
  --paper-2:#FBF8F0;     /* raised surface */
  --mist:#EDE6D6;        /* sand: rules, inset panels; the tightest light surface */
  --ink:#1E3D32;         /* Godrej deep green, headings and dark sections */
  --ink-2:#2E5B4F;
  /* text */
  --text:#22322B;        /* 12.06:1 on --paper */
  --muted:#606060;       /* 5.63:1 on --paper, 5.06:1 on --mist */
  --on-dark:#FFFFFF;
  --on-dark-muted:#C0C9C6;  /* 7.02 on --ink, 8.33 on --deep-2, 4.55 on --ink-2 */
  /* accents */
  --gold:#805E20;        /* gold TEXT on light: links, eyebrows; 5.31 on --paper, 4.77 on --mist */
  --gold-brand:#B6893F;  /* the source gold, non-text only: rules, dots, fills, rings */
  --gold-2:#CBA765;      /* gold on dark surfaces; 5.23:1 on --ink, 7.20:1 on --deep */
  --deep:#14231B;        /* deepest plane: trust band + primary button only */
  --deep-2:#16302A;
  --error:#A33B2B;
  /* lines */
  --line:rgba(30,61,50,.12);
  --line-2:rgba(30,61,50,.20);
  --line-dark:rgba(255,255,255,.18);
  /* soft, as on the source site */
  --r:12px;
  --r-lg:20px;

  /* type family, one only */
  --font-display:'General Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'General Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* fluid type scale, ratio >= 1.25 between steps */
  --fs-display:clamp(2.6rem, 1.35rem + 4.4vw, 4.4rem);
  --fs-h1:clamp(2.15rem, 1.15rem + 3.6vw, 3.55rem);
  --fs-h2:clamp(1.7rem, 1.05rem + 2.3vw, 2.6rem);
  --fs-h3:clamp(1.25rem, 1.02rem + .8vw, 1.62rem);
  --fs-h4:clamp(1.05rem, .96rem + .35vw, 1.2rem);
  --fs-body:clamp(1rem, .95rem + .18vw, 1.0625rem);
  --fs-sm:.9rem;
  --fs-xs:.8125rem;

  /* rhythm */
  --gutter:clamp(20px, 5vw, 72px);
  --maxw:1240px;
  --section-y:clamp(72px, 9vw, 132px);
  --block-y:clamp(34px, 4vw, 56px);

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:180ms;
  --t-mid:280ms;
  --t-slow:420ms;

  /* elevation, the source site's three-step scale */
  --shadow-sm:0 1px 2px rgba(20,35,27,.05);
  --shadow:0 10px 30px rgba(20,35,27,.09);
  --shadow-lift:0 26px 60px rgba(20,35,27,.16);
}

/* ── reset / base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
/* one family, so the display voice comes from weight 600 plus the tight tracking
   the source site uses, not from a second face */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  line-height:1.08;
  letter-spacing:0;   /* the source site sets 0 on every heading level */
  margin:0 0 .5em;
}
h1{font-size:var(--fs-h1);line-height:1.04}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);line-height:1.25}
/* the source site italicises the accent word as well as recolouring it */
h1 em,h2 em,h3 em,.accent{font-style:italic;color:var(--gold)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--gold);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--ink)}
ul,ol{margin:0;padding:0;list-style:none}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:0}

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

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--on-dark);padding:12px 18px;border-radius:var(--r);
}
.skip-link:focus{left:12px;top:12px}

/* ── layout ─────────────────────────────────────────────────────────────── */
.container{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-y)}
.section-tight{padding-block:calc(var(--section-y) * .62)}
.measure{max-width:68ch}
.measure-sm{max-width:56ch}
.lead{
  font-size:clamp(1.06rem, .98rem + .42vw, 1.24rem);
  line-height:1.6;font-weight:400;color:var(--text);max-width:64ch;
}
.muted{color:var(--muted)}
.rule{border-top:1px solid var(--line);margin-block:var(--block-y)}

/* ── numbered section label ─────────────────────────────────────────────── */
/* markup: <p class="section-label"><span class="n">01</span><i></i>Overview</p> */
.section-label{
  display:flex;align-items:center;gap:12px;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.14em;
  color:var(--ink);margin:0 0 18px;
}
.section-label .n{
  font-family:var(--font-display);font-size:1.05rem;letter-spacing:.02em;
  color:var(--gold);line-height:1;
}
.section-label i{
  display:block;width:28px;height:1px;background:var(--gold-brand);opacity:.55;flex:none;
}
.section-label.on-dark{color:var(--on-dark)}
.section-label.on-dark .n{color:var(--gold-2)}
.section-label.on-dark i{background:var(--gold-2)}

/* the source site's eyebrow: .8rem, 600, .16em tracking, with a short rule in
   front of it rather than a bullet */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:.8rem;font-weight:600;letter-spacing:.16em;color:var(--gold);
  margin:0 0 14px;
}
.eyebrow::before{
  content:"";display:block;width:28px;height:1px;background:var(--gold-brand);flex:none;
}
.eyebrow.on-dark{color:var(--gold-2)}
.eyebrow.on-dark::before{background:var(--gold-2)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-size:.98rem;font-weight:600;letter-spacing:.01em;
  line-height:1.15;padding:15px 26px;border:1px solid transparent;border-radius:var(--r);
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:background-color var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.btn:hover{text-decoration:none}
/* the source site lifts the primary button into gold on hover. Its gold is
   #B6893F, which puts white at 3.16:1, so the fill here is the darker text gold
   (5.93:1) and the source's gold only shows in the glow underneath it. */
.btn-primary{background:var(--deep);color:var(--on-dark);border-color:var(--deep)}
.btn-primary:hover{
  background:var(--gold);border-color:var(--gold);color:var(--on-dark);
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(182,137,63,.32);
}
.btn-gold{background:var(--gold-2);color:var(--ink);border-color:var(--gold-2)}
.btn-gold:hover{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.btn-ghost.on-dark{color:var(--on-dark);border-color:var(--line-dark)}
.btn-ghost.on-dark:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:11px 18px;font-size:.875rem}
.btn-lg{padding:18px 32px;font-size:1rem}
.btn .arw{transition:transform var(--t-mid) var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

/* ── chips ──────────────────────────────────────────────────────────────── */
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--r);
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em;color:var(--text);
  background:var(--paper-2);
}
.chip .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-brand);flex:none}
.chip.on-dark{
  background:rgba(255,255,255,.07);border-color:var(--line-dark);color:var(--on-dark);
}
.chip.on-dark .dot{background:var(--gold-2)}
.status-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border:1px solid var(--line-dark);border-radius:var(--r);
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.05em;color:var(--on-dark);
  background:rgba(255,255,255,.08);
}
.status-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-2);flex:none}

/* ── raised panel ───────────────────────────────────────────────────────── */
.panel{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px, 2.4vw, 34px);box-shadow:var(--shadow);
}

/* ── forms ──────────────────────────────────────────────────────────────── */
.form-head{margin-bottom:20px}
.form-head h3,.form-head h2{margin-bottom:8px}
.form-sub{font-size:var(--fs-sm);color:var(--muted);margin:0}
.field{margin-bottom:16px}
.field > label,.field-label{
  display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;
  color:var(--ink);margin-bottom:7px;
}
.field .opt{font-weight:400;color:var(--muted);letter-spacing:.02em}
.field input[type=text],
.field input[type=tel],
.field input[type=email],
.field select,
.field textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;font-weight:400;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:13px 14px;line-height:1.3;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder{color:#868D88;font-weight:400}
.field input:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(128,94,32,.16);
}
.field input:focus-visible{outline:none}
.phone-row{display:flex;align-items:stretch}
.phone-row .prefix{
  display:flex;align-items:center;padding:0 13px;
  background:var(--mist);border:1px solid var(--line-2);border-right:0;
  border-radius:var(--r) 0 0 var(--r);
  font-size:.95rem;font-weight:500;color:var(--text);
}
.phone-row input{border-radius:0 var(--r) var(--r) 0}
/* kept in the flow (never display:none) so the aria-live region announces */
.field-msg{
  margin:7px 0 0;font-size:var(--fs-xs);font-weight:500;color:var(--error);line-height:1.4;
}
.field-msg:empty{margin:0}
.field.err input{border-color:var(--error);box-shadow:0 0 0 3px rgba(163,59,43,.14)}
.consent{
  display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;
  font-size:var(--fs-xs);color:var(--muted);line-height:1.5;cursor:pointer;
}
.consent input[type=checkbox]{
  flex:none;width:17px;height:17px;margin:2px 0 0;accent-color:var(--deep);cursor:pointer;
}
.form-note{margin:12px 0 0;font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.form-status{margin:12px 0 0;font-size:var(--fs-xs);font-weight:500;color:var(--error)}
.form-status:empty{margin:0}

/* ── site header ────────────────────────────────────────────────────────── */
/* translucent + blurred, as on the source site */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(246,242,233,.78);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
/* no blur support means the header would sit see-through over scrolling copy */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:var(--paper)}
}
.site-header.is-stuck{border-bottom-color:var(--line)}
.header-inner{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{color:var(--ink)}
/* the official Godrej Properties mark, sized by height so the lockup keeps its
   own proportions at every breakpoint */
.brand-mark{display:block;height:26px;width:auto;flex:none}
.brand-divider{width:1px;height:20px;background:var(--line-2);flex:none}
.brand-label{
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.09em;color:var(--muted);
}
.header-nav{display:flex;align-items:center;gap:22px}
.nav-link{
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.02em;color:var(--text);
}
.nav-link:hover{color:var(--gold)}

/* ── project hero ───────────────────────────────────────────────────────── */
.p-hero{position:relative;background:var(--ink);isolation:isolate;overflow:hidden}
.p-hero-media{position:absolute;inset:0;z-index:0}
.p-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.p-hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(30,61,50,.90) 0%, rgba(30,61,50,.72) 34%, rgba(30,61,50,.30) 66%, rgba(30,61,50,.12) 100%),
    linear-gradient(to top, rgba(30,61,50,.55) 0%, rgba(30,61,50,0) 44%);
}
.p-hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px, 4vw, 64px);align-items:center;
  padding-block:clamp(56px, 7vw, 104px);
}
/* the shadow keeps hero copy legible wherever a bright render sits behind it */
.p-hero-copy{color:var(--on-dark);text-shadow:0 1px 22px rgba(30,61,50,.62)}
.p-hero-place{
  display:flex;align-items:center;gap:12px;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.1em;color:var(--gold-2);
  margin:0 0 18px;
}
.p-hero-place i{display:block;width:28px;height:1px;background:var(--gold-2);opacity:.6;flex:none}
.p-hero h1{color:var(--on-dark);font-size:var(--fs-display);margin-bottom:.28em}
.p-hero h1 em{color:var(--gold-2)}
.p-hero-line{
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(1.06rem, .98rem + .5vw, 1.3rem);line-height:1.55;
  color:var(--on-dark);opacity:.92;max-width:34ch;margin:0 0 26px;
}
.spec-strip{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  margin:0 0 22px;
}
.spec-strip li{padding:16px 26px 16px 0;margin-right:26px;border-right:1px solid var(--line-dark)}
.spec-strip li:last-child{border-right:0;margin-right:0;padding-right:0}
.spec-strip .k{
  display:block;font-size:var(--fs-xs);font-weight:500;letter-spacing:.09em;
  color:#C0C9C6;margin-bottom:5px;
}
.spec-strip .v{
  display:block;font-family:var(--font-display);font-size:clamp(1.05rem,.95rem+.5vw,1.35rem);
  color:var(--on-dark);line-height:1.15;
}

/* enquiry panel sitting on the hero */
.enquiry-panel h2,.enquiry-panel h3{font-size:var(--fs-h3);margin-bottom:8px}

/* ── overview split ─────────────────────────────────────────────────────── */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px, 4.5vw, 72px);align-items:center;
}
.split-media img{
  width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);
}
.split-copy p{color:var(--text)}

/* ── spec table ─────────────────────────────────────────────────────────── */
.spec-table{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2);
  overflow:hidden;
}
.spec-table .row{
  display:grid;grid-template-columns:minmax(140px,.42fr) minmax(0,1fr);
  gap:18px;padding:17px clamp(16px,2vw,26px);border-top:1px solid var(--line);
}
.spec-table .row:first-child{border-top:0}
.spec-table .k{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;color:var(--muted);
  align-self:center;
}
.spec-table .v{
  font-family:var(--font-display);font-size:1.12rem;color:var(--ink);line-height:1.3;
}
.best-line{
  margin-top:20px;font-size:var(--fs-sm);color:var(--muted);
  padding-left:16px;border-left:2px solid var(--gold-brand);max-width:62ch;
}
.best-line strong{color:var(--ink)}

/* ── ruled lists (amenities, connectivity) ──────────────────────────────── */
.ruled-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,4vw,64px);
  border-top:1px solid var(--line);
}
.ruled-list.one-col{grid-template-columns:minmax(0,1fr);max-width:68ch}
.ruled-list li{
  display:flex;align-items:flex-start;gap:14px;
  padding:15px 4px;border-bottom:1px solid var(--line);
  font-size:1.02rem;color:var(--text);line-height:1.45;
}
.ruled-list li::before{
  content:"";flex:none;width:7px;height:7px;margin-top:.55em;
  background:var(--gold-brand);transform:rotate(45deg);
}
.ruled-list.on-dark{border-top-color:var(--line-dark)}
.ruled-list.on-dark li{border-bottom-color:var(--line-dark);color:var(--on-dark)}
.ruled-list.on-dark li::before{background:var(--gold-2)}

/* ── bento gallery ──────────────────────────────────────────────────────── */
.bento{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,.9vw,14px);
  grid-auto-rows:clamp(104px,11.5vw,168px);
}
.g-tile{
  position:relative;display:block;padding:0;margin:0;overflow:hidden;
  border:0;border-radius:var(--r);background:var(--mist);cursor:zoom-in;
  transition:box-shadow var(--t-mid) var(--ease);
}
.g-tile img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease), filter var(--t-mid) var(--ease);
}
.g-tile:hover img,.g-tile:focus-visible img{transform:scale(1.035)}
.g-tile figcaption,.g-tile .cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 11px;
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em;color:var(--on-dark);
  text-align:left;
  /* a two-stop fade only reaches .80 at the very bottom edge, and the text sits
     well above that: over a bright render the caption measured 1.77:1. The strong
     part of the scrim now covers the whole text band and fades only above it. */
  background:linear-gradient(to top,
    rgba(30,61,50,.93) 0%, rgba(30,61,50,.88) 55%,
    rgba(30,61,50,.55) 80%, rgba(30,61,50,0) 100%);
  opacity:0;transition:opacity var(--t-mid) var(--ease);
  pointer-events:none;
}
.g-tile:hover .cap,.g-tile:focus-visible .cap{opacity:1}
.bento > .g-tile:nth-child(1){grid-column:1/3;grid-row:1/3}
.bento > .g-tile:nth-child(2){grid-column:3/5;grid-row:1/2}
.bento > .g-tile:nth-child(3){grid-column:3/4;grid-row:2/3}
.bento > .g-tile:nth-child(4){grid-column:4/5;grid-row:2/3}
.bento > .g-tile:nth-child(5){grid-column:1/3;grid-row:3/5}
.bento > .g-tile:nth-child(6){grid-column:3/5;grid-row:3/4}
.bento > .g-tile:nth-child(7){grid-column:3/4;grid-row:4/5}
.bento > .g-tile:nth-child(8){grid-column:4/5;grid-row:4/5}
.gallery-hint{margin:14px 0 0;font-size:var(--fs-xs);color:var(--muted)}

/* ── lightbox ───────────────────────────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;
  background:rgba(20,35,27,.94);padding:clamp(16px,4vw,56px);
}
.lightbox.open{display:flex}
.lb-stage{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(1180px,100%);max-height:100%;
}
.lb-stage img{
  max-width:100%;max-height:calc(100vh - 190px);width:auto;height:auto;
  object-fit:contain;border-radius:var(--r);background:var(--ink-2);
}
.lb-cap{
  font-size:var(--fs-sm);font-weight:400;letter-spacing:.03em;color:var(--on-dark);
  text-align:center;margin:0;
}
.lb-count{font-size:var(--fs-xs);color:var(--on-dark-muted);margin:0}
.lb-btn{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;
  background:rgba(255,255,255,.10);color:var(--on-dark);
  border:1px solid var(--line-dark);border-radius:var(--r);
  font-family:var(--font-body);font-size:1.25rem;line-height:1;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lb-btn:hover{background:var(--on-dark);color:var(--ink)}
.lb-close{top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);position:fixed}
.lb-prev{left:clamp(12px,2vw,24px);top:50%;transform:translateY(-50%);position:fixed}
.lb-next{right:clamp(12px,2vw,24px);top:50%;transform:translateY(-50%);position:fixed}
body.lb-open{overflow:hidden}

/* ── master plan ────────────────────────────────────────────────────────── */
.plan-frame{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2);
  padding:clamp(12px,1.6vw,22px);
}
.plan-frame img{width:100%;height:auto;border-radius:var(--r)}

/* ── dark bands ─────────────────────────────────────────────────────────── */
.band-ink{background:var(--ink);color:var(--on-dark)}
.band-deep{background:var(--deep);color:var(--on-dark)}
.band-ink h2,.band-deep h2,.band-ink h3,.band-deep h3{color:var(--on-dark)}
/* the italic in a heading is set in --gold, which is tuned for the light page and
   only reaches 2.98:1 on the graphite band. On dark it takes the brand gold. */
.band-ink h2 em,.band-deep h2 em,
.band-ink h3 em,.band-deep h3 em{color:var(--gold-2)}
.band-ink p,.band-deep p{color:var(--on-dark);opacity:.9}
/* :not(.btn) matters. These outrank .btn-gold on specificity, so without it the
   CTA in a dark band was painted gold-on-gold and disappeared entirely. */
.band-ink a:not(.btn),.band-deep a:not(.btn){color:var(--gold-2)}
.band-ink a:not(.btn):hover,.band-deep a:not(.btn):hover{color:var(--on-dark)}

.cta-band{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,4vw,60px);align-items:center;
}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer{background:var(--ink-2);color:var(--on-dark-muted);padding-block:clamp(44px,5vw,72px)}
/* the mark is a single dark colour, so knocking it out to white reads correctly
   on the dark footer without shipping a second asset */
.site-footer .brand-mark{filter:brightness(0) invert(1);height:24px}
.site-footer .brand-label{color:var(--on-dark-muted)}
.site-footer .brand-divider{background:var(--line-dark)}
.foot-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding-bottom:22px;border-bottom:1px solid var(--line-dark);
}
.foot-nav{display:flex;flex-wrap:wrap;gap:20px}
.foot-nav a{font-size:var(--fs-sm);color:var(--on-dark-muted)}
.foot-nav a:hover{color:var(--on-dark)}
.foot-h{
  font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;
  color:var(--on-dark);margin:28px 0 12px;
}
.rera-list li,.rera{
  font-size:var(--fs-xs);line-height:1.65;color:var(--on-dark-muted);
  padding:9px 0;border-top:1px solid var(--line-dark);max-width:100ch;
}
.rera-list li:first-child{border-top:0}
.rera{border-top:0;padding-top:0}
.rera strong,.rera-list strong{color:var(--on-dark);font-weight:600}
.disclaimer{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line-dark);
  font-size:var(--fs-xs);line-height:1.65;color:var(--on-dark-muted);max-width:100ch;
}
.foot-legal{margin-top:14px;font-size:var(--fs-xs);color:var(--on-dark-muted);opacity:.8}

/* ── sticky mobile CTA ──────────────────────────────────────────────────── */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper-2);border-top:1px solid var(--line);
}
.sticky-cta .btn{flex:1}
body.has-sticky{padding-bottom:0}

/* ── thank-you ──────────────────────────────────────────────────────────── */
.ty-wrap{
  min-height:64vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(48px,7vw,104px) var(--gutter);
}
.ty-inner{max-width:640px;width:100%;text-align:center}
.ty-mark{
  width:56px;height:56px;margin:0 auto 26px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);border-radius:50%;color:var(--gold);
}
.ty-inner h1{font-size:clamp(2rem,1.3rem+2.4vw,3rem);margin-bottom:.3em}
.ty-sub{font-size:clamp(1.02rem,.96rem+.4vw,1.16rem);font-weight:400;color:var(--text);margin:0 auto 24px;max-width:52ch}
.ty-facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:0 0 28px;text-align:left;
}
.ty-facts li{padding:15px 24px 15px 0;margin-right:24px;border-right:1px solid var(--line)}
.ty-facts li:last-child{border-right:0;margin-right:0;padding-right:0}
.ty-facts .k{display:block;font-size:var(--fs-xs);font-weight:500;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.ty-facts .v{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--ink);line-height:1.2}
.ty-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:22px}
.ty-foot{font-size:var(--fs-sm);color:var(--muted)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .p-hero-inner{grid-template-columns:minmax(0,1fr);gap:34px}
  .p-hero-copy{max-width:640px}
  .split{grid-template-columns:minmax(0,1fr);gap:28px}
  .split.media-first .split-media{order:-1}
  .cta-band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .header-nav .nav-link{display:none}
  .brand-label{display:none}
  .brand-divider{display:none}
  .spec-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .spec-strip li{
    padding:13px 14px 13px 0;margin-right:0;
    border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  }
  .spec-strip li:nth-child(2n){border-right:0}
  .spec-strip li:last-child{padding-right:0;border-bottom:0}
  .ruled-list{grid-template-columns:minmax(0,1fr)}
  .spec-table .row{grid-template-columns:minmax(0,1fr);gap:4px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .bento > .g-tile:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .bento > .g-tile:nth-child(1),
  .bento > .g-tile:nth-child(5){grid-column:1/3;aspect-ratio:16/10}
  .g-tile .cap{opacity:1}
  .sticky-cta{display:flex}
  body.has-sticky{padding-bottom:78px}
  .ty-facts{justify-content:flex-start}
}
@media (max-width:420px){
  .ty-facts li{padding-right:16px;margin-right:16px}
}

/* ── motion preference ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .g-tile:hover img,.g-tile:focus-visible img{transform:none}
}

/* ── print ──────────────────────────────────────────────────────────────── */
@media print{
  .site-header,.sticky-cta,.lightbox,.enquiry-panel{display:none!important}
  body{background:#FFFFFF}
}