/* Hallmark · macrostructure: Stat-Led · v4 motion pass · genre: modern-minimal · tone: technical
 * nav: N12 banner + retract (banner removed) · footer: Ft5 Statement
 * hero: photograph band + type on solid navy beneath it, diagonal cut into
 *       the light half. Type never sits on the picture at any width — that
 *       overlap was unreadable at 390px however the scrim was tuned.
 * enrichment: photographic plates + WebGL dot globe, which closes the page
 *             under the Ft5 statement rather than opening it
 * copy: carries no invented metrics (stripped 2026-07-27)
 * theme: custom · paper-band: light · display-style: grotesk-sans · accent-hue: cool
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */
@import url("../tokens.css");

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-md);line-height:1.6;
  letter-spacing:-.008em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--font-outlier);font-variant-numeric:tabular-nums;letter-spacing:0}
.tnum{font-variant-numeric:tabular-nums}
.night{background:var(--color-night);color:var(--color-on-night)}
.skip{position:fixed;top:-100px;left:16px;z-index:300;background:var(--color-accent-deep);
  color:#fff;padding:12px 18px;border-radius:var(--radius-pill);font-weight:600}
.skip:focus{top:16px}

/* display type is always roman; emphasis carried by weight + accent */
.h2{
  font-family:var(--font-display);font-weight:640;font-style:normal;
  font-size:var(--text-display-s);line-height:1.04;letter-spacing:-.038em;
  overflow-wrap:anywhere;min-width:0;
}
.lede{color:var(--color-ink-2);font-size:var(--text-lg);line-height:1.5;max-width:46ch}
.night .lede{color:var(--color-on-night-2)}
.kicker{
  font-family:var(--font-outlier);font-size:var(--text-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-accent-deep);
}
.night .kicker,.hero .kicker,.plate .kicker{color:var(--color-accent)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);
  min-height:52px;padding:0 var(--space-lg);border:0;border-radius:var(--radius-pill);
  background:var(--color-accent-deep);color:#fff;white-space:nowrap;
  font-family:var(--font-body);font-size:var(--text-md);font-weight:600;cursor:pointer;
  transition:transform var(--dur-mid) var(--ease-out),background-color var(--dur-short) var(--ease-out);
}
.btn:hover,.btn.is-hover{transform:translateY(-1px);background:oklch(43% 0.16 264)}
.btn:active,.btn.is-active{transform:translateY(0)}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn--cyan{background:var(--color-accent);color:var(--color-accent-ink)}
.btn--cyan:hover{background:oklch(72% 0.15 246)}
.btn--ghost{background:transparent;color:var(--color-on-night);
  box-shadow:inset 0 0 0 1px var(--color-rule-night)}
.btn--ghost:hover{background:oklch(74% 0.032 258 / 10%)}
.btn--sm{min-height:44px;padding:0 var(--space-md);font-size:var(--text-sm)}
.btn--full{width:100%}

/* ── N12 · banner + retract ─────────────────────────────────────────────── */
.dispatch{
  background:var(--color-accent-deep);color:#fff;
  font-family:var(--font-outlier);font-size:var(--text-2xs);letter-spacing:.06em;
}
.dispatch__in{
  max-width:var(--wrap);margin-inline:auto;padding:9px var(--gut);
  display:flex;gap:var(--space-md);align-items:center;justify-content:center;flex-wrap:wrap;
}
.dispatch b{font-weight:500;color:var(--color-accent)}
.dispatch__dot{width:6px;height:6px;border-radius:50%;background:var(--color-accent);flex:none}

.masthead{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform var(--dur-mid) var(--ease-out)}
.masthead.is-retracted{transform:translateY(calc(-1 * var(--banner-h,34px)))}
.nav{
  background:oklch(100% 0 0 / 0%);
  transition:background-color var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out);
}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:var(--space-xs) var(--gut);
  display:flex;align-items:center;gap:var(--space-lg);
}
.masthead.is-solid .nav{
  background:oklch(100% 0 0 / 82%);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 var(--color-rule);
}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-height:44px;color:var(--color-on-night)}
.masthead.is-solid .brand{color:var(--color-ink)}
.brand svg{width:30px;flex:none}
.brand span{font-family:var(--font-display);font-weight:680;font-size:var(--text-md);letter-spacing:-.03em;white-space:nowrap}
.brand em{font-style:normal;font-weight:450;opacity:.6}
.nav__links{display:flex;gap:var(--space-lg);font-size:var(--text-sm);color:var(--color-on-night)}
.masthead.is-solid .nav__links{color:var(--color-ink)}
.nav__links a{opacity:.74;white-space:nowrap;transition:opacity var(--dur-short) var(--ease-out)}
.nav__links a:hover{opacity:1}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  place-items:center;gap:6px;color:var(--color-on-night)}
.masthead.is-solid .burger{color:var(--color-ink)}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;
  transition:transform var(--dur-mid) var(--ease-out)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:99;background:var(--color-night);color:var(--color-on-night);
  display:grid;align-content:center;gap:2px;padding:0 var(--gut)}
.drawer[hidden]{display:none}
.drawer a{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;
  font-size:clamp(1.6rem,7vw,2.2rem);padding-block:var(--space-xs);
  border-bottom:1px solid var(--color-rule-night)}
.drawer .mono{font-family:var(--font-outlier);font-size:var(--text-xs);
  color:var(--color-on-night-2);border:0;padding-top:var(--space-md)}

/* ── boot ───────────────────────────────────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:200;background:var(--color-night);color:var(--color-on-night);
  display:grid;place-items:center;grid-template-rows:1fr auto}
.boot__mid{display:grid;justify-items:center;gap:var(--space-lg);align-self:center}
.boot__mark{width:78px}
.boot__bar{width:min(240px,52vw);height:2px;background:var(--color-rule-night);overflow:hidden}
.boot__fill{display:block;height:100%;width:100%;background:var(--color-accent);
  transform:scaleX(0);transform-origin:left}
.boot__foot{align-self:end;width:100%;padding:0 var(--gut) var(--space-xl);
  display:flex;justify-content:space-between;gap:var(--space-md);
  font-family:var(--font-outlier);font-size:var(--text-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-on-night-2)}
.boot__pct{color:var(--color-accent)}

/* ── hero · dot-matrix globe on a dark ground ───────────────────────────────
   The previous fold put type on top of a bright photograph, which is legible
   at 1440 and unreadable at 390 — the headline and the van were competing for
   the same pixels. A quiet dark ground carries display type at every width,
   and the globe supplies the image instead. The diagonal is the join into the
   light half of the page, so the two sections meet on a cut rather than a line.
   ────────────────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(64px + var(--space-2xl)) 0 calc(var(--space-3xl) + 6vw);
  background:var(--color-night);color:var(--color-on-night);
  isolation:isolate;overflow:clip}

.hero__globe{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none}
/* keeps the display type off the brightest part of the dot field without
   dimming the globe itself — a wedge, not a veil across the whole frame */
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
    color-mix(in oklch, var(--color-night) 94%, transparent) 0%,
    color-mix(in oklch, var(--color-night) 78%, transparent) 34%,
    color-mix(in oklch, var(--color-night) 12%, transparent) 62%,
    transparent 80%)}
.hero__body{position:relative;z-index:2;width:100%}

/* the cut into the light section below — Stripe's join, mirrored to the left
   so it runs away from the globe rather than slicing through it */
.hero__cut{position:absolute;left:0;right:0;bottom:-1px;z-index:3;
  height:clamp(70px,9vw,150px);background:var(--color-paper-2);
  clip-path:polygon(0 100%, 100% 0, 100% 100%)}

.hero__h1{font-family:var(--font-display);font-weight:620;font-style:normal;
  font-size:clamp(2.1rem,4vw,3.25rem);line-height:1.06;letter-spacing:-.038em;
  margin-top:var(--space-sm);max-width:16ch;overflow-wrap:anywhere;min-width:0}
.hero__sub{color:var(--color-on-night-2);font-size:var(--text-md);max-width:44ch;margin-top:var(--space-md)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-lg)}


/* ── section rhythm — deliberately unequal ──────────────────────────────── */
.s-tight{padding-block:var(--space-2xl)}
.s-mid{padding-block:var(--space-3xl)}
.s-wide{padding-block:var(--space-4xl)}

/* ── custody · sticky image, scrolling steps ────────────────────────────── */
.custody{background:var(--color-paper-2)}
.custody__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2xl)}
.custody__sticky{position:sticky;top:104px;align-self:start}
.custody__sticky figure{position:relative;overflow:hidden;border-radius:var(--radius-card)}
.custody__sticky img{width:100%;height:auto}
.custody__cap{display:flex;justify-content:space-between;gap:var(--space-sm);
  margin-top:var(--space-xs);font-family:var(--font-outlier);font-size:var(--text-2xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-3)}
.custody__head{margin-bottom:var(--space-xl)}
.custody__head .h2{margin-block:var(--space-2xs) var(--space-sm)}
.step{padding:var(--space-lg) 0;border-top:1px solid var(--color-rule);
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:var(--space-sm)}
.step:last-child{border-bottom:1px solid var(--color-rule)}
.step__t{font-family:var(--font-outlier);font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);color:var(--color-ink-3);
  transition:color var(--dur-mid) var(--ease-out)}
.step.is-live .step__t{color:var(--color-accent)}
.step h3{font-family:var(--font-display);font-weight:620;font-size:var(--text-xl);
  letter-spacing:-.03em;line-height:1.1}
.step p{color:var(--color-ink-2);font-size:var(--text-sm);margin-top:var(--space-2xs)}
.step__m{font-family:var(--font-outlier);font-size:var(--text-2xs);color:var(--color-ink-3);
  margin-top:var(--space-xs)}
.step__m b{color:var(--color-ink);font-weight:500}

/* ── equipment ──────────────────────────────────────────────────────────── */
/* the section takes the photograph's own measured backdrop, so the cooler
   reads as floating with no visible plate edge */
.kit{background:var(--color-paper-shot)}
.kit__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--space-2xl);align-items:center}
.kit__shot img{width:100%;height:auto}
.kit__copy .h2{margin-block:var(--space-2xs) var(--space-sm)}
.kit__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-lg) var(--space-md);margin-top:var(--space-xl);
  padding-top:var(--space-md);border-top:1px solid var(--color-rule)}
.kit__specs div{display:grid;gap:2px;align-content:start}
.kit__specs dt{font-family:var(--font-outlier);font-size:var(--text-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-ink-3)}
.kit__specs dd{margin:0;font-family:var(--font-display);font-weight:640;
  font-size:var(--text-xl);letter-spacing:-.035em;color:var(--color-accent-deep);line-height:1.1}
.kit__specs p{color:var(--color-ink-2);font-size:var(--text-sm);line-height:1.45}

/* ── cold chain ─────────────────────────────────────────────────────────── */
.cold__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:var(--space-2xl);align-items:center}
.cold__copy .h2{margin-block:var(--space-2xs) var(--space-sm)}
.cold__note{margin-top:var(--space-sm);font-family:var(--font-outlier);
  font-size:var(--text-2xs);letter-spacing:.06em;color:var(--color-on-night-2)}
.readout{display:flex;flex-wrap:wrap;gap:var(--space-lg);margin-top:var(--space-xl);
  padding-top:var(--space-md);border-top:1px solid var(--color-rule-night)}
.readout div{display:grid;gap:6px}
.readout dt{font-family:var(--font-outlier);font-size:var(--text-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-on-night-2)}
.readout dd{font-family:var(--font-outlier);font-variant-numeric:tabular-nums;
  font-size:var(--text-xl);color:var(--color-on-night);line-height:1}
.chip{display:inline-block;font-family:var(--font-outlier);font-size:var(--text-xs);
  padding:5px 12px;border-radius:var(--radius-pill);
  background:oklch(65.5% 0.155 246 / 16%);color:var(--color-accent);
  transition:background-color var(--dur-mid) var(--ease-out),color var(--dur-mid) var(--ease-out)}
.chip.is-warn{background:oklch(78% 0.13 72 / 18%);color:var(--color-warn)}
.cold__chart svg{width:100%;height:auto;overflow:visible}
.cold__band{fill:oklch(65.5% 0.155 246 / 8%)}
.cold__rule{stroke:oklch(65.5% 0.155 246 / 34%);stroke-width:2;stroke-dasharray:2 12;stroke-linecap:round}
.cold__lab{font-family:var(--font-outlier);font-size:19px;fill:var(--color-accent);opacity:.85}
.cold__foot{font-family:var(--font-outlier);font-size:19px;fill:var(--color-on-night-2)}
.cold__trace{stroke:var(--color-accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.cold__head{fill:#fff}

/* ── full-bleed plates ──────────────────────────────────────────────────── */
.plate{position:relative;isolation:isolate}
.plate img{width:100%;height:clamp(340px,58vh,620px);object-fit:cover}
/* the coverage plate carries the van now — a centred crop takes the top off
   the courier, the same way it did in the old hero band */
.plate[aria-label="Coverage"] img{object-position:64% 30%}
.plate__over{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
  padding-block:var(--space-xl)}
/* the statement sits over whatever the photograph happens to be doing there,
   so the scrim has to carry it, not just tint the base */
.plate__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, oklch(19.5% 0.048 264 / 94%) 0%,
             oklch(19.5% 0.048 264 / 82%) 26%,
             oklch(19.5% 0.048 264 / 42%) 58%,
             oklch(19.5% 0.048 264 / 10%) 82%, transparent 100%)}
.plate__over .wrap{width:100%;color:var(--color-on-night)}
.coverage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg);
  margin-top:var(--space-md)}
.coverage b{display:block;font-family:var(--font-display);font-weight:640;
  font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.038em;line-height:1.05}
.coverage span{display:block;font-size:var(--text-sm);color:var(--color-on-night-2);
  margin-top:var(--space-3xs);max-width:22ch}

/* ── services · list, not cards ─────────────────────────────────────────── */
.svc__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-xl);align-items:end;margin-bottom:var(--space-xl)}
.svc li{display:grid;grid-template-columns:118px minmax(0,1fr) minmax(0,1.5fr);
  gap:var(--space-md);align-items:baseline;padding:var(--space-md) 0;
  border-top:1px solid var(--color-rule);transition:background-color var(--dur-short) var(--ease-out)}
.svc li:last-child{border-bottom:1px solid var(--color-rule)}
.svc li:hover{background:var(--color-paper-2)}
.svc__tag{font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-accent-deep)}
.svc h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);letter-spacing:-.028em}
.svc p{color:var(--color-ink-2);font-size:var(--text-sm)}

/* ── standards ──────────────────────────────────────────────────────────── */
.std{background:var(--color-paper-2)}
.std__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-2xl)}
.std__copy .h2{margin-block:var(--space-2xs) var(--space-sm)}
.std__copy .btn{margin-top:var(--space-lg)}
.std__key{display:grid;grid-template-columns:116px minmax(0,1fr);gap:var(--space-md);
  font-family:var(--font-outlier);font-size:var(--text-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-ink-3);margin-bottom:var(--space-2xs)}
.std__list li{display:grid;grid-template-columns:116px minmax(0,1fr);gap:4px var(--space-md);
  align-items:baseline;padding:var(--space-md) 0;border-top:1px solid var(--color-rule)}
.std__list li:last-child{border-bottom:1px solid var(--color-rule)}
.std__list span{font-family:var(--font-outlier);font-size:var(--text-xs);
  color:var(--color-accent-deep);opacity:.72;grid-row:span 2}
.std__list b{font-size:var(--text-md);font-weight:600;letter-spacing:-.015em}
.std__list p{grid-column:2;color:var(--color-ink-2);font-size:var(--text-sm)}

/* ── close ──────────────────────────────────────────────────────────────── */
.close__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-2xl)}
.close .h2{margin-block:var(--space-2xs) var(--space-sm)}
.form{display:grid;gap:var(--space-md);margin-top:var(--space-xl);max-width:520px}
.field{display:grid;gap:var(--space-3xs)}
.field label{font-family:var(--font-outlier);font-size:var(--text-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-on-night-2)}
.field input,.field select{width:100%;min-height:52px;padding:0 var(--space-sm);
  border-radius:var(--radius-input);background:oklch(100% 0 0 / 5%);color:var(--color-on-night);
  border:1px solid var(--color-rule-night);font-family:var(--font-body);font-size:var(--text-md);
  transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,oklch(74% 0.032 258) 50%),
                   linear-gradient(135deg,oklch(74% 0.032 258) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field option{background:var(--color-night-2);color:var(--color-on-night)}
.field input::placeholder{color:var(--color-on-night-2);opacity:.5}
.field input:focus,.field select:focus{border-color:var(--color-accent);
  background:oklch(65.5% 0.155 246 / 8%);outline:none}
.field.is-bad input{border-color:var(--color-warn)}
.field__err{font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-warn)}
.form__ok{font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-accent)}
.close__alt{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-on-night-2)}
.close__alt a{color:var(--color-accent)}
.next li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px var(--space-sm);
  align-items:baseline;padding:var(--space-md) 0;border-bottom:1px solid var(--color-rule-night)}
.next li:first-child{border-top:1px solid var(--color-rule-night)}
.next span{font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-accent);grid-row:span 2}
.next b{font-size:var(--text-md);font-weight:600}
.next p{grid-column:2;color:var(--color-on-night-2);font-size:var(--text-sm)}

/* ── Ft5 · statement footer ─────────────────────────────────────────────── */
/* the globe closes the page — cropped by the bottom edge on desktop, reduced
   to a horizon curve under the small print on phones. It sits behind the type
   on wide screens only, where the statement's 22ch measure keeps well clear
   of it; below 1080 it becomes its own band so nothing ever overlaps. */
/* ── closing field · one navy plane behind the close section and the footer ──
   The globe used to live inside .foot, which meant it was clipped at the
   footer's top edge — the sphere was already ~900px across but only its
   bottom-right corner survived, and the empty column above it belonged to
   the close section. One shared ground fixes it: the canvas spans both, and
   the veil decides where the sphere is allowed to show through.
   ────────────────────────────────────────────────────────────────────────── */
.closing{position:relative;isolation:isolate;overflow:clip;
  background:var(--color-night);color:var(--color-on-night)}
.closing > .close,.closing > .foot{position:relative;z-index:2;background:transparent}
.closing__globe{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none}

/* Three washes, each protecting one occupied region and leaving the rest of
   the field to the globe: the form column on the left, the "what happens
   next" list across the top, and the footer's small print along the bottom. */
.closing__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      var(--color-night) 0%,
      color-mix(in oklch, var(--color-night) 92%, transparent) 34%,
      color-mix(in oklch, var(--color-night) 70%, transparent) 44%,
      color-mix(in oklch, var(--color-night) 30%, transparent) 51%,
      transparent 60%),
    linear-gradient(to top,
      var(--color-night) 0%,
      color-mix(in oklch, var(--color-night) 78%, transparent) 7%,
      transparent 16%),
    linear-gradient(96deg,
      color-mix(in oklch, var(--color-night) 94%, transparent) 0%,
      color-mix(in oklch, var(--color-night) 84%, transparent) 40%,
      color-mix(in oklch, var(--color-night) 34%, transparent) 56%,
      transparent 72%)}

.close{padding-bottom:var(--space-2xl)}
.foot{padding-block:var(--space-2xl)}
.foot__say{font-family:var(--font-display);font-weight:600;font-style:normal;
  font-size:clamp(1.6rem,4.2vw,3.1rem);line-height:1.1;letter-spacing:-.04em;max-width:22ch;
  overflow-wrap:anywhere;min-width:0}
.foot__meta{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);
  justify-content:space-between;align-items:center;
  margin-top:var(--space-2xl);padding-top:var(--space-md);
  border-top:1px solid var(--color-rule-night);
  font-family:var(--font-outlier);font-size:var(--text-2xs);color:var(--color-on-night-2)}
.foot__meta nav{display:flex;flex-wrap:wrap;gap:0 var(--space-md)}
/* WCAG hit target: footer links are small type, so the target is padded out */
.foot__meta a{display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--dur-short) var(--ease-out)}
.foot__meta a:hover{color:var(--color-accent)}
.dispatch a{display:inline-flex;align-items:center;min-height:32px}
@media (max-width:1080px){.dispatch a{min-height:44px}}

/* ── responsive · verified 320 / 375 / 414 / 768 ────────────────────────── */
@media (max-width:1080px){
  .nav__links{display:none}
  .burger{display:grid}
  .custody__grid,.cold__grid,.std__grid,.close__grid,.svc__head,.kit__grid{grid-template-columns:minmax(0,1fr)}
  .custody__sticky{position:static}
  .coverage{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .kit__specs{grid-template-columns:minmax(0,1fr)}
  .svc li{grid-template-columns:minmax(0,1fr)}
  .plate picture img{object-position:64% 30%}
.plate img{height:clamp(300px,52vh,420px)}
}
@media (max-width:640px){
  body{font-size:1rem}
  .btn--sm{display:none}
  .coverage{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
  .std__key,.std__list li{grid-template-columns:minmax(0,1fr)}
  .std__list span{grid-row:auto}
  .std__list p{grid-column:1}
  .std__key span:last-child{display:none}
  .step{grid-template-columns:minmax(0,1fr)}
  .figure{flex-wrap:wrap}
}

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .custody__sticky{position:static}
}


/* ═══ v4 · motion layer ═══════════════════════════════════════════════════ */

/* masked line reveals clip descenders unless the box is padded */
.sp-line,.sp-mask{padding-bottom:.1em}

/* scroll progress — a probe trace for the page itself */
.np{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;overflow:hidden}
.np i{display:block;height:100%;width:100%;background:var(--color-accent);
  transform:scaleX(0);transform-origin:left}

/* magnetic buttons need their own transform context */
.mag{display:inline-block;will-change:transform}

/* services · the rule draws under the row being read */
.svc li{position:relative}
.svc li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--color-accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-mid) var(--ease-out)}
.svc li:hover::after,.svc li:focus-within::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){ .net__hint{display:none} }


/* ── custody · the chain has a spine that fills as you read it ──────────── */
.steps{position:relative;padding-left:var(--space-lg)}
.steps .step{grid-template-columns:66px minmax(0,1fr)}
.spine{position:absolute;left:0;top:var(--space-lg);bottom:var(--space-lg);width:2px;
  background:var(--color-rule);overflow:hidden}
.spine i{display:block;width:100%;height:100%;background:var(--color-accent);
  transform:scaleY(0);transform-origin:top}
@media (max-width:640px){ .steps{padding-left:var(--space-md)} .steps .step{grid-template-columns:minmax(0,1fr)} }

/* ── cold chain · the excursion is annotated, not just drawn ────────────── */
.cold__mark{color:var(--color-warn);opacity:0}
.cold__mark text{font-family:var(--font-outlier);font-size:19px;fill:currentColor}

/* ── plates · the photograph drifts behind its own numbers ──────────────── */
.plate{overflow:clip}
.plate img{will-change:transform}

/* ── services · the operational tag settles on hover ────────────────────── */
.svc li:hover .svc__tag,.svc li:focus-within .svc__tag{color:var(--color-accent)}
.svc__tag{transition:color var(--dur-short) var(--ease-out)}


/* ── the network · light cartography, electric routes ───────────────────── */
.net{background:var(--color-paper-2)}
.net__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,4vw,64px);align-items:center}
.net__copy .h2{margin-block:var(--space-2xs) var(--space-sm)}
.net__stage{position:relative;width:100%;height:clamp(460px,68vh,720px);touch-action:pan-y}
.net__stage canvas{width:100%;height:100%;display:block}

.net__key{display:grid;gap:var(--space-2xs);margin-top:var(--space-lg);
  padding-top:var(--space-md);border-top:1px solid var(--color-rule);
  font-family:var(--font-outlier);font-size:var(--text-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-ink-3)}
.net__key li{display:flex;align-items:center;gap:var(--space-2xs)}
.net__dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent-deep);opacity:.45}
.net__dot--hub{width:11px;height:11px;opacity:1;box-shadow:0 0 0 2px var(--color-paper-2),0 0 0 3px var(--color-accent-deep)}
.net__dot--out{width:11px;height:11px;opacity:1;background:oklch(66% 0.19 240);
  box-shadow:0 0 0 2px var(--color-paper-2),0 0 0 3px oklch(66% 0.19 240),0 0 14px 2px oklch(66% 0.19 240 / 55%)}
.net__hint{margin-top:var(--space-sm);font-size:var(--text-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-ink-3);opacity:.7;
  transition:opacity var(--dur-mid) var(--ease-out)}
.net__hint.is-gone{opacity:0}

.net__tip{position:absolute;top:0;left:0;pointer-events:none;z-index:3;white-space:nowrap;
  background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:var(--space-2xs) var(--space-xs);
  font-family:var(--font-outlier);font-size:var(--text-2xs);color:var(--color-ink-2)}
.net__tip[hidden]{display:none}
.net__tip b{display:block;font-size:var(--text-xs);color:var(--color-accent-deep);font-weight:500}

/* anchored sections must clear the fixed masthead */
section[id]{scroll-margin-top:96px}

@media (max-width:1080px){
  .net__grid{grid-template-columns:minmax(0,1fr)}
  .net__stage{height:clamp(400px,56vh,560px)}
}


/* ── entry rules · a hairline wipes under things as they arrive ─────────── */
/* the hero's proof line carries no entry hairline of its own — one rule above
   it is the whole treatment. */

.coverage b{position:relative;display:inline-block;padding-bottom:.12em}
.coverage b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--color-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out) var(--d,0ms)}
.coverage div.is-in b::after{transform:scaleX(1)}

.svc li::after{opacity:.34;transition:transform var(--dur-mid) var(--ease-out) var(--d,0ms),
  opacity var(--dur-short) var(--ease-out)}
.svc li.is-in::after{transform:scaleX(1)}
.svc li:hover::after,.svc li:focus-within::after{opacity:1}

/* nav · where you are */
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-mid) var(--ease-out)}
.nav__links a.is-here{opacity:1;color:var(--color-accent)}
.nav__links a.is-here::after{transform:scaleX(1)}

/* the band is hidden by JS, not CSS — a stalled ticker must never leave the
   chart looking empty (this is what it looked like on a phone) */


/* ── map labels · projected HTML, so the type stays crisp ───────────────── */
.net__labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.net__label{position:absolute;top:0;left:0;white-space:nowrap;opacity:0;
  font-family:var(--font-outlier)}
.net__label.is-state{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--color-ink-2);opacity:0;
  text-shadow:0 1px 0 oklch(97.6% 0.004 250),0 -1px 0 oklch(97.6% 0.004 250),
              1px 0 0 oklch(97.6% 0.004 250),-1px 0 0 oklch(97.6% 0.004 250)}
.net__label.is-illinois{font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  font-weight:600;color:var(--color-accent-deep);
  background:oklch(97.6% 0.004 250 / 92%);padding:3px 10px;border-radius:3px;
  box-shadow:0 0 0 1px oklch(24% 0.036 265 / 10%)}
.net__label.is-hub{font-size:11.5px;font-weight:600;color:var(--color-accent-deep);
  background:oklch(97.6% 0.004 250 / 94%);padding:2px 6px;border-radius:3px;
  box-shadow:0 0 0 1px oklch(24% 0.036 265 / 8%)}
.net__label.is-out{font-size:11.5px;font-weight:600;color:oklch(48% 0.20 250);
  background:oklch(97.6% 0.004 250 / 94%);padding:2px 6px;border-radius:3px;
  box-shadow:0 0 0 1px oklch(48% 0.20 250 / 16%)}


/* ═══ the globe stacks below 1080 — the site's own breakpoint, and the same
   threshold globe.js uses for its desktop framing. Any narrower and the
   sphere reaches under the copy, which is the collision this fold exists to
   avoid. Splitting the two numbers is how 768–899 broke the first time. ═══ */
@media (max-width:1079px){
  /* On a phone the globe is a band, not a backdrop. Behind the copy it put
     dots straight through the headline — the same collision the photograph
     had, and the reason this fold was rebuilt. The type gets clean navy.  */
  .hero{--globe-band:min(44vh, 360px);
    min-height:100svh;height:auto;align-items:flex-end;
    padding:calc(var(--globe-band) + var(--space-lg)) 0 calc(var(--space-2xl) + 14vw)}
  .hero__globe{height:var(--globe-band);bottom:auto}
  .hero__veil{height:var(--globe-band);bottom:auto;
    background:linear-gradient(to bottom,
      color-mix(in oklch, var(--color-night) 74%, transparent) 0%,
      color-mix(in oklch, var(--color-night) 16%, transparent) 30%,
      color-mix(in oklch, var(--color-night) 62%, transparent) 74%,
      var(--color-night) 100%)}
}

/* ═══ phone · the desktop scrims assume a left third that doesn't exist ═══ */
@media (max-width:767px){
  .hero__cta .btn{width:100%}
  .mag{display:block}

  /* full-bleed plates: the copy stacks tall, so the wash must reach higher */
  .plate__scrim{background:
    linear-gradient(to top, oklch(19.5% 0.048 264 / 96%) 0%,
                    oklch(19.5% 0.048 264 / 90%) 34%,
                    oklch(19.5% 0.048 264 / 74%) 66%,
                    oklch(19.5% 0.048 264 / 44%) 100%)}
  .plate picture img{object-position:64% 30%}
.plate img{height:clamp(420px,72vh,560px)}
  .coverage{gap:var(--space-md)}
  /* the kicker sits at the top of the plate where the wash is thinnest */
  .plate .kicker{text-shadow:0 1px 10px oklch(19.5% 0.048 264 / 92%)}

  /* desktop spacing leaves a dead gap around the small phone-size chart */
  .cold__pin{padding-block:var(--space-2xl)}
  .cold__grid{gap:var(--space-lg)}
  .readout{margin-top:var(--space-lg);padding-top:var(--space-sm);gap:var(--space-md)}
  .custody{padding-block:var(--space-2xl)}
  .net{padding-block:var(--space-2xl)}
}

/* ── hero · animated signature on a dark ground ─────────────────────────────
   The fold is a WebGL component plus type. Type never sits on a photograph at
   any width — that overlap was unreadable at 390px however the scrim was
   tuned, and it is the reason this hero was rebuilt. The van moves directly
   below as a full-bleed plate: the signature makes the argument, the
   photograph is the evidence, and it carries the eye out of the dark fold.
   ────────────────────────────────────────────────────────────────────────── */
.hero.hero--viz{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(64px + var(--space-2xl)) 0 var(--space-3xl);
  background:var(--color-night);color:var(--color-on-night);
  isolation:isolate;overflow:clip}
.hero__viz{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
/* a wedge, so the component keeps its brightness on the open side */
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
    color-mix(in oklch, var(--color-night) 93%, transparent) 0%,
    color-mix(in oklch, var(--color-night) 80%, transparent) 36%,
    color-mix(in oklch, var(--color-night) 22%, transparent) 60%,
    transparent 78%)}
.hero--viz .hero__body{position:relative;z-index:2;width:100%}

.hero__h1{font-family:var(--font-display);font-weight:620;font-style:normal;
  font-size:clamp(2.1rem,4vw,3.25rem);line-height:1.06;letter-spacing:-.038em;
  margin-top:var(--space-sm);max-width:16ch;overflow-wrap:anywhere;min-width:0}
.hero__sub{color:var(--color-on-night-2);font-size:var(--text-md);max-width:44ch;margin-top:var(--space-md)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-lg)}

/* ── the light fold · used by the Aperture option ───────────────────────────
   Inverted: ink cells on paper, and the mark reads white through them. The
   masthead has to flip with it — over a light fold the default white nav is
   invisible until the scroll makes it solid.
   ────────────────────────────────────────────────────────────────────────── */
.light-fold .hero.hero--viz{background:var(--color-paper);color:var(--color-ink)}
.light-fold .hero .kicker{color:var(--color-accent-deep)}
.light-fold .hero__h1{color:var(--color-ink)}
.light-fold .hero__sub{color:var(--color-ink-2)}
.light-fold .hero__veil{background:linear-gradient(96deg,
  color-mix(in oklch, var(--color-paper) 94%, transparent) 0%,
  color-mix(in oklch, var(--color-paper) 82%, transparent) 34%,
  color-mix(in oklch, var(--color-paper) 24%, transparent) 58%,
  transparent 76%)}
/* navy primary, ink outline — cyan on paper fails contrast */
.light-fold .hero__cta .btn{background:var(--color-accent-deep);color:#fff}
.light-fold .hero__cta .btn:hover{background:oklch(43% 0.16 264)}
.light-fold .hero__cta .btn--ghost{background:transparent;color:var(--color-ink);
  box-shadow:inset 0 0 0 1px var(--color-rule)}
.light-fold .hero__cta .btn--ghost:hover{background:var(--color-paper-3)}
.light-fold .hero__cut{display:none}
.light-fold .masthead .brand,
.light-fold .masthead .nav__links,
.light-fold .masthead .burger{color:var(--color-ink)}
/* the light outline needs to survive a field of ink cells behind it */
.light-fold .hero__cta .btn--ghost{box-shadow:inset 0 0 0 1.5px var(--color-ink-3)}

@media (max-width:1079px){
  /* Ink cells on paper are far higher contrast against dark type than the
     cyan-on-navy versions are, so a wash is not enough here: the component
     takes a band at the top and the copy gets clean paper underneath, the
     same shape the globe and the photograph both settled on. */
  .light-fold .hero.hero--viz{--viz-band:min(46vh, 380px);
    min-height:auto;align-items:flex-end;
    padding:calc(var(--viz-band) + var(--space-lg)) 0 var(--space-2xl)}
  .light-fold .hero__viz{height:var(--viz-band);bottom:auto}
  .light-fold .hero__veil{height:var(--viz-band);bottom:auto;
    background:linear-gradient(to bottom,
      color-mix(in oklch, var(--color-paper) 58%, transparent) 0%,
      color-mix(in oklch, var(--color-paper) 10%, transparent) 30%,
      color-mix(in oklch, var(--color-paper) 66%, transparent) 78%,
      var(--color-paper) 100%)}
}

/* the fold's own way out, now the photograph has moved to the coverage plate */
.hero__cut{position:absolute;left:0;right:0;bottom:-1px;z-index:3;
  height:clamp(70px,9vw,150px);background:var(--color-paper-2);
  clip-path:polygon(0 100%, 100% 0, 100% 100%)}


/* comparison scaffolding · preview pages only, inert on the live page */
.vswitch{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:150;display:flex;gap:4px;padding:4px;
  border-radius:var(--radius-pill);background:oklch(19.5% 0.048 264 / 90%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 6px 24px oklch(19.5% 0.048 264 / 40%);max-width:calc(100vw - 24px)}
.vswitch a{display:flex;align-items:center;min-height:44px;padding:0 var(--space-sm);
  border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:600;
  color:var(--color-on-night-2);white-space:nowrap;
  transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.vswitch a:hover{color:var(--color-on-night)}
.vswitch a.is-on{background:var(--color-accent);color:var(--color-accent-ink)}

/* ═══ the globe stacks below 1080 — the site's own breakpoint, and the same
   threshold globe.js uses for its desktop framing. Any narrower and the
   sphere reaches under the copy, which is the collision this fold exists to
   avoid. Splitting the two numbers is how 768–899 broke the first time. ═══ */
@media (max-width:1079px){
  /* On a phone the globe is a band, not a backdrop. Behind the copy it put
     dots straight through the headline — the same collision the photograph
     had, and the reason this fold was rebuilt. The type gets clean navy.  */
  .hero{--globe-band:min(44vh, 360px);
    min-height:100svh;height:auto;align-items:flex-end;
    padding:calc(var(--globe-band) + var(--space-lg)) 0 calc(var(--space-2xl) + 14vw)}
  .hero__globe{height:var(--globe-band);bottom:auto}
  .hero__veil{height:var(--globe-band);bottom:auto;
    background:linear-gradient(to bottom,
      color-mix(in oklch, var(--color-night) 74%, transparent) 0%,
      color-mix(in oklch, var(--color-night) 16%, transparent) 30%,
      color-mix(in oklch, var(--color-night) 62%, transparent) 74%,
      var(--color-night) 100%)}
}

/* ═══ phone · the desktop scrims assume a left third that doesn't exist ═══ */
@media (max-width:767px){
  .hero__cta .btn{width:100%}
  .mag{display:block}

  /* full-bleed plates: the copy stacks tall, so the wash must reach higher */
  .plate__scrim{background:
    linear-gradient(to top, oklch(19.5% 0.048 264 / 96%) 0%,
                    oklch(19.5% 0.048 264 / 90%) 34%,
                    oklch(19.5% 0.048 264 / 74%) 66%,
                    oklch(19.5% 0.048 264 / 44%) 100%)}
  .plate picture img{object-position:64% 30%}
.plate img{height:clamp(420px,72vh,560px)}
  .coverage{gap:var(--space-md)}
  /* the kicker sits at the top of the plate where the wash is thinnest */
  .plate .kicker{text-shadow:0 1px 10px oklch(19.5% 0.048 264 / 92%)}

  /* desktop spacing leaves a dead gap around the small phone-size chart */
  .cold__pin{padding-block:var(--space-2xl)}
  .cold__grid{gap:var(--space-lg)}
  .readout{margin-top:var(--space-lg);padding-top:var(--space-sm);gap:var(--space-md)}
  .custody{padding-block:var(--space-2xl)}
  .net{padding-block:var(--space-2xl)}
}

@media (max-width:1079px){
  /* the component sits behind the copy once the fold is one column, so the
     wedge becomes a bottom-up wash and the type keeps a solid ground */
  .hero.hero--viz{min-height:92svh;padding:calc(64px + var(--space-2xl)) 0 var(--space-2xl)}
  .hero__veil{background:linear-gradient(to bottom,
    color-mix(in oklch, var(--color-night) 72%, transparent) 0%,
    color-mix(in oklch, var(--color-night) 30%, transparent) 26%,
    color-mix(in oklch, var(--color-night) 84%, transparent) 62%,
    color-mix(in oklch, var(--color-night) 96%, transparent) 100%)}

  /* no type over the globe at any narrow width — it gets its own strip,
     moved to the very end of the field */
  .foot{padding-bottom:0}
  .closing__globe{position:relative;inset:auto;order:2;
    height:clamp(120px,22vw,170px);margin-top:var(--space-xl)}
  .closing{display:flex;flex-direction:column}
  .closing > .close{order:0} .closing > .foot{order:1}
  .closing__veil{display:none}
}