/* Self-hosted fonts (latin subset). No third-party request on page load. */
@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* Arial resized to Geist's widths so text does not jump when the web font arrives. */
@font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 104%; }

/* Design tokens. Light paper, near black text, teal for data, amber for a finding. The footer is the one dark block. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --mist: #f2f4f5;
  --line: #e3e8eb;
  --line-2: #cdd6db;
  --text: #0d161b;
  --body: #3d4a52;
  --muted: #5f6b73;
  --accent: #0a7686;
  --signal: #c26a00;
  --find-bg: #fdecd6;
  --find-ink: #4a2500;
  --find-mid: #7a3d00;
  --ink: #0d161b;

  --font: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 24px;
  --radius-sm: 16px;
  --lift: 0 0 0 1px rgb(4 23 43 / 0.06), 0 4px 24px rgb(4 23 43 / 0.08);
  --lift-hi: 0 0 0 1px rgb(4 23 43 / 0.07), 0 14px 40px rgb(4 23 43 / 0.12);
  --gutter: 20px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 900px) { :root { --gutter: 40px; } }
@media (min-width: 1280px) { :root { --gutter: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cap { font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hl { color: var(--accent); }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 16px;
  background: var(--ink); color: #fff; border-radius: 9999px; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }

/* Buttons: pills, filled and outlined as a matched pair */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 9999px;
  font: 500 1rem/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: transparent; -webkit-appearance: none; appearance: none;
  transition: transform 0.2s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-outline-light { border-color: #5b6b75; color: #fff; }
@media (hover: hover) {
  .btn-primary:hover { background: #1f2d35; transform: translateY(-1px); box-shadow: 0 6px 18px rgb(4 23 43 / 0.18); }
  .btn-ghost:hover { background: var(--mist); }
  .btn-light:hover { transform: translateY(-1px); background: #e9eef1; }
  .btn-outline-light:hover { border-color: #fff; }
}
/* Border beam: on hover, focus and press a short light travels around the edge of the call-to-action buttons. */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-primary, .btn-ghost, .btn-light { position: relative; isolation: isolate; --beam-c: #3cd6e0; }
.btn-ghost { --beam-c: #0a7686; }
.btn-primary::before, .btn-primary::after, .btn-ghost::before, .btn-ghost::after, .btn-light::before, .btn-light::after {
  content: ""; position: absolute; pointer-events: none; border-radius: inherit; opacity: 0;
  background: conic-gradient(from var(--beam), transparent 0 58%, var(--beam-c) 80%, #ffffff 88%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 0.3s var(--ease);
}
.btn-primary::after, .btn-ghost::after, .btn-light::after { inset: -2px; padding: 2px; }
.btn-primary::before, .btn-ghost::before, .btn-light::before { inset: -4px; padding: 4px; filter: blur(6px); z-index: -1; }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:focus-visible::after, .btn-ghost:focus-visible::after, .btn-light:focus-visible::after,
  .btn-primary:active::after, .btn-ghost:active::after, .btn-light:active::after { opacity: 1; animation: beam-spin 1.6s linear infinite; }
  .btn-primary:focus-visible::before, .btn-ghost:focus-visible::before, .btn-light:focus-visible::before,
  .btn-primary:active::before, .btn-ghost:active::before, .btn-light:active::before { opacity: 0.6; animation: beam-spin 1.6s linear infinite; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn-primary:hover::after, .btn-ghost:hover::after, .btn-light:hover::after { opacity: 1; animation: beam-spin 1.6s linear infinite; }
  .btn-primary:hover::before, .btn-ghost:hover::before, .btn-light:hover::before { opacity: 0.6; animation: beam-spin 1.6s linear infinite; }
}
@keyframes beam-spin { to { --beam: 360deg; } }

.more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 500; text-decoration: none; color: var(--text);
}
.more span[aria-hidden] { transition: transform 0.2s var(--ease); }
@media (hover: hover) { .more:hover { text-decoration: underline; text-underline-offset: 4px; } .more:hover span[aria-hidden] { transform: translateX(3px); } }

/* Logo mark */
.brand-mark, .rep-mark, .mega-mark { flex: none; }
.bm-on { fill: var(--accent); }
.bm-hit { fill: var(--signal); }
.bm-off { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: 0.45; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgb(255 255 255 / 0.9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 12px; min-height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.brand-mark { width: 26px; height: 26px; }
.brand-name { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.035em; }
.nav-cta { margin-left: auto; }
.menu-btn {
  min-width: 44px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 9999px;
  background: #fff; cursor: pointer; font-weight: 500;
}
.site-nav { display: none; }
.nav.open .site-nav {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px rgb(4 23 43 / 0.08);
}
.nav.open .site-nav ul { padding: 8px var(--gutter) 16px; }
.site-nav a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-size: 1.05rem; }
.nav.open .site-nav li + li { border-top: 1px solid var(--line); }
@media (max-width: 479px) { .nav-cta { display: none; } .menu-btn { margin-left: auto; } }
@media (min-width: 1000px) {
  .menu-btn { display: none; }
  .site-nav { display: block; margin-left: auto; }
  .site-nav ul { display: flex; gap: 28px; }
  .site-nav a { min-height: 44px; font-size: 0.975rem; color: var(--text); }
  .site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--line-2); }
  .nav-cta { margin-left: 20px; }
}

/* Sections */
section { padding-block: 80px; }
@media (min-width: 900px) { section { padding-block: 120px; } }
h2 {
  font-weight: 500; font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.08; letter-spacing: -0.035em; max-width: 20ch; text-wrap: balance;
}
.sec-head { margin-bottom: 48px; }
.sec-sub { margin-top: 18px; color: var(--muted); font-size: 1.075rem; max-width: 56ch; }

/* Hero: centred headline with report fragments floating around it on wide screens */
.hero { position: relative; padding-block: 48px 72px; overflow: hidden; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
h1 {
  font-weight: 500; font-size: clamp(2.3rem, 6.4vw, 3.65rem);
  line-height: 1.04; letter-spacing: -0.04em; max-width: 17ch; text-wrap: balance;
}
.lede { margin-top: 24px; max-width: 34em; font-size: 1.125rem; color: var(--muted); }
.cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.seg {
  margin-top: 40px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 4px; border-radius: 28px; background: var(--mist); max-width: 100%;
}
.seg-label { padding: 0 10px 0 14px; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.seg-btn {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 9999px; cursor: pointer;
  background: transparent; color: var(--muted); font-weight: 500;
  transition: background-color 0.25s var(--ease), color 0.25s, box-shadow 0.25s;
}
.seg-btn[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 0 0 1px rgb(4 23 43 / 0.06), 0 2px 8px rgb(4 23 43 / 0.08); }
@media (hover: hover) { .seg-btn:hover { color: var(--text); } }
html:not(.js) .seg { display: none; }

.hero-cards { margin-top: 56px; display: grid; gap: 16px; }
.hc-set { display: contents; }
.hc {
  --i: 0; --ft: 7s;
  padding: 16px 20px 14px; border-radius: 20px; background: #fff; box-shadow: var(--lift);
  transition: opacity 0.3s ease calc(var(--i) * 55ms), transform 0.55s var(--ease) calc(var(--i) * 55ms), filter 0.3s ease calc(var(--i) * 55ms), box-shadow 0.35s var(--ease);
}
.hc-set .hc:nth-child(2) { --i: 1; --ft: 8s; }
.hc-set .hc:nth-child(3) { --i: 2; --ft: 6.5s; }
.hc-set .hc:nth-child(4) { --i: 3; --ft: 7.5s; }
@media (hover: hover) { .hc:hover { transform: translateY(-3px); box-shadow: var(--lift-hi); } }
/* Changing sector: the cards blur away one after another, then the next sector's cards arrive in their own places. */
.hc-set.is-out .hc { opacity: 0; transform: translateY(14px) scale(0.95); filter: blur(6px); pointer-events: none; }

.hc-head { display: flex; justify-content: space-between; gap: 12px; font: 500 0.72rem/1.4 var(--font-mono); letter-spacing: 0.05em; color: var(--muted); }
.hc-teal { color: var(--accent); }
.hc-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font: 500 0.68rem/1 var(--font-mono); color: var(--muted); }
.hc-svg { width: 100%; height: auto; margin-top: 10px; overflow: visible; }

/* Shop: margin table */
.hc-rows { margin-top: 8px; }
.hc-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid #edf0f2; border-radius: 4px; font-size: 0.9rem; }
.hc-name { display: flex; align-items: center; gap: 8px; }
.hc-name i { width: 8px; height: 8px; background: var(--accent); }
.hc-val { font-family: var(--font-mono); font-size: 0.85rem; }
.hc-rows .flag .hc-name i { background: var(--signal); }
.hc-rows .flag .hc-val { color: #9a4f00; }

/* Leak card (shop, school) */
.hc-find { background: var(--find-bg); box-shadow: none; border-radius: var(--radius); padding: 20px; }
.hc-flag { display: flex; align-items: center; gap: 8px; color: var(--find-mid); }
.hc-flag i { width: 8px; height: 8px; background: var(--signal); }
.hc-big { margin-top: 14px; font-weight: 600; font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.035em; color: var(--find-ink); font-variant-numeric: tabular-nums; }
.hc-text { margin-top: 8px; font-size: 0.9rem; line-height: 1.45; color: var(--find-mid); }
.hc-cal { margin-top: 14px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.hc-cal i { aspect-ratio: 1; border-radius: 3px; background: #f6d9b4; }
.hc-cal .cw-p { background: var(--accent); }
.hc-cal .cw-l { background: var(--signal); }
.hc-cal-k { margin-top: 8px; display: flex; gap: 14px; font: 500 0.66rem/1 var(--font-mono); color: var(--find-mid); text-transform: uppercase; }
.hc-cal-k span { display: flex; align-items: center; gap: 6px; }
.hc-cal-k i { width: 8px; height: 8px; border-radius: 2px; }
.hc-cal-k .cw-p { background: var(--accent); }
.hc-cal-k .cw-l { background: var(--signal); }

/* Shop: forecast chart */
.hc-axis { stroke: #e3e8eb; stroke-width: 1; }
.hc-today { stroke: #c9d2d8; stroke-width: 1; stroke-dasharray: 2 4; }
.hc-band { fill: var(--accent); fill-opacity: 0.12; }
.hc-past { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) 0.35s; }
.hc-future { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 4; }
.hc-dot { fill: var(--signal); }
.hc-ring { fill: none; stroke: var(--signal); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hc-late { transition: opacity 0.5s ease 1.2s; }
.hc-set.is-out .hc-past { stroke-dashoffset: 1; transition: none; }
.hc-set.is-out .hc-late { opacity: 0; transition: none; }

/* Checklists (shop plan) */
.hc-steps { margin-top: 6px; }
.hc-step {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0;
  background: none; border: 0; border-top: 1px solid #edf0f2; cursor: pointer; text-align: left; font-size: 0.9rem;
}
.hc-step i, .hc-toggle i {
  flex: none; position: relative; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #b3c1ca; background: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}
.hc-step i::after, .hc-toggle i::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.25s var(--ease);
}
.hc-step[aria-pressed="true"] i, .hc-toggle[aria-pressed="true"] i { background: var(--accent); border-color: var(--accent); }
.hc-step[aria-pressed="true"] i::after, .hc-toggle[aria-pressed="true"] i::after { transform: rotate(45deg) scale(1); }
.hc-step span { transition: color 0.2s; }
.hc-step[aria-pressed="true"] span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* Toggle button (transport alert, school reminder) */
.hc-toggle {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid var(--line-2); border-radius: 9999px; background: #fff; cursor: pointer; font-weight: 500; font-size: 0.875rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.hc-toggle[aria-pressed="true"] { background: #e7f3f4; border-color: #b9dadf; color: #07525d; }
@media (hover: hover) { .hc-toggle:hover { border-color: var(--ink); } }

/* Transport: horizontal bars (also school fees) */
.hc-hbars { margin-top: 10px; display: grid; gap: 9px; }
.hc-hbars li { display: grid; grid-template-columns: 76px 1fr 38px; align-items: center; gap: 10px; font-size: 0.85rem; }
.hb-b { display: block; height: 10px; }
.hb-b i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: left; transition: transform 0.8s var(--ease) calc(0.3s + var(--k, 0) * 90ms); }
.hc-hbars .flag .hb-b i { background: var(--signal); }
.hb-v { font-family: var(--font-mono); font-size: 0.8rem; text-align: right; }
.hc-hbars .flag .hb-v, .hc-hbars .flag .hb-l { color: #9a4f00; }
.hc-set.is-out .hb-b i { transform: scaleX(0); transition: none; }

/* Transport: gauge */
.hc-gauge { max-width: 190px; margin-inline: auto; display: block; }
.hc-gauge path { fill: none; stroke-width: 12; stroke-linecap: butt; }
.hc-gauge .g-ok { stroke: #cfe6e9; }
.hc-gauge .g-bad { stroke: #f6d9b4; }
.hc-gauge .g-ticks line { stroke: #b3c1ca; stroke-width: 1.5; }
.g-needle { transform-box: view-box; transform-origin: 90px 86px; transform: rotate(var(--na)); transition: transform 1s var(--ease) 0.3s; }
.g-needle line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.g-needle circle { fill: var(--ink); }
.hc-set.is-out .g-needle { transform: rotate(-90deg); transition: none; }
.hc-gauge-v { margin-top: 4px; text-align: center; font-size: 0.85rem; color: var(--muted); }
.hc-gauge-v b { display: block; font-weight: 600; font-size: 1.6rem; letter-spacing: -0.03em; color: #9a4f00; font-variant-numeric: tabular-nums; }

/* Transport: heat strip */
.hc-heat { margin-top: 10px; display: grid; grid-template-columns: 12px repeat(12, 1fr); gap: 3px; align-items: center; }
.hc-heat .ht-d { font: 500 0.6rem/1 var(--font-mono); color: var(--muted); }
.hc-heat i { aspect-ratio: 1; border-radius: 3px; background: rgb(10 118 134 / var(--o, 0.3)); }
.hc-heat .ht-a { background: var(--signal); }
.ht-key { display: flex; align-items: center; gap: 5px; color: #9a4f00; }
.ht-key i { width: 8px; height: 8px; border-radius: 2px; background: var(--signal); }

/* Transport: alert */
.hc-alert-t { margin-top: 10px; font-size: 0.95rem; line-height: 1.45; }
.hc-alert-t b { font-weight: 600; }
.hc-alert .hc-head span:first-child { color: #9a4f00; }

/* Wholesale: customer list */
.hc-people { margin-top: 8px; }
.hc-people li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #edf0f2; font-size: 0.875rem; }
.pp-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #e7f3f4; color: #07525d; font: 600 0.68rem/1 var(--font); }
.pp-d { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.hc-people .flag .pp-av { background: var(--find-bg); color: var(--find-ink); }
.hc-people .flag .pp-d { padding: 3px 8px; border-radius: 9999px; background: var(--find-bg); color: #9a4f00; }

/* Wholesale: donut */
.hc-donut { margin-top: 10px; display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 16px; }
.hc-donut svg { width: 100px; height: 100px; }
.hc-donut circle { fill: none; stroke-width: 14; }
.hc-donut .d-a { stroke: var(--accent); }
.hc-donut .d-b { stroke: #b3c1ca; }
.hc-donut .d-c { stroke: var(--signal); }
.dn-g { transform-origin: 50px 50px; transform: rotate(-90deg); transition: transform 1s var(--ease) 0.3s, opacity 0.6s ease 0.3s; }
.hc-set.is-out .dn-g { transform: rotate(-200deg); opacity: 0; transition: none; }
.hc-donut ul { display: grid; gap: 6px; font-size: 0.82rem; }
.hc-donut li { display: flex; align-items: center; gap: 8px; }
.hc-donut li i { width: 9px; height: 9px; border-radius: 2px; }
.hc-donut li i.d-a { background: var(--accent); }
.hc-donut li i.d-b { background: #b3c1ca; }
.hc-donut li i.d-c { background: var(--signal); }
.hc-donut li b { margin-left: auto; font: 500 0.78rem/1 var(--font-mono); }

/* Wholesale: weekly orders columns */
.hc-cols rect { transform-box: fill-box; transform-origin: bottom; transition: transform 0.7s var(--ease) calc(0.3s + var(--k, 0) * 50ms); }
.hc-cols .cb { fill: var(--accent); fill-opacity: 0.75; }
.hc-cols .cb-a { fill: var(--signal); }
.hc-cols .cb-f { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.hc-set.is-out .hc-cols rect { transform: scaleY(0); transition: none; }

/* Wholesale: call list */
.hc-calls { margin-top: 6px; }
.hc-calls li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #edf0f2; }
.hc-calls li > span { display: grid; font-size: 0.875rem; line-height: 1.3; }
.hc-calls b { font-weight: 500; }
.hc-calls small { font-size: 0.75rem; color: var(--muted); }
.hc-call {
  flex: none; min-height: 36px; min-width: 72px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 9999px;
  background: #fff; cursor: pointer; font-weight: 500; font-size: 0.8rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.hc-call[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (pointer: coarse) { .hc-call { min-height: 44px; } }

/* School: instalment stepper */
.hc-stepc { position: relative; }
.hc-stepper { position: relative; margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); }
.hc-stepper::before { content: ""; position: absolute; left: 9px; right: calc(33.3% - 9px); top: 8px; height: 2px; background: var(--line-2); }
.hc-stepper li { position: relative; display: grid; gap: 2px; font-size: 0.82rem; }
.hc-stepper li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; margin-bottom: 8px; position: relative; z-index: 1; }
.hc-stepper li.done i { background: var(--accent); border-color: var(--accent); }
.hc-stepper li b { font-weight: 500; }
.hc-stepper li span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.st-run { position: absolute; left: 29px; top: 60px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); opacity: 0; }

/* School: SMS reminder */
.hc-sms { margin-top: 10px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--mist); font-size: 0.85rem; line-height: 1.45; }

/* Idle motion while the hero is on screen. main.js adds .is-live only when the hero is visible,
   motion is allowed and the visitor has not paused it. */
@media (prefers-reduced-motion: no-preference) {
  .js .hc { animation: hc-in 0.9s var(--ease) calc(var(--i) * 80ms) backwards, hc-float var(--ft) ease-in-out calc(var(--i) * -1.7s) infinite alternate; animation-play-state: running, paused; }
  .hero-cards.is-live .hc { animation-play-state: running, running; }
  .hero-cards.is-live .hc-rows li { animation: hc-scan 6s ease-in-out calc(var(--r, 0) * 0.45s) infinite; }
  .hero-cards.is-live .hc-rows .flag .hc-val, .hero-cards.is-live .hc-flag i, .hero-cards.is-live .hc-hbars .flag .hb-v,
  .hero-cards.is-live .hc-people .flag .pp-d, .hero-cards.is-live .hc-cal .cw-l { animation: hc-blink 2.4s ease-in-out infinite; }
  .hero-cards.is-live .hc-ring { opacity: 1; animation: pulse 2.4s ease-out infinite; }
  .hero-cards.is-live .hc-set.is-out .hc-ring { opacity: 0; }
  .hero-cards.is-live .g-needle line { transform-box: view-box; transform-origin: 90px 86px; animation: needle 2.8s ease-in-out infinite alternate; }
  .hero-cards.is-live .hc-heat i { animation: hc-twinkle 4s ease-in-out var(--t, 0s) infinite; }
  .hero-cards.is-live .hc-heat .ht-a { animation: hc-blink 1.8s ease-in-out var(--t, 0s) infinite; }
  .hero-cards.is-live .hc-cols .cb-f { animation: hc-dash 1.2s linear infinite; }
  .hero-cards.is-live .dn-g .d-c { animation: hc-blink 2.4s ease-in-out infinite; }
  .hero-cards.is-live .st-run { opacity: 1; animation: st-run 3.2s ease-in-out infinite; }
}
@keyframes hc-float { from { translate: 0 -6px; } to { translate: 0 6px; } }
@keyframes hc-scan { 0%, 14%, 100% { background-color: transparent; } 7% { background-color: rgb(10 118 134 / 0.08); } }
@keyframes hc-blink { 50% { opacity: 0.4; } }
@keyframes hc-twinkle { 0%, 100% { filter: none; } 50% { filter: brightness(1.18) saturate(1.2); } }
@keyframes hc-dash { to { stroke-dashoffset: -12; } }
@keyframes needle { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes st-run { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { translate: 86px 0; opacity: 0; } }

.hero-foot { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.hero-note, .hero-pause { font: 500 0.7rem/1.4 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.hero-pause { min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
@media (hover: hover) { .hero-pause:hover { color: var(--text); } }
html:not(.js) .hero-pause { display: none; }

@media (min-width: 640px) {
  .hero-cards { grid-template-columns: 1fr 1fr; }
}
/* Wide screens: the Steep composition. Copy in the middle, four cards around it; main.js sets each card's spot per sector. */
@media (min-width: 1360px) {
  .hero { padding-block: 0; }
  .hero-in { position: relative; min-height: 940px; }
  .hero-copy { position: relative; z-index: 1; align-items: center; text-align: center; padding-top: 190px; max-width: 820px; margin-inline: auto; }
  h1 { max-width: 13em; font-size: 4.6rem; line-height: 1.02; }
  .lede { max-width: 36em; }
  .hero .cta-row { justify-content: center; }
  .hero-cards { margin: 0; display: block; }
  .hc { position: absolute; width: var(--w, 290px); }
  .hc-set[data-set="shop"] .hc:nth-child(1) { left: var(--gutter); top: 24px; }
  .hc-set[data-set="shop"] .hc:nth-child(2) { right: var(--gutter); top: 300px; }
  .hc-set[data-set="shop"] .hc:nth-child(3) { left: calc(var(--gutter) + 16px); top: 560px; }
  .hc-set[data-set="shop"] .hc:nth-child(4) { left: calc(50% + 60px); top: 715px; }
  .hero-foot { position: absolute; right: var(--gutter); bottom: 12px; margin: 0; }
}
@keyframes hc-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Sector switcher: the active sector shows how long until the next one */
.seg-btn { position: relative; overflow: hidden; }
.seg-btn::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; opacity: 0;
}
.seg.is-cycling .seg-btn[aria-pressed="true"]::after { opacity: 1; animation: seg-progress var(--cycle, 7s) linear forwards; }
@keyframes seg-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero-pause { display: none; } }

/* Services */
.svc { display: grid; gap: 0 56px; }
.svc li { padding: 28px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.svc h3 { font-weight: 500; font-size: 1.3rem; letter-spacing: -0.02em; }
.svc p { margin-top: 8px; color: var(--muted); max-width: 46ch; }
.svc .more { margin-top: 8px; }
@media (min-width: 800px) { .svc { grid-template-columns: 1fr 1fr; } }

/* Sample findings report: tabs on the left, one report page on the right */
.sample { background: var(--mist); }
.sample-in { display: grid; gap: 40px; }
.sample-in > * { min-width: 0; }
.rep-tabs { margin-top: 32px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rep-tabs::-webkit-scrollbar { display: none; }
.rep-tab {
  flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 16px; gap: 10px;
  border: 1px solid var(--line-2); border-radius: 9999px; background: transparent; cursor: pointer;
  color: var(--muted); font-weight: 500; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.rep-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rep-method { display: none; font: 500 0.75rem/1 var(--font-mono); color: var(--muted); }
.viz-toggle { margin-top: 24px; }
.rep-card {
  min-width: 0; padding: 20px; border-radius: var(--radius); background: #fff;
  box-shadow: 0 0 0 1px rgb(4 23 43 / 0.05), 0 8px 40px rgb(4 23 43 / 0.08);
}
.rep-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px;
  padding-bottom: 14px; border-bottom: 1px solid #edf0f2;
}
.rep-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.035em; }
.rep-mark { width: 18px; height: 18px; }
.rep-page { font-size: 0.75rem; color: var(--muted); }
.rep-panel { padding-top: 22px; outline-offset: 6px; }
.rep-panel.is-entering { animation: rep-in 0.45s var(--ease) both; }
@keyframes rep-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rep-kind { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--accent); }
.rep-panel h3 { margin-top: 10px; font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.03em; max-width: 34ch; text-wrap: balance; }
.rep-body { margin-top: 22px; display: grid; gap: 20px; }
.rep-body .viz { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.detail { color: var(--body); font-size: 0.95rem; }
.a-meta { margin-top: 16px; display: grid; gap: 12px; }
.a-meta dd { margin-top: 2px; font-size: 0.925rem; }
.rep-action { margin-top: 22px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--find-bg); color: var(--find-ink); }
.rep-action .cap { display: block; margin-bottom: 4px; color: var(--find-mid); }
.rep-foot { margin-top: 18px; font-size: 0.72rem; color: var(--muted); }
@media (min-width: 700px) {
  .rep-card { padding: 28px 32px; }
  .rep-body { grid-template-columns: 1.25fr 1fr; align-items: start; }
}
@media (min-width: 1100px) {
  .sample-in { grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; }
  .sample-side { position: sticky; top: calc(var(--nav-h) + 32px); }
  .rep-tabs { flex-direction: column; gap: 0; overflow: visible; margin-top: 36px; }
  .rep-tab {
    justify-content: space-between; min-height: 58px; padding: 0 4px; border: 0; border-top: 1px solid var(--line-2);
    border-radius: 0; font-size: 1.05rem; background: none;
  }
  .rep-tab:last-child { border-bottom: 1px solid var(--line-2); }
  .rep-tab[aria-selected="true"] { background: none; color: var(--text); }
  .rep-tab[aria-selected="true"] span:first-child { display: flex; align-items: center; gap: 10px; }
  .rep-tab[aria-selected="true"] span:first-child::before { content: ""; width: 8px; height: 8px; background: var(--signal); }
  .rep-method { display: inline; }
  @media (hover: hover) { .rep-tab:hover { color: var(--text); } }
}

/* Scroll-through (wide screens, when it fits): the report pins while scrolling steps through its pages. */
.sample-track { position: relative; }
.sample-zones { display: none; }
.sample.is-scrolly .sample-track { height: calc(var(--pin-h) + var(--scroll-d)); }
.sample.is-scrolly .sample-zones { display: block; position: absolute; left: 0; top: 0; width: 1px; height: var(--scroll-d); pointer-events: none; }
.sample.is-scrolly .sample-zones i { display: block; height: 25%; }
.sample.is-scrolly .sample-in { position: sticky; top: var(--pin-top); }
.sample.is-scrolly .sample-side { position: static; }

/* How it works: a workflow of four stops. The active stop opens a small scene of what happens there.
   Wide screens (1200px+): the stops zig-zag across a dotted canvas, drawn at 1296 x 610 and scaled to fit
   (main.js sets --k). Narrower screens: the stops become a 2 x 2 grid with the scene in one fixed area below.
   main.js cycles through the stops; a click jumps to a stop and the cycle carries on from there. */
.wf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.wf-pause {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 9999px; background: #fff; cursor: pointer;
  font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
@media (hover: hover) { .wf-pause:hover { color: var(--text); border-color: var(--ink); } }
html:not(.js) .wf-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .wf-pause { display: none; } }

/* Narrow layout (default) */
.wf-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wf-lines, .wf-records, .wf-legend { display: none; }
.wf-node {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 44px;
  padding: 14px 16px; border: 2px solid transparent; border-radius: 18px; background: #fff; box-shadow: var(--lift);
  cursor: pointer; text-align: left; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s, background-color 0.3s;
}
.wf-node[data-i="0"] { grid-row: 1; grid-column: 1; }
.wf-node[data-i="1"] { grid-row: 1; grid-column: 2; }
.wf-node[data-i="2"] { grid-row: 2; grid-column: 1; }
.wf-node[data-i="3"] { grid-row: 2; grid-column: 2; }
.wf-node-t { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; }
.wf-node-t i {
  flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--accent);
  background-image: linear-gradient(90deg, transparent 47%, rgb(255 255 255 / 0.35) 47% 53%, transparent 53%), linear-gradient(transparent 47%, rgb(255 255 255 / 0.35) 47% 53%, transparent 53%);
}
.wf-end .wf-node-t i { background-color: var(--signal); }
.wf-node-d { font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.wf-pill {
  padding: 3px 9px; border-radius: 9999px; background: #e7f3f4; color: #07525d;
  font: 500 0.66rem/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.wf-end .wf-pill { background: var(--find-bg); color: var(--find-mid); }
.wf-node[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 18px 40px rgb(4 23 43 / 0.14); }
.wf-end[aria-expanded="true"] { border-color: var(--signal); background: #fff8ee; }
.wf-end[aria-expanded="true"] .wf-node-t { color: #9a4f00; }
@media (hover: hover) { .wf-node:hover { transform: translateY(-2px); } }

.wf-scene {
  grid-row: 3; grid-column: 1 / -1; position: relative; z-index: 3;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98);
  transition: opacity 0.4s ease, transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.wf-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s ease 0.05s, transform 0.5s var(--ease) 0.05s, visibility 0s; }
.wf-card { padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgb(4 23 43 / 0.06), 0 14px 36px rgb(4 23 43 / 0.12); }
.wf-io { margin-top: 12px; padding-top: 10px; border-top: 1px solid #edf0f2; font-size: 0.85rem; line-height: 1.45; color: var(--body); }
.wf-io .cap { display: block; font-size: 0.66rem; }

/* Scene: intake call */
.wf-cal { display: flex; align-items: center; gap: 12px; }
.wf-cal b { display: block; font-weight: 600; font-size: 0.95rem; }
.wf-cal span { font-size: 0.8rem; color: var(--muted); }
.wf-date { width: 50px; height: 50px; flex: none; border-radius: 12px; background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wf-date span { font: 500 0.6rem/1 var(--font-mono); color: #9dabb5; }
.wf-date b { font-size: 1.2rem; line-height: 1.1; }
.wf-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.wf-chips span { padding: 4px 10px; border-radius: 9999px; background: var(--mist); font-size: 0.78rem; }
.wf-chips .amber { background: var(--find-bg); color: var(--find-ink); }

/* Scene: data review */
.wf-clean { display: flex; align-items: center; gap: 10px; }
.wf-messy { width: 104px; flex: none; display: flex; flex-direction: column; gap: 5px; }
.wf-messy span { padding: 5px 7px; border-radius: 4px; background: #fff; border: 1px solid var(--line); font: 500 0.6rem/1.2 var(--font-mono); }
.wf-messy .r1 { transform: rotate(-3deg); }
.wf-messy .r2 { transform: rotate(2deg); background: #e7f3f4; border: 0; border-radius: 8px 8px 8px 2px; font-family: var(--font); font-size: 0.66rem; }
.wf-messy .r3 { transform: rotate(-1deg); }
.wf-arrow { width: 40px; height: 20px; flex: none; }
.wf-arrow-l { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 3 4; }
.wf-arrow-h { fill: none; stroke: var(--accent); stroke-width: 2; }
.wf-table { flex-grow: 1; border-collapse: collapse; font-size: 0.72rem; }
.wf-table th { padding: 4px 0; border-bottom: 1px solid var(--line); font: 500 0.6rem/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: left; }
.wf-table td { padding: 4px 0; border-bottom: 1px solid #f0f3f4; }
.wf-table tr:last-child td { border-bottom: 0; }
.wf-table th:last-child, .wf-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.wf-table .flag td { color: #9a4f00; }

/* Scene: findings report */
.wf-leak { padding: 10px 12px; border-radius: 12px; background: var(--find-bg); }
.wf-leak .cap { display: block; font-size: 0.6rem; color: var(--find-mid); }
.wf-leak b { display: block; margin-top: 3px; font-weight: 600; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--find-ink); }
.wf-call { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--ink); color: #e9eef1; font-size: 0.78rem; }
.wf-av { display: flex; }
.wf-av i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 0.6rem/1 var(--font); font-style: normal; background: #22313a; }
.wf-av i:first-child { background: var(--accent); }
.wf-av i + i { margin-left: -6px; }

/* Scene: action plan */
.wf-plan li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.8rem; }
.wf-plan li + li { border-top: 1px solid #edf0f2; }
.wf-plan i { position: relative; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 5px; border: 1.5px solid #b3c1ca; }
.wf-plan .done i { background: var(--accent); border-color: var(--accent); }
.wf-plan .done i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wf-plan span { flex-grow: 1; }
.wf-plan .done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.wf-plan em { padding: 2px 8px; border-radius: 9999px; background: #e7f3f4; color: #07525d; font-style: normal; font-size: 0.66rem; white-space: nowrap; }
.wf-plan li:last-child em { background: var(--mist); color: var(--body); }

@media (min-width: 640px) {
  .wf-card { max-width: 420px; }
  .wf-scene { justify-self: center; width: 100%; max-width: 420px; }
}

/* Wide layout: the zig-zag canvas */
@media (min-width: 1200px) {
  .js .wf-wrap { --k: 1; position: relative; height: calc(610px * var(--k)); }
  .js .wf-stage {
    position: absolute; left: 0; top: 0; display: block; width: 1296px; height: 610px;
    transform: scale(var(--k)); transform-origin: top left;
    border-radius: 24px; border: 1px solid var(--line); background-color: #fafbfb;
    background-image: radial-gradient(#d5dde2 1px, transparent 1px); background-size: 22px 22px; overflow: hidden;
  }
  .js .wf-lines { display: block; position: absolute; left: 0; top: 0; width: 1296px; height: 610px; }
  .wf-in { fill: none; stroke: #b3c1ca; stroke-width: 1.5; stroke-dasharray: 3 5; }
  .wf-link { fill: none; stroke: #b3c1ca; stroke-width: 2; stroke-dasharray: 6 6; transition: stroke 0.4s; }
  .wf-link.is-done { stroke: var(--accent); }
  .wf-link-end.is-done { stroke: var(--signal); }
  .wf-packet { fill: var(--accent); }
  .wf-packet-end { fill: var(--signal); }
  .js .wf-records { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 48px; top: 424px; }
  .wf-records .cap { margin-bottom: 4px; font-size: 0.66rem; line-height: 16px; }
  .wf-records span { width: 156px; height: 32px; box-sizing: border-box; padding: 0 12px; display: flex; align-items: center; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 0.8rem; }
  .js .wf-legend { display: flex; gap: 14px; position: absolute; right: 24px; top: 20px; font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
  .wf-legend span { display: flex; align-items: center; gap: 6px; }
  .wf-legend i { width: 8px; height: 8px; background: var(--accent); }
  .wf-legend i.amber { background: var(--signal); }
  .js .wf-node { position: absolute; z-index: 2; width: 250px; height: 110px; box-sizing: border-box; padding: 16px 18px; gap: 8px; }
  .js .wf-node .wf-node-t { font-size: 1.06rem; }
  .js .wf-node[data-i="0"] { left: 60px; top: 60px; }
  .js .wf-node[data-i="1"] { left: 370px; top: 440px; }
  .js .wf-node[data-i="2"] { left: 680px; top: 60px; }
  .js .wf-node[data-i="3"] { left: 990px; top: 440px; }
  .js .wf-node[data-i="0"][aria-expanded="true"], .js .wf-node[data-i="2"][aria-expanded="true"] { transform: translateY(-4px); }
  .js .wf-node[data-i="1"][aria-expanded="true"], .js .wf-node[data-i="3"][aria-expanded="true"] { transform: translateY(4px); }
  .js .wf-scene { position: absolute; width: 300px; max-width: none; }
  .js .wf-card { max-width: none; }
  .js .wf-scene[data-i="0"] { left: 35px; top: 186px; }
  .js .wf-scene[data-i="1"] { left: 345px; bottom: 186px; }
  .js .wf-scene[data-i="2"] { left: 655px; top: 186px; }
  .js .wf-scene[data-i="3"] { left: 965px; bottom: 186px; }
  .js .wf-below { transform: translateY(-12px) scale(0.97); }
  .js .wf-above { transform: translateY(12px) scale(0.97); }
  .js .wf-scene.is-on { transform: none; }
  /* the pointer from the scene back to its stop */
  .js .wf-scene::before {
    content: ""; position: absolute; left: 110px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); z-index: 1;
  }
  .js .wf-below::before { top: -7px; box-shadow: -1px -1px 0 rgb(4 23 43 / 0.06); }
  .js .wf-above::before { bottom: -7px; box-shadow: 1px 1px 0 rgb(4 23 43 / 0.06); }
  .js .wf-card { position: relative; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) { .wf-packet { display: none; } }

/* About */
.about { padding-top: 0; }
.about-in { display: grid; gap: 32px; }
.about-lead { font-size: 1.15rem; color: var(--body); max-width: 40em; }
.about-rows { margin-top: 32px; }
.about-rows div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.about-rows div:last-child { border-bottom: 1px solid var(--line); }
.about-rows dt { font-weight: 500; }
.about-rows dd { color: var(--muted); }
@media (min-width: 640px) { .about-rows div { grid-template-columns: 220px 1fr; gap: 24px; } }
@media (min-width: 1000px) { .about-in { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Contact */
.contact { background: var(--mist); }
.contact-in { display: grid; gap: 40px; }
.contact-list { margin-top: 32px; display: grid; gap: 18px; }
.contact-list dd { margin-top: 2px; font-size: 1.1rem; overflow-wrap: anywhere; }
.contact-list a { text-decoration: none; }
@media (hover: hover) { .contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.cform { padding: 24px 20px; border-radius: var(--radius); background: #fff; box-shadow: var(--lift); display: grid; gap: 18px; }
.req-note { font-size: 0.85rem; color: var(--muted); }
.req { color: #a8430a; }
.field { display: grid; gap: 6px; align-content: start; }
.field-row { display: grid; gap: 18px; }
.field label { font-weight: 500; font-size: 0.95rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px;
  background: #fafbfb; font-size: 1rem; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(10 118 134 / 0.18); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.select-wrap { position: relative; }
.select-wrap select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.help { font-size: 0.85rem; color: var(--muted); }
.err { font-size: 0.875rem; color: #b3261e; }
.consent { font-size: 0.85rem; color: var(--muted); }
.consent a { color: var(--text); text-underline-offset: 3px; }
.cform-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form-status { font-size: 0.925rem; }
.form-status a { color: var(--accent); }
@media (min-width: 600px) { .cform { padding: 32px; } .field-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .contact-in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; } }

/* Massive footer: call to action, links, and the name set as large as the page allows */
.mega-foot {
  position: relative; overflow: hidden; margin-top: 0; padding-top: 80px;
  background: var(--ink); color: #e9eef1; border-radius: 32px 32px 0 0;
}
.mega-foot .cap { color: #8e9ca6; }
.mf-top { display: grid; gap: 48px; }
.mf-cta h2 { color: #fff; font-size: clamp(2.2rem, 5.6vw, 3.9rem); max-width: 16ch; }
.mf-cta p { margin-top: 20px; max-width: 34em; font-size: 1.1rem; color: #9dabb5; }
.mf-contact { display: grid; gap: 20px; align-content: start; }
.mf-contact dd { margin-top: 4px; font-size: 1.1rem; overflow-wrap: anywhere; }
.mf-contact a { text-decoration: none; }
.mf-links { margin-top: 72px; padding-top: 32px; border-top: 1px solid #22313a; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.mf-links nav, .mf-links > div { display: flex; flex-direction: column; align-items: flex-start; }
.mf-links .cap { margin-bottom: 6px; }
.mf-links a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: #e9eef1; }
@media (hover: hover) { .mf-links a:hover, .mf-contact a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #5b6b75; } }
.mf-copy { margin-top: 12px; font-size: 0.85rem; color: #8e9ca6; }
.mega {
  display: flex; align-items: flex-end; gap: 0.08em; margin-top: 56px; padding-inline: var(--gutter);
  max-width: 1440px; margin-inline: auto;
  font-size: min(calc((min(100vw, 1440px) - 2 * var(--gutter)) / 6), 240px);
  line-height: 1; white-space: nowrap; margin-bottom: -0.2em;
}
.mega-mark { width: 0.7em; height: 0.7em; margin-bottom: 0.21em; }
.mega-mark .bm-on { fill: #3cd6e0; }
.mega-mark .bm-hit { fill: #f5a524; }
.mega-mark .bm-off { stroke: #9dabb5; opacity: 0.5; }
.mega span { font-weight: 600; letter-spacing: -0.05em; color: #fff; }
@media (min-width: 900px) {
  .mega-foot { padding-top: 104px; }
  .mf-top { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }
  .mf-links { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 96px; }
}

/* Legal pages share the header and a short footer */
.nav-back { margin-left: auto; }
.legal { padding-block: 56px 104px; max-width: 820px; }
.legal h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); max-width: none; }
.legal .meta { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.legal .lead { margin-top: 24px; font-size: 1.1rem; color: var(--body); max-width: 62ch; }
.toc { margin-top: 32px; padding: 20px 24px; border-radius: var(--radius-sm); background: var(--mist); }
.toc ol { list-style: decimal; padding-left: 1.25rem; display: grid; gap: 0 32px; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.legal section.clause { padding-block: 0; margin-top: 48px; }
.legal h2 { font-size: 1.35rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; max-width: none; }
.legal p, .legal li { color: var(--body); max-width: 68ch; }
.legal h2 + p, .legal h2 + ul, .legal h2 + dl { margin-top: 12px; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 14px; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal li + li { margin-top: 8px; }
.legal .toc li + li { margin-top: 0; }
.legal li strong { color: var(--text); font-weight: 600; }
.legal a:not(.btn) { text-underline-offset: 3px; text-decoration-color: var(--line-2); }
@media (hover: hover) { .legal a:not(.btn):hover { text-decoration-color: var(--accent); } }
.details { margin-top: 16px; }
.details div { padding: 12px 0; border-top: 1px solid var(--line); }
.details dd { margin-top: 2px; font-family: var(--font-mono); font-size: 0.9rem; color: var(--text); overflow-wrap: anywhere; }
@media (min-width: 700px) { .toc ol { grid-template-columns: 1fr 1fr; } }
.editable {
  display: inline-block; margin-top: 16px; padding: 8px 12px;
  font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.04em;
  border: 1px dashed var(--line-2); border-radius: 8px; color: var(--muted);
}
.footer { border-top: 1px solid var(--line); padding-block: 32px; }
.footer-in { display: grid; gap: 8px; color: var(--muted); font-size: 0.9rem; }
.foot-name { color: var(--text); font-weight: 600; letter-spacing: -0.02em; }
.foot-name .mono { color: var(--muted); font-weight: 400; margin-left: 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-underline-offset: 4px; }
@media (hover: hover) { .foot-links a:hover { color: var(--text); } }
@media (min-width: 900px) { .footer-in { grid-template-columns: auto auto; justify-content: space-between; align-items: center; } }

/* Scroll reveal (only when JS is on and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* Report charts: interaction and movement. Movement runs only while the chart is on screen and not paused (main.js sets .live). */
.viz {
  background-color: var(--bg); border-bottom: 1px solid var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 5.5556% 11.7647%;
}
.viz svg { display: block; width: 100%; height: auto; }
.viz .g2 { stroke: var(--line-2); }
.viz text { font: 500 12px var(--font-mono); letter-spacing: 0.04em; fill: var(--muted); }
.viz .ta { fill: var(--signal); }
.viz .c { fill: var(--accent); }
.viz .m { fill: var(--muted); }
.viz .a { fill: var(--signal); }
.viz .as { stroke: var(--signal); fill: none; }
.viz .line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.viz .fl { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 4 4; }
.viz .band { fill: var(--accent); fill-opacity: 0.14; }
.viz .ts { stroke: var(--line-2); stroke-dasharray: 2 4; }
.viz .nb { fill: var(--accent); fill-opacity: 0.08; stroke: var(--accent); stroke-opacity: 0.35; stroke-dasharray: 3 4; }
.viz .pulse { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .analysis .line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .analysis.in .line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) 0.2s; }
  .js .analysis .pt { opacity: 0; }
  .js .analysis.in .pt { opacity: 1; transition: opacity 0.6s calc(0.25s + var(--i, 0) * 70ms); }
  .js .analysis .bar { transform: scaleX(0); transform-box: fill-box; transform-origin: left; }
  .js .analysis.in .bar { transform: none; transition: transform 0.9s var(--ease) calc(0.2s + var(--i, 0) * 110ms); }
}
@keyframes pulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
.viz { position: relative; }
.viz .cl { cursor: pointer; outline: none; transition: opacity 0.2s; }
.viz .hit { fill: transparent; }
.viz .sweep, .viz .rider, .viz .pulse, .viz .ring { pointer-events: none; }
.viz:has(.cl:hover) .cl:not(:hover), .viz:has(.cl:focus-visible) .cl:not(:focus-visible) { opacity: 0.35; }
.viz .cl:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.viz .cl:hover .c, .viz .cl:hover .m, .viz .cl:hover .a { filter: brightness(1.25); }
.viz-tip {
  position: absolute; z-index: 2; max-width: 220px; padding: 8px 10px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 2px;
  font: 500 0.75rem/1.45 var(--font-mono); color: var(--text);
}
.viz-tip[hidden] { display: none; }
.viz .rider { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.viz .sweep { transform: translateX(0); }
.analysis:not(.live) .rider { opacity: 0.0; }
@keyframes dg { from { transform: translate(calc(var(--tx) * -1), calc(var(--ty) * -1)) rotate(calc(var(--r) * -1)); } to { transform: translate(var(--tx), var(--ty)) rotate(var(--r)); } }
@keyframes ride { 0% { transform: translate(20px, 95.4px); } 2.5% { transform: translate(28px, 96.7px); } 5% { transform: translate(36px, 87.4px); } 7.5% { transform: translate(44px, 92.4px); } 10% { transform: translate(52px, 92.3px); } 12.5% { transform: translate(60px, 94.5px); } 15% { transform: translate(68px, 94.5px); } 17.5% { transform: translate(76px, 105.3px); } 20% { transform: translate(84px, 103.4px); } 22.5% { transform: translate(92px, 113px); } 25% { transform: translate(100px, 117.9px); } 27.5% { transform: translate(108px, 120.1px); } 30% { transform: translate(116px, 118.9px); } 32.5% { transform: translate(124px, 124.5px); } 35% { transform: translate(132px, 116.4px); } 37.5% { transform: translate(140px, 116.5px); } 40% { transform: translate(148px, 110.3px); } 42.5% { transform: translate(156px, 101.4px); } 45% { transform: translate(164px, 96px); } 47.5% { transform: translate(172px, 92.3px); } 50% { transform: translate(180px, 85.7px); } 52.5% { transform: translate(188px, 76.9px); } 55% { transform: translate(196px, 77px); } 57.5% { transform: translate(204px, 69px); } 60% { transform: translate(212px, 73.4px); } 62.5% { transform: translate(220px, 72.1px); } 65% { transform: translate(228px, 76.9px); } 67.5% { transform: translate(236px, 81.4px); } 70% { transform: translate(244px, 86.6px); } 72.5% { transform: translate(252px, 91.8px); } 75% { transform: translate(260px, 96.5px); } 77.5% { transform: translate(268px, 100.2px); } 80% { transform: translate(276px, 102.4px); } 82.5% { transform: translate(284px, 102.9px); } 85% { transform: translate(292px, 101.5px); } 87.5% { transform: translate(300px, 98.3px); } 90% { transform: translate(308px, 93.5px); } 92.5% { transform: translate(316px, 87.5px); } 95% { transform: translate(324px, 80.7px); } 97.5% { transform: translate(332px, 73.7px); } 100% { transform: translate(340px, 67px); } }
@keyframes wob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bandpulse { 0%, 100% { transform: scaleY(0.9); } 50% { transform: scaleY(1.12); } }
@keyframes ringpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.6; } }
@keyframes sweepx { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(210px); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .analysis.live .dg { transform-box: fill-box; transform-origin: center; animation: dg var(--t, 7s) ease-in-out infinite alternate; }
  .analysis.live .rider { animation: ride 9s linear infinite; }
  .analysis.live .wob { animation: wob var(--t, 3s) ease-in-out infinite; animation-delay: var(--s, 0s); }
  .analysis.live .bob { animation: bob 2.4s ease-in-out infinite; animation-delay: var(--s, 0s); }
  .analysis.live .bandpulse { transform-box: fill-box; transform-origin: left center; animation: bandpulse 4s ease-in-out infinite; }
  .analysis.live .ring { transform-box: fill-box; transform-origin: center; animation: ringpulse 3.2s ease-in-out infinite; }
  .analysis.live .sweep { animation: sweepx 5s ease-in-out infinite; }
  .analysis.live .pulse { animation: pulse 2.6s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .viz .rider { display: none; } .viz-toggle { display: none; } }