/* =====================================================================
   Wire My Boat design system
   01. Tokens

   Three tiers. Primitives are raw values and are never used by components
   directly. Semantic roles map primitives to jobs (surface, text, line,
   accent) and change per theme. Components read semantic roles only, so a
   section can switch theme with one attribute and everything inside follows.
   ===================================================================== */

/* Archivo, one variable file with weight and width axes. Headlines run it
   wide and heavy to sit with the logo. Body copy runs it at normal width. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2?v=e3a28eade2") format("woff2-variations"), url("../fonts/archivo.woff2?v=e3a28eade2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* WMB Block, the brand display face. Capitals only, built by _build/font.mjs. */
@font-face {
  font-family: "WMB Block";
  src: url("../fonts/wmb-block.woff2?v=e3eafe2467") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2?v=684ad5b531") format("woff2-variations"), url("../fonts/geist-mono.woff2?v=684ad5b531") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Primitives: colour ---------------------------------- */
  /* Night water. The darkest end of a Top End evening. */
  --c-ink-950: #04060f;
  --c-ink-900: #070b1c;
  --c-ink-850: #0b1128;
  --c-ink-800: #101836;
  --c-ink-700: #1a2450;
  --c-ink-600: #2a3566;

  /* Signal. Electric blue, the brand's working colour. */
  --c-signal-700: #0b22d6;
  --c-signal-600: #1430ff;
  --c-signal-500: #3a53ff;
  --c-signal-400: #6f82ff;
  --c-signal-200: #c9d0ff;
  --c-signal-100: #e7eaff;

  /* Volt. The live wire. Used for the one thing that should catch the eye. */
  --c-volt-500: #2ef0b0;
  --c-volt-400: #6af5c8;
  --c-volt-700: #00936a;

  /* Harbour teal. The water in the Harbour dusk gradient. */
  --c-teal-500: #12a7b6;

  /* Dusk. Sunset over the harbour. Track lines, data, warm highlights. */
  --c-dusk-600: #f04a23;
  --c-dusk-500: #ff6a3d;
  --c-dusk-300: #ffa47c;
  --c-magenta-500: #b8268f;
  --c-violet-600: #4a1fb0;

  /* Harbour dusk as a flat stripe, for rules and edges where the full
     gradient image won't fit. Water to sunset. */
  --grad-harbour: linear-gradient(90deg, var(--c-teal-500), var(--c-magenta-500) 55%, var(--c-dusk-500));

  /* Paper. Chart paper, the light surfaces. */
  --c-paper-0: #ffffff;
  --c-paper-50: #f6f5f1;
  --c-paper-100: #eeece5;
  --c-paper-200: #e2e0d8;
  --c-slate-300: #b7bccb;
  --c-slate-500: #5d6478;
  --c-slate-700: #353b4d;

  /* ---------- Primitives: type ------------------------------------ */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-block: "WMB Block", "Archivo", ui-sans-serif, system-ui, sans-serif;

  /* Fluid scale. Each step is clamp(phone, fluid, wide desktop). */
  --fs-display: clamp(3.1rem, 1.2rem + 8.2vw, 10.5rem);
  --fs-xxl: clamp(2.4rem, 1.2rem + 4.6vw, 6rem);
  --fs-xl: clamp(2rem, 1.15rem + 3.1vw, 4.2rem);
  --fs-l: clamp(1.7rem, 1.15rem + 2.1vw, 3.1rem);
  --fs-m: clamp(1.32rem, 1.1rem + 0.9vw, 1.85rem);
  --fs-lede: clamp(1.18rem, 1.02rem + 0.65vw, 1.55rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 0.92;
  --lh-snug: 1.06;
  --lh-head: 1.14;
  --lh-body: 1.55;

  --tr-display: -0.025em;
  --tr-head: -0.02em;
  --tr-body: 0em;
  --tr-label: 0.09em;

  /* Width. Headlines run expanded. */
  --stretch-display: 118%;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 560;
  --fw-semi: 620;
  --fw-bold: 800;
  --fw-black: 900;

  /* ---------- Primitives: space (4px base) ------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* Fluid rhythm used by sections and the page frame. */
  --section-y: clamp(4.5rem, 3rem + 7vw, 11rem);
  --section-y-tight: clamp(3rem, 2rem + 4vw, 6.5rem);
  --frame-x: max(clamp(1.25rem, 0.6rem + 3.2vw, 4rem), env(safe-area-inset-left), env(safe-area-inset-right)); /* clear of the sensor housing on a phone held sideways */
  --gutter: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  --max: 1680px;
  --max-text: 40rem;

  /* ---------- Primitives: shape ------------------------------------ */
  /* Square, like the logo. Corners come from the bow, the logo's 45 degree
     cut on the bottom left, never from rounding. The bow goes on solid,
     brand-carrying shapes: buttons, labels, cards, panels and the menu.
     Round is kept for one meaning only, a sonar or radar signal. */
  --r-xs: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-pill: 0px;
  --cut-s: 0.6rem;
  --cut-m: 1.75rem;
  --cut-l: 3.5rem;
  --bow-s: polygon(0 0, 100% 0, 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
  --bow-m: polygon(0 0, 100% 0, 100% 100%, var(--cut-m) 100%, 0 calc(100% - var(--cut-m)));
  --bow-l: polygon(0 0, 100% 0, 100% 100%, var(--cut-l) 100%, 0 calc(100% - var(--cut-l)));
  /* Lines. Two for structure (section rules, outlines, frames), one for lists. */
  --rule: 2px;
  --hair: 1px;

  /* ---------- Primitives: motion ----------------------------------- */
  /* Hit hard, stop dead. Nothing drifts. Snap for arrivals, slam for impacts,
     cut for slashes and page changes, kick for a small push past the mark.
     The older names stay for hovers and small moves. */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-slam: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-cut: cubic-bezier(0.8, 0, 0.15, 1);
  --ease-kick: cubic-bezier(0.3, 1.8, 0.5, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.9, 0.3);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 340ms;
  --dur-4: 560ms;
  --dur-5: 900ms;
  --stagger: 45ms;

  /* ---------- Primitives: layers ----------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-track: 5;
  --z-sticky: 60;
  --z-header: 80;
  --z-menu: 90;
  --z-cursor: 95;
  --z-transition: 100;

  /* ---------- Semantic roles (default theme is paper) -------------- */
  --bg: var(--c-paper-50);
  --surface: var(--c-paper-0);
  --surface-2: var(--c-paper-100);
  --text: var(--c-ink-900);
  --text-2: var(--c-slate-500);
  --text-3: var(--c-slate-300);
  --line: rgb(7 11 28 / 0.12);
  --line-strong: rgb(7 11 28 / 0.28);
  --accent: var(--c-signal-600);
  --accent-ink: var(--c-paper-0);
  --accent-2: var(--c-dusk-500);
  --highlight: var(--c-volt-500);
  --highlight-ink: var(--c-ink-900);
  --focus: var(--c-signal-600);
  --danger: #c23a12; /* 5.4:1 on white */
  --contour: rgb(7 11 28 / 0.09);
  --contour-major: rgb(20 48 255 / 0.22);
  --scrim: rgb(4 6 15 / 0.55);
  --shadow-1: 0 1px 2px rgb(4 6 15 / 0.06), 0 6px 18px rgb(4 6 15 / 0.06);
  --shadow-2: 0 2px 6px rgb(4 6 15 / 0.08), 0 24px 60px rgb(4 6 15 / 0.14);

  color-scheme: light;
}

/* ---------- Themes ---------------------------------------------------
   Any element can set a theme. Sections are the usual place. */
[data-theme="paper"] {
  --bg: var(--c-paper-50);
  --surface: var(--c-paper-0);
  --surface-2: var(--c-paper-100);
  --text: var(--c-ink-900);
  --text-2: var(--c-slate-500);
  --text-3: var(--c-slate-300);
  --line: rgb(7 11 28 / 0.12);
  --line-strong: rgb(7 11 28 / 0.28);
  --accent: var(--c-signal-600);
  --accent-ink: var(--c-paper-0);
  --focus: var(--c-signal-600);
  --danger: #c23a12; /* 5.4:1 on white */
  --contour: rgb(7 11 28 / 0.09);
  --contour-major: rgb(20 48 255 / 0.22);
  color-scheme: light;
}

[data-theme="night"] {
  --bg: var(--c-ink-900);
  --surface: var(--c-ink-850);
  --surface-2: var(--c-ink-800);
  --text: var(--c-paper-50);
  --text-2: rgb(246 245 241 / 0.68);
  --text-3: rgb(246 245 241 / 0.4);
  --line: rgb(246 245 241 / 0.13);
  --line-strong: rgb(246 245 241 / 0.3);
  --accent: var(--c-volt-500);
  --accent-ink: var(--c-ink-900);
  --focus: var(--c-volt-500);
  --danger: var(--c-dusk-500);
  --contour: rgb(246 245 241 / 0.07);
  --contour-major: rgb(46 240 176 / 0.22);
  color-scheme: dark;
}

[data-theme="signal"] {
  --bg: var(--c-signal-600);
  --surface: var(--c-signal-700);
  --surface-2: var(--c-signal-500);
  --text: var(--c-paper-0);
  --text-2: rgb(255 255 255 / 0.76);
  --text-3: rgb(255 255 255 / 0.45);
  --line: rgb(255 255 255 / 0.2);
  --line-strong: rgb(255 255 255 / 0.42);
  --accent: var(--c-volt-500);
  --accent-ink: var(--c-ink-900);
  --focus: var(--c-volt-500);
  --contour: rgb(255 255 255 / 0.1);
  --contour-major: rgb(46 240 176 / 0.4);
  color-scheme: dark;
}

[data-theme="dusk"] {
  --bg: var(--c-ink-900);
  --surface: rgb(255 255 255 / 0.06);
  --surface-2: rgb(255 255 255 / 0.1);
  --text: var(--c-paper-0);
  --text-2: rgb(255 255 255 / 0.74);
  --text-3: rgb(255 255 255 / 0.45);
  --line: rgb(255 255 255 / 0.16);
  --line-strong: rgb(255 255 255 / 0.36);
  --accent: var(--c-volt-500);
  --accent-ink: var(--c-ink-900);
  --focus: var(--c-volt-500);
  --danger: var(--c-dusk-500);
  color-scheme: dark;
}

[data-theme="volt"] {
  --bg: var(--c-volt-500);
  --surface: var(--c-volt-400);
  --surface-2: rgb(7 11 28 / 0.08);
  --text: var(--c-ink-900);
  --text-2: rgb(7 11 28 / 0.7);
  --text-3: rgb(7 11 28 / 0.55);
  --line: rgb(7 11 28 / 0.18);
  --line-strong: rgb(7 11 28 / 0.4);
  --accent: var(--c-ink-900);
  --accent-ink: var(--c-volt-500);
  --focus: var(--c-ink-900);
  color-scheme: light;
}

/* =====================================================================
   02. Base. Reset, document defaults, type roles, layout primitives.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Nothing may widen the page sideways. The clip sits on html as well as body.
   With html left visible, the browser hands body's value to the viewport,
   which iOS Safari ignores when you pan. With both set, body clips its own
   content. Clip, not hidden, so position: sticky keeps working. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
/* With the menu open the page holds still on every device, not just where Lenis runs. */
html.is-locked, html.has-intro { overflow: hidden; }

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overflow-wrap: break-word; /* a long address or link breaks rather than pushing past the edge */
}

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
/* Taps answer with each control's own pressed state, not the grey iOS flash
   across a bow-cut shape. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: var(--fw-bold); font-stretch: var(--stretch-display); line-height: var(--lh-head); letter-spacing: var(--tr-head); text-wrap: balance; }
p { text-wrap: pretty; }
/* No italics anywhere. Emphasis comes from colour or weight. */
em, i, cite { font-style: normal; }
html { font-synthesis: none; }
::selection { background: var(--c-volt-500); color: var(--c-ink-900); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
/* Bow-cut shapes clip anything drawn outside them, so their ring sits just
   inside, in the text colour. The file input is hidden, so its drop zone
   shows the ring. Over the dark header and action bar the ring turns volt. */
.btn:focus-visible, .dl:focus-visible, .action-bar a:focus-visible { outline-offset: -5px; outline-color: currentColor; }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.site-header, .action-bar { --focus: var(--c-volt-500); }
.site-header[data-ink="dark"] { --focus: var(--c-ink-900); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: var(--frame-x); top: 0.75rem; z-index: calc(var(--z-transition) + 1);
  padding: 0.7rem 1rem; border-radius: var(--r-sm);
  background: var(--c-volt-500); color: var(--c-ink-900); font-weight: var(--fw-medium);
  transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- Type roles ---------------------------------------------- */
.t-display, .t-xxl, .t-xl, .t-l { font-stretch: var(--stretch-display); font-weight: var(--fw-bold); }
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
.t-xxl { font-size: var(--fs-xxl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
.t-xl { font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--tr-display); }
.t-l { font-size: var(--fs-l); line-height: var(--lh-snug); letter-spacing: var(--tr-head); }
.t-m { font-size: var(--fs-m); line-height: var(--lh-head); letter-spacing: var(--tr-head); font-weight: var(--fw-semi); }
.t-lede { font-size: var(--fs-lede); line-height: 1.38; letter-spacing: -0.012em; font-weight: var(--fw-medium); }
.t-body { font-size: var(--fs-body); }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.t-muted { color: var(--text-2); }
.t-faint { color: var(--text-3); }
.t-accent { color: var(--accent); }

.mono, .t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.35;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}
.mono--lc { text-transform: none; letter-spacing: 0.01em; }

.prose { max-width: var(--max-text); }
.prose > * + * { margin-top: 1em; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- Layout primitives ---------------------------------------- */
.frame { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--frame-x); }

.section { position: relative; padding-block: var(--section-y); background: var(--bg); color: var(--text); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-6);
}
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-3)); }
.split { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-5); flex-wrap: wrap; }

.rule { height: var(--hair); background: var(--line); border: 0; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   03. Components. The small parts every page is built from.
   ===================================================================== */

/* ---------- Section bar ------------------------------------------------
   A mono label sitting on a hairline, with an optional link at the right
   end. Taken from Structure's "See our work" and "Latest work" rows. No
   numbers, no dashes. */
/* The rule starts where the label ends, so nothing shows through its bow. */
.bar { display: flex; align-items: flex-end; margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 3rem); }
/* A long label wraps onto a second line before it can push the link off a
   phone screen, and the rule always keeps a little length. */
.bar__label { flex: 0 1 auto; min-width: 0; text-wrap: balance; }
.bar__line { flex: 1 0 2rem; display: flex; justify-content: flex-end; align-items: flex-end; min-height: var(--rule); border-bottom: var(--rule) solid var(--text); }
/* The label is a small solid bar, like the logo, bow and all. */
.bar__label {
  padding: 0.45rem 0.75rem 0.4rem 0.9rem; background: var(--text); color: var(--bg); font-weight: 560;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0.45rem 100%, 0 calc(100% - 0.45rem));
}
.bar__link { display: inline-flex; align-items: center; gap: 0.5em; padding-bottom: 0.5rem; color: var(--text-2); white-space: nowrap; transition: color var(--dur-2); }
.bar__link svg { width: 0.85em; height: 0.85em; transition: transform var(--dur-3) var(--ease-out); }
.bar__link:hover { color: var(--text); }
@media (hover: hover) { .bar__link:hover svg { transform: translateX(0.2em); } }

/* ---------- Rows -----------------------------------------------------------
   A plain list split by hairlines. Used where a list isn't a sequence. */
.rows { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: 1.75rem 1fr; padding: 1.15rem 0; border-bottom: 1px solid var(--line); font-size: 1.125rem; line-height: 1.45; }
/* The bullet is a tiny hull: a square with the logo's bow, in the accent colour. */
.rows li::before {
  content: ""; width: 0.7rem; height: 0.7rem; margin-top: calc((1.45em - 0.7rem) / 2);
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 38% 100%, 0 62%);
}

/* ---------- Buttons ---------------------------------------------------
   One shape, four fills. Square, with the logo's bow on solid buttons and
   the arrow as a block at the stern. The label rolls up on hover and a copy
   rolls in from below, so the button answers without changing size. Every
   variant only sets the tokens below. */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-h: 3.25rem;
  --btn-px: 1.35rem;
  --btn-fill: 100%;      /* how far the fill runs */
  --btn-hover-end: 0px;  /* where the hover wash stops, from the right */
  --btn-icon-line: transparent;
  position: relative; display: inline-flex; align-items: center; gap: 1.1rem;
  height: var(--btn-h); padding-inline: var(--btn-px) 0;
  border-radius: 0; color: var(--btn-fg);
  background: linear-gradient(var(--btn-bg), var(--btn-bg)) 0 0 / var(--btn-fill) 100% no-repeat;
  font-weight: var(--fw-semi); font-size: 1rem; letter-spacing: -0.005em; white-space: nowrap;
  isolation: isolate; overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0 var(--btn-hover-end) 0 0; z-index: -1; border-radius: inherit;
  background: var(--btn-hover, rgb(255 255 255 / 0.14));
  transform: translateY(101%); transition: transform var(--dur-3) var(--ease-out);
}
@media (hover: hover) { .btn:hover::before { transform: none; } } /* not on touch, where hover sticks after a tap */
.btn:active { transform: scale(0.97); }
.btn__label { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; }
.btn__label > span { display: block; transition: transform var(--dur-3) var(--ease-out); }
.btn__label::after {
  content: attr(data-text); position: absolute; left: 0; top: 100%;
  transition: transform var(--dur-3) var(--ease-out);
}
@media (hover: hover) { .btn:hover .btn__label > span, .btn:hover .btn__label::after { transform: translateY(-100%); } }
.btn:not(.btn--ghost) { clip-path: var(--bow-s); }
/* The arrow block sits at the stern, even on a full width button. It's a
   darker shade of the button, and where that shade would vanish into the
   surface behind, it turns to an outline instead (see the ink button). */
.btn__icon {
  display: grid; place-items: center; align-self: stretch; width: var(--btn-h); flex: none; margin-left: auto;
  background: var(--btn-icon-bg, var(--btn-fg)); color: var(--btn-icon-fg, var(--btn-bg));
  box-shadow: inset 0 0 0 var(--rule) var(--btn-icon-line);
}
.btn__icon svg { width: 1rem; height: 1rem; transition: transform var(--dur-3) var(--ease-out); }
@media (hover: hover) { .btn:hover .btn__icon svg { transform: translateX(3px); } }
.btn--noicon { padding-inline: var(--btn-px); }

.btn--primary { --btn-bg: var(--c-signal-600); --btn-fg: var(--c-paper-0); --btn-icon-bg: var(--c-signal-700); --btn-icon-fg: var(--c-paper-0); }
.btn--volt { --btn-bg: var(--c-volt-500); --btn-fg: var(--c-ink-900); --btn-hover: rgb(255 255 255 / 0.35); }
/* The ink button is the button on volt. Its fill stops short of the stern,
   and the arrow sits in an ink outline with the surface showing through. A
   volt button that lands on volt takes it too, in a volt section or in the
   header over one. */
.btn--ink, [data-theme="volt"] .btn--volt, [data-under="volt"] .btn--volt {
  --btn-bg: var(--c-ink-900); --btn-fg: var(--c-paper-0); --btn-hover: rgb(255 255 255 / 0.12);
  --btn-fill: calc(100% - var(--btn-h) + 2px); --btn-hover-end: var(--btn-h);
  --btn-icon-bg: transparent; --btn-icon-fg: var(--c-ink-900); --btn-icon-line: var(--c-ink-900);
}
/* The same move the other way. On ink the volt button's stern would vanish,
   so it turns to a volt outline, in a night section, the footer, or the
   header over either. */
[data-theme="night"] .btn--volt, .site-footer .btn--volt, [data-under="night"] .btn--volt, [data-under="dusk"] .btn--volt {
  --btn-fill: calc(100% - var(--btn-h) + 2px); --btn-hover-end: var(--btn-h);
  --btn-icon-bg: transparent; --btn-icon-fg: var(--c-volt-500); --btn-icon-line: var(--c-volt-500);
}
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-hover: var(--surface-2);
  box-shadow: inset 0 0 0 var(--rule) var(--text);
}
.btn--ghost .btn__icon { background: var(--text); color: var(--bg); }
.btn--sm { --btn-h: 2.6rem; --btn-px: 1rem; font-size: 0.9375rem; gap: 0.6rem; }
.btn--sm .btn__icon svg { width: 0.85rem; height: 0.85rem; }
.btn--lg { --btn-h: 3.9rem; --btn-px: 1.7rem; font-size: 1.125rem; }
.btn--lg { gap: 1.4rem; }

/* ---------- Text link with arrow ------------------------------------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6em; font-weight: var(--fw-medium);
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  padding-bottom: 0.15em; transition: background-size var(--dur-3) var(--ease-out);
}
.link-arrow svg { width: 0.95em; height: 0.95em; transition: transform var(--dur-3) var(--ease-out); }
.link-arrow:hover { background-size: 100% 1px; }
@media (hover: hover) { .link-arrow:hover svg { transform: translateX(0.25em); } }
/* An arrow pointing out of the site moves the way it points. */
@media (hover: hover) { .link-arrow:hover .i-out, .bar__link:hover .i-out, .btn:hover .btn__icon .i-out { transform: translate(0.15em, -0.15em); } }

.link-line {
  background: linear-gradient(currentColor, currentColor) right bottom / 0% 1px no-repeat;
  transition: background-size var(--dur-3) var(--ease-out);
}
.link-line:hover { background-position: left bottom; background-size: 100% 1px; }

/* ---------- Chips and badges ------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em; height: 1.9rem; padding-inline: 0.75rem;
  border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--text); white-space: nowrap; background: transparent;
}
.chip--solid { background: var(--surface); box-shadow: none; }
.chip--light { color: var(--c-paper-0); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); }
/* A chip that names something with its own page, like a brand on a service page. */
.chip--link { transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
.chip--link svg { width: 0.8em; height: 0.8em; }
@media (hover: hover) { .chip--link:hover { background: var(--accent); color: var(--accent-ink); box-shadow: none; } }
.badge {
  display: inline-flex; align-items: center; gap: 0.4em; height: 1.55rem; padding-inline: 0.55rem; white-space: nowrap;
  border-radius: var(--r-xs); background: var(--c-volt-500); color: var(--c-ink-900);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 550;
}
.badge::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.badge--dusk { background: var(--c-dusk-500); color: var(--c-ink-900); }
.badge--line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---------- Bracket frame ---------------------------------------------
   Corner marks like a chart plotter's cursor box. Any element can wear it.
   --bk sets arm length, --bt the stroke. Animates by growing --bk. */
@property --bk { syntax: "<length>"; inherits: true; initial-value: 14px; }
.brackets { position: relative; --bk: 14px; --bt: var(--rule); --bc: var(--text); }
.brackets::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--bc), var(--bc)) top left / var(--bk) var(--bt) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top left / var(--bt) var(--bk) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right / var(--bk) var(--bt) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right / var(--bt) var(--bk) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left / var(--bk) var(--bt) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left / var(--bt) var(--bk) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--bk) var(--bt) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--bt) var(--bk) no-repeat;
  transition: --bk var(--dur-3) var(--ease-out);
}
.brackets--inset::after { inset: 10px; }
@media (hover: hover) { a:hover > .brackets, .brackets:hover { --bk: 26px; } }

/* ---------- Media ------------------------------------------------------
   Images sit on a tiny placeholder, which the browser scales up soft, and
   fade up once decoded. No CSS blur, which Safari repaints at a cost. */
.media { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--c-ink-800); }
.media::before { content: ""; position: absolute; inset: 0; background: var(--lqip, none) center / cover; }
.media img { position: relative; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-snap); }
.media img.is-loaded { opacity: 1; }
@media (hover: hover) { .media--zoom:hover img, a:hover .media--zoom img { transform: scale(1.045); } }
.media--square { aspect-ratio: 1; }
.media--wide { aspect-ratio: 16 / 10; }
.media--cine { aspect-ratio: 21 / 9; }
.media--tall { aspect-ratio: 4 / 5; }
.media__cap { position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 3; color: var(--c-paper-0); }

/* ---------- Readout -----------------------------------------------------
   Big number, mono label above, plain-language unit below. */
.readout { display: grid; gap: 0.35rem; align-content: start; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.readout__label { color: var(--text-2); }
.readout__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); letter-spacing: var(--tr-display); line-height: 1; font-variant-numeric: tabular-nums; }
.readout__value small { font-size: 0.42em; letter-spacing: -0.01em; margin-left: 0.15em; color: var(--text-2); font-weight: var(--fw-medium); }
.readout__unit { color: var(--text-2); font-size: var(--fs-small); max-width: 22ch; }

/* ---------- Highlight block --------------------------------------------
   A heavy marker stroke behind words. It wipes in when revealed. */
.hl {
  background: linear-gradient(var(--hl-bg, var(--c-ink-900)), var(--hl-bg, var(--c-ink-900))) left center / var(--hl-size, 100%) 100% no-repeat;
  color: var(--hl-fg, var(--c-volt-500));
  padding: 0 0.16em; margin: 0 -0.07em; /* neighbouring blocks overlap, so no seam shows between them */
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size 0.34s var(--ease-cut), color 0s linear 0.17s; /* the block cuts across and the words flip colour as it passes */
}
.js .hl[data-hl]:not(.is-in) { --hl-size: 0%; color: inherit; }

/* ---------- The slash --------------------------------------------------
   A block cut at the bow's 45 degrees that sweeps across a line of type
   and leaves the words behind. site.js draws one per line and moves its
   two raked edges. It takes the section's accent unless told otherwise. */
[data-split] { position: relative; }
.slash { position: absolute; z-index: 2; pointer-events: none; background: var(--accent); }

/* ---------- Form fields -------------------------------------------------- */
.field { display: grid; gap: 0.5rem; }
.field__label { font-weight: var(--fw-medium); font-size: var(--fs-small); display: flex; justify-content: space-between; gap: 1rem; }
.field__label .mono { color: var(--text-2); }
.field__input {
  width: 100%; min-height: 3.4rem; padding: 0.85rem 1rem; border: 0; border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
  font-size: 1rem;
}
.field__input::placeholder { color: var(--text-2); }
.field__input:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
textarea.field__input { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field__hint { font-size: 0.875rem; color: var(--text-2); }
.field__error { font-size: 0.875rem; color: var(--danger); display: none; }
.field.is-invalid .field__input { box-shadow: inset 0 0 0 2px var(--danger); }
.field.is-invalid .field__error { display: block; }

/* Choice chips: checkboxes dressed as toggles. */
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1rem;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface);
  font-size: 0.9375rem; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.choice span::before { content: ""; width: 0.55rem; height: 0.55rem; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color var(--dur-2); }
.choice input:checked + span { background: var(--c-ink-900); color: var(--c-paper-0); box-shadow: none; }
.choice input:checked + span::before { background: var(--c-volt-500); box-shadow: none; }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.drop {
  display: grid; place-items: center; gap: 0.4rem; text-align: center; padding: 1.75rem 1rem;
  border-radius: var(--r-md); border: 1.5px dashed var(--line-strong); background: var(--surface);
  cursor: pointer; transition: border-color var(--dur-2), background-color var(--dur-2);
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--surface-2); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop svg { width: 1.6rem; height: 1.6rem; color: var(--accent); }

/* ---------- Accordion ----------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.acc summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; font-size: var(--fs-m); font-weight: var(--fw-semi); letter-spacing: var(--tr-head); line-height: 1.25;
}
.acc summary::-webkit-details-marker { display: none; }
.acc__icon { position: relative; flex: none; width: 2.4rem; height: 2.4rem; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color var(--dur-2), transform var(--dur-3) var(--ease-out); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.85rem; height: 1.5px; background: currentColor; translate: -50% -50%; transition: rotate var(--dur-3) var(--ease-out); }
.acc__icon::after { rotate: 90deg; }
.acc[open] .acc__icon { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.acc[open] .acc__icon::after { rotate: 0deg; }
@media (hover: hover) { .acc summary:hover .acc__icon { transform: scale(1.08); } }
.acc::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
.acc[open]::details-content { block-size: auto; }
.acc__body { padding: 0 0 1.5rem; max-width: 46rem; color: var(--text-2); }

/* ---------- Breadcrumb ----------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.6em; color: var(--text-2); }
.crumbs a:hover { color: var(--text); }
.crumbs li + li::before { content: "/"; margin-right: 0.6em; opacity: 0.5; }

/* ---------- Plus marks ------------------------------------------------------
   Registration crosses where grid lines meet. Used on hairline grids. */
.plus { position: absolute; width: 11px; height: 11px; pointer-events: none; color: var(--accent-2, var(--c-dusk-500)); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; translate: -50% -50%; }
.plus::before { width: 100%; height: 1.5px; }
.plus::after { width: 1.5px; height: 100%; }

/* =====================================================================
   04. Chrome. Header, menu, footer, phone action bar, cursor, transitions.
   ===================================================================== */

/* ---------- Logo ------------------------------------------------------- */
/* The logo is one path, WMB cut out of a bar. It takes the text colour and
   whatever sits behind it shows through the letters. */
.logo { display: inline-flex; flex: none; align-items: center; gap: 0.7rem; line-height: 0; color: inherit; text-decoration: none; }
/* The full name sits beside the bar, set in WMB Block, the face drawn from the
   logo, so mark and name read as one lockup. */
.logo__name { font-family: var(--font-block); font-size: 1.05rem; line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
/* Where the bar gets tight, the name stacks on two lines beside the logo. */
.logo__name > span { display: inline-block; }
@media (max-width: 599px), (min-width: 1180px) and (max-width: 1299px) {
  .logo__name { font-size: 0.95rem; line-height: 1; }
  .logo__name > span { display: block; }
}
/* The smallest phones take a slightly smaller bar, so the menu button still fits. */
@media (max-width: 359px) { .site-header .logo__bar { height: 1.9rem; } .logo { gap: 0.5rem; } .logo__name { font-size: 0.8rem; } }
.logo__bar { height: 2rem; width: auto; display: block; }
/* Over the hero and page headers the letters stay see-through. Anywhere else
   they take the colour of the section underneath, which looks the same but
   stops copy scrolling underneath from showing through. */
.logo__cut { fill: transparent; transition: fill var(--dur-2) var(--ease-out); }
.site-header[data-under="dusk"] .logo__cut { fill: var(--c-ink-950); }
.intro .logo__cut { fill: var(--c-ink-950); }
.site-header[data-under="paper"] .logo__cut { fill: var(--c-paper-50); }
.site-header[data-under="night"] .logo__cut { fill: var(--c-ink-900); }
.site-header[data-under="signal"] .logo__cut { fill: var(--c-signal-600); }
.site-header[data-under="volt"] .logo__cut { fill: var(--c-volt-500); }

/* ---------- Header --------------------------------------------------------
   Sits over the page. Hides on the way down, returns on the way up, and
   flips ink colour to suit whatever section is beneath it. */
.site-header {
  /* One height for every control in the bar, so the logo, nav pills, quote
     button and menu button share a top and bottom edge. */
  --hdr-h: 2.5rem;
  --hdr-gap: 3px;
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  view-transition-name: site-header;
  color: var(--hdr-fg, var(--c-paper-0));
  transition: transform var(--dur-3) var(--ease-out), color var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.site-header > .frame { position: relative; display: flex; align-items: center; gap: var(--sp-4); padding-block: 1.25rem; }
/* Over the hero the bar floats. Past it, a strip in the colour of the
   section underneath fills in behind, so the header reads as one solid bar
   and nothing scrolls through the gaps. */
.site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--hdr-bg, var(--c-ink-900)); box-shadow: 0 1px 0 var(--hdr-line, rgb(255 255 255 / 0.1));
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.site-header:not([data-under="hero"])::before { opacity: 1; }
.site-header[data-under="paper"] { --hdr-bg: var(--c-paper-50); --hdr-line: rgb(7 11 28 / 0.12); }
.site-header[data-under="night"] { --hdr-bg: var(--c-ink-900); }
.site-header[data-under="signal"] { --hdr-bg: var(--c-signal-600); --hdr-line: rgb(255 255 255 / 0.2); }
.site-header[data-under="volt"] { --hdr-bg: var(--c-volt-500); --hdr-line: rgb(7 11 28 / 0.15); }
.site-header[data-under="dusk"] { --hdr-bg: var(--c-ink-950); }
body.menu-open .site-header::before { opacity: 0; }
.site-header .logo__bar { height: var(--hdr-h); }
.site-header a, .site-header button { pointer-events: auto; }
.site-header.is-hidden { transform: translateY(-110%); }
.site-header[data-ink="dark"] { --hdr-fg: var(--c-ink-900); }
/* The logo, the nav pills and the actions sit in one bar, all the same small
   gap apart. */
.site-header__nav { display: none; gap: var(--hdr-gap); margin-left: var(--hdr-gap); }
.site-header__nav a {
  height: var(--hdr-h); display: inline-flex; align-items: center; padding-inline: 0.95rem; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase;
  background: var(--hdr-pill, rgb(7 11 28 / 0.42));
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.site-header[data-ink="dark"] .site-header__nav a { --hdr-pill: rgb(7 11 28 / 0.06); }
/* Past the hero the strip behind is solid, so the links sit straight on it
   as text, the same as the logo does. */
.site-header:not([data-under="hero"]) .site-header__nav a { --hdr-pill: transparent; }
.site-header__nav a:hover, .site-header__nav a[aria-current="page"] { background: var(--c-paper-0); color: var(--c-ink-900); }
.site-header[data-ink="dark"] .site-header__nav a:hover, .site-header[data-ink="dark"] .site-header__nav a[aria-current="page"] { background: var(--c-ink-900); color: var(--c-paper-0); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--hdr-gap); }
.site-header__quote { display: none; }
.site-header__quote .btn { --btn-h: var(--hdr-h); }
/* Over volt it becomes the ink button, set with the button's own tokens. */

.menu-btn {
  position: relative; width: var(--hdr-h); height: var(--hdr-h); flex: none;
  background: var(--c-paper-0); color: var(--c-ink-900);
  display: grid; place-items: center; transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.site-header[data-ink="dark"] .menu-btn { background: var(--c-ink-900); color: var(--c-paper-0); }
.menu-btn::after { content: ""; position: absolute; inset: -4px; } /* 48px touch target */
@media (hover: hover) { .menu-btn:hover { transform: scale(1.06); } }
.menu-btn__lines { position: relative; width: 1.15rem; height: 10px; }
.menu-btn__lines::before, .menu-btn__lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform var(--dur-3) var(--ease-out), top var(--dur-3) var(--ease-out);
}
.menu-btn__lines::before { top: 0; }
.menu-btn__lines::after { top: 8px; }
.menu-open .menu-btn { background: var(--c-volt-500); color: var(--c-ink-900); }
.menu-open .menu-btn__lines::before { top: 4px; transform: rotate(45deg); }
.menu-open .menu-btn__lines::after { top: 4px; transform: rotate(-45deg); }

@media (min-width: 760px) { .site-header__quote { display: inline-flex; } }
@media (min-width: 1180px) {
  .site-header__nav { display: flex; }
}

/* ---------- Menu -------------------------------------------------------------
   An inset signal-blue panel. Corner brackets grow out from the button, the
   panel opens behind them, then links rise in one after another. */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu); padding: 0.75rem;
  visibility: hidden; pointer-events: none;
}
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu__scrim { position: absolute; inset: 0; background: rgb(4 6 15 / 0.7); opacity: 0; touch-action: none; }
.menu__panel {
  --menu-cut: var(--cut-l);
  position: relative; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0, 0 0);
}
/* The panel stays put and this scrolls inside it, starting below the header,
   so links never slide under the logo and the chart behind stays whole. */
.menu__scroll {
  position: absolute; inset: 5.5rem 0 0 0; overflow: hidden auto; overscroll-behavior: contain;
  display: grid; grid-template-rows: 1fr auto; padding: 0 var(--frame-x) 1.5rem;
}
/* Open, the panel is one big hull: square, with the logo's bow on the bottom
   left. The script grows it out of the menu button. On a phone the panel
   scrolls, so the cut is smaller and the content ends clear of it. */
.menu.is-open .menu__panel { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--menu-cut) 100%, 0 calc(100% - var(--menu-cut))); }
@media (max-width: 759px) { .menu__panel { --menu-cut: var(--cut-m); } .menu__scroll { inset-block-start: 4.75rem; padding-bottom: calc(1.5rem + var(--cut-m)); } }
/* The header rides above the open menu, so the close button stays in reach.
   The nav and quote button step aside, since the menu repeats them. */
body.menu-open .site-header { z-index: calc(var(--z-menu) + 1); transform: none; --hdr-fg: var(--c-paper-0); }
body.menu-open .site-header__nav, body.menu-open .site-header__quote { opacity: 0; visibility: hidden; transition: opacity var(--dur-2), visibility 0s var(--dur-2); }
body.menu-open .logo__cut { fill: transparent; }
.menu__contours { opacity: 0.9; }
.menu__grid { position: relative; display: grid; gap: var(--sp-7); align-content: start; }
.menu__nav ul { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
.menu__link { display: flex; align-items: baseline; gap: 0.8rem; font-size: clamp(2.4rem, 1.4rem + 4.8vw, 5.4rem); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); letter-spacing: var(--tr-display); line-height: 1.02; }
.menu__link-text { position: relative; display: inline-block; transition: color var(--dur-2), transform var(--dur-3) var(--ease-out); }
@media (hover: hover) { .menu__link:hover .menu__link-text { transform: translateX(0.15em); color: var(--c-volt-500); } }
.menu__link[aria-current="page"] .menu__link-text { color: var(--c-volt-500); }
.menu__aside { display: grid; gap: var(--sp-6); align-content: start; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.menu__aside h2 { margin-bottom: 0.9rem; color: var(--text-2); }
.menu__aside ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.menu__aside a:hover { color: var(--c-volt-500); }
.menu__foot { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; margin-top: var(--sp-6); border-top: 1px solid var(--line); color: var(--text-2); }
.menu__brackets { position: absolute; inset: 0; pointer-events: none; --bc: var(--c-volt-500); --bt: var(--rule); --bk: 22px; }
.menu__brackets::after {
  background:
    linear-gradient(var(--bc), var(--bc)) top left / var(--bk) var(--bt) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top left / var(--bt) var(--bk) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right / var(--bk) var(--bt) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right / var(--bt) var(--bk) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--bk) var(--bt) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--bt) var(--bk) no-repeat;
}
@media (min-width: 980px) {
  .menu__grid { grid-template-columns: 1.4fr 1fr; align-content: center; }
}

/* ---------- Footer -------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; padding: var(--section-y) 0 1.5rem; background: var(--c-ink-950); color: var(--text); isolation: isolate; }
.site-footer__glow { position: absolute; inset: auto 0 0 0; height: 70%; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--c-ink-950), transparent 45%), url("../img/dusk-footer.webp") center bottom / cover no-repeat;
}
.site-footer__top { display: grid; gap: var(--sp-7); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding-bottom: var(--sp-8); }
.site-footer h2 { margin-bottom: 1rem; color: var(--text-2); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.site-footer__lede { font-size: var(--fs-m); font-weight: var(--fw-medium); letter-spacing: var(--tr-head); line-height: 1.2; max-width: 18ch; }
.site-footer__mark { display: block; width: 100%; height: auto; color: var(--c-paper-0); margin-block: var(--sp-6) var(--sp-5); }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--text-2); }
.site-footer__base a:hover { color: var(--text); }
.site-footer__legal { display: flex; gap: 1.5rem; }
.site-footer__base a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.3em; }

/* ---------- Phone action bar ----------------------------------------------------------
   Call, quote, WhatsApp, always under the thumb on a phone. */
.action-bar {
  position: fixed; left: 0.6rem; right: 0.6rem; bottom: calc(0.6rem + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 4px; padding: 4px;
  background: rgb(7 11 28 / 0.95); clip-path: var(--bow-s); color: var(--c-paper-0);
  transform: translateY(150%); transition: transform var(--dur-4) var(--ease-out);
}
.action-bar.is-shown { transform: none; }
.action-bar a { display: grid; place-items: center; gap: 0.15rem; min-height: 3.5rem; font-size: 0.8125rem; font-weight: var(--fw-medium); transition: background-color var(--dur-2); }
.action-bar a svg { width: 1.2rem; height: 1.2rem; }
.action-bar a:active { background: rgb(255 255 255 / 0.12); }
.action-bar a.is-primary { background: var(--c-volt-500); color: var(--c-ink-900); }
@media (min-width: 760px) { .action-bar { display: none; } }
/* Room under the footer so the action bar never covers the fine print. */
@media (max-width: 759px) { .site-footer { padding-bottom: calc(6.25rem + env(safe-area-inset-bottom)); } }

/* ---------- Cursor label --------------------------------------------------------------
   A small tag that follows the pointer over things you can open. Same shape
   as the section labels: a solid bar with the bow. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none;
  display: flex; align-items: center; gap: 0.6rem; height: 2.25rem; padding: 0 0.85rem 0 1.05rem; translate: -50% -50%;
  background: var(--c-volt-500); color: var(--c-ink-900); clip-path: var(--bow-s);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 560; letter-spacing: var(--tr-label); text-transform: uppercase; line-height: 1; white-space: nowrap;
  scale: 0; transition: scale var(--dur-3) var(--ease-out); will-change: transform;
}
.cursor::after { content: ""; width: 0.8rem; height: 0.8rem; background: currentColor; clip-path: polygon(0 45%, 62% 45%, 62% 20%, 100% 50%, 62% 80%, 62% 55%, 0 55%); }
.cursor.is-on { scale: 1; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- Page transitions -------------------------------------------------------------
   The slash, page to page. Where the browser supports view transitions, a
   volt band at the bow's 45 degrees cuts across from left to right. The old
   page is cut away ahead of it and the new page follows behind. The band is
   the gap between the two, with volt underneath. The header holds still. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* with reduced motion, pages simply swap */
::view-transition { background: var(--c-volt-500); }
::view-transition-group(root) { animation-duration: 0.6s; }
::view-transition-old(root) { animation: vt-old 0.6s var(--ease-cut) both; }
::view-transition-new(root) { animation: vt-new 0.6s var(--ease-cut) both; }
::view-transition-group(site-header) { animation: none; }
@keyframes vt-old {
  from { clip-path: polygon(-100vh 0, 300vw 0, 300vw 100%, 0 100%); }
  to { clip-path: polygon(116vw 0, 300vw 0, 300vw 100%, calc(116vw + 100vh) 100%); }
}
@keyframes vt-new {
  from { clip-path: polygon(0 0, calc(-100vh - 16vw) 0, -16vw 100%, 0 100%); }
  to { clip-path: polygon(0 0, 100vw 0, calc(100vw + 100vh) 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- Intro ------------------------------------------------------------------
   First visit only. The logo slams onto the screen and the screen jolts.
   Then a volt line cuts it at the bow's angle and the halves split apart.
   It overhangs the window so the jolt never shows an edge. */
.intro { display: none; }
.has-intro .intro {
  position: fixed; inset: -3rem; z-index: var(--z-transition); display: block;
  background: var(--c-ink-950); color: var(--c-paper-0); overflow: hidden;
}
.intro[hidden] { display: none; }
.intro__half { position: absolute; inset: 0; display: grid; place-items: center; background: var(--c-ink-950); }
/* Half a reaches 2px past the line, so no seam shows where the halves meet. */
.intro__half--a { clip-path: polygon(calc(50% - 200vmax - 2px) calc(50% - 200vmax), calc(50% + 200vmax - 2px) calc(50% + 200vmax), calc(50% + 200vmax) calc(50% - 200vmax)); }
.intro__half--b { clip-path: polygon(calc(50% - 200vmax) calc(50% - 200vmax), calc(50% + 200vmax) calc(50% + 200vmax), calc(50% - 200vmax) calc(50% + 200vmax)); }
.intro__core { position: relative; display: grid; justify-items: center; gap: 1.1rem; text-align: center; }
.intro__logo { position: relative; }
.intro__core .logo__bar { height: clamp(3rem, 2.2rem + 3vw, 4.6rem); }
.intro__shock { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--c-volt-500); stroke-width: 2; opacity: 0; }
.intro__shock path { vector-effect: non-scaling-stroke; }
.intro__shock + .intro__shock { stroke: var(--c-signal-500); }
.intro__read { color: rgb(255 255 255 / 0.6); font-variant-numeric: tabular-nums; }
.intro__cut { position: absolute; left: 50%; top: 50%; width: 300vmax; height: 3px; margin: -1.5px 0 0 -150vmax; rotate: 45deg; }
.intro__cut i { display: block; height: 100%; background: var(--c-volt-500); transform-origin: 0 50%; }


/* ---------- Touch targets -----------------------------------------------
   On a touch screen every standalone link is at least 44px tall to tap.
   Footer lists open up to that pitch. Single links grow an invisible hit
   area around them, so nothing moves on the page. */
@media (pointer: coarse) {
  .site-footer ul, .menu__aside ul, .side-card__links { gap: 0; }
  .site-footer li, .menu__aside li, .side-card__links li { display: flex; align-items: center; min-height: 44px; }
  .site-header .logo, .crumbs a, .bar__link, .link-arrow, .contact-line a, .site-footer li > a, .menu__aside li > a, .side-card__links a, .site-footer__base a { position: relative; }
  .site-header .logo::after, .crumbs a::after, .bar__link::after, .link-arrow::after, .contact-line a::after, .site-footer li > a::after, .menu__aside li > a::after, .side-card__links a::after, .site-footer__base a::after {
    content: ""; position: absolute; inset: 50% -6px auto; height: 44px; translate: 0 -50%;
  }
  /* The hero's credential links stack close on a phone, so the lines open
     up a little and each link's hit area fills its own line, no more. */
  .chip--link { height: 44px; }
  .hero__readouts { row-gap: 0.9rem; }
  .hero__readouts a { position: relative; }
  .hero__readouts a::after { content: ""; position: absolute; inset: -0.42rem -6px; }
}

/* The contact page is the quote form, so the bar's own Get a quote would only cover it. */
body:has(.quote-form) .action-bar { display: none; }

/* =====================================================================
   05. Sections. Page-level patterns assembled from the components.
   ===================================================================== */

/* ---------- Section head ------------------------------------------------ */
.section-head { display: grid; gap: var(--sp-5); margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.section-head__title { font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--tr-display); max-width: 16ch; }
.section-head__aside { color: var(--text-2); max-width: 34rem; font-size: var(--fs-lede); line-height: 1.4; font-weight: var(--fw-regular); }
@media (min-width: 980px) {
  .section-head { grid-template-columns: 1.15fr 1fr; align-items: end; }
  .section-head__side { display: grid; gap: var(--sp-5); justify-items: start; }
}

/* ---------- Contours ----------------------------------------------------------
   Depth lines drawn behind a section. Major lines take the accent. */
.contours { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; }
/* Colours are baked into each file. Plain background images, no masks. */
.contours--wide-paper { background-image: url("../svg/contours-wide-paper.svg"); }
.contours--wide-night { background-image: url("../svg/contours-wide-night.svg"); }
.contours--wide-signal { background-image: url("../svg/contours-wide-signal.svg"); }
.contours--wide-dusk { background-image: url("../svg/contours-wide-dusk.svg"); }
.contours--wide-chart { background-image: url("../svg/contours-wide-chart.svg"); }
.contours--tall-signal { background-image: url("../svg/contours-tall-signal.svg"); }
/* Fade top and bottom into the section colour with a gradient on top. */
.contours--fade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%); }
.page-hero .contours--fade::after { background: linear-gradient(to bottom, var(--c-ink-900) 0%, transparent 30%, transparent 70%, var(--c-ink-900) 100%); }
/* The home hero shares the page headers' chart lines and the ink at the top,
   so the header sits on dark water on every page. The sunset stays bright below. */
.hero .contours--fade::after { background: linear-gradient(to bottom, var(--c-ink-900) 0%, rgb(7 11 28 / 0.55) 12%, transparent 34%); }
/* The statement repaints as its words light up, so its contours get a layer of their own. */
.contours--layer { will-change: transform; }
.section > .frame { position: relative; z-index: 1; }

/* ---------- Hero -----------------------------------------------------------------
   Pinned while the statement panel slides up over it. A live gradient of a
   Darwin dusk sits behind, and the pointer sends sonar cones across it. */
.hero {
  position: relative; min-height: 100svh; display: grid; overflow: hidden; isolation: isolate;
  background: var(--c-ink-900); color: var(--text);
}
/* A still of the same gradient, baked by _build/gradients.mjs. It shows
   before WebGL starts, and stays as the hero for reduced motion. */
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--c-ink-900) url("../img/dusk-hero-wide.webp") center / cover no-repeat; }
@media (max-aspect-ratio: 3 / 4) { .hero__bg { background-image: url("../img/dusk-hero-tall.webp"); } }
.hero__gl, .hero__sonar { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero__sonar { z-index: 0; pointer-events: none; }
.hero__inner {
  position: relative; z-index: 1; display: grid; grid-template-rows: 1fr auto; gap: var(--sp-6);
  padding-top: 7rem; min-height: 100svh;
  padding-bottom: calc(2rem + clamp(1.25rem, 1rem + 1.25vw, 2.25rem)); /* the statement panel rides 2rem up over the hero */
}
.hero__head { align-self: end; display: grid; gap: var(--sp-5); }
/* The headline is set in WMB Block, sized from the frame so the longest
   line just fits. Three lines on wide screens, four on phones, where FOR THE
   TOP END breaks in two. */
.hero__head { container-type: inline-size; }
.hero__title { font-family: var(--font-block); font-size: min(7rem, 100cqi / 11.6); font-weight: 400; line-height: 0.86; letter-spacing: 0; text-transform: uppercase; }
@media (max-width: 699px) { .hero__title { font-size: calc(100cqi / 9.7); } }
.hero__title .line { display: block; }
.hero__title .accent { color: var(--c-volt-500); }
.hero__foot { display: grid; gap: var(--sp-5); align-items: end; }
.hero__lede { font-size: var(--fs-lede); line-height: 1.38; max-width: 30rem; color: var(--text-2); font-weight: var(--fw-regular); }
.hero__lede strong { color: var(--text); font-weight: var(--fw-medium); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hero__readouts { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--text-2); }
.hero__readouts b { color: var(--text); font-weight: 450; }
/* Credentials with a brand page are links, underlined faintly until hovered. */
.hero__readouts a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; text-decoration-color: var(--line-strong); transition: text-decoration-color var(--dur-2); }
@media (hover: hover) { .hero__readouts a:hover { text-decoration-color: currentColor; } }

/* Pin the hero so the next panel covers it. */
.stack-over { position: relative; z-index: 2; }
/* The hero only stays pinned while the statement slides over it. Once covered it is hidden, so nothing behind the page keeps drawing. */
.hero-stack { position: relative; }
.hero-pin { position: sticky; top: 0; z-index: 1; }
.hero.is-covered { visibility: hidden; }
.hero__inner { will-change: transform, opacity; }
/* Sections the course line passes beneath. */
.course-under { z-index: calc(var(--z-track) + 1); }

/* ---------- Statement ---------------------------------------------------------------
   Big words in a signal-blue panel. They light up as you read down. */
.statement { border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: -2rem; }
.statement__text { font-size: var(--fs-xl); line-height: 1.04; letter-spacing: var(--tr-display); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); max-width: 22ch; }
/* On volt. Words wait in a faint ink and darken as you scroll. The last
   phrase lands as ink blocks with volt type, like the highlight blocks. */
.statement__text .w { color: rgb(7 11 28 / 0.22); transition: color 0.2s linear, background-color 0.2s linear; }
.statement__text .w.is-lit { color: var(--c-ink-900); }
.statement__text .w.accent { padding: 0 0.12em; margin: 0 -0.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.statement__text .accent.is-lit { background: var(--c-ink-900); color: var(--c-volt-500); }
.statement__foot { display: grid; gap: var(--sp-6); margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
@media (min-width: 900px) { .statement__foot { grid-template-columns: 1fr 1fr; align-items: end; } }
.statement__media { border-radius: var(--r-md); }

/* ---------- GPS track -----------------------------------------------------------------
   A dashed course line runs down the home page, with the vessel arrow at its
   head. The path is laid out in script from points placed in the markup. */
/* The course is drawn once and never repaints. Only the small vessel moves, by transform. */
/* The course line spans the whole of main, so main is its containing block. */
[data-track-host] { position: relative; }
.track { position: absolute; inset: 0; z-index: var(--z-track); pointer-events: none; overflow: hidden; contain: strict; }
.track svg { position: absolute; left: 0; top: 0; }
.track__line { fill: none; stroke: var(--c-dusk-500); stroke-width: 1.6; stroke-dasharray: 2 8; stroke-linecap: round; opacity: 0.75; }
.vessel { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.vessel__ring { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 106 61 / 0.55); background: var(--bg, #f6f5f1); }
.vessel__arrow { position: absolute; left: -7px; top: -9px; width: 14px; height: 18px; color: var(--c-dusk-500); }
.vessel__label { position: absolute; left: 18px; top: -7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--c-dusk-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .track { display: none; } }

/* ---------- Services list ---------------------------------------------------------------
   Big rows split by hairlines. On desktop a framed preview of the job
   follows the pointer down the list. */
.svc-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.svc-row { border-bottom: 1px solid var(--line); }
.svc-row a {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem 1.25rem;
  --tile: calc(var(--fs-l) * 0.95);
  padding: 1.4rem 0; transition: color var(--dur-2), padding var(--dur-3) var(--ease-out);
}
.svc-row__name { font-size: var(--fs-l); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); letter-spacing: var(--tr-head); line-height: 1.05; }
.svc-row__name { grid-column: 2; }
.svc-row__note { grid-column: 2; color: var(--text-2); font-size: var(--fs-small); max-width: 38rem; }
/* The number is a small solid tile with the bow, the same build as the
   section labels. The arrow block matches its size and sits on the same
   line, so the two frame the name, and both take the accent on hover. */
.svc-row__num {
  grid-column: 1; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center;
  width: var(--tile); aspect-ratio: 1; margin-top: calc(var(--fs-l) * 0.05);
  background: var(--text); color: var(--bg); clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 78%);
  font-size: calc(var(--fs-l) * 0.48); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); line-height: 1; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-2), color var(--dur-2);
}
@media (hover: hover) { .svc-row a:hover .svc-row__num { background: var(--accent); color: var(--accent-ink); } }
.svc-row__go {
  grid-row: 1 / span 2; grid-column: 3; align-self: start; width: var(--tile); height: var(--tile); margin-top: calc(var(--fs-l) * 0.05);
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-out);
}
.svc-row__go svg { width: 1.05rem; height: 1.05rem; }
.svc-row__go svg { transition: transform var(--dur-3) var(--ease-out); }
@media (hover: hover) { .svc-row a:hover .svc-row__go { background: var(--accent); color: var(--accent-ink); box-shadow: none; } }
@media (hover: hover) { .svc-row a:hover .svc-row__go svg { transform: translateX(3px); } }
.svc-row__thumb { display: none; }
@media (hover: hover) and (min-width: 980px) {
  .svc-list:hover .svc-row a { color: var(--text-3); }
  .svc-list:hover .svc-row a .svc-row__num { background: var(--text-3); }
  .svc-list:hover .svc-row a:hover .svc-row__num { background: var(--accent); }
  .svc-list:hover .svc-row a:hover { color: var(--text); padding-left: 1rem; }
}
@media (max-width: 979px) {
  /* Phones get a compact list: thumbnail, name and a line of detail. */
  .svc-row a { grid-template-columns: 5.25rem 1fr; gap: 0.25rem 1rem; padding: 1rem 0; align-items: start; }
  .svc-row__go { display: none; }
  .svc-row__thumb { display: block; grid-column: 1; grid-row: 1 / span 2; }
  /* On phones the number sits on the corner of the photo. */
  .svc-row__num { grid-column: 1; grid-row: 1; justify-self: start; position: relative; z-index: 1; width: 1.75rem; margin: 0; font-size: 0.875rem; }
  .svc-row__thumb .media { aspect-ratio: 1; border-radius: var(--r-sm); }
  .svc-row__name { grid-column: 2; font-size: 1.3rem; line-height: 1.12; }
  .svc-row__note { grid-column: 2; font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}


/* ---------- Readouts band ------------------------------------------------------------------ */
.readouts { display: grid; gap: var(--sp-6) var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .readouts { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); } }

/* ---------- Brand wall ----------------------------------------------------------------------
   A hairline grid with registration crosses at the joins. Each tile names
   the brand, says what Wire My Boat is to it, and marks the NT-only ones. */
.brand-wall { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.brand-tile {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 0.6rem; min-height: 11rem; padding: 1.1rem 1.1rem 1.2rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate;
  transition: color var(--dur-2);
}
/* Tiles with their own page are links. The link sits on the logo, and its
   ::after covers the tile, so the whole tile takes the tap while the link
   reads as just the brand name. Only these tiles move on hover, and their
   arrow box is the same build as the service rows'. Tiles without a page
   stay still, so nothing looks clickable that isn't. */
.brand-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-signal-600); transform: translateY(101%); transition: transform var(--dur-3) var(--ease-out); }
.brand-tile__link { display: block; align-self: center; }
.brand-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.brand-tile__link:focus-visible { outline: none; }
.brand-tile--link:has(.brand-tile__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.brand-tile__foot { display: flex; align-items: end; justify-content: space-between; gap: 0.75rem; }
.brand-tile__go {
  flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.brand-tile__go svg { width: 0.85rem; height: 0.85rem; transition: transform var(--dur-3) var(--ease-out); }
@media (hover: hover) {
  .brand-tile--link:hover::before { transform: none; }
  .brand-tile--link:hover { color: var(--c-paper-0); }
  .brand-tile--link:hover .brand-tile__role { color: rgb(255 255 255 / 0.8); }
  .brand-tile--link:hover .brand-tile__cat { color: rgb(255 255 255 / 0.6); }
  .brand-tile--link:hover .brand-tile__go { background: var(--c-volt-500); color: var(--c-ink-900); box-shadow: none; }
  .brand-tile--link:hover .brand-tile__go svg { transform: translateX(2px); }
}
.brand-tile .plus { right: -6px; bottom: -6px; z-index: 2; }
.brand-tile__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 0.4rem; min-height: 1.55rem; }
@media (max-width: 699px) { .brand-tile__top { flex-direction: column-reverse; } .brand-tile { min-height: 12.5rem; } }
.brand-tile__cat { color: var(--text-2); }
.brand-tile__name { align-self: center; font-size: min(clamp(1.15rem, 0.85rem + 1.1vw, 1.9rem), 13cqi); font-weight: var(--fw-bold); font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.05; }
.brand-tile__role { color: var(--text-2); font-size: 0.875rem; line-height: 1.35; transition: color var(--dur-2); }
.brand-tile--feature .brand-tile__name { font-size: min(clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem), 13cqi); }
/* Each tile is its own container, so a name never runs wider than its tile,
   on a phone or in the narrow design system grid. */
.brand-tile { container-type: inline-size; }
/* The logo, one colour, sized by visual weight. --k is the square root of
   its aspect ratio, so every logo covers about the same area. It scales with
   the tile and never runs wider than it. */
.brand-tile__logo { align-self: center; display: block; line-height: 0; }
.brand-tile__svg { display: block; height: auto; width: min(calc(var(--k) * 3.3rem), calc(var(--k) * 22cqi), 100%); overflow: visible; }
/* Ten brands: two across up to a laptop, then five across, so every row is full. */
@media (min-width: 1180px) { .brand-wall { grid-template-columns: repeat(5, 1fr); } .brand-tile { min-height: 13rem; padding: 1.25rem; } }

/* ---------- Deck ---------------------------------------------------------------------------
   How a job runs. On wide screens the section pins and four cards are dealt
   in from below, landing side by side with a slight tilt.
   The cards are sized from the window height, and the section pins once the
   whole fan is on screen, so every card can be read in a short window too.
   On phones and very short windows each card sticks and the next slides over it. */
.deck { position: relative; display: grid; gap: var(--sp-4); list-style: none; padding: 0; }
.deck-card {
  position: sticky; top: calc(5.5rem + var(--i) * 0.9rem);
  display: grid; align-content: space-between; gap: var(--sp-6); min-height: 21rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  background: var(--bg); color: var(--text);
  clip-path: var(--bow-m);
}
/* The bow clips the drop shadow, so the paper card gets a white face and an edge to stand off the paper section. */
.deck-card[data-theme="paper"] { background: var(--c-paper-0); box-shadow: inset 0 0 0 1px var(--line-strong); }
.deck-card__num { font-size: var(--fs-xxl); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); letter-spacing: var(--tr-display); line-height: 0.8; }
.deck-card h3 { font-size: var(--fs-m); font-weight: var(--fw-bold); margin-bottom: 0.6rem; }
.deck-card p { color: var(--text-2); max-width: 30ch; }
.deck-card__top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.deck-card__icon { width: 2.8rem; height: 2.8rem; border-radius: var(--r-sm); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); }
.deck-card__icon svg { width: 1.3rem; height: 1.3rem; }
/* Wide but short windows: four cards in a row, nothing pinned. */
@media (min-width: 980px) and (max-height: 599.98px) {
  .deck { grid-template-columns: repeat(4, 1fr); }
  .deck-card { position: relative; top: auto; min-height: 19rem; align-content: start; }
}
@media (min-width: 980px) and (min-height: 600px) {
  .deck.is-fan { --deck-h: min(34rem, calc(100svh - 6.5rem)); --deck-gap: 1.5rem; height: var(--deck-h); display: block; }
  /* Each card is a quarter of the row, so they land side by side and no card covers the next one's words. */
  .deck.is-fan .deck-card { --w: min(24rem, calc((100% - 3 * var(--deck-gap)) / 4)); position: absolute; top: 0; left: 50%; width: var(--w); min-height: calc(var(--deck-h) - 4rem); margin-left: calc(var(--w) / -2); transform-origin: 50% 120%; }
}

/* ---------- Feed --------------------------------------------------------------------------------
   The socials, pulled in. Drag on desktop, swipe on a phone. */
.feed { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(16rem, 72vw, 23rem); gap: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--frame-x); margin-inline: calc(var(--frame-x) * -1); padding-bottom: 0.5rem; cursor: grab;
  scroll-padding-inline: var(--frame-x); /* snap the first post to the frame, not the screen edge */
}
.feed::-webkit-scrollbar { display: none; }
.feed.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.feed.is-dragging a { pointer-events: none; }
.post { scroll-snap-align: start; display: grid; gap: 0.85rem; align-content: start; }
.post__media { aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.post__media .post__type { position: absolute; right: 0.8rem; top: 0.8rem; z-index: 3; width: 2rem; height: 2rem; display: grid; place-items: center; background: rgb(7 11 28 / 0.7); color: #fff; }
.post__media .post__type svg { width: 0.9rem; height: 0.9rem; }
.post__meta { display: flex; justify-content: space-between; color: var(--text-2); }
.post__caption { font-size: 0.9375rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed-bar { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.feed-bar__track { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.feed-bar__fill { position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(0.2); }
.feed-bar__btns { display: flex; gap: 0.4rem; }
.round-btn { width: 3rem; height: 3rem; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color var(--dur-2), color var(--dur-2); }
@media (hover: hover) { .round-btn:hover { background: var(--text); color: var(--bg); } }
.round-btn svg { width: 1rem; height: 1rem; }

/* ---------- Reviews strip ------------------------------------------------------------------------- */
.reviews { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.review { display: grid; gap: 1rem; align-content: space-between; padding: 1.5rem; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); min-height: 14rem; }
.review__stars { display: flex; gap: 2px; color: var(--c-dusk-500); }
.review__stars svg { width: 1rem; height: 1rem; }
.review__text { font-size: 1.0625rem; line-height: 1.45; }
.review__by { color: var(--text-2); }

/* ---------- Marquee ----------------------------------------------------------------------------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.1rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 2.5rem; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 2.5rem; font-size: var(--fs-m); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); letter-spacing: var(--tr-head); white-space: nowrap; }
.marquee__item::after { content: ""; width: 0.5rem; height: 0.5rem; background: var(--c-dusk-500); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Call to action ------------------------------------------------------------------------- */
.cta { position: relative; overflow: hidden; }
.cta__title { font-size: var(--fs-xxl); line-height: 1.02; letter-spacing: var(--tr-display); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); max-width: 14ch; }
.cta__grid { display: grid; gap: var(--sp-7); }
.cta__side { display: grid; gap: var(--sp-5); align-content: end; justify-items: start; }
.cta__side p { max-width: 30rem; font-size: var(--fs-lede); line-height: 1.4; }
@media (min-width: 980px) { .cta__grid { grid-template-columns: 1.4fr 1fr; align-items: end; } }

/* ---------- Inner page hero -------------------------------------------------------------------------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(8rem, 6rem + 6vw, 12rem); padding-bottom: var(--section-y-tight); background: var(--c-ink-900); color: var(--text); }
/* The page headers take the same gradient as the home hero, turned down a
   little so the home page stays the loudest. */
.page-hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to right, rgb(7 11 28 / 0.45), rgb(7 11 28 / 0.1) 60%), url("../img/dusk-page-wide.webp") center / cover no-repeat;
}
@media (max-aspect-ratio: 3 / 4) { .page-hero__glow { background-image: linear-gradient(to bottom, rgb(7 11 28 / 0.1), rgb(7 11 28 / 0.4)), url("../img/dusk-page-tall.webp"); } }
.page-hero__grid { display: grid; gap: var(--sp-7); }
.page-hero__title { font-size: var(--fs-xxl); line-height: 0.95; letter-spacing: var(--tr-display); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); max-width: 15ch; }
.page-hero__lede { font-size: var(--fs-lede); line-height: 1.4; color: var(--text-2); max-width: 36rem; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (min-width: 1000px) { .page-hero__grid--media { grid-template-columns: 1.15fr 1fr; align-items: end; } }

/* ---------- Service detail -------------------------------------------------------------------------------- */
.two-up { display: grid; gap: var(--gutter); }
@media (min-width: 900px) { .two-up { grid-template-columns: 1fr 1fr; } }
.panel { position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.panel h3 { font-size: var(--fs-m); margin-bottom: 1.2rem; }
.ticks { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.ticks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; }
.ticks li::before { content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; background: var(--c-volt-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23070b1c' stroke-width='2.2'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.layout-aside { display: grid; gap: var(--sp-8); }
@media (min-width: 1000px) { .layout-aside { grid-template-columns: 1fr 22rem; align-items: start; } .layout-aside__side { position: sticky; top: 6.5rem; } }
.side-card { display: grid; gap: 1.1rem; padding: 1.6rem; background: var(--c-ink-900); color: var(--c-paper-0); clip-path: var(--bow-m); }
.side-card p { color: rgb(255 255 255 / 0.72); }

/* ---------- Brand pages ----------------------------------------------------------------------
   The hero carries a plate: the brand's logo in white on night water, cut
   with the bow, and a spec line under it saying what Wire My Boat is to the
   brand. The range reads as a parts list, name on the left, note on the right. */
.brand-plate {
  display: grid; grid-template-rows: 1fr auto; gap: var(--sp-6); min-height: clamp(15rem, 11rem + 10vw, 21rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: rgb(7 11 28 / 0.66); color: var(--c-paper-0); clip-path: var(--bow-m);
}
.brand-plate .brand-tile__logo { align-self: center; justify-self: center; width: 100%; display: grid; place-items: center; }
.brand-plate .brand-tile__svg { width: min(calc(var(--k) * 8.5rem), 82%); }
.brand-plate__name { align-self: center; justify-self: center; font-size: var(--fs-xl); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); }
.brand-plate__read { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; padding-top: var(--sp-4); border-top: 1px solid rgb(255 255 255 / 0.18); color: rgb(255 255 255 / 0.68); }
.brand-plate__read b { color: var(--c-paper-0); font-weight: 450; }
.lineup { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.lineup li { display: grid; gap: 0.3rem 2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .lineup li { grid-template-columns: minmax(9rem, 15rem) 1fr; } }
.lineup__name { font-size: 1.125rem; font-weight: var(--fw-bold); font-stretch: var(--stretch-display); letter-spacing: var(--tr-head); line-height: 1.25; }
.lineup__note { color: var(--text-2); }
.side-card__links { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.side-card__links a { color: var(--c-paper-0); }

/* ---------- Service cards (hub) --------------------------------------------------------------------- */
.svc-cards { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.svc-card { display: grid; gap: 1rem; align-content: start; }
.svc-card__media { aspect-ratio: 4 / 3; }
.svc-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.svc-card h3 { font-size: var(--fs-m); font-weight: var(--fw-bold); }
.svc-card p { color: var(--text-2); }

/* ---------- Work grid --------------------------------------------------------------------------------- */
.work-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
/* Three across on wide screens, so 6, 9 or 12 posts fill whole rows. */
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
/* Past the first lot, posts wait for the Show more button. Without JavaScript they all show. */
.js .work-grid [data-later] { display: none; }
.more { display: flex; justify-content: center; margin-top: var(--sp-7); }
.more[hidden] { display: none; }
.work-grid .post__media { aspect-ratio: 1; }
.work-grid .post:nth-child(5n + 1) .post__media { aspect-ratio: 4 / 5; }

/* ---------- About -------------------------------------------------------------------------------------- */
.values { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); counter-reset: v; }
.value { display: grid; gap: 0.75rem; padding-top: 1.25rem; border-top: 2px solid var(--text); }
.value h3 { font-size: var(--fs-m); }
.value p { color: var(--text-2); }
.coord-card { display: grid; gap: 0.25rem; }
.coord-card__big { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); letter-spacing: var(--tr-display); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Contact ------------------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--sp-8); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1fr 1.25fr; align-items: start; } .contact-grid__side { position: sticky; top: 6.5rem; } }
.quote-form { display: grid; gap: var(--sp-5); padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-xl); background: var(--surface); }
.quote-form fieldset { border: 0; padding: 0; display: grid; gap: 0.75rem; }
.quote-form legend { font-weight: var(--fw-medium); font-size: var(--fs-small); margin-bottom: 0.75rem; }
.form-row { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-done { display: none; text-align: left; gap: 1rem; justify-items: start; }
.quote-form.is-sent > :not(.form-done) { display: none; }
.quote-form.is-sent .form-done { display: grid; }
.form-fail { display: none; text-align: left; gap: 1rem; justify-items: start; }
.quote-form.is-failed > :not(.form-fail) { display: none; }
.quote-form.is-failed .form-fail { display: grid; }
.quote-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.quote-form.is-sending button[type="submit"] { opacity: 0.6; cursor: progress; }
.contact-lines { display: grid; border-top: 1px solid var(--line); }
.contact-line { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.contact-line > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 479px) { .contact-line { grid-template-columns: 1fr; gap: 0.25rem; } }
.contact-line .mono { color: var(--text-2); }
.contact-line a:hover { color: var(--accent); }
/* A real map of where the workshop is, in the bow. */
.map { display: grid; gap: 0.9rem; }
.map__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-paper-100); clip-path: var(--bow-m); }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding-top: 0.9rem; border-top: var(--rule) solid var(--text); }

/* ---------- Design system page ---------------------------------------------------------------------------- */
.ds-swatches { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.swatch { border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.swatch__chip { height: 6.5rem; }
.swatch__meta { padding: 0.75rem; display: grid; gap: 0.15rem; font-size: 0.875rem; }
.swatch__meta .mono { color: var(--text-2); }
.ds-row { display: grid; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .ds-row { grid-template-columns: 13rem 1fr; align-items: center; } }
.ds-row > .mono { color: var(--text-2); }
.ds-row > * { min-width: 0; overflow-wrap: anywhere; }
.ds-themes { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ds-theme { padding: 1.5rem; border-radius: var(--r-lg); background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 1rem; }
.ds-curve { height: 5rem; border-radius: var(--r-sm); background: var(--surface-2); position: relative; overflow: hidden; container-type: inline-size; }
.ds-curve i { position: absolute; left: 0.5rem; top: 50%; width: 1.4rem; height: 1.4rem; margin-top: -0.7rem; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 70%); }
.ds-curve:hover i, .ds-curve.is-run i { transform: translateX(calc(100cqw - 2.4rem)); }
.ds-space { display: flex; align-items: end; gap: 0.6rem; flex-wrap: wrap; }
.ds-space i { display: block; background: var(--c-signal-600); }

/* Hold the hero copy until its entrance plays, so nothing flashes first. */
.hero-wait .hero__head, .hero-wait .hero__foot, .hero-wait .hero__readouts { opacity: 0; }
.hero-wait .page-hero__title { visibility: hidden; } /* held until its slash is ready, so it never shows twice */
.split-line { padding-bottom: 0.06em; margin-bottom: -0.06em; }

/* Design system: logo on each theme. */
.ds-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--sp-3); }
.ds-logo { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.ds-logo__bar { width: 100%; max-width: 13rem; height: auto; }
.ds-logo__tile { width: 5rem; height: 5rem; }

/* ---------- The bow on cards ---------------------------------------------------
   Cards, panels, the map and the quote form take the bow. Where a card has an
   edge, a thin diagonal runs along the cut so the edge goes all the way round. */
.svc-card > .chip { justify-self: start; }
.review, .panel, .quote-form, .deck-card[data-theme="paper"] {
  --edge: var(--line);
  clip-path: var(--bow-m);
  background-image: linear-gradient(to top right, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1.4px), transparent calc(50% + 1.4px));
  background-size: var(--cut-m) var(--cut-m); background-position: left bottom; background-repeat: no-repeat;
}
.quote-form { box-shadow: inset 0 0 0 1px var(--line); }
.deck-card[data-theme="paper"] { --edge: var(--line-strong); }

/* ---------- Legal pages -----------------------------------------------------------
   One row per heading, the heading on the left on wide screens. */
.legal { border-bottom: 1px solid var(--line); }
.legal__row { display: grid; gap: 0.75rem var(--gutter); padding-block: var(--sp-6); border-top: 1px solid var(--line); }
.legal__row:first-child { border-top: var(--rule) solid var(--text); }
.legal__h { font-size: var(--fs-m); line-height: 1.2; font-stretch: 108%; }
.legal__body { display: grid; gap: 1rem; max-width: 44rem; color: var(--text-2); }
@media (min-width: 900px) { .legal__row { grid-template-columns: minmax(14rem, 1fr) 2fr; } }

/* =====================================================================
   06. Brand guide. The idea, logo versions, treatments, palette, type,
   shape, mockups and the downloadable kit.
   ===================================================================== */

/* ---------- The idea --------------------------------------------------------- */
.idea { position: relative; display: grid; place-items: center; aspect-ratio: 21 / 9; clip-path: var(--bow-l); }
@media (max-width: 700px) { .idea { aspect-ratio: 4 / 3; clip-path: var(--bow-m); } .idea__logo { width: 80%; } .idea__tag--bow { left: calc(var(--cut-m) + 0.75rem); } }
.idea__logo { width: min(62%, 52rem); color: var(--c-paper-0); line-height: 0; }
.idea__logo svg, .tr__logo svg, .version__icon svg, .tr__icon svg { display: block; width: 100%; height: auto; }
.idea__tag { position: absolute; bottom: 1.25rem; color: rgb(255 255 255 / 0.8); }
.idea__tag--bow { left: calc(var(--cut-l) + 1rem); }
.idea__tag--stern { right: 1.5rem; }
.idea__text { margin-top: var(--sp-7); align-items: start; }

/* ---------- Attitude --------------------------------------------------- */
.attitude__sheet { margin: 0; }
.attitude__sheet img { display: block; width: 100%; height: auto; clip-path: var(--bow-l); }

/* ---------- Logo versions --------------------------------------------------- */
.versions { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
/* Four versions sit two by two on wide screens, never three and one. */
@media (min-width: 900px) { .versions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.version { display: grid; gap: 0.8rem; align-content: start; }
.version__face { display: grid; place-items: center; aspect-ratio: 4 / 3; clip-path: var(--bow-m); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 0.6rem; }
.version__icon { width: 34%; }
.version__files { list-style: none; padding: 0; border-top: var(--rule) solid var(--text); margin-top: 0.4rem; }
.version__files li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }

/* ---------- Construction -------------------------------------------------------- */
.construct-grid { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 1000px) { .construct-grid { grid-template-columns: 1fr 1.25fr; } }
.construct { width: 100%; height: auto; color: var(--c-paper-0); overflow: visible; }
.construct__t { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Treatments ------------------------------------------------------------- */
.tr-grid, .dont-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.tr { display: grid; gap: 0.85rem; align-content: start; }
.tr__face { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; clip-path: var(--bow-m); }
.tr__logo { width: 58%; line-height: 0; position: relative; }
.tr__icon { width: 28%; }
.tr figcaption, .dont figcaption, .shape figcaption { display: grid; gap: 0.25rem; }
.tr figcaption strong, .shape figcaption strong { font-weight: var(--fw-semi); }
.tr figcaption span, .shape figcaption span { color: var(--text-2); font-size: var(--fs-small); }

/* ---------- Don'ts: a sunset strike through each one --------------------------------- */
.dont { display: grid; gap: 0.85rem; align-content: start; }
.dont figcaption { display: block; }
.dont figcaption .badge { margin-right: 0.4rem; vertical-align: 0.1em; }
.dont__face { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-paper-0); box-shadow: inset 0 0 0 1px var(--line); }
.dont__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--c-dusk-500) calc(50% - 1.5px), var(--c-dusk-500) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}

/* ---------- Palette and gradient ---------------------------------------------------- */
.pal { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.pal__item { display: grid; gap: 0.3rem; align-content: start; }
.pal__item strong { font-weight: var(--fw-semi); margin-top: 0.5rem; }
.pal__item .mono { color: var(--text-2); }
.pal__chip { aspect-ratio: 1; clip-path: var(--bow-m); box-shadow: inset 0 0 0 1px var(--line-strong); }
.gradient-spec { display: grid; gap: var(--sp-6); margin-top: var(--sp-9); align-items: end; }
@media (min-width: 1000px) { .gradient-spec { grid-template-columns: 1.6fr 1fr; } }
.gradient-spec__face { aspect-ratio: 16 / 9; clip-path: var(--bow-l); }
.gradient-spec__text { display: grid; gap: var(--sp-4); }
.stripe { height: 14px; background: var(--grad-harbour); }

/* ---------- Type specimens ---------------------------------------------------------- */
.spec { display: grid; gap: var(--sp-5); padding-block: var(--sp-7); border-top: var(--rule) solid var(--text); }
.spec:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .spec { grid-template-columns: 18rem 1fr; } }
.spec__sample--x { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); letter-spacing: var(--tr-display); line-height: 0.98; }
.spec__sample--body { font-size: var(--fs-lede); line-height: 1.45; max-width: 40rem; }
.spec > * { min-width: 0; }
/* Sized from its own column, like the hero, so ELECTRONICS always fits. */
.spec__block { display: grid; gap: var(--sp-5); container-type: inline-size; }
.spec__sample--block { font-family: var(--font-block); font-size: min(4.6rem, 100cqi / 9.7); line-height: 0.86; text-transform: uppercase; }
.spec__sample--block .accent { color: var(--accent); }
.spec__sample--set { font-family: var(--font-block); font-size: clamp(1.1rem, 0.7rem + 1.3vw, 1.9rem); line-height: 1.2; overflow-wrap: anywhere; }
.spec__sample--mono { font-family: var(--font-mono); font-size: clamp(0.85rem, 0.7rem + 0.6vw, 1.15rem); letter-spacing: var(--tr-label); text-transform: uppercase; }

/* ---------- Shape ------------------------------------------------------------------- */
.shape-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.shape { display: grid; gap: 0.85rem; align-content: start; }
.shape__face { display: grid; place-items: center; aspect-ratio: 4 / 3; box-shadow: inset 0 0 0 1px var(--line); }
.shape__bows { display: flex; align-items: end; justify-content: center; gap: 1rem; background: var(--c-paper-0); padding: 2rem; }
.shape__bows i { display: block; background: var(--c-ink-900); }
.shape__bows i:nth-child(1) { width: 22%; aspect-ratio: 2.4; }
.shape__bows i:nth-child(2) { width: 28%; aspect-ratio: 1; }
.shape__bows i:nth-child(3) { width: 38%; aspect-ratio: 0.8; }
.shape__sonar { width: 70%; }
.shape__bk { display: grid; place-items: center; width: 60%; aspect-ratio: 4 / 3; }

/* ---------- Motion ------------------------------------------------------------------ */
.motion-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.motion { display: grid; gap: 0.85rem; align-content: start; }
.motion figcaption { display: grid; gap: 0.25rem; }
.motion figcaption strong { font-weight: var(--fw-semi); }
.motion figcaption span { color: var(--text-2); font-size: var(--fs-small); }
.motion__face { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; clip-path: var(--bow-m); cursor: pointer; }
.motion__face:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-volt-500); }
.motion--slash .motion__face { background: var(--c-ink-900) url("../img/dusk-square.webp") center / cover; }
.motion--slap .motion__face { background: var(--c-volt-500); }
.motion--tick .motion__face { background: var(--c-paper-0); }
.motion--jolt .motion__face { background: var(--c-signal-600); }
.motion__stage { position: relative; display: grid; place-items: center; }
.motion__play { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.4rem 0.6rem 0.35rem 0.75rem; background: var(--c-ink-900); color: var(--c-paper-0); clip-path: var(--bow-s); font-size: var(--fs-micro); line-height: 1; }
.motion__line { display: block; color: var(--c-paper-0); font-family: var(--font-block); font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.7rem); line-height: 1; text-transform: uppercase; }
.motion__sticker { display: block; width: 7.5rem; rotate: -6deg; }
.motion__sticker svg { display: block; width: 100%; height: auto; }
.motion__num { color: var(--c-ink-900); font-family: var(--font-mono); font-size: clamp(1rem, 0.8rem + 0.8vw, 1.35rem); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.motion__logo { position: relative; display: block; width: 11rem; color: var(--c-paper-0); line-height: 0; }
.motion__logo .motion__bar { display: block; width: 100%; height: auto; }
.motion__shock { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--c-volt-500); stroke-width: 2; opacity: 0; }
.motion__shock path { vector-effect: non-scaling-stroke; }

/* ---------- In the world --------------------------------------------------------------- */
.world { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); }
.world__item { grid-column: span 6; display: grid; gap: 0.6rem; }
.world__item img { width: 100%; height: auto; display: block; clip-path: var(--bow-m); }
.world__item figcaption { color: var(--text-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.world__credit { font-size: var(--fs-micro); color: var(--text-3); }
@media (min-width: 900px) {
  .world__item--half { grid-column: span 3; }
  .world__item--third { grid-column: span 2; }
}

/* ---------- The kit ---------------------------------------------------------------------- */
.kit { display: grid; gap: var(--sp-9); }
.kit__head { display: grid; gap: 0.35rem; margin-bottom: var(--sp-5); padding-top: var(--sp-4); border-top: var(--rule) solid var(--text); }
.kit__grid { display: grid; gap: var(--sp-5) var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kit-min, 14rem)), 1fr)); align-items: start; }
.kit-item { display: grid; gap: 0.45rem; align-content: start; }
.kit-item__frame { display: block; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.kit-item__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
/* The circle shows how the platform crops it, not a shape of the brand. */
.kit-item__frame--circle { border-radius: 50%; }
@media (hover: hover) { .kit-item:hover .kit-item__frame img { transform: scale(1.04); } }
.kit-item__name { font-weight: var(--fw-semi); line-height: 1.25; }
.kit-item__meta { color: var(--text-2); font-size: var(--fs-micro); }
.kit-item:hover .kit-item__name { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Downloads -------------------------------------------------------------------- */
.dl-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.dl {
  position: relative; display: grid; gap: 0.6rem; align-content: start; min-height: 12rem; padding: 1.5rem 1.5rem 4.5rem;
  background: var(--c-ink-900); color: var(--c-paper-0); clip-path: var(--bow-m); transition: background-color var(--dur-2);
}
.dl:hover { background: var(--c-ink-800); }
.dl__title { font-size: var(--fs-m); font-weight: var(--fw-bold); font-stretch: var(--stretch-display); letter-spacing: var(--tr-head); }
.dl__meta { color: var(--c-volt-500); }
.dl__go { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--c-volt-500); color: var(--c-ink-900); }
.dl__go svg { width: 1.1rem; height: 1.1rem; transition: transform var(--dur-3) var(--ease-out); }
@media (hover: hover) { .dl:hover .dl__go svg { transform: translateY(3px) rotate(90deg); } }

/* =====================================================================
   Email signature builder, on the brand guide. The form sits left, the
   preview stays in view on the right, and the install steps follow the
   form. On a phone they stack in that order.
   ===================================================================== */
.sig { display: grid; gap: var(--sp-8); }
@media (min-width: 1000px) {
  .sig { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "form stage" "install stage"; column-gap: var(--sp-9); align-items: start; }
  .sig__form { grid-area: form; }
  .sig__install { grid-area: install; }
  .sig__stage { grid-area: stage; position: sticky; top: 6rem; }
}
.sig__form, .sig__install { display: grid; gap: 1.25rem; align-content: start; }
.sig__step { display: flex; align-items: baseline; gap: 0.75rem; font-size: var(--fs-m); font-weight: var(--fw-semi); line-height: 1.2; }
.sig__step .mono { font-size: var(--fs-label); color: var(--text-2); }
.sig__set { border: 0; padding: 0; margin: 0; display: grid; gap: 0.6rem; min-width: 0; }

/* Tile picker. The real tile, so what you pick is what goes out. */
.sig__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.sig__tile { position: relative; display: grid; justify-items: center; gap: 0.4rem; padding: 0.7rem 0.3rem 0.6rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.8125rem; line-height: 1.2; text-align: center; cursor: pointer; transition: box-shadow var(--dur-2); }
.sig__tile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sig__tile img { width: 48px; height: 48px; display: block; }
.sig__tile:has(input:checked) { box-shadow: inset 0 0 0 2px var(--c-ink-900); }
.sig__tile:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Preview controls. */
.sig__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.sig__views { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sig__view { min-height: 2.75rem; padding: 0.5rem 0.9rem; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: background-color var(--dur-2), color var(--dur-2); }
.sig__view[aria-pressed="true"] { background: var(--c-ink-900); color: var(--c-paper-0); box-shadow: none; }
.sig__view:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The mock email. Set in the fonts a mail app uses, since the signature is. */
.sig__mail {
  max-width: 100%; margin-inline: auto; background: #fff; color: #1f2430;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5;
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -28px rgb(7 11 28 / 0.4);
  transition: max-width var(--dur-3) var(--ease-out), background-color var(--dur-3), color var(--dur-3);
}
.sig__mail.is-phone { max-width: 375px; }
.sig__head { display: grid; gap: 0.2rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid #e6e7ec; font-size: 13px; color: #5d6478; }
.sig__head b { margin-right: 0.4rem; font-weight: 600; color: #1f2430; }
.sig__body { padding: 1.25rem 1.25rem 1.5rem; }
.sig__body > p { margin: 0 0 0.9rem; }
.sig__out { margin-top: 1.4rem; overflow-x: auto; }
/* Mail apps size boxes the old way and let pictures be their own size, so the preview does too. */
.sig__out, .sig__out * { box-sizing: content-box; }
.sig__out img { max-width: none; }
/* Dark mode the way Apple Mail shows it, which is the hard case. It keeps
   the signature's colours on its own dark background, so they're middle
   tones that read on either. No mail app touches the pictures. */
.sig__mail.is-dark { background: #1e1e1e; color: #e5e5ea; }
.sig__mail.is-dark .sig__head { border-color: #3a3a3c; color: #a1a1a6; }
.sig__mail.is-dark .sig__head b { color: #e5e5ea; }
.sig__caption { margin-top: 0.75rem; min-height: 3em; }

/* Install steps. */
.sig__panel { display: grid; gap: 1rem; justify-items: start; }
.sig__panel[hidden], .sig [data-on][hidden] { display: none; }
.sig [data-on] { display: grid; gap: 0.9rem; justify-items: start; }
.sig__steps { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.55rem; }
.sig__steps li { padding-left: 0.25rem; }
.sig__steps li::marker { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-2); }
.sig__qr { width: 10rem; height: 10rem; padding: 0.75rem; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sig__qr svg { display: block; width: 100%; height: 100%; }
.sig__after { display: grid; gap: 0.75rem; margin-top: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
/* Links inside the notes need to look like links. */
.sig .t-muted a { color: var(--text); text-decoration: underline; text-underline-offset: 0.15em; }
.sig__more { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.sig__more summary { cursor: pointer; font-weight: var(--fw-medium); }
.sig__more[open] { display: grid; gap: 0.75rem; }
.sig__more[open] summary { margin-bottom: 0.25rem; }

/* =====================================================================
   Launch kit, at launch/. The plan as a checklist, strips of posts to
   download, and blocks of text with a copy button. Built from the brand
   portal's parts, so it reads as the same place.
   ===================================================================== */

/* The plan: each moment on the left, its steps on the right. */
.plan { display: grid; gap: var(--sp-5); }
.plan__progress { color: var(--text-2); font-size: var(--fs-label); }
.plan__phases { list-style: none; padding: 0; border-top: var(--rule) solid var(--text); }
.plan__phase { display: grid; gap: var(--sp-4) var(--sp-8); padding: var(--sp-6) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .plan__phase { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.plan__when { display: grid; gap: 0.5rem; align-content: start; }
.plan__day { justify-self: start; padding: 0.3rem 0.6rem 0.25rem 0.75rem; font-size: var(--fs-label); background: var(--c-ink-900); color: var(--c-volt-500); clip-path: var(--bow-s); }
.plan__steps { list-style: none; padding: 0; display: grid; }
.plan__step { display: grid; gap: 0.35rem 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.plan__step:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 700px) { .plan__step { grid-template-columns: 1fr auto; align-items: baseline; } }
.plan__step label { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.9rem; align-items: start; cursor: pointer; }
.plan__step input { position: absolute; opacity: 0; width: 1.5rem; height: 1.5rem; margin: 0; }
.plan__box { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; box-shadow: inset 0 0 0 2px var(--text); clip-path: var(--bow-s); display: grid; place-items: center; transition: background-color var(--dur-2); }
.plan__step input:checked + .plan__box { background: var(--c-volt-500); box-shadow: none; }
.plan__step input:checked + .plan__box::after { content: ""; width: 0.75rem; height: 0.4rem; border: solid var(--c-ink-900); border-width: 0 0 2px 2px; transform: translateY(-0.1rem) rotate(-45deg); }
.plan__step input:focus-visible + .plan__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.plan__step input:checked ~ .plan__text { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.plan__text { line-height: 1.45; }
.plan__who { display: inline-block; margin-left: 0.4rem; font-size: var(--fs-micro); color: var(--text-2); text-decoration: none; }
.plan__step .link-arrow { justify-self: start; margin-left: 2.4rem; font-size: var(--fs-small); }
@media (min-width: 700px) { .plan__step .link-arrow { margin-left: 0; white-space: nowrap; } }

/* Strips of posts. A row that scrolls sideways on a phone, a grid above. */
@media (max-width: 699px) {
  .launch__strip { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-3); }
  .launch__strip > * { scroll-snap-align: start; }
}
.launch__copies { display: grid; gap: var(--gutter); margin-top: var(--sp-6); }
@media (min-width: 900px) { .launch__copies { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.launch__pair { display: grid; gap: var(--sp-7) var(--sp-8); align-items: start; }
@media (min-width: 1000px) { .launch__pair { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.launch__pair .kit-item { max-width: 32rem; }
.launch__notes { margin: var(--sp-5) 0 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; color: var(--text-2); max-width: 46rem; }
.launch__lead { margin-bottom: var(--sp-6); }
.launch__jobs { align-items: start; }
.launch__job { display: grid; gap: 0.6rem; align-content: start; }

/* Text to copy. The words sit on the page as written, with a button above. */
.copy { margin: 0; display: grid; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-theme="night"] .copy { background: rgb(255 255 255 / 0.04); }
.copy__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem 0.6rem 0.6rem 1rem; border-bottom: 1px solid var(--line); }
.copy__title { font-weight: var(--fw-semi); }
.copy__sub, .copy__count { font-size: var(--fs-micro); color: var(--text-2); }
.copy__btn { margin-left: auto; min-height: 2.75rem; padding: 0.5rem 1rem; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-900); background: var(--c-volt-500); clip-path: var(--bow-s); cursor: pointer; }
.copy__btn.is-done { background: var(--c-ink-900); color: var(--c-volt-500); }
[data-theme="night"] .copy__btn.is-done { background: var(--c-paper-0); color: var(--c-ink-900); }
.copy__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.copy__text { padding: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-small); line-height: 1.55; max-height: 26rem; overflow-y: auto; }

/* Captions under each post, tucked away until wanted. */
.launch__cap summary { cursor: pointer; font-size: var(--fs-micro); color: var(--text-2); padding: 0.5rem 0; }
.launch__cap[open] summary { margin-bottom: 0.4rem; }
.launch__links { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.launch__links li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.launch__links .mono { font-size: var(--fs-micro); color: var(--text-2); overflow-wrap: anywhere; }

/* Messages and profiles, two across on wide screens. */
.launch__msgs { display: grid; gap: var(--sp-8) var(--gutter); }
@media (min-width: 1000px) { .launch__msgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.msg { display: grid; gap: var(--sp-4); align-content: start; scroll-margin-top: 7rem; }
.msg__head { display: grid; gap: 0.6rem; justify-items: start; }

.launch [id] { scroll-margin-top: 6rem; }

/* Beside an image there's no room for the heading and its note side by side. */
.launch__pair .section-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.launch__pair .section-head__aside { max-width: 36rem; }

/* The reveal video, a phone-shaped player beside its captions. */
.launch__video { margin: 0; display: grid; gap: var(--sp-3); justify-items: start; }
.launch__video video { display: block; width: 100%; max-width: 22rem; height: auto; aspect-ratio: 9 / 16; background: var(--c-ink-900); }
/* On a phone the video comes first, so Katie watches it before the captions. */
@media (max-width: 999px) { .launch__media { order: -1; } }