/* Clearline public site. Tokens live in tokens.css. */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(4rem + var(--space-4)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Full-width bands and the top light reach the screen edges; never let them add a sideways
     scroll. (hidden first for browsers without clip; on body it applies to the viewport.) */
  overflow-x: hidden;
  overflow-x: clip;
}

/* A fine film grain over the whole page, so the dark navy reads as a lit room rather than a flat
   screen. Very faint, never moves, ignores the pointer. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.15; margin: 0; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--step-4); line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 500; }
p { margin: 0; text-wrap: pretty; }

/* Owner-entered text (titles, towns, emails) must never push the page sideways. */
h1, h2, h3, .work-meta, .label, .footer-contact a, .notice p, .creds li, .lead { overflow-wrap: anywhere; }

a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: from-font; text-underline-offset: 0.2em; }
a, button, select, label, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

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

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

.skip-link {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

.small { font-size: var(--step--1); color: var(--text-faint); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); max-width: 46ch; }

/* One label tier for every section heading and eyebrow: small, uppercase, tracked. */
.label {
  font-size: var(--step--1); font-weight: 500; line-height: 1.4; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-5);
}
.label .num { font-family: var(--font-mono); color: var(--accent); margin-right: var(--space-2); letter-spacing: 0; }
.label a { color: var(--text-muted); }
.crumbs a { text-decoration-color: var(--accent); text-underline-offset: 0.3em; padding-block: var(--space-2); }
.more-services { padding-top: var(--space-7); }

/* ---------- Buttons and links ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 44px; padding: 0 var(--space-5);
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: var(--radius);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.button:not([aria-disabled="true"]):active { transform: scale(0.97); transition-duration: 100ms; }
.button[aria-disabled="true"] { cursor: progress; opacity: 0.72; }

.text-link {
  display: inline-block; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 2px;
  transition: color var(--dur-fast) ease;
}
.text-link .arr { display: inline-block; margin-left: 0.15em; transition: transform var(--dur-fast) var(--ease-out); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); }

/* ---------- Notice banner ---------- */

.notice { background: var(--accent-soft); border-bottom: 1px solid var(--accent); }
.notice p {
  max-width: var(--wrap); margin-inline: auto; padding: var(--space-2) var(--gutter);
  font-size: var(--step--1); color: var(--text);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.brand-sub { color: var(--text-muted); font-weight: 400; }
.main-nav { display: flex; align-items: center; gap: var(--space-2) var(--space-5); }
.main-nav a { position: relative; color: var(--text-muted); text-decoration: none; padding: var(--space-2) 0; transition: color var(--dur-fast) ease; }
.main-nav a[aria-current] { color: var(--text); }
.main-nav a[aria-current]:not(.cta)::before {
  content: ""; position: absolute; left: -0.6rem; top: 25%; bottom: 25%; width: 2px; background: var(--accent);
}
.main-nav .nav-phone { font-variant-numeric: tabular-nums; }
.header-phone { display: none; }
.main-nav .cta {
  color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: var(--space-2) var(--space-4); white-space: nowrap;
  transition: background-color var(--dur-fast) ease;
}

/* ---------- Placeholders (honest, intentional) ---------- */

.placeholder {
  aspect-ratio: var(--ratio, 4 / 3);
  width: 100%; display: flex; align-items: flex-end; padding: var(--space-4);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / 0.03) 14px 15px),
    var(--surface-quiet);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--text-faint); font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.4;
}

/* Photos on dark: a faint inner edge so they don't bleed into the page. */
.work-card img, .work-detail img, .hero-photo img, .founder-photo img {
  outline: 1px solid rgb(255 255 255 / 0.1); outline-offset: -1px;
}

/* ---------- Sections ---------- */

main { position: relative; z-index: 0; }
main > section { padding-block: var(--space-8); }

/* The clear line runs down every page, in the margin just left of the text edge. The hero line,
   the rule tick and the process line all land on it as orange segments.
   Faded at both ends so it never starts or stops hard. */
main::before {
  content: ""; position: absolute; inset-block: 0; z-index: -1; width: 1px; pointer-events: none;
  left: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter) - var(--line-x));
  background: var(--line-strong);
  -webkit-mask-image: linear-gradient(transparent, #000 8rem, #000 calc(100% - 12rem), transparent);
  mask-image: linear-gradient(transparent, #000 8rem, #000 calc(100% - 12rem), transparent);
}

/* The stage behind every page is stage.css (a still of the room, then the 3D room). */

/* The clear line fills orange as you read: its leading edge sits two-thirds of the way down the
   screen. At How a project goes it turns right, runs down that section's rail, and cuts back.
   site.js builds the segments and sets each one's --s (0..1); without it the line stays grey. */
.line-fill {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 8rem, #000 calc(100% - 12rem), transparent);
  mask-image: linear-gradient(transparent, #000 8rem, #000 calc(100% - 12rem), transparent);
}
.line-fill > span {
  position: absolute; display: block; background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.line-fill > span[hidden] { display: none; }
.line-fill .seg-v {
  width: 2px; transform-origin: top; transform: scaleY(var(--s, 0));
  left: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter) - var(--line-x) - 0.5px);
}
.line-fill .seg-h { height: 2px; transform: scaleX(var(--s, 0)); }

/* Hero: headline across the top; below it the copy and a smaller photo side by side. */
.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-6) var(--split-gap); align-items: center;
  padding-top: var(--space-8);
}
.hero-head { grid-column: 1 / -1; padding-top: var(--space-5); }
.hero-label { margin-bottom: var(--space-4); }
.hero h1 { position: relative; max-width: 22ch; font-size: var(--step-5); }
.hero-line {
  position: absolute; left: calc(-1 * var(--line-x) - 0.5px); top: 0.1em; bottom: 0.1em;
  width: 2px; background: var(--accent); transform-origin: top;
}
.hero .lead { margin-top: 0; }
.hero-note {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-6); font-size: var(--step--1); color: var(--text-muted);
}
.hero-note::before { content: ""; flex: none; width: 1.5rem; height: 1px; background: var(--accent); }
/* Proof: the credentials on one quiet line under the hero, each linking to its entry. */
.proof {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6);
  margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--line);
}
.proof-label {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 400; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint);
}
.proof-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.proof-list a { display: inline-block; padding-block: var(--space-2); text-decoration: none; font-size: var(--step--1); transition: color var(--dur-fast) ease; }
.proof-issuer { color: var(--text-faint); margin-right: 0.15em; }
.proof-name { color: var(--text-muted); font-weight: 500; transition: color var(--dur-fast) ease; }

.hero-photo { position: relative; z-index: 1; }
.hero-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }

.rule { position: relative; height: 24px; margin-block: var(--space-2); }
.rule svg { width: 100%; height: 100%; overflow: visible; }
.rule path { fill: none; stroke: var(--line-strong); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* Intro sits in the copy column, clear of the hanging photo */
.intro { padding-top: var(--space-7); }
.intro > * { max-width: calc((100% - var(--split-gap)) * 0.6); }
.intro .label { margin-bottom: var(--space-4); }
.intro p:not(.label) { color: var(--text-muted); margin-bottom: var(--space-5); font-size: var(--step-1); line-height: 1.65; }

/* The motto's key words (Whatever / Whenever / However): a serif italic in the accent against
   the geometric sans, so they read as the brand's voice cutting through. */
.key {
  font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--accent);
  letter-spacing: -0.01em;
}
p .key { font-size: 1.15em; line-height: 1; }
/* In the Why Clearline paragraph each key word lights up while its line of the motto is showing
   (site.js), and on hover: it warms to a brighter orange. Colour only, so the text never moves
   under someone reading it. */
.intro p .key { transition: color 600ms ease, text-shadow 600ms ease; }
.intro p .key.is-lit {
  color: var(--accent-text-hover);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}
.motto { font-size: var(--step-3); line-height: 1.2; margin-bottom: var(--space-5); text-wrap: initial; }
.motto-line { display: block; width: fit-content; }

/* With site.js the motto shows one line at a time in the same spot: each comes into focus, holds,
   and gives way to the next. All three stay in the page for screen readers. */
.motto.is-cycling { display: grid; font-size: var(--step-4); line-height: 1.15; }
.motto.is-cycling .motto-line {
  grid-area: 1 / 1; opacity: 0; filter: blur(6px); transform: translateY(-0.12em);
  transition: opacity 500ms ease, filter 500ms ease, transform 500ms ease;   /* leaving: quick, lifts away */
}
.motto.is-cycling .motto-line.is-next { transform: translateY(0.18em); transition: none; } /* arrives from just below */
.motto.is-cycling .motto-line.is-on {
  opacity: 1; filter: none; transform: none;
  transition: opacity 800ms ease, filter 800ms ease, transform 1000ms var(--ease-out);
}
.motto .key { font-size: 1.12em; margin-right: 0.04em; }

/* Services: numbered rows, one hairline between each */
.services { padding-bottom: var(--space-7); }
.service-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.service-list li + li { border-top: 1px solid var(--line); }
.service-list a {
  position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--space-1) var(--space-5);
  padding: var(--space-5) var(--space-2); text-decoration: none;
  transition: background-color var(--dur) ease;
}
.service-list .num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); grid-row: span 2; padding-top: 0.35em; }
.service-list .name { font-size: var(--step-2); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.service-list .short { grid-column: 2; color: var(--text-muted); max-width: 52ch; }
.service-list .arrow { grid-column: 3; grid-row: 1; color: var(--text-faint); transition: transform var(--dur) var(--ease-out), color var(--dur) ease; }

/* Wide screens: the description gets its own column so the arrow isn't stranded */
@media (min-width: 64rem) {
  .service-list a { grid-template-columns: 6.5rem minmax(14rem, 0.85fr) minmax(0, 1.15fr) auto; }
  .service-list .num { grid-row: auto; }
  .service-list .short { grid-column: 3; grid-row: 1; }
  .service-list .arrow { grid-column: 4; }
}

/* Signature interaction: each row carries a channel fader lying on its side, under the number:
   a slot, a quiet scale underneath, and a moulded cap. The orange level fills from the left and
   pushes the cap along. With a mouse it rides with the pointer across the row (site.js); keyboard
   focus pushes it all the way; on touch it comes up as the row scrolls into view. */
.fader {
  position: absolute; left: var(--space-2); width: 5rem; height: 13px;
  top: calc(var(--space-5) + 1.5rem);     /* just under the number, so the line's branch runs in below it */
  display: block; pointer-events: none;
  /* one row of scale marks, under the slot */
  background: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px 6px) 0 100% / 100% 3px no-repeat;
}
.fader::before {                      /* the slot */
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 4px; border-radius: 2px;
  background: #03070c; box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur) ease;
}
.fader .meter {                       /* the orange level, lit up to the cap */
  position: absolute; left: 0; top: 5px; width: 100%; height: 2px; border-radius: 1px;
  background: linear-gradient(to right, var(--accent), var(--accent-text-hover));
  transform: scaleX(var(--level, 0)); transform-origin: left;
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent);
}
.fader .cap {
  --x: 0px;
  position: absolute; left: -5px; top: -3px; width: 11px; height: 18px; border-radius: 3px;
  background: linear-gradient(90deg, #34475c, #19242f 55%, #111a23);
  border: 1px solid #3d536b;
  box-shadow: 3px 2px 6px -1px rgb(0 0 0 / 0.7), inset 1px 0 0 rgb(255 255 255 / 0.12);
  transform: translateX(var(--x));
  transition: transform 180ms var(--ease-out);
}
.fader .cap::after {                  /* the line across the cap */
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 4px; width: 1px;
  background: var(--text-faint); transition: background-color var(--dur) ease, box-shadow var(--dur) ease;
}
.service-list a:is(:hover, :focus-visible) .fader::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.service-list a:is(:hover, :focus-visible) .fader .cap::after { background: var(--accent-text-hover); box-shadow: 0 0 6px var(--accent); }
.service-list a:focus-visible { background: var(--surface-quiet); }
.service-list a:focus-visible .fader { --level: 1; }
.service-list a:focus-visible .fader .cap {
  transform: translateX(var(--fader-travel, 4.5rem));
  transition: transform var(--dur-slow) var(--ease-settle);
}
/* With site.js the cap is moved every frame, so no transition to lag behind it. */
.service-list.is-riding .fader .cap { transition: none; }
.service-list a:focus-visible .arrow { color: var(--accent); transform: translateX(6px); }

/* Process: a vertical clear line with the steps hanging off it, all in one straight column. */
.process { padding-top: var(--space-8); }
.timeline {
  list-style: none; margin: 0 0 0 calc(-1 * var(--line-x)); padding: 0 0 0 calc(var(--space-6) + var(--line-x)); max-width: 46rem;
  border-left: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-strong));
}
.timeline li {
  position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-4); padding-block: var(--space-4);
}
.timeline li::before {
  content: ""; position: absolute; left: calc(-1 * (var(--space-6) + var(--line-x)) - 1px); top: calc(var(--space-4) + 0.45em);
  width: calc(var(--space-4) + var(--line-x)); height: 2px; background: var(--accent);
  transform-origin: left;
}
.timeline .num {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); padding-top: 0.3em;
  justify-self: start; transform-origin: 0 60%;
}
.timeline h3 { margin-bottom: var(--space-1); }
.timeline p { color: var(--text-muted); max-width: 54ch; }

/* Odometer numbers: each digit is a strip of 0-9 (twice) behind a one-digit window. Changing
   --d rolls to a new digit; .is-spinning turns a full revolution and lands where it started. */
.sr-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.odo {
  /* Each digit cell is a whole number of pixels tall, so a digit rolled into place (1, 4...) lands
     exactly level with one that never moved (0) instead of half a pixel off. */
  --cell: round(1.15em, 1px);
  position: relative; display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums;
}
.odo-digits { display: inline-flex; align-items: flex-start; }
.odo-col { display: block; height: var(--cell); overflow: hidden; }
.odo-strip {
  display: flex; flex-direction: column;
  transform: translateY(calc(var(--d) * -1 * var(--cell)));
  transition: transform 520ms var(--ease-out);
}
.odo-strip > span { display: block; height: var(--cell); line-height: var(--cell); }
.odo.is-spinning .odo-strip {
  transform: translateY(calc((var(--d) + 10) * -1 * var(--cell)));
  transition: transform 640ms cubic-bezier(0.2, 0.8, 0.15, 1);
}
.odo.is-spinning .odo-col + .odo-col .odo-strip { transition-delay: 60ms; }
.odo.no-anim .odo-strip { transition: none; }

/* Process, wide screens with site.js: the steps scroll past a pinned console. Its readout rolls to
   the step you're on and its fader travels up the channel as you read; hovering a step previews it.
   Each step carries a big outlined numeral that drifts slower than the text (parallax). */
.process-console { display: none; }
/* The rail fills orange as you read down (site.js drives --fill; without it the rail is just
   orange). Each step's tick and number light up when the fill reaches them. */
.process.is-live .timeline { position: relative; border-left-color: var(--line-strong); }
.process.is-live .timeline::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 1px;
  background: var(--accent);
  transform: scaleY(var(--fill, 0)); transform-origin: top;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.process.is-live .timeline li::before {
  background: var(--line-strong); transform: scaleX(0.4);
  transition: transform 640ms var(--ease-settle), background-color 420ms ease;
}
.process.is-live .timeline li.is-reached::before { background: var(--accent); transform: none; }
.process.is-live .timeline li .num {
  color: var(--text-faint);
  transition: color 420ms ease, transform 520ms var(--ease-settle), text-shadow 420ms ease;
}
.process.is-live .timeline li.is-reached .num { color: var(--accent); }
.process.is-live .timeline li.is-active .num { color: var(--accent-text-hover); }

/* Hover a step and its number pops forward, glows, and spins over once. */
@media (hover: hover) and (pointer: fine) {
  .timeline li:hover .num, .process.is-live .timeline li:hover .num {
    color: var(--accent-text-hover); transform: scale(1.5);
    text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
  }
  .timeline li:hover::before, .process.is-live .timeline li:hover::before { background: var(--accent); transform: none; }
  .timeline li h3 { transition: color 420ms ease; }
  .timeline li:hover h3 { color: var(--accent-text-hover); }
}

@media (min-width: 64rem) {
  .process.is-live {
    display: grid; grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
    gap: var(--split-gap); align-items: start;
  }
  .process.is-live .process-head { position: sticky; top: 7.5rem; padding-top: var(--space-5); margin-bottom: var(--space-7); }
  .process.is-live .process-console { display: block; margin-top: var(--space-6); }
  .process.is-live .timeline { max-width: none; }
  /* Tall steps give each one its moment at the console; the tick still meets the step's number. */
  /* Steps you're not on step back, but stay readable: at 0.7 the muted body text still clears
     4.5:1 (tests/test_contrast.py). The number keeps its own colours, so it isn't dimmed. */
  .process.is-live .timeline li { padding-block: 12vh; }
  .process.is-live .timeline li > div { opacity: 0.7; transition: opacity 600ms ease; }
  .process.is-live .timeline li::before { top: calc(12vh + 0.45em); }
  .process.is-live .timeline li.is-active > div { opacity: 1; }

  .readout { display: flex; align-items: baseline; gap: var(--space-3); font-family: var(--font-mono); }
  .readout-num { font-size: clamp(4.5rem, 7vw, 6.5rem); line-height: 1; color: var(--text); letter-spacing: -0.04em; }
  .readout-of { font-size: var(--step-0); color: var(--text-faint); }
  .readout-name {
    margin: var(--space-2) 0 0; min-height: 1.3em;
    font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: var(--step-2); color: var(--accent);
  }
  .readout-name.is-new { animation: name-in 420ms var(--ease-out); }

  /* The channel: a scale, a slot that fills orange up to the cap, and the cap itself. Step 01 is
     at the bottom; reading down the page brings the fader up. */
  .channel { --h: 15rem; position: relative; height: var(--h); width: 7rem; margin-top: var(--space-6); }
  .channel-scale {
    position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column-reverse;
    justify-content: space-between; font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-faint);
    transform: translateY(0.55em);
  }
  .channel-scale span { line-height: 1; transform: translateY(-50%); }
  .channel::before {                    /* ticks either side of the slot */
    content: ""; position: absolute; left: 2.4rem; width: 2.4rem; top: 0; bottom: 0;
    background:
      repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 10px) 0 0 / 8px 100% no-repeat,
      repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 10px) 100% 0 / 8px 100% no-repeat;
  }
  .channel-slot {
    position: absolute; left: calc(3.6rem - 3px); top: 0; bottom: 0; width: 6px; border-radius: 3px;
    background: #03070c; box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden;
  }
  .channel-fill {
    position: absolute; inset: 0; background: linear-gradient(to top, var(--accent), var(--accent-text-hover));
    transform: scaleY(var(--p, 0)); transform-origin: bottom;
  }
  .channel-cap {
    position: absolute; left: calc(3.6rem - 19px); bottom: -11px; width: 38px; height: 22px; border-radius: 4px;
    background: linear-gradient(#3a4f66, #1a2632 55%, #101921);
    border: 1px solid #45607c;
    box-shadow: 0 6px 14px -4px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.14);
    transform: translateY(calc(var(--p, 0) * var(--h) * -1));
  }
  .channel-cap::after {
    content: ""; position: absolute; left: 4px; right: 4px; top: 10px; height: 2px; border-radius: 1px;
    background: var(--accent-text-hover); box-shadow: 0 0 8px var(--accent);
  }
}
@keyframes name-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* "Why" panels: the sections that speak to why, not what (who we serve on home; why it matters on
   service pages). A raised panel with the clear line in orange down its left edge. */
.why-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-5) var(--split-gap);
  align-items: start; padding: var(--space-7) var(--space-6); background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 2px 0 0 var(--accent);
}
.why h2 { font-size: var(--step-3); line-height: 1.2; }
.why p:not(.label) { color: var(--text-muted); font-size: var(--step-1); line-height: 1.65; max-width: 52ch; }
.why .text-link { margin-top: var(--space-4); }
.serve .why-body { grid-template-columns: minmax(0, 1fr); }
/* With site.js the panel taps the clear line: a branch runs in at its top corner, its left edge
   fills orange as you read down, and each heading's short underline draws in as the fill passes. */
.serve .why-body.is-tapped { position: relative; box-shadow: inset 2px 0 0 var(--line-strong); }
.serve .why-body.is-tapped::before {
  /* over the panel's 1px border, so it meets the branch coming in from the clear line */
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; z-index: 1;
  background: var(--accent); border-radius: var(--radius) 0 0 var(--radius);
  transform: scaleY(var(--edge, 0)); transform-origin: top;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.serve .why-body.is-tapped h3::after {
  content: ""; display: block; width: 2.5rem; height: 2px; margin-top: var(--space-2); border-radius: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 800ms var(--ease-out);
}
.serve .why-body.is-tapped h3.is-reached::after { transform: none; }
.serve-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--split-gap); }
.serve-cols h3 { margin-bottom: var(--space-2); }
.serve-cols p:not(.label) { font-size: var(--step-0); }
.serve-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }

/* Where we work */
.area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5) var(--split-gap); align-items: baseline; }
.area .label { margin: 0; }
.area-lead { font-size: var(--step-1); line-height: 1.4; max-width: 40ch; }
.towns { list-style: none; margin: var(--space-4) 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: var(--space-2); }
.towns li { color: var(--text-muted); }
.towns li + li::before { content: "/"; margin-inline: var(--space-3); color: var(--line-strong); }
.area-note { color: var(--text-muted); font-size: var(--step--1); max-width: 65ch; }

/* FAQ: question left, answer right, hairlines between */
.faq dl { margin: 0; border-top: 1px solid var(--line-strong); max-width: 60rem; }
.faq dl > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-2) var(--space-7);
  padding-block: var(--space-5); border-bottom: 1px solid var(--line);
}
.faq dt { font-weight: 500; line-height: 1.4; }
.faq dd { margin: 0; color: var(--text-muted); max-width: 56ch; }

/* Recent work: one lead item, the rest stacked beside it */
.recent { padding-top: var(--space-7); }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-6) var(--space-5); margin-bottom: var(--space-6); }
.work-grid.is-single { grid-template-columns: minmax(0, 40rem); }
.work-grid.is-asym { grid-template-columns: var(--split); gap: var(--space-6) var(--split-gap); }
.work-grid.is-asym > :first-child { grid-row: span 2; align-self: start; }
.work-grid.is-asym > :first-child :is(.placeholder, img, .cred-card) { aspect-ratio: 4 / 3.4; object-fit: cover; }
.work-grid.is-asym > :not(:first-child) :is(.placeholder, img, .cred-card) { aspect-ratio: 16 / 8; object-fit: cover; }
.work-card a { display: block; text-decoration: none; }
.work-card img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work-meta { margin-top: var(--space-3); font-size: var(--step--1); color: var(--text-faint); }
.work-card .work-title { font-size: var(--step-1); font-weight: 500; margin-top: var(--space-1); transition: color var(--dur-fast) ease; hyphens: auto; }
.work-card a p:last-child:not(.work-meta) { color: var(--text-muted); margin-top: var(--space-1); }
/* Credentials: set as type on a quiet panel, with the clear line down the left edge. */
.cred-card {
  aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-1);
  padding: var(--space-5); background: var(--surface-quiet); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: inset 2px 0 0 var(--accent);
}
.cred-kind { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.cred-issuer { font-size: var(--step-3); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.empty { color: var(--text-muted); margin-bottom: var(--space-5); max-width: 52ch; }

/* Closing band */
/* The closing band sits over a softened photo from a real show: the stage in blue and teal light,
   seen from front of house. Dark on the text side so every word stays easy to read. */
.closing {
  border-top: 1px solid var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg-raised) 94%, transparent) 30%, color-mix(in srgb, var(--bg-raised) 66%, transparent)),
    var(--bg-raised) url("../img/band-stage.webp") center 35% / cover no-repeat;
}
main > section.closing { padding-block: var(--space-7); }
.closing-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5) var(--space-7); }
.closing-title { font-size: var(--step-2); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.closing-note { margin-top: var(--space-2); color: var(--text-muted); max-width: 52ch; }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }

/* ---------- Inner pages ---------- */
.install-steps { margin: var(--space-5) 0 0; padding-left: var(--space-5); color: var(--text-muted); max-width: 60ch; }
.install-steps li + li { margin-top: var(--space-2); }
.install-steps strong { color: var(--text); }

.page-head { padding-top: var(--space-8); }
.service-head { position: relative; }
.service-copy { position: relative; }   /* the big number sits beside the title, below the service tabs */
.service-copy .big-num { right: -0.5rem; }
.big-num {
  position: absolute; right: calc(var(--gutter) - 0.5rem); top: var(--space-6); z-index: -1;
  font-family: var(--font-mono); font-size: clamp(6rem, 4rem + 9vw, 13rem); line-height: 1; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong); user-select: none;
}
/* With a photo from a real job: copy on the left, the photo beside it, captioned with the job. */
.service-head.has-photo { display: grid; grid-template-columns: var(--split); gap: var(--space-7) var(--split-gap); align-items: end; }
.service-photo { margin: 0; }
.service-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.service-photo figcaption { margin-top: var(--space-3); font-size: var(--step--1); color: var(--text-faint); }
.service-photo figcaption a { color: var(--text-muted); text-decoration-color: var(--line-strong); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: var(--space-5); max-width: 50ch; }

/* Service details: a closer look at each part of the work, two to a row on wide screens. */
.details-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); max-width: 60rem; }
.details-list h3 { margin-bottom: var(--space-2); }
.details-list p { color: var(--text-muted); max-width: 54ch; }

.includes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-7); max-width: 54rem; }
.includes li { position: relative; padding-left: var(--space-5); }
.includes li::before { content: ""; position: absolute; left: 0; top: 0.3em; bottom: 0.3em; width: 2px; background: var(--line-strong); }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.filters a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-muted); text-decoration: none; padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.filters a[aria-current] { color: var(--text); border-color: var(--accent); }
main > section.work-list { padding-top: var(--space-6); }
/* The service tabs follow the page down, just under the header: another service is always one tap away. */
.service-tabs-bar {
  position: sticky; top: calc(4rem + 1px); z-index: 40;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-3);
}
.service-tabs { margin: 0; }
html:has(.service-tabs-bar) { scroll-padding-top: calc(9rem + var(--space-4)); }
.service-tabs-bar ~ .process.is-live .process-head { top: 9rem; }

/* ---------- Guides ---------- */
/* A reading page: one column at a comfortable measure, headings with room above them. */
.guide { padding-top: var(--space-8); }
.guide > * { max-width: 44rem; }
.guide-head .lead { margin-top: var(--space-5); }
.guide-meta { margin-top: var(--space-4); font-size: var(--step--1); color: var(--text-faint); }
.guide-meta a { color: var(--text-muted); text-decoration-color: var(--line-strong); }
.guide-contents { margin-top: var(--space-7); padding: var(--space-5); background: var(--surface-quiet); border: 1px solid var(--line); border-radius: var(--radius); }
.guide-contents .label { margin-bottom: var(--space-3); }
.guide-contents ol { margin: 0; padding-left: var(--space-5); color: var(--text-muted); }
.guide-contents li + li { margin-top: var(--space-1); }
.guide-contents a { display: inline-block; padding-block: 0.25rem; color: var(--text); text-decoration-color: var(--line-strong); }
.prose { margin-top: var(--space-7); font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); font-size: var(--step-2); color: var(--text); }
.prose h3 { margin-top: var(--space-6); color: var(--text); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose a { color: var(--text); }
.guide-cta { margin-top: var(--space-8); padding: var(--space-6); background: var(--bg-raised); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius); }
.guide-cta-title { font-size: var(--step-1); font-weight: 500; color: var(--text); }
.guide-cta > p:not(.guide-cta-title) { margin-top: var(--space-2); color: var(--text-muted); }
.guide-cta .closing-actions { margin-top: var(--space-5); }
.guide .related { margin-top: var(--space-6); color: var(--text-muted); }

.guide-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); max-width: 52rem; }
.guide-list li + li { border-top: 1px solid var(--line); }
.guide-list a { display: block; padding: var(--space-5) var(--space-2); text-decoration: none; transition: background-color var(--dur) ease; }
.guide-list :is(h2, h3) { font-size: var(--step-1); font-weight: 500; transition: color var(--dur-fast) ease; }
.guide-list p { margin-top: var(--space-2); color: var(--text-muted); max-width: 60ch; }
.guide-list .guide-meta { display: block; margin-top: var(--space-2); }
.guide-index .text-link { margin-top: var(--space-5); }

.work-detail { padding-top: var(--space-8); }
.work-detail > * { max-width: 52rem; }
.work-detail .label { margin-bottom: var(--space-3); }
.work-date { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-faint); }
.work-detail .lead { margin-top: var(--space-5); }
.work-detail .issuer, .work-detail .related { margin-top: var(--space-5); color: var(--text-muted); }
.work-detail img { width: 100%; height: auto; margin-block: var(--space-6); border-radius: var(--radius); }   /* .work-detail > * would otherwise lift the 100% cap */
.work-detail .body { color: var(--text); max-width: 64ch; margin-block: var(--space-5); }

.values ul { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); max-width: 60rem; }
.values li { color: var(--text-muted); border-top: 1px solid var(--line-strong); padding-top: var(--space-4); }
.values li strong { display: block; color: var(--text); font-weight: 500; margin-bottom: var(--space-1); }
.values > p { color: var(--text-muted); max-width: 62ch; }

main > section.founder { padding-top: var(--space-6); }
.founder { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-7); align-items: start; }
.founder-photo { max-width: 22rem; }
.founder-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.founder-copy { padding-top: var(--space-6); }
.founder-copy .label { margin-bottom: var(--space-2); }
.founder-name { font-size: var(--step-2); line-height: 1.25; font-weight: 500; margin-bottom: var(--space-4); }
.founder-bio { color: var(--text-muted); max-width: 56ch; font-size: var(--step-1); line-height: 1.65; }
.creds { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line-strong); max-width: 60ch; }
.creds h3 { font-size: var(--step-0); font-weight: 600; margin-bottom: var(--space-3); }
.creds ul { margin: 0; padding-left: var(--space-5); color: var(--text-muted); }
.creds li + li { margin-top: var(--space-2); }

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; padding-top: var(--space-8); }
.contact-copy { position: sticky; top: 6rem; }
.contact-copy .lead { margin-block: var(--space-5); }
.contact-copy a { color: var(--text); }
.contact-direct { line-height: 2; }
.contact-copy .area-note { margin-top: var(--space-6); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; font-weight: 500; }
.extras { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-weight: 500; }
.optional, .hint { color: var(--text-muted); font-weight: 400; font-size: var(--step--1); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface-quiet);
  border: 1px solid var(--border-control); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); min-height: 48px; width: 100%;
  transition: border-color var(--dur-fast) ease;
}
textarea { resize: vertical; min-height: 9rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); outline-offset: 1px; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: var(--step--1); }
.form-error { color: var(--danger); font-size: var(--step--1); padding: var(--space-3) var(--space-4); border-left: 2px solid var(--danger); background: var(--surface-quiet); }
.form-error ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.form-error a { color: var(--danger); }

/* Service choice: the same numbered rows as the home page, as radios */
.choice legend { margin-bottom: var(--space-3); }
.choice-rows { border-top: 1px solid var(--line-strong); }
.choice-row {
  display: grid; grid-template-columns: auto 2.5rem minmax(0, 1fr); align-items: center; gap: var(--space-3);
  min-height: 48px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background-color var(--dur) ease, box-shadow var(--dur) ease;
}
.choice-row input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); }
.choice-row .num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); }
.choice-row:has(input:checked) { background: var(--surface-quiet); box-shadow: inset 2px 0 0 var(--accent); }
.choice.has-error .choice-rows { border-top-color: var(--danger); }
.choice .field-error { margin-top: var(--space-2); }

.next-note { color: var(--text-muted); font-size: var(--step--1); max-width: 52ch; }
.contact-form .button { align-self: flex-start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding-block: var(--space-7) var(--space-5); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-bottom: var(--space-6); }
.footer-brand { display: flex; gap: var(--space-4); align-items: flex-start; }
.footer-brand img { flex: none; }
.footer-brand p { color: var(--text-muted); font-size: var(--step--1); max-width: 40ch; }
.footer-brand .footer-motto { color: var(--text); font-weight: 500; margin-bottom: var(--space-2); }
.footer-contact, .footer-nav { display: flex; flex-direction: column; font-size: var(--step--1); }
.footer-contact a, .footer-nav a { color: var(--text-muted); text-decoration: none; padding-block: 0.375rem; transition: color var(--dur-fast) ease; }

/* ---------- Hover: real pointers only, so a tap never leaves a row "stuck" up ---------- */

@media (hover: hover) and (pointer: fine) {
  .button:not([aria-disabled="true"]):hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
  .text-link:hover { color: var(--accent-text-hover); }
  .text-link:hover .arr { transform: translateX(3px); }
  .main-nav a:hover { color: var(--text); }
  .main-nav .cta:hover { background: var(--accent-soft); }
  .proof-list a:hover .proof-name { color: var(--text); }
  .guide-list a:hover { background: var(--surface-quiet); }
  .guide-list a:hover :is(h2, h3) { color: var(--accent-text-hover); }
  .service-list a:hover { background: var(--surface-quiet); }
  /* Without site.js riding the faders, hover pushes the cap up like keyboard focus does. */
  .service-list:not(.is-riding) a:hover .fader { --level: 1; }
  .service-list:not(.is-riding) a:hover .fader .cap {
    transform: translateX(var(--fader-travel, 4.5rem));
    transition: transform var(--dur-slow) var(--ease-settle);
  }
  .service-list a:hover .arrow { color: var(--accent); transform: translateX(6px); }
  .work-card a:hover .work-title { color: var(--accent-text-hover); }
  .filters a:hover { color: var(--text); border-color: var(--text-faint); }
  .footer-contact a:hover, .footer-nav a:hover { color: var(--text); }
  input:hover, select:hover, textarea:hover { border-color: var(--text-muted); }
  .choice-row:hover { background: var(--surface-quiet); }
}

/* ---------- Motion ---------- */

/* Scroll reveal (site.js adds .reveal only to things below the fold, so nothing flashes). */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-out), transform 650ms var(--ease-out);
}

/* Pointer light: a soft orange-white glow that follows the mouse across a card or row. */
.glow { position: relative; isolation: isolate; }
.glow::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  opacity: 0; transition: opacity 420ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .glow:hover::after { opacity: 1; }
  .work-card a { transition: transform var(--dur-slow) var(--ease-out); }
  .work-card a:hover { transform: translateY(-3px); }
}

/* Header firms up once the page scrolls. */
.site-header { transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 99%, transparent);
  border-bottom-color: var(--line-strong);
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.8);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Hero entrance: the clear line draws first, then the copy hangs off it in three beats. */
@media (prefers-reduced-motion: no-preference) {
  .hero-line    { animation: line-in 600ms var(--ease-out) both; }
  .hero-label,
  .hero h1      { animation: rise-in 560ms var(--ease-out) 80ms both; }
  .hero .lead   { animation: rise-in 560ms var(--ease-out) 140ms both; }
  .hero .actions,
  .hero-note    { animation: rise-in 560ms var(--ease-out) 200ms both; }
  .hero-photo   { animation: rise-in 700ms var(--ease-out) 160ms both; }
}

@keyframes line-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  /* Touch screens never hover, so the faders come up as each row scrolls into view instead. */
  @media (hover: none) and (prefers-reduced-motion: no-preference) {
    .service-list a { view-timeline: --row block; }
    .service-list:not(.is-riding) .fader .cap, .service-list:not(.is-riding) .fader .meter {
      animation: fader-up linear both;
      animation-timeline: --row;
      animation-range: entry 100% cover 45%;
    }
    .service-list:not(.is-riding) .fader .meter { animation-name: meter-up; }
  }
}

@keyframes fader-up { to { transform: translateX(var(--fader-travel, 4.5rem)); } }
@keyframes meter-up { to { transform: scaleX(1); } }

/* Reduced motion: no entrances, no scroll glide, nothing travels on its own. Hover and focus
   still blend in and out (a state change that eases is easier on the eye than one that snaps). */
@media (prefers-reduced-motion: reduce) {
  .motto.is-cycling .motto-line, .motto.is-cycling .motto-line.is-next { filter: none; transform: none; }
  .reveal { transform: none; }
  .reveal.is-in { transition: opacity 300ms ease !important; }
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Small screens and 200% zoom ---------- */

/* When the header would eat a big slice of a short viewport, let it scroll away. */
@media (max-height: 30rem) {
  .site-header { position: relative; }
  .service-tabs-bar { top: 0; }
  html { scroll-padding-top: var(--space-4); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: var(--space-4); }
  main > section { padding-block: var(--space-7); }
  .site-header { position: relative; }
  .header-inner { flex-wrap: wrap; padding-block: var(--space-2); }
  .main-nav { width: 100%; justify-content: space-between; gap: var(--space-2) var(--space-4); }
  .main-nav .nav-phone { display: none; }
  .header-phone {
    display: inline-block; padding-block: var(--space-2); color: var(--text); white-space: nowrap;
    font-variant-numeric: tabular-nums; text-decoration-color: var(--accent);
  }
  .hero, .founder, .contact, .footer-inner, .area, .service-head.has-photo { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: var(--space-6); padding-top: var(--space-7); }
  .intro > * { max-width: none; }
  /* Each service: a big fader beside the title on one line, the description underneath. */
  .service-list a {
    grid-template-columns: 6.5rem minmax(0, 1fr) 1.25rem; align-items: center;
    gap: var(--space-2) var(--space-3); padding: var(--space-6) 0;
  }
  .service-list .num { display: none; }
  .fader { position: relative; left: auto; top: auto; grid-column: 1; grid-row: 1; width: 100%; height: 22px; }
  .fader::before { top: 7px; height: 8px; border-radius: 4px; }
  .fader .meter { top: 9px; height: 4px; border-radius: 2px; }
  .fader .cap { left: -8px; top: -2px; width: 16px; height: 26px; }
  .fader .cap::after { left: 6px; top: 3px; bottom: 3px; }
  .service-list .name { grid-column: 2; grid-row: 1; font-size: var(--step-1); line-height: 1.2; }
  .service-list .arrow { grid-column: 3; grid-row: 1; }
  .service-list .short { grid-column: 1 / -1; grid-row: 2; font-size: var(--step-0); line-height: 1.55; }
  /* Who we serve: the lead sentences only; the service pages carry the rest. */
  .serve-rest { display: none; }
  .work-grid.is-asym { grid-template-columns: minmax(0, 1fr); }
  .work-grid.is-asym > :first-child { grid-row: auto; }
  .includes ul, .values ul, .details-list { grid-template-columns: minmax(0, 1fr); }
  .faq dl > div { grid-template-columns: minmax(0, 1fr); }
  .why-body, .serve-cols { grid-template-columns: minmax(0, 1fr); }
  .why-body { padding: var(--space-6) var(--space-5); }
  .timeline { padding-left: calc(var(--space-5) + var(--line-x)); }
  .timeline li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); }
  .timeline li::before { left: calc(-1 * (var(--space-5) + var(--line-x)) - 1px); width: calc(var(--space-3) + var(--line-x)); }
  .big-num { font-size: 5rem; top: var(--space-3); }
  /* Phones: the service tabs stay on one row and scroll sideways, rather than stacking above the title. */
  .service-tabs-bar { top: 0; padding-block: var(--space-2); }    /* the header scrolls away on phones */
  html:has(.service-tabs-bar) { scroll-padding-top: calc(4rem + var(--space-4)); }
  .service-tabs-bar ~ .process.is-live .process-head { top: 4.5rem; }
  .service-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .service-tabs::-webkit-scrollbar { display: none; }
  .service-tabs a { flex: none; white-space: nowrap; }
  .founder-copy { padding-top: 0; }
  .contact { gap: var(--space-7); }
  .contact-copy { position: static; }
  .closing-inner { align-items: flex-start; }
  .closing { background: linear-gradient(color-mix(in srgb, var(--bg-raised) 82%, transparent), color-mix(in srgb, var(--bg-raised) 82%, transparent)), var(--bg-raised) url("../img/band-stage.webp") center 40% / cover no-repeat; }
}

@media (max-width: 22.5rem) {
  .brand-sub { display: none; }
}