/* pitch&co site: shared tokens, type, films, the colour chart pattern and motion. */
/* Die Grotesk (Klim, licensed 2026-10-08). Four optical cuts of one design, each drawn for a size: A for text (10-30px),
   C for 52px section heads, D for 96px+ display. The cut sets the density, so tracking stays at 0. U is A, the text face. */
@font-face { font-family: U; src: url(/home/fonts/die-grotesk-a-regular.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: U; src: url(/home/fonts/die-grotesk-a-bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: UB; src: url(/home/fonts/die-grotesk-b-bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: UC; src: url(/home/fonts/die-grotesk-c-bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: UD; src: url(/home/fonts/die-grotesk-d-bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: Mono; src: url(/home/fonts/JetBrainsMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: block; }

:root {
  --paper: #FFFFFF; --ink: #000000; --grey: #6B6B6B; --grey-d: #888888; --rule: #D1D1D1; --rule-d: #2C2C2C; --stop: #E62600;
  --lead: 24px; --body: 18px; --label: 12px; --gut: 24px; --side: 48px; --cols: 12;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 699px) { :root { --lead: 22px; --body: 16px; --label: 11px; --gut: 16px; --side: 22px; --cols: 4; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); }
body { font: 400 var(--body)/var(--lead) U, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; }
.ink { background: var(--ink); color: var(--paper); }

.g12 { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); padding: 0 var(--side); }
.d1 { font-family: UD, U, sans-serif; font-weight: 700; font-size: clamp(52px, 8.3vw, 119px); line-height: .98; letter-spacing: 0; text-wrap: balance; }
.d2 { font-family: UC, U, sans-serif; font-weight: 700; font-size: clamp(36px, 3.6vw, 52px); line-height: 1; letter-spacing: 0; }
.t2 { color: var(--grey); } .ink .t2 { color: var(--grey-d); }
.lab { font: 400 var(--label)/var(--lead) Mono, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }
.ink .lab { color: var(--grey-d); }
.lab b { font-weight: 400; color: var(--ink); } .ink .lab b { color: var(--paper); }
.link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); padding-bottom: 2px; }
.link:hover, .link:focus-visible { background-size: 100% 1px; }
.btn { display: inline-block; height: calc(2 * var(--lead)); line-height: calc(2 * var(--lead)); padding: 0 18px; background: var(--stop); color: var(--paper); white-space: nowrap; transition: background .2s var(--ease); }
.btn:hover { background: var(--ink); } .ink .btn:hover { background: var(--paper); color: var(--ink); }
.btn.sm { height: 36px; line-height: 36px; padding: 0 14px; font-size: 15px; }

/* films: poster first, plays on point (hero autoplays) */
.film { position: relative; overflow: hidden; background: #000; }
.film img, .film video { width: 100%; height: 100%; object-fit: cover; }
.film video { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); }
.film.on video { opacity: 1; }
.film .view { position: absolute; top: 16px; right: 16px; font: 400 12px/1 Mono, monospace; letter-spacing: .04em; color: #fff; opacity: 0; transition: opacity .15s; }
.film:hover .view { opacity: 1; }

/* the house pattern: colour chart over waveform, one playhead */
.chart { position: relative; margin-top: 8px; cursor: pointer; color: var(--ink); }
.ink .chart { color: var(--paper); }
.chart canvas { display: block; width: 100%; }
.chart .c-col { height: 8px; }
.chart .c-wave { height: 18px; margin-top: 4px; opacity: .55; }
.chart .ph { position: absolute; top: -3px; height: 37px; width: 1px; background: currentColor; left: 0; opacity: 0; transition: opacity .12s; pointer-events: none; }
.chart.big .c-col { height: 20px; }
.chart.big .c-wave { height: 44px; margin-top: 6px; }
.chart.big .ph { height: 76px; top: -3px; }
.chart .c-meta { display: flex; justify-content: space-between; gap: 24px; margin-top: 6px; }


/* ---------- motion, from the references, filtered to "subtle, once, nothing at rest" ---------- */
/* load: the page fades up (DBCo: 1rem rise, expo out, 1s). Opacity only on body so fixed bars stay fixed. */
body { animation: pc-fade .9s var(--ease) .1s both; }
@keyframes pc-fade { from { opacity: 0; } }
.pc-up { animation: pc-up 1s var(--ease) .15s both; }
@keyframes pc-up { from { opacity: 0; transform: translateY(16px); } }
/* headlines rise from behind a mask, line by line, once (Love and Money: word rise, power3 out) */
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
.in .ln > span { transform: none; }
/* blocks and films rise and fade in as they arrive (Kaspar: y 80, 0.6s, small random delay; softened to 40px) */
.rv { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
/* point at one film, the others step back (DBCo and Love and Money) */
.dim .film { transition: filter .3s var(--ease); }
.dim:hover figure:not(:hover) .film { filter: brightness(.55); }
/* the nav leaves on the way down and comes back on the way up (DBCo: 0.4s) */
.pc-nav { transition: transform .4s var(--ease), background .3s var(--ease); }
.pc-nav.away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  body, .pc-up { animation: none; }
  .ln > span, .rv { transform: none !important; opacity: 1 !important; transition: none; }
  .pc-nav.away { transform: none; }
}

/* ================= the keynote system (direction B) ================= */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: 72px; align-items: center; transition: background .3s var(--ease), transform .4s var(--ease); }
header .mk { grid-column: 1 / 4; font-size: 22px; letter-spacing: -.02em; color: #fff; transition: color .3s; }
header nav { grid-column: 6 / 11; display: flex; gap: 40px; color: #fff; font-size: 16px; transition: color .3s; }
header .btn { grid-column: 11 / 13; justify-self: end; }
header.solid { background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(6px); }
header.solid .mk, header.solid nav { color: var(--ink); }

.open { height: 100svh; } .open .film { height: 100%; }
.open .film::after { content: ""; position: absolute; inset: 0 0 auto; height: 140px; background: linear-gradient(rgba(0,0,0,.35), transparent); }
.under { padding-top: 12px; }

.band { min-height: 78svh; display: grid; align-content: center; justify-items: center; text-align: center; padding: 140px var(--side); }
.band .d1 { max-width: 13ch; }
.band .lede { max-width: 36ch; margin-top: 32px; }
.band .acts { margin-top: 32px; display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
.band .clients { margin-top: 40px; }
.num { font-family: UD, U, sans-serif; font-weight: 700; font-size: clamp(120px, 24vw, 340px); line-height: .9; letter-spacing: 0; }
.num + .lab { margin-top: 24px; }
.stmt { text-wrap: balance; font-family: UC, U, sans-serif; font-weight: 700; font-size: clamp(30px, 3.9vw, 56px); line-height: 1.06; letter-spacing: 0; max-width: 24ch; }

.points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); max-width: 1344px; margin-top: 88px; text-align: left; }
.points div { border-top: 1px solid var(--rule); padding-top: 14px; }
.points p + p { margin-top: 6px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); width: 100%; max-width: 1344px; margin-top: 88px; text-align: left; }
.stats div { border-top: 1px solid var(--rule); padding-top: 12px; }
.stats .d2 { margin-top: 10px; }

.work { padding: 40px var(--side) 120px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 96px; }
.work figcaption { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.work .case { grid-column: span 12; }
.work .case.a { grid-column: 1 / 9; } .work .case.a .film { aspect-ratio: 4 / 5; }
.work .case.a-side { grid-column: 9 / 13; align-self: end; }
.work .case.f { grid-column: 1 / -1; } .work .case.f .film { aspect-ratio: 2.2; }
.work .more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); }
.work .more .film { aspect-ratio: 16 / 9; }
.work .elsewhere { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 14px; margin-bottom: -64px; }
.case-link { display: inline-flex; gap: 8px; align-items: baseline; }
.side-note { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.side-note .d2 { margin-top: 4px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); max-width: 1344px; width: 100%; margin-top: 88px; text-align: left; }
.steps div { border-top: 1px solid var(--rule); padding-top: 14px; }
.steps .lab { margin-bottom: 8px; }
.qt { max-width: 34ch; margin-top: 88px; font-size: 24px; line-height: 32px; letter-spacing: -.01em; text-wrap: balance; }
.qt + .lab { margin-top: 16px; }

.price { padding: 160px var(--side); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); }
.price h2 { grid-column: 1 / -1; text-align: center; margin: 0 auto 96px; }
.price .tier { border-top: 1px solid var(--rule-d); padding-top: 20px; }
.price .tier .d2 { margin: 28px 0 16px; }
.price .note { grid-column: 1 / 3; margin-top: 56px; }
.price .acts { grid-column: 3 / 4; margin-top: 56px; justify-self: start; }

.faq { padding: 160px var(--side); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.faq h2 { grid-column: 1 / -1; text-align: center; margin: 0 auto 88px; }
.faq .qa { grid-column: 3 / 11; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gut); border-top: 1px solid var(--rule); padding: 16px 0 32px; }
.faq .qa p:first-child { grid-column: 1 / 4; } .faq .qa p:last-child { grid-column: 4 / 9; }

.push { min-height: 90svh; }
footer { padding: 32px var(--side) 40px; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--rule-d); }

/* ================= case studies ================= */
.c-title { padding: 180px var(--side) 72px; }
.c-title .lab { margin-bottom: 28px; }
.c-title .d1 { max-width: 15ch; }
.c-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); margin-top: 72px; }
.c-meta div { border-top: 1px solid var(--rule); padding-top: 12px; }
.c-meta p + p { margin-top: 4px; }
.c-hero .film { aspect-ratio: 2.2; }
.c-body { padding: 0 var(--side) 140px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 24px; }
.c-body .lab { grid-column: 1 / 4; } .c-body p.t { grid-column: 4 / 9; }
.results { padding: 140px var(--side); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); }
.results h2 { grid-column: 1 / -1; margin-bottom: 72px; }
.results div { border-top: 1px solid var(--rule-d); padding-top: 14px; }
.results .num { font-size: clamp(72px, 9vw, 132px); margin-top: 16px; }
.films { padding: 140px var(--side) 40px; }
.films h2 { margin-bottom: 72px; }
.films .act { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); border-top: 1px solid var(--rule); padding: 16px 0 72px; }
.films .act > .lab { grid-column: 1 / 3; }
.films .act > figure { grid-column: 3 / 13; }
.films .act.trio > .grid3 { grid-column: 3 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); }
.films .film { aspect-ratio: 16 / 9; }
.films figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; }
.next { padding: 120px var(--side); display: flex; justify-content: space-between; align-items: end; gap: 24px; border-top: 1px solid var(--rule); }

@media (max-width: 699px) {
  header nav { display: none; } header .mk { grid-column: 1 / 3; } header .btn { grid-column: 3 / 5; }
  .band { padding: 112px var(--side); }
  .points, .stats, .steps, .c-meta, .results { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .steps { grid-template-columns: 1fr; }
  .work { grid-template-columns: 1fr; row-gap: 64px; } .work > * { grid-column: 1 / -1 !important; }
  .work .more { grid-template-columns: 1fr; row-gap: 40px; }
  .price { grid-template-columns: 1fr; row-gap: 40px; } .price .note, .price .acts { grid-column: 1 / -1; margin-top: 0; }
  .faq .qa { grid-column: 1 / -1; grid-template-columns: 1fr; row-gap: 8px; } .faq .qa p { grid-column: 1 / -1 !important; }
  .c-body { grid-template-columns: 1fr; } .c-body > * { grid-column: 1 / -1 !important; }
  .results { grid-template-columns: 1fr; row-gap: 40px; }
  .films .act { grid-template-columns: 1fr; row-gap: 12px; } .films .act > * { grid-column: 1 / -1 !important; }
  .films .act.trio > .grid3 { grid-template-columns: 1fr; row-gap: 32px; }
  .next { flex-direction: column; align-items: flex-start; }
  footer { flex-direction: column; }
}

/* =====================================================================
   The system (typographic review, 2026-10-07). Later rules win.
   Type: six sizes, whole pixels, set per breakpoint (no vw).
     12 mono labels · 18 body · 28 lead · 52 section · 96 display · 144 hero
   Space: 8 · 16 · 24 · 48 · 96 · 160.   Axes at 1440: 48 · 390 · 732 · 960 · 1074.
   ===================================================================== */
:root { --lead: 28px; --grey: #636363; }
@media (max-width: 699px) { :root { --lead: 26px; --body: 17px; --label: 12px; --side: 24px; } } /* phones set tighter (Rob, 2026-10-08) */
.lab { line-height: 24px; }
@media (max-width: 699px) { .lab { line-height: 20px; } }
.btn { height: 48px; line-height: 48px; padding: 0 16px; }
.btn.sm { height: 40px; line-height: 40px; padding: 0 16px; font-size: 18px; }
header .mk { font-size: 18px; }
header nav { grid-column: 4 / 10; justify-content: center; gap: 48px; font-size: 18px; }
header .btn { grid-column: 10 / 13; justify-self: end; }

.d1 { font-size: 96px; line-height: 96px; }
.d2 { font-size: 52px; line-height: 56px; }
.num { font-size: 96px; line-height: 96px; }
.stmt { font-size: 52px; line-height: 56px; }
.qt { font-size: 28px; line-height: 36px; }
@media (max-width: 699px) {
  .d1, .num { font-size: 52px; line-height: 56px; }
  .d2 { font-size: 28px; line-height: 32px; }
  .stmt { font-size: 28px; line-height: 32px; }
  .qt { font-size: 18px; line-height: 28px; }
}
/* the optical cut follows the size: 96px+ is D, 52px is C, 28px headlines are B, text is A */
.results h2.d1, .films h2.d1, .chap > .d1 { font-family: UC, U, sans-serif; }
@media (max-width: 699px) {
  .d1, .num, .c-title .d1 { font-family: UC, U, sans-serif; }
  .d2, .stmt, .chap > .d1 { font-family: UB, U, sans-serif; } /* B is drawn tighter than A for headlines */
}

/* film captions and inner rhythm on the 8px scale */
figcaption { margin-top: 8px !important; }
p + p { margin-top: 8px; }

/* case pages: one left axis at column 4 (x 390), sections every 160 */
.band { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); min-height: 0; padding: 160px var(--side) 0; text-align: left; justify-items: start; align-content: start; }
.band > * { grid-column: 4 / 11; max-width: none; }
.band .qt { margin-top: 0; text-wrap: pretty; }
.band .qt + .lab { margin-top: 16px; }
.c-title { padding: 160px var(--side) 96px; }
.c-title .d1 { font-size: 96px; line-height: 96px; max-width: 20ch; }
.c-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; }
.c-meta div { padding-top: 16px; }
.c-hero .film { aspect-ratio: 16 / 9; }
.c-body { padding: 96px var(--side) 0; }
.c-body .lab { grid-column: 1 / 4; } .c-body p.t { grid-column: 4 / 10; }
.results { padding: 96px var(--side); margin-top: 160px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.results h2.d1, .films h2.d1 { font-size: 52px; line-height: 56px; margin-bottom: 48px; }
.results div { padding-top: 16px; }
.results .num { margin-top: 16px; }
@media (min-width: 700px) { .results .num { font-size: 96px; line-height: 96px; } }
.films { padding: 160px var(--side) 0; }
.films .act { padding: 16px 0 96px; }
.films .act > .lab { grid-column: 1 / 4; }
.films .act > figure, .films .act.trio > .grid3 { grid-column: 4 / 13; }
.films .grid3 .chart .c-wave { display: none; }
.next { margin-top: 160px; padding: 96px var(--side); }
@media (max-width: 699px) {
  .band > * { grid-column: 1 / -1; }
  .c-title .d1 { font-size: 52px; line-height: 56px; }
  .c-meta, .results { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .results h2 { grid-column: 1 / -1; }
  .chart .c-meta span:last-child { display: none; }
}
.d2 { text-wrap: balance; }
li, .say, .cred, .proc-q { text-wrap: pretty; }

/* buttons: Apple squircle corners where the browser supports corner-shape; a plain rounded corner elsewhere.
   (A clip-path fallback cut the border and shadow off the sides in Safari.) */
.btn { --sq: 10px; border-radius: var(--sq); corner-shape: squircle; }
.btn.sm { --sq: 8px; }

/* buttons, matched to the supplied "Get the app" reference: a glossy white squircle. White to #ececed body,
   fine vertical striations, a soft top highlight and mid band, a hairline stroke that darkens toward the bottom,
   an inset bevel, and a debossed near-black label. Presses down slightly. */
.btn {
  color: #1b1c20; font-weight: 400; letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -.5px 0 rgba(0,0,0,.14);
  background:
    var(--grain),
    radial-gradient(78% 82% at 50% -34%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 66%),
    linear-gradient(90deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 8%, rgba(255,255,255,0) 92%, rgba(255,255,255,.25) 100%),
    radial-gradient(120% 130% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,.045) 100%),
    linear-gradient(180deg, #ffffff 0%, #f4f4f5 52%, #ececed 100%);
  box-shadow:
    inset 0 0 0 1px #b9bcc2,
    inset 0 -1px 0 #8a8d93,
    inset 0 1px 0 #d8dbe0,
    inset 0 2px 0 -1px rgba(255,255,255,.9),
    inset 0 -6px 5px -2px rgba(0,0,0,.05),
    inset 0 0 6px rgba(0,0,0,.05);
  filter: drop-shadow(0 .5px .5px rgba(0,0,0,.12)) drop-shadow(0 1px 1px rgba(255,255,255,.8));
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
.btn:hover, .ink .btn:hover { background:
    var(--grain),
    radial-gradient(78% 82% at 50% -34%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 42%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f8 52%, #efeff0 100%); color: #1b1c20; }
.btn:active { transform: scale(.97); }
.btn { --sq: 14px; } .btn.sm { --sq: 12px; }
/* the fine vertical grain: 1px stripes on 1x screens; half-pixel and fainter on 2x/3x, where 1px reads as pinstripes */
:root { --grain: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.035) 1px 2px);
        --grain-red: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.05) 1px 2px); }
@media (min-resolution: 2dppx) {
  :root { --grain: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 .5px, rgba(0,0,0,.02) .5px 1px);
          --grain-red: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 .5px, rgba(0,0,0,.03) .5px 1px); }
}

/* the main CTA: the same glossy squircle in the red stop (#E62600) (the nav button stays white) */
.btn:not(.sm), .btn:not(.sm):hover, .ink .btn:not(.sm):hover {
  color: #FFFFFF;
  text-shadow: 0 -1px 0 rgba(110,20,0,.45), 0 1px 0 rgba(255,255,255,.18);
  background:
    var(--grain-red),
    radial-gradient(78% 82% at 50% -34%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 66%),
    radial-gradient(120% 130% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, #F03A12 0%, #E62600 52%, #C82000 100%);
  box-shadow:
    inset 0 0 0 1px #A81C00,
    inset 0 -1px 0 #861600,
    inset 0 1px 0 #F7704F,
    inset 0 2px 0 -1px rgba(255,255,255,.45),
    inset 0 -6px 5px -2px rgba(0,0,0,.1),
    inset 0 0 6px rgba(0,0,0,.1);
}
.btn:not(.sm):hover { filter: brightness(1.06) drop-shadow(0 .5px .5px rgba(0,0,0,.12)); }

/* ---------- case studies, Apple pass (2026-10-07): one idea per chapter. Label, headline, one plain line, then the films.
   Specs move to the end, like a tech specs table. ---------- */
.c-title .sub { max-width: 36ch; margin-top: 32px; font-size: 28px; line-height: 36px; letter-spacing: -.01em; text-wrap: pretty; }
.chap { padding: 160px var(--side) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.chap > .lab { grid-column: 1 / 4; border-top: 1px solid var(--rule); padding-top: 16px; }
.chap > .d1 { grid-column: 4 / 13; border-top: 1px solid var(--rule); padding-top: 8px; font-size: 52px; line-height: 56px; }
.chap > .t { grid-column: 4 / 10; margin-top: 24px; font-size: 28px; line-height: 36px; letter-spacing: -.01em; color: var(--grey); text-wrap: pretty; }
.chap > .media { grid-column: 4 / 13; margin-top: 48px; }
.chap .grid2, .chap .grid3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
.chap .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chap .grid3 .chart .c-wave { display: none; }
.chap .film { aspect-ratio: 16 / 9; }
.chap figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; }
.specs { padding: 160px var(--side) 0; }
.specs .c-meta { margin-top: 24px; }
@media (max-width: 699px) {
  .c-title .sub { font-size: 18px; line-height: 28px; }
  .chap { padding-top: 96px; grid-template-columns: 1fr; }
  .chap > * { grid-column: 1 / -1 !important; }
  .chap > .d1 { border-top: 0; padding-top: 8px; font-size: 28px; line-height: 32px; }
  .chap > .t { font-size: 18px; line-height: 28px; }
  .chap .grid2, .chap .grid3 { grid-template-columns: 1fr; row-gap: 32px; }
  .specs { padding-top: 96px; }
  .results { grid-template-columns: 1fr; }
  .results .num { white-space: nowrap; }
}

/* ---------- logo (2026-10-07): the flared wordmark alone in the header (Rob: the dot mark read as a menu button at nav size).
   No mark anywhere (Rob, 2026-10-07). ---------- */
header .mk { display: flex; align-items: center; gap: 10px; }
header .mk svg { display: block; flex: none; }
header .mk .mk-word { height: 22px; width: auto; }
@media (max-width: 699px) { header .mk .mk-word { height: 20px; } }

/* tablets (700-1199px) get the desktop grid, so the right third and four stat columns run out of room */
@media (min-width: 700px) and (max-width: 1199px) {
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .results h2 { grid-column: 1 / -1; }
}
.results .num { white-space: nowrap; }
/* no orphans in running text */
p { text-wrap: pretty; }