/* DATUM — shared foundation
   Lifted from index-v3-5.html, the working version, so a new page starts at
   its level instead of re-deriving it. The values are V3.5's own; where V3.5
   wrote a colour or a size inline, it has a name here and the same value.
   The reasoning behind each choice lives in V3.5's comments and in
   DESIGN.md at the root of the repo.

   /assets is served immutable for a year (vercel.json), so a page must load
   this as datum.css?v=N and bump N on every change, or nobody sees the edit.

   V3.5 itself still carries its own inline copy. Do not change a value here
   without deciding whether V3.5 should change with it. */

/* ---------- tokens ---------- */
:root {
  /* ground and ink. Warm, never pure white or neutral grey. */
  --ground: #000;
  --ink: #f5f2ef;      /* headings, anything read first */
  --ink-2: #b4aea8;    /* body copy, leads */
  --ink-nav: #d6d0c9;  /* a step up from ink-2, for small type over the glow */
  --mute: #8a837c;     /* labels, notes, meta */
  --quiet: #4a4641;    /* text that is present but not yet lit */
  --dim: #292622;      /* words waiting to fill in */
  --hint: #5a534d;     /* placeholders */

  /* hairlines: the only borders on the site */
  --rule: rgba(255,255,255,.11);
  --rule-2: rgba(255,255,255,.13);
  --rule-3: rgba(255,255,255,.17);

  /* the accent, and the run of colour the light is drawn in:
     pale at the heart, through amber, into orange, down to red-brown */
  --orange: #f46b01;
  --orange-2: #f79502;
  --amber: #ffb03a;
  --sun: #ffc861;
  --pale: #ffe9cf;
  --bad: rgba(255,90,70,.55);

  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --brand: "Michroma", "Arial Black", sans-serif;

  /* motion. --ease is for arriving. Leaving uses --ease-leave, eased at both
     ends: leaving is not arriving in reverse. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-leave: cubic-bezier(.42, 0, .32, 1);

  --gutter: clamp(20px, 5vw, 80px);
  --max: 1240px;
  /* section rhythm. Every band picks from these rather than inventing its own
     clamp. Where two bands meet, the lower one takes --sp-sm on top. */
  --sp-xl: clamp(112px, 14vw, 196px);
  --sp-lg: clamp(88px, 11vw, 152px);
  --sp-md: clamp(66px, 8vw, 116px);
  --sp-sm: clamp(48px, 5.6vw, 84px);

  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--orange); color: #150d04; }
.wrap { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin-inline: auto; min-width: 0; }
/* glows and figures run wider than a phone on purpose; clip, not hidden, so
   sticky positioning still works */
main { overflow-x: clip; }

/* one focus style for the whole site */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--orange-2);
  outline-offset: 3px;
  border-radius: 3px;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- type ----------
   One weight for everything, 300. Size and tracking carry the hierarchy,
   never bold. The bigger the type, the tighter the tracking. Michroma only
   for the wordmark, small uppercase labels and index numbers. */
.t-display {
  font-weight: 300;
  font-size: clamp(42px, min(6.6vw, 9.5svh), 94px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.t-statement {
  font-weight: 300;
  font-size: clamp(38px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.t-h1 {
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.03;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.t-h2 {
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.t-h3 {
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.t-lead { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 19px); max-width: 52ch; }
.t-body { color: var(--ink-2); font-size: clamp(15px, 1.2vw, 17px); max-width: 46ch; }
.t-note { color: var(--mute); font-size: 13px; letter-spacing: .01em; }
.t-label {
  font-family: var(--brand);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mute);
}
/* the 01 / 02 / 03 index. Orange only when it marks the current thing. */
.t-idx { font-family: var(--brand); font-size: 9.5px; letter-spacing: .2em; color: var(--mute); }
.t-idx.on { color: var(--orange); }
.t-figure {
  font-weight: 300;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ---------- brand ---------- */
.brand { display: flex; align-items: center; gap: 14px; width: fit-content; }
.brand img { width: 40px; height: auto; filter: hue-rotate(var(--hue, 0deg)) saturate(var(--sat, 1)); }
.brand span { font-family: var(--brand); font-size: 13px; letter-spacing: .42em; padding-left: .1em; }
/* the mark powers on once, bottom stroke first, the orange one last */
.brand .markmark { width: 40px; height: auto; display: block; }
.brand .markmark polygon { fill: var(--ink); opacity: .16; animation: mark-on .5s var(--ease) forwards; }
.brand .markmark .s1 { fill: var(--orange); animation-delay: .47s; }
.brand .markmark .s2 { animation-delay: .35s; }
.brand .markmark .s3 { animation-delay: .25s; }
.brand .markmark .s4 { animation-delay: .15s; }
@keyframes mark-on { to { opacity: 1; } }

/* ---------- controls ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #050505;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .45s var(--ease), background-color .35s var(--ease);
}
.pill:hover { background: #fff; transform: translateY(-2px); }
.pill:active { transform: translateY(1px) scale(.985); }
.pill-sm { padding: 11px 20px; font-size: 13px; }

/* the round arrow: the only outlined control */
.go {
  flex: none; width: 44px; height: 44px;
  border: 1px solid var(--rule-2); border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.go svg { width: 17px; height: 17px; }
.go:hover { background: var(--ink); border-color: var(--ink); color: #050505; transform: translateX(3px); }

/* text links draw their underline from the left instead of changing colour */
.link { position: relative; color: var(--ink-2); transition: color .3s ease; }
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.link:hover { color: var(--ink); }
.link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- nav ----------
   Leaves on the way down, comes back on the way up, always there at the top.
   datum.js sets data-away and --nav-shade. */
.nav {
  --nav-shade: 0;
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding-block: 24px;
  pointer-events: none;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  transition: transform .56s var(--ease);
}
.nav[data-away="1"] { transform: translate3d(0, -130%, 0); transition: transform .6s var(--ease-leave); }
.nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1px 0 auto;
  height: clamp(96px, 10vw, 132px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 52%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  opacity: var(--nav-shade);
  transition: opacity .12s linear;
}
.nav a { pointer-events: auto; }
.nav .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav .brand { justify-self: start; }
.nav .pill { justify-self: end; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav-links a { font-size: 13.5px; color: var(--ink-nav); transition: color .35s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
/* words that fill in as they cross the reading line: put data-fill on a
   heading, wrap the second half in <strong> if it should land as the point */
[data-fill] { color: var(--dim); }
[data-fill] strong { font: inherit; }
.fill-word { color: var(--dim); transition: color .62s var(--ease); }
.fill-word.on { color: var(--ink); }

/* ---------- hero ----------
   Centred. The page opens centred and closes centred; everything between
   holds the left spine. .hero-glow is painted by datum.js: light from just
   above the top edge, computed, not a gradient. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 96px var(--gutter) 52px;
  text-align: center;
}
/* an inner page's hero: same light, a shorter room */
.hero--page { min-height: min(78svh, 760px); padding-top: 140px; }
.hero-glow {
  --gw: min(118vw, 2100px);
  position: absolute;
  z-index: -2;
  left: calc(50% - var(--gw) / 2);
  top: 0;
  width: var(--gw);
  height: 68svh;
  background: radial-gradient(ellipse 46% 62% at 50% 0%, rgba(255,112,8,.30), transparent 74%);
  filter: saturate(1.12) hue-rotate(var(--hue, 0deg)) saturate(var(--sat, 1));
  opacity: 0;
  animation: glow-in 2.8s var(--ease) .15s forwards;
}
.hero-glow.painted { background: none; }
.hero-glow canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero.flown .hero-glow { animation: none; opacity: var(--glow-opacity, 1); transform: translateY(var(--glow-y, 0px)); }
.hero-copy { position: relative; width: min(1060px, 100%); display: grid; justify-items: center; gap: 30px; }
.hero-copy .pill { margin-top: 8px; }
.hero-enter { opacity: 0; transform: translateY(18px); animation: rise-in 1.15s var(--ease) forwards; }
.hero-enter:nth-child(2) { animation-delay: .12s; }
.hero-enter:nth-child(3) { animation-delay: .24s; }
.hero-enter:nth-child(4) { animation-delay: .36s; }
@keyframes glow-in { to { opacity: 1; } }
@keyframes rise-in { to { opacity: 1; transform: none; } }

/* ---------- bands ----------
   A section is a band. Default air is lg above, md below. */
.band { position: relative; padding-block: var(--sp-lg) var(--sp-md); }
.band.join { padding-top: var(--sp-sm); }      /* follows a band it belongs with */
.band.wide { padding-block: var(--sp-xl) var(--sp-lg); }
/* widths in each child's own ch, not the wrapper's: 30ch of body text is
   half a line of heading */
.band-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 76px); }
.band-head > :is(h2, .t-h1, .t-h2, .t-h3) { max-width: 22ch; }
.statement { min-height: 66svh; display: grid; align-items: center; }
.statement .t-statement { max-width: 20ch; }

/* copy beside a picture: the deck's proportions */
.split {
  display: grid;
  grid-template-columns: minmax(300px, .74fr) minmax(0, 1.26fr);
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
}
.split > .copy-col { display: grid; gap: 20px; align-content: center; }
.split > .copy-col .t-h1 { max-width: 12ch; }

/* ---------- plate ----------
   Pictures have no frame. They dissolve into the black on every edge, so
   the subject sits in the page rather than in a box on it. */
.plate { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.plate img {
  width: 100%; height: 100%; object-fit: contain;
  filter: hue-rotate(var(--hue, 0deg)) saturate(var(--sat, 1));
  -webkit-mask-image: radial-gradient(ellipse 74% 72% at 47% 44%, #000 0 26%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.24) 74%, transparent 92%);
  mask-image: radial-gradient(ellipse 74% 72% at 47% 44%, #000 0 26%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.24) 74%, transparent 92%);
}
/* a wide plate, the proof tail's treatment: soft frame edge, long fade below */
.plate--wide { aspect-ratio: 3 / 2; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 68%, transparent 97%),
                      linear-gradient(90deg, transparent 0, #000 6%, #000 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 68%, transparent 97%),
              linear-gradient(90deg, transparent 0, #000 6%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.plate--wide img { -webkit-mask-image: none; mask-image: none; }

/* ---------- stats ---------- */
.plate + .stats { margin-top: clamp(36px, 5vw, 72px); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.stat { display: grid; gap: 12px; align-content: start; }
.stat .t-figure { display: flex; align-items: flex-end; min-height: clamp(38px, 5vw, 68px); }
/* a figure set in words: smaller, on the numerals' baseline */
.stat .t-figure.word { font-size: clamp(30px, 3.3vw, 44px); white-space: nowrap; letter-spacing: -.035em; }
.stat p { color: var(--ink-2); font-size: clamp(15px, 1.2vw, 17px); max-width: 30ch; }

/* ---------- ruled list ----------
   The tabs' and the form's grammar: hairlines the length of the column,
   an index, no boxes. For steps, stages, capabilities. */
.ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ruled > li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--rule);
}
/* the narrow form: title over its line, beside the index. The column gap
   is too much air between two rows that are one thought. */
.ruled.stacked > li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
.ruled.stacked > li > p { grid-column: 2; }
.ruled h3 { font-weight: 300; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -.025em; }
.ruled p { color: var(--ink-2); font-size: clamp(15px, 1.2vw, 17px); max-width: 46ch; }

/* ---------- close ----------
   The page closes centred, the way it opened. */
.close { padding-block: var(--sp-md) var(--sp-lg); }
.close .wrap { display: grid; justify-items: center; text-align: center; gap: 22px; }
.close .t-h1 { max-width: 17ch; }
.close .t-body { max-width: 46ch; }
.close .pill { margin-top: 12px; }

/* ---------- form fields ----------
   A ruled sheet: no boxes, a hairline under each field, and a warm bore that
   runs the rule under the one you are in. */
.field {
  display: block;
  position: relative;
  padding-block: clamp(15px, 1.6vw, 20px) clamp(12px, 1.3vw, 16px);
  border-bottom: 1px solid var(--rule);
}
.field::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background-image: linear-gradient(90deg, var(--orange) 0%, var(--amber) 30%, var(--orange-2) 52%, var(--amber) 74%, var(--orange) 100%);
  /* a fixed length, not a share of the field: as a share, a half-width
     field squeezed the same colours into half the space and read more
     amber than a full-width one */
  background-size: 1400px 100%;
  box-shadow: 0 0 8px rgba(255,150,30,.85), 0 0 22px rgb(var(--orange-rgb, 244 107 1) / .5);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity .42s linear, transform 0s linear .42s;
}
.field:focus-within::after {
  transform: scaleX(1);
  opacity: 1;
  transition: transform .55s var(--ease), opacity 0s;
  animation: bore-drift 7s linear .5s infinite;
}
@keyframes bore-drift { to { background-position: 1400px 0; } }
.field > span {
  display: block; margin-bottom: 7px;
  font-family: var(--brand); font-size: 8px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute);
  transition: color .35s var(--ease);
}
.field:focus-within > span { color: var(--ink-2); }
.field input, .field textarea {
  display: block; width: 100%; padding: 0;
  background: none; border: 0; border-radius: 0;
  color: var(--ink); font: inherit; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5;
}
.field input:focus, .field textarea:focus { outline: none; }
.field textarea { resize: none; min-height: 74px; }
.field input::placeholder, .field textarea::placeholder { color: var(--hint); }
/* a field that needs fixing says so in words, beside its label; the line
   under it stays the same orange as every other field's when you are in it */
.field.bad { border-bottom-color: var(--bad); }
.field.bad > span::after { content: attr(data-err); margin-left: .9em; color: #ff9a88; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-background-clip: text;
  background-clip: text;
  caret-color: var(--orange-2);
  transition: background-color 100000s ease 0s;
}

/* ---------- footer ----------
   The horizon is drawn by datum.js; the canvases are empty black until it
   runs, which is what the footer already is. Copy the footer markup from
   starter.html whole: the painter looks for these ids. */
.footer {
  --dawn: 0;
  --sun-x: 60%;
  --sun-y: 63%;
  --dawn-rx: 167%;
  --dawn-ry: 89%;
  --footer-brightness: .62;
  --sky-rise: clamp(80px, 11vh, 150px);
  position: relative;
  isolation: isolate;
  padding-block: clamp(88px, 10vw, 136px) 38px;
}
.footer-sky { position: absolute; inset: calc(-1 * var(--sky-rise)) 0 0 0; z-index: -1; pointer-events: none; }
.footer-art {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%);
  mask-image: linear-gradient(180deg, transparent, #000 14%);
}
.footer-art-base { opacity: var(--sky-rest, .30); }
.footer-reveal-shell {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse calc(var(--dawn) * var(--dawn-rx)) calc(var(--dawn) * var(--dawn-ry)) at var(--sun-x) var(--sun-y), #000 0 50%, rgba(0,0,0,.42) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse calc(var(--dawn) * var(--dawn-rx)) calc(var(--dawn) * var(--dawn-ry)) at var(--sun-x) var(--sun-y), #000 0 50%, rgba(0,0,0,.42) 78%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.footer-art-bright { opacity: var(--footer-brightness); }
/* phones: the sunrise shown finished, not revealed on scroll (datum.js skips the reveal there too) */
@media (hover: none) and (pointer: coarse) { .footer { --dawn: 1 !important; --footer-brightness: 1 !important; } }
.footer-air { opacity: 0; transform: translate3d(0, 0, 0); }
.footer-air.drifting { animation: footer-air 23s ease-in-out infinite; }
@keyframes footer-air {
  0%, 100% { opacity: calc(var(--footer-brightness) * .30); transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: calc(var(--footer-brightness) * .46); transform: translate3d(-.5%, .35%, 0) scale(1.03); }
}
.footer-top { display: grid; grid-template-columns: 1fr repeat(4, auto); gap: 48px clamp(40px, 5vw, 88px); align-items: start; }      /* Products, Company, Legal, Contact */
.footer-line { margin: 18px 0 0; max-width: 30ch; color: var(--mute); font-size: 14px; line-height: 1.55; }
.footer .brand img { width: 48px; }
.footer .brand span { font-size: 16px; }
.footer-col h4 { margin: 0 0 20px; color: var(--mute); font-family: var(--brand); font-size: 9.5px; font-weight: 400; letter-spacing: .25em; text-transform: uppercase; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.footer-col a { font-size: 15px; display: inline-block; }
.footer-col li { color: var(--ink-2); font-size: 15px; }      /* a line that is not a link, set like the links */
.footer-bottom {
  margin-top: clamp(110px, 18svh, 240px);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px;
  color: var(--mute); font-size: 13px;
}
.footer-bottom nav { display: flex; gap: 28px; }
.footer-bottom nav a { transition: color .3s ease; }
.footer-bottom nav a:hover { color: var(--ink); }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .hero { padding-top: 104px; }
  .hero--page { padding-top: 128px; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav .wrap { display: flex; justify-content: space-between; }
  .nav-links { display: none; }
}
@media (max-width: 700px) {
  .ruled > li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .ruled > li > p { grid-column: 2; }
}
@media (max-width: 600px) {
  .nav { padding-block: 18px; }
  .nav .brand span { display: none; }
  .hero { padding-inline: 20px; }
  .hero-copy { gap: 24px; }
  .hero-glow { --gw: 175vw; }
  .statement { min-height: 74svh; }
  .stats { grid-template-columns: 1fr; gap: 34px; }
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 36px 20px; }      /* two by two on a phone (2026-10-18), not one long column */
  .footer-brand { grid-column: 1 / -1; }
  .footer-col a { overflow-wrap: anywhere; }
  .footer-bottom { margin-top: 82px; }
}

/* ---------- reduced motion ----------
   Everything still shows; nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav { transition: none; }
  .nav[data-away="1"] { transform: none; }
  .brand .markmark polygon { opacity: 1; animation: none; }
  .hero-glow, .hero-enter, [data-reveal] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .fill-word { color: var(--ink) !important; transition: none !important; }
  .field:focus-within::after { animation: none; }
  .footer { --dawn: 1 !important; --footer-brightness: 1 !important; }
  .footer-air.drifting { animation: none; opacity: calc(var(--footer-brightness) * .32); }
}

/* ---------- the logo: the finished artwork (2026-10-17) ----------
   The product team's logo, traced to vectors: the mark, then DATUM, spaced and sized as their horizontal
   lockup (38px tall in the nav, 36px in the footer; their minimum is 30, but at 30 the strokes' fine tails
   drop below a pixel and read as cut off). Its orange is the logo's own and never
   follows the accent. */
.brand:has([data-logo]) { gap: 14.67px; }
.brand .markmark[data-logo] { width: 72.88px; height: 38px; flex: none; }
.brand .markmark[data-logo] .s1 { fill: #ff6a1a; }
.brand .wordmark[data-logo] { display: block; width: 115.11px; height: 10.41px; flex: none; fill: var(--ink, #f5f2ef); }
.footer .brand:has([data-logo]) { gap: 13.89px; }
.footer .brand .markmark[data-logo] { width: 69.05px; height: 36px; }
.footer .brand .wordmark[data-logo] { width: 109.05px; height: 9.86px; }
/* phones: the mark alone, at the brand's smallest for it (64px wide), as the nav had it: the whole lockup crowds the buttons */
@media (max-width: 600px) { .nav .brand .wordmark[data-logo] { display: none; } .nav .brand .markmark[data-logo] { width: 64px; height: 33.37px; } }