/* ==========================================================================
   Godrej Bengaluru Home Finder : visual system
   Square-edged editorial. Prata display + Schibsted Grotesk text.
   Deliberately unlike godrej-ncr-home-finder-live (bone/brass, rounded,
   DM Serif + Plus Jakarta) : see ASSETS-README.md for the full matrix.
   ========================================================================== */

:root {
  /* ground */
  --paper:        oklch(0.966 0.010 85);
  --paper-2:      oklch(0.936 0.014 82);
  --paper-3:      oklch(0.902 0.017 80);

  /* ink : deep bengaluru green, never pure black */
  --ink:          oklch(0.238 0.032 172);
  --ink-2:        oklch(0.312 0.037 170);
  --ink-3:        oklch(0.408 0.036 168);

  /* text */
  --text:         oklch(0.330 0.014 150);
  --muted:        oklch(0.516 0.013 150);
  --on-ink:       oklch(0.948 0.010 85);
  --on-ink-muted: oklch(0.760 0.017 120);

  /* accent : clay */
  --clay:         oklch(0.565 0.126 46);
  --clay-deep:    oklch(0.496 0.116 44);
  --clay-soft:    oklch(0.902 0.036 62);

  --line:         oklch(0.858 0.012 85);
  --line-2:       oklch(0.782 0.015 85);
  --line-ink:     oklch(0.372 0.028 170);

  --error:        oklch(0.508 0.148 28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Prata, Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.12;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.15rem, 5vw, 3.65rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.14rem, 1.7vw, 1.4rem); line-height: 1.24; }
p  { margin: 0 0 1rem; }
a  { color: var(--clay-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- section labels: hairline rule, sentence case, never caps ------ */
.label {
  display: flex; align-items: center; gap: 14px;
  font-size: .845rem; font-weight: 500; color: var(--clay-deep);
  margin: 0 0 18px;
}
.label::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.label-ink { color: var(--clay-soft); }
.label-ink::after { background: var(--line-ink); }

.section { padding: clamp(58px, 8vw, 104px) 0; }
.section-lead { max-width: 62ch; color: var(--muted); font-size: 1.06rem; }

/* ---------- buttons: square, no radius anywhere on this page -------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border: 1px solid transparent; border-radius: 0;
  font: inherit; font-size: .97rem; font-weight: 500; line-height: 1.15;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-clay   { background: var(--clay); color: oklch(0.985 0.006 85); }
.btn-ink    { background: var(--ink); color: var(--on-ink); }
.btn-line   { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line-light { background: transparent; color: var(--on-ink); border-color: var(--line-ink); }
.btn-block  { width: 100%; }
@media (hover: hover) {
  .btn-clay:hover  { background: var(--clay-deep); }
  .btn-ink:hover   { background: var(--ink-2); }
  .btn-line:hover  { border-color: var(--ink); background: var(--paper-2); }
  .btn-line-light:hover { border-color: var(--on-ink-muted); background: var(--ink-2); }
}

/* ================= header ================================================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(9px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.header-logo { width: 138px; height: auto; flex: none; }
.header-tag {
  font-size: .78rem; color: var(--muted); border-left: 1px solid var(--line-2);
  padding-left: 16px; margin: 0;
}
.header-ctas { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.header-link { color: var(--ink); text-decoration: none; font-size: .92rem; }
@media (hover: hover) { .header-link:hover { text-decoration: underline; } }
@media (max-width: 760px) { .header-link { display: none; } }
.header-ctas .btn { padding: 11px 20px; font-size: .92rem; }
@media (max-width: 860px) { .header-tag { display: none; } }
@media (max-width: 560px) { .header-ctas .btn-line { display: none; } }

/* ================= hero =================================================== */
/* Full-bleed photograph with the matcher card floating in the right column.
   The ink background is set on the section itself so light copy always has a
   real colour behind it, even before the photograph decodes. */
.hero { position: relative; background: var(--ink); color: var(--on-ink); border-bottom: 1px solid var(--line-ink); }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-slide.is-on { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
/* the veil is what keeps the copy legible; it is heaviest on the copy side */
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    oklch(0.238 0.032 172 / 0.93) 0%,
    oklch(0.238 0.032 172 / 0.86) 42%,
    oklch(0.238 0.032 172 / 0.52) 100%);
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(30px, 4.5vw, 62px); align-items: center;
  padding: clamp(44px, 5vw, 72px) 22px clamp(48px, 5.5vw, 78px);
}
.hero-copy h1, .hero-copy h2, .hero-copy h3 { color: var(--on-ink); }
.hero-eyebrow { font-size: .9rem; color: var(--clay-soft); margin: 0 0 20px; }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--clay-soft); }
.hero-lead { font-size: 1.06rem; color: var(--on-ink-muted); max-width: 46ch; margin-bottom: 26px; }

.hero-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.hero-chips li {
  border: 1px solid var(--line-ink); padding: 8px 15px;
  font-size: .86rem; color: var(--on-ink);
}

/* ---------- the matcher card ---------------------------------------------- */
.quiz-card {
  background: var(--paper); color: var(--text);
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line-2);
  box-shadow: 0 26px 54px oklch(0.150 0.020 172 / 0.34);
}
.quiz-card h2, .quiz-card h3, .quiz-card h4 { color: var(--ink); }
.quiz-head { margin-bottom: 20px; }
.quiz-head-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.quiz-eyebrow { font-size: .84rem; color: var(--clay-deep); margin: 0; }
.quiz-head-right { display: flex; align-items: baseline; gap: 14px; }
.quiz-step-label { font-size: .82rem; color: var(--muted); }
.quiz-back {
  border: 0; background: none; padding: 0; font: inherit; font-size: .82rem;
  color: var(--clay-deep); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
/* segmented rail : one segment per step, filled left to right */
.quiz-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.quiz-rail span { height: 3px; background: var(--paper-3); transition: background-color .3s var(--ease); }
.quiz-rail span.on { background: var(--clay); }

.quiz { color: var(--text); }
.quiz-strip {
  margin: 22px -0px 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
}

@media (max-width: 900px) {
  /* Asked for on 16 September 2026: the slideshow runs behind the whole hero on
     a phone too, rather than closing the section as a separate band. The copy
     and the matcher stack in one column on top of it. The veil turns vertical
     and sits heaviest where the copy is, since that is the only text with the
     photograph directly underneath; the matcher carries its own paper panel.
     The weights (0.88 / 0.78 / 0.55) are the vertical answer to the desktop
     96deg veil, tuned on a phone until the tower behind the copy reads. */
  .hero-grid { grid-template-columns: 1fr; gap: 26px; padding: 32px 22px 38px; }
  .hero-bg { position: absolute; inset: 0; height: auto; margin: 0; }
  .hero-veil {
    display: block;
    background: linear-gradient(180deg,
      oklch(0.238 0.032 172 / 0.88) 0%,
      oklch(0.238 0.032 172 / 0.78) 50%,
      oklch(0.238 0.032 172 / 0.55) 100%);
  }
  .hero-lead { font-size: 1rem; margin-bottom: 22px; }
  .hero-chips { gap: 7px; }
  .hero-chips li { padding: 6px 12px; font-size: .8rem; }
}
@media (max-width: 480px) {
  .hero-grid { padding-inline: 16px; }
}

.step-title { margin: 0 0 6px; }
.step-note { color: var(--muted); font-size: .93rem; margin: 0 0 18px; }

.options { display: grid; gap: 9px; margin-bottom: 4px; counter-reset: opt; }
.options-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .options-2 { grid-template-columns: 1fr; } }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; text-align: left;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 0;
  font: inherit; font-size: .96rem; color: var(--text); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.opt::before {
  counter-increment: opt; content: counter(opt, upper-alpha);
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: transparent;
  font-size: .82rem; color: var(--muted); line-height: 1;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.opt.is-on { border-color: var(--ink); background: var(--paper-2); }
.opt.is-on::before { background: var(--clay); border-color: var(--clay); color: oklch(0.985 0.006 85); }
@media (hover: hover) { .opt:hover { border-color: var(--ink-3); background: var(--paper-2); } }

/* lead form */
.field { display: block; margin-bottom: 14px; }
/* the label text only: .phone-wrap is also a direct child span and must stay flex */
.field > span:not(.phone-wrap) { display: block; font-size: .87rem; color: var(--ink); margin-bottom: 6px; }
.field em { font-style: normal; color: var(--muted); }
.field input {
  width: 100%; padding: 13px 14px; font: inherit; font-size: .98rem;
  color: var(--text); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 0;
  transition: border-color .18s var(--ease);
}
.field input:focus { border-color: var(--ink); outline: none; }
.phone-wrap { display: flex; border: 1px solid var(--line-2); background: var(--paper); }
.phone-wrap:focus-within { border-color: var(--ink); }
.phone-prefix {
  display: flex; align-items: center; padding: 0 12px; flex: none;
  border-right: 1px solid var(--line-2); color: var(--muted); font-size: .95rem;
  background: var(--paper-2);
}
.phone-wrap input { border: 0; }
.phone-wrap input:focus { border: 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .87rem; color: var(--muted); margin: 4px 0 16px; }
.consent input { margin-top: 4px; flex: none; accent-color: var(--clay); }
.form-error { color: var(--error); font-size: .88rem; margin: 0 0 12px; }
.micro-trust { font-size: .8rem; color: var(--muted); margin: 12px 0 0; text-align: center; }

/* result */
.result-head { margin-bottom: 18px; }
.result-kicker { font-size: .87rem; color: var(--clay-deep); margin: 0 0 4px; }
.result-card { border: 1px solid var(--line-2); }
.result-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.result-body { padding: 20px; }
.result-body h3 { margin-bottom: 4px; }
.result-loc { font-size: .89rem; color: var(--muted); margin: 0 0 12px; }
.result-spec { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.result-spec li { display: flex; gap: 10px; font-size: .92rem; }
.result-spec b { font-weight: 500; color: var(--ink); flex: none; min-width: 96px; }
.result-why { font-size: .93rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin: 0 0 16px; }
.result-actions { display: grid; gap: 9px; }
.result-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.result-alt a { color: var(--clay-deep); }

.quiz-foot { font-size: .79rem; color: var(--muted); margin: 18px 0 0; }

/* ================= project ladder ========================================= */
/* four cards, two up, so a corridor pair reads across a row on a wide screen */
.ladder-grid { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; margin-top: 38px; }
/* the whole tile is the link, so there is no separate button to hunt for */
.p-card {
  border: 1px solid var(--line); background: var(--paper);
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.p-card:focus-visible {
  outline: 2px solid var(--clay-deep); outline-offset: 3px;
}
.p-card h3, .p-card .p-fit, .p-card .p-pills li { color: var(--text); }
.p-card h3 { color: var(--ink); }
.p-card-img { position: relative; background: var(--paper-3); }
.p-card-img img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.p-price {
  position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--on-ink);
  font-size: .86rem; padding: 8px 14px;
}
/* the ordinal sits on the image, top left, the way the Assetz cards number
   their projects; the price keeps the opposite corner */
.p-num {
  position: absolute; left: 0; top: 0; background: var(--clay);
  color: oklch(0.985 0.006 85); font-size: .84rem; padding: 7px 13px;
}
.p-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.p-card h3 { margin-bottom: 6px; }
.p-loc { font-size: .85rem; color: var(--clay-deep); margin: 0 0 14px; }
.p-pills { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.p-pills li {
  border: 1px solid var(--line-2); padding: 5px 11px;
  font-size: .82rem; color: var(--text);
}
.p-fit { font-size: .93rem; color: var(--text); border-top: 1px solid var(--line); padding-top: 14px; margin: 0 0 20px; }
/* wordless arrow: an affordance, not a call to action, because the tile itself
   is the target and a second clickable thing inside a link is a nesting error */
.p-go {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line-2); color: var(--clay-deep);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.p-go svg { transition: transform .2s var(--ease); }
@media (hover: hover) {
  .p-card:hover { border-color: var(--line-ink); box-shadow: 0 10px 28px oklch(0.238 0.032 172 / 0.10); transform: translateY(-3px); }
  .p-card:hover .p-go { background: var(--clay); border-color: var(--clay); color: oklch(0.985 0.006 85); }
  .p-card:hover .p-go svg { transform: translateX(3px); }
  .p-card:hover h3 { color: var(--clay-deep); }
}
@media (max-width: 820px) { .ladder-grid { grid-template-columns: 1fr; } }

/* alternate ground, so consecutive paper sections do not run together */
.section-alt { background: var(--paper-2); border-block: 1px solid var(--line); }

/* ================= published numbers ====================================== */
/* a hairline over each figure, the way the Assetz numbers row is ruled */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 38px; }
.stat { border-top: 1px solid var(--line-2); padding-top: 16px; }
.stat b {
  display: block; font-family: Prata, Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--ink);
  line-height: 1.05; margin-bottom: 10px;
}
.stat span { display: block; font-size: .89rem; color: var(--muted); }
@media (max-width: 900px) { .stat-row { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 460px) { .stat-row { grid-template-columns: 1fr; } }

/* ================= compare table ========================================== */
.compare { background: var(--paper-2); border-block: 1px solid var(--line); }
.compare-scroll { overflow-x: auto; margin-top: 34px; border: 1px solid var(--line-2); background: var(--paper); }
.compare-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: .93rem; }
.compare-table th, .compare-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.compare-table thead th { background: var(--ink); color: var(--on-ink); font-weight: 500; border-bottom: 0; }
.compare-table thead th:first-child { font-weight: 400; color: var(--on-ink-muted); }
.compare-table tbody th { font-weight: 500; color: var(--ink); background: var(--paper-2); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

/* Only the hub's four project table needs five columns. The three column
   tables on the project pages keep the narrower minimum above, so they do
   not scroll sideways on a tablet for no reason. The row label is pinned
   here so the five column table stays readable while it scrolls.

   Fixed layout matters: a RERA number is one unbreakable token, so with auto
   layout the four registrations pushed the table to about 1,530px and the
   fourth project fell off the right edge on a normal desktop. Fixed columns
   plus the break-word above keep all four in view. Changed 17 September 2026. */
.compare-wide { min-width: 860px; table-layout: fixed; }
.compare-wide thead th + th, .compare-wide tbody td { width: 21%; }
.compare-wide tbody th { width: 16%; min-width: 150px; position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--line-2); }
.compare-wide thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--ink); }
.compare-na { color: var(--muted); }
.compare-note { font-size: .82rem; color: var(--muted); margin: 14px 0 0; }

/* A ten row, four column table cannot fit 375px, and a sideways scroll hid three
   of the four projects behind a gesture nobody made. Below 760px each row becomes
   its own block: the row heading on the dark band, then one labelled line per
   column. No column is dropped and nothing overflows. */
@media (max-width: 760px) {
  .compare-scroll { overflow-x: visible; border: 0; background: transparent; }
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table tbody th,
  .compare-table tbody td { display: block; width: auto; }
  .compare-table, .compare-wide { min-width: 0; font-size: .95rem; }
  .compare-table thead { display: none; }
  .compare-table tbody tr {
    border: 1px solid var(--line-2);
    background: var(--paper);
    margin-bottom: 14px;
  }
  .compare-table tbody tr:last-child { margin-bottom: 0; }
  .compare-table tbody th,
  .compare-wide tbody th {
    position: static;
    width: auto;
    min-width: 0;
    background: var(--ink);
    color: var(--on-ink);
    border-right: 0;
    border-bottom: 0;
    padding: 12px 16px;
  }
  .compare-table tbody td,
  .compare-wide tbody td {
    width: auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .compare-table tbody tr td:last-child { border-bottom: 0; }
  .compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: 4px;
  }
}

/* ================= persona routing ======================================== */
.persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 34px; border: 1px solid var(--line-2); }
.persona {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 24px; text-align: left; background: var(--paper);
  border: 0; border-right: 1px solid var(--line-2); font: inherit; cursor: pointer;
  transition: background-color .2s var(--ease);
}
.persona:last-child { border-right: 0; }
.persona > svg { color: var(--clay-deep); margin-bottom: 14px; }
.persona h3 { font-size: 1.16rem; margin-bottom: 8px; }
.persona p { font-size: .93rem; color: var(--muted); margin-bottom: 14px; }
.persona-go { margin-top: auto; font-size: .89rem; color: var(--clay-deep); }
@media (hover: hover) { .persona:hover { background: var(--paper-2); } }
@media (max-width: 1040px) {
  .persona-grid { grid-template-columns: 1fr 1fr; }
  .persona:nth-child(2n) { border-right: 0; }
  .persona:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
}
@media (max-width: 820px) {
  .persona-grid { grid-template-columns: 1fr; }
  .persona { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .persona:last-child { border-bottom: 0; }
}

/* ================= trust band ============================================= */
.trust { background: var(--ink); color: var(--on-ink); }
.trust h2 { color: var(--on-ink); max-width: 18ch; }
.trust p { color: var(--on-ink-muted); }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.trust-list { list-style: none; margin: 0; padding: 0; }
.trust-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--line-ink); font-size: .96rem; color: var(--on-ink-muted);
}
.trust-list li:last-child { border-bottom: 1px solid var(--line-ink); }
.trust-list svg { flex: none; margin-top: 3px; color: var(--clay-soft); }
.trust-list b { color: var(--on-ink); font-weight: 500; display: block; }
@media (max-width: 820px) { .trust-grid { grid-template-columns: 1fr; } }

/* ================= footer ================================================= */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: clamp(44px, 6vw, 72px) 0 34px; font-size: .9rem; }
.footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.footer-logo { width: 150px; height: auto; }
.footer-about { color: var(--muted); max-width: 60ch; margin: 0; }
.footer-brand .footer-logo { margin-bottom: 16px; }
.footer-rera h4 { margin-top: 0; }
.footer-main .footer-rera { padding: 0; border-bottom: 0; }
.footer-main .rera-grid { grid-template-columns: 1fr; gap: 14px; }
.footer-rera { padding: 26px 0; border-bottom: 1px solid var(--line); }
.footer-rera h4 { font-family: inherit; font-size: .9rem; font-weight: 500; color: var(--ink); margin: 0 0 12px; }
.rera-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.rera-grid p { margin: 0; color: var(--muted); font-size: .87rem; }
.rera-grid b { display: block; color: var(--ink); font-weight: 500; }
@media (max-width: 720px) { .rera-grid, .footer-top, .footer-main { grid-template-columns: 1fr; } }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; padding: 22px 0 16px; }
.footer-links a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .footer-links a:hover { text-decoration: underline; } }
.footer-disclaimer { color: var(--muted); font-size: .8rem; line-height: 1.65; margin: 0; }

/* ================= sticky mobile cta ====================================== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--paper) 94%, transparent);
  backdrop-filter: blur(9px); border-top: 1px solid var(--line);
  display: none;
}
@media (max-width: 760px) { .sticky-cta { display: block; } body { padding-bottom: 74px; } }

/* ================= project detail pages =================================== */
.p-hero { border-bottom: 1px solid var(--line); }
/* The hero ran on the standard 1180 wrap with a 50vw image column, which left a
   2.31:1 render about 568px wide and 246px tall on desktop: the smallest thing
   on the page rather than the largest. It now gets its own wider wrap, the
   larger of the two columns, and a fixed panel height it fills with cover, so
   the render reads at roughly two and a half times the area it used to. */
.p-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(40px, 5vw, 72px) 22px;
  max-width: 1320px;
}
.p-hero h1 { margin-bottom: 16px; }
.p-hero-lead { color: var(--muted); font-size: 1.06rem; max-width: 46ch; }
/* the renamed-project line under the hero lead: quieter than the lead, loud
   enough that someone arriving on an ad for the old name knows they are in the
   right place. Added 16 September 2026 when Godrej Whitefield was registered
   with Karnataka RERA as Godrej Florenne. */
.p-hero-note {
  margin: 14px 0 24px; font-size: .88rem; color: var(--muted);
  max-width: 46ch; padding-left: 12px; border-left: 2px solid var(--clay);
}
.p-hero-media { margin: 0; }
.p-hero-media img {
  display: block; width: 100%;
  height: clamp(360px, 40vw, 540px);
  object-fit: cover;
  border: 1px solid var(--line);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .hero-actions .btn { flex: 1 1 0; padding-left: 14px; padding-right: 14px; } }
.crumb { font-size: .85rem; color: var(--muted); margin: 0 0 18px; }
.crumb a { color: var(--clay-deep); }

.spec-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.spec-grid > div { padding: 22px; border-right: 1px solid var(--line); }
.spec-grid > div:last-child { border-right: 0; }
.spec-grid b { display: block; font-family: Prata, Georgia, serif; font-size: 1.34rem; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.spec-grid span { font-size: .85rem; color: var(--muted); }
@media (max-width: 820px) {
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .spec-grid > div:nth-child(2n) { border-right: 0; }
  .spec-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .p-hero-grid { grid-template-columns: 1fr; }
  .p-hero-media img { height: clamp(240px, 58vw, 340px); }
}

/* The project intro was a two column split: a tall text column beside a single
   image held at its own aspect ratio. On the Florenne page the eight key points
   ran the text past a thousand pixels while the render stayed 663px, so the
   right hand column was mostly empty paper above and below the picture. It is
   stacked now. The headline and the lead sit side by side, the image runs the
   full width of the container, and the key points fall into two columns beneath
   it. Nothing is left standing in space, and the render is larger than it was.
   Changed 17 September 2026. */
.intro-head { display: grid; grid-template-columns: 1fr; gap: 12px; }
.intro-head .section-lead { margin: 0; }
@media (min-width: 900px) {
  .intro-head { grid-template-columns: 1.08fr .92fr; column-gap: clamp(28px, 4.5vw, 60px); align-items: end; }
  .intro-head .section-lead { padding-bottom: 8px; }
}
.intro-figure { margin-top: clamp(26px, 3.4vw, 42px); }
.intro-figure img { width: 100%; }
/* The Lakeside master plan is close to square, so at full container width it
   would fill a whole screen on its own. It gets a narrower column instead. */
.intro-figure-tall { max-width: 820px; margin-inline: auto; }
/* The grounds photo only exists at 600px wide, so it is capped rather than
   stretched across the full container and blurred. Changed 17 September 2026. */
.intro-figure-mid { max-width: 700px; margin-inline: auto; }
.intro-figure + .key-list { margin-top: clamp(26px, 3.4vw, 40px); }
.key-list + .tag-row { margin-top: clamp(22px, 2.8vw, 32px); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 60px); align-items: center; }
.split-rev > *:first-child { order: 2; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split-rev > *:first-child { order: 0; } }

.gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 34px; }
/* figure is a column so the caption sits inside the frame; height:100% on the
   image used to swallow the whole figure and push the caption out the bottom */
.gallery-grid figure { margin: 0; border: 1px solid var(--line); background: var(--paper-3); display: flex; flex-direction: column; }
.gallery-grid img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.gallery-grid figcaption { margin-top: auto; padding: 10px 14px; font-size: .84rem; color: var(--muted); background: var(--paper); border-top: 1px solid var(--line); }
.g-wide { grid-column: span 3; }
.g-third { grid-column: span 2; }
@media (max-width: 820px) { .gallery-grid { grid-template-columns: 1fr 1fr; } .g-wide, .g-third { grid-column: span 1; } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } }

.amenity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.amenity { border: 1px solid var(--line); background: var(--paper); }
.amenity img { width: 100%; aspect-ratio: 21 / 10; object-fit: cover; }
.amenity p { margin: 0; padding: 13px 16px; font-size: .93rem; color: var(--ink); }
@media (max-width: 820px) { .amenity-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .amenity-grid { grid-template-columns: 1fr; } }

/* Godrej publishes 160x160 icons rather than photographs for the Parkshire
   and Lakeside Orchard amenities, so those two pages set the developer's list
   as text with inline SVG rather than borrowing renders from another project.
   The grid carries no bottom border of its own: the last row supplies it. */
.amn-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; border: 1px solid var(--line-2); border-bottom: 0; }
.amn { display: flex; align-items: center; gap: 13px; padding: 18px 20px; background: var(--paper); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.amn svg { color: var(--clay); flex: none; }
.amn span { font-size: .93rem; color: var(--ink); }
.amn:nth-child(4n) { border-right: 0; }
@media (max-width: 900px) {
  .amn-grid { grid-template-columns: 1fr 1fr; }
  .amn:nth-child(4n) { border-right: 1px solid var(--line-2); }
  .amn:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
  .amn-grid { grid-template-columns: 1fr; }
  .amn:nth-child(n) { border-right: 0; }
}

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.tag-row li { border: 1px solid var(--line-2); padding: 7px 13px; font-size: .87rem; color: var(--muted); }

.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.plan { border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; }
.plan img { width: 100%; aspect-ratio: 1.92 / 1; object-fit: cover; object-position: center; background: var(--paper); }
.plan-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan-body h3 { font-size: 1.06rem; margin: 0; }
/* areas read off the plan itself, so they sit tight under the unit name */
.plan-area { font-size: .86rem; color: var(--muted); margin: -4px 0 0; }
.plan-body .btn { margin-top: auto; padding: 11px 16px; font-size: .9rem; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .plan-grid { grid-template-columns: 1fr; } }

.conn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 34px; border: 1px solid var(--line-2); }
.conn-col { padding: 24px; border-right: 1px solid var(--line-2); }
.conn-col:last-child { border-right: 0; }
.conn-col h3 { font-size: 1.06rem; margin-bottom: 12px; }
.conn-col ul { list-style: none; margin: 0; padding: 0; }
.conn-col li { padding: 9px 0; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); display: flex; justify-content: space-between; gap: 14px; }
.conn-col li span { color: var(--ink); flex: none; }
@media (max-width: 820px) {
  .conn-grid { grid-template-columns: 1fr; }
  .conn-col { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .conn-col:last-child { border-bottom: 0; }
}

.map-frame { margin-top: 30px; border: 1px solid var(--line-2); line-height: 0; }
.map-frame iframe { width: 100%; height: 380px; border: 0; display: block; }

/* enquiry band on project pages */
.enquire { background: var(--ink); color: var(--on-ink); }
.enquire h2 { color: var(--on-ink); }
.enquire p { color: var(--on-ink-muted); }
.enquire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.enquire-form { background: var(--paper); color: var(--text); padding: clamp(22px, 3vw, 32px); }
.enquire-form h3 { margin-bottom: 6px; }
/* the form card is paper inside the ink band, so its type stays ink, not on-ink */
.enquire-form p { color: var(--muted); }
.enquire-form > p { color: var(--muted); font-size: .93rem; margin-bottom: 18px; }
@media (max-width: 820px) { .enquire-grid { grid-template-columns: 1fr; } }

.note-box { border-left: 2px solid var(--clay); padding: 4px 0 4px 18px; margin: 26px 0 0; }
.note-box p { margin: 0; font-size: .92rem; color: var(--muted); }

/* ================= modal ================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: color-mix(in oklch, var(--ink) 62%, transparent);
  backdrop-filter: blur(3px);
}
.modal {
  background: var(--paper); width: 100%; max-width: 430px; padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line-2); max-height: 92vh; overflow-y: auto; position: relative;
}
html.is-locked, body.is-locked { overflow: hidden; }
.modal h3 { margin-bottom: 6px; }
.modal > p { color: var(--muted); font-size: .93rem; margin-bottom: 18px; }
.modal-close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer; color: var(--muted); line-height: 0;
}
@media (hover: hover) { .modal-close:hover { color: var(--ink); } }

/* ================= thank you / privacy ==================================== */
.slab { min-height: 68vh; display: flex; align-items: center; padding: clamp(48px, 8vw, 96px) 0; }
.slab-inner { max-width: 640px; }
.tick { width: 46px; height: 46px; color: var(--clay); margin-bottom: 22px; }
.doc { max-width: 760px; }
.doc h2 { font-size: clamp(1.24rem, 2vw, 1.5rem); margin-top: 34px; }
.doc ul { padding-left: 20px; color: var(--muted); }
.doc li { margin-bottom: 8px; }

/* ================= location map =========================================== */
/* Google Maps embed, lazy so it never competes with the hero. Square edged to
   match the rest of the system, with the frame itself carrying the border. */
.map-wrap {
  margin-top: 30px; border: 1px solid var(--line); background: var(--paper-3);
  position: relative; overflow: hidden;
}
.map-wrap iframe {
  display: block; width: 100%; height: 440px; border: 0;
  filter: saturate(0.88);
}
.map-note {
  font-size: .84rem; color: var(--muted); margin: 12px 0 0;
}
@media (max-width: 640px) { .map-wrap iframe { height: 320px; } }

/* ================= key points and secondary calls to action =============== */
/* Review feedback, 2026-09-16: the early scroll was long descriptive prose.
   The facts that carry a decision are now a scannable list, with the prose cut
   back to the one sentence that frames them. */
.key-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.key-list li {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px;
  align-items: start; font-size: 1rem; color: var(--ink-3); line-height: 1.55;
}
.key-list svg { margin-top: 5px; color: var(--clay); flex: none; }
.key-list b { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) {
  .key-list-2 { grid-template-columns: 1fr 1fr; column-gap: 34px; }
}

/* A second entry point to the form at each section that raises a question the
   form answers, rather than only at the hero and the foot of the page. */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-row .btn { font-size: .93rem; }
@media (max-width: 560px) { .cta-row .btn { flex: 1 1 100%; } }
.cta-note { font-size: .84rem; color: var(--muted); margin: 14px 0 0; }