/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram (one persistent operational model, scroll-synced) · theme: custom, brand-locked (Optiflow v3: graphite, process white, flow teal, copper) · enrichment: bespoke WebGL scale model · nav: N5 floating bar · footer: Ft5 statement
 * tone: technical, practical · anchor hue: teal 202 · pre-emit critique: P5 H5 E4 S5 R4 V5 */

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-lg));
  -webkit-text-size-adjust: 100%;
}
/* Wide screens scale as one piece. The root size grows from 16 px at 1440 px to
   22 px, so type, spacing, the container and the model keep their proportions
   instead of leaving a small page floating in a wide window. */
@media (min-width: 1440px) {
  html { font-size: clamp(100%, 0.8333vw + 4px, 137.5%); }
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--text-body) / var(--leading-body) var(--font-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Touch: no grey flash and no double-tap zoom on controls; pressed states give the feedback. */
a, button, label, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
::selection { background: var(--color-mint); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--space-sm); top: -4rem; z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-on-night);
  border-radius: var(--radius-control);
}
.skip-link:focus { top: var(--space-sm); }

/* ---------- Controls ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 3.25rem; padding: 0 var(--space-md);
  border: var(--rule) solid transparent; border-radius: var(--radius-control);
  font-weight: 600; font-size: 1rem; line-height: 1.2; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.button:active { transform: translateY(1px); }
.button--primary { background: var(--color-ink); color: var(--color-on-night); }
@media (hover: hover) { .button--primary:hover { background: var(--color-teal-deep); } }
.button--primary .icon { transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .button--primary:hover .icon { transform: translateX(3px); } }
.button--ghost { border-color: var(--color-muted); color: var(--color-ink); background: transparent; }
@media (hover: hover) { .button--ghost:hover { border-color: var(--color-ink); background: var(--color-paper-2); } }
.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 0; border: 0; background: none; font-weight: 600; color: var(--color-teal-deep);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .text-link:hover { text-decoration-color: currentColor; } }
.text-link .icon { width: 1.1em; height: 1.1em; }
/* The hero's call button names the number where there is room for it. */
.call-short, .cta-short { display: none; }
/* Phones drop "Get a", and the service's full name may take two lines, so the
   offer and Call still sit side by side. "Operational" stays: alone, "health
   check" reads as medical. */
@media (max-width: 767px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .button--primary { min-width: 0; max-width: 100%; white-space: normal; text-align: left; padding-block: var(--space-2xs); }
}

/* ---------- Header: a floating bar that stays within reach ---------- */
.site-header { position: fixed; inset: var(--space-xs) var(--space-xs) auto; z-index: var(--z-sticky); pointer-events: none; }
.header-bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-md);
  /* Inset by --space-xs, so padding of (gutter − xs) puts the logo and the CTA on the container edges. */
  max-width: calc(var(--container) + 2 * var(--gutter) - 2 * var(--space-xs)); height: var(--header-h); margin: 0 auto; padding: 0 calc(var(--gutter) - var(--space-xs));
  background: color-mix(in oklch, var(--color-paper) 94%, transparent);
  border: var(--rule) solid var(--color-rule); border-radius: var(--radius-panel);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--color-ink) 6%, transparent);
}
.brand { display: block; flex: none; color: var(--color-ink); }
.wordmark { display: block; width: 11.25rem; height: auto; aspect-ratio: 715 / 103; }
.site-nav { display: flex; gap: var(--space-md); margin-left: auto; }
.site-nav a, .header-phone {
  font-size: 0.9375rem; color: var(--color-ink-2); white-space: nowrap;
  padding: var(--space-2xs) 0; transition: color var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .site-nav a:hover, .header-phone:hover { color: var(--color-teal-deep); } }
.header-phone { display: inline-flex; align-items: center; gap: var(--space-2xs); padding-left: var(--space-md); border-left: var(--rule) solid var(--color-rule); }
.header-phone .icon { width: 1.1em; height: 1.1em; color: var(--color-teal); }
.header-cta { min-height: 2.75rem; padding: 0 var(--space-sm); font-size: 0.9375rem; }
.menu-button { display: none; }
.menu-sheet {
  pointer-events: auto;
  display: grid; gap: var(--space-2xs);
  max-width: calc(var(--container) + 2 * var(--gutter) - 2 * var(--space-xs)); margin: var(--space-2xs) auto 0; padding: var(--space-md) calc(var(--gutter) - var(--space-xs));
  background: var(--color-paper); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-panel);
}
.menu-sheet[hidden] { display: none; }
.menu-sheet > a:not(.button) { padding: var(--space-xs) 0; font-size: 1.125rem; font-weight: 600; border-bottom: var(--rule) solid var(--color-rule); }
.menu-sheet .button { margin-top: var(--space-sm); }
.menu-sheet .menu-phone { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); border: 0; font-weight: 400; color: var(--color-ink-2); }

/* ---------- The story: one persistent model beside the reading column ---------- */
.story { position: relative; }
.stage { position: relative; background: var(--color-paper); }
.stage-canvas { position: absolute; inset: 0; }
.stage-canvas canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--ease-out); }
.stage.is-ready .stage-canvas canvas { opacity: 1; }
.stage-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.stage-fallback {
  position: absolute; inset: 12% 8%; width: 84%; height: 76%; margin: auto;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-long) var(--ease-out);
}
.stage.is-unavailable .stage-fallback, .stage.is-fallback .stage-fallback { opacity: 1; }
/* With data saving on, the live models wait to be asked for. */
.stage-load {
  position: absolute; left: 50%; bottom: var(--space-sm); translate: -50% 0; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 2.75rem; padding: 0 var(--space-sm);
  border: var(--rule) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper);
  font-size: 0.875rem; font-weight: 600;
}
.case-stage .stage-load { top: 50%; bottom: auto; translate: -50% -50%; border-color: var(--color-muted-night); background: var(--color-night); color: var(--color-on-night); }
.fb-lane { fill: none; stroke: var(--color-ink-2); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.fb-rework { fill: none; stroke: var(--color-copper); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 10; }
.fb-steps rect { fill: var(--color-night-2); }
.fb-queue rect { fill: var(--color-paper); stroke: var(--color-copper); stroke-width: 2; }
.fb-text text { font: 12px var(--font-mono); fill: var(--color-ink-2); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.06em; }
.fb-text .fb-callout { fill: var(--color-copper-text); text-transform: none; letter-spacing: 0; font-size: 13px; text-anchor: end; }
/* The schematic scales down with a phone's band; its words must not. */
@media (max-width: 767px) {
  .fb-text text { font-size: 20px; }
  .fb-text .fb-callout { font-size: 21px; }
}

/* Labels projected from the 3D model */
.stage-label, .stage-callout, .stage-pin, .stage-util {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
}
.stage-label {
  translate: -50% -100%;
  font: 0.6875rem/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-ink-2);
  text-shadow: 0 0 3px var(--color-paper), 0 0 6px var(--color-paper), 0 0 10px var(--color-paper);
  transition: color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.stage-label.is-constraint { color: var(--color-copper-text); }
/* In the hero, stations on the model are buttons (pointer users; the panel serves everyone). */
.stage.is-playable .stage-label.is-station {
  pointer-events: auto; cursor: pointer;
  padding: var(--space-3xs) var(--space-2xs); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-control);
  background: color-mix(in oklch, var(--color-paper) 92%, transparent); text-shadow: none;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.stage.is-playable .stage-label.is-station::before { content: '+ '; color: var(--color-teal-deep); }
.stage.is-playable .stage-label.is-station.is-added::before { content: '✓ '; }
@media (hover: hover) { .stage.is-playable .stage-label.is-station:hover { border-color: var(--color-teal); color: var(--color-teal-deep); } }
.stage.is-playable .stage-label.is-constraint { border-color: var(--color-copper); }
.stage.is-compact .stage-label { letter-spacing: 0.05em; }
/* On a small stage, labels that would overlap a more telling one fade out. */
.stage-labels .is-culled { opacity: 0 !important; pointer-events: none !important; }
.stage-label.is-hover { color: var(--color-teal-deep); }
.stage-callout {
  translate: -50% calc(-100% - 0.5rem);
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-control);
  background: var(--color-night); color: var(--color-on-night);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.2;
  opacity: 0; transition: opacity var(--dur-long) var(--ease-out);
}
.stage-callout::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-copper); }
.stage-callout.is-visible { opacity: 1; }
/* A symptom's callout reads as one unit with its numbered pin. */
.stage-callout.is-beside { z-index: 1; translate: 0 -50%; max-width: 11rem; white-space: normal; text-wrap: balance; }
.stage-pin {
  translate: -50% -50%;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--color-night); color: var(--color-on-night);
  font: 600 0.8125rem/1 var(--font-body);
  box-shadow: 0 0 0 3px var(--color-paper);
  /* Grow by size, not scale: scale would also multiply the projected position set in transform. */
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out), width var(--dur-short) var(--ease-out), height var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
/* The other symptoms stay on the map, quieter than the one being read. */
.stage-pin.is-visible { opacity: 0.6; width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
.stage-pin.is-visible.is-active { opacity: 1; }
.stage-pin.is-active { z-index: 2; background: var(--color-teal); width: 2.125rem; height: 2.125rem; font-size: 0.9375rem; }
/* The part being followed round the rework loop. */
.stage-tag {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  translate: -50% -100%;
  padding: 0.125rem 0.375rem; border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-copper-text); box-shadow: 0 0 0 1px var(--color-copper);
  font: 600 0.6875rem/1.2 var(--font-body);
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.stage-tag.is-visible { opacity: 1; }
.stage-tag.is-twice { background: var(--color-copper); color: var(--color-night); }
/* Utilisation: a labelled bar under each step. */
.stage-util {
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.1875rem;
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out);
}
.stage-util b {
  font: 0.5625rem/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 400;
  color: var(--color-ink-2); text-shadow: 0 0 3px var(--color-paper), 0 0 6px var(--color-paper);
}
.util-track {
  display: block; width: 3.25rem; height: 0.3125rem; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--color-steel); box-shadow: 0 0 0 2px var(--color-paper);
}
.stage-util i { display: block; height: 100%; border-radius: inherit; background: var(--color-teal); transform-origin: left; transform: scaleX(var(--u, 0)); transition: transform var(--dur-long) var(--ease-out); }
.stage-util.is-visible { opacity: 1; }
/* Output against the work coming in: the copper remainder is the shortfall. */
.stage-util.is-output b { color: var(--color-copper-text); font-weight: 600; }
.stage-util.is-output .util-track { width: 5.5rem; height: 0.5rem; background: var(--color-copper); }
.stage-util.is-output i { border-radius: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: var(--z-base); padding: calc(var(--header-h) + clamp(3rem, 11vh, 7.5rem)) var(--pad-x) clamp(2rem, 5vh, 3.5rem); }
.hero-copy { max-width: 38rem; }
.hero h1 { font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.hero h1 .accent { display: block; color: var(--color-teal); }
.lede { margin-top: var(--space-md); max-width: 32rem; font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.25rem); line-height: 1.55; color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.hero-note { margin-top: var(--space-sm); font-size: var(--text-small); color: var(--color-muted); }
.scroll-cue { display: none; }

/* The "try it" instrument, inside the last beat of the pace chapter */
.try { padding-bottom: var(--space-2xs); }
.try-lede { color: var(--color-ink-2); }
.try-steps { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }
.try-steps button {
  position: relative; min-height: 2.5rem; padding: 0 var(--space-xs);
  border: var(--rule) solid var(--color-muted); border-radius: var(--radius-control); background: transparent;
  font-size: 0.875rem; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.try-steps button:active, .tool:active, .tour-button:active { transform: scale(0.96); }
.try-steps button::before {
  content: '+'; display: inline-block; width: 0.9em; margin-right: 0.2em; font-weight: 600; color: var(--color-teal-deep);
}
@media (hover: hover) { .try-steps button:hover { border-color: var(--color-ink); background: var(--color-paper-2); } }
.try-steps button[aria-pressed='true'] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-night); }
.try-steps button[aria-pressed='true']::before { content: '✓'; color: var(--color-mint); }
.try-steps button.is-constraint::after {
  content: ''; position: absolute; top: -0.25rem; right: -0.25rem; width: 0.625rem; height: 0.625rem;
  border-radius: 50%; background: var(--color-copper); box-shadow: 0 0 0 2px var(--color-paper);
}
.try-readout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); font-size: var(--text-small); }
.try-label { color: var(--color-muted); }
.try-meter { position: relative; height: 0.5rem; border-radius: var(--radius-pill); background: var(--color-steel); }
.try-meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.try-meter [data-meter] { width: 100%; background: var(--color-teal); transform-origin: left; transform: scaleX(var(--out, 0.5)); transition: transform 700ms var(--ease-out); }
.try-meter [data-meter-base] { z-index: 1; left: calc(var(--base, 0.5) * 100%); width: 2px; margin-left: -1px; background: var(--color-ink); border-radius: 0; inset-block: -0.25rem; }
.try-change { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 7.5rem; text-align: right; }
.try-message { margin-top: var(--space-sm); min-height: 3.2em; font-size: 0.9375rem; line-height: 1.5; color: var(--color-ink-2); }
.try-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: var(--rule) solid var(--color-rule); }
.tool {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 2.25rem; padding: 0;
  border: 0; background: none; font-size: var(--text-small); color: var(--color-ink-2);
}
@media (hover: hover) { .tool:hover { color: var(--color-teal-deep); } }
.tool .icon { width: 1.05em; height: 1.05em; }
.try-note { margin-left: auto; font-size: var(--text-label); color: var(--color-muted); }

/* ---------- Chapters inside the story ---------- */
.chapter { position: relative; z-index: var(--z-base); padding: var(--space-3xl) var(--pad-x) var(--space-2xl); }
.chapter-head { max-width: 34rem; }
.chapter-head h2, .case-head h2, .kunj h2, .faq h2, .contact h2 { font-size: var(--text-h2); line-height: 1.08; letter-spacing: -0.03em; }
.chapter-head p { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: 1.125rem; }
.rail-markers { display: none; }

/* A rail: every item stays visible; the current one is marked (and, on wide
   screens, the only one open). */
.rail { position: relative; max-width: 34rem; margin-top: var(--space-xl); }
.beat, .step { position: relative; padding: var(--space-sm) 0 var(--space-sm) var(--space-md); border-left: 2px solid var(--color-rule); transition: border-color var(--dur-long) var(--ease-out); }
.beat.is-current, .step.is-current { border-left-color: var(--color-teal); }
.beat h3, .step h3 { font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.rail-jump { display: flex; align-items: baseline; gap: var(--space-sm); width: 100%; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-align: left; color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.is-current > h3 .rail-jump { color: var(--color-ink); }
@media (hover: hover) { .rail-jump:hover { color: var(--color-ink); } }
.rail-num { flex: none; font: 0.875rem/1.5 var(--font-mono); letter-spacing: 0; color: var(--color-muted); }
.step.is-current .rail-num { color: var(--color-teal-deep); }
.rail-dot { flex: none; align-self: center; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-rule); transition: background-color var(--dur-short) var(--ease-out), scale var(--dur-short) var(--ease-out); }
.beat.is-current .rail-dot { background: var(--color-copper); scale: 1.25; }
.rail-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
.rail-body > div { overflow: hidden; min-height: 0; padding-left: calc(0.875rem * 1.2 + var(--space-sm)); }
.beat .rail-body > div { padding-left: calc(0.5rem + var(--space-sm)); }
.rail-body p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.step .step-output { margin-top: var(--space-sm); color: var(--color-ink); font-size: 0.9375rem; }
.step-output span, .beat-result span { display: block; margin-bottom: var(--space-3xs); font: 0.6875rem/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.rail-body .beat-result { display: flex; align-items: baseline; gap: var(--space-sm); margin-top: var(--space-sm); }
.beat-result span { margin: 0; }
.beat-result strong { font-size: clamp(1.5rem, 1vw + 1rem, 2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.story-end { max-width: 34rem; margin-top: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule) solid var(--color-rule); font-size: 1.125rem; font-weight: 600; }
.story-end .text-link { margin-top: var(--space-xs); font-size: 1rem; }

/* Symptoms: a checklist that doubles as a rail. */
.symptom-list { display: grid; gap: var(--space-2xs); max-width: 34rem; margin-top: var(--space-xl); }
.symptom { position: relative; }
.symptom input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.symptom label {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 1.5rem; align-items: center; column-gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs);
  border: var(--rule) solid var(--color-rule); border-radius: var(--radius-panel);
  background: color-mix(in oklch, var(--color-paper) 94%, transparent);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.symptom.is-current label { border-color: var(--color-muted); }
.symptom label:active { background: color-mix(in oklch, var(--color-teal) 6%, var(--color-paper)); }
@media (hover: hover) { .symptom label:hover { border-color: var(--color-muted); } }
.symptom input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.symptom input:checked + label { border-color: var(--color-teal); background: color-mix(in oklch, var(--color-teal) 7%, var(--color-paper)); }
.symptom-pin {
  grid-row: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--color-night); color: var(--color-on-night); font-size: 0.8125rem; font-weight: 600;
  transition: background-color var(--dur-short) var(--ease-out);
}
.symptom.is-current .symptom-pin { background: var(--color-teal); }
.symptom-title { grid-column: 2; grid-row: 1; font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
.symptom-body { grid-column: 2 / 4; grid-row: 2; display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
.symptom-body > span { display: grid; gap: var(--space-3xs); overflow: hidden; min-height: 0; }
.symptom-eg { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); column-gap: var(--space-2xs); font-size: 0.9375rem; line-height: 1.45; color: var(--color-ink-2); }
.symptom-eg:first-child { padding-top: var(--space-2xs); }
.symptom-eg .sector { padding-top: var(--space-3xs); font: 0.6875rem/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.tick {
  grid-column: 3; grid-row: 1; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border: 1.5px solid var(--color-muted); border-radius: 0.3rem; color: transparent;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.tick .icon { width: 1rem; height: 1rem; }
.symptom input:checked + label .tick { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-paper); }
.symptom-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-md); max-width: 34rem; margin-top: var(--space-md); color: var(--color-ink-2); font-size: 0.9375rem; }

/* ---------- Services: what can be hired ---------- */
.services { padding: var(--space-3xl) var(--pad-x); background: var(--color-steel); }
.services-head h2 { font-size: var(--text-h2); line-height: 1.08; letter-spacing: -0.03em; }
.services-head p { margin-top: var(--space-sm); font-size: 1.125rem; color: var(--color-ink-2); }
.service-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-top: var(--space-xl); }
.service { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-panel); background: var(--color-paper); }
.service h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: var(--tracking-heading); }
.service p { color: var(--color-ink-2); }
/* The way in leads, in graphite, with its action. */
.service--lead { background: var(--color-night); color: var(--color-on-night); }
.service--lead p { color: var(--color-muted-night); }
.service--lead .text-link { margin-top: auto; padding-top: var(--space-xs); color: var(--color-mint); }
.service--lead :focus-visible { outline-color: var(--color-focus-night); }
.services-more { margin-top: var(--space-lg); color: var(--color-ink-2); }
.services-more span { margin-right: var(--space-xs); font-weight: 600; color: var(--color-ink); }
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .services-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); align-items: end; }
  .services-head h2 { grid-column: 1 / span 5; }
  .services-head p { grid-column: 7 / -1; margin: 0; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--column-gap); }
}

/* ---------- Case study (research lab: graphite) ---------- */
.case { background: var(--color-night); color: var(--color-on-night); padding: var(--space-3xl) var(--pad-x); }
.case :focus-visible { outline-color: var(--color-focus-night); }
.case h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.case-head { display: grid; gap: var(--space-md); }
.evidence-tag { display: inline-flex; align-items: center; gap: var(--space-2xs); font: 0.75rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted-night); }
.evidence-tag span { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-muted-night); }
.case-lede { max-width: 42rem; font-size: 1.125rem; color: var(--color-muted-night); }

/* The three problems, numbered as they are pinned on the model. */
.case-problems { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule) solid var(--color-rule-night); }
.problem-list { display: grid; gap: var(--space-md) var(--column-gap); margin-top: var(--space-md); }
.problem-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-xs); align-content: start; }
.problem-list li > p { grid-column: 2; color: var(--color-muted-night); font-size: 0.9875rem; }
.problem-list strong { color: var(--color-on-night); font-weight: 600; }
.pnum, .case-stage .stage-label[data-n]::before {
  display: inline-grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--color-copper); color: var(--color-on-night); font-family: var(--font-body); font-weight: 600;
}
.pnum { grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; font-size: 0.8125rem; line-height: 1; }
.problem-cause { margin-top: var(--space-2xs); font-size: 0.875rem !important; }
.problem-cause span { margin-right: var(--space-2xs); font: 0.6875rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mint); }

/* The lab: model and scenarios side by side, so cause and effect are seen together. */
.case-lab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); align-items: start; }
.case-stage { position: relative; width: 100%; height: clamp(24rem, 38vw, 36rem); max-height: 74svh; border-radius: var(--radius-panel); background: var(--color-night-2); overflow: hidden; }
.case-stage .stage-canvas canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--ease-out); }
.case-stage.is-ready .stage-canvas canvas { opacity: 1; }
.case-stage .stage-label {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.5rem;
  font-size: 0.75rem; color: var(--color-muted-night); text-shadow: none;
  background: color-mix(in oklch, var(--color-night) 82%, transparent); border-radius: var(--radius-control);
}
.case-stage .stage-label[data-n]::before { content: attr(data-n); width: 1.125rem; height: 1.125rem; font-size: 0.6875rem; letter-spacing: 0; }
.case-stage .stage-label.is-problem { color: var(--color-copper); }
.case-stage .stage-label.is-fixed { color: var(--color-mint); }
.case-stage .stage-label.is-fixed[data-n]::before { border-color: var(--color-mint); }
.case-stage .stage-label--group { padding: 0; background: none; font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--color-on-night); }
.case-stage-note { margin-top: var(--space-sm); font-size: 0.8125rem; line-height: 1.5; color: var(--color-muted-night); }
.key { display: inline-flex; align-items: center; gap: var(--space-3xs); margin-right: var(--space-sm); color: var(--color-on-night); }
.key::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 2px; }
.key--problem::before { background: var(--color-copper); }
.key--fixed::before { background: var(--color-mint); }

/* Scenarios: the choice and the full results table are one element. */
.scenarios { min-width: 0; margin: 0; padding: 0; border: 0; }
.scenarios-title { padding: 0; font-size: var(--text-h3); font-weight: 600; letter-spacing: var(--tracking-heading); }
.scenarios-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); margin-top: var(--space-3xs); color: var(--color-muted-night); font-size: 0.9375rem; }
.tour-button {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0 var(--space-xs);
  border: var(--rule) solid var(--color-rule-night); border-radius: var(--radius-pill); background: none;
  color: var(--color-on-night); font: 600 0.8125rem/1 var(--font-body); cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .tour-button:hover { border-color: var(--color-mint); } }
.tour-icon { width: 0; height: 0; border-style: solid; border-width: 0.3125rem 0 0.3125rem 0.5rem; border-color: transparent transparent transparent var(--color-mint); }
.tour-button[aria-pressed='true'] .tour-icon { width: 0.5625rem; height: 0.5625rem; border: 0; border-radius: 1px; background: var(--color-mint); }
/* While the tour plays, the chosen row shows how long it will hold. */
.is-touring .scn:has(input:checked)::after {
  content: ''; position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: 0.3125rem; height: 2px;
  border-radius: var(--radius-pill); background: var(--color-mint); opacity: 0.55; transform-origin: left;
  animation: tour-hold var(--tour-hold, 0ms) linear forwards;
}
@keyframes tour-hold { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scn-head, .scn { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-sm); }
.scn-head { margin-top: var(--space-md); padding: 0 var(--space-xs) var(--space-2xs); font: 0.6875rem/1.35 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted-night); border-bottom: var(--rule) solid var(--color-rule-night); }
.scn {
  position: relative; align-items: center; margin-top: var(--space-3xs); padding: var(--space-xs);
  border: var(--rule) solid transparent; border-radius: var(--radius-control); cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .scn:hover { background: var(--color-night-2); } }
.scn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scn:active { background: var(--color-night-2); }
.scn:has(input:focus-visible) { outline: 2px solid var(--color-focus-night); outline-offset: 2px; }
.scn:has(input:checked) { background: var(--color-night-2); border-color: var(--color-mint); }
.scn-name b { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.scn-name b::before { content: ''; flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 1.5px solid var(--color-muted-night); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.scn:has(input:checked) .scn-name b::before { background: var(--color-mint); border-color: var(--color-mint); }
.scn-name small { display: block; margin-top: var(--space-3xs); padding-left: 1.125rem; font: 0.6875rem/1.35 var(--font-mono); color: var(--color-muted-night); }
/* Each result is a word with a mark: neutral for the starting point, Light Teal
   where the scenario improves it, copper where it leaves the problem in place. */
.scn-val { position: relative; padding-left: 0.875rem; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.scn-val::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--color-muted-night); }
.scn-val.is-base { font-weight: 400; }
.scn-val.is-better { color: var(--color-mint); }
.scn-val.is-better::before { background: var(--color-mint); }
.scn-val.is-same { color: var(--color-copper); }
.scn-val.is-same::before { background: var(--color-copper); }
.case-insight { margin-top: var(--space-md); min-height: 4.5em; font-size: 1rem; line-height: 1.5; color: var(--color-on-night); }
.scn-notes { display: grid; gap: var(--space-3xs); margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: var(--rule) solid var(--color-rule-night); font-size: 0.8125rem; line-height: 1.5; color: var(--color-muted-night); }

/* Close: how we know, and the judgement. */
.case-close { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule) solid var(--color-rule-night); }
.case-block h3 { margin-bottom: var(--space-sm); }
.case-block p, .case-block li { color: var(--color-muted-night); font-size: 0.9875rem; }
.evidence-list li, .tradeoff-list li { position: relative; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md); border-bottom: var(--rule) solid var(--color-rule-night); }
.evidence-list li::before, .tradeoff-list li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 0.4rem; height: 0.4rem; border-radius: 1px; background: var(--color-mint); }
.conclusion { margin-bottom: var(--space-xs); font-size: 1.25rem !important; line-height: 1.5; color: var(--color-on-night) !important; }
.case-lesson { margin-top: var(--space-sm); color: var(--color-on-night) !important; font-weight: 600; }
.limits { margin-top: var(--space-md); border-top: var(--rule) solid var(--color-rule-night); }
.limits summary { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; cursor: pointer; font-weight: 600; list-style: none; }
.limits summary::-webkit-details-marker { display: none; }
.limits summary::after { content: '+'; font-size: 1.25rem; color: var(--color-mint); transition: transform var(--dur-short) var(--ease-out); }
.limits[open] summary::after { transform: rotate(45deg); }
.limits p { margin-top: var(--space-xs); font-size: 0.875rem !important; }
.limits cite { font-style: italic; }

/* ---------- Kunj ---------- */
.kunj { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: var(--space-3xl) var(--pad-x) var(--space-2xl); }
.portrait { width: 100%; max-width: 30rem; }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-panel); background: var(--color-steel); }
.portrait figcaption { margin-top: var(--space-xs); font: 0.75rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.kunj-lede { margin-top: var(--space-md); font-size: 1.125rem; color: var(--color-ink-2); max-width: var(--measure); }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-lg); margin-top: var(--space-lg); max-width: 36rem; }
.principles li { padding: var(--space-xs) 0; border-top: var(--rule) solid var(--color-rule); font-weight: 600; }
.kunj-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-lg); color: var(--color-ink-2); font-size: 0.9375rem; }

/* ---------- FAQ ---------- */
.faq { padding: var(--space-3xl) var(--pad-x); background: var(--color-steel); }
.faq-list > div { border-top-color: color-mix(in oklch, var(--color-ink) 18%, var(--color-steel)) !important; }
.faq-list { margin-top: var(--space-lg); }
.faq-list > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); padding: var(--space-md) 0; border-top: var(--rule) solid var(--color-rule); }
.faq-list dt { font-weight: 600; font-size: 1.125rem; }
.faq-list dd { color: var(--color-ink-2); max-width: 40rem; }

/* ---------- Contact (graphite) ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); padding: var(--space-3xl) var(--pad-x); background: var(--color-night); color: var(--color-on-night); }
.contact :focus-visible { outline-color: var(--color-focus-night); }
.kicker { margin-bottom: var(--space-xs); font: 0.75rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mint); }
.contact-lede { margin-top: var(--space-md); font-size: 1.1875rem; color: var(--color-muted-night); max-width: 32rem; }
.next-steps { counter-reset: step; display: grid; gap: var(--space-md); margin-top: var(--space-xl); max-width: 32rem; }
.next-steps li { counter-increment: step; position: relative; padding-left: 2.75rem; color: var(--color-muted-night); }
.next-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--color-night-3); color: var(--color-mint); font-weight: 600; font-size: 0.875rem; }
.next-steps strong { display: block; color: var(--color-on-night); }
.fine-print { margin-top: var(--space-lg); font-size: var(--text-small); color: var(--color-muted-night); max-width: 32rem; }
.phone { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: clamp(2rem, 3vw + 1rem, 3rem); font-weight: 600; letter-spacing: -0.02em; color: var(--color-mint); }
.phone .icon { width: 0.8em; height: 0.8em; }
@media (hover: hover) { .phone:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 2px; } }
.phone-note { margin-top: var(--space-3xs); color: var(--color-muted-night); }
/* Other ways to reach Kunj from a phone: a text, his number saved, or the page sent on. */
.contact-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-md); }
.contact-quick .button { min-height: 3rem; }
.enquiry { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule) solid var(--color-rule-night); }
.enquiry h3 { font-size: 1.25rem; letter-spacing: var(--tracking-heading); margin-bottom: var(--space-md); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.field { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-sm); border: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: 0.9375rem; font-weight: 600; padding: 0; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: var(--space-xs);
  border: var(--rule) solid var(--color-muted-night); border-radius: var(--radius-control);
  background: var(--color-night-2); color: var(--color-on-night); font-size: 1rem;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field ::placeholder { color: color-mix(in oklch, var(--color-muted-night) 80%, transparent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus-night); outline-offset: 1px; border-color: var(--color-mint); }
.field [aria-invalid='true'] { border-color: var(--color-danger-night); }
.field-hint { font-size: var(--text-small); color: var(--color-muted-night); }
.field-optional { font-weight: 400; color: var(--color-muted-night); }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.enquiry-form [data-submit]:disabled { opacity: 0.65; cursor: wait; }
.enquiry-form [data-send-status]:empty { display: none; }
/* One tap chooses the kind of operation. */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-sm);
  border: var(--rule) solid var(--color-muted-night); border-radius: var(--radius-pill);
  background: var(--color-night-2); color: var(--color-on-night); font-size: 0.9375rem; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.choice input:checked + span { background: var(--color-mint); border-color: var(--color-mint); color: var(--color-night); font-weight: 600; }
.choice input:focus-visible + span { outline: 2px solid var(--color-focus-night); outline-offset: 2px; }
.choices[aria-invalid='true'] .choice span { border-color: var(--color-danger-night); }
@media (hover: hover) { .choice span:hover { border-color: var(--color-on-night); } }
.picked ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.picked li { display: inline-flex; align-items: center; gap: var(--space-3xs); padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-night-3); font-size: 0.875rem; }
.picked li button { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--color-muted-night); }
@media (hover: hover) { .picked li button:hover { color: var(--color-on-night); background: var(--color-rule-night); } }
.form-error { display: flex; gap: var(--space-2xs); align-items: baseline; margin-bottom: var(--space-sm); padding: var(--space-xs) var(--space-sm); border: var(--rule) solid var(--color-copper); border-radius: var(--radius-control); background: var(--color-night-2); font-size: 0.9375rem; }
.form-error::before { content: '!'; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-danger-night); color: var(--color-night); font-weight: 600; font-size: 0.8125rem; line-height: 1; }
.contact .button--primary { background: var(--color-mint); color: var(--color-night); }
@media (hover: hover) { .contact .button--primary:hover { background: var(--color-on-night); } }
.contact .button--ghost { border-color: var(--color-muted-night); color: var(--color-on-night); }
@media (hover: hover) { .contact .button--ghost:hover { border-color: var(--color-on-night); background: var(--color-night-2); } }
.contact .text-link { color: var(--color-mint); }
.privacy { margin-top: var(--space-sm); font-size: var(--text-small); color: var(--color-muted-night); }
.action-bar { display: none; }
.enquiry-ready:focus { outline: none; }
.enquiry-ready h3 { color: var(--color-mint); }
.ready-intro { margin-bottom: var(--space-md); color: var(--color-muted-night); }
.enquiry-ready [data-reply-email] { overflow-wrap: anywhere; }
.ready-status { margin: var(--space-sm) 0; min-height: 1.5em; font-size: var(--text-small); color: var(--color-muted-night); }

/* ---------- Footer: a closing statement ---------- */
.site-footer { padding: var(--space-2xl) var(--pad-x) var(--space-lg); background: var(--color-night); color: var(--color-on-night); border-top: var(--rule) solid var(--color-rule-night); }
.footer-statement span { display: block; }
.footer-statement span:last-child { color: var(--color-mint); }
.footer-statement { max-width: none; font-size: clamp(1.75rem, 2.4vw + 1rem, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.028em; }
.footer-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-2xl); }
.footer-signature { width: 26.25rem; height: auto; }
.footer-wordmark { display: none; width: 11.25rem; height: auto; aspect-ratio: 715 / 103; color: var(--color-on-night); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.footer-links a { color: var(--color-muted-night); white-space: nowrap; }
@media (hover: hover) { .footer-links a:hover { color: var(--color-mint); } }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule) solid var(--color-rule-night); font-size: var(--text-small); color: var(--color-muted-night); }
.service-line { font: 600 0.75rem/1.5 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mint); }
.motion-toggle { min-height: 2.5rem; padding: 0; border: 0; background: none; color: var(--color-muted-night); text-decoration: underline; text-underline-offset: 0.25em; }
@media (hover: hover) { .motion-toggle:hover { color: var(--color-on-night); } }
.footer-base p:last-child { margin-left: auto; }
.site-footer :focus-visible { outline-color: var(--color-focus-night); }

/* ---------- Legal pages ---------- */
.legal { max-width: 42rem; margin: 0 auto; padding: var(--space-xl) var(--gutter) var(--space-3xl); }
.legal h1 { margin-top: var(--space-lg); font-size: var(--text-h2); line-height: 1.08; letter-spacing: -0.03em; }
.legal h2 { margin-top: var(--space-xl); font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.legal p, .legal ul { margin-top: var(--space-sm); color: var(--color-ink-2); }
.legal ul { display: grid; gap: var(--space-2xs); padding-left: var(--space-md); list-style: disc; }
.legal a:not(.text-link) { color: var(--color-teal-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.legal-updated { font-size: var(--text-small); color: var(--color-muted) !important; }

/* ---------- Wide screens: the model stays beside the reading column ---------- */
@media (min-width: 1024px) {
  .story {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto;
    /* Where pinned rails stick, and how much scrolling each beat of the story takes. */
    --pin-top: calc(var(--space-xs) + var(--header-h) + clamp(1.5rem, 6vh, 4rem));
    --beat: 40vh;
  }
  .stage {
    grid-row: 1 / 5; grid-column: 1; position: sticky; top: 0; height: 100vh; height: 100svh; align-self: start;
    /* The model fades out under the reading column instead of sitting behind it. */
    --fade-a: min(calc(var(--pad-x) + 34rem), 44%);
    --fade-b: min(calc(var(--pad-x) + 44rem), 56%);
  }
  .stage-canvas, .stage-labels {
    -webkit-mask-image: linear-gradient(90deg, transparent var(--fade-a), #000 var(--fade-b));
    mask-image: linear-gradient(90deg, transparent var(--fade-a), #000 var(--fade-b));
  }
  /* Without WebGL, the schematic takes the model's place beside the reading column. */
  .stage-fallback { inset: calc(var(--header-h) + 14%) var(--pad-x) 16% 52%; width: auto; height: auto; }
  .stage-load { left: 76%; bottom: 12%; }
  /* The right half of the content container: the model is framed from here to the edge. */
  .frame-probe { position: absolute; top: 0; bottom: 0; right: var(--pad-x); width: calc(min(100%, var(--container) + 2 * var(--gutter)) / 2 - var(--gutter) - var(--column-gap) / 2); visibility: hidden; pointer-events: none; }
  .hero { grid-row: 1; grid-column: 1; }
  .pace { grid-row: 2; grid-column: 1; }
  .symptoms { grid-row: 3; grid-column: 1; }
  .approach { grid-row: 4; grid-column: 1; }
  /* The text layers sit above the stage; only their content takes the pointer, so
     the model stays clickable where it shows. */
  .hero, .chapter { pointer-events: none; }
  .hero-copy, .scroll-cue, .rail-pin, .story-end { pointer-events: auto; }

  /* Hero: the message on the left, the working model filling the rest. */
  .hero {
    min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--space-xs) + var(--header-h) + var(--space-lg)); padding-bottom: var(--space-3xl);
  }
  .hero-copy { max-width: min(40rem, calc(50% - var(--column-gap) / 2)); }
  .hero h1 { font-size: clamp(3rem, 6vw, 5.75rem); letter-spacing: -0.04em; line-height: 1.02; }
  .lede { max-width: 33rem; font-size: 1.25rem; }
  .scroll-cue {
    position: absolute; left: var(--pad-x); bottom: var(--space-lg);
    display: inline-flex; align-items: center; gap: var(--space-xs);
    font: var(--text-label)/1.2 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted);
    transition: color var(--dur-short) var(--ease-out);
  }
  @media (hover: hover) { .scroll-cue:hover { color: var(--color-teal-deep); } }
  .scroll-cue-line { position: relative; width: 1px; height: 2.75rem; overflow: hidden; background: var(--color-rule); }
  .scroll-cue-line::after { content: ''; position: absolute; inset: 0; background: var(--color-teal); transform-origin: top; animation: cue 2.6s var(--ease-in-out) infinite; }

  /* Chapters: the rail stays pinned beside the model while invisible markers pass
     beneath it, one beat each. Markers and rail share one grid cell, so a beat's
     scroll position never depends on which item happens to be open. */
  .chapter { padding: var(--space-2xl) var(--pad-x) 0; }
  .rail-track { display: grid; }
  .rail-pin, .rail-markers { grid-area: 1 / 1; }
  .rail-pin { position: sticky; top: var(--pin-top); align-self: start; max-width: min(34rem, calc(50% - var(--column-gap) / 2)); }
  .rail-markers { display: block; padding: calc(50vh - var(--pin-top) - var(--beat) / 2) 0 36vh; pointer-events: none; }
  .rail-markers span { display: block; height: var(--beat); }
  /* Symptoms are watched, not just read: each gets long enough to see it happen. */
  .symptoms { --beat: 62vh; }
  .rail-pin .rail { margin-top: var(--space-lg); }
  .rail-pin [data-rail-item]:not(.is-current) .rail-body,
  .rail-pin .symptom:not(.is-current) .symptom-body { grid-template-rows: 0fr; }
  .rail-pin .symptom-list { margin-top: var(--space-lg); }
  .approach { padding-bottom: var(--space-3xl); }
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* One 12-column grid for every two-column block: left content in columns 1–5,
   right content from column 7, so every right-hand column starts on the same line
   as the hero model. */
@media (min-width: 1024px) {
  .kunj, .contact, .faq-list > div { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); }
  .portrait, .contact-intro, .faq-list dt { grid-column: 1 / span 5; }
  .kunj-copy, .contact-panel, .faq-list dd { grid-column: 7 / -1; }
}

/* Case study: the title and its framing side by side; the model takes eight
   columns because it is the primary object, with the scenarios beside it. */
@media (min-width: 1024px) {
  .case-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); align-items: end; }
  .case-head > .evidence-tag { grid-column: 1 / -1; }
  .case-head > h2 { grid-column: 1 / span 7; }
  .case-lede { grid-column: 8 / -1; }
  .problem-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-lab { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); }
  .case-model { grid-column: 1 / span 8; position: sticky; top: calc(var(--space-xs) + var(--header-h) + var(--space-sm)); }
  .scenarios { grid-column: 9 / -1; }
  .case-close { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); }
  .case-close > :first-child { grid-column: 1 / span 5; }
  .case-close > :last-child { grid-column: 7 / -1; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .case-model { grid-column: 1 / span 7; }
  .scenarios { grid-column: 8 / -1; }
}

/* Narrow desktops: the phone icon stays, its number gives way so the bar fits. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header-phone span { display: none; }
  .site-nav { gap: var(--space-sm); }
}

/* Short wide screens: keep the whole pinned rail on screen. */
@media (min-width: 1024px) and (max-height: 820px) {
  .story { --pin-top: calc(var(--space-xs) + var(--header-h) + var(--space-md)); }
  .rail-pin .chapter-head p { display: none; }
  .rail-pin .chapter-head h2 { font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem); }
  .rail-pin .rail, .rail-pin .symptom-list { margin-top: var(--space-md); }
  .beat, .step { padding-block: var(--space-xs); }
  .symptom label { padding-block: var(--space-2xs); }
}


/* ---------- Tablet and below: the model above, a reading window beneath ---------- */
/* A phone is one portrait window with no room beside the model. The screen divides
   in two: the model in a sticky band on top, and beneath it a reading window that
   holds one beat of the story at a time. Every beat is exactly one window tall,
   so the text and the change it describes are seen together. */
@media (max-width: 1023px) {
  :root { --header-h: 3.5rem; }
  .site-nav, .header-cta, .header-phone span { display: none; }
  .site-header { inset: 0 0 auto; }
  .header-bar { gap: var(--space-2xs); padding: 0 max(var(--space-2xs), env(safe-area-inset-right, 0px)) 0 var(--gutter); border-width: 0 0 var(--rule); border-radius: 0; background: var(--color-paper); box-shadow: none; }
  .header-phone { margin-left: auto; padding: 0; border: 0; }
  .header-phone { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-control); }
  .header-phone .icon { width: 1.35rem; height: 1.35rem; }
  .menu-button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-sm); border: var(--rule) solid var(--color-muted); border-radius: var(--radius-control); background: transparent; font-weight: 600; font-size: 0.9375rem; }
  .menu-button[aria-expanded='true'] { background: var(--color-ink); color: var(--color-on-night); border-color: var(--color-ink); }
  /* The menu drops from the bar over a dimmed page; the page stays still behind it. */
  .menu-sheet {
    margin: 0; padding: var(--space-2xs) var(--gutter) max(var(--space-md), env(safe-area-inset-bottom, 0px));
    border-radius: 0; border-width: 0 0 var(--rule);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  }
  .menu-sheet > a:not(.button) { display: flex; align-items: center; min-height: 3.25rem; padding: 0; }
  .menu-sheet > a:not(.button):active { color: var(--color-teal-deep); }
  .menu-sheet .menu-phone { min-height: 3rem; }
  .site-header.is-open::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: auto;
    background: color-mix(in oklch, var(--color-ink) 42%, transparent);
    animation: scrim-in var(--dur-short) var(--ease-out);
  }
  html.is-menu-open { overflow: hidden; }

  .story {
    display: flex; flex-direction: column;
    --band-h: clamp(12.5rem, calc((100svh - var(--header-h)) * 0.5), 30rem);
    --window-h: calc(100svh - var(--header-h) - var(--band-h));
    /* The band lets go a fade's height early, so its fade never crosses the next section. */
    padding-bottom: var(--space-md);
  }
  .hero { order: 0; padding-top: calc(var(--header-h) + var(--space-lg)); padding-bottom: var(--space-md); }
  .stage { order: 1; position: sticky; top: var(--header-h); z-index: var(--z-raised); height: var(--band-h); }
  /* Text leaving the reading window fades under the model instead of meeting an edge. */
  .stage::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--space-md); pointer-events: none;
    background: linear-gradient(var(--color-paper), color-mix(in oklch, var(--color-paper) 0%, transparent));
  }
  /* No stacking context of their own, so a docked panel can rise above the band. */
  .hero, .chapter { z-index: auto; }
  .pace { order: 2; padding-top: var(--space-2xl); }
  .symptoms { order: 3; padding-top: var(--space-2xl); }
  .approach { order: 4; padding-top: var(--space-xl); }
  .chapter-head { padding-bottom: var(--space-md); }
  .rail, .symptom-list { margin-top: 0; }
  /* One beat per window, centred in it when it is the one being shown. */
  .beat, .step, .symptom { display: flex; flex-direction: column; justify-content: center; min-height: var(--window-h); }
  .beat, .step { padding-block: var(--space-sm); }
  .symptom-list { gap: 0; }

  /* Try it: when its beat is reached the controls dock at the bottom of the screen,
     under the thumb, over the lower part of the band. The model reframes into the
     part left clear, so the controls, the result and the model are seen at once. */
  .try.is-docked {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sticky) - 10);
    padding: var(--space-sm) var(--gutter) max(var(--space-xs), env(safe-area-inset-bottom, 0px));
    background: var(--color-paper); border-top: var(--rule) solid var(--color-rule);
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    box-shadow: 0 -0.5rem 1.5rem color-mix(in oklch, var(--color-ink) 10%, transparent);
    animation: dock-in var(--dur-long) var(--ease-out);
  }
  .beat:has(.try.is-docked) { border-left-color: transparent; }
  .try-lede { font-size: 0.9375rem; line-height: 1.45; }
  .try-steps { gap: 0.375rem; margin-top: var(--space-xs); }
  .try-readout { grid-template-columns: auto minmax(0, 1fr) auto; margin-top: var(--space-sm); }
  .try-change { min-width: 0; }
  .try-message { margin-top: var(--space-2xs); min-height: 2.9em; font-size: 0.875rem; line-height: 1.45; }
  .try-tools { margin-top: var(--space-2xs); padding-top: var(--space-3xs); }

  /* The case study's model stays pinned while the scenarios scroll beneath it. */
  .case-model { display: contents; }
  .case-stage {
    position: sticky; top: var(--header-h); z-index: var(--z-raised);
    height: min(62vw, 46svh); min-height: 17rem; max-height: none;
    box-shadow: 0 0 0 var(--space-2xs) var(--color-night);
  }
  .case-stage-note { margin-top: calc(-1 * var(--space-sm)); }
  .scn input { scroll-margin-top: calc(var(--header-h) + min(62vw, 46svh) + var(--space-md)); }

  .kunj { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 24rem; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .site-footer { padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom, 0px)); }

  /* Call and the health check stay under the thumb while nothing else needs the
     bottom of the screen: after the story, outside the case-study lab, before
     the contact section. */
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sticky) - 20);
    display: flex; gap: var(--space-2xs);
    padding: var(--space-2xs) var(--gutter) max(var(--space-2xs), env(safe-area-inset-bottom, 0px));
    background: var(--color-night); border-top: var(--rule) solid var(--color-rule-night);
    transform: translateY(110%); visibility: hidden;
    transition: transform var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long);
  }
  .action-bar.is-shown { transform: none; visibility: visible; transition: transform var(--dur-long) var(--ease-out), visibility 0s; }
  .action-bar .button { min-height: 2.75rem; padding: 0 var(--space-sm); }
  .action-bar .button--primary { flex: 1 1 auto; background: var(--color-mint); color: var(--color-night); }
  .action-bar .button--ghost { flex: none; border-color: var(--color-muted-night); color: var(--color-on-night); }
  .action-bar .icon { width: 1.15em; height: 1.15em; }
}
@keyframes dock-in { from { transform: translateY(100%); } }
@keyframes scrim-in { from { opacity: 0; } }

/* Phones on their side: the band would leave almost no room to read, so the
   model moves beside the text, as on a desktop. */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
  .story {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    --band-h: calc(100svh - var(--header-h));
    --window-h: calc((100svh - var(--header-h)) * 0.8);
  }
  .stage { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
  .stage::after { display: none; }
  .hero { grid-column: 1; grid-row: 1; }
  .pace { grid-column: 1; grid-row: 2; }
  .symptoms { grid-column: 1; grid-row: 3; }
  .approach { grid-column: 1; grid-row: 4; }
  .hero, .chapter { padding-right: var(--space-lg); }
  .case-lab { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--space-lg); }
  .case-model { display: block; position: sticky; top: calc(var(--header-h) + var(--space-sm)); }
  .case-stage { position: relative; top: auto; height: calc(100svh - var(--header-h) - 5rem); min-height: 0; box-shadow: none; }
  .case-stage-note { margin-top: var(--space-xs); }
  .scn input { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
}

@media (max-width: 639px) {
  .case-stage { height: min(100vw, 46svh); }
  .scn input { scroll-margin-top: calc(var(--header-h) + min(100vw, 46svh) + var(--space-md)); }
  .scn-head, .scn { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-xs); }
  .scn { padding: var(--space-2xs) var(--space-xs); }
  .scn-val { font-size: 0.9375rem; }
  .scn-name small { display: none; }
}

@media (max-width: 767px) {
  .hero h1 .accent { display: inline; }
  /* Side by side, so the model shows in the first screen. */
  .actions { flex-wrap: nowrap; }
  .actions .button { flex: none; padding-inline: var(--space-sm); }
  .actions .button--primary { flex: 1 1 auto; }
  .call-long { display: none; }
  .call-short { display: inline; }
  .symptom label { grid-template-columns: 1.75rem 1fr 1.5rem; column-gap: var(--space-xs); }
  /* Each example reads as one line of text, its sector as a quiet prefix. */
  .symptom-eg { display: block; }
  .symptom-eg:first-child { padding-top: var(--space-xs); }
  .symptom-eg + .symptom-eg { margin-top: var(--space-2xs); }
  .symptom-eg .sector { display: inline; padding: 0; margin-right: var(--space-2xs); }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .faq-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-base p:last-child { margin-left: 0; }
}

/* Short phones: the docked controls give up their introduction, which the beat's
   heading has just said. */
@media (max-width: 1023px) and (max-height: 620px) {
  .try.is-docked .try-lede { display: none; }
  .try.is-docked .try-steps { margin-top: 0; }
}

/* The signature needs 400 px; narrower screens use the wordmark (brand minimums). */
@media (max-width: 479px) {
  .footer-signature { display: none; }
  .footer-wordmark { display: block; }
}

@media (max-width: 360px) {
  :root { --gutter: max(0.75rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  .header-bar { gap: 0; }
  .menu-button { padding: 0 var(--space-xs); }
  .actions .button { padding-inline: var(--space-xs); font-size: 0.9375rem; }
}

/* Touch: targets of at least 44 px (hit areas grow without moving the layout). */
@media (pointer: coarse) {
  .try-steps button { min-height: 2.75rem; padding: 0 var(--space-sm); }
  .tool, .tour-button { min-height: 2.75rem; }
  .scn { min-height: 2.75rem; }
  .privacy .text-link { padding-block: 0.75rem; margin-block: -0.75rem; }
  .text-link { padding-block: 0.625rem; margin-block: -0.625rem; }
  .brand { padding-block: 0.5625rem; margin-block: -0.5625rem; }
  .footer-links a, .motion-toggle { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .rail-jump { position: relative; }
  .rail-jump::after { content: ''; position: absolute; inset: -0.75rem 0; }
  .picked li button { width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.375rem -0.5rem -0.25rem; }
  .stage.is-playable .stage-label.is-station::after { content: ''; position: absolute; inset: -0.625rem -0.375rem; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
.is-reduced, .is-reduced * { scroll-behavior: auto !important; }
.is-reduced *, .is-reduced *::before, .is-reduced *::after { transition-duration: 1ms !important; }

@media print {
  .site-header, .stage, .try, .case-stage, .enquiry { display: none !important; }
  .case, .contact, .site-footer { background: none; color: var(--color-ink); }
}