/* SPONSR site — src/css/site.css
   v1 design foundation (legacy site src/css/site.css, 437 lines) transplanted per
   REDESIGN-BRIEF.md, accent swapped pink → signal lime. Tokens from the v1 system;
   type scale verbatim; composition = photo-first, slab words, treatments T1/T3/T4/T5,
   big honest numerals, ruled-row density.
   Flat, square, opaque: no radius, no shadow, no blur, no uppercase body, no mono.
   The only gradients are the two photographic vignettes (.hero__shade-*). */

/* ------------------------------------------------------------------ tokens */
:root {
  --k: #0A0A0A;          /* black — the sport */
  --k2: #161616;         /* raised black — rows on black only */
  --w: #FFFFFF;          /* white — the business */
  --paper: #F5F5F2;      /* long text on black */
  --g1: #3A3A3C;         /* rules on black */
  --g2: #6B6B68;         /* muted text on white */
  --g3: #9A9A96;         /* muted text on black */
  --g4: #C9C9C5;         /* rules on white, field borders */
  --g5: #EFEFEC;         /* grey ground, field fill */
  --accent: #DFFC60;     /* signal lime — a flash, not a scheme */
  --accent-text: #405416;/* accent-as-text on white/paper grounds (contrast-safe) */
  --on-accent: #0B0B0B;  /* the ONLY type colour permitted on lime */

  --f-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --f-body: Archivo, Arial, Helvetica, sans-serif;
  --f-figures: 'Chakra Petch', 'Trebuchet MS', Arial, sans-serif;

  --h1: clamp(40px, 2.2vw + 31px, 72px);
  --h2: clamp(32px, 1.5vw + 26px, 48px);
  --h3: clamp(24px, 0.55vw + 21.9px, 30px);
  --lead: clamp(20px, 0.38vw + 18.5px, 24px);
  --body: clamp(17px, 0.1vw + 16.6px, 18px);
  --small: 15px;                      /* floor: nothing user-facing below 15 px */
  --caption: 14px;                    /* Chakra figures only — NEVER captions on artwork */
  --num-l: clamp(44px, 1.9vw + 36.6px, 64px);
  --slab: clamp(40px, 5.6vw + 10px, 96px);     /* T5 slab words: 64–96 at desktop, 40 at 390 */
  --num: clamp(88px, 8vw + 45px, 160px);       /* the honest numerals: 160 at 1440, 88 at 390 */

  --section: clamp(64px, 8.9vw, 128px);
  --gutter: 32px;
  --side: clamp(24px, 5.5vw, 80px);
  --max: 1280px;
  --measure: 680px;
  --hdr-h: 120px;        /* the black bar's height — sections that start a page clear it */
  /* distance from the viewport edge to the .wrap content edge: what a half-bleed row's
     text column pads to so it lines up with everything else on the page */
  --edge: max(var(--side), calc((100vw - var(--max)) / 2));
}
/* Under 768px the 12-column grid is single-column, so the gutter only shows up as 11 column
   gaps the layout still has to fit: 11 x 32px = 352px, wider than a 360px screen's content
   box, which pushed every page 16px sideways. Halving it is visually neutral here. */
@media (max-width: 767px) { :root { --hdr-h: 88px; --gutter: 16px; } }

/* ---------- fonts (local woff2 only, no CDN) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Black';
  src: url('/assets/fonts/ArchivoBlack-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/ChakraPetch-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/ChakraPetch-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/ChakraPetch-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--k);
  color: var(--k);
  font-family: var(--f-body);
  font-size: var(--body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
main p a:not(.btn) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--k); color: var(--w); }
.s-black ::selection, .ph ::selection, .pin ::selection, .site-nav ::selection, .ftr ::selection { background: var(--w); color: var(--k); }

.skip { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 12px 20px; background: var(--w); color: var(--k); font-weight: 700; transform: translateY(-200%); }
.skip:focus { transform: none; outline: 2px solid var(--k); }

/* ------------------------------------------------------------------ type */
.h1, h1 { font-family: var(--f-display); font-weight: 400; font-size: var(--h1); line-height: 1.02; letter-spacing: -0.02em; max-width: 1100px; overflow-wrap: break-word; }
.h2, h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--h2); line-height: 1.06; letter-spacing: -0.015em; max-width: 900px; }
.h3, h3 { font-family: var(--f-body); font-weight: 700; font-size: var(--h3); line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: var(--lead); line-height: 1.4; }
.small { font-size: var(--small); line-height: 1.5; }
.figure { font-family: var(--f-figures); font-weight: 600; font-size: var(--caption); line-height: 1.3; letter-spacing: 0.04em; }
.num { font-family: var(--f-figures); font-weight: 700; font-size: var(--num-l); line-height: 1; font-variant-numeric: tabular-nums; }
.ac { color: var(--accent); }
.s-white .ac, .s-grey .ac { color: var(--accent-text); }   /* lime-as-text on white grounds uses the readable tone */
.measure { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose .lead + p { margin-top: 1.5em; }
.stack > * + * { margin-top: 32px; }

/* SplitText line masks (headlines only): each line sits in an overflow-clipped wrapper so it
   wipes up into view. The mask gets 0.06em of vertical room (layout-neutral): Archivo Black's
   content box is taller than a 1.02 line-height, so without it the mask would shave the glyph box. */
.ln { display: block; }
.ln-mask { padding-block: 0.06em; margin-block: -0.06em; }

/* the honest numerals: Chakra Petch 700, signal lime on black */
.numeral { font-family: var(--f-figures); font-weight: 700; font-size: var(--num); line-height: 0.88; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--side)); margin-inline: auto; padding-inline: var(--side); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; }
.c-1-5 { grid-column: 1 / 5; }
.c-1-6 { grid-column: 1 / 7; }
.c-1-7 { grid-column: 1 / 8; }
.c-1-8 { grid-column: 1 / 9; }
.c-5-13 { grid-column: 5 / 13; }
.c-7-13 { grid-column: 7 / 13; }
.c-8-13 { grid-column: 8 / 13; }
.c-9-13 { grid-column: 9 / 13; }
.c-3-11 { grid-column: 3 / 11; }
.c-1-13 { grid-column: 1 / 13; }
@media (min-width: 1024px) { .side { position: sticky; top: 32px; align-self: start; } }
.side .photo { aspect-ratio: 4 / 5; }
.side .photo picture { display: block; height: 100%; }
.side .photo img, .side .photo video { width: 100%; height: 100%; object-fit: cover; }
.artefact { overflow: hidden; background: var(--g5); }
.artefact--data { aspect-ratio: 12 / 17; }
.artefact--data img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.artefact--cover img { object-position: 0 0; }
.side .artefact { aspect-ratio: 12 / 17; }
@media (max-width: 1023px) { .grid > [class*="c-"] { grid-column: 1 / 13; } }

.s { padding-block: var(--section); position: relative; }
.s-white { background: var(--w); color: var(--k); }
.s-grey { background: var(--g5); color: var(--k); }
.s-black { background: var(--k); color: var(--paper); }
.s-black h1, .s-black h2, .s-black h3 { color: var(--w); }
.s-black .muted { color: var(--g3); }
.s-white .muted, .s-grey .muted { color: var(--g2); }
.s-tight { padding-block: calc(var(--section) * 0.6); }
.s-flush { padding-block: 0; }
.s-black .grain::after, .s-black.grain::after { z-index: 0; }
.s-black > .wrap { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ buttons (56px, square, lime full-stop) */
.btn {
  display: inline-block; text-align: center; vertical-align: middle;
  height: 56px; padding: 0 28px;
  font-family: var(--f-body); font-weight: 700; font-size: 18px; line-height: 56px;
  background: var(--k); color: var(--w);
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.btn .stop { color: var(--accent); transition: color 150ms; }
.btn:hover, .btn:focus-visible { background: var(--w); color: var(--k); }
.btn:hover .stop, .btn:focus-visible .stop { color: var(--accent-text); }
.s-black .btn, .ph .btn, .pin .btn, .site-nav .btn { background: var(--w); color: var(--k); }
.s-black .btn .stop, .ph .btn .stop, .pin .btn .stop, .site-nav .btn .stop { color: var(--accent-text); }
.s-black .btn:hover, .ph .btn:hover, .pin .btn:hover, .site-nav .btn:hover, .s-black .btn:focus-visible { background: var(--k); color: var(--w); }
.s-black .btn:hover .stop, .ph .btn:hover .stop, .pin .btn:hover .stop, .site-nav .btn:hover .stop { color: var(--accent); }
.btn--accent, .s-black .btn--accent, .ph .btn--accent, .pin .btn--accent, .site-nav .btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent .stop, .s-black .btn--accent .stop, .ph .btn--accent .stop, .site-nav .btn--accent .stop { color: var(--on-accent); }
.btn--accent:hover, .btn--accent:focus-visible { background: var(--k); color: var(--w); }
.btn--accent:hover .stop, .btn--accent:focus-visible .stop { color: var(--accent); }
@media (max-width: 767px) { .btn { display: block; height: 52px; line-height: 52px; font-size: 17px; width: 100%; } }

/* ------------------------------------------------------------------ header (solid black bar, every page) */
/* Jeff, 18 Sep 2026: "the header bar should be black, the whole thing, not just the logo in a
   black box… always black on every page." One rule, no per-page variants: the bar is var(--k)
   at every breakpoint, nav type is white, and the wordmark's black box merges into the bar. */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--k); color: var(--w); }
.hdr__row { display: flex; align-items: center; gap: var(--gutter); height: 120px; }
/* Jeff, 22 Sep 2026: "the header needs to be fixed as you scroll, so the menu is always
   visible — maybe turn slightly transparent as you scroll". The bar stays put; once the page
   has moved (site.js stamps .is-scrolled past 40px) it drops to 84px and goes 92% black, so the
   photo or section beneath shows through faintly (no blur: the site is flat, gate 9). The wordmark's own
   black box merges into the bar in both states. Nothing changes for reduced-motion users
   except the transition is instant. */
.hdr { transition: background-color .25s ease; }
.hdr__row, .hdr__mark .wordmark { transition: height .25s ease, width .25s ease; }
.hdr.is-scrolled { background: rgba(0, 0, 0, .92); }
.hdr.is-scrolled .hdr__mark { background: transparent; }
@media (min-width: 768px) {
  .hdr.is-scrolled .hdr__row { height: 84px; }
  .hdr.is-scrolled .hdr__mark .wordmark { width: 160px; }
}
@media (prefers-reduced-motion: reduce) { .hdr, .hdr__row, .hdr__mark .wordmark { transition: none; } }
/* the open menu sits on top of a solid bar, never a see-through one */
body.menu-open .hdr.is-scrolled { background: var(--k); }
/* Brand rule (10-DIRECTION.md §1.5): the wordmark never sits bare on a light or photographic
   ground — the header mark always carries its black box (sides 3 S, top/bottom 2.5 S).
   On a black section the box disappears into the ground, which is the spec'd behaviour. */
.hdr__mark { display: block; flex: 0 0 auto; background: var(--k); padding: 11px 20px 10px; }
.hdr__mark .wordmark { display: block; width: 200px; height: auto; }
.hdr__nav { flex: 1 1 auto; }
.hdr__nav ul { display: flex; justify-content: center; gap: 28px; }
.hdr__nav a { display: inline-block; white-space: nowrap; text-decoration: none; font-weight: 500; font-size: 17px; line-height: 1; padding: 6px 0; border-bottom: 2px solid transparent; }
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { border-bottom-color: currentColor; }
.hdr__cta { flex: 0 0 auto; }
/* the one motion control (every page): header at ≥1280, persisted in localStorage */
@media (min-width: 1280px) { .site-nav__cta-row { display: none; } }
/* Four top-level items (three with submenus) since the 21 Sep 2026 nav pass: the full-size row
   fits from 1280px up; below that the nav collapses behind Menu. */
.hdr__menu { display: none; font-weight: 700; font-size: 17px; padding: 12px 0; }
@media (max-width: 1279px) {
  .hdr__row { justify-content: space-between; }
  .hdr__menu { margin-left: auto; }
  /* JS present: nav collapses behind the Menu button (site.js stamps html.js) */
  .js .hdr__nav { display: none; }
  .js .hdr__menu { display: inline-block; }
  /* no-JS fallback: nav renders as a wrapping row of links under the header row */
  html:not(.js) .hdr__row { flex-wrap: wrap; height: auto; padding-block: 20px 8px; }
  html:not(.js) .hdr__nav { flex-basis: 100%; order: 9; padding-bottom: 12px; }
  html:not(.js) .hdr__nav ul { flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; }
}
/* The mobile bar: wordmark, the one CTA and Menu have to sit inside 360px without the row
   overflowing the bar (it used to push "Menu" off the right edge and give the page a 21px
   sideways scroll — invisible while the header was transparent, obvious once it went black). */
@media (max-width: 767px) {
  .hdr .wrap { padding-inline: 16px; }
  .hdr__row { height: 88px; gap: 10px; }
  .hdr__mark { padding: 6px 9px 5px; }
  .hdr__mark .wordmark { width: 84px; }
  .hdr .hdr__cta { display: inline-block; width: auto; height: 40px; line-height: 40px; padding: 0 10px; font-size: 14px; margin-left: auto; }
  .hdr__menu { margin-left: 0; font-size: 15px; }
}
/* No JS: the nav renders as a wrapped row of links, so the bar is taller than any hero's top
   padding. It sits in the flow instead of over the page — nothing is ever hidden beneath it. */
html:not(.js) .hdr { position: static; }
/* A page whose first band is not a photo hero (accountant, privacy, terms) clears the bar
   in its own top padding — at 768px the section's own clamp() padding is shorter than 120px. */
main > .s:first-child { padding-top: calc(var(--hdr-h) + clamp(40px, 3.4vw, 56px)); }
html:not(.js) main > .s:first-child { padding-top: var(--section); }

/* full-screen menu (plain black, Archivo Black links in ruled rows) — the open state of #site-nav.
   Collapse itself is the ≤1279 .js .hdr__nav rule above; mechanics (focus trap, Escape,
   no-JS fallback) live in site.js and are unchanged. */
.js .site-nav.is-open {
  display: block; position: fixed; inset: 0; z-index: 35;
  background: var(--k); color: var(--w);
  overflow-y: auto;
  padding: 120px var(--side) 48px;
}
/* display:block resets the closed-state .hdr__nav ul flex row — without it the open
   overlay laid all links in one horizontal centred row, clipped off both screen edges */
.js .site-nav.is-open ul { display: block; max-width: calc(var(--max) + 2 * var(--side)); margin-inline: auto; padding-top: 24px; }
.js .site-nav.is-open li { border-top: 1px solid var(--g1); }
.js .site-nav.is-open li:last-child { border-bottom: 1px solid var(--g1); }
.js .site-nav.is-open li.site-nav__cta-row { border-bottom: 0; padding-top: 32px; }
.js .site-nav.is-open a { display: block; text-decoration: none; padding: 20px 0; font-family: var(--f-display); font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--w); }
/* the CTA row keeps its button skin: restore height/line-height (the is-open a rule
   sets line-height 1.1 which top-aligned the label) and the on-accent ink (the same
   rule's color: var(--w) painted white on lime) */
.js .site-nav.is-open a.btn { display: inline-block; font-family: var(--f-body); font-size: 18px; padding: 0 28px; height: 56px; line-height: 56px; }
.js .site-nav.is-open a.btn--accent { color: var(--on-accent); }
.js .site-nav.is-open a.btn--accent .stop { color: var(--on-accent); }
@media (min-width: 768px) { .js .site-nav.is-open { padding-top: 140px; } .js .site-nav.is-open a { font-size: 40px; } }
@media (max-width: 767px) { .js .site-nav.is-open { padding-top: 108px; } .js .site-nav.is-open a.btn { display: inline-block; width: auto; height: 52px; line-height: 52px; } }
/* while the menu is open the header keeps only wordmark + Menu (acting close) visible above it */
body.menu-open .hdr { color: var(--w); }
body.menu-open .hdr__cta { visibility: hidden; }

/* ------------------------------------------------------------------ page transition: the black slab (300 ms, JS-driven) */
.veil { position: fixed; inset: 0; z-index: 60; background: var(--k); transform: translateY(101%); pointer-events: none; visibility: hidden; }
.veil::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
html.is-arriving .veil, html.is-leaving .veil { visibility: visible; }
/* arrival: covered at first paint; if the scripts never run, the slab still leaves after 600 ms */
@keyframes veil-off { to { transform: translateY(-101%); visibility: hidden; } }
html.is-arriving .veil { transform: none; animation: veil-off 0.3s 0.6s forwards; }

/* ------------------------------------------------------------------ photo sections (full-bleed, T5-ready) */
.ph { position: relative; background: var(--k); color: var(--w); min-height: 76svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.ph--hero, .ph--full { min-height: 100svh; }
.ph__media { position: absolute; inset: 0; overflow: hidden; }
.ph__media picture { display: block; height: 100%; }
/* broadcast grade on the image only (never on type): crushed blacks, a touch more saturation */
.ph__media img, .ph__media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: contrast(1.08) saturate(1.12); will-change: transform; }
@media (max-width: 767px) { .ph__media img, .ph__media video { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
/* Photographic vignettes for legibility — the only two gradients on the site.
   Bottom: ~80% black at the baseline fading to nothing by mid-frame. Top: a 160px band under the header. */
.hero__shade-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.72) 18%, rgba(10, 10, 10, 0.40) 55%, rgba(10, 10, 10, 0) 100%); }
.hero__shade-top { position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.60) 0%, rgba(10, 10, 10, 0) 100%); }
.ph__body { position: relative; z-index: 2; width: 100%; padding-block: clamp(140px, 18vw, 200px) clamp(48px, 6vw, 80px); }
.ph--hero .ph__body { padding-top: 160px; }
.ph__main { max-width: 820px; }   /* 5 short lines at 1440 — no orphaned last word */
.ph__main > * + * { margin-top: 40px; }
.ph__body .slabs + .panel, .ph__body .slabs + p { margin-top: 40px; }
@media (max-width: 767px) { .ph__body { padding-block: 120px 40px; } .ph__main > * + * { margin-top: 24px; } }

/* one <img> per breakpoint, each with its own approved alt; the hidden one is never fetched */
.only-m, .ph__media .only-m { display: none; }
@media (max-width: 767px) { .only-d, .ph__media .only-d { display: none; } .only-m, .ph__media .only-m { display: block; } }
/* crossfade (Already backing): the second still fades in over the first, scrubbed, no pin */
.ph__media .xfade-top { position: absolute; inset: 0; opacity: 0; }
/* the slab that lifts (Hospitality): a black slab over the still, wiped up on scroll */
.ph__lift { position: absolute; left: 0; right: 0; bottom: 0; top: 45%; z-index: 1; background: var(--k); }
.ph__lift::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }

/* half-bleed: a still from the page centre to the viewport edge (≥78svh), the prose beside it */
.half { position: relative; display: flex; flex-direction: column; }
.half__photo { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; overflow: hidden; background: var(--k2); }
.half__photo picture { display: block; height: 100%; }
.half__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: contrast(1.08) saturate(1.12); will-change: transform; }
.half__body { position: relative; z-index: 2; flex: 1 1 auto; display: flex; align-items: center; min-height: 78svh; }
.half__text { width: calc(50% - var(--gutter)); max-width: 560px; padding-block: 96px; }
.half__text > * + * { margin-top: 32px; }
/* the black variant: giant lime numeral + prose beside a duotone still */
.half--k { background: var(--k); color: var(--paper); }
.half--k .half__text { max-width: 620px; }
.half--k .rows > * { border-color: var(--g1); }
.half--k.grain::after { z-index: 1; }
@media (max-width: 1023px) {
  .half__photo { position: relative; left: auto; order: 2; height: min(64svh, 560px); }
  .half__body { min-height: 0; order: 1; }
  .half__text { width: 100%; max-width: var(--measure); padding-block: 80px 48px; }
}

/* the circuits line (Hospitality): the five names in Archivo Black up to 96px, scrubbed across.
   Rest states must sit fully in-frame at section entry/exit (v1 clipping fixed in motion.js). */
.line-sec { position: relative; background: var(--k); color: var(--w); min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
/* the default (no JS) is the wrapping static layout; the single-line horizontal form exists only with the controller live */
.line { position: relative; z-index: 2; white-space: normal; font-family: var(--f-display); font-size: clamp(48px, 6.6vw, 96px); line-height: 1.06; letter-spacing: -0.02em; padding-inline: var(--side); will-change: transform; max-width: none; }
html.js-motion .line { white-space: nowrap; line-height: 1; }
.line .pre { font-family: var(--f-body); font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: 0; color: var(--g3); vertical-align: 0.22em; }
.line .ck { color: var(--w); }
/* paused / reduced motion / saveData: a wrapping static layout — every name reachable */
html.is-paused .line { white-space: normal; transform: none !important; line-height: 1.06; }
@media (prefers-reduced-motion: reduce) { html .line { white-space: normal; transform: none !important; line-height: 1.06; } }

/* T4 accent tint (duotone) on one secondary still per page: grayscale image under a lime multiply layer */
.duo { position: relative; }
.duo img, .duo video { filter: grayscale(1) contrast(1.15); }
.duo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--accent); mix-blend-mode: multiply; pointer-events: none; }
/* the colour wash: 60% lime multiply over a full-colour photograph; white/lime slab words sit on it */
.wash::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--accent); mix-blend-mode: multiply; opacity: 0.6; pointer-events: none; }

/* T3 scratch: one to three white hairlines drawn across a photo section on scroll (DrawSVG).
   Pushed hotter than v1 per the brief (0.45 — v1's 0.34 read as invisible). */
.scratch { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.scratch line { stroke: var(--w); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.45; }

/* T5 slab words: Archivo Black, each line its own hard-edged slab (black, one lime), offset so the accent slips right.
   Inline spans + <br> so a copy check still reads the heading as one approved line. */
.slabs { font-family: var(--f-display); font-weight: 400; font-size: var(--slab); line-height: 1.24; letter-spacing: -0.02em; max-width: none; }
.slabs > span { display: inline; background: var(--k); color: var(--w); padding: 0.08em 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.slabs > .slab-ac { background: var(--accent); color: var(--on-accent); margin-left: 0.3em; }
.slabs--w > span { background: var(--w); color: var(--k); }
.slabs--w > .slab-ac { background: var(--k); color: var(--w); }
.slabs--long { font-size: clamp(32px, 3.9vw + 8px, 64px); }   /* a full sentence pair */
/* the black panel that carries body copy and the button on a photograph (type never sits on grain or the photo) */
.panel { background: var(--k); color: var(--paper); padding: 40px; max-width: 620px; }
.panel > * + * { margin-top: 24px; }
.panel p { max-width: 540px; }
@media (max-width: 767px) { .panel { padding: 24px; } }

/* ------------------------------------------------------------------ the pinned section (Home only): the decal lands */
.pin { position: relative; background: var(--k); color: var(--paper); min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.pin h2 { color: var(--w); }
.pin__photo { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; overflow: hidden; background: var(--k2); }
.pin__photo img, .pin__photo video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pin__body { position: relative; z-index: 2; flex: 1 1 auto; display: flex; align-items: center; min-height: 100svh; }
.pin__text { width: calc(50% - var(--gutter)); max-width: 560px; padding-block: 140px 80px; }
.pin__text > * + * { margin-top: 32px; }
.decal-seat { height: 56px; }
.decal-fly { position: absolute; left: 0; top: 0; z-index: 3; width: 200px; opacity: 0; pointer-events: none; will-change: transform; }
.decal-fly svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 1023px) {
  .pin { min-height: 0; }
  .pin__photo { position: relative; left: auto; order: 2; height: min(56svh, 520px); }
  .pin__body { min-height: 0; order: 1; }
  .pin__text { width: 100%; max-width: var(--measure); padding-block: 120px 48px; }
  .decal-seat { height: 40px; }
  .decal-fly { width: 120px; }
}

/* ------------------------------------------------------------------ the report flick (Every quarter): three stacked crops of the artefact */
.flick__stack { position: relative; overflow: hidden; background: var(--g5); aspect-ratio: 24 / 17; width: min(100%, calc(82svh * 24 / 17)); margin-inline: auto; }
/* explicit crop geometry: the box is the spread's own aspect, so a 200% × 200% layer is the spread at 2× and its
   top-left / top-right quarter is one page's top half. Paused, reduced motion and no-JS all show ONE complete spread. */
.flick__stack img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0; }
.flick__stack img:nth-child(2) { width: 200%; height: 200%; visibility: hidden; }                              /* the photograph page */
.flick__stack img:nth-child(3) { width: 200%; height: 200%; transform: translateX(-50%); visibility: hidden; } /* the data page */
.is-paused .flick__stack img:not(:first-child) { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .flick__stack img:not(:first-child) { visibility: hidden !important; } }
.count { align-items: start; }

/* ------------------------------------------------------------------ grain (T1) — every black ground; hotter than v1 (6.5%); off under 768px, still when paused */
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+"); /* feTurbulence fractalNoise 0.8, 2 octaves */
  background-size: 240px 240px;
  opacity: 0.065;
  mix-blend-mode: overlay;
}
/* the grain moves only once the motion controller is live: no JS = static grain */
@keyframes grain { to { background-position: 200px 140px; } }
html.js-motion .grain::after { animation: grain 0.96s steps(8) infinite; }
/* pause/reduce overrides must outrank html.js-motion (0-2-2): keep specificity >= and later in source */
html.is-paused .grain::after, .is-paused .grain::after { animation: none; }
@media (prefers-reduced-motion: reduce) { html.js-motion .grain::after, .grain::after { animation: none; } }
@media (max-width: 767px) { .grain::after { display: none; } }

/* ------------------------------------------------------------------ media blocks */
.photo { position: relative; overflow: hidden; background: var(--k2); }
.photo img { width: 100%; height: auto; }
.photo--cover img, .photo--cover video { width: 100%; height: 100%; object-fit: cover; }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--band { height: clamp(320px, 52vw, 720px); }
@media (max-width: 1023px) { .photo--tall { aspect-ratio: 3 / 2; } }

/* film player (poster-first, restricted-motion safe — mechanics unchanged in site.js) */

/* ------------------------------------------------------------------ rows and lists (hairlines, no bullets, no numerals) */
.rows { max-width: var(--measure); }
.rows > * { padding-block: 32px; border-top: 1px solid var(--g4); font-size: 20px; line-height: 1.5; }
@media (max-width: 767px) { .rows > * { font-size: 18px; padding-block: 24px; } }
.rows > *:last-child { border-bottom: 1px solid var(--g4); }
.s-black .rows > * { border-color: var(--g1); }
.rows--lead > * { font-size: var(--lead); line-height: 1.4; }
.rows--top { border-top: 0; }
.rows--top > *:first-child { border-top: 0; padding-top: 0; }

/* black box on white — the heading slab (once per page) */
.slab { display: inline-block; background: var(--k); color: var(--w); padding: 0.62em 0.75em; max-width: 100%; }
.slab-wrap { margin-bottom: 48px; }
.slab--measure { max-width: var(--measure); }

/* accent hairline — once per page */
.rule-accent { height: 2px; background: var(--accent); width: 100%; border: 0; margin: 0; }

/* two-column prose at 1440 */
.cols-2 { column-count: 2; column-gap: var(--gutter); column-fill: balance; }
.cols-2 > * { break-inside: avoid; }
.cols-2 > * + * { margin-top: 1em; }
@media (max-width: 1023px) { .cols-2 { column-count: 1; } }

/* steps (how we work) — the one honest sequence: numerals 1–4 at 160px, the lime hairline travelling down them */
.steps { position: relative; padding-left: 40px; }
.steps__line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform-origin: top; will-change: transform; }
.steps__list > li { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--gutter); align-items: start; padding-block: 56px; border-top: 1px solid var(--g1); }
.steps__list > li:last-child { border-bottom: 1px solid var(--g1); }
.steps__list .numeral { line-height: 0.8; }
.steps__n { color: var(--accent); }
.steps__body > * + * { margin-top: 16px; }
.steps__body h2 { color: var(--w); max-width: var(--measure); }
.steps__body p { max-width: var(--measure); color: var(--paper); }
@media (max-width: 767px) { .steps { padding-left: 24px; } .steps__list > li { grid-template-columns: 1fr; row-gap: 16px; padding-block: 32px; } }

/* the four frames, edge to edge */
.strip-sec { position: relative; background: var(--k); }
/* the T4 duotone frame is section-scale (half the row, ≥70svh), the other three are tall crops beside it */
.strip { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4px; }
.strip .frame { position: relative; height: clamp(480px, 70svh, 760px); overflow: hidden; background: var(--k2); }
.strip .frame picture { display: block; height: 100%; }
.strip .frame img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) saturate(1.12); will-change: transform; }
.strip .frame--paper img { object-position: 0 0; filter: none; }
@media (max-width: 767px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip .frame { height: 40svh; } .strip .frame:first-child { grid-column: 1 / -1; height: 62svh; } }

/* ------------------------------------------------------------------ form (talk-to-us — schema-injected controls; class names preserved) */
.enquiry { max-width: var(--measure); }
.enquiry > * + * { margin-top: 32px; }
.enquiry__preview-note { margin: 0; padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--g5); font-size: var(--small); }
.enquiry__field label { display: block; font-weight: 500; font-size: var(--body); margin-bottom: 8px; }
.enquiry__optional { font-weight: 400; color: var(--g2); }
.enquiry__hint { display: block; margin: 0 0 8px; color: var(--g2); font-size: var(--small); }
.enquiry__field input, .enquiry__field textarea {
  display: block; width: 100%; font: inherit; color: var(--k);
  background: var(--g5); border: 1px solid var(--g4); padding: 0 16px; height: 56px;
}
.enquiry__field textarea { height: auto; min-height: 160px; padding: 14px 16px; resize: vertical; }
.enquiry__field input:focus-visible, .enquiry__field textarea:focus-visible { outline: 2px solid var(--k); outline-offset: 0; }
.enquiry__field input[data-invalid], .enquiry__field textarea[data-invalid] { border-bottom: 2px solid var(--k); }
.enquiry__error { margin: 8px 0 0; font-size: var(--small); font-weight: 500; }
.enquiry__error[hidden] { display: none; }
.enquiry__trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.enquiry__submit {
  display: inline-block; height: 56px; padding: 0 28px; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font: 700 18px/56px var(--f-body);
  transition: background-color 150ms, color 150ms;
}
.enquiry__submit:hover, .enquiry__submit:focus-visible { background: var(--k); color: var(--w); }
.enquiry__submit:disabled { opacity: 0.6; cursor: wait; }
.enquiry__status { margin: 0; font-size: var(--lead); line-height: 1.4; font-weight: 500; min-height: 1.5em; max-width: var(--measure); }
.form-aside { color: var(--k); }
.form-aside > * + * { margin-top: 24px; }
@media (max-width: 1023px) { .form-aside { order: -1; } }

/* ------------------------------------------------------------------ footer (4-col black with descriptor lockup) */
.ftr { background: var(--k); color: var(--g3); padding-block: 64px 48px; font-size: 15px; line-height: 1.5; }
.ftr__top { text-align: right; margin-bottom: 40px; }
.ftr__top a { color: var(--g3); }
.ftr__top a:hover { color: var(--w); }
.ftr__grid { display: grid; grid-template-columns: 280px repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; border-top: 1px solid var(--g1); padding-top: 48px; }
.ftr__lockup .descriptor { width: 280px; height: auto; }
.ftr__company { color: var(--w); font-weight: 700; }
.ftr__col > * + * { margin-top: 12px; }
.ftr__col li + li { margin-top: 8px; }
.ftr a { color: var(--g3); text-decoration: none; }
.ftr a:hover { color: var(--w); }
@media (max-width: 1023px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__lockup { grid-column: 1 / 3; } }
@media (max-width: 767px) { .ftr__grid { grid-template-columns: 1fr; } .ftr__lockup { grid-column: auto; } .ftr__lockup .descriptor { width: 200px; } }

/* ------------------------------------------------------------------ motion hints */
[data-reveal] { will-change: transform, opacity; }

/* footer company details (live site, 22 Sep 2026) */
.ftr__address { font-style: normal; }
.ftr__address p + p { margin-top: 10px; }
.ftr__address a { text-decoration: none; }
.ftr__address a:hover, .ftr__address a:focus-visible { text-decoration: underline; }