/* ============================================================================
   a77.ch — design code v5 "FIELD NOTES"
   Monochrome, neutral (no warm/cool tint), inversion instead of colour.
   No cards, no shadows, no rounded corners — typography, whitespace, hairlines.
   One expressive moment per section (a single line-art mark); everything
   else stays quiet. Static by default: motion is limited to hover/theme.
   01 tokens · 02 reset · 03 chrome · 04 hero · 05 sections · 06 rows
   07 contact · 08 footer · 09 brand guide
   ========================================================================= */

/* ---- 00 · FONT ----------------------------------------------------------
   Self-hosted, not Google Fonts: a visitor's first request should not tell
   a third party they exist. Archivo ships as one variable file — the same
   bytes serve every weight from 400 to 700, so there is exactly one font
   request on the whole site, ever.                                        */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-400-700.woff2") format("woff2");
}

/* ---- 01 · TOKENS -------------------------------------------------------
   Every value is a true neutral grey (R=G=B) — no warm or cool bias at all.
   The palette has exactly two colours, black and white; dark/light themes
   are the same system with the roles swapped.                             */
:root {
  --bg: #101010;   /* soft black, not pure #000 */
  --fg: #f4f4f4;   /* soft white, not pure #fff */

  --line:        color-mix(in srgb, var(--fg) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--fg) 30%, transparent);
  --muted:       color-mix(in srgb, var(--fg) 56%, transparent);
  --wash:        color-mix(in srgb, var(--fg) 6%, transparent);

  --pad: clamp(20px, 4vw, 64px);
  --maxw: 1240px;
  /* One left/right edge for the whole page: --pad on small screens, and on wide
     ones whatever centres a --maxw column. Header, hero and every section use it,
     so their text starts on the same vertical line at any width. The percentage
     resolves where the property is used, i.e. against the full-width block. */
  --gutter: max(var(--pad), calc((100% - var(--maxw)) / 2));
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

html[data-theme="light"] {
  --bg: #f4f4f4;
  --fg: #101010;
}

/* ---- 02 · RESET --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` must always win: without this, any class that sets display
   (.lead is a grid) silently overrides it and the element stays on screen. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--ease) .25s, color var(--ease) .25s;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1; text-transform: lowercase; }
p { margin: 0; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--fg); color: var(--bg); padding: 12px 18px; font-weight: 600; }
.skip:focus { left: 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
/* Inside a section the section already carries the gutter — a second one here
   is what used to push every section 51px right of the header and hero. */
.sec > .wrap, .contact > .wrap { padding-inline: 0; }
.muted { color: var(--muted); }

.idx {
  display: block; margin-bottom: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
/* a77 is always lowercase, even inside an uppercase label. */
.keep-case { text-transform: lowercase; }

/* Line-art mark — one per section. Drawn at full strength, not as a ghost:
   the graphic language is part of the page, not a watermark behind it. */
.motif { color: var(--fg); opacity: .9; }
.motif svg { width: 100%; height: 100%; }

/* ---- 03 · CHROME --------------------------------------------------------
   .head-shell carries the sticky positioning (not .head itself), so that on
   pages with a .mobile-menu the panel sits inside the same sticky shell as
   the header and opens right under it at any scroll position, instead of
   sitting back at its place in the document and only shifting content down. */
.head-shell { position: sticky; top: 0; z-index: 20; }
.head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(16px, 2vw, 22px) var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.head-mark {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -0.03em;
  text-decoration: none; text-transform: lowercase;
}
.head-right { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.head-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
}
.head-link:hover, .head-link:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (max-width: 960px) { .head-link.opt { display: none; } }
.theme-btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  padding: 0; background: transparent; color: inherit; cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.theme-btn:hover, .theme-btn:focus-visible { background: var(--fg); color: var(--bg); }
.theme-btn .moon { display: none; }
html[data-theme="light"] .theme-btn .sun { display: none; }
html[data-theme="light"] .theme-btn .moon { display: block; }

/* Menu button — mobile only, opens .mobile-menu for the section links that
   .head-link.opt hides below 620px, so the header always keeps a way to
   every section, not just #contact. */
.menu-btn {
  display: none;
  width: 44px; height: 44px; flex: none;
  background: transparent; color: inherit; cursor: pointer; padding: 0;
  border: 1px solid var(--line-strong);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.menu-btn:hover, .menu-btn:focus-visible { background: var(--fg); color: var(--bg); }
@media (max-width: 960px) { .menu-btn { display: grid; place-items: center; } }

.mobile-menu {
  display: none; flex-direction: column; background: var(--bg);
  border-bottom: 1px solid var(--line); max-height: 80svh; overflow-y: auto;
}
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu-link {
  padding: 15px var(--pad); border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: inherit;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mobile-menu-link:hover, .mobile-menu-link:focus-visible { background: var(--fg); color: var(--bg); }
@media (min-width: 961px) { .mobile-menu, .menu-btn { display: none !important; } }

/* Status strip — a genuine ticker. The one thing on the page that moves on
   its own, because it is the one thing that is genuinely live. The track is
   duplicated in the markup so the loop has no seam; reduced motion just
   freezes it on the first copy. */
.status {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted);
}
.status-track {
  display: flex; align-items: center; width: max-content;
  padding: 12px var(--pad);
  animation: ticker 34s linear infinite;
}
.status:hover .status-track, .status:focus-within .status-track { animation-play-state: paused; }
.status-track span { white-space: nowrap; }
.status-track span + span::before { content: "·"; margin-inline: 16px; opacity: .6; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .status-track { animation: none; } }

/* ---- 04 · HERO ------------------------------------------------------------
   The wordmark is live text, not an image: real Archivo glyphs are the whole
   point. Topographic contour lines sit behind it as a barely-there texture.
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(64px, 10vw, 140px) var(--gutter) clamp(48px, 6vw, 80px); overflow: clip; }
.hero-topo {
  /* max-width: none — the reset caps svg at 100%, which cut the contours short
     of the right edge instead of letting them run off the screen. */
  position: absolute; inset: -14% -8% auto -8%; height: 760px; z-index: 0; max-width: none;
  color: var(--fg); opacity: .38; pointer-events: none;
}
.hero-rings {
  position: absolute; right: -14%; top: -4%; width: min(62vw, 720px); aspect-ratio: 1;
  z-index: 0; color: var(--fg); opacity: .42; pointer-events: none;
}
/* Same stroke width at any size: the SVGs are scaled, and without this the
   contours went hairline-thin on a phone while the rings stayed heavy. */
.hero-topo path, .hero-rings circle, .hero-rings path { vector-effect: non-scaling-stroke; }
/* Text stands on a clean ground: contours and rings live on the right and fade
   out before they reach the wordmark, the claim and the paragraph. */
.hero-topo, .hero-rings {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 80%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 80%);
}
.hero-rings { -webkit-mask-size: 100vw 100%; mask-size: 100vw 100%; -webkit-mask-position: right; mask-position: right; }
/* On a phone the text takes the full width: the graphics get their own band
   under the button instead of sitting behind the copy. */
/* Phone: the rings sit in the one empty spot of the first screen — to the right
   of the short "a77" wordmark — cropped by the edge, and fade out downwards
   before the paragraph. Contours are dropped there: squeezed to phone width
   they tangle with the rings into a knot of lines. */
@media (max-width: 720px) {
  .hero-topo { display: none; }
  .hero-rings {
    top: 10px; right: -155px; width: 300px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
            mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
    -webkit-mask-size: auto; mask-size: auto;
  }
}.hero-inner { position: relative; z-index: 1; }
.hero h1 {
  font-weight: 700; font-size: clamp(4rem, 15vw, 11rem); letter-spacing: -0.05em; line-height: 0.85;
}
.hero-claim {
  margin-top: clamp(20px, 3vw, 34px);
  font-weight: 600; font-size: clamp(1.4rem, 3.2vw, 2.3rem); letter-spacing: -0.03em;
  line-height: 1.15; max-width: 20ch; text-transform: lowercase;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(20px, 3.5vw, 56px); align-items: end;
  margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line-strong);
}
.hero-note { color: var(--muted); max-width: 44ch; }
.hero-note b { color: var(--fg); font-weight: 700; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } }

/* ---- 04b · v6 additions: header CTA, hero facts, inverted band, speed check -- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The one solid thing in the header: the way to affiliate.a77.ch, on every width. */
.head-cta {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 16px;
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.head-cta:hover, .head-cta:focus-visible { background: transparent; color: var(--fg); }
.head-cta span { transition: transform .15s var(--ease); }
.head-cta:hover span { transform: translateX(3px); }
@media (max-width: 380px) {
  .head-right { gap: 8px; }
  .head-cta { padding: 0 11px; font-size: 11px; letter-spacing: 0.06em; }
}
.mobile-menu-link-solid { background: var(--fg); color: var(--bg); }
.mobile-menu-link-solid:hover, .mobile-menu-link-solid:focus-visible { background: transparent; color: var(--fg); }

.btn { justify-content: center; min-height: 44px; gap: .45em; }
.btn-lg { padding: 17px 26px; font-size: 15px; }
@media (max-width: 560px) {
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1 1 100%; }
}

/* Three facts closing the first screen. Each one is a link: the first goes to
   the full story on affiliate.a77.ch, so the way there starts above the fold. */
.hero-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(40px, 5.5vw, 76px); border-top: 1px solid var(--line-strong);
}
.fact {
  display: block; padding: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 28px) 4px 0;
  text-decoration: none; color: inherit;
}
.fact + .fact { border-left: 1px solid var(--line); padding-left: clamp(14px, 2vw, 28px); }
.fact b {
  display: block; font-weight: 700; font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  line-height: .9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.fact span { display: block; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 26ch; }
.fact em { display: block; margin-top: 6px; font-style: normal; font-weight: 600; color: var(--fg); }
.fact:hover em, .fact:focus-visible em { text-decoration: underline; text-underline-offset: 4px; }
.fact:hover b { opacity: .7; }
@media (max-width: 720px) {
  .hero-facts { grid-template-columns: 1fr; }
  .fact, .fact + .fact {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center;
    padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line);
  }
  /* The column is sized in the figure's own em, not the row's: "+150%" and
     "1 day" stay on one line and the captions start on one vertical. */
  .fact b { font-size: clamp(2rem, 9vw, 2.6rem); min-width: 3.3em; white-space: nowrap; }
  .fact span { margin-top: 0; max-width: none; }
}

/* Inversion instead of colour: a band that swaps ink and paper, whatever the
   theme. The derived tokens are re-declared because color-mix() resolved them
   against the outer --fg at :root. */
.inv, html[data-theme="dark"] .inv { --bg: #f4f4f4; --fg: #101010; }
html[data-theme="light"] .inv { --bg: #101010; --fg: #f4f4f4; }
.inv {
  --line:        color-mix(in srgb, var(--fg) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--fg) 34%, transparent);
  --muted:       color-mix(in srgb, var(--fg) 62%, transparent);
  --wash:        color-mix(in srgb, var(--fg) 7%, transparent);
  background: var(--bg); color: var(--fg); border-top-color: var(--bg);
}

.check-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
  gap: clamp(24px, 4vw, 64px); align-items: end;
}
.sec-check .sec-title { margin-bottom: 0; max-width: 13ch; }
.check-form { display: flex; border: 1px solid var(--fg); background: var(--bg); }
.check-form:focus-within { outline: 2px solid var(--fg); outline-offset: 3px; }
.check-field { flex: 1 1 auto; min-width: 0; display: flex; }
.check-field input {
  width: 100%; min-width: 0; height: 64px; padding: 0 20px; border: 0; outline: none;
  background: transparent; color: var(--fg); font: inherit; font-size: 19px; font-weight: 500;
}
.check-field input::placeholder { color: var(--muted); opacity: .7; }
.check-form .btn { border: 0; padding: 0 28px; font-size: 15px; min-height: 64px; }
.check-form .btn-solid:hover, .check-form .btn-solid:focus-visible { background: var(--muted); color: var(--bg); }
.check-note { margin-top: 14px; color: var(--muted); font-size: 13.5px; max-width: 46ch; }
@media (max-width: 860px) { .check-grid { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 560px) {
  .check-form { flex-direction: column; }
  .check-field input { height: 58px; padding: 0 16px; font-size: 18px; }
  .check-form .btn { min-height: 56px; }
}

.check-what {
  margin: clamp(36px, 4.5vw, 60px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.check-what li { padding: clamp(18px, 2.2vw, 26px) clamp(14px, 2vw, 28px) 0 0; color: var(--muted); }
.check-what li + li { border-left: 1px solid var(--line); padding-left: clamp(14px, 2vw, 28px); }
.check-what b { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; margin-bottom: 10px; }
.check-what strong { color: var(--fg); font-weight: 600; }
@media (max-width: 720px) {
  .check-what { grid-template-columns: 1fr; }
  .check-what li, .check-what li + li { border-left: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
}

/* Motion, only where it carries meaning: blocks rise in once, figures count up.
   Gated on .js so nothing is hidden when scripts do not run, and switched off
   entirely for people who ask their system for less motion. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- 05 · SECTIONS -------------------------------------------------------- */
.sec { padding: clamp(48px, 6vw, 96px) var(--gutter); border-top: 1px solid var(--line-strong); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.sec-head-text { max-width: 44ch; }
.sec-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.sec-head p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.sec-motif { width: clamp(64px, 8vw, 104px); height: clamp(64px, 8vw, 104px); flex: none; }

/* A section heading that stands on its own, without the motif row beside it. */
.sec-title {
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 0.96; letter-spacing: -0.04em;
  margin: 8px 0 clamp(24px, 3vw, 36px);
}

/* ---- STAT ---------------------------------------------------------------
   The one number the whole page rests on, set as large as the viewport
   allows. Scale contrast is the design here: the figure is display-sized,
   everything explaining it stays body-sized beside it.                    */
.stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px); align-items: center;
  padding-block: clamp(20px, 3vw, 36px);
}
.stat-figure {
  font-weight: 700; font-size: clamp(4.6rem, 21vw, 15rem); line-height: 0.78;
  letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
}
.stat-body h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 14px; }
.stat-body p { color: var(--muted); max-width: 46ch; }
.stat-body p + p { margin-top: 12px; }
@media (max-width: 720px) { .stat { grid-template-columns: 1fr; align-items: start; } }

/* A single line, set large, that carries the invitation. */
.pull {
  margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line-strong);
  font-weight: 600; font-size: clamp(1.5rem, 4.2vw, 2.8rem); line-height: 1.1;
  letter-spacing: -0.03em; text-transform: lowercase; max-width: 24ch;
}
.pull-sm { font-size: clamp(1.2rem, 2.6vw, 1.8rem); max-width: 34ch; }

/* One column: the note sits right under the chart it explains, instead of
   floating in a second column away from it. */
.chart-block {
  display: grid; grid-template-columns: minmax(0, 1fr); max-width: 720px;
  gap: 14px; align-items: start;
  margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line);
}

.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }

/* Body copy that introduces a section, wherever it appears. The contact
   section overrides the spacing below; everything else uses this. */
.lede { color: var(--muted); max-width: 52ch; margin-top: clamp(20px, 2.6vw, 28px); }
.sec .actions { margin-top: clamp(22px, 2.8vw, 32px); }
.lede + .units { margin-top: clamp(24px, 3vw, 36px); }

/* Umbrella */
.units { border-top: 1px solid var(--line-strong); }
.unit {
  display: grid; grid-template-columns: minmax(0, 18ch) minmax(0, 1fr) auto;
  gap: clamp(10px, 2.5vw, 40px); align-items: start;
  padding-block: clamp(20px, 2.6vw, 30px); border-bottom: 1px solid var(--line);
}
.unit h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }
.unit h3 a { text-decoration: none; border-bottom: 1px solid var(--fg); }
.unit h3 a:hover { opacity: .6; }
.unit p { color: var(--muted); max-width: 56ch; }
.state {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; white-space: nowrap; border: 1px solid var(--line-strong); color: var(--muted);
}
@media (max-width: 800px) {
  .unit { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .unit p { grid-column: 1 / -1; }
}

/* Results chart */
.count-note { margin-top: clamp(20px, 2.6vw, 30px); color: var(--muted); max-width: 52ch; }

.chart { width: 100%; height: auto; }
.chart .bar { fill: var(--fg); }
.chart .bar.dim { fill: var(--muted); }
.chart text { fill: var(--fg); font-family: var(--font); }
.chart .val { fill: var(--fg); }
.chart .lbl { fill: var(--muted); }
.chart .axis { stroke: var(--fg); stroke-width: 1.5; }
.chart-note { font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 60ch; }

/* Engineering reuses .units/.unit/.state from the umbrella — no styles of its own. */

/* ---- 07 · CONTACT ----------------------------------------------------------- */
.contact { padding: clamp(48px, 6vw, 96px) var(--gutter); border-top: 1px solid var(--line-strong); }
.contact h2 { font-size: clamp(2.2rem, 6.5vw, 4.2rem); line-height: 0.94; letter-spacing: -0.04em; margin-bottom: clamp(14px, 1.8vw, 20px); }
.contact .lede { color: var(--muted); max-width: 48ch; margin-bottom: clamp(22px, 2.8vw, 32px); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; padding: 13px 20px;
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; text-transform: lowercase;
  text-decoration: none; cursor: pointer; background: transparent; color: inherit;
  border: 1px solid var(--line-strong);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-solid { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-solid:hover, .btn-solid:focus-visible { background: transparent; color: var(--fg); }
.reply { margin-top: clamp(18px, 2.2vw, 26px); font-size: 13.5px; color: var(--muted); max-width: 54ch; }

/* ---- 08 · FOOTER ----------------------------------------------------------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 28px;
  padding: clamp(10px, 1.4vw, 16px) var(--gutter); border-top: 1px solid var(--line-strong);
  font-size: 13px; color: var(--muted);
}
/* 44px tall: the one link here is a tap target on a phone. */
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

#toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 14px);
  background: var(--fg); color: var(--bg); padding: 10px 18px; font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

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

/* ---- 09 · BRAND GUIDE ------------------------------------------------------ */
.title { padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(28px, 4vw, 46px); }
.title h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: 0.92; letter-spacing: -0.04em; }
.title p { margin-top: clamp(24px, 3vw, 34px); padding-top: clamp(16px, 2vw, 26px); border-top: 1px solid var(--line-strong); max-width: 62ch; color: var(--muted); }
.guide > h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: clamp(18px, 2.4vw, 30px); }
.guide h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); letter-spacing: -0.01em; margin: clamp(28px, 3vw, 40px) 0 12px; font-weight: 600; text-transform: lowercase; }
.note { color: var(--muted); max-width: 68ch; }

.specimens { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(14px, 2.2vw, 26px); margin-top: clamp(22px, 3vw, 34px); }
.spec { display: flex; flex-direction: column; gap: 10px; }
.tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--fg); color: var(--bg); }
.tile.tile-outline { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); }
.tile b { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; text-transform: lowercase; }
.caption { font-size: 12.5px; color: var(--muted); }
.caption b { color: var(--fg); font-weight: 700; }

.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line-strong); margin-top: clamp(22px, 3vw, 34px); }
.sw { background: var(--bg); }
.sw-chip { height: clamp(66px, 8vw, 100px); }
.sw-body { padding: 11px 13px 15px; }
.sw-body b { display: block; font-weight: 700; font-size: 13.5px; }
.sw-body span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.scale { border-top: 1px solid var(--line-strong); margin-top: clamp(22px, 3vw, 34px); }
.scale-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19ch); gap: clamp(12px, 3vw, 36px); align-items: baseline; padding-block: clamp(14px, 2vw, 22px); border-bottom: 1px solid var(--line); }
.scale-row > div:last-child { font-size: 12.5px; color: var(--muted); }
.s-display { font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 0.9; letter-spacing: -0.045em; text-transform: lowercase; }
.s-head { font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; letter-spacing: -0.03em; text-transform: lowercase; }
.s-sub { font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.15; letter-spacing: -0.02em; text-transform: lowercase; }
.s-body { font-size: 16px; }
.s-meta { font-weight: 600; font-size: 13px; color: var(--muted); letter-spacing: .02em; }

.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 2.2vw, 26px); margin-top: clamp(20px, 2.6vw, 30px); }
.pair { border: 1px solid var(--line-strong); display: flex; flex-direction: column; }
.pair-demo { min-height: 118px; padding: 20px; display: flex; align-items: center; background: var(--wash); overflow: hidden; }
.pair-demo > * { max-width: 100%; }
.pair-tag { padding: 11px 15px; font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--line-strong); }
.pair-tag b { font-weight: 700; }
.no b { color: var(--muted); }
.demo-lower { font-weight: 700; font-size: 1.8rem; line-height: 1; letter-spacing: -0.04em; text-transform: lowercase; }
.demo-caps { font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; }
.demo-block { width: 100%; background: var(--fg); color: var(--bg); padding: 16px; font-weight: 700; font-size: 1.3rem; line-height: 1; letter-spacing: -0.03em; text-transform: lowercase; }
.demo-shadow { width: 100%; background: var(--wash); padding: 16px; font-weight: 700; font-size: 1.3rem; line-height: 1; box-shadow: 8px 8px 0 var(--muted); border-radius: 14px; text-transform: lowercase; }
.demo-cols { width: 100%; }
.demo-cols span { display: block; height: 9px; background: var(--line-strong); margin-bottom: 8px; }
.demo-cols span:nth-child(1) { width: 90%; }
.demo-cols span:nth-child(2) { width: 66%; }
.demo-cols span:nth-child(3) { width: 78%; }
.demo-cols.centre { text-align: center; }
.demo-cols.centre span { margin-inline: auto; }

.rules { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.rules li { list-style: none; display: grid; grid-template-columns: 1.6ch minmax(0, 1fr); gap: 12px; padding-block: clamp(11px, 1.5vw, 17px); border-bottom: 1px solid var(--line); }
.rules li::before { content: "—"; font-weight: 700; color: var(--muted); }
.rules b { font-weight: 700; }

pre { margin: 0; padding: clamp(16px, 2.2vw, 24px); background: var(--wash); border: 1px solid var(--line-strong); overflow-x: auto; font-size: 13px; line-height: 1.7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.copy-btn { margin-top: 13px; padding: 10px 16px; font: inherit; font-size: 12.5px; font-weight: 600; text-transform: lowercase; background: transparent; color: inherit; border: 1px solid var(--line-strong); cursor: pointer; }
.copy-btn:hover { background: var(--fg); color: var(--bg); }

.foot-simple { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; justify-content: space-between; padding: clamp(18px, 2.4vw, 26px) var(--gutter); font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line-strong); }
.foot-simple a { text-decoration: none; border-bottom: 1px solid var(--line); }
.foot-simple a:hover { border-bottom-color: var(--fg); }

@media print {
  html, body { background: #fff; color: #000; }
  .head, .status, .theme-btn, .actions, .skip, #toast, .hero-topo, .hero-rings { display: none !important; }
}

/* ---- 10 · SPEED CHECK PAGE (/check) -------------------------------------- */
.check-hero { padding: clamp(48px, 7vw, 104px) var(--gutter) clamp(40px, 5vw, 72px); }
.check-h1 {
  font-weight: 700; font-size: clamp(2.5rem, 7.4vw, 6rem); line-height: .94; letter-spacing: -0.045em;
  max-width: 14ch; margin: 8px 0 clamp(28px, 3.6vw, 44px);
}
.check-hero .check-form { max-width: 820px; }
.check-form.is-busy { opacity: .55; pointer-events: none; }

/* Running: a bar that never claims to be finished, and the four steps. */
.run-step { font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.1; min-height: 1.1em; }
.run-bar { margin-top: clamp(20px, 2.6vw, 30px); height: 6px; background: var(--line); overflow: hidden; }
.run-bar span { display: block; height: 100%; width: 0; background: var(--fg); transition: width .25s linear; }
.run-time { margin-top: 12px; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.run-list { margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); max-width: 640px; }
.run-list li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.run-list li::before { content: "○"; }
.run-list li.now { color: var(--fg); font-weight: 600; }
.run-list li.now::before { content: "●"; animation: blink 1s steps(2, start) infinite; }
.run-list li.done::before { content: "✓"; color: var(--fg); }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .run-list li.now::before { animation: none; } .run-bar span { transition: none; } }

/* The report. */
.rep-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; }
.rep-date { font-size: 12.5px; color: var(--muted); }
.rep-lead {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(14px, 2vw, 24px);
}
.rep-figure b {
  display: block; font-weight: 700; font-size: clamp(5rem, 17vw, 13rem); line-height: .8;
  letter-spacing: -0.06em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rep-figure > span { display: block; margin-top: clamp(14px, 2vw, 22px); color: var(--muted); max-width: 34ch; }
.rep-verdict { border-top: 1px solid var(--line-strong); padding-top: clamp(16px, 2vw, 22px); }
.rep-word {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--fg);
  font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; text-transform: lowercase;
}
.rep-verdict.is-slow .rep-word { background: var(--fg); color: var(--bg); }
.rep-verdict p { margin-top: 14px; color: var(--muted); max-width: 40ch; }
@media (max-width: 760px) { .rep-lead { grid-template-columns: 1fr; align-items: start; } }

/* One scale from 0 to 10 s: three zones, three pins. Labels of "ours" and
   "before" hang under the track, the shop's own label sits above it. */
.scale-bar { position: relative; margin-top: clamp(40px, 5vw, 64px); padding: 42px 0 0; }
.scale-track { display: grid; grid-template-columns: 25% 15% 60%; height: 34px; border: 1px solid var(--line-strong); }
.zone { display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; }
.zone + .zone { border-left: 1px solid var(--line-strong); }
.zone-fast { background: var(--wash); }
.zone-slow { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 8px); }
.scale-pins { position: absolute; left: 0; right: 0; top: 42px; height: 34px; pointer-events: none; }
.pin { position: absolute; top: 0; height: 100%; }
.pin i { position: absolute; left: -1px; top: -6px; bottom: -6px; width: 2px; background: var(--muted); }
.pin em { position: absolute; top: calc(100% + 12px); left: 0; transform: translateX(-50%); font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pin-you i { width: 4px; left: -2px; top: -12px; bottom: -12px; background: var(--fg); }
.pin-you em { top: auto; bottom: calc(100% + 14px); font-size: 13px; color: var(--fg); }
.pin-you em b { font-weight: 700; }
.pin-you.flip em { transform: translateX(-100%); }
.pin-ours em { transform: translateX(-12%); }
.pin-before em { transform: translateX(-60%); }
.scale-axis { position: relative; height: 14px; margin-top: 46px; font-size: 11px; color: var(--muted); }
.scale-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.scale-axis span:nth-child(1) { left: 0; transform: none; }
.scale-axis span:nth-child(2) { left: 25%; }
.scale-axis span:nth-child(3) { left: 40%; }
.scale-axis span:nth-child(4) { right: 0; left: auto; transform: none; }
@media (max-width: 560px) {
  .zone { font-size: 9.5px; letter-spacing: .06em; padding: 0 6px; }
  .zone-mid { font-size: 0; }
  .pin em { font-size: 11px; }
  .pin-ours em { transform: translateX(-8%); }
  .pin-before em { transform: translateX(-75%); }
}

.rep-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-strong);
}
.metric { padding: clamp(16px, 2vw, 24px) clamp(12px, 1.8vw, 24px) 0 0; }
.metric + .metric { border-left: 1px solid var(--line); padding-left: clamp(12px, 1.8vw, 24px); }
.metric b { display: block; font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); max-width: 22ch; }
.meter { margin-top: 12px; height: 4px; background: var(--line); }
.meter i { display: block; height: 100%; width: 0; background: var(--fg); transition: width 1.1s var(--ease); }
@media (max-width: 860px) {
  .rep-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3) { border-left: 0; padding-left: 0; }
  .metric:nth-child(n+3) { margin-top: 8px; border-top: 1px solid var(--line); }
}

.issues { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.issues li {
  display: grid; grid-template-columns: clamp(48px, 7vw, 96px) minmax(0, 1fr); gap: 16px;
  padding-block: clamp(18px, 2.4vw, 28px); border-bottom: 1px solid var(--line);
}
.issues li > b { font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; color: var(--muted); }
.issues h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.1; }
.issues p { margin-top: 8px; color: var(--muted); max-width: 58ch; }
.issues .save { display: inline-block; margin-top: 12px; padding: 4px 10px; border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.rep-small { margin-top: 18px; font-size: 12.5px; color: var(--muted); max-width: 64ch; }

.case-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; margin-top: 8px; }
.case-num { display: flex; align-items: baseline; gap: .3em; font-weight: 700; font-size: clamp(2.6rem, 7vw, 5.6rem); letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
.case-num span { font-weight: 400; color: var(--muted); }
.case-row .lede { margin-top: 0; }
@media (max-width: 760px) { .case-row { grid-template-columns: 1fr; } }

/* The booking calendar sits on the page's own ground, framed by one hairline. */
.cal-box { margin-top: clamp(24px, 3vw, 36px); min-height: 560px; border: 1px solid var(--line-strong); background: var(--bg); overflow: hidden; }
.cal-box.is-failed { display: none; }
.cal-fallback { margin-top: clamp(20px, 2.6vw, 30px); }
.cal-fallback .actions { margin-top: 14px; }
@media (max-width: 560px) { .cal-box { min-height: 680px; margin-inline: calc(var(--pad) * -1); border-inline: 0; } }

/* ---- 11 · v6 sections on the home page ------------------------------------ */
@media (max-width: 1000px) { .stat { grid-template-columns: 1fr; align-items: start; } }
.stat-body h2 { max-width: 20ch; }

.text-link { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; line-height: 1.2; }
.text-link span { transition: transform .15s var(--ease); }
.text-link:hover span { transform: translateX(4px); }
.link-btn { padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; border-bottom: 1px solid currentColor; }

.results-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px); align-items: end;
  margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line);
}
.results-row .chart-block { margin: 0; padding: 0; border: 0; max-width: none; }
.speed-num { display: flex; align-items: baseline; gap: .3em; font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
.speed-num span { font-weight: 400; color: var(--muted); }
.speed-pair .muted { margin-top: 12px; max-width: 34ch; }
.speed-pair .text-link { margin-top: 10px; }
@media (max-width: 760px) { .results-row { grid-template-columns: 1fr; } }
.js .chart .grow { transform-origin: 50% 190px; transform-box: view-box; }
.js .reveal .chart .grow { transform: scaleY(.4); transition: transform 1.1s var(--ease) .2s; }
.js .reveal.is-in .chart .grow { transform: none; }

.band-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--line-strong); }
.band-cta .pull { margin: 0; padding: 0; border: 0; }
@media (max-width: 560px) { .band-cta .btn { width: 100%; } }

/* Six services on a hairline grid: three across, two on a tablet, one on a phone. */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
/* Open grid, no frame: hairlines only between cells, text on the page's left edge. */
.svc-item { --gap: clamp(16px, 2.4vw, 30px); padding: var(--gap) var(--gap) var(--gap) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.svc-item:not(:nth-child(3n+1)) { padding-left: var(--gap); border-left: 1px solid var(--line); }
.svc-item > b { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--muted); }
.svc-item h3 { margin-top: clamp(18px, 2.6vw, 34px); font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.025em; }
.svc-item p { margin-top: 10px; color: var(--muted); max-width: 36ch; }
.svc-item .text-link { margin-top: auto; padding-top: 12px; align-self: flex-start; border-bottom: 0; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 960px) {
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-item:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .svc-item:nth-child(2n) { padding-left: var(--gap); border-left: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .svc { grid-template-columns: 1fr; }
  .svc-item, .svc-item:nth-child(2n), .svc-item:not(:nth-child(3n+1)) { border-left: 0; padding-inline: 0; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 8px; }
  .svc-item > b { grid-row: 1 / span 3; padding-top: .35em; }
  .svc-item h3 { margin-top: 0; }
}
.count-note b { color: var(--fg); }

.steps-row { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.steps-row li { padding: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 28px) 0 0; }
.steps-row li + li { border-left: 1px solid var(--line); padding-left: clamp(14px, 2vw, 28px); }
.steps-row b { display: block; font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 3.4rem); letter-spacing: -0.05em; line-height: 1; }
.steps-row h3 { margin-top: 14px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.steps-row p { margin-top: 8px; color: var(--muted); max-width: 36ch; }
.steps-row a { color: var(--fg); font-weight: 600; }
@media (max-width: 760px) {
  .steps-row { grid-template-columns: 1fr; }
  .steps-row li, .steps-row li + li { border-left: 0; padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 10px; }
  .steps-row b { grid-row: 1 / span 2; font-size: 2rem; }
  .steps-row h3 { margin-top: 0; }
}

.state-link { text-decoration: none; color: var(--fg); border-color: var(--fg); }
.state-link:hover { background: var(--fg); color: var(--bg); }

.aff-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: clamp(20px, 4vw, 64px); align-items: end; }
.aff-grid .sec-title { margin-bottom: 0; max-width: 16ch; }
.aff-grid .lede { margin-top: 0; }
@media (max-width: 860px) { .aff-grid { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 560px) { .aff-grid .btn { width: 100%; } }

.contact-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 3.6vw, 44px); border-top: 1px solid var(--line-strong); }
.way { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 18px 0; text-decoration: none; color: inherit; min-height: 44px; }
.way + .way { border-left: 1px solid var(--line); padding-left: 16px; }
.way span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.way b { font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.15rem); overflow-wrap: anywhere; }
a.way:hover b, a.way:focus-visible b { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) {
  .contact-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .way:nth-child(3) { border-left: 0; padding-left: 0; }
  .way:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 420px) {
  .contact-ways { grid-template-columns: 1fr; }
  .way, .way + .way { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .way:first-child { border-top: 0; }
}