/* Constraint First: one stylesheet.
   Editorial consultancy register: near-white paper, near-black ink, one accent (cobalt)
   for numbers, links and the single filled button state. Source Serif 4 (optical sizes)
   for headlines, Inter for text and figures. No gradients, no shadows, no scroll motion.

   Fonts: both OFL, licences beside the files in /assets/fonts. Subset 27 Oct 2026 with
   fontTools 4.65 from the files in website/assets/fonts/*.full.woff2.bak, to the same
   Latin range as ksmedia.marketing (no em or en dash glyphs on purpose). Inter is pinned
   to opsz 14 with wght 400 to 700 kept. The fallbacks below are measured against Arial and
   Georgia on a sample of site copy, so the swap moves as little text as possible. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-opsz-latin.woff2?v=2ec3acc3") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-var-latin.woff2?v=f3754887") format("woff2");
}
/* Georgia stands in for Source Serif 4 at three optical sizes, because the serif narrows as
   opsz rises: 101% of Georgia's width at text sizes (opsz 20), 99% for section heads at
   phone size (about 30px), 96% for the display headline at phone size (about 40px).
   Lighthouse measures the phone layout, so the fallbacks match that one exactly. */
@font-face {
  font-family: "Serif Fallback";
  src: local("Georgia");
  size-adjust: 101%;
  ascent-override: 102.6%;
  descent-override: 33.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Serif Fallback Mid";
  src: local("Georgia");
  size-adjust: 99%;
  ascent-override: 104.6%;
  descent-override: 33.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Serif Fallback Display";
  src: local("Georgia");
  size-adjust: 96%;
  ascent-override: 107.9%;
  descent-override: 34.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sans Fallback";
  font-weight: 100 550;
  src: local("Arial"), local("ArialMT");
  size-adjust: 107%;
  ascent-override: 90.5%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sans Fallback";
  font-weight: 551 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  size-adjust: 101%;
  ascent-override: 95.8%;
  descent-override: 23.8%;
  line-gap-override: 0%;
}

:root {
  --paper: #fbfaf7;
  --paper-2: #f2f0ea;
  --ink: #15171a;
  --ink-2: #464a50;
  --ink-3: #62666c;
  --rule: #d9d5cb;
  --rule-strong: #15171a;
  --accent: #1f45b5;
  --accent-ink: #163389;
  --accent-soft: #e5ebf8;

  --serif: "Source Serif 4", "Serif Fallback", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Sans Fallback", Arial, Helvetica, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(64px, 9vw, 128px);
  --measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-soft); }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p + p { margin-top: 1em; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--paper); }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

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

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

.display {
  font-family: "Source Serif 4", "Serif Fallback Display", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 1.25rem + 5vw, 5.4rem);
  line-height: 1.03;
  letter-spacing: -0.022em;
  max-width: 11.5em;
  text-wrap: balance;
}
.h2 {
  font-family: "Source Serif 4", "Serif Fallback Mid", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 1.25rem + 2.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 16em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.h4 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-feature-settings: "case";
}
.lede {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 38em;
}
.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; margin: 2.2em 0 0.6em; color: var(--ink); }
.prose h3 { font-weight: 600; font-size: 1.125rem; margin: 1.8em 0 0.4em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 1em 0; }
.prose li + li { margin-top: 0.45em; }
.prose p + ul, .prose p + ol { margin-top: 1em; }
.prose ul + p, .prose ol + p { margin-top: 1em; }
.prose strong { color: var(--ink); font-weight: 600; }
.muted { color: var(--ink-3); }
.small { font-size: 0.9375rem; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.figure-accent { color: var(--accent); }

/* ---------- header ---------- */

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.375rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark-mark { width: 22px; height: 22px; flex: none; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.menu { display: none; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font: 600 1rem/1.2 var(--sans);
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 2px;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-small { min-height: 40px; padding: 8px 16px; font-size: 0.9375rem; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.link-arrow { font-weight: 600; text-decoration: none; color: var(--accent); }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.cta-note { font-size: 0.875rem; color: var(--ink-3); margin-top: 10px; }

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

.hero { padding-block: clamp(48px, 8vw, 112px) clamp(56px, 8vw, 104px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 96px); align-items: end; }
.hero .eyebrow { margin-bottom: 28px; }
.hero .lede { margin-top: 28px; }
.page-hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--rule); }
.page-hero .eyebrow { margin-bottom: 24px; }
.page-hero .lede { margin-top: 24px; }
.page-hero .display { max-width: 13em; }

/* The portrait slot. A monogram plate until the photo exists (G-9): replace the .plate
   contents with <img src="/assets/kirish.jpg" width="600" height="750" alt="Kirish Sanjeevvijay">. */
.portrait { margin: 0; }
.plate {
  aspect-ratio: 4 / 5; width: 100%;
  background: var(--paper-2); border: 1px solid var(--rule);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate-mono { font-family: var(--serif); font-size: 5.5rem; line-height: 1; color: var(--ink-3); letter-spacing: -0.04em; }
.plate::after {
  content: ""; position: absolute; inset: 14px; border: 1px solid var(--rule); pointer-events: none;
}
.portrait figcaption { margin-top: 14px; font-size: 0.9375rem; line-height: 1.45; }
.portrait figcaption strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--ink); }
.portrait figcaption span { color: var(--ink-3); }
.founder-inline { display: none; }

/* ---------- sections ---------- */

.section { padding-block: var(--section); border-top: 1px solid var(--rule); }
.section-tint { background: var(--paper-2); }
.section-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); align-items: start; }
.section-label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.55em; }
.section-label .num { color: var(--accent); margin-right: 10px; }
.section-body { min-width: 0; }
.section-body > .lede, .section-body > .prose { margin-top: 24px; }
.section-body > * + .block { margin-top: clamp(40px, 5vw, 64px); }
.section-foot { margin-top: 40px; }

/* numbered list of problems / steps */
.numbered { list-style: none; padding: 0; margin: clamp(32px, 4vw, 56px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.numbered > li { border-top: 2px solid var(--ink); padding-top: 20px; }
.numbered .n { display: block; font-family: var(--serif); font-size: 2.25rem; line-height: 1; color: var(--accent); margin-bottom: 18px; font-variant-numeric: lining-nums; }
.numbered h3 { margin-bottom: 10px; }
.numbered p { color: var(--ink-2); }
.numbered.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* two routes */
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 4vw, 56px); }
.route { border: 1px solid var(--rule); background: var(--paper); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; }
.route .eyebrow { margin-bottom: 16px; }
.route h3 { margin-bottom: 14px; }
.route p { color: var(--ink-2); }
.route .link-arrow { margin-top: auto; padding-top: 24px; }
.routes.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route-list { margin: 16px 0 0; padding-left: 1.1em; color: var(--ink-2); }
.route-list li + li { margin-top: 6px; }
.routes-foot { margin-top: 28px; font-family: var(--serif); font-size: 1.35rem; }

/* spec sheet: what's in it */
.spec { list-style: none; padding: 0; margin: clamp(28px, 4vw, 48px) 0 0; border-top: 2px solid var(--ink); }
.spec > li { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.spec .n { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.spec .what { font-weight: 600; }
.spec .why { color: var(--ink-2); }
.spec > li.quick { background: var(--accent-soft); padding-inline: 12px; margin-inline: -12px; }

/* fact strip */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); margin-top: clamp(36px, 5vw, 56px); }
.facts > div { padding: 18px 20px 4px 0; }
.facts > div + div { border-left: 1px solid var(--rule); padding-left: 20px; }
.facts dt { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.facts dd { margin: 8px 0 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; }
.facts dd small { display: block; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }

/* price ladder */
.ladder { width: 100%; border-collapse: collapse; margin-top: 28px; font-variant-numeric: tabular-nums lining-nums; }
.ladder caption { text-align: left; font-size: 0.875rem; color: var(--ink-3); padding-bottom: 10px; }
.ladder th, .ladder td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ladder thead th { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid var(--ink); }
.ladder td.price { font-family: var(--serif); font-size: 1.6rem; white-space: nowrap; }
.ladder tr.now td { background: var(--accent-soft); }
.ladder tr.now td:first-child { padding-left: 12px; }
.vat { display: inline-block; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; }

.note-box { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin-top: 28px; max-width: var(--measure); }
.note-box p { color: var(--ink-2); }
.capacity { font-variant-numeric: tabular-nums; }

/* Guarantee placeholder, until G-22 is done. site.mjs prelaunch fails while any remains. */
.guarantee-slot { border: 1px dashed var(--ink-3); padding: 20px 24px; margin-top: 24px; max-width: var(--measure); background: var(--paper); }
.guarantee-slot code { font-family: var(--sans); font-weight: 600; color: var(--ink-2); }

/* closing band */
.band { background: var(--ink); color: var(--paper); padding-block: clamp(64px, 9vw, 120px); }
.band .h2 { color: var(--paper); max-width: 18ch; }
.band p { color: #c9cbcf; max-width: 40em; margin-top: 20px; }
.band .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.band .btn:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink); }
.band a:not(.btn) { color: #fff; }
.band .cta-note { color: #a9acb2; }

/* ---------- exhibits ---------- */

.exhibit { margin-top: clamp(32px, 4vw, 56px); border-top: 2px solid var(--ink); padding-top: 18px; }
.exhibit-head { display: grid; gap: 6px; margin-bottom: 26px; }
.exhibit-no { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.exhibit-title { font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); line-height: 1.15; }
.exhibit-sub { color: var(--ink-3); font-size: 0.9375rem; max-width: 60ch; }
.exhibit-source { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); max-width: 80ch; }
.exhibit-source b { font-weight: 600; color: var(--ink-2); }

/* Exhibit: stalled quotes */
.ex-quotes { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ex-dots { width: 100%; max-width: 420px; height: auto; }
.ex-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 0.875rem; color: var(--ink-2); }
.ex-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 1.5px solid var(--ink); background: transparent; }
.ex-legend .won::before { background: var(--accent); border-color: var(--accent); }
.sum { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.sum th, .sum td { padding: 13px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; font-weight: 400; }
.sum td { text-align: right; white-space: nowrap; padding-left: 16px; font-weight: 500; }
.sum th small { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.sum tr.total th, .sum tr.total td { border-bottom: 2px solid var(--ink); border-top: 2px solid var(--ink); }
.sum tr.total td { font-family: var(--serif); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); color: var(--accent); font-weight: 400; }

/* Exhibit: Gantt */
.gantt { list-style: none; padding: 0; margin: 0; }
.gantt-axis, .gantt-row { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr); gap: 0 24px; align-items: center; }
.gantt-row { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.gantt-row .task { font-size: 0.9375rem; line-height: 1.35; }
.gantt-row .task small { display: block; color: var(--ink-3); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.track { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); height: 16px; position: relative; background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 3 - 1px), var(--rule) calc(100% / 3 - 1px), var(--rule) calc(100% / 3)); }
.bar { grid-row: 1; height: 16px; background: var(--ink); border-radius: 1px; }
.bar.accent { background: var(--accent); }
.bar.mile { width: 14px; height: 14px; justify-self: center; align-self: center; transform: rotate(45deg); }
.bar.runs-on { position: relative; }
.bar.runs-on::after { content: "\2192"; position: absolute; right: -18px; top: -5px; font-size: 0.9rem; color: var(--accent); }
.gantt-axis { padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.axis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.axis span { padding-left: 2px; }
.gantt-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 0.8125rem; color: var(--ink-2); }
.gantt-key span::before { content: ""; display: inline-block; width: 18px; height: 10px; background: var(--ink); margin-right: 8px; vertical-align: 0; }
.gantt-key .k-accent::before { background: var(--accent); }

/* Exhibit: tracker */
.tracker { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums lining-nums; }
.tracker th, .tracker td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tracker thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid var(--ink); }
.tracker td.r, .tracker th.r { text-align: right; padding-right: 20px; padding-left: 14px; }
.tracker tr > :last-child { padding-right: 0; }
.tracker tbody th { white-space: nowrap; }
.touches { letter-spacing: 3px; color: var(--accent); white-space: nowrap; }
.touches .off { color: var(--rule); }
.status { display: inline-block; font-size: 0.8125rem; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 2px; white-space: nowrap; }
.status.won { background: var(--accent); border-color: var(--accent); color: #fff; }
.status.live { border-color: var(--accent); color: var(--accent-ink); }
.tracker tfoot td, .tracker tfoot th { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 600; }

/* Exhibit: bars (3x rule) */
.bars { display: grid; gap: 14px; max-width: 760px; }
.bars-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; }
.bars-row .label { font-size: 0.9375rem; }
.bars-row .label small { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.bars-track { position: relative; height: 34px; }
.bars-fill { height: 100%; background: var(--ink); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.9375rem; min-width: 76px; }
.bars-fill.accent { background: var(--accent); color: #fff; }
.bars-fill.outline { background: transparent; border: 2px dashed var(--accent); color: var(--accent-ink); }

/* Exhibit: example result (ChatGPT check) */
.answers { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.answers th, .answers td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.answers thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid var(--ink); }
.answers .you-no { color: var(--ink-3); }
.answers .you-yes { color: var(--accent-ink); font-weight: 600; }

/* ---------- forms ---------- */

.form { display: grid; gap: 18px; max-width: 640px; margin-top: 28px; }
.form .row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field .hint { font-size: 0.8125rem; color: var(--ink-3); font-weight: 400; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid #8b8f95; border-radius: 2px;
  padding: 11px 12px; min-height: 48px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: #a32618; }
.form-status { min-height: 1.6em; font-size: 0.9375rem; }
.form-status.ok { color: var(--accent-ink); font-weight: 600; }
.form-status.err { color: #a32618; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-small { font-size: 0.8125rem; color: var(--ink-3); }

/* ---------- the Constraint Check ---------- */

.check { max-width: 820px; }
.check-part { margin-top: clamp(40px, 5vw, 64px); }
.check-part > .eyebrow { display: block; margin-bottom: 8px; }
.check-part > h2 { margin-bottom: 8px; }
.q { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: 26px 0 22px; min-width: 0; }
.q legend { padding: 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); line-height: 1.3; display: flex; gap: 14px; float: left; width: 100%; margin-bottom: 16px; }
.q legend .qn { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 0.25em; min-width: 26px; }
.q .opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-left: 40px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label {
  display: flex; gap: 12px; align-items: flex-start; height: 100%;
  border: 1px solid var(--rule); background: #fff; padding: 12px 14px; border-radius: 2px;
  cursor: pointer; font-size: 0.9375rem; line-height: 1.4;
}
.opt label::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--ink-3); background: #fff;
}
.opt input:checked + label { border-color: var(--accent); background: var(--accent-soft); }
.opt input:checked + label::before { border: 5px solid var(--accent); }
.opt input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.opt label:hover { border-color: var(--ink-3); }
.q.missing legend { color: #a32618; }
.q.missing .opt label { border-color: #c98b84; }

.check-bar {
  position: sticky; bottom: 0; z-index: 10; margin-top: 36px;
  background: var(--paper); border-top: 2px solid var(--ink);
  padding: 14px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.progress { display: flex; align-items: center; gap: 14px; font-size: 0.9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.progress-track { width: 160px; height: 6px; background: var(--rule); }
.progress-fill { height: 100%; width: 0; background: var(--accent); }
.check-error { color: #a32618; font-weight: 600; font-size: 0.9375rem; width: 100%; }
.check-error:empty { display: none; }

.result { margin-top: clamp(40px, 5vw, 64px); border-top: 2px solid var(--ink); padding-top: 28px; }
.result[hidden] { display: none; }
.result h2:focus { outline: none; }
.scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.score { border: 1px solid var(--rule); background: #fff; padding: 20px 22px; }
.score .eyebrow { display: block; }
.score-value { font-family: var(--serif); font-size: 3rem; line-height: 1.05; margin-top: 8px; font-variant-numeric: lining-nums tabular-nums; }
.score-value small { font-family: var(--sans); font-size: 1rem; color: var(--ink-3); }
.score-band { font-weight: 600; margin-top: 2px; }
.meter { height: 8px; background: var(--rule); margin-top: 14px; }
.meter > i { display: block; height: 100%; background: var(--accent); }
.constraint { margin-top: 32px; padding: 26px 26px 24px; background: var(--paper-2); border-left: 4px solid var(--accent); }
.constraint .h3 { margin-top: 6px; }
.constraint p { color: var(--ink-2); margin-top: 12px; max-width: 62ch; }
.area-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; max-width: 620px; }
.area-list li { display: grid; grid-template-columns: minmax(0, 1fr) 140px 48px; gap: 14px; align-items: center; font-size: 0.9375rem; }
.area-list .meter { margin-top: 0; }
.area-list .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.next-problem { margin-top: 32px; font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; max-width: 34ch; }
.result-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 24px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

/* ---------- articles and lists ---------- */

.article-list { list-style: none; padding: 0; margin: 32px 0 0; border-top: 2px solid var(--ink); }
.article-list li { padding: 26px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 32px; }
.article-list time { color: var(--ink-3); font-size: 0.875rem; font-variant-numeric: tabular-nums; padding-top: 0.35em; }
.article-list a { color: var(--ink); text-decoration: none; }
.article-list a:hover .h3 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.article-list p { color: var(--ink-2); margin-top: 8px; max-width: 62ch; }
.article-meta { margin-top: 20px; color: var(--ink-3); font-size: 0.9375rem; }
.article-body { padding-block: clamp(40px, 6vw, 80px); }
.article-body .prose { margin-inline: auto; margin-left: 0; }
.article-body .exhibit { max-width: 860px; }
.callout { margin-top: 2em; padding: 22px 24px; background: var(--paper-2); border-left: 4px solid var(--accent); }
.callout p { color: var(--ink-2); }
.template { margin: 1.4em 0; padding: 22px 24px; border: 1px solid var(--rule); background: #fff; font-size: 0.9875rem; }
.template p { color: var(--ink); }
.template .subject { font-weight: 600; }

.empty-state { margin-top: clamp(32px, 4vw, 48px); border: 1px solid var(--rule); background: #fff; padding: clamp(28px, 4vw, 48px); max-width: 760px; }
.empty-state .h3 { max-width: 28ch; }
.empty-state p { color: var(--ink-2); margin-top: 14px; }

.faq { margin-top: 28px; border-top: 2px solid var(--ink); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.5rem; line-height: 1; color: var(--accent); font-family: var(--sans); }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-q { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; display: inline; }
.faq .faq-a { padding: 0 0 22px; color: var(--ink-2); max-width: 66ch; }

.legal { padding-block: clamp(40px, 6vw, 80px); }
.legal .prose h2 { font-size: 1.35rem; }


/* home: the two routes */
.hero .display { max-width: 14em; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); margin-top: clamp(36px, 5vw, 56px); }
.choice {
  display: flex; flex-direction: column; gap: 14px; min-height: 100%;
  padding: clamp(24px, 3.5vw, 44px); border: 1px solid var(--ink); background: var(--paper);
  color: var(--ink); text-decoration: none;
}
.choice:hover { color: var(--ink); background: #fff; border-color: var(--accent); }
.choice:hover .choice-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.choice-here { background: var(--ink); color: var(--paper); }
.choice-here .eyebrow, .choice-here .choice-text { color: #c9cbcf; }
.choice-here .link-arrow { color: #fff; }
.choice-here:hover { background: var(--accent-ink); color: #fff; border-color: var(--accent-ink); }
.choice-title { font-family: "Source Serif 4", "Serif Fallback Mid", Georgia, serif; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.012em; }
.choice-text { color: var(--ink-2); max-width: 34em; }
.choice .link-arrow { margin-top: auto; padding-top: 8px; }
.choices-foot { margin-top: 24px; font-size: 1.0625rem; color: var(--ink-2); }

/* home: services */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(28px, 4vw, 48px); }
.service { border-top: 2px solid var(--ink); padding: 20px 0 32px; display: flex; flex-direction: column; gap: 10px; }
.service .h3 a { color: var(--ink); text-decoration: none; }
.service .h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.service p { color: var(--ink-2); }
.service-price { margin-top: auto; font-weight: 600; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.service-price .vat { font-weight: 400; margin-left: 6px; }

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

.site-footer { border-top: 1px solid var(--rule); padding-block: 56px 40px; font-size: 0.9375rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid p { color: var(--ink-2); max-width: 32ch; margin-top: 14px; }
.footer-grid h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 500; font-family: var(--sans); margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--ink); text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.footer-legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 0.8125rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .nav-links { gap: 18px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 1100px) {
  .nav-links, .nav > .btn { display: none; }
  .menu { display: block; position: static; }
  .menu > summary {
    list-style: none; cursor: pointer; min-height: 44px; padding: 10px 14px;
    border: 1px solid var(--ink); border-radius: 2px; font-weight: 600; font-size: 0.9375rem;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { background: var(--ink); color: var(--paper); }
  .menu-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 2px solid var(--ink);
    padding: 8px var(--gutter) 24px;
  }
  .menu-panel ul { list-style: none; padding: 0; margin: 0; }
  .menu-panel li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 1.0625rem; }
  .menu-panel .btn { margin-top: 20px; width: 100%; }
}

@media (max-width: 900px) {

  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero .portrait { display: none; }
  .founder-inline { display: flex; align-items: center; gap: 14px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); }
  .founder-inline .plate { width: 56px; flex: none; aspect-ratio: 1; border-radius: 50%; }
  .founder-inline .plate::after { display: none; }
  .founder-inline .plate-mono { font-size: 1.35rem; }
  .founder-inline p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; }

  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-label { padding-top: 0; }
  .numbered, .numbered.two { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .routes, .routes.three, .choices, .services { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ex-quotes { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .article-list li { grid-template-columns: minmax(0, 1fr); }
  .founder-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .founder-grid .portrait { max-width: 280px; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .spec > li { grid-template-columns: 36px minmax(0, 1fr); }
  .spec .why { grid-column: 2; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .gantt-axis, .gantt-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gantt-axis > span:first-child { display: none; }
  .bar.runs-on::after { right: -4px; top: -20px; }
  .form .row-2 { grid-template-columns: minmax(0, 1fr); }
  .q .opts { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .scores { grid-template-columns: minmax(0, 1fr); }
  .area-list li { grid-template-columns: minmax(0, 1fr) 80px 40px; }
  .bars-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ladder td.price { font-size: 1.3rem; }

  /* Tables that hold rows of records become stacked cards on a phone. */
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack, .stack tbody, .stack tr, .stack td, .stack th, .stack tfoot { display: block; width: 100%; }
  .stack tbody tr, .stack tfoot tr { border-bottom: 1px solid var(--rule); padding: 12px 0; }
  .stack td, .stack th { border: 0; padding: 3px 0 !important; text-align: left !important; }
  .stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 0.8125rem; }
  .stack tbody th { font-weight: 600; }
  .stack tfoot td, .stack tfoot th { border-top: 0; }
  .stack tfoot tr { border-top: 2px solid var(--ink); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .fade { animation: fade 0.5s ease-out both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* The scorecard result prints as its own page: "Save as PDF" in the print dialog. */
@media print {
  .site-header, .site-footer, .band, .skip, .check-intro, #check-form, .result-actions, .result .form, .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .result { border: 0; margin: 0; padding: 0; }
  .constraint, .score { break-inside: avoid; }
  a { color: var(--ink); }
}