/* ============================================================================
   Mahindra Navrat Sadahalli — "Atlas"
   First site for Mahindra Lifespaces, so the theme is authored from scratch.

   The system: structural, not decorative. Square corners, hairline rules
   instead of shadows, an edge-to-edge 12-column field, and tabular numerals
   on every figure — a specification sheet that happens to be a website,
   matching a listed developer that publishes its numbers.

   Colour discipline: the nine canonical brand tokens from
   builders/mahindra-lifespaces/mahindra-lifespaces.json plus the two form
   state tokens. Everything else is a derived semantic alias — no literal
   colours below :root except the two scrims, which need alpha.
   ========================================================================== */

:root {
  /* The nine canonical brand tokens */
  --brand-primary:   #dd052b;
  --brand-secondary: #e31837;
  --brand-tertiary:  #171717;
  --dark-primary:    #171717;
  --dark-secondary:  #4a4a4a;
  --dark-tertiary:   #d8d8d8;
  --light-primary:   #f8f8f8;
  --light-secondary: #ffffff;
  --light-tertiary:  #eeeeee;

  /* Form state */
  --state-success: #166534;
  --state-error:   #991b1b;

  /* Semantic aliases — all derived from the eleven above */
  --ink:       var(--dark-primary);
  --ink-soft:  var(--dark-secondary);
  --ink-invert: var(--light-secondary);
  --bg:        var(--light-secondary);
  --tint:      #f6f6f4;                 /* warm neutral field, 1.5% off --light-primary */
  --deep:      var(--dark-primary);
  --rule:      var(--dark-tertiary);
  --rule-soft: #e8e8e6;
  --accent:    var(--brand-primary);
  --accent-hi: var(--brand-secondary);

  /* On the red plinth and on the ink band, links/buttons need their own ink.
     Declared as custom properties so a :hover rule can never be defeated by a
     later equal-specificity context rule repainting the colour. */
  --on-accent: var(--light-secondary);
  --on-deep:   var(--light-secondary);
  --on-deep-soft: #c9c9c9;              /* 8.6:1 on --deep */

  --shell:  1440px;
  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --rhythm: clamp(3.5rem, 7vw, 6.5rem);
  --navh:   72px;
  --radius: 0;

  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --num:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ------------------------------------------------------------------ reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background-color: var(--tint); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hi); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.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-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--deep); color: var(--on-deep);
  padding: 0.75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The field. Sections bleed edge to edge; only the shell is constrained. */
.strip { padding-block: var(--rhythm); background: var(--bg); }
.strip--tint { background: var(--tint); }
.strip--ink  { background: var(--deep); color: var(--on-deep); }
.strip--ink h2, .strip--ink h3 { color: var(--on-deep); }
.strip--ink p { color: var(--on-deep-soft); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: minmax(0, 1fr); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.25; }
h4 { font-size: 1.05rem; letter-spacing: -0.01em; }

.prose > * + *, .article-body > * + * { margin-top: 1.15rem; }
.prose p, .article-body p { max-width: var(--measure); }
.prose h3, .article-body h3 { margin-top: 2.25rem; }
.prose ul, .prose ol, .article-body ul, .article-body ol {
  padding-left: 1.15rem; max-width: var(--measure);
}
.prose li + li, .article-body li + li { margin-top: 0.4rem; }
.prose strong, .article-body strong { font-weight: 650; color: var(--ink); }

/* The opening paragraph of the overview band. It used to live inside the hero
   plinth, which turned a display block into a 688px wall of body copy. */
.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 1.15rem;
}

blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.15rem;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.page-updated {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.page-updated time { font-weight: 600; }
/* No opacity here: white at 92% over the plinth composites to #fcebee, which
   is 4.41:1 — just under AA at this 13px size. Full white is 5.08:1. */
.hero .page-updated { color: var(--on-accent); }

/* --------------------------------------------------------------- nav */

/* Transparent over the hero, solidifies on scroll. The solid state is the
   DEFAULT so a JS-less or slow-hydrating page is legible; script.js removes
   .nav--solid on first paint only when a .hero is actually present. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--navh);
  background: var(--bg);
  border-bottom: 1px solid var(--rule-soft);
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.nav--ghost {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--on-accent);
}

/* The ghost bar's white text sits on whatever the hero photograph happens to
   put under it. Measured on the aerial: 6.86:1 against the mean, but only
   2.63:1 against the brightest sky pixels — i.e. it fails AA exactly where a
   render is blown out. This gradient composites with .hero__scrim's 0.55 top
   stop to an effective ~0.80 alpha, taking the worst case to 4.95:1.
   z-index -1 keeps it behind the bar's own contents; .nav's z-index makes a
   stacking context so it cannot escape upward. */
.nav--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23, 23, 23, 0.62) 0%, rgba(23, 23, 23, 0.55) 100%);
  pointer-events: none;
}

/* The nav is fixed, so the header itself only has to reserve its own height
   for the flow beneath it on pages whose first band is not the full-bleed
   hero. Subpage heads already pad for --navh, so this is just a guard. */
.site-head { position: relative; z-index: 100; }

.nav__inner {
  height: 100%;
  display: flex; align-items: center; gap: 1.25rem;
}

.nav__brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.nav__mark { width: 38px; height: 38px; object-fit: contain; background: none; }
.nav__lockup { display: flex; flex-direction: column; line-height: 1.12; }
/* A whitespace text node between these two blocks keeps the accessible name
   from concatenating as "Mahindra LifespacesNavrat Sadahalli". */
.nav__dev {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: currentColor; opacity: 0.72;
}
.nav__proj { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; }

.nav__links { display: none; list-style: none; padding: 0; gap: 1.4rem; }
.nav__links a {
  color: currentColor; text-decoration: none;
  font-size: 0.9rem; font-weight: 500;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover, .nav__links a.is-active {
  color: currentColor;
  border-bottom-color: var(--accent);
}
.nav--ghost .nav__links a:hover, .nav--ghost .nav__links a.is-active {
  border-bottom-color: var(--on-accent);
}

.nav__cta {
  display: none;
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-size: 0.85rem; font-weight: 650;
  letter-spacing: 0.02em; padding: 0.62rem 1.15rem;
}
.nav__cta:hover { background: var(--accent-hi); color: var(--on-accent); }

.nav__burger {
  width: 44px; height: 44px; margin-left: auto;
  display: grid; place-content: center; gap: 5px;
  background: none; border: 0; color: inherit;
}
.nav__burger span {
  display: block; width: 22px; height: 2px; background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: var(--navh) 0 auto 0; z-index: 99;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem var(--gutter) 1.5rem;
  display: none; flex-direction: column;
}
.nav-drawer.is-open { display: flex; }
.nav-drawer a {
  color: var(--ink); text-decoration: none;
  padding: 0.85rem 0; border-bottom: 1px solid var(--rule-soft);
  font-weight: 550;
}
.nav-drawer a:hover { color: var(--accent); }
.nav-drawer .btn { margin-top: 1.15rem; border-bottom: 0; }
/* `.nav-drawer a` (0,1,1) outranks `.btn--fill` (0,1,0), so without these the
   drawer's Enquire button paints --ink on --accent (3.53:1) and its hover
   paints --accent on --accent (1.00:1 — an invisible button). Re-assert the
   button's own ink at matching specificity. */
.nav-drawer a.btn--fill { color: var(--on-accent); }
.nav-drawer a.btn--fill:hover { background: var(--accent-hi); color: var(--on-accent); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.5rem;
  font-size: 0.9rem; font-weight: 650; letter-spacing: 0.01em;
  text-decoration: none; border: 1px solid transparent;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn--fill  { background: var(--accent); color: var(--on-accent); }
.btn--fill:hover { background: var(--accent-hi); color: var(--on-accent); }

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

/* On the ink band the outline button must not go ink-on-ink. */
.strip--ink .btn--line { color: var(--on-deep); border-color: var(--on-deep); }
.strip--ink .btn--line:hover { background: var(--on-deep); color: var(--deep); }

.btn--light { background: var(--light-secondary); color: var(--deep); }
.btn--light:hover { background: var(--dark-tertiary); color: var(--deep); }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.cta-row--center { justify-content: center; }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: min(88svh, 780px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--navh) + 1.5rem);
  background: var(--deep);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* <picture> is inline by default, so `height: 100%` on the <img> has no
   resolvable parent height and falls back to the intrinsic 1:1 ratio — the
   image renders 1280px tall inside a 930px hero and object-fit never runs. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(23, 23, 23, 0.55) 0%, rgba(23, 23, 23, 0.28) 42%, rgba(23, 23, 23, 0.72) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: 0; }

/* The plinth: a solid brand block the display type sits inside, offset from
   the left edge of the field rather than centred. */
.hero__plinth {
  background: var(--accent);
  color: var(--on-accent);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.hero__eyebrow {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 650; margin-bottom: 0.9rem;
  color: var(--on-accent);
}
.hero__plinth h1 { color: var(--on-accent); max-width: 20ch; }
.hero__plinth h1 em {
  display: block; font-style: normal; font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem); letter-spacing: -0.01em;
  line-height: 1.35; margin-top: 0.9rem; opacity: 0.94;
}
.hero__lead {
  color: var(--on-accent); opacity: 0.95;
  margin-top: 1rem; max-width: 54ch; font-size: 1rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.hero__actions .btn--fill { background: var(--light-secondary); color: var(--accent); }
/* Hover inverts to the ink ground rather than dimming the white: accent on
   --dark-tertiary is only 3.57:1, which fails AA for a control label. */
.hero__actions .btn--fill:hover { background: var(--deep); color: var(--on-deep); }
.hero__actions .btn--line { color: var(--on-accent); border-color: var(--on-accent); }
.hero__actions .btn--line:hover { background: var(--on-accent); color: var(--accent); }

/* Stat rail, flush to the bottom edge of the hero — no side padding, it runs
   the full width of the viewport and is separated only by hairlines. */
.hero__rail {
  position: relative; z-index: 2;
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(23, 23, 23, 0.62);
}
.rail__item {
  padding: 1.1rem var(--gutter);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.rail__n {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--on-accent); line-height: 1.1;
}
.rail__l {
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-deep-soft); margin-top: 0.3rem;
}

/* Subpage head — type only, on the tint field. No image: it is the fastest
   possible LCP and it keeps the photographic weight on the homepage. */
.page-head {
  background: var(--tint);
  border-bottom: 1px solid var(--rule-soft);
  padding-top: calc(var(--navh) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page-head__eyebrow {
  display: block; font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 650; color: var(--accent);
  margin-bottom: 1rem;
}
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); max-width: 22ch; }
.page-head .page-updated { margin-top: 1rem; }
.page-head__lead { margin-top: 1.15rem; max-width: var(--measure); font-size: 1.06rem; color: var(--ink-soft); }
.page-head__bar { width: 88px; height: 4px; background: var(--accent); margin-top: 1.75rem; }

.breadcrumb { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); }

/* -------------------------------------------------------- section heads */

.shead { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.shead__no {
  display: inline-block;
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 650; color: var(--accent); margin-bottom: 0.85rem;
}
.strip--ink .shead__no { color: var(--dark-tertiary); }
.shead__t { max-width: 22ch; }
.shead__bar { width: 88px; height: 4px; background: var(--accent); margin-top: 1.25rem; }
.strip--ink .shead__bar { background: var(--on-deep); }
.shead__lede {
  margin-top: 1.15rem; max-width: var(--measure);
  font-size: 1.05rem; color: var(--ink-soft);
}
.strip--ink .shead__lede { color: var(--on-deep-soft); }

/* ------------------------------------------------------------ fact grid */

.facts { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); }
.fact { padding: 1rem 0; border-bottom: 1px solid var(--rule-soft); }
.fact__k {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.3rem;
}
.fact__v { font-weight: 600; font-variant-numeric: tabular-nums; }

.figs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-top: 2.25rem;
}
.fig { background: var(--bg); padding: 1.35rem 1.25rem; }
.strip--tint .fig { background: var(--tint); }
.fig__n {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1;
}
.fig__l {
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 0.35rem;
}

/* ---------------------------------------------------------- offset cards */

.ocards { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); }
.ocard { display: flex; flex-direction: column; }
.ocard__media { aspect-ratio: 4 / 3; overflow: hidden; }
.ocard__media img { width: 100%; height: 100%; object-fit: cover; }
/* The signature move: the body block is pulled up over its own image. */
.ocard__body {
  background: var(--bg);
  border-top: 3px solid var(--accent);
  padding: 1.4rem 1.5rem 1.5rem;
  margin: -3rem 1.25rem 0 0;
  position: relative; z-index: 1;
}
.strip--tint .ocard__body { background: var(--tint); }
.ocard__body h3 { margin-bottom: 0.6rem; }
.ocard__body p { font-size: 0.95rem; color: var(--ink-soft); max-width: none; }
.ocard__body > * + * { margin-top: 0.85rem; }

/* Textual cards (no image) — hairline blocks on the field. */
.tcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tcard { background: var(--bg); padding: 1.6rem 1.5rem; }
.strip--tint .tcard { background: var(--tint); }
.tcard h3 { margin-bottom: 0.7rem; }
.tcard p { font-size: 0.95rem; color: var(--ink-soft); max-width: none; }
.tcard > * + * { margin-top: 0.8rem; }

/* --------------------------------------------------------------- tables */

.tablewrap { overflow-x: auto; margin-block: 1.5rem; border: 1px solid var(--rule); }
.dtable { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 34rem; }
.dtable th, .dtable td { padding: 0.75rem 0.9rem; text-align: left; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.dtable th {
  background: var(--deep); color: var(--on-deep);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650;
}
.dtable td { font-variant-numeric: tabular-nums; }
.dtable tbody tr:last-child td { border-bottom: 0; }
/* A markdown table inside .prose puts <strong> in the header row, where
   `.prose strong { color: var(--ink) }` targets it directly and so beats the
   colour the <th> merely passes down by inheritance — ink on the ink-filled
   header is 1.00:1, i.e. the label disappears. Same trap on any dark band. */
.dtable th strong, .dtable th em, .dtable th a { color: inherit; }
.strip--ink strong, .strip--ink em { color: var(--on-deep); }

/* ----------------------------------------------------------- floor plans */

.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.plan { background: var(--bg); }
.strip--tint .plan { background: var(--tint); }
.plan__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.plan__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.15rem 1.25rem; }
.plan__name { font-weight: 700; letter-spacing: -0.02em; }
.plan__area { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- gallery */

.shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.shot { background: var(--bg); margin: 0; }
.strip--tint .shot { background: var(--tint); }
.shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.shot figcaption { padding: 0.95rem 1.15rem 1.25rem; font-size: 0.88rem; color: var(--ink-soft); }
.shot figcaption strong {
  display: block; color: var(--ink); font-weight: 650;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.35rem;
}

/* ------------------------------------------------------------ amenities */

.amens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); list-style: none; padding: 0; }
.amen { background: var(--bg); padding: 0.85rem 1rem; font-size: 0.9rem; }
.strip--tint .amen { background: var(--tint); }

/* ---------------------------------------------------------------- price */

.pcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pcard { background: var(--bg); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; }
.strip--tint .pcard { background: var(--tint); }
.pcard--lead { border-top: 4px solid var(--accent); }
.pcard__cfg { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.pcard__area { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.02em; }
.pcard__amt { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 650; margin-top: 0.35rem; }
.pcard__note { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); min-height: 1.1em; }
.pcard .btn { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------------------ map */

.mapcard { display: block; position: relative; text-decoration: none; border: 1px solid var(--rule); }
.mapcard img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.mapcard__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--accent); color: var(--on-accent);
  font-size: 0.78rem; font-weight: 650; letter-spacing: 0.02em;
  padding: 0.6rem 1rem;
}
.mapcard:hover .mapcard__tag { background: var(--accent-hi); color: var(--on-accent); }

.mp-img { width: 100%; border: 1px solid var(--rule); }

/* ------------------------------------------------------------------ faq */

.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule-soft); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  background: none; border: 0; padding: 1.15rem 0;
  text-align: left; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1.4;
}
.faq-q:hover { color: var(--accent); }
.faq-icon {
  flex: 0 0 auto; font-family: var(--num); font-size: 1.3rem; line-height: 1;
  color: var(--accent); transition: transform 200ms ease;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
/* Height is animated on max-height, never on grid-template-rows: 0fr -> 1fr
   is not reliably interpolable and leaves the panel pinned shut. */
.faq-a { max-height: 0; overflow: hidden; transition: max-height 260ms ease; }
.faq-item.is-open .faq-a { max-height: 240rem; }
.faq-a > div { padding: 0 0 1.35rem; color: var(--ink-soft); max-width: var(--measure); }
.faq-a p + p { margin-top: 0.9rem; }

/* ----------------------------------------------------------------- form */

.form-panel { background: var(--bg); border: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.25rem); }
.strip--tint .form-panel { background: var(--bg); }
.strip--ink .form-panel { background: var(--bg); color: var(--ink); }
.strip--ink .form-panel h2, .strip--ink .form-panel p { color: var(--ink); }
.form-panel h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.form-panel > p { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.95rem; }

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; margin-top: 1.4rem; }
.fg { display: flex; flex-direction: column; gap: 0.3rem; }
.fg--full { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea {
  width: 100%; padding: 0.8rem 0.9rem;
  background: var(--light-secondary); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.form-grid input::placeholder, .form-grid textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.form-grid input:focus, .form-grid textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.form-grid button[type="submit"] { grid-column: 1 / -1; justify-content: center; }

.field-error { font-size: 0.8rem; color: var(--state-error); min-height: 1em; }
.form-status { grid-column: 1 / -1; padding: 0.75rem 0.9rem; font-size: 0.9rem; border: 1px solid var(--rule); }
.form-status.is-success { color: var(--state-success); border-color: var(--state-success); }
.form-status.is-error { color: var(--state-error); border-color: var(--state-error); }
.form-note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--ink-soft); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- footer */

.foot { background: var(--deep); color: var(--on-deep-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.foot__brand a { text-decoration: none; color: var(--on-deep); display: inline-flex; flex-direction: column; line-height: 1.15; }
.foot__dev { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; opacity: 0.78; }
.foot__proj { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.foot p { font-size: 0.9rem; margin-top: 1rem; max-width: 46ch; }
.foot__disc { font-size: 0.78rem; opacity: 0.82; }
.foot__disc strong { color: var(--on-deep); }
.foot__col { min-width: 0; }
.foot h2 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-deep); font-weight: 650; }
.foot__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; margin-top: 1rem; }
.foot__links a, .foot__bottom a { color: var(--on-deep-soft); text-decoration: none; font-size: 0.9rem; }
.foot__links a:hover, .foot__bottom a:hover { color: var(--on-deep); text-decoration: underline; }
.foot p a { color: var(--on-deep); text-decoration: underline; text-underline-offset: 2px; }
.foot__bottom {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-direction: column; gap: 0.75rem;
  font-size: 0.82rem;
}
.foot__bottom p { margin-top: 0; }
.foot__bottom-links { display: flex; gap: 1.25rem; }

.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 44px; height: 44px;
  background: var(--deep); color: var(--on-deep);
  border: 0; font-size: 1.1rem; line-height: 1;
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--accent); color: var(--on-accent); }

/* ------------------------------------------------------------------ 404 */

.notfound { padding-top: calc(var(--navh) + 4rem); }

/* --------------------------------------------------------- breakpoints */
/* Two-tier: 640 (phone -> small tablet) and 1024 (nav collapse). */

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .fact:nth-child(odd) { padding-right: 1rem; }
  .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ocards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 1025px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
  .nav-drawer { display: none !important; }

  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .grid--sidebar.grid--flip > :first-child { order: 2; }

  /* The sidebar column is a single image beside a long table: at 1.35fr/1fr the
     prose runs well past it, so the image scrolled away and the reader lost the
     plan they were reading the numbers against. Stick it instead. Matching the
     column that HOLDS the image, not the image, keeps it out of flow-sensitive
     children; the map's is wrapped in the Google Maps <a>, so match that too. */
  .grid--sidebar > div:has(> img, > a > img, > picture > img) {
    position: sticky;
    top: calc(var(--navh) + 1.5rem);
    align-self: start;
  }

  .ocards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .amens { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; }
  .foot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* ==== contact-modal (fleet rollout — see tooling/add-contact-modal.mjs) ==== */
.cm-modal {
    /* Re-assert the UA's dialog centering: universal "* { margin: 0 }" resets
       (sattva/purva families and others) strip it, pinning the dialog top-left. */
    margin: auto;
    width: min(100%, 28rem);
    padding: 1rem;
    border: 0;
    background: transparent;
    overscroll-behavior: contain;
    --cm-accent: var(--brand-primary, #dd052b);
    --cm-ink: #ffffff;
}

/* Browsers without <dialog> ignore [open] and would render the form inline. */
.cm-modal:not([open]) {
    display: none;
}

/* Literal scrim: ::backdrop cannot reliably see page custom properties. */
.cm-modal::backdrop {
    background: rgba(15, 23, 42, 0.6);
}

.cm-modal__panel {
    position: relative;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #1f2937;
    font-family: inherit;
    box-shadow: 0 20px 25px rgba(15, 23, 42, 0.15);
}

.cm-modal__title {
    margin: 0 0 1.25rem;
    padding-right: 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937;
}

.cm-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.cm-modal__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cm-modal__close:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 2px;
}

.cm-form {
    display: grid;
    gap: 1rem;
}

.cm-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

.cm-form__field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
}

/* Form controls don't inherit fonts — font: inherit closes the gap. */
.cm-form input,
.cm-form textarea {
    width: 100%;
    min-width: 0;
    font: inherit;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.cm-form input:focus-visible,
.cm-form textarea:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 1px;
}

.cm-form textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.cm-form__submit {
    border: 0;
    border-radius: 6px;
    background: var(--cm-accent);
    color: var(--cm-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.cm-form__submit:hover {
    opacity: 0.92;
}

.cm-form__submit:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
}

.cm-form__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #64748b;
}

.cm-form__hint a {
    color: inherit;
    text-decoration: underline;
}

/* Class-based, so it cannot fight any inline body.style.overflow use. */
body.has-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .cm-modal[open] {
        animation: cm-modal-in 160ms ease-out;
    }

    .cm-modal[open]::backdrop {
        animation: cm-modal-backdrop-in 160ms ease-out;
    }
}

@keyframes cm-modal-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@keyframes cm-modal-backdrop-in {
    from {
        opacity: 0;
    }
}