/* Visor Asset Solutions

   Black and white, with emerald as the one highlight. Emerald is reserved for
   the few things that matter most: the primary calls to action, the key phrase
   on the cover, the $1 offer, the trace from a report figure to its sources,
   and site visits on the coverage map. Nothing else uses it.

   Photos and video: drop the files named in index.html into photos/ and video/
   and they replace their placeholders, converted to black and white automatically. */

:root {
  --black: #0a0a0a;
  --white: #f5f5f3;
  --emerald: #0f8a5f;       /* on dark backgrounds */
  --emerald-deep: #0a6e4b;  /* on light backgrounds */

  --display: "Funnel Display", ui-sans-serif, system-ui, sans-serif;
  --sans: "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* One sizing unit that follows whichever side of the window is tighter,
     so every slide keeps its composition from a laptop to a large display. */
  --u: min(1vw, 1.6vh);
  --gutter: clamp(20px, 5.5vw, 104px);
  --nav-h: clamp(60px, 10vh, 92px);
  --foot-h: clamp(54px, 9vh, 84px);

  --fs-label: clamp(10px, calc(var(--u) * .8), 12px);
  --fs-small: clamp(11.5px, calc(var(--u) * .98), 14.5px);
  --fs-body: clamp(14px, calc(var(--u) * 1.3), 20px);
  --fs-num: clamp(17px, calc(var(--u) * 1.75), 28px);
  --fs-h: clamp(30px, calc(var(--u) * 4.6), 80px);
  --fs-xl: clamp(36px, calc(var(--u) * 6), 108px);

  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h20.5M15.5 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  --camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 4.5h3l1.2-2h4.6l1.2 2h3v9h-13z' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.6' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  --play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 2l6 4-6 4z' fill='%23000'/%3E%3C/svg%3E");
  --doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 1.5h6l3 3v10h-9z M5.5 7.5h5M5.5 9.8h5M5.5 12h3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h1M4.5 5.5v5M7 3v10M9.5 5v6M12 6.5v3M14 8h0' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}

.t-dark  { --bg: var(--black); --ink: var(--white); --hi: var(--emerald); --hi-ink: var(--emerald-deep); }
.t-light { --bg: var(--white); --ink: var(--black); --hi: var(--emerald-deep); --hi-ink: var(--emerald); }
.t-dark, .t-light {
  --muted: color-mix(in srgb, var(--ink) 58%, var(--bg));
  --soft:  color-mix(in srgb, var(--ink) 32%, var(--bg));
  --line:  color-mix(in srgb, var(--ink) 14%, var(--bg));
  --faint: color-mix(in srgb, var(--ink) 5%, var(--bg));
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #000;
  color: var(--white);
  font: 400 var(--fs-body)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
svg { display: block; }
b { font-weight: 500; }
table { border-collapse: collapse; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.slide ::selection, .modal ::selection { background: var(--ink); color: var(--bg); }

/* ---------- Chrome ----------
   Brand, menu and pager are blended with "difference" so they invert over black
   and white slides, splitting cleanly as the next slide passes beneath them. */

.chrome {
  position: fixed; z-index: 50; inset: 0 0 auto;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.chrome a { pointer-events: auto; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.brand__mark { width: 22px; height: 22px; fill: currentColor; }
.brand__word { font: 800 19px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
/* On the cover the giant wordmark is the logo, so the small one steps aside. */
.on-cover .brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
/* Menu button: two hairlines that close into a cross. */
.menu-btn {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 14px;
  height: 40px; padding: 0 0 0 4px;
  pointer-events: auto;
  font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.menu-btn__label { display: inline-grid; overflow: hidden; }
.menu-btn__label > span { grid-area: 1 / 1; transition: transform .7s var(--ease); }
.menu-btn__label > span + span { transform: translateY(110%); }
.menu-btn__icon { position: relative; width: 26px; height: 10px; }
.menu-btn__icon i {
  position: absolute; left: 0; right: 0; height: 1.25px; background: currentColor;
  transition: transform .7s var(--ease), top .7s var(--ease);
}
.menu-btn__icon i:first-child { top: 0; }
.menu-btn__icon i:last-child { top: calc(100% - 1.25px); }
.menu-btn:hover .menu-btn__icon i:last-child { transform: scaleX(.6); transform-origin: right; }
.menu-btn[aria-expanded="true"] .menu-btn__label > span:first-child { transform: translateY(-110%); }
.menu-btn[aria-expanded="true"] .menu-btn__label > span + span { transform: none; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i { top: calc(50% - .6px); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { transform: scaleX(.62) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { transform: scaleX(.62) rotate(-45deg); }

.btn.nav-cta {
  position: fixed; z-index: 51;
  top: calc((var(--nav-h) - var(--h)) / 2);
  right: calc(var(--gutter) + 120px);
}
.nav-cta.is-away, .menu-open .nav-cta { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.menu-open .pager { opacity: 0; pointer-events: none; }
.pager { transition: opacity .5s; }
.nav-cta__short { display: none; }

/* The aperture lines part from the center as each slide opens. */
.aperture { position: fixed; z-index: 46; inset: 0; pointer-events: none; mix-blend-mode: difference; }
.aperture i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #fff; opacity: 0; }

/* ---------- Loader: the helm draws itself, then opens at its slit ---------- */

.loader {
  position: fixed; z-index: 70; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 22px;
  background: #000; color: #f5f5f3;
  /* A last resort if the script never takes over: step aside on its own. */
  animation: loader-out .6s 7s forwards;
}
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
html:not(.js) .loader { display: none; }
.loader__mark { width: 64px; height: 64px; overflow: visible; opacity: 0; }
.loader__mark path { fill: currentColor; stroke: currentColor; stroke-width: .5; stroke-linejoin: round; }
.loader__word {
  margin-right: -.42em; opacity: 0;
  font: 500 10px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase;
}
.loader__bar { position: relative; width: 120px; height: 1px; overflow: hidden; background: rgba(245, 245, 243, .18); }
.loader__bar i { position: absolute; inset: 0; background: #f5f5f3; transform: scaleX(0); transform-origin: left; }

/* ---------- Menu ---------- */

.menu {
  position: fixed; z-index: 48; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(32px, 6vw, 120px);
  padding: calc(var(--nav-h) + 3vh) var(--gutter) 0;
  background: var(--bg); color: var(--ink);
}
.menu[hidden] { display: none; }
.menu__nav { align-self: center; }
.menu__nav ol { counter-reset: none; }
.menu__nav a {
  position: relative;
  display: flex; align-items: baseline; gap: clamp(16px, 2vw, 32px);
  padding: clamp(3px, .7vh, 8px) 0;
  transition: opacity .5s var(--ease);
}
.menu__n {
  position: relative;
  width: 2.4em; flex: none;
  color: var(--muted);
  font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}
.menu__t {
  font: 300 clamp(20px, min(3.3vh, 2.8vw), 44px)/1.08 var(--display);
  letter-spacing: -.03em;
  transition: transform .8s var(--ease);
}
.menu__t::after {
  content: ""; display: inline-block; width: .6em; height: .32em; margin-left: .35em;
  background: currentColor; vertical-align: middle;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  opacity: 0; transform: translateX(-.3em);
  transition: opacity .5s, transform .8s var(--ease);
}
.menu__nav ol:hover a { opacity: .35; }
.menu__nav ol:hover a:hover { opacity: 1; }
.menu__nav a:hover .menu__t { transform: translateX(.18em); }
.menu__nav a:hover .menu__t::after { opacity: 1; transform: none; }
.menu__nav a[aria-current="true"] .menu__n { color: var(--ink); }
.menu__nav a[aria-current="true"] .menu__n::before {
  content: ""; position: absolute; left: -16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--ink);
}

.menu__aside { align-self: center; max-width: 380px; padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); }
.menu__offer { margin-top: 18px; font: 300 clamp(22px, 2vw, 30px)/1.15 var(--display); letter-spacing: -.02em; }
.menu__aside .price { margin: 14px 0 28px; }
.menu__aside .price__now { font-size: clamp(48px, 5vw, 72px); }
.menu__services { margin-top: clamp(24px, 5vh, 48px); border-top: 1px solid var(--line); }
.menu__services li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.menu__foot {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}

.pager {
  position: fixed; z-index: 50; inset: auto 0 0;
  height: var(--foot-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
}
.pager__now {
  display: flex; align-items: center;
  font: 500 var(--fs-label)/1.2 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
}
.pager__num, .pager__name { display: inline-grid; overflow: hidden; }
.pager__num > span, .pager__name > span { grid-area: 1 / 1; white-space: nowrap; }
.pager__total { margin-left: 6px; opacity: .45; }
.pager__name { margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .3); }
.pager__nav { display: flex; gap: 6px; }
.pager__btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .35);
  transition: background-color .4s, color .4s, border-color .4s, opacity .4s;
}
.pager__btn i {
  width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--chevron) center / 12px no-repeat;
          mask: var(--chevron) center / 12px no-repeat;
  transform: rotate(180deg);
}
.pager__btn--next i { transform: none; }
.pager__btn:hover:not(:disabled) { background: #fff; color: #000; border-color: #fff; }
.pager__btn:disabled { opacity: .25; cursor: default; }
.pager.is-start .pager__btn--next i { animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
.pager__bar { position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255, 255, 255, .18); }
.pager__bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }

/* On the scrolling fallback, content fades out under the bar instead of colliding with it. */
.scrim {
  position: fixed; z-index: 49; inset: 0 0 auto;
  height: calc(var(--nav-h) + 24px);
  background: linear-gradient(var(--bg) 45%, transparent);
  pointer-events: none;
}

.js:not(.is-ready) :is(.chrome, .pager, .nav-cta) { opacity: 0; }
html:not(.is-deck) .pager, .is-deck .scrim { display: none; }

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

.btn {
  --h: clamp(46px, 6.4vh, 56px);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 22px;
  height: var(--h);
  padding: 0 22px 0 24px;
  border-radius: 2px;
  background: var(--ink); color: var(--bg);
  font: 500 clamp(13.5px, calc(var(--u) * 1.05), 15.5px)/1 var(--sans);
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color .6s var(--ease), color .6s var(--ease), opacity .5s var(--ease), transform .7s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg); opacity: .1;
  transform: translateX(-101%);
  transition: transform .8s var(--ease);
}
.btn:hover::before { transform: none; }
.btn__arrow { position: relative; overflow: hidden; flex: none; width: 22px; height: 12px; color: var(--hi-ink); }
.btn__arrow::before, .btn__arrow::after {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: var(--arrow) center / 22px 12px no-repeat;
          mask: var(--arrow) center / 22px 12px no-repeat;
  transition: transform .8s var(--ease);
}
.btn__arrow::after { transform: translateX(-110%); }
.btn:hover .btn__arrow::before { transform: translateX(110%); }
.btn:hover .btn__arrow::after { transform: none; }
.btn--sm { --h: 40px; gap: 14px; padding: 0 16px 0 18px; font-size: 13.5px; }

.link {
  position: relative; padding: 6px 0;
  font: 500 clamp(13.5px, calc(var(--u) * 1.05), 15.5px)/1 var(--sans);
  letter-spacing: .01em;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; opacity: .35;
  transition: opacity .4s;
}
.link:hover::after { opacity: 1; }

/* ---------- Slides ---------- */

.slide { position: relative; background: var(--bg); color: var(--ink); }
.slide__shade { position: absolute; inset: 0; z-index: 10; background: #000; opacity: 0; pointer-events: none; }
.slide__inner {
  position: relative;
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: var(--nav-h) var(--gutter) var(--foot-h);
}
.stage {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  column-gap: clamp(32px, 6vw, 128px);
  transform: scale(var(--fit, 1));
  transform-origin: 50% 50%;
}
.slide--hero .stage { grid-template-columns: minmax(0, 1fr); }
.slide--wide .stage { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.slide--stack .stage { grid-template-columns: minmax(0, 1fr); row-gap: clamp(22px, 5vh, 56px); }

html.is-deck, html.is-deck body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.is-deck body { touch-action: none; }
.is-deck .slide {
  position: fixed; inset: 0;
  overflow: hidden; overflow: clip;
  visibility: hidden;
  will-change: transform;
}
.is-deck .slide__inner {
  position: absolute; inset: 0; min-height: 0;
  padding-top: calc(var(--nav-h) + 2vh);
  padding-bottom: calc(var(--foot-h) + 2.5vh);
  will-change: transform;
}
html:not(.is-deck) .slide { overflow-x: hidden; overflow-x: clip; }

.js .slide :is([data-a], [data-split], .visual, .ph--bleed, .hud > *, .statement, .wordmark) { opacity: 0; }

/* ---------- Copy ---------- */

.copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; }
.slide--hero .copy { max-width: none; }
.slide--stack .copy { max-width: 1120px; }
.label {
  display: flex; align-items: center; gap: 14px;
  font: 500 var(--fs-label)/1.2 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.label::before { content: ""; width: 28px; height: 1px; background: var(--ink); }
.label span { color: var(--ink); }
.h {
  margin-top: clamp(14px, 3vh, 32px);
  font: 300 var(--fs-h)/1.02 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h--xl { max-width: 15ch; font-size: var(--fs-xl); line-height: 1; letter-spacing: -.042em; }
.h--lg { font-size: calc(var(--fs-h) * 1.18); }
.em { color: var(--hi); font-style: normal; }
.w { display: inline-block; vertical-align: top; }
.nw { white-space: nowrap; }
.w > span { display: inline-block; will-change: transform, filter; }
.lede {
  margin-top: clamp(14px, 3vh, 30px);
  max-width: 32em;
  color: var(--muted);
  text-wrap: pretty;
}
.actions { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); flex-wrap: wrap; margin-top: clamp(22px, 5vh, 52px); }

/* Footnote markers: a superscript number that opens its note on hover or focus. */
.cite { position: relative; margin-left: 2px; font-size: .68em; line-height: 0; vertical-align: super; }
.cite button {
  padding: 0 2px; line-height: 1;
  border-bottom: 1px solid var(--soft);
  color: var(--ink); font-weight: 500;
  transition: border-color .3s;
}
.cite:hover button, .cite button:focus-visible { border-color: var(--ink); }
.cite__note {
  position: absolute; z-index: 20; bottom: calc(100% + 14px); left: 50%;
  width: max-content; max-width: 260px;
  padding: 12px 14px;
  background: var(--ink); color: var(--bg);
  font: 400 13px/1.45 var(--sans);
  letter-spacing: 0; text-transform: none; text-align: left;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .3s, transform .5s var(--ease);
}
.cite__note b {
  display: block; margin-bottom: 4px;
  font: 500 10px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  opacity: .6;
}
.cite:hover .cite__note, .cite:focus-within .cite__note { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Photo slots ----------
   A placeholder that names the shot it is waiting for. When the <img> inside it
   loads, the photo covers the placeholder; when the file is missing, the script
   removes the <img> and the placeholder stays. */

.ph {
  position: relative; overflow: hidden;
  background-color: var(--faint);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--ink) 7%, transparent) 11px 12px);
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.ph__label {
  position: absolute; left: 10px; right: 10px; bottom: 9px;
  display: flex; align-items: center; gap: 8px;
  font: 500 var(--fs-label)/1.3 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.ph__label i {
  flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--camera) center / 14px no-repeat;
          mask: var(--camera) center / 14px no-repeat;
}
.ph:has(img, video) .ph__label { display: none; }

/* The cover video fills the slide; the wordmark sits on the darkened bottom edge. */
.ph--bleed { position: absolute; inset: 0; z-index: 0; background-color: #141414; }
.ph__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.82); }
.ph--bleed::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .12) 28%, rgba(10, 10, 10, .45) 48%, rgba(10, 10, 10, .86) 66%, rgba(10, 10, 10, .95) 100%);
}
.ph--bleed .ph__label {
  left: auto; right: var(--gutter); bottom: auto; top: 46%;
  z-index: 1; width: auto; color: rgba(245, 245, 243, .45);
}

/* ---------- 01 Cover ---------- */

.slide--hero .slide__inner { align-items: flex-end; }
.cover { position: relative; z-index: 1; width: 100%; }
.cover__row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  padding-bottom: clamp(18px, 3.6vh, 36px);
  margin-bottom: clamp(14px, 2.6vh, 26px);
  border-bottom: 1px solid rgba(245, 245, 243, .22);
}
.cover__tag { max-width: 22em; text-wrap: balance; font: 300 clamp(22px, calc(var(--u) * 2.3), 40px)/1.14 var(--display); letter-spacing: -.025em; }
.cover__tag b { font-weight: 600; }
.cover__row .actions { margin-top: 0; }
.wordmark {
  display: inline-flex; align-items: center; gap: .26em;
  width: max-content;
  font: 800 100px/.8 var(--display);
  letter-spacing: -.012em; text-transform: uppercase;
  white-space: nowrap;
}
.wordmark__line { display: inline-flex; align-items: center; gap: .26em; width: max-content; }
.wordmark__mark { width: .86em; height: .86em; margin: -.06em -.04em 0; fill: currentColor; flex: none; }
.wordmark.is-stacked { display: inline-grid; gap: .1em; }

/* Evidence framing: corner ticks and an evidence tag, so every photo reads as a record. */
.ph--framed::before, .cam::before {
  --c: rgba(245, 245, 243, .85);
  content: ""; position: absolute; z-index: 3; inset: 8px; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px 12px no-repeat;
}
.ph__tag {
  position: absolute; z-index: 2; top: 14px; left: 14px;
  padding: 3px 6px;
  background: rgba(10, 10, 10, .72); color: #f5f5f3;
  font: 500 9.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.ph--framed .ph__label { bottom: 14px; left: 14px; right: 14px; }

/* ---------- The field camera on the hero ---------- */

.hud {
  position: absolute; z-index: 2;
  inset: calc(var(--nav-h) + 1vh) var(--gutter) calc(var(--foot-h) + 1.5vh);
  pointer-events: none;
  color: rgba(245, 245, 243, .62);
  font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.hud__corner { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(245, 245, 243, .7); }
.hud__corner:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.hud__corner:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.hud__corner:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.hud__corner:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.hud p { position: absolute; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.hud__tl { left: 0; top: 4px; }
.hud__tr { right: 0; top: 4px; }
.hud__bl { left: 34px; bottom: 4px; }
.hud__br { right: 34px; bottom: 4px; }
.hud__rec { display: inline-flex; align-items: center; gap: 8px; color: #f5f5f3; }
.hud__rec i { width: 7px; height: 7px; border-radius: 50%; background: #f5f5f3; animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: .15; } }

/* ---------- 02 Nationwide ---------- */

.slide--statement .stage { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.slide--statement { --st: clamp(40px, calc(var(--u) * 5.8), 112px); }
.statement { font: 300 var(--st)/.94 var(--display); letter-spacing: -.05em; }
.statement__line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.statement__line > span { display: inline-block; white-space: nowrap; }
.statement__sub { margin-top: clamp(18px, 4vh, 40px); max-width: 26em; color: var(--muted); }

/* A tile map: one square per state, laid out in the shape of the country. */
.usmap__svg { display: block; width: 100%; height: auto; margin-top: clamp(14px, 2.6vh, 24px); overflow: visible; }
.usmap__states path { fill: var(--line); stroke: var(--bg); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .7s var(--ease); }
.usmap__states path.is-on { fill: var(--ink); }
.usmap__states path.is-flash { fill: var(--hi); transition-duration: 0s; }
.usmap__pings circle { fill: none; stroke: var(--hi); stroke-width: 2; vector-effect: non-scaling-stroke; }
.usmap__pings circle.is-dot { fill: var(--hi); stroke: none; }
.usmap__grid[hidden] { display: none; }
.usmap__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(8, auto);
  gap: clamp(3px, .4vw, 6px);
  margin-top: clamp(16px, 3vh, 28px);
}
.usmap__grid i {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--soft);
  font: 500 clamp(7px, calc(var(--u) * .72), 11px)/1 var(--sans); font-style: normal; letter-spacing: .06em;
  transition: background-color .5s, color .5s, border-color .5s;
}
.usmap__grid i.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.usmap__grid i.is-flash { background: var(--hi); border-color: var(--hi); color: var(--on-hi); transition-duration: 0s; }
.usmap__ping {
  position: absolute; inset: -1px; z-index: 1;
  border: 1.5px solid var(--hi);
  pointer-events: none;
}
.usmap__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: clamp(14px, 2.6vh, 24px); padding-top: 12px; border-top: 1px solid var(--line); }
.usmap__count { display: flex; align-items: baseline; gap: 12px; color: var(--muted); }
.usmap__count b { color: var(--ink); font: 300 calc(var(--fs-num) * 1.6)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.usmap__legend { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.usmap__legend i { width: 10px; height: 10px; border: 1.5px solid var(--hi); }

/* A scan line passes over each exhibit as it arrives. */
.scan {
  position: absolute; z-index: 3; left: -2%; right: -2%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink) 20%, var(--ink) 80%, transparent);
  box-shadow: 0 0 18px 1px color-mix(in srgb, var(--ink) 35%, transparent);
  opacity: 0; pointer-events: none;
}
.exhibit { position: relative; }

/* ---------- 02 Overview: the whole picture in one read ---------- */

.h--overview { max-width: 21ch; font-size: calc(var(--fs-h) * 1.06); }
.h--overview b { font-weight: 500; }
.lede--wide { max-width: 50em; }
.journey { position: relative; padding-top: 4px; }
.journey__rail { position: relative; height: 1px; margin-bottom: clamp(20px, 3.6vh, 32px); background: var(--line); }
.journey__rail i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; }
.journey__rail b {
  position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--hi); box-shadow: 0 0 0 5px color-mix(in srgb, var(--hi) 20%, transparent);
}
.journey ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.journey li { position: relative; }
.journey li::before {
  content: ""; position: absolute; left: 0; top: calc(-1 * clamp(20px, 3.6vh, 32px) - 4px);
  width: 7px; height: 7px; background: var(--ink);
}
.journey__when { color: var(--muted); font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.journey h3 { margin-top: 10px; font: 300 calc(var(--fs-num) * 1.5)/1 var(--display); letter-spacing: -.03em; }
.journey p { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }

/* ---------- 03 Track record ---------- */

.slide--proof .stage { row-gap: clamp(24px, 6vh, 64px); }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.figures > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: clamp(14px, 3vh, 28px) 20px clamp(14px, 3vh, 28px) 0; border-bottom: 1px solid var(--line); }
.figures > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.figures dt { color: var(--muted); font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.figures dd { font: 300 clamp(44px, calc(var(--u) * 5.6), 100px)/.9 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.figures dd small { margin-left: .08em; font-size: .4em; letter-spacing: -.01em; color: var(--muted); }
.logos { grid-column: 1 / -1; min-width: 0; }
.logos__label { color: var(--muted); font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.logos__window {
  margin-top: 16px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logos__track { display: flex; gap: 12px; width: max-content; }
.logos__track.is-moving { animation: marquee 48s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-slot {
  position: relative; display: grid; place-items: center;
  width: clamp(128px, 12.5vw, 184px); height: clamp(54px, 7.6vh, 74px);
  border: 1px solid var(--line);
}
.logo-slot img { max-width: 70%; max-height: 46%; filter: grayscale(1) brightness(0) invert(1); opacity: .82; }
.logo-slot i { color: var(--soft); font: 500 10px/1 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.logo-slot:has(img) { border-color: transparent; }
.logo-slot:has(img) i { display: none; }

/* ---------- 06 Systems of record ---------- */

.flow {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.45fr) auto minmax(0, 1fr); align-items: center;
  column-gap: clamp(28px, 3.4vw, 56px);
  margin-top: clamp(14px, 2.8vh, 26px);
}
.flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow__lines path { fill: none; stroke: var(--soft); stroke-width: 1; stroke-dasharray: 2 6; animation: flow 1.2s linear infinite; }
.flow__lines path.is-out { stroke: var(--ink); }
@keyframes flow { to { stroke-dashoffset: -16; } }
.flow__sources { position: relative; z-index: 1; }
.flow__sources li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px 0; padding: clamp(6px, 1.1vh, 9px) 12px;
  border: 1px solid var(--line); background: var(--bg);
  font-size: var(--fs-small); line-height: 1.2; white-space: nowrap;
}
.sys { display: inline-grid; justify-items: end; flex: none; width: 112px; height: 16px; overflow: hidden; color: var(--muted); }
.sys__item { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.sys__item:not(:first-child) { opacity: 0; }
.sys__item img { width: 12px; height: 12px; opacity: .7; }
.t-dark .sys__item img { filter: invert(1); }
.sys__item b { font: 500 10px/1 var(--sans); letter-spacing: .04em; }
.flow__engine {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 7px;
  padding: clamp(16px, 2.6vh, 24px) 18px;
  background: var(--ink); color: var(--bg); text-align: center;
}
.flow__engine svg { width: 30px; height: 30px; fill: currentColor; }
.flow__engine b { font: 800 15px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.flow__engine span { max-width: 8em; font: 500 9.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.flow__checks { position: relative; z-index: 1; border-top: 1px solid var(--ink); }
.flow__checks li { display: grid; grid-template-columns: 5.2em 1fr; gap: 10px; align-items: baseline; padding: clamp(7px, 1.4vh, 12px) 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.flow__checks b { font: 400 var(--fs-num)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow__checks span { color: var(--muted); font-size: var(--fs-small); line-height: 1.3; }
.flow__checks li.is-flag span { color: var(--ink); }

/* ---------- Exhibits: every visual is presented as a sourced exhibit ---------- */

.visual { position: relative; width: 100%; }
.exhibit { width: 100%; max-width: 680px; margin-left: auto; font-size: var(--fs-small); }
.slide--stack .exhibit { max-width: none; margin: 0; }
.exhibit__head {
  display: flex; gap: 16px; align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  font: 500 var(--fs-label)/1.2 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.exhibit__head span:first-child { color: var(--ink); white-space: nowrap; }
.exhibit__source {
  margin-top: clamp(10px, 1.8vh, 16px);
  color: var(--muted);
  font-size: var(--fs-label); letter-spacing: .02em;
}

/* ---------- 02 Coverage ---------- */

.planes { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 5vw, 96px); }
.plane__title {
  padding: clamp(12px, 2.4vh, 22px) 0 6px;
  font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.plane li {
  display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; align-items: baseline;
  padding: clamp(8px, 1.7vh, 14px) 0;
}
.plane li > span { color: var(--muted); }
.plane li > b { font: 400 var(--fs-small)/1 var(--sans); }
.bar { position: relative; grid-column: 1 / -1; height: 2px; background: var(--line); }
.bar > i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; }
/* A leader line from 5% along the bar down to its label: the conventional sample. */
.bar__tick {
  position: absolute; left: 5%; top: 4px;
  padding: 7px 0 0 7px;
  border-left: 1px solid var(--muted);
  font: 400 var(--fs-label)/1 var(--sans); font-style: normal;
  color: var(--muted); white-space: nowrap;
}
.plane li.has-tick { padding-bottom: calc(clamp(8px, 1.7vh, 14px) + 1.5em); }

/* ---------- 07 On site: a wall of field cameras ---------- */

.slide--wall .stage { grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 3.6vh, 40px); }
.copy--row {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end;
  gap: 16px clamp(32px, 6vw, 120px);
}
.copy--row .lede { margin-top: 0; }
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); height: clamp(240px, 48vh, 560px); }
.cam { position: relative; overflow: hidden; background-color: #141414; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.85); }
.cam::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 10, 10, .55), transparent 26%, transparent 52%, rgba(10, 10, 10, .92));
}
.cam .ph__label { top: 50%; bottom: auto; z-index: 2; color: rgba(245, 245, 243, .5); }
.cam__top {
  position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between;
  color: rgba(245, 245, 243, .78);
  font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.cam__rec { display: inline-flex; align-items: center; gap: 7px; }
.cam__rec i { width: 6px; height: 6px; border-radius: 50%; background: #f5f5f3; animation: rec 1.6s steps(1) infinite; }
.cam__foot { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 5px; color: #f5f5f3; }
.cam__foot b { font: 400 calc(var(--fs-num) * 1.05)/1.1 var(--display); letter-spacing: -.02em; }
.cam__foot span { color: rgba(245, 245, 243, .72); font-size: var(--fs-label); line-height: 1.4; }

/* ---------- 08 Evidence: a mosaic of captured items, each filed and cited ---------- */

.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tally > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: clamp(10px, 2.2vh, 18px) 12px clamp(10px, 2.2vh, 18px) 0; }
.tally > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.tally dt { color: var(--muted); font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.tally dd { font: 300 var(--fs-num)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, .7vw, 10px); margin-top: clamp(12px, 2.2vh, 20px); }
.tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background-color: #141414; color: #f5f5f3; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, .4), transparent 34%, transparent 52%, rgba(10, 10, 10, .88));
}
.tile__tag {
  position: absolute; z-index: 2; top: 8px; left: 8px;
  padding: 3px 6px; background: rgba(10, 10, 10, .72); color: #f5f5f3;
  font: 500 9px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
/* The detection box: corner ticks marking what was identified in the frame. */
.tile__box {
  --c: #f5f5f3;
  position: absolute; z-index: 2;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  background:
    linear-gradient(var(--c), var(--c)) left top / 10px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1.5px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 10px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1.5px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 10px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1.5px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 10px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1.5px 10px no-repeat;
}
.tile__meta {
  position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 7px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
  font: 500 9.5px/1.3 var(--sans); letter-spacing: .05em;
}
.tile__path { min-width: 0; }
.tile__path span { display: inline-block; }
.tile__path span + span::before { content: "›"; margin: 0 4px; opacity: .55; }
.tile__cite { flex: none; padding-bottom: 1px; border-bottom: 1px solid currentColor; white-space: nowrap; }
.tile--doc { background: #e9e8e3; color: var(--black); }
.tile--doc::after { display: none; }
.tile--doc .tile__box { --c: var(--black); }
.doc { position: absolute; inset: 22% 12% 28%; display: grid; align-content: start; gap: 7px; }
.doc__title { font: 500 9.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.doc__line { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; }
.doc i { height: 3px; background: rgba(10, 10, 10, .14); }
.doc i.short { width: 60%; }
.tile--audio { background: #161616; }
.tile--lidar { background: #0b0b0b; }
.lidar { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave { position: absolute; inset: 30% 10% 34%; display: flex; align-items: center; gap: 3px; }
.wave i { flex: 1; height: var(--h, 60%); background: rgba(245, 245, 243, .8); animation: wave 1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* ---------- 05 The report ---------- */

.trace {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: clamp(40px, 5vw, 96px);
  align-items: center;
  margin-top: clamp(14px, 2.8vh, 26px);
}
.trace__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trace__lines path { fill: none; stroke: var(--hi); stroke-width: 1.2; }
.report { padding: clamp(14px, 2.6vh, 24px) clamp(16px, 1.6vw, 24px) 4px; border: 1px solid var(--line); background: var(--faint); }
.report__title {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
  font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.report__title span { color: var(--muted); letter-spacing: .06em; text-transform: none; font-weight: 400; }
.report__row {
  display: grid; grid-template-columns: 1fr 14px; gap: 6px 10px; align-items: baseline;
  width: 100%; padding: clamp(10px, 2vh, 16px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted); text-align: left;
  transition: color .4s;
}
.report__row:last-child { border-bottom: 0; }
.report__row > span { grid-column: 1; }
.report__row .mark { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.report__row b {
  grid-column: 1;
  font: 400 var(--fs-num)/1 var(--display);
  letter-spacing: -.02em;
  color: var(--ink); opacity: .5;
  font-variant-numeric: tabular-nums;
  transition: opacity .4s;
}
.report__row .mark { font-size: 10px; font-weight: 500; line-height: 0; color: var(--muted); transition: color .4s; }
.report__row:hover, .report__row.is-active { color: var(--ink); }
.report__row:hover b, .report__row.is-active b { opacity: 1; }
.report__row.is-active .mark { color: var(--hi); }

.sources li { position: relative; display: grid; gap: 2px; padding: clamp(8px, 1.6vh, 12px) 0 clamp(8px, 1.6vh, 12px) 16px; }
.sources li::before {
  content: ""; position: absolute; left: -3px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--ink);
}
.src__tag { font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.src__text { line-height: 1.35; }

/* ---------- 10 From sample to full population ---------- */

.sweep__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin: clamp(14px, 2.6vh, 24px) 0 clamp(12px, 2.2vh, 20px); }
.sweep__state { display: flex; align-items: baseline; gap: 16px; }
.sweep__mode { display: inline-grid; overflow: hidden; min-width: 14em; color: var(--muted); font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.sweep__mode > span { grid-area: 1 / 1; white-space: nowrap; }
.sweep__state b { font: 300 clamp(36px, calc(var(--u) * 4.4), 76px)/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.sweep__state small { color: var(--muted); font-size: var(--fs-small); }
.sweep__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.sweep__legend span { display: inline-flex; align-items: center; gap: 8px; }
.sweep__legend i { width: 10px; height: 10px; }
.lg-tested { background: var(--ink); }
.lg-missed { background: var(--hi); }
.sweep__grid { --cols: 50; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2px, .26vw, 4px); }
.sweep__grid i { aspect-ratio: 1; background: var(--line); transition: background-color .4s; }
.sweep__grid i.is-on { background: var(--soft); }
.sweep__grid i.is-sample { background: var(--ink); }
.sweep__grid i.is-missed { background: var(--hi); }
.sweep__result { margin-top: clamp(12px, 2.2vh, 20px); color: var(--muted); font-size: var(--fs-small); }
.sweep__result b { color: var(--ink); font-weight: 500; }

/* ---------- 07 Between exams ---------- */

.cadence { margin-top: clamp(6px, 1.2vh, 10px); }
.cadence__row, .cadence__axis { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 16px; align-items: center; }
.cadence__row { padding: clamp(10px, 2vh, 16px) 0; border-bottom: 1px solid var(--line); }
.cadence__row > span { color: var(--muted); }
.cadence__row b { text-align: right; font: 300 var(--fs-num)/1 var(--display); letter-spacing: -.03em; }
.months { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; height: 22px; }
.cadence__row .months::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line); }
.months i { position: relative; justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.months i.exam { width: 16px; height: 16px; border-radius: 0; }
.months i.is-empty { visibility: hidden; }
.cadence__axis { padding-top: 8px; color: var(--soft); font-size: var(--fs-label); }
.cadence__axis .months { height: auto; }
.cadence__axis .months span { text-align: center; }

.book { width: 100%; margin-top: clamp(16px, 3.4vh, 32px); font-variant-numeric: tabular-nums; }
.book th {
  padding: 0 0 10px; border-bottom: 1px solid var(--ink);
  font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-align: left;
}
.book td { padding: clamp(8px, 1.6vh, 12px) 0; border-bottom: 1px solid var(--line); }
.book :is(th, td):not(:first-child) { text-align: right; }

/* ---------- 08 Accountability ---------- */

.terms > div {
  display: grid; grid-template-columns: minmax(80px, 22%) 1fr; gap: 16px; align-items: baseline;
  padding: clamp(11px, 2.3vh, 20px) 0;
  border-bottom: 1px solid var(--line);
}
.terms dt { color: var(--muted); font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.terms dd { font: 300 calc(var(--fs-num) * .92)/1.2 var(--display); letter-spacing: -.015em; }

.roadmap { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 16px; margin-top: clamp(18px, 3.6vh, 32px); }
.roadmap__step { display: flex; align-items: center; gap: 12px; }
.roadmap__step > i { flex: none; width: 11px; height: 11px; border: 1px solid var(--ink); border-radius: 50%; }
.roadmap__step.is-now > i { background: var(--ink); }
.roadmap__step small {
  display: block; margin-bottom: 2px; color: var(--muted);
  font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.roadmap__line { position: relative; height: 1px; border-top: 1px dashed var(--soft); }
.roadmap__line i { position: absolute; left: 0; top: -1px; width: 35%; height: 1px; background: var(--ink); transform-origin: left; }

/* ---------- 09 Engage Visor ---------- */

.offer { width: min(100%, 460px); margin-top: clamp(20px, 4.4vh, 40px); padding-top: clamp(14px, 2.6vh, 22px); border-top: 1px solid var(--line); }
.offer__label { color: var(--muted); font: 500 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.price { display: flex; align-items: baseline; gap: 20px; margin-top: 10px; }
.price__was { position: relative; color: var(--muted); text-decoration: none; font: 300 var(--fs-num)/1 var(--display); letter-spacing: -.02em; }
.price__was i { position: absolute; left: -6%; right: -6%; top: 54%; height: 1.5px; background: currentColor; transform-origin: left; }
.price__now { font: 300 calc(var(--fs-h) * 1.05)/1 var(--display); letter-spacing: -.045em; }
.offer + .actions { margin-top: clamp(18px, 3.6vh, 32px); }
.fine { margin-top: clamp(14px, 3vh, 32px); color: var(--muted); font-size: var(--fs-label); letter-spacing: .02em; }

.services { max-width: 560px; margin-left: auto; border-top: 1px solid var(--ink); }
.services li {
  display: grid; grid-template-columns: 44px 1fr; gap: 6px 16px;
  padding: clamp(14px, 3vh, 28px) 0;
  border-bottom: 1px solid var(--line);
}
.services span { grid-row: span 2; padding-top: 6px; color: var(--muted); font-size: var(--fs-label); letter-spacing: .1em; }
.services h3 { font: 300 calc(var(--fs-num) * 1.1)/1.1 var(--display); letter-spacing: -.02em; }
.services p { color: var(--muted); font-size: var(--fs-small); }

/* ---------- Request form ---------- */

.modal {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: inherit;
  overflow: hidden;
}
.modal[open] { display: grid; place-items: center; padding: clamp(10px, 3vw, 40px); }
.modal::backdrop { background: transparent; }
.modal__panel {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  width: min(100%, 1000px); max-height: 100%;
  overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
}
.modal__offer, .modal__body { background: var(--bg); color: var(--ink); padding: clamp(24px, 4vw, 52px); }
.modal__offer { display: flex; flex-direction: column; }
.modal__body { position: relative; }
.modal__title { margin-top: 18px; font: 300 clamp(26px, 2.8vw, 40px)/1.06 var(--display); letter-spacing: -.03em; }
.modal .price { margin-top: clamp(18px, 3vh, 28px); }
.modal .price__was { font-size: clamp(20px, 2vw, 28px); }
.modal .price__now { font-size: clamp(56px, 6vw, 88px); }
.modal__list { margin-top: clamp(18px, 3vh, 30px); border-top: 1px solid var(--line); }
.modal__list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.modal__list li::before {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--check) center / 12px no-repeat;
          mask: var(--check) center / 12px no-repeat;
}
.modal__fine { margin-top: auto; padding-top: 24px; color: var(--muted); font-size: 12px; }
.modal__lead { max-width: 30em; padding-right: 48px; color: var(--muted); font-size: 15px; }
.modal__close {
  position: absolute; top: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px);
  width: 40px; height: 40px; border: 1px solid var(--line);
  transition: border-color .3s;
}
.modal__close:hover { border-color: var(--ink); }
.modal__close i::before, .modal__close i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1px;
  background: var(--ink); transform: translate(-50%, -50%) rotate(45deg);
}
.modal__close i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.field { display: block; margin-top: clamp(14px, 2.4vh, 22px); }
.field > span { display: block; color: var(--muted); font: 500 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.field em { margin-left: 6px; font-style: normal; letter-spacing: .06em; text-transform: none; color: var(--soft); }
.field input, .field textarea {
  display: block; width: 100%;
  padding: 10px 0 9px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; outline: 0; resize: none;
  font-size: 16px;
  transition: border-color .3s;
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field.is-error input { border-color: var(--ink); }
.request__submit { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; margin-top: clamp(20px, 3.4vh, 32px); }
.request__note { color: var(--muted); font-size: 13px; }
.request__done .modal__title { margin-top: 14px; }
.request__done .modal__lead { margin-top: 12px; }

/* ---------- Portrait screens: copy above, exhibit below ---------- */

@media (max-aspect-ratio: 1/1) {
  :root {
    --u: min(2.4vw, 1.1vh);
    --nav-h: 64px;
    --foot-h: 60px;
    --fs-body: clamp(14px, calc(var(--u) * 1.7), 18px);
    --fs-small: clamp(12px, calc(var(--u) * 1.4), 15px);
    --fs-label: clamp(10px, calc(var(--u) * 1.05), 12px);
    --fs-xl: clamp(34px, calc(var(--u) * 5.2), 80px);
  }
  .stage, .slide--wide .stage { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 3.6vh, 44px); align-content: center; }
  .copy, .exhibit, .services { max-width: none; margin: 0; }
  .h--xl { max-width: none; }
  .slide--statement .stage { grid-template-columns: minmax(0, 1fr); }
  .slide--statement { --st: clamp(36px, 11vw, 84px); }
  .cover__tag { font-size: clamp(22px, 6.4vw, 34px); }
  .hud .hud__tr, .hud .hud__br, .ph--bleed .ph__label { display: none; }
  .menu { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; padding-top: calc(var(--nav-h) + 2vh); }
  .menu__aside { max-width: none; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .menu__aside .label, .menu__offer, .menu__services { display: none; }
  .menu__aside .price { margin: 0; }
  .menu__aside .price__now { font-size: 44px; }
  .menu__foot { flex-direction: column; gap: 4px; padding: 16px 0 20px; }
  .planes { grid-template-columns: minmax(0, 1fr); }
  .slide--stack .h { font-size: calc(var(--fs-h) * .86); }
  .plane__title { padding-top: 12px; }
  .plane li { padding: 5px 0; gap: 5px 12px; }
  .plane li.has-tick { padding-bottom: calc(5px + 1.4em); }
  .bar { height: 1.5px; }
  #coverage .exhibit__source { display: none; }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .tally > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic .tile:nth-child(n + 5) { display: none; }

  /* Overview: the journey reads top to bottom. */
  .h--overview { max-width: none; font-size: calc(var(--fs-h) * .9); }
  .journey__rail, .journey li::before { display: none; }
  .journey ol { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--ink); }
  .journey li { display: grid; grid-template-columns: 7.2em 1fr; gap: 2px 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .journey h3 { margin: 0; font-size: var(--fs-num); }
  .journey p { grid-column: 2; margin-top: 2px; font-size: var(--fs-label); }

  /* Track record and systems stack; the camera wall becomes two by two. */
  .slide--proof .stage { row-gap: clamp(18px, 3vh, 32px); }
  .figures dd { font-size: clamp(36px, 11vw, 64px); }
  .copy--row { grid-template-columns: minmax(0, 1fr); }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 46vh; }
  .cam__foot span { display: none; }
  .cam__top { gap: 8px; letter-spacing: .12em; }
  .cam__top > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .cam__rec { gap: 0; font-size: 0; }
  .flow { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .flow__lines { display: none; }
  .flow__sources { display: flex; flex-wrap: wrap; gap: 6px; }
  .flow__sources li { margin: 0; padding: 5px 9px; gap: 8px; }
  .sys { width: 12px; }
  .sys__item b { display: none; }
  .flow__engine { grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; }
  .flow__engine svg { width: 22px; height: 22px; }
  .flow__engine span { max-width: none; justify-self: end; }
  .sweep__grid { --cols: 30; }
  .trace { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .trace__lines { display: none; }
  .sources { margin-left: 4px; border-left: 1px solid var(--line); }
  .sources li { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 380px) {
  .cam__no { display: none; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 760px) {
  .exhibit__source, .sources li:nth-child(4), .book tr:nth-child(3), .flow__sources li:nth-child(n + 7) { display: none; }
}

@media (max-width: 760px) {
  .modal__panel { grid-template-columns: minmax(0, 1fr); }
  .modal__list, .modal__fine { display: none; }
  .modal__offer { padding-bottom: 22px; }
  .modal .price__now { font-size: 56px; }
}
@media (max-width: 560px) {

  .menu-btn__label { display: none; }
  .btn.nav-cta { right: calc(var(--gutter) + 44px); }
  .nav-cta__long { display: none; }
  .nav-cta__short { display: inline; }
  .pager__name { display: none; }
  .cadence__row, .cadence__axis { grid-template-columns: 78px minmax(0, 1fr) 28px; gap: 10px; }
  .path span:nth-child(3) { display: none; }
  .terms > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .pager.is-start .pager__btn--next i { animation: none; }
}