@import url(fonts.css);
@import url(print.css) print;

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --ground: #0b0b0c;
  --ink: #f4f5f3;
  --ink-soft: #c2c3c3;
  --grey: #7e838a;
  --rule: rgba(244, 245, 243, .78);
  --rule-soft: rgba(244, 245, 243, .28);
  --blue: #1f3fa6;
  --blue-hover: #2a4dc2;

  --display: 'Teko', 'Arial Narrow', sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --sans: 'Archivo', system-ui, sans-serif;
  --typed: 'VT323', 'Courier New', monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --sheet-gap: clamp(24px, 4vh, 40px); /* blank black above the sheet on every page (user, 2 Oct 2026) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-stroke: cubic-bezier(.7, 0, .2, 1);
  --eye: url(../img/amahlo-eye.svg);

  color-scheme: dark;
}

/* ── Base and browser surfaces ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); scrollbar-color: #3a3a3a var(--ground); scrollbar-width: thin; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; padding-top: var(--sheet-gap); background: var(--ground); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--blue); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; }
/* Sheet crosshair: sits behind the page, so imagery and panels cover it */
main, .site-foot { position: relative; z-index: 1; }
.crosshair { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-out); }
.crosshair.on { opacity: 1; }
.crosshair i { position: absolute; --c: rgba(244, 245, 243, .22); --gap: 18px; }
.ch-h {
  left: 0; right: 0; top: var(--cy); height: 1px;
  background: linear-gradient(90deg, var(--c) calc(var(--cx) - var(--gap)), transparent 0 calc(var(--cx) + var(--gap)), var(--c) 0);
}
.ch-v {
  top: 0; bottom: 0; left: var(--cx); width: 1px;
  background: linear-gradient(180deg, var(--c) calc(var(--cy) - var(--gap)), transparent 0 calc(var(--cy) + var(--gap)), var(--c) 0);
}
.ch-read {
  position: absolute; left: calc(var(--cx) + 14px); top: calc(var(--cy) + 12px);
  font: 400 10px/1 var(--mono); letter-spacing: .04em; color: var(--grey); white-space: nowrap;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--blue); font: 500 .8125rem var(--mono); text-transform: uppercase; }
.skip:focus { top: 12px; }

/* ── Hero sheet (desktop: measured against the approved comp, 1440×900) ── */
.sheet {
  --hero-h: clamp(640px, calc(100svh - var(--sheet-gap)), 62.5vw);
  --u: min(calc(100vw / 1440), calc(var(--hero-h) / 900));
  position: relative; height: var(--hero-h); overflow: hidden;
}
.sheet .at {
  position: absolute; margin: 0;
  left: calc(var(--x) / 14.4 * 1%); top: calc(var(--y) / 9 * 1%);
}

/* Neatline, ticks and grid references */
.frame { position: absolute; inset: 0; pointer-events: none; }
.frame::before {
  content: ""; position: absolute; border: 1px solid var(--rule);
  left: calc(66 / 14.4 * 1%); right: calc(67 / 14.4 * 1%); top: calc(20 / 9 * 1%); bottom: calc(22 / 9 * 1%);
}
.frame span {
  position: absolute; font: 400 max(9px, calc(10 * var(--u))) / 1 var(--mono); letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase;
  left: calc(var(--x) / 14.4 * 1%); top: calc(var(--y) / 9 * 1%); transform: translate(-50%, -50%);
}
.frame .v { transform: translate(-50%, -50%) rotate(-90deg); }
.frame span::after { content: ""; position: absolute; background: var(--rule); }
.frame .t::after { left: 50%; top: 150%; width: 1px; height: calc(10 * var(--u)); }
.frame .b::after { left: 50%; bottom: 150%; width: 1px; height: calc(10 * var(--u)); }
.frame .v::after { left: 50%; top: 150%; width: 1px; height: calc(10 * var(--u)); }
.frame .r { transform: translate(-50%, -50%) rotate(90deg); }
.frame .r::after { left: 50%; top: 150%; width: 1px; height: calc(10 * var(--u)); }

/* Floating nav panel */
.site-nav {
  position: absolute; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  left: calc(94 / 14.4 * 1%); right: calc(94 / 14.4 * 1%); top: calc(49 / 9 * 1%); height: calc(68 / 9 * 1%);
  padding: 0 calc(18 * var(--u)) 0 calc(26 * var(--u));
  background: var(--ground); border: 1px solid var(--rule);
}
.site-nav .logo img { width: calc(226 * var(--u)); height: auto; }
.site-nav nav { margin-left: auto; }
.site-nav ul { display: flex; gap: calc(30 * var(--u)); margin: 0 calc(31 * var(--u)) 0 0; padding: 0; list-style: none; }
.site-nav ul a {
  font: 400 max(12px, calc(14 * var(--u))) / 1 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; padding: .6em 0; position: relative;
}
.site-nav ul a::after, .text-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .2em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.site-nav ul a:hover::after, .site-nav ul a[aria-current]::after, .text-link:hover::after { transform: none; }

.btn {
  display: inline-flex; align-items: center; gap: .7em; background: var(--blue); color: var(--ink);
  font: 400 max(12px, calc(14 * var(--u))) / 1 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; padding: .78em 1.15em; border: 0; border-radius: 3px; cursor: pointer;
  transition: background-color .25s var(--ease-out);
}
.btn:hover { background: var(--blue-hover); }
.btn svg { width: 1em; height: 1em; flex: none; transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translate(.12em, -.12em); }

/* Title block */
.hook {
  --x: 118; --y: 271; width: calc(470 / 14.4 * 1%);
  font: 500 calc(56 * var(--u)) / .857 var(--display); text-transform: uppercase; letter-spacing: -.01em;
  text-wrap: balance;
}
.tagline { --x: 118; --y: 530; font: 400 calc(30 * var(--u)) / 1 var(--typed); letter-spacing: .03em; color: var(--ink-soft); }
.hero-cta { --x: 119; --y: 587; }
.hook, .tagline, .hero-cta { z-index: 2; }

/* Reconnaissance figure */
.recon { --x: 560; --y: 117; width: calc(761 / 14.4 * 1%); height: calc(705 / 9 * 1%); overflow: hidden; }
.recon picture, .recon img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%);
          mask-image: linear-gradient(90deg, transparent 0, #000 13%);
}
.recon img { filter: contrast(1.05); }
/* The analysed tile: the other tiles sink, this one lifts. */
.recon-map { position: absolute; inset: 0; }
.analysis {
  position: absolute; left: calc(290 / 7.61 * 1%); top: calc(233 / 7.05 * 1%); width: calc(235 / 7.61 * 1%); height: calc(235 / 7.05 * 1%);
  box-shadow: 0 0 0 200vmax rgba(11, 11, 12, .3); backdrop-filter: brightness(1.12) contrast(1.04); overflow: hidden;
}
/* Squares: pointer over one lifts it and runs a scan down it, like the analysed tile. */
.cell {
  position: absolute; width: calc(236 / 7.61 * 1%); height: calc(234 / 7.05 * 1%);
  overflow: hidden; pointer-events: auto; transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.cell::before, .cell::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
.cell::before {
  inset: 6px; transition: opacity .2s var(--ease-out);
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 14px 1px, linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 14px,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 14px 1px, linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 14px,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 14px 1px, linear-gradient(var(--ink), var(--ink)) 0 100% / 1px 14px,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 14px 1px, linear-gradient(var(--ink), var(--ink)) 100% 100% / 1px 14px;
  background-repeat: no-repeat;
}
.cell::after {
  inset: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent 0, rgba(244, 245, 243, .08) 80%, rgba(244, 245, 243, .5) 99.5%, var(--ink) 100%);
}
@media (hover: hover) {
  .cell:hover { background-color: rgba(244, 245, 243, .1); box-shadow: inset 0 0 0 1px var(--ink); }
  .cell:hover::before { opacity: 1; }
  .cell:hover::after { animation: scan .9s cubic-bezier(.45, 0, .25, 1) forwards; }
}
/* Positions inside the figure are comp pixels relative to its origin (560, 117) and size (761 × 705). */
.recon .p { position: absolute; left: calc((var(--x) - 560) / 7.61 * 1%); top: calc((var(--y) - 117) / 7.05 * 1%); }
.tile-line { position: absolute; background: var(--rule); }
.tile-line.v { width: 1px; top: 0; bottom: 0; left: calc((var(--x) - 560) / 7.61 * 1%); }
.tile-line.h { height: 1px; left: calc(54 / 7.61 * 1%); right: 0; top: calc((var(--y) - 117) / 7.05 * 1%); }
.coord {
  font: 400 calc(9 * var(--u)) / 1 var(--mono); letter-spacing: .02em; color: var(--ink-soft);
  background: rgba(11, 11, 12, .62); padding: .3em .45em; white-space: nowrap;
}
.coord.r { transform: translateX(-100%); }
.callouts { margin: 0; padding: 0; list-style: none; }
.callout {
  font: 400 max(11px, calc(13.5 * var(--u))) / 1 var(--mono); letter-spacing: 0; color: var(--ink); text-transform: uppercase;
  background: var(--ground); border: 1.5px solid var(--ink); padding: .42em .62em; white-space: nowrap;
}
.mark { position: absolute; width: calc(9 * var(--u)); height: calc(9 * var(--u)); background: var(--ink); border: 1px solid var(--ground); transform: translate(-50%, -50%) rotate(45deg); }
/* The node on Command is the Amahlo eye: blue like the cut it replaces, keyed out of the plate by an ink contour. */
.node-eye {
  position: absolute; width: calc(76 * var(--u)); height: calc(57 * var(--u)); transform: translate(-50%, -50%); z-index: 2;
  --o: calc(1.5 * var(--u));
  filter: drop-shadow(var(--o) 0 0 var(--ink)) drop-shadow(calc(-1 * var(--o)) 0 0 var(--ink)) drop-shadow(0 var(--o) 0 var(--ink)) drop-shadow(0 calc(-1 * var(--o)) 0 var(--ink))
          drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(11, 11, 12, .8));
}
.node-eye::before {
  content: ""; position: absolute; inset: 0; background: var(--blue);
  -webkit-mask: var(--eye) center / contain no-repeat; mask: var(--eye) center / contain no-repeat;
}
.overprint { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.overprint path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.overprint .leader { stroke: var(--ink); stroke-width: 1; }
.overprint .edge { stroke: var(--ink); stroke-width: calc(9.5 * var(--u)); stroke-linecap: butt; }
.overprint .link { stroke: var(--blue); stroke-width: calc(6.5 * var(--u)); stroke-linecap: butt; }
/* The sheet's one authored moment. Content is visible by default; only the drawn layer animates. */
.recon.is-drawing img { filter: contrast(1.05) brightness(.72) blur(2.5px); }
.recon.is-drawing .overprint path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.recon.is-drawn img { filter: contrast(1.05); transition: filter 1.1s var(--ease-out); }
.recon.is-drawn .overprint path { stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--ease-out) calc(.35s + var(--i) * 70ms); }
.recon.is-drawing .callout { clip-path: inset(0 100% 0 0); }
.recon.is-drawn .callout { clip-path: inset(0); transition: clip-path .42s var(--ease-out) calc(.6s + var(--i) * 70ms); }
.recon.is-drawing .mark { scale: 0; }
.recon.is-drawn .mark { scale: 1; transition: scale .3s var(--ease-out) calc(.3s + var(--i) * 70ms); }
/* Once the overprint is in, the eye opens on Target. */
.recon.is-drawing .node-eye { scale: .7; opacity: 0; }
.recon.is-drawn .node-eye { scale: 1; opacity: 1; transition: scale .6s var(--ease-out) 1.5s, opacity .6s var(--ease-out) 1.5s; }
/* Then the radar: true circles go out from the eye in waves of three, every few seconds. */
.radar { width: 0; height: 0; z-index: 1; pointer-events: none; }
/* Rings are drawn at full size and scaled, so the wave never forces layout; it runs only while the sheet is on screen. */
.radar b {
  position: absolute; left: 0; top: 0; width: calc(250 * var(--u)); aspect-ratio: 1; translate: -50% -50%; scale: .24;
  border: calc(2.5 * var(--u)) solid var(--ink); border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 1px rgba(11, 11, 12, .35), inset 0 0 0 1px rgba(11, 11, 12, .35);
}
.recon.is-drawn .radar b { animation: radar 3.6s cubic-bezier(.25, .6, .3, 1) infinite paused; animation-delay: calc(2.1s + var(--k) * .45s); }
.sheet.is-live .recon.is-drawn .radar b { animation-play-state: running; }
.radar b:nth-child(2) { --k: 1; } .radar b:nth-child(3) { --k: 2; } .radar b:nth-child(1) { --k: 0; }
@keyframes radar {
  0% { scale: .24; opacity: 1; }
  30% { opacity: .75; }
  60% { scale: 1; opacity: 0; }
  100% { scale: 1; opacity: 0; }
}
/* The analysed tile is read once: a scan passes down it while the ground resolves. */
.analysis::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent 0, rgba(244, 245, 243, .07) 82%, rgba(244, 245, 243, .55) 99.6%, var(--ink) 100%);
}
.recon.is-drawn .analysis::after { animation: scan 1.5s cubic-bezier(.45, 0, .25, 1) .25s forwards; }
@keyframes scan { 0% { opacity: 1; transform: translateY(-100%); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }

/* Map margin */
.margin-note { font: 400 max(11px, calc(13 * var(--u))) / 1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
.scale { --x: 118; --y: 832; display: flex; align-items: flex-end; gap: calc(9 * var(--u)); }
.scale .bar { position: relative; width: calc(137 * var(--u)); height: calc(24 * var(--u)); }
.scale .bar i { position: absolute; bottom: 0; height: calc(5 * var(--u)); width: 33.4%; border: 1px solid var(--ink); }
.scale .bar i:nth-child(1) { left: 0; background: var(--ink); }
.scale .bar i:nth-child(2) { left: 33.3%; }
.scale .bar i:nth-child(3) { left: 66.6%; }
.scale .bar b { position: absolute; top: 0; font-weight: 400; transform: translateX(-50%); }
.legend { --x: 614; --y: 841; display: flex; gap: calc(24 * var(--u)); margin: 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: .6em; }
.legend svg { width: 1.1em; height: 1.1em; overflow: visible; }
.legend .op-edge { stroke: var(--ink); stroke-width: 4.5; }
.legend .op-link { stroke: var(--blue); stroke-width: 3; }
.sheet-note { --x: 1119; --y: 841; }

/* ── Sections below the sheet: the frame continues down the page ── */
.sheet-body { margin: 0 calc(66 / 14.4 * 1%); border-inline: 1px solid var(--rule-soft); }
.band { position: relative; padding: clamp(88px, 11vw, 168px) calc(52 / 13.08 * 1%) clamp(72px, 8vw, 128px); border-top: 1px solid var(--rule-soft); }
.band::before, .band::after { content: ""; position: absolute; top: -6px; width: 1px; height: 11px; background: var(--rule); }
.band::before { left: -1px; } .band::after { right: -1px; }
.ref { position: absolute; top: 18px; right: 22px; margin: 0; font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--grey); }

.display { margin: 0; font: 500 clamp(40px, 4.9vw, 76px) / .9 var(--display); letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
/* One band-heading step for every page: the size Outcomes set, well above h3 (40px) and list items (32px). */
.band-h { margin: 0 0 clamp(32px, 3.5vw, 52px); font: 500 clamp(44px, 5vw, 76px) / .9 var(--display); text-transform: uppercase; }

.problem-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
/* Heading, lede and answer share one measure, so their right edges agree. */
.problem-copy { max-width: 34rem; }
.problem .display { text-wrap: pretty; }
.problem-copy .lede, .problem-copy .answer-text { max-width: none; }
.problem-copy .answer { margin-top: clamp(56px, 6vw, 88px); }

/* Exhibit: one object, set like evidence on the sheet */
.exhibit { --u: 1px; position: sticky; top: 48px; margin: 0; aspect-ratio: 1100 / 1392; overflow: hidden; border: 1px solid var(--rule); }
.exhibit img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04); }
.exhibit :is(.mark, .callout, .coord) { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.exhibit .callout { transform: translate(-100%, -50%); }
.exhibit .coord { font-size: 10px; }
.exhibit .coord.r { transform: translate(-100%, -100%); }
.exhibit-leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.exhibit-leader path { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.exhibit.is-pending:not(.is-in) img { filter: contrast(1.3) brightness(.35) blur(6px); }
.exhibit.is-pending:not(.is-in) .exhibit-leader path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.exhibit.is-pending:not(.is-in) .mark { scale: 0; }
.exhibit.is-pending:not(.is-in) .callout { clip-path: inset(0 0 0 100%); }
.exhibit.is-in img { transition: filter 1.3s var(--ease-out); }
.exhibit.is-in .exhibit-leader path { stroke-dasharray: 1; transition: stroke-dashoffset .6s var(--ease-out) .7s; }
.exhibit.is-in .mark { transition: scale .3s var(--ease-out) .6s; }
.exhibit.is-in .callout { clip-path: inset(0); transition: clip-path .45s var(--ease-out) 1.15s; }
.lede { margin: clamp(28px, 3vw, 40px) 0 0; max-width: 54ch; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.6; color: var(--ink-soft); }
.answer { border-top: 1px solid var(--rule); padding-top: 28px; margin-top: clamp(8px, 1vw, 14px); }
.answer-text { margin: 0; font: 400 clamp(1.3rem, 1.75vw, 1.6rem) / 1.35 var(--sans); max-width: 30ch; }
.line { margin: 22px 0 0; font: 400 clamp(1.45rem, 1.8vw, 1.75rem) / 1.1 var(--typed); color: var(--ink-soft); }
.text-link { position: relative; display: inline-flex; align-items: center; gap: .6em; margin-top: 28px; padding: .4em 0; font: 400 13px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.text-link svg { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease-out); }
.text-link:hover svg { transform: translateX(.2em); }


.client-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.client-index li {
  position: relative; padding: 16px 0 14px; font: 400 clamp(24px, 2.2vw, 32px) / 1 var(--display); text-transform: uppercase;
  text-shadow: 0 0 .25em var(--ground), 0 0 .6em var(--ground);
}
.client-index li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-soft); transform-origin: left; }
.client-index.is-pending:not(.is-in) li { opacity: 0; translate: 0 .35em; }
.client-index.is-pending:not(.is-in) li::before { scale: 0 1; }
.client-index.is-in li { transition: opacity .5s linear calc(var(--n) * 60ms), translate .7s var(--ease-out) calc(var(--n) * 60ms); }
.client-index.is-in li::before { transition: scale .8s var(--ease-out) calc(var(--n) * 60ms); }

.close { padding-bottom: clamp(88px, 10vw, 152px); }
.close-h { max-width: 13ch; font-size: clamp(52px, 6.7vw, 96px); line-height: .86; text-wrap: balance; }
.close-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(36px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--rule); }
.close-row p { margin: 0; font: 400 clamp(1.45rem, 1.8vw, 1.75rem) / 1.1 var(--typed); color: var(--ink-soft); }
.close .btn { --u: 1px; font-size: 14px; }
.location { margin: 28px 0 0; font: 400 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }

.site-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin: 0 calc(66 / 14.4 * 1%); padding: 36px calc(52 / 13.08 * 1%) 48px; border: 1px solid var(--rule-soft); border-bottom: 0; }
.site-foot .logo img { width: 132px; height: auto; }
.site-foot ul { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; }
.site-foot a:not(.logo) { font: 400 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); }
.site-foot a:not(.logo):hover { color: var(--ink); text-decoration: underline; }
.site-foot p { margin: 0 0 0 auto; font: 400 12px/1 var(--mono); letter-spacing: .04em; color: var(--grey); }

/* ── Phone, tablet and portrait: the sheet reflows into a column ── */
@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  .sheet { --u: 1px; height: auto; padding: 16px 16px 28px; }
  .sheet .at, .site-nav { position: relative; left: auto; top: auto; right: auto; }
  .frame span { display: none; }
  .frame::before { inset: 8px; }
  .site-nav { height: auto; flex-wrap: wrap; gap: 14px 16px; padding: 16px; margin-bottom: 44px; }
  .site-nav .logo img { width: 132px; }
  .site-nav nav { order: 3; width: 100%; margin: 0; }
  .js .site-nav nav { display: none; } /* the links live in the menu sheet; without script the row stays */
  .js .menu-toggle { display: inline-flex; }
  .site-nav ul { flex-wrap: wrap; gap: 6px 22px; margin: 0; }
  .site-nav ul a { font-size: 13px; }
  .site-nav .nav-cta { display: none; }
  .hero > .at:not(.recon) { margin-inline: 10px; }
  .hook { width: auto; font-size: clamp(40px, 11.2vw, 76px); line-height: .86; }
  .sheet .tagline { margin-top: 24px; font-size: 25px; }
  .sheet .hero-cta { margin-top: 24px; font-size: 13px; }
  .sheet .recon { --u: calc((100vw - 34px) / 761); width: auto; height: auto; aspect-ratio: 761 / 705; margin-top: 52px; }
  .callout.edge { left: auto; right: 0; }
  .coord, .callout.minor, .mark.minor, .overprint .leader.minor { display: none; }
  .callout { font-size: max(9.5px, calc(13.5 * var(--u))); }
  .sheet :is(.scale, .legend, .sheet-note) { margin-top: 16px; font-size: 11px; }
  .scale { display: none; }
  .legend { flex-wrap: wrap; gap: 10px 18px; }
  .sheet .sheet-note { margin-top: 10px; }

  .sheet-body, .site-foot { margin-inline: 8px; }
  .band { padding: 80px 20px 64px; }
  .problem-grid { grid-template-columns: 1fr; }
  .client-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot { padding: 32px 20px 40px; }
  .site-foot p { margin-left: 0; width: 100%; }
}
@media (max-width: 479.98px) {
  .client-index { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* Method: the overprint language carries the sequence */
.method { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); margin: clamp(72px, 8vw, 120px) 0 0; padding: 0; list-style: none; }
.method::before {
  content: ""; position: absolute; top: 9px; left: 10px; right: calc((100% - 2 * clamp(28px, 4vw, 72px)) / 3 - 10px);
  height: 6px; background: var(--blue); box-shadow: 0 0 0 1.5px var(--ink); transform-origin: left;
}
.method li { position: relative; padding-top: 52px; }
.method li::before {
  content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue); border: 4px solid var(--ground); box-shadow: 0 0 0 2px var(--ink); box-sizing: border-box; z-index: 1;
}
/* Wisdom: the line arrives at the Amahlo eye, which opens. */
.method li:last-child::before {
  left: -11px; top: -6px; width: 46px; height: 35px; border: 0; border-radius: 0; box-shadow: none;
  background: var(--eye) center / contain no-repeat, radial-gradient(closest-side, var(--ground) 94%, transparent 100%);
}
.method.is-pending:not(.is-in)::before { scale: 0 1; }
.method.is-pending:not(.is-in) li::before { scale: 0; }
.method.is-pending:not(.is-in) li:last-child::before { scale: .7; opacity: 0; }
.method.is-in::before { transition: scale 1.1s cubic-bezier(.45, 0, .2, 1) .2s; }
.method.is-in li::before { transition: scale .4s var(--ease-out) .1s; }
.method.is-in li:nth-child(2)::before { transition-delay: .62s; }
.method.is-in li:last-child::before { transition: scale .6s var(--ease-out) 1.2s, opacity .6s var(--ease-out) 1.2s; }
.method h3 { margin: 0 0 14px; font: 500 clamp(30px, 2.8vw, 40px) / .9 var(--display); text-transform: uppercase; }
.method p { margin: 0; max-width: 38ch; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

/* Outcomes: the proof is pinned to the ground it was won on */
.record { padding-top: clamp(340px, 36vw, 540px); }
.terrain { --u: 1px; position: absolute; inset: 0; margin: 0; pointer-events: none; }
.terrain img, .terrain .glyph-canvas, .terrain::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 42%, transparent 80%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 42%, transparent 80%);
}
.terrain img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: contrast(1.1) brightness(1.15); }
.terrain::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--rule-soft) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) 0 0 / 12.5% 100%;
}
/* Plate note, bottom-right of the visible plate, like the exhibit's */
.terrain .coord { position: absolute; right: 22px; top: calc(clamp(340px, 36vw, 540px) - 64px); z-index: 1; font-size: 11px; }
.record .band-h { position: absolute; z-index: 1; left: calc(52 / 13.08 * 1%); top: clamp(88px, 9vw, 136px); margin: 0; }
/* Keyed out of the glyph ground: a black stroke drawn under the fill, then a soft dark halo */
.record .band-h { -webkit-text-stroke: .14em var(--ground); paint-order: stroke fill; text-shadow: 0 0 .3em rgba(11, 11, 12, .9), 0 0 .8em rgba(11, 11, 12, .7); }
.record .ref { z-index: 1; }
.record.is-pending:not(.is-in) .terrain img { filter: contrast(1.4) brightness(.3) blur(6px); }
.record.is-in .terrain img { transition: filter 1.4s var(--ease-out); }
.terrain.has-glyphs img { visibility: hidden; }
.record.is-pending:not(.is-in) .terrain .glyph-canvas { opacity: 0; }
.record.is-in .terrain .glyph-canvas { transition: opacity 1.4s var(--ease-out); }

.annotations { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.annotations li { position: relative; }
.annotations li::after {
  content: ""; position: absolute; bottom: 100%; left: 0; width: 1px; height: calc(var(--lead) * 4px);
  background: var(--ink); transform-origin: bottom;
}
.annotations li::before {
  content: ""; position: absolute; left: 0; bottom: calc(100% + var(--lead) * 4px); width: 11px; height: 11px;
  translate: -50% 50%; border-radius: 50%; background: var(--blue); border: 2px solid var(--ground); box-shadow: 0 0 0 1.5px var(--ink);
}
.record.is-pending:not(.is-in) .annotations li::after { scale: 1 0; }
.record.is-pending:not(.is-in) .annotations li::before { scale: 0; }
.record.is-in .annotations li::after { transition: scale .8s var(--ease-out) calc(.5s + var(--n) * 120ms); }
.record.is-in .annotations li::before { transition: scale .35s var(--ease-out) calc(1.05s + var(--n) * 120ms); }
.annotations .fig {
  display: inline-block; margin: 0; padding: .12em .3em .04em; background: var(--ground); border: 1.5px solid var(--ink);
  font: 500 clamp(44px, 5vw, 84px) / 1 var(--display); letter-spacing: -.005em; white-space: nowrap;
}
.annotations .what { margin: 18px 0 0; max-width: 26ch; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.annotations .src { margin: 12px 0 0; font: 400 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }

/* Closing band: the words alone, with the glyph ground off to the right */
.close-grid { max-width: 54rem; }

@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  /* The map becomes a window onto the right-hand tiles, so labels stay readable. */
  .sheet .recon { --u: calc((100vw - 34px) / 621); aspect-ratio: 621 / 705; }
  .recon-map { inset: 0 auto 0 calc(-140 / 621 * 100%); width: calc(761 / 621 * 100%); }
  .recon picture, .recon img { -webkit-mask-image: none; mask-image: none; }
  .callout { font-size: max(10px, calc(13.5 * var(--u))); }
  .method { grid-template-columns: 1fr; gap: 40px; }
  .method::before { display: none; }
  .method li { padding: 0 0 0 48px; }
  .method li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 12px; bottom: -52px; width: 6px; background: var(--blue); box-shadow: 0 0 0 1.5px var(--ink); }
  .problem-grid { gap: 56px; }
  .exhibit { position: relative; top: auto; max-width: 520px; }
  .record { padding-top: clamp(240px, 62vw, 380px); }
  .record .band-h { left: 20px; top: 72px; }
  .terrain { bottom: auto; height: clamp(300px, 80vw, 460px); }
  .terrain img, .terrain .glyph-canvas, .terrain::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 55%, transparent 100%);
  }
  /* Each figure keeps a short leader and pin, so the proof stays pinned to the ground on phones. */
  .annotations { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; padding-top: 32px; }
  .annotations li::after { height: 28px; }
  .annotations li::before { bottom: calc(100% + 28px); }
  .annotations .fig { font-size: clamp(36px, 10vw, 56px); }
}
@media (max-width: 479.98px) {
  .annotations { grid-template-columns: 1fr; }
}

/* Section grounds: each band below the sheet carries its own slow, quiet ground, never the same twice in a row.
   Loops run only while the band is on screen (.is-live, set by site.js) and stop under reduced motion. */
.band-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.band-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.band > :where(:not(.band-bg, .band-fx, .terrain, .ref)) { position: relative; z-index: 1; }
.band > .ref { z-index: 1; }
.band-bg, .band-bg *, .band-bg::before, .band-bg::after { animation-play-state: paused; }
.band.is-live :is(.band-bg, .band-bg *, .band-bg::before, .band-bg::after) { animation-play-state: running; }

/* The pixel face is single-weight and reads heavy at display size: a ground-coloured hairline over the fill
   trims every stroke, so the typed lines sit light. */
.tagline, .line, .close-row p { -webkit-text-stroke: .7px var(--ground); }

/* Glyph grounds (glyphs.js): the artwork redrawn as a type mosaic. Without script the plates and plain ground stay. */
.glyph-canvas { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }

/* Problem: the reconnaissance ground, seen through a slow roaming patch */
.glyph-roam .glyph-canvas {
  -webkit-mask: radial-gradient(closest-side, #000, transparent) 0 0 / 70% 90% no-repeat;
          mask: radial-gradient(closest-side, #000, transparent) 0 0 / 70% 90% no-repeat;
  animation: roam 32s ease-in-out infinite alternate;
}
@keyframes roam {
  0% { -webkit-mask-position: 0% 10%; mask-position: 0% 10%; }
  50% { -webkit-mask-position: 60% 80%; mask-position: 60% 80%; }
  100% { -webkit-mask-position: 100% 20%; mask-position: 100% 20%; }
}

/* Clients: the globe comes in off the right edge; its dark limb fades into the ground */
.clients [data-glyph="globe"] .glyph-canvas {
  -webkit-mask: linear-gradient(90deg, transparent 30%, #000 55%);
          mask: linear-gradient(90deg, transparent 30%, #000 55%);
}

/* Close: the exhibit's cable, faint, under the last word */
.glyph-fade .glyph-canvas {
  -webkit-mask: radial-gradient(60% 75% at 72% 55%, #000, transparent);
          mask: radial-gradient(60% 75% at 72% 55%, #000, transparent);
}

/* Contacts (site.js): one-off marks at random points behind the bands. Ink only, never above 30% */
.fx { position: absolute; width: 0; height: 0; --c: rgba(244, 245, 243, .3); }
.fx-ping { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgba(244, 245, 243, .4); animation: fx-fade 5.2s ease-in-out both; }
.fx-ping::before {
  content: ""; position: absolute; inset: -24px; border: 1px solid var(--c); border-radius: 50%;
  scale: .1; opacity: 0; animation: fx-ring 1.8s var(--ease-out) .2s 2;
}
.fx-ping::after {
  content: attr(data-ref); position: absolute; left: 12px; top: 8px; white-space: nowrap;
  font: 400 10px/1 var(--mono); letter-spacing: .04em; color: rgba(244, 245, 243, .3);
  clip-path: inset(0 100% 0 0); animation: fx-type 5.2s steps(18, end) both;
}
@keyframes fx-ring { from { scale: .1; opacity: 1; } to { scale: 1; opacity: 0; } }
@keyframes fx-fade { 0% { opacity: 0; } 8%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-type { 0%, 14% { clip-path: inset(0 100% 0 0); } 34%, 100% { clip-path: inset(0 0 0 0); } }

.fx-lock { width: 44px; height: 44px; margin: -22px 0 0 -22px; animation: fx-lock 4.4s var(--ease-out) both; }
.fx-lock::before, .fx-lock::after {
  content: ""; position: absolute; inset: 0; --b: 9px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--b) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--b),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--b) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--b),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--b) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--b),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--b) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--b);
  background-repeat: no-repeat;
}
.fx-lock::after { inset: 20px; background: var(--c); border-radius: 50%; animation: fx-fade 4.4s ease-in-out .6s both; }
@keyframes fx-lock { 0% { opacity: 0; scale: 2.2; } 25% { opacity: 1; scale: 1; } 70% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }

/* ── Approach: the section view (sheet 02), measured against its approved comp at 1440×900 ── */
.section-view .ap-h {
  --x: 118; --y: 148; width: calc(360 / 14.4 * 1%); z-index: 2;
  font: 500 calc(54 * var(--u)) / .9 var(--display); text-transform: uppercase; letter-spacing: -.005em;
}
.section-view .ap-intro {
  --x: 118; --y: 247; width: calc(392 / 14.4 * 1%); z-index: 2;
  font: 400 calc(18 * var(--u)) / 1.22 var(--sans); font-stretch: 86%; color: var(--ink-soft);
}
/* The figure spans the sheet; everything inside is placed in comp pixels. */
.section-view .section { --x: 0; --y: 0; width: 100%; height: 100%; pointer-events: none; }
.section-map { position: absolute; inset: 0; }
/* The figure's coordinates are the comp's render space (1440 × 966, drawn 33px lower), fitted into the 1440 × 900 sheet. */
.section-map [style*="--x"], .section-map .ground-label { position: absolute; left: calc(var(--x) / 14.4 * 1%); top: calc((var(--y) + 33) / 9.66 * 1%); margin: 0; }
.section-map picture { position: absolute; }
.section-map picture img { width: 100%; height: 100%; object-fit: cover; }
.section-map .surface { left: calc(585 / 14.4 * 1%); top: calc(157 / 9.66 * 1%); width: calc(743 / 14.4 * 1%); height: calc(231 / 9.66 * 1%); }
.section-map .surface img { filter: contrast(1.05); }
.section-map .strata { left: calc(112 / 14.4 * 1%); top: calc(390 / 9.66 * 1%); width: calc(1216 / 14.4 * 1%); height: calc(435 / 9.66 * 1%); }
.section-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.section-map .lines path { fill: none; stroke: var(--ink); stroke-linecap: square; vector-effect: non-scaling-stroke; }
.section-map .lines .ground { stroke-width: max(1.5px, calc(2 * var(--u))); }
.section-map .lines .probe, .section-map .lines .leader { stroke-width: max(1px, calc(1.3 * var(--u))); }
.section-map .lines .root { stroke-width: max(1px, calc(1.1 * var(--u))); stroke-linecap: round; }
.section-map .lines .head { fill: var(--ink); stroke: none; }
.section-map .nodes circle { fill: var(--ground); stroke: var(--ink); stroke-width: max(1px, calc(1.2 * var(--u))); vector-effect: non-scaling-stroke; }
.section-map .dots circle { fill: var(--ink); }
.section-map .diamonds path { fill: var(--ink); stroke: var(--ground); stroke-width: 1; vector-effect: non-scaling-stroke; }
.section-map .ground-label { --x: 118; --y: 335; font: 400 max(10px, calc(12 * var(--u))) / 1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
.section-map :is(.callouts, .tags) { margin: 0; padding: 0; list-style: none; }
.section-map .tag {
  font: 400 max(10px, calc(12 * var(--u))) / 1 var(--mono); color: var(--ink); text-transform: uppercase; white-space: nowrap;
  background: var(--ground); border: 1.5px solid var(--ink); padding: .5em .5em .45em;
}
/* The incidents as one line under the window; only the column layout needs it. */
.section-view .incidents { display: none; }
.section-view .node-eye { left: calc(720 / 14.4 * 1%); top: calc(789 / 9.66 * 1%); width: calc(98 * var(--u)); height: calc(74 * var(--u)); }

/* Bottom margin: the quote, its source, the legend and the sheet note */
.section-view .ap-quote { --x: 114; --y: 777; z-index: 2; }
.ap-quote p { margin: 0; max-width: max(calc(440 * var(--u)), min(420px, 34vw)); font: 400 calc(26 * var(--u)) / 1 var(--typed); letter-spacing: .02em; color: var(--ink-soft); -webkit-text-stroke: .7px var(--ground); }
.ap-quote footer { margin-top: calc(12 * var(--u)); }
.section-view .legend { --x: 612; --y: 844; }
.section-view .sheet-note { --x: 1122; --y: 844; }

/* The authored moment: probes drill down, tags open, the roots draw, the overprint pens in, the eye opens. */
.section-view.is-drawing .strata img { filter: brightness(.6) blur(3px); }
.section-view.is-drawn .strata img { filter: none; transition: filter 1.2s var(--ease-out); }
.section-view.is-drawing .lines path:not(.head) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.section-view.is-drawn .lines path:not(.head) { stroke-dashoffset: 0; }
.section-view.is-drawn .lines .ground { transition: stroke-dashoffset .9s var(--ease-stroke); }
.section-view.is-drawn .lines .leader { transition: stroke-dashoffset .35s var(--ease-out) calc(.7s + var(--i) * 80ms); }
.section-view.is-drawn .lines .probe { transition: stroke-dashoffset .6s cubic-bezier(.45, 0, .25, 1) calc(.9s + var(--i) * 90ms); }
.section-view.is-drawn .lines .root { transition: stroke-dashoffset .9s var(--ease-out) calc(1.1s + var(--i) * 120ms); }
.section-view.is-drawing :is(.lines .head, .nodes, .dots, .diamonds) { opacity: 0; }
.section-view.is-drawn :is(.lines .head, .nodes, .dots, .diamonds) { transition: opacity .3s linear .9s; }
.section-view.is-drawn .nodes { transition-delay: 1.6s; }
.section-view.is-drawing :is(.callout, .tag) { clip-path: inset(0 100% 0 0); }
.section-view.is-drawn .callout { clip-path: inset(0); transition: clip-path .4s var(--ease-out) calc(.5s + var(--i) * 80ms); }
.section-view.is-drawn .tag { clip-path: inset(0); transition: clip-path .4s var(--ease-out) calc(1.4s + var(--i) * 90ms); }
.section-view.is-drawing .overprint path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.section-view.is-drawn .overprint path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease-out) calc(2s + var(--i) * 90ms); }
.section-view.is-drawing .node-eye { scale: .7; opacity: 0; }
.section-view.is-drawn .node-eye { scale: 1; opacity: 1; transition: scale .6s var(--ease-out) 2.75s, opacity .6s var(--ease-out) 2.75s; }
.section-map .lines-still { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Approach bands */
.strands-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(32px, 3.5vw, 52px); }
.strands-head .band-h { margin: 0; }
.strands-note { margin: 0; max-width: 34ch; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.5; color: var(--ink-soft); }

/* The register: one row per strand, its tag repeated from the section view */
.register { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-soft); }
.register > li {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 16px clamp(24px, 3vw, 48px); align-items: start;
  padding: 26px 0 28px; border-top: 1px solid var(--rule-soft);
}
.register h3 { display: flex; align-items: center; gap: 16px; margin: 0; font: 500 clamp(30px, 2.8vw, 40px) / .9 var(--display); text-transform: uppercase; }
.tag {
  flex: none; font: 400 12px / 1 var(--mono); color: var(--ink); text-transform: uppercase; white-space: nowrap;
  background: var(--ground); border: 1.5px solid var(--ink); padding: .5em .5em .45em;
}
.register .what { margin: 2px 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }
.delivers { margin: 4px 0 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.delivers li + li { margin-top: 4px; }
.register.is-pending:not(.is-in) > li { opacity: 0; translate: 0 .6em; }
.register.is-in > li { transition: opacity .5s linear calc(var(--n) * 80ms), translate .7s var(--ease-out) calc(var(--n) * 80ms); }

/* Cost: the four losses pinned under a ground line, like incidents at ground level */
.cost-line { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
/* Each loss is two rows of one shared grid, so the four paragraphs start on one line whether or not a heading wraps. */
.cost-line li { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
.cost-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: left; }
.cost-line li { position: relative; padding-top: 64px; }
.cost-line li::before {
  content: ""; position: absolute; left: 1px; top: 1px; width: 10px; height: 10px; translate: -50% -50%; rotate: 45deg;
  background: var(--ink); border: 1px solid var(--ground);
}
.cost-line li::after { content: ""; position: absolute; left: 0; top: 8px; width: 1px; height: 40px; background: var(--ink); transform-origin: top; }
.cost-line h3 { margin: 0 0 14px; font: 500 clamp(30px, 2.8vw, 40px) / .9 var(--display); text-transform: uppercase; }
.cost-line p { margin: 0; max-width: 30ch; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.cost-line.is-pending:not(.is-in)::before { scale: 0 1; }
.cost-line.is-pending:not(.is-in) li::before { scale: 0; }
.cost-line.is-pending:not(.is-in) li::after { scale: 1 0; }
.cost-line.is-in::before { transition: scale 1s cubic-bezier(.45, 0, .2, 1) .1s; }
.cost-line.is-in li::before { transition: scale .3s var(--ease-out) calc(.5s + var(--n) * 140ms); }
.cost-line.is-in li::after { transition: scale .5s var(--ease-out) calc(.65s + var(--n) * 140ms); }
/* Each loss lands in turn: diamond and ping, leader, heading opening along its line, then its copy.
   Hovering a loss pings its diamond again. */
.cost-line .ping {
  position: absolute; left: 1px; top: 1px; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%;
  border: 1px solid var(--ink); opacity: 0; scale: .2; pointer-events: none;
}
.cost-line.is-in .ping { animation: cost-ping 1.1s var(--ease-out) calc(.55s + var(--n) * 140ms) 1 both; }
@keyframes cost-ping { 0% { opacity: .8; scale: .2; } 100% { opacity: 0; scale: 1; } }
/* Then the line keeps reading: a scan tick runs along it every 4.8s and each loss pings as it passes.
   Runs only while the band is on screen; reduced motion stops it with every other animation. */
.cost-line::after {
  content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 24px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(244, 245, 243, .18) 88%, var(--ink) 88.5%, var(--ink) 89.5%, transparent 90%) -180px 0 / 180px 100% no-repeat;
}
.band.is-live .cost-line.is-in::after { animation: cost-scan 4.8s linear 2.4s infinite; }
@keyframes cost-scan {
  0% { opacity: 1; background-position-x: -180px; }
  66% { opacity: 1; background-position-x: calc(100% + 160px); }
  67%, 100% { opacity: 0; background-position-x: calc(100% + 160px); }
}
.band.is-live .cost-line.is-in .ping {
  animation: cost-ping 1.1s var(--ease-out) calc(.55s + var(--n) * 140ms) 1 both,
             cost-ping-loop 4.8s var(--ease-out) calc(2.4s + var(--n) * .8s) infinite;
}
@keyframes cost-ping-loop { 0% { opacity: .7; scale: .2; } 23% { opacity: 0; scale: 1; } 100% { opacity: 0; scale: 1; } }
@media (hover: hover) {
  .cost-line.is-in li:hover .ping { animation: cost-ping 1.1s var(--ease-out) 2 both; }
}
.cost-line.is-pending:not(.is-in) h3 { clip-path: inset(0 100% 0 0); }
.cost-line.is-pending:not(.is-in) p { opacity: 0; translate: 0 .5em; }
.cost-line.is-in h3 { clip-path: inset(0); transition: clip-path .5s var(--ease-out) calc(.95s + var(--n) * 140ms); }
.cost-line.is-in p { transition: opacity .5s linear calc(1.2s + var(--n) * 140ms), translate .7s var(--ease-out) calc(1.2s + var(--n) * 140ms); }

/* Difference: why guarding falls short, against what Amahlo does instead */
.difference .display { max-width: 13ch; }
.answer-h { margin: 0 0 18px; font: 500 clamp(30px, 2.8vw, 40px) / .9 var(--display); text-transform: uppercase; }
.outcomes { margin: 28px 0 0; padding: 0; list-style: none; }
.outcomes li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--rule-soft); font-size: 1rem; line-height: 1.5; }
.outcomes li::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue); border: 2px solid var(--ground); box-shadow: 0 0 0 1.5px var(--ink);
}

/* Methodology: the Home sequence, here under its own band heading */
.method-band .method { margin-top: 0; }

@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  .register > li { grid-template-columns: 1fr; gap: 12px; }
  .register h3 { flex-wrap: wrap; gap: 10px 14px; }
  .cost-line { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .cost-line::before, .cost-line::after { display: none; }
  .cost-line li { padding-top: 48px; border-top: 2px solid var(--ink); }
  .cost-line li::before { top: -1px; }
  .cost-line li::after { top: 6px; height: 28px; }
}
@media (max-width: 479.98px) {
  .cost-line { grid-template-columns: 1fr; }
}

@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  /* The section view becomes a window onto the drawing; the register below names every strand in full. */
  .section-view .ap-h { width: auto; font-size: clamp(40px, 11.2vw, 76px); line-height: .86; }
  .section-view .ap-intro { width: auto; max-width: 34rem; margin-top: 20px; font-size: 1.0625rem; line-height: 1.5; }
  .section-view .section { --u: calc((100vw - 32px) / 1216); width: auto; height: auto; aspect-ratio: 1216 / 640; margin-top: 76px; }
  .section-view .section-map { inset: auto; left: calc(-112 / 1216 * 100%); top: calc(-146 / 640 * 100%); width: calc(1440 / 1216 * 100%); height: calc(900 / 640 * 100%); }
  .section-map .callouts, .section-map .ground-label, .section-map .tag-name { display: none; }
  .section-view .incidents {
    display: flex; flex-wrap: wrap; gap: 6px 16px; position: absolute; left: calc(473 / 1216 * 100%); right: 0; top: -10px; translate: 0 -100%;
    margin: 0; padding: 0; list-style: none;
    font: 400 11px / 1.4 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft);
  }
  .section-view .incidents li { white-space: nowrap; }
  .section-view .incidents li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; rotate: 45deg; background: var(--ink); }
  .section-map .tag { left: calc(var(--cx) / 14.4 * 1%); translate: -50% 0; font-size: 11px; }
  .section-view .ap-quote { margin-top: 32px; }
  .ap-quote p { max-width: none; font-size: 22px; line-height: 1.3; }
  .ap-quote footer { margin-top: 12px; font-size: 11px; }
  .section-view .legend { margin-top: 20px; font-size: 11px; flex-wrap: wrap; gap: 10px 18px; }
  .section-view .sheet-note { margin-top: 10px; font-size: 11px; }
  /* Heavy Blue holds in the window: the strands keep a real blue line and white edge however small the drawing. */
  .section-view .overprint .edge { stroke-width: 5px; }
  .section-view .overprint .link { stroke-width: 3px; }
}

/* ── Capabilities: the tray view (sheet 03), measured against its approved comp at 1440×900 ── */
.tray-view .cap-h {
  --x: 113; --y: 144; z-index: 2;
  font: 500 calc(54 * var(--u)) / .9 var(--display); text-transform: uppercase; letter-spacing: .016em; white-space: nowrap;
}
.tray-view .cap-intro {
  --x: 584; --y: 138; width: calc(740 / 14.4 * 1%); z-index: 2;
  font: 400 calc(22 * var(--u)) / 1.14 var(--sans); font-stretch: 86%; color: var(--ink-soft);
}
/* The figure is the tray box; everything inside is placed in comp pixels relative to it. */
/* The tray holds the comp's aspect, so labels stay on their objects at any sheet width; past 1440 it centres in its slot. */
.tray-view .tray { --x: 110; --y: 226; height: calc(602 / 9 * 1%); aspect-ratio: 1222 / 602; left: calc(721 / 14.4 * 1%); translate: -50% 0; }
.tray-map { position: absolute; inset: 0; }
.tray-map [style*="--x"] { position: absolute; left: calc((var(--x) - 110) / 12.22 * 1%); top: calc((var(--y) - 226) / 6.02 * 1%); margin: 0; }
.tray-photo, .tray-photo img, .tray-map .overprint-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.tray-photo img { object-fit: cover; filter: contrast(1.04); }
.bay-rules .rule { position: absolute; background: var(--ink); }
.bay-rules .v { top: 0; bottom: 0; width: max(1px, calc(1.5 * var(--u))); left: calc((var(--x) - 110) / 12.22 * 1%); }
.bay-rules .h { height: max(1px, calc(1.5 * var(--u))); top: calc((var(--y) - 226) / 6.02 * 1%); }
.bay-rules .h.l { left: 0; width: calc(370 / 12.22 * 1%); }
.bay-rules .h.r { right: 0; width: calc(372 / 12.22 * 1%); }
.tray-map :is(.bays, .kit) { margin: 0; padding: 0; list-style: none; }
.tray-map .bay-label, .tray-map .callout {
  font: 400 max(11px, calc(13.5 * var(--u))) / 1 var(--mono); color: var(--ink); text-transform: uppercase; white-space: nowrap;
  background: var(--ground); border: 1.5px solid var(--ink); padding: .42em .62em; z-index: 2;
}
.bay-label b { font-weight: 400; -webkit-text-stroke: .5px currentColor; margin-right: .35em; }
/* A callout is centred on its object; its leader rises from the box to a diamond on the object. */
.tray-map .callout { translate: -50% 0; }
.tray-map .callout.two { white-space: normal; width: min-content; text-align: center; line-height: 1.12; padding: .1em 0 0; background: none; border: 0; text-shadow: 0 0 .25em var(--ground), 0 0 .6em var(--ground); }
.tray-map .callout::before, .tray-map .callout::after, .bay-label.drop::before, .bay-label.drop::after { content: ""; position: absolute; left: 50%; }
.tray-map .callout::before { bottom: 100%; width: max(1px, calc(1.2 * var(--u))); height: calc((var(--y) - var(--my)) * var(--u) - 1.5px); translate: -50% 0; background: var(--ink); }
.tray-map .callout::after, .bay-label.drop::after {
  width: calc(8 * var(--u)); height: calc(8 * var(--u)); background: var(--ink); border: 1px solid var(--ground); rotate: 45deg;
}
.tray-map .callout::after { bottom: calc(100% + (var(--y) - var(--my)) * var(--u) - 1.5px); translate: -50% 50%; }
/* The Centre's label drops to the survey map. */
.bay-label.drop::before { top: 100%; width: max(1px, calc(1.2 * var(--u))); height: calc((var(--my) - var(--y) - 28) * var(--u)); translate: -50% 0; background: var(--ink); }
.bay-label.drop::after { top: calc(100% + (var(--my) - var(--y) - 28) * var(--u)); translate: -50% -50%; }
.tray-view .node-eye { left: calc(610 / 12.22 * 1%); top: calc(303 / 6.02 * 1%); width: calc(106 * var(--u)); height: calc(80 * var(--u)); }
.tray-map .overprint .edge { stroke-width: calc(11 * var(--u)); }
.tray-map .overprint .link { stroke-width: calc(7.5 * var(--u)); }
.tray-view .inventory-note { --x: 112; --y: 842; }
.tray-view .sheet-note { --x: 1168; --y: 842; }

/* Capabilities bands */
/* Centre: heading and its locator left, the description right (as the sheet's top band), then the engine's three lists across */
.centre-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(40px, 6vw, 112px); align-items: start; }
.centre-head .band-h { margin-bottom: 28px; max-width: 12ch; }
.centre-head .lede { margin: .4em 0 0; max-width: 46ch; font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.5; }
.centre-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); margin-top: clamp(56px, 6vw, 88px); }
.list-h { margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--rule); font: 400 12px / 1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.centre-lists .delivers { margin: 0; font-size: 1.0625rem; }
.centre-lists.is-pending:not(.is-in) > div { opacity: 0; translate: 0 .6em; }
.centre-lists.is-in > div { transition: opacity .5s linear calc(var(--n) * 100ms), translate .7s var(--ease-out) calc(var(--n) * 100ms); }

/* Locator: the tray's five bays as a sheet-index diagram, this domain's bay filled */
.locator { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 12px / 1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.locator svg { width: 68px; height: auto; flex: none; overflow: visible; }
.locator rect { fill: transparent; stroke: var(--ink); stroke-width: 18; transition: fill .4s var(--ease-out); }
.locator rect.on { fill: var(--ink); }
.domain-register.is-pending:not(.is-in) .locator rect.on { fill: transparent; }
.domain-register.is-in .locator rect.on { transition-delay: calc(.35s + var(--n) * 80ms); }

/* Around the Centre: the register, each domain named with its tag and placed on the tray by its locator */
.domain-head { display: grid; gap: 18px; align-content: start; }
.domain-register h3 { align-items: flex-start; }
.domain-register h3 .tag { margin-top: .1em; }
.domain-register .delivers li { position: relative; padding-left: 18px; }
.domain-register .delivers li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px; rotate: 45deg; background: var(--ink); }

@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  .centre-head { grid-template-columns: 1fr; }
  .centre-head .lede { margin-top: 0; }
  .centre-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
  .centre-lists { grid-template-columns: 1fr; }
}

/* The authored moment: the tray resolves, the bay rules draw, the labels open, the callouts reach their kit,
   the four strokes pen in from the outer bays and the eye opens on the Centre. */
.tray-view.is-drawing .tray-photo img { filter: contrast(1.05) brightness(.6) blur(3px); }
.tray-view.is-drawn .tray-photo img { filter: contrast(1.04); transition: filter 1.2s var(--ease-out); }
.tray-view.is-drawing .bay-rules .v { scale: 1 0; transform-origin: top; }
.tray-view.is-drawing .bay-rules .h.l { scale: 0 1; transform-origin: right; }
.tray-view.is-drawing .bay-rules .h.r { scale: 0 1; transform-origin: left; }
.tray-view.is-drawn .bay-rules .rule { scale: 1; transition: scale .7s var(--ease-stroke) calc(.1s + var(--i) * 80ms); }
.tray-view.is-drawing .bay-label { clip-path: inset(0 100% -200% 0); }
.tray-view.is-drawn .bay-label { clip-path: inset(0 0 -200% 0); transition: clip-path .4s var(--ease-out) calc(.5s + var(--i) * 90ms); }
.tray-view.is-drawing .callout { opacity: 0; }
.tray-view.is-drawing .callout::before { scale: 1 0; }
.tray-view.is-drawing .callout::after { scale: 0; }
.tray-view .callout::before { transform-origin: bottom; }
.tray-view.is-drawn .callout { opacity: 1; transition: opacity .3s linear calc(.9s + var(--i) * 45ms); }
.tray-view.is-drawn .callout::before { scale: 1; transition: scale .35s var(--ease-out) calc(1s + var(--i) * 45ms); }
.tray-view.is-drawn .callout::after { scale: 1; transition: scale .25s var(--ease-out) calc(1.3s + var(--i) * 45ms); }
.tray-view.is-drawing .tray-map .overprint path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tray-view.is-drawn .tray-map .overprint path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease-out) calc(1.7s + var(--i) * 90ms); }
.tray-view.is-drawing .node-eye { scale: .7; opacity: 0; }
.tray-view.is-drawn .node-eye { scale: 1; opacity: 1; transition: scale .6s var(--ease-out) 2.35s, opacity .6s var(--ease-out) 2.35s; }

/* The bay index under the window; only the column layout needs it. */
.tray-view .bay-index { display: none; }
@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  /* The tray becomes a scaled window: bays keep their numbers, the index beneath names them, the bands below give each in full. */
  .tray-view .cap-h { white-space: normal; font-size: clamp(40px, 11.2vw, 76px); line-height: .86; letter-spacing: -.005em; }
  .tray-view .cap-intro { width: auto; max-width: 34rem; margin-top: 20px; font-size: 1.0625rem; line-height: 1.5; }
  .tray-view .tray { --u: calc((100vw - 32px) / 1222); width: auto; height: auto; aspect-ratio: 1222 / 602; margin: 40px 0 0; left: auto; translate: none; }
  .tray-map .kit, .tray-map .bay-name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tray-map .bay-label { font-size: 11px; padding: .35em .45em; }
  .bay-label b { margin-right: 0; }
  .tray-map .bay-label.drop::before { height: calc((var(--my) - var(--y)) * var(--u) - 20px); }
  .tray-map .bay-label.drop::after { width: 6px; height: 6px; top: calc(100% + (var(--my) - var(--y)) * var(--u) - 20px); }
  .tray-view .overprint .edge { stroke-width: 5px; }
  .tray-view .overprint .link { stroke-width: 3px; }
  .tray-view .bay-index {
    display: grid; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none;
    font: 400 11px / 1.4 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
  }
  .bay-index b { font-weight: 400; color: var(--ink); margin-right: .5em; }
  .tray-view :is(.inventory-note, .sheet-note) { margin-top: 16px; font-size: 11px; }
  .tray-view .sheet-note { margin-top: 8px; }
}

/* ── About: Sheet 04, the national sheet. Positions are comp pixels on the shared 1440×900 sheet. ── */

.record-title {
  --x: 118; --y: 236; z-index: 2;
  font: 500 min(96px, calc(85 * var(--u))) / 1 var(--display); text-transform: uppercase; letter-spacing: 0; white-space: nowrap; /* the 96px ceiling holds on large screens */
}

/* The key: one row per engagement, keyed to the map */
.key { --x: 118; --y: 348; width: calc(402 / 14.4 * 1%); z-index: 2; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-soft); }
.key li { border-top: 1px solid var(--rule-soft); }
.key a {
  position: relative; display: grid; grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u));
  height: calc(41 * var(--u)); text-decoration: none;
}
.key .n { font: 400 calc(19 * var(--u)) / 1 var(--mono); color: var(--ink); }
.key .c { font: 500 calc(31 * var(--u)) / 1 var(--display); text-transform: uppercase; padding-top: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key .o { font: 400 max(10px, calc(12 * var(--u))) / 1 var(--mono); letter-spacing: 0; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.key :is(.n, .c, .o) { transition: color .25s var(--ease-out); }
.key.is-keyed a:not(.is-active) :is(.n, .c, .o) { color: var(--grey); }
.key-cta { --x: 118; --y: 768; z-index: 2; }

/* The atlas: relief plate, graticule, pins and region callouts. Positions are comp pixels inside the figure box (563, 40, 810 × 696). */
/* The box keeps the plate's own proportions at every size, so pins stay on their true locations; it hangs from the frame's right edge. */
.about-sheet .atlas { --x: 563; --y: 45; left: calc(1373 / 14.4 * 1% - 810 * var(--u)); width: calc(810 * var(--u)); height: calc(696 * var(--u)); overflow: hidden; }
.atlas picture, .atlas img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%);
}
.atlas .p, .atlas .gl { position: absolute; left: calc((var(--x) - 563) / 8.10 * 1%); top: calc((var(--y) - 40) / 6.96 * 1%); }
.graticule { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.graticule .g { position: absolute; background: rgba(244, 245, 243, .2); }
.graticule .v { width: 1px; top: 0; bottom: 0; left: calc((var(--x) - 563) / 8.10 * 1%); }
.graticule .h { height: 1px; left: 6%; right: 0; top: calc((var(--y) - 40) / 6.96 * 1%); }
.graticule .gl { font: 400 max(9px, calc(10 * var(--u))) / 1 var(--mono); letter-spacing: .04em; color: var(--ink-soft); background: rgba(11, 11, 12, .72); padding: .3em .45em; white-space: nowrap; transform: translate(4px, -100%); }
.graticule .gl.r { transform: translate(-100%, 5px); }

.pin {
  width: calc(9 * var(--u)); height: calc(9 * var(--u)); background: var(--ink); border: 1px solid var(--ground);
  transform: translate(-50%, -50%) rotate(45deg); transition: background-color .25s var(--ease-out), scale .25s var(--ease-out);
  z-index: 1;
}
.pin.is-active { scale: 1.75; background: var(--blue); border-color: var(--ink); z-index: 2; }

.regions { margin: 0; padding: 0; list-style: none; }
.region {
  display: flex; align-items: center; gap: .3em; height: calc(32 * var(--u)); padding: .1em .36em 0 0; z-index: 3; white-space: nowrap;
  font: 500 calc(26 * var(--u)) / 1 var(--display); text-transform: uppercase; color: var(--ink);
  background: var(--ground); border: 1.5px solid var(--ink); transition: background-color .25s var(--ease-out);
}
.region b {
  display: flex; align-items: center; align-self: stretch; margin: -.1em 0 0; padding: 0 .5em;
  background: var(--ink); color: var(--ground); font: 400 calc(13 * var(--u)) / 1 var(--mono); letter-spacing: .02em;
  transition: color .25s var(--ease-out);
}
.region.stack { flex-direction: column; align-items: flex-start; justify-content: center; gap: .14em; height: auto; padding: .42em .5em .3em; }
.region.stack b { align-self: auto; margin: 0; padding: 0; background: none; color: var(--ink); font-size: calc(12 * var(--u)); }
.region.is-active b { background: var(--ground); color: var(--ink); box-shadow: inset -1.5px 0 0 var(--ink); }
.region.stack.is-active b { background: var(--ink); color: var(--ground); box-shadow: none; padding: .15em .35em .05em; margin-left: -.35em; }

.atlas .leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.atlas .leaders path { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.atlas.is-drawing .leaders path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.atlas.is-drawing .pin, .atlas.is-drawing .region { opacity: 0; }
.atlas.is-drawn .leaders path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-out) calc(.45s + var(--i) * 90ms); }
.atlas.is-drawn :is(.pin, .region) { opacity: 1; transition: opacity .4s var(--ease-out) .2s, background-color .25s var(--ease-out); }

.about-scale { --x: 581; --y: 784; z-index: 2; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); width: calc(125 * var(--u)); }
.about-scale .bar { width: 100%; height: calc(26 * var(--u)); }
.about-scale .bar i { height: calc(8 * var(--u)); border: 0; }
.about-scale .bar i:nth-child(1), .about-scale .bar i:nth-child(3) { background: var(--ink); }
.about-scale .bar i:nth-child(2) { background: var(--rule-soft); }
.atlas-key { --x: 1085; --y: 784; z-index: 2; width: calc(270 / 14.4 * 1%); letter-spacing: 0; background: var(--ground); border: 1px solid var(--rule); }
.atlas-key ul { display: flex; gap: calc(22 * var(--u)); margin: 0; padding: calc(7 * var(--u)) calc(12 * var(--u)); list-style: none; border-bottom: 1px solid var(--rule); }
.atlas-key li { display: flex; align-items: center; gap: .5em; }
.atlas-key svg { width: 1.05em; height: 1.05em; }
.atlas-key p { margin: 0; padding: calc(7 * var(--u)) calc(12 * var(--u)); }

/* ── About bands ── */
.ledger { width: 100%; border-collapse: collapse; }
.ledger thead th { padding: 0 0 14px; font: 400 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-align: left; }
.ledger tbody tr { border-top: 1px solid var(--rule-soft); scroll-margin-top: 24px; }
.ledger tbody tr:last-child { border-bottom: 1px solid var(--rule-soft); }
.ledger :is(td, th) { padding: 22px clamp(16px, 2vw, 32px) 22px 0; vertical-align: top; }
.ledger tbody th { width: 28%; font: 500 clamp(30px, 2.8vw, 40px) / .9 var(--display); text-transform: uppercase; text-align: left; }
.ledger td { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.ledger td:nth-of-type(2) { width: 30%; }
.ledger td:last-child { color: var(--ink); padding-right: 0; }
.ledger .n { width: 56px; padding-top: 30px; font: 400 13px/1 var(--mono); color: var(--ink); }
.ledger tr:target { background: rgba(244, 245, 243, .06); }
.ledger tr:target .n { color: var(--ink); }
.ledger.is-pending:not(.is-in) tbody tr { opacity: 0; translate: 0 .6em; }
.ledger.is-in tbody tr { transition: opacity .5s linear calc(var(--n) * 70ms), translate .7s var(--ease-out) calc(var(--n) * 70ms); }

.origin-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 112px); align-items: end; }
.origin .answer-text { max-width: 34ch; font-size: clamp(1.45rem, 2.1vw, 2rem); }
.origin .lede { max-width: 58ch; }
.credentials { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.credentials li { padding: 16px 0 14px; border-top: 1px solid var(--rule); font: 400 clamp(24px, 2.2vw, 32px) / 1 var(--display); text-transform: uppercase; }
.credentials.is-pending:not(.is-in) li { opacity: 0; translate: 0 .35em; }
.credentials.is-in li { transition: opacity .5s linear calc(.2s + var(--n) * 90ms), translate .7s var(--ease-out) calc(.2s + var(--n) * 90ms); }

.leadership-note { margin: 0 0 clamp(40px, 5vw, 72px); max-width: 52ch; }
.files { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-soft); }
.file { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); padding: 32px 0 36px; border-top: 1px solid var(--rule-soft); }
.file h3 { margin: 0; font: 500 clamp(30px, 2.8vw, 40px) / .9 var(--display); text-transform: uppercase; }
.redact { display: block; width: min(100%, 14em); height: 1.1em; margin-top: .25em; background: var(--ink); }
.file dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px 24px; margin: 4px 0 0; }
.file dt { padding-top: .35em; font: 400 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.file dd { margin: 0; max-width: 68ch; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.file dd:last-of-type { color: var(--ink); }

/* About grounds alternate with plain bands: the ledger and leadership stay plain (the breathing room); the origin's
   globe enters off the right edge; the close carries the relief under the last word. */
.origin [data-glyph="globe"] .glyph-canvas {
  -webkit-mask: linear-gradient(90deg, transparent 38%, #000 70%);
          mask: linear-gradient(90deg, transparent 38%, #000 70%);
}

/* ── About: phone, tablet and portrait ── */
@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  .about-sheet > .at:not(.atlas) { margin-inline: 10px; }
  .record-title { font-size: clamp(52px, 15vw, 96px); line-height: .9; }
  .key { width: auto; margin-top: 28px; }
  .key a { --u: 1px; height: auto; min-height: 48px; padding: 6px 0; grid-template-columns: 34px minmax(0, 1fr); row-gap: 2px; }
  .key .n { font-size: 14px; grid-row: span 2; }
  .key .c { font-size: 26px; white-space: normal; }
  .key .o { font-size: 11.5px; grid-column: 2; }
  .about-sheet .key-cta { margin-top: 28px; font-size: 13px; }
  .origin > .band-bg { top: auto; height: 300px; } /* the globe centres in this box: behind the credentials, clear of the body copy */
  .about-sheet .key { margin-top: 28px; }
  .about-sheet .atlas { --u: calc((100vw - 34px) / 810); left: auto; width: auto; height: auto; aspect-ratio: 810 / 696; margin-top: 48px; }
  .region { font-size: max(15px, calc(26 * var(--u))); }
  .region b { font-size: max(11px, calc(13 * var(--u))); }
  .region.stack b { font-size: max(11px, calc(12 * var(--u))); }
  .region[data-region="wcape"] { top: calc((636 - 40) / 6.96 * 1%); }
  .region[data-region="boksburg"] { top: calc((310 - 40) / 6.96 * 1%); left: calc((880 - 563) / 8.10 * 1%); }
  .graticule .gl { display: none; }
  .atlas picture, .atlas img { -webkit-mask-image: none; mask-image: none; }
  .region:is([data-region="ethekwini"], [data-region="national"]) { left: auto; right: 4px; }
  .region.stack { padding: .36em .45em .26em; }
  .about-scale { display: none; }
  .atlas-key { width: auto; margin-top: 24px; font-size: 11px; }
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tr, .ledger :is(td, th) { display: block; width: auto; }
  .ledger tr { padding: 20px 0; }
  .ledger :is(td, th), .ledger tbody th, .ledger td:nth-of-type(2), .ledger .n { width: auto; padding: 0; }
  .ledger .n { padding: 0 0 8px; }
  .ledger tbody th { margin-bottom: 10px; }
  .ledger td + td { margin-top: 8px; }
  .origin-grid, .file { grid-template-columns: 1fr; }
  .file dl { grid-template-columns: 1fr; gap: 6px; }
  .file dd + dt { margin-top: 10px; }
}


/* ── Contact: Sheet 05, the working sheet (Privacy's reading sheet shares its flowing chrome). Comp pixels on the shared 1440×900 sheet; the form keeps usable minimum sizes,
   so this sheet flows (and grows past one viewport on short laptops) instead of pinning each region absolutely. ── */
:is(.contact-sheet, .reading-sheet) {
  height: auto; min-height: var(--hero-h); display: grid; align-items: start;
  grid-template-columns: calc(118 / 14.4 * 1%) calc(484 / 14.4 * 1%) minmax(0, 1fr) calc(633 / 14.4 * 1%) calc(94 / 14.4 * 1%);
  padding: calc(178 * var(--u)) 0 calc(56 * var(--u));
}
:is(.contact-sheet, .reading-sheet) .frame::before { top: calc(20 * var(--u)); bottom: calc(22 * var(--u)); }
:is(.contact-sheet, .reading-sheet) .frame .b { top: auto; bottom: calc(11 * var(--u)); transform: translate(-50%, 50%); }
:is(.contact-sheet, .reading-sheet) .site-nav { top: calc(49 * var(--u)); height: calc(68 * var(--u)); }
.contact-lead { grid-column: 2; position: relative; z-index: 2; }
.briefing { grid-column: 4; position: relative; z-index: 2; scroll-margin-top: 24px; }
.briefing:focus { outline: none; }

.contact-title { margin: 0; font: 500 min(96px, calc(83 * var(--u))) / .9 var(--display); text-transform: uppercase; white-space: nowrap; }
.contact-statement { margin: calc(12 * var(--u)) 0 0; font: 400 calc(24 * var(--u)) / 1.3 var(--sans); font-stretch: 86%; }

/* Office map: the Midrand plate with its graticule, the one blue pin and its callout. Positions are % of the 4:3 plate. */
.office-map { position: relative; width: min(100%, calc(500 * var(--u))); margin: calc(36 * var(--u)) 0 0; aspect-ratio: 4 / 3; border: 1px solid var(--rule); }
.office-map picture, .office-map img { width: 100%; height: 100%; object-fit: cover; }
.loc-grid { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.loc-grid .g { position: absolute; background: rgba(244, 245, 243, .24); }
.loc-grid .v { top: 0; bottom: 0; width: 1px; left: calc(var(--x) * 1%); }
.loc-grid .h { left: 0; right: 0; height: 1px; top: calc(var(--y) * 1%); }
.loc-grid .gl {
  position: absolute; padding: .32em .45em .26em; white-space: nowrap;
  font: 400 max(10px, calc(11 * var(--u))) / 1 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); background: rgba(11, 11, 12, .8);
}
.loc-grid .t { top: calc(9 * var(--u)); left: calc(var(--x) * 1%); transform: translateX(-50%); }
.loc-grid .r { right: calc(9 * var(--u)); top: calc(var(--y) * 1%); transform: translateY(-50%); }
.loc-grid .bl { left: calc(9 * var(--u)); bottom: calc(9 * var(--u)); }
.loc-leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.loc-leader path { fill: none; stroke: var(--ink); stroke-width: .9; } /* the 4:3 viewBox scales uniformly, so the dash maths in pathLength holds */
.loc-leader .halo { stroke: var(--ground); stroke-width: 3.4; stroke-opacity: .85; } /* keeps the leader legible over the white street fabric */
.office-map .loc-pin { position: absolute; left: 52.22%; top: 43.68%; }
.loc-label {
  position: absolute; left: 58.7%; top: 29%; z-index: 3; margin: 0; transform: translateY(-100%); white-space: nowrap;
  padding: .5em .7em .42em; font: 400 max(11px, calc(15 * var(--u))) / 1 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  background: var(--ground); border: 1px solid var(--ink);
}
.loc-label span { display: block; margin-top: .45em; font-size: .78em; color: var(--ink-soft); } /* the pin's own coordinate, as About's atlas labels its pins */
@media (prefers-reduced-motion: no-preference) {
  html.js .office-map:not(.is-drawn) .loc-leader path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.js .office-map:not(.is-drawn) .loc-pin { scale: 0; }
  html.js .office-map:not(.is-drawn) .loc-label { clip-path: inset(0 100% 0 0); }
  .office-map.is-drawn .loc-leader path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-out) .55s; }
  .office-map.is-drawn .loc-pin { transition: scale .35s var(--ease-out) .3s; }
  .office-map.is-drawn .loc-label { clip-path: inset(0); transition: clip-path .45s var(--ease-out) 1s; }
}

.contact-rows { width: min(100%, calc(500 * var(--u))); margin: calc(26 * var(--u)) 0 0; }
.contact-rows div { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) 0; }
.contact-rows div + div { border-top: 1px solid var(--rule-soft); }
.contact-rows dt { flex: none; width: calc(78 * var(--u)); font: 400 max(12px, calc(14.5 * var(--u))) / 1 var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.contact-rows dd { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0; font: 400 max(15px, calc(22.5 * var(--u))) / 1.2 var(--sans); font-stretch: 78%; white-space: nowrap; }
.contact-rows dd::before { content: ""; flex: none; width: calc(30 * var(--u)); height: 1px; background: var(--rule); }
.contact-rows a { text-decoration: none; }
.contact-rows a:hover { text-decoration: underline; }

/* The form panel: one hairline rectangle tagged on its border, square fields, the blue send. */
.briefing { border: 1px solid var(--rule); padding: calc(42 * var(--u)) calc(34 * var(--u)) calc(42 * var(--u)); background: var(--ground); }
.form-tag {
  position: absolute; left: -1px; top: 0; margin: 0; transform: translateY(-100%); padding: .45em .6em .35em;
  font: 400 max(10px, calc(12 * var(--u))) / 1 var(--mono); letter-spacing: .03em; text-transform: uppercase;
  background: var(--ground); border: 1px solid var(--rule); border-bottom: 0;
}
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24 * var(--u)) calc(28 * var(--u)); }
.field { min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: calc(10 * var(--u)); font: 400 max(12px, calc(14.5 * var(--u))) / 1.1 var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.field .opt { color: var(--grey); }
.field :is(input, select, textarea) {
  display: block; width: 100%; height: max(40px, calc(44 * var(--u))); margin: 0; padding: 0 .8em;
  font: 400 max(16px, calc(16 * var(--u))) / 1.3 var(--sans); color: var(--ink); background: var(--ground);
  border: 1px solid var(--rule); border-radius: 0; transition: border-color .2s var(--ease-out);
}
.field textarea { height: max(132px, calc(178 * var(--u))); padding: .65em .8em; resize: vertical; line-height: 1.5; }
.field :is(input, select, textarea):hover { border-color: var(--ink); }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.6em; font-family: var(--mono); font-size: max(14px, calc(15 * var(--u))); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; }
.select select:invalid { color: var(--ink-soft); }
.select option { background: var(--ground); color: var(--ink); text-transform: none; }
.select::after {
  content: ""; position: absolute; right: 1em; top: 50%; width: .5em; height: .5em; margin-top: -.35em; pointer-events: none;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); font-size: max(14px, calc(15 * var(--u)));
}
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }
.field-error { margin: calc(7 * var(--u)) 0 0; font: 400 max(12px, calc(13 * var(--u))) / 1.3 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(24 * var(--u)) calc(40 * var(--u)); margin-top: calc(26 * var(--u)); }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(12 * var(--u)); align-items: start; }
.consent input {
  appearance: none; -webkit-appearance: none; width: max(20px, calc(20 * var(--u))); height: max(20px, calc(20 * var(--u))); margin: .1em 0 0;
  background: var(--ground); border: 1px solid var(--rule); border-radius: 0; cursor: pointer;
}
.consent input:hover { border-color: var(--ink); }
.consent input:checked { background: var(--ink); box-shadow: inset 0 0 0 3px var(--ground); border-color: var(--ink); }
.consent input:focus-visible { outline-offset: 2px; }
.consent input[aria-invalid="true"] { border: 2px solid var(--ink); }
.consent label { font: 400 max(13px, calc(15 * var(--u))) / 1.45 var(--sans); font-stretch: 86%; color: var(--ink-soft); cursor: pointer; }
.consent .field-error { grid-column: 2; }
.send { font-size: max(13px, calc(15.5 * var(--u))); min-height: max(40px, calc(43 * var(--u))); padding-inline: 1.3em; }
.send[disabled] { cursor: progress; background: var(--blue); opacity: .75; }
.form-status { margin: calc(14 * var(--u)) 0 0; min-height: 1em; font: 400 max(12px, calc(13 * var(--u))) / 1.3 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
.form-status:empty { margin: 0; min-height: 0; }

/* Sent and failed: the same panel, shown by the script or, without it, by the address the server redirects to. */
.form-result { display: none; }
.form-result:focus { outline: none; }
.result-h { margin: 0; font: 500 calc(56 * var(--u)) / .9 var(--display); text-transform: uppercase; }
.form-result p { margin: calc(20 * var(--u)) 0 0; max-width: 36ch; font: 400 max(16px, calc(19 * var(--u))) / 1.5 var(--sans); color: var(--ink-soft); }
.form-result a { color: var(--ink); }
.briefing.is-sent #sent, .briefing.is-failed #failed, .form-result:target { display: block; }
.briefing:is(.is-sent, :has(#sent:target)) .briefing-form { display: none; }
.briefing:is(.is-failed, :has(#failed:target)) .form-result { margin-bottom: calc(28 * var(--u)); padding-bottom: calc(24 * var(--u)); border-bottom: 1px solid var(--rule-soft); }
.briefing:is(.is-failed, :has(#failed:target)) #failed { order: -1; }
.briefing:is(.is-failed, :has(#failed:target)) { display: flex; flex-direction: column; }

/* ── Contact: phone, tablet and portrait ── */
@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  :is(.contact-sheet, .reading-sheet) { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 16px 16px 40px; }
  :is(.contact-sheet, .reading-sheet) .site-nav { top: auto; height: auto; }
  .contact-lead { display: contents; }
  .contact-sheet :is(.contact-title, .contact-statement, .briefing, .office-map, .contact-rows) { margin-inline: 10px; }
  .contact-title { order: 1; font-size: clamp(46px, 12.5vw, 84px); white-space: normal; line-height: .9; }
  .contact-statement { order: 2; margin-top: 12px; font-size: 19px; }
  .briefing { order: 3; margin-top: 52px; padding: 32px 18px 24px; }
  .office-map { order: 4; width: auto; margin-top: 48px; }
  .contact-rows { order: 5; width: auto; margin-top: 24px; }
  .contact-rows div { align-items: baseline; padding: 14px 0; }
  .contact-rows dt { width: 92px; font-size: 12px; }
  .contact-rows dd { font-size: 16px; white-space: normal; }
  .contact-rows dd::before { display: none; }
  .loc-label { left: auto; right: 3%; font-size: 11px; } /* right-aligned so it never runs past the plate; the leader still meets its lower edge */
  .result-h { font-size: 44px; }
}
@media (max-width: 639.98px) {
  .fields { grid-template-columns: 1fr; gap: 20px; }
  .form-foot { grid-template-columns: 1fr; }
  .field :is(input, select, textarea) { height: 48px; }
  .field textarea { height: 160px; }
  .send { justify-content: center; min-height: 48px; }
}

/* ── Privacy: Sheet 06, the reading sheet. Title block left, clause index right; one plain reading band below. ── */
.reading-lead { grid-column: 2; position: relative; z-index: 2; }
.sheet-title { margin: 0; font: 500 min(96px, calc(83 * var(--u))) / .9 var(--display); text-transform: uppercase; text-wrap: balance; }
.reading-intro { margin: calc(22 * var(--u)) 0 0; max-width: 34ch; font: 400 calc(20 * var(--u)) / 1.4 var(--sans); font-stretch: 86%; color: var(--ink-soft); }
.updated { margin: calc(30 * var(--u)) 0 0; font: 400 max(12px, calc(13 * var(--u))) / 1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--grey); }

.clause-index { grid-column: 4; position: relative; z-index: 2; padding-top: calc(10 * var(--u)); }
.clause-index ol { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-soft); }
.clause-index li { border-top: 1px solid var(--rule-soft); }
.clause-index a {
  display: grid; grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr); align-items: center;
  min-height: max(40px, calc(48 * var(--u))); text-decoration: none;
}
.clause-index .n { font: 400 max(12px, calc(15 * var(--u))) / 1 var(--mono); }
.clause-index .c { padding-top: .1em; font: 400 max(20px, calc(30 * var(--u))) / 1 var(--display); text-transform: uppercase; }
.clause-index :is(.n, .c) { transition: color .25s var(--ease-out); }
@media (hover: hover) {
  .clause-index ol:hover a:not(:hover) :is(.n, .c) { color: var(--grey); }
}

/* The clauses: a register, title left and text right. The longest reading band on the page, so it stays plain. */
.clauses { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-soft); }
.clause {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px);
  padding: 32px 0 36px; border-top: 1px solid var(--rule-soft); scroll-margin-top: 24px;
  transition: background-color .6s var(--ease-out);
}
.clause:target { background: rgba(244, 245, 243, .06); }
.clause h2 { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; margin: 0; font: 500 clamp(30px, 2.8vw, 40px) / .9 var(--display); text-transform: uppercase; text-wrap: balance; }
.clause h2 .n { font: 400 13px/1 var(--mono); letter-spacing: .02em; } /* hung in its own column, as in the index, never stacked above the heading */
.band.policy { padding-top: clamp(48px, 5vw, 72px); } /* no band heading to clear */
.clause-text { max-width: 30em; } /* about 60–72 characters a line */
.clause-text p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }
.clause-text p + p { margin-top: 1em; }
.clause-text a { color: var(--ink); }
.clause-text a[href^="tel:"] { white-space: nowrap; }

/* ── Privacy: phone, tablet and portrait ── */
@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  .reading-sheet :is(.reading-lead, .clause-index) { align-self: stretch; margin-inline: 10px; }
  .band.policy { padding-top: 40px; }
  .sheet-title { font-size: clamp(46px, 12.5vw, 84px); }
  .reading-intro { margin-top: 16px; font-size: 18px; }
  .updated { margin-top: 20px; font-size: 12px; }
  .clause-index { margin-top: 40px; padding-top: 0; }
  .clause-index a { grid-template-columns: 40px minmax(0, 1fr); min-height: 48px; padding: 8px 0; }
  .clause-index .n { font-size: 13px; }
  .clause-index .c { font-size: 24px; }
  .clause { grid-template-columns: 1fr; gap: 14px; padding: 26px 0 30px; }
  .clause h2 { grid-template-columns: 40px minmax(0, 1fr); }
}

/* ── 404: Sheet 00, the blank sheet. Comp-free positions on the shared 1440×900 sheet; the right half stays empty. ── */
.lost-title { --x: 118; --y: 288; z-index: 2; font: 500 min(96px, calc(96 * var(--u))) / .9 var(--display); text-transform: uppercase; white-space: nowrap; }
.lost-line { --x: 118; --y: 404; z-index: 2; font: 400 calc(24 * var(--u)) / 1.3 var(--sans); }
.lost-links { --x: 118; --y: 478; z-index: 2; }
.lost-links ul { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(28 * var(--u)); margin: 0; padding: 0; list-style: none; }
.lost-links a {
  position: relative; display: inline-block; padding: .6em 0; text-decoration: none;
  font: 400 max(13px, calc(14 * var(--u))) / 1 var(--mono); letter-spacing: .02em; text-transform: uppercase;
}
.lost-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .2em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.lost-links a:hover::after { transform: none; }
.lost-cta { --x: 118; --y: 548; z-index: 2; }

/* An empty search reticle: four corner ticks around nothing, with its bookkeeping note. */
.reticle {
  --x: 1010; --y: 452; width: calc(96 * var(--u)); height: calc(96 * var(--u)); translate: -50% -50%; opacity: .55;
  --t: calc(18 * var(--u));
  background:
    linear-gradient(var(--ink), var(--ink)) left top / var(--t) 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left top / 1px var(--t) no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / var(--t) 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 1px var(--t) no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / var(--t) 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 1px var(--t) no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / var(--t) 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 1px var(--t) no-repeat;
}
.lost-note { --x: 1076; --y: 452; translate: 0 -50%; color: var(--grey); white-space: nowrap; }

/* ── 404: phone, tablet and portrait ── */
@media (max-width: 1023.98px), (orientation: portrait) and (max-width: 1279.98px) {
  .blank-sheet > .at { margin-inline: 10px; }
  .lost-title { font-size: clamp(46px, 13vw, 96px); white-space: normal; }
  .blank-sheet .lost-line { margin-top: 16px; font-size: 19px; }
  .blank-sheet .lost-links { margin-top: 28px; }
  .lost-links ul { gap: 0 22px; }
  .lost-links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0; }
  .blank-sheet .lost-cta { margin-top: 24px; align-self: flex-start; font-size: 13px; }
  .reticle { display: none; }
  /* The sheet fills the screen above the footer, so the footer's open edge sits on the bottom of the page. */
  .page-blank { display: flex; flex-direction: column; min-height: calc(100svh - var(--sheet-gap)); }
  .page-blank main { display: flex; flex-direction: column; flex: 1; }
  .blank-sheet { flex: 1; }
  .blank-sheet .lost-note { translate: none; margin-top: 56px; font-size: 11px; }
}

/* ── Menu sheet (column layout): the links open from the left as their own sheet ──────────────── */
/* The toggle sits in the nav panel in the links' own mono caps, with a three-rule mark that crosses when open. Script builds it. */
.menu-toggle {
  display: none; align-items: center; gap: .7em; margin-left: auto; padding: .6em 0; position: relative;
  background: none; border: 0; color: var(--ink); font: 400 13px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; cursor: pointer;
}
.menu-toggle svg { width: 16px; height: 16px; overflow: visible; }
.menu-toggle path { stroke: currentColor; stroke-width: 1.5; transition: transform .35s var(--ease-out), opacity .2s linear; transform-origin: 8px 8px; }
.menu-toggle[aria-expanded="true"] .m1 { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .m2 { opacity: 0; }
.menu-toggle[aria-expanded="true"] .m3 { transform: translateY(-6px) rotate(-45deg); }

.menu-veil { position: fixed; inset: 0; z-index: 38; background: rgba(11, 11, 12, .6); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out); }
.menu-sheet {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(100% - 48px, 420px); display: flex; flex-direction: column; gap: 0;
  padding: 16px 24px 28px; overflow: hidden auto; background: var(--ground); border-right: 1px solid var(--rule);
  translate: -100% 0; visibility: hidden; transition: translate .5s var(--ease-out), visibility 0s linear .5s;
}
.menu-sheet::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--rule-soft); pointer-events: none; } /* the sheet's own neatline */
.menu-sheet > :not(.band-fx, .menu-ground) { position: relative; z-index: 1; }
.menu-sheet .band-fx { position: absolute; inset: 0; z-index: 0; } /* contacts turn up behind the links, as they do behind every band */
/* The ground: the Outcomes terrain as a glyph mosaic with the plate grid over it, fading out at the top and bottom edges. */
.menu-ground { --u: 1px; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.menu-ground .glyph-canvas, .menu-ground::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .4) 14%, rgba(0, 0, 0, .5) 55%, #000 72%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .4) 14%, rgba(0, 0, 0, .5) 55%, #000 72%, #000 88%, transparent 100%);
} /* lighter under the register, full under the blank lower sheet */
.menu-ground::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--rule-soft) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) 0 0 / 25% 100%;
}
.menu-ground .glyph-canvas { opacity: 0; }
.menu-sheet.is-open .menu-ground .glyph-canvas { opacity: 1; transition: opacity 1.4s var(--ease-out) .3s; }
/* Keyed out of the ground as the Outcomes heading is: a ground-coloured stroke under the fill, then a soft dark halo. */
.menu-links a, .menu-head, .menu-privacy { -webkit-text-stroke: .1em var(--ground); paint-order: stroke fill; text-shadow: 0 0 .3em rgba(11, 11, 12, .9), 0 0 .8em rgba(11, 11, 12, .7); }
.menu-head, .menu-privacy { -webkit-text-stroke: .5px var(--ground); }
.menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin: 0 0 32px; }
.menu-ref { margin: 0; font: 400 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }
.menu-sheet .menu-toggle { display: inline-flex; margin: 0; }
.menu-links { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-soft); }
.menu-links li { border-top: 1px solid var(--rule-soft); }
.menu-links a {
  display: flex; align-items: center; min-height: 64px; font: 400 clamp(34px, 9vw, 44px) / 1 var(--display); text-transform: uppercase; text-decoration: none;
  padding-top: .08em;
}
.menu-links a[aria-current] { color: var(--ink); }
.menu-links a[aria-current]::after { content: ""; width: 9px; height: 9px; margin-left: 14px; background: var(--ink); rotate: 45deg; }
.menu-sheet .btn { align-self: flex-start; margin-top: 28px; font-size: 13px; }
.menu-privacy { margin-top: auto; padding-top: 32px; font: 400 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); }
/* Open: the sheet slides in from the left edge, then the rows land one after another, as a register reveals. */
.menu-sheet.is-open { translate: 0 0; visibility: visible; transition: translate .5s var(--ease-out); }
.menu-veil.is-open { opacity: 1; pointer-events: auto; }
.menu-sheet :is(.menu-links li, .btn, .menu-privacy) { opacity: 0; translate: -.4em 0; transition: opacity .3s linear, translate .5s var(--ease-out); }
.menu-sheet.is-open :is(.menu-links li, .btn, .menu-privacy) { opacity: 1; translate: 0 0; transition-delay: calc(.15s + var(--n, 0) * 60ms); }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .menu-sheet, .menu-veil, .menu-sheet :is(.menu-links li, .btn, .menu-privacy), .menu-toggle path, .menu-ground .glyph-canvas { transition: none; }
}

/* ── Hardening: coarse pointers, forced colours, print ─────────────────── */
/* Touch targets: on coarse pointers every control gets a 44px-tall hit area as a pseudo-element, so the drawn ink keeps the comp's size.
   Inline links inside running text are exempt (WCAG 2.5.8), and the consent box grows to the 24px minimum. */
@media (pointer: coarse) {
  :is(.site-nav .logo, .site-foot .logo, .site-foot a, .btn, .contact-rows a) { position: relative; }
  :is(.site-nav ul a, .site-nav .logo, .site-foot a, .text-link, .btn, .contact-rows a, .menu-toggle)::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; translate: 0 -50%; }
  .consent input { width: 24px; height: 24px; margin-top: 0; }
}

/* Forced colours (Windows high contrast): the withheld-name bar and the checkbox are drawn with backgrounds, which the mode removes. */
@media (forced-colors: active) {
  .redact { background: CanvasText; }
  .btn { border: 1px solid currentColor; }
  .consent input { appearance: auto; -webkit-appearance: auto; }
}