/* ══════════════════════════════════════════════════════════════
   car company — care logistics
   Design language: mono eyelash labels · serif display ·
   dark/light panels · 1px-gap chip buttons · dashed zinc hairlines
   ══════════════════════════════════════════════════════════════ */

:root {
  --dark: #0f0e10;
  --dark-2: #161514;
  --light: #f7f6f3;
  --panel: #ecebe5;
  --orange: #e6674b;
  --blue: #4463d4;
  --green: #5fa77f;
  --red: #c04848;
  --yellow: #f5d144;
  --coral: #e6674b;

  /* Figure inks. The stat numbers moved from a dark surface to paper, where the
     bright accents fall to around 3:1 against --light. These are the same hues
     taken down far enough to read comfortably at display size. */
  --coral-ink: #c9502f;
  --gold-ink: #a67c00;
  --green-ink: #47876a;

  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #9f9fa9;
  --zinc-500: #71717b;
  --zinc-600: #52525c;
  --zinc-700: #3f3f47;
  --zinc-800: #27272a;
  --zinc-900: #18181b;

  --font-mono: "Fragment Mono", "Courier New", monospace;
  --font-serif: "Newsreader", "Times New Roman", serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --nav-h: 80px;
  --pad-x: 24px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Protection gradients, from the imagery guideline (03) by way of the Paper
     handoff. Type never sits on a raw photograph; the scrim reaches 82% at the
     edge and clears by 42% in. Only the full-bleed band needs these tokens —
     every caption on the page sits outside its frame. The panel 02 frame has its
     own left-edge blend, which is for joining it to the panel, not protection. */
  --gradient-protect-dark: linear-gradient(to top, rgba(15, 14, 16, 0.82) 0%, rgba(15, 14, 16, 0) 42%);
  --gradient-vignette-dark: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(15, 14, 16, 0.6) 100%);
  --gradient-protect-light: linear-gradient(to top, rgba(247, 246, 243, 0.88) 0%, rgba(247, 246, 243, 0) 42%);
  --gradient-vignette-light: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(247, 246, 243, 0.65) 100%);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scrollbar-width: thin;
  background: var(--dark);
  color-scheme: dark;
}
html[data-theme="light"] {
  background: var(--light);
  color-scheme: light;
}
html, body { width: 100%; min-height: 100%; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--dark);
  color: var(--dark);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Dark mode: a 1px paper hairline on all four sides, including the top. The
   window already rounds the left, right and bottom against html; without this
   the top edge stays square and unstroked. */
html:not([data-theme="light"]) body::after {
  content: "";
  position: fixed;
  inset: 0;
  border: 1px solid rgba(247, 246, 243, 0.22);
  border-radius: 2px;
  pointer-events: none;
  z-index: 101;
}
body[data-loading="true"] { overflow: hidden; height: 100vh; }
html[data-skip-loader] .loading-screen { display: none; }
html[data-skip-loader] body[data-loading="true"] { overflow: visible; height: auto; }

img, svg { display: block; max-width: 100%; }
canvas { display: block; }
/* Beats the layout display values set further down, so [hidden] keeps working */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--orange); color: var(--dark); }

/* ── Utilities ── */
.container { width: 100%; padding-left: var(--pad-x); padding-right: var(--pad-x); position: relative; }
.nav-height { height: var(--nav-h); }
.section-pad { padding-top: 96px; padding-bottom: 112px; }

.bg-dark { background: var(--dark); }
.bg-dark-2 { background: var(--dark-2); }
.bg-light { background: var(--light); }
/* One step down from --light. The light run is two sections now, so this
   one shifts tone to break it up without returning to dark. */
.bg-panel { background: var(--panel); }

.text-light { color: var(--light); }
.text-dark { color: var(--dark); }
.text-orange { color: var(--orange); }
.text-coral { color: var(--coral-ink); }
.text-blue { color: var(--blue); }
.text-green { color: var(--green-ink); }
.text-red { color: var(--red); }
.text-yellow { color: var(--gold-ink); }
.text-zinc-300 { color: var(--zinc-300); }
.text-zinc-400 { color: var(--zinc-400); }
.text-zinc-500 { color: var(--zinc-500); }
.text-zinc-600 { color: var(--zinc-600); }

.text-xs {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  line-height: 1.4;
}
.text-body { font-size: 1rem; line-height: 1.55; letter-spacing: -0.01em; }
.maxw-58 { max-width: 58ch; }
.maxw-heading { max-width: 900px; }

/* ── Typography ── */
.h1 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.9rem, 8.4vw, 7.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.h1 .dim { opacity: 0.5; }
.dim-dark { opacity: 0.45; }

.h2-serif {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}
.h2-display {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 22ch;
}
/* Inner-page titles. About and Join are the same level of heading on the same
   kind of page, so they share one scale — each carrying its own clamp is how
   they ended up different sizes. Only the measure below is per-page. */
.about-title,
.join-title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 5.1rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.text-span-light { opacity: 0.5; }

/* ── Eyelash (numbered mono chips) ── */
.eyelash {
  display: flex;
  gap: 1px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  z-index: 1;
  color: var(--light);
}
.eyelash-num, .eyelash-label, .eyelash-sep {
  display: flex;
  align-items: center;
  min-height: 16px;
  padding: 4px 5px;
  background: var(--zinc-800);
  transition: background-color 0.3s, color 0.3s;
}
.eyelash-num { border-radius: 2px 0 0 2px; }
.eyelash-label { border-radius: 0 2px 2px 0; }
.bg-light .eyelash { color: var(--light); }
.eyelash.is-chip-light { color: var(--zinc-700); }
.eyelash.is-chip-light .eyelash-num,
.eyelash.is-chip-light .eyelash-label { background: var(--light); }
.eyelash.is-chip-zinc { color: var(--zinc-400); }
.eyelash.is-plain { color: var(--zinc-500); margin-bottom: 16px; }
.eyelash.is-plain .eyelash-num.is-panel { background: var(--panel); color: var(--dark); }
.eyelash.is-plain .eyelash-sep { background: transparent; padding: 4px 2px; }

/* ── Button (split chip + rolling label + sliding arrows) ── */
.btn {
  display: flex;
  gap: 1px;
  height: 32px;
  color: var(--light);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.btn-text {
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--blue);
  flex: 1;
  min-width: 0;
}
.btn-text-inner { overflow: hidden; position: relative; display: block; }
.btn-text-inner > span { display: inline-block; position: relative; transition: transform 0.4s var(--ease-out); }
.btn-text-inner > span::before {
  content: attr(data-hover);
  position: absolute;
  left: 0;
  top: 100%;
}
.btn:hover .btn-text-inner > span { transform: translateY(-100%); }
.btn-icon {
  width: 32px;
  background: var(--blue);
  flex: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-inner { position: relative; width: 14px; height: 14px; }
.btn-arrow { position: absolute; inset: 0; width: 14px; height: 14px; transition: transform 0.4s var(--ease-out); }
.btn-arrow-2 { transform: translate(-100%, 100%); }
.btn:hover .btn-arrow-1 { transform: translate(100%, -100%); }
.btn:hover .btn-arrow-2 { transform: translate(0, 0); }
.btn-lg { height: 44px; font-size: 1rem; }
.btn-lg .btn-icon { width: 44px; }
.btn-full { width: 100%; }
.btn-to-yellow .btn-text, .btn-to-yellow .btn-icon { transition: background-color 0.4s, color 0.4s; }
.btn-to-yellow:hover .btn-text, .btn-to-yellow:hover .btn-icon { background: var(--yellow); color: var(--dark); }

/* ── Lockup ──
   Seam mark + one-word "carcompany", referenced by <use>. Fill is currentColor,
   so it picks up nav ink and theme changes. Never set below the 130px
   lockup minimum from the logo package. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wordmark { width: 100%; height: auto; fill: currentColor; }
.wordmark-nav { width: 158px; }
.wordmark-loader { width: 210px; }
.wordmark-footer { width: 248px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Header ── */
.header {
  --nav-ink: var(--light);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: transform 0.5s var(--ease-out);
}
.header[data-ink="dark"] { --nav-ink: var(--dark); }
.header .container { padding-top: 24px; }
body[data-scroll-dir="down"] .header { transform: translateY(-110%); }
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; position: relative; }
.nav-left {
  display: flex;
  align-items: center;
  height: 32px;
  color: var(--nav-ink);
  transition: color 0.35s;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  padding-right: 24px;
}
.nav-mark {
  flex: none;
  width: 26px;
  height: 20px;
  overflow: visible;
}
/* Hover collapses "carcompany" into "carco": trailing letters dissolve.
   "co" is already docked (one-word wordmark); dock distance is 0. */
.cc-morph {
  display: block;
  height: 24px;
  width: auto;
  overflow: visible;
  /* The viewBox is taller than the letterforms (descender room below the
     baseline), so a centred box leaves the word sitting high against the
     mark and the nav text. */
  transform: translateY(3px);
}
.cc-morph .cc-rm { transition: opacity .35s ease, filter .35s ease; }
a:hover .cc-morph .cc-rm,
a:focus-visible .cc-morph .cc-rm { opacity: 0; filter: blur(6px); }
@media (prefers-reduced-motion: reduce) {
  .cc-morph .cc-rm { transition: none; }
}
.nav-items { display: flex; list-style: none; }
/* Uppercase Fragment Mono, matching the rest of the chrome. nowrap keeps
   "What we move" from breaking at laptop widths. */
.nav-item-link {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--nav-ink);
  opacity: 0.75;
  transition: opacity 0.3s, color 0.35s;
  height: 32px;
}
.nav-item-link:hover { opacity: 1; }
.nav-item-link[aria-current="page"] { opacity: 1; }
/* Section links on the left, About / Join plus the CTA on the right */
@media (max-width: 1240px) {
  .nav-item-link { padding: 0 8px; }
  .nav-logo { padding-right: 16px; }
}

.nav-right { display: flex; align-items: center; gap: 8px; }
.theme-toggle {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--nav-ink);
  opacity: 0.75;
  transition: opacity 0.3s, color 0.35s;
}
.theme-toggle:hover { opacity: 1; }
.tt-option { display: flex; align-items: center; gap: 7px; }
.tt-option svg { width: 13px; height: 13px; flex: none; }
[data-theme="light"] .tt-light { display: none; }
html:not([data-theme="light"]) .tt-dark { display: none; }
.theme-toggle.is-overlay { mix-blend-mode: normal; color: var(--zinc-500); padding: 0; }

.nav-burger { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; }
.nav-burger-grid {
  display: grid;
  grid-template-columns: repeat(3, 2px);
  grid-template-rows: repeat(3, 2px);
  gap: 4px;
}
.nav-burger-grid i { background: var(--nav-ink); border-radius: 2px; transition: transform 0.4s var(--ease-out), opacity 0.3s, background-color 0.35s; }
/* When the menu overlay is open, the burger sits over the dark overlay */
.header[data-nav="open"] .nav-burger-grid i { background: var(--light); }
.header[data-nav="open"] .nav-burger-grid i:nth-child(even) { opacity: 0; transform: scale(0); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad-x);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
  z-index: -1;
}
.header[data-nav="open"] .nav-overlay { opacity: 1; pointer-events: auto; }
.nav-overlay ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.nav-overlay a {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  letter-spacing: -0.03em;
  color: var(--light);
  text-decoration: none;
  line-height: 1.15;
}
.nav-overlay-foot {
  position: absolute;
  bottom: 32px; left: var(--pad-x); right: var(--pad-x);
  display: flex;
  justify-content: space-between;
  color: var(--zinc-500);
}

/* ── Loader ── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}
.loader-bg { position: absolute; inset: 0; background: var(--dark); }
.loader-center { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.counter-outer { width: min(360px, 62vw); display: flex; justify-content: flex-end; }
.counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--zinc-400);
}
.counter-line {
  width: min(360px, 62vw);
  height: 2px;
  border-radius: 999px;
  background: rgba(247, 246, 243, 0.15);
  overflow: hidden;
}
.counter-fill {
  width: 100%; height: 100%;
  border-radius: inherit;
  background: rgba(247, 246, 243, 0.95);
  transform-origin: left center;
  transform: scaleX(0);
}
.loader-logo { margin-top: 16px; }

/* ── Hero stack ──
   Two panels, one wipe. Hero holds for about two thirds of a screen, then
   the gap wipes up and sits until a second scroll takes you into page 3.
   The extra height is the rest on page 2 — without it, wheel inertia runs
   the wipe and the next section together. */
.stack { height: 360vh; position: relative; }
.stack-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.panel-1 { z-index: 1; }
.panel-2 { z-index: 2; }
.panel-inner { flex: 1; display: flex; flex-direction: column; }
.panel-2 { clip-path: inset(100% 0 0 0); will-change: clip-path; }
.stack-overlayer {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--dark);
  opacity: 0;
  pointer-events: none;
}

#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel-1::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(15, 14, 16, 0.82) 0%, rgba(15, 14, 16, 0) 42%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(15, 14, 16, 0.6) 100%);
}
.panel-1 .panel-inner { z-index: 1; }

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 24px;
  padding-bottom: 40px;
  position: relative;
}
.hero-content .eyelash { position: absolute; top: 24px; left: 0; }
.hero-content .h1 { max-width: 17ch; margin-bottom: 40px; }
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.hero-sub { max-width: 52ch; font-size: 1.0625rem; line-height: 1.55; letter-spacing: -0.01em; }
.hero-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  flex: none;
}
.hero-scroll-arrow { width: 10px; height: 24px; animation: scroll-nudge 2.2s var(--ease-out) infinite; }
@keyframes scroll-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Photograph filling the column beside the type at full panel height. Its left
   edge is pinned past the text column so type never crosses it, which also means
   it only earns its place once the viewport can spare the width. A light
   left-edge fade joins it to the panel rather than ending on a hard edge. */
.panel-2-photo {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pad-x) + 820px);
  right: 0;
  overflow: hidden;
  pointer-events: none;
}
@media (min-width: 1440px) {
  .panel-2-photo { display: block; }
}
.panel-2-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 70%;
}
.panel-2-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(22, 21, 20, 0.55) 0%, rgba(22, 21, 20, 0) 16%);
}
.panel-2 .panel-inner { position: relative; z-index: 1; }

/* panel 2 layout */
.panel-2-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 24px;
  padding-bottom: 56px;
}
.panel-2-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 42rem;
  text-align: left;
}
.panel-2-claim,
.panel-2-cases {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.panel-2-claim .h2-serif { margin-bottom: 0; }
.panel-2-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--zinc-300);
  max-width: 18ch;
}
.panel-2-fails {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel-2-fails li {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--light);
}
.panel-2-cases .text-body { max-width: 42ch; }

/* ── What we move ──
   First paper section after the stack, so it carries the open-up wash that
   used to live on the evidence panel. Photographs and statistics sit under
   the four offering cards. */
.section-move { position: relative; }
.section-move::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(68, 99, 212, 0.07), transparent 60%),
    radial-gradient(70% 55% at 10% 100%, rgba(230, 103, 75, 0.06), transparent 60%);
  pointer-events: none;
}

/* Six figures, so three columns lands two even rows and gives the
   before-and-after figure enough width to stay near full size. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 32px;
}
.stat-number {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.stat-text {
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  max-width: 230px;
  margin-top: 10px;
  opacity: 0.85;
}
/* Citations for the six figures are kept in CONTENT.md, not shown on the page */

.move-wrapper {
  display: flex;
  gap: 8px;
  margin-top: 56px;
}
.move-item {
  flex: 1;
  min-width: 0;
}
.move-hr-wrapper { height: 1px; background: #dcdad3; margin-bottom: 24px; }
.move-visual {
  background: var(--panel);
  aspect-ratio: 4 / 4.4;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 2px;
}
.move-visual svg { width: 78%; height: auto; }
.move-meta { display: flex; flex-direction: column; gap: 8px; padding-right: 16px; }
.move-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* The named services, inside their card. A dashed hairline separates them from
   the description above so the card reads as a claim and then its offerings,
   rather than as one long block. */
.move-service-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px dashed rgba(15, 14, 16, 0.22);
}
.move-service-name {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--dark);
  margin-bottom: 8px;
}
.move-service-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--zinc-600);
}

/* ── Photography ──
   The frames are deliberately unfiltered: the grade from the imagery guideline
   (02) is being baked into the files themselves rather than approximated here,
   so anything below is layout only. The hairline and the caption do the work of
   making a photograph read as a document rather than as decoration. */
.figure { display: flex; flex-direction: column; gap: 16px; }
.figure-frame {
  position: relative;
  overflow: hidden;
  background: var(--zinc-200);
  border: 1px solid rgba(15, 14, 16, 0.14);
}
.figure-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Aspect held by the container, so the frame reserves its space before the
   file loads. Images arriving late would otherwise shift every ScrollTrigger
   position below them. */
.figure-frame.is-portrait { aspect-ratio: 4 / 5; }
.figure-frame.is-wide { aspect-ratio: 16 / 10; }
.figure-frame.is-panorama { aspect-ratio: 16 / 9; }
.figure-caption {
  color: var(--zinc-500);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  max-width: 46ch;
  padding-left: 14px;
  border-left: 1px solid rgba(15, 14, 16, 0.18);
}
.figure.is-on-dark .figure-frame { border-color: rgba(247, 246, 243, 0.16); background: var(--zinc-900); }
.figure.is-on-dark .figure-caption { color: var(--zinc-400); border-left-color: rgba(247, 246, 243, 0.2); }

/* The sources are 1024px on the long edge. The rest of the page runs edge to
   edge, but a photograph blown past its native width just looks soft, so the
   frames are inset instead. Raise these caps only when the files are regenerated
   larger — see assets/images/GENERATION-LOG.md. */
.figure-pair {
  margin: 88px 0 96px;
  padding-top: 56px;
  border-top: 1px solid rgba(15, 14, 16, 0.15);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1440px;
}
.figure-wide { margin-top: 88px; max-width: 1120px; }
.figure-wide .figure-caption { max-width: 62ch; }

/* ── Full-bleed threshold band ── */
.photo-band { position: relative; background: var(--dark); }
/* Capped so each 819px frame renders below its native width rather than above
   it. Widen this only when the sources are regenerated larger. */
.photo-band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 1440px; margin: 0 auto; }
.photo-band-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--zinc-900); }
.photo-band-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Guideline 03: the fixed header is type, and a bright doorway passes under it
   on the way down. Protect it rather than hope. */
.photo-band-grid::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(15, 14, 16, 0.82) 0%, rgba(15, 14, 16, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.photo-band-caption {
  margin-top: 32px;
  color: var(--zinc-400);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  max-width: 58ch;
  padding-left: 14px;
  border-left: 1px solid rgba(247, 246, 243, 0.2);
}

/* ── How it works ── */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.step-item { display: flex; flex-direction: column; gap: 12px; }
.step-item .eyelash { margin-bottom: 0; }
.step-rule { height: 1px; background: rgba(15, 14, 16, 0.22); margin-bottom: 12px; }
.step-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* The plain eyelash chip is --panel, which disappears on a --panel surface */
.section-how .eyelash.is-plain .eyelash-num.is-panel { background: var(--light); }

/* ── Who we serve ── */
.serve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 64px;
}
.serve-card {
  border: 1px dashed var(--zinc-700);
  border-radius: 2px;
  padding: 32px 28px 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
  transition: border-color 0.35s, background-color 0.35s;
}
.serve-card:hover { border-color: var(--zinc-500); background: rgba(24, 24, 27, 0.6); }
.serve-tag {
  color: var(--dark);
  background: var(--light);
  align-self: flex-start;
  padding: 4px 6px;
  border-radius: 2px;
}
.serve-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--light);
  max-width: 18ch;
  flex: 1;
}
.serve-card .text-body { max-width: 48ch; }

/* ── Closing ── */
.section-closing {
  position: relative;
  overflow: clip;
  min-height: 88vh;
  display: flex;
  align-items: stretch;
}
.closing-contours { position: absolute; inset: -10% 0; opacity: 0.5; }
.closing-contours svg { width: 100%; height: 100%; }
.closing-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 140px;
  padding-bottom: 96px;
  width: 100%;
}
.closing-line {
  max-width: 12ch;
  margin-bottom: 56px;
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
}

/* ── Closing contact ──
   The qualifying form now lives in the footer (#contact). This band keeps
   the headline, the mail address, and the emergency disclaimer. */
.closing-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 40px;
  border-top: 1px dashed var(--zinc-700);
}
.closing-mail {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--light);
  text-decoration: none;
  border-bottom: 1px solid var(--zinc-700);
  padding-bottom: 4px;
  transition: border-color 0.3s, color 0.3s;
}
.closing-mail:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
.closing-legal { max-width: 30ch; }

/* ── Footer ── */
.footer-line { border-top: 1px dashed var(--zinc-700); background: var(--dark); }
.footer { background: var(--dark); color: var(--light); position: relative; }
.footer-top {
  display: grid;
  grid-template-columns: 4fr 3fr 5fr;
}
.footer-col { padding: 40px 32px; border-bottom: 1px dashed var(--zinc-700); }
.footer-col-1 { padding-left: var(--pad-x); border-right: 1px dashed var(--zinc-700); }
.footer-col-2 { border-right: 1px dashed var(--zinc-700); }
.footer-col-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding-right: var(--pad-x);
}
.footer-col-1-inner { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.footer-logo { display: flex; }
.footer-boiler { font-size: 0.875rem; line-height: 1.55; max-width: 46ch; }
.footer-inline-link { color: var(--zinc-300); text-decoration: underline; text-underline-offset: 2px; }
.footer-inline-link:hover { color: var(--light); }
.footer-form { margin-top: 32px; display: flex; flex-direction: column; position: relative; }
.footer-form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.footer-form-input {
  width: 100%;
  height: 36px;
  background: var(--zinc-900);
  border: 1px solid var(--zinc-800);
  color: var(--light);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 0;
  outline: none;
}
.footer-form-input:focus { border-color: var(--zinc-700); }
.footer-form-input::placeholder { color: var(--zinc-400); font-family: var(--font-mono); }
.footer-form-message {
  height: auto;
  min-height: 96px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 10px 12px;
  resize: vertical;
}
.footer-form-message::placeholder {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
}
.footer-form-note { margin-top: 10px; }
.footer-form .btn[disabled] { opacity: 0.55; pointer-events: none; }
#contact { scroll-margin-top: calc(var(--nav-h) + 12px); }
.footer-list { list-style: none; display: flex; flex-direction: column; gap: 15px; margin-top: 28px; }
.footer-link {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--zinc-400);
  text-decoration: none;
  line-height: 1.1;
}
.footer-link span {
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: bottom 0 right;
  background-size: 0% 1px;
  transition: background-size 0.3s, background-position 0s 0.3s, color 0.3s;
}
.footer-link:hover span {
  background-size: 100% 1px;
  background-position: bottom 0 left;
  color: var(--light);
}
.footer-bottom {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
}
.footer-bottom-col-1 { padding: 16px var(--pad-x); border-right: 1px dashed var(--zinc-700); }
.footer-bottom-col-1 p { max-width: 72ch; }
.footer-bottom-col-2 { padding: 16px var(--pad-x) 16px 32px; }
.footer-list-h { list-style: none; display: flex; gap: 24px; }
.footer-bars { padding-top: 24px; }
.fbar { height: 4px; background: #fff; }
.fbar-gap { height: 4px; }

/* ══════════ Light landing ══════════
   Light mode only changes the entry: the loader and the hero panel go
   light; everything past the first wipe keeps the dark design. */
[data-theme="light"] .panel-1 { background: var(--light); }
[data-theme="light"] .panel-1 .text-light { color: var(--dark); }
[data-theme="light"] .panel-1 .text-zinc-300 { color: var(--zinc-600); }
[data-theme="light"] .panel-1::after {
  background:
    linear-gradient(to top, rgba(247, 246, 243, 0.88) 0%, rgba(247, 246, 243, 0) 42%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(247, 246, 243, 0.65) 100%);
}

[data-theme="light"] .loading-screen { color: var(--dark); }
[data-theme="light"] .loader-bg { background: var(--light); }
[data-theme="light"] .counter { color: var(--zinc-500); }
[data-theme="light"] .counter-line { background: rgba(15, 14, 16, 0.14); }
[data-theme="light"] .counter-fill { background: rgba(15, 14, 16, 0.9); }

/* ══════════ Standalone documents ══════════
   privacy.html and terms.html. Paper surface, one column, no scripts — these
   are read, not scrolled through. */
.doc-body { background: var(--light); color: var(--dark); }
.doc-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px var(--pad-x);
  border-bottom: 1px dashed rgba(15, 14, 16, 0.28);
}
.doc-home, .doc-back {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.doc-back { color: var(--zinc-600); transition: color 0.3s; }
.doc-back:hover { color: var(--dark); }
.doc {
  max-width: 68ch;
  margin: 0 auto;
  padding: 88px var(--pad-x) 112px;
}
.doc-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.doc-lede { font-size: 1.125rem; line-height: 1.55; margin-top: 28px; color: var(--zinc-700); }
.doc h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(15, 14, 16, 0.2);
}
.doc h2 + p { margin-top: 16px; }
.doc p + p { margin-top: 16px; }
.doc p { line-height: 1.6; color: var(--zinc-700); }
.doc ul { margin-top: 16px; padding-left: 20px; color: var(--zinc-700); }
.doc li { line-height: 1.6; margin-bottom: 8px; }
.doc a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
.doc-updated { margin-top: 56px; color: var(--zinc-500) !important; }
.doc-foot {
  padding: 24px var(--pad-x);
  border-top: 1px dashed rgba(15, 14, 16, 0.28);
  color: var(--zinc-500);
}

/* ══════════ Reserved image slot ══════════
   About's plate holds its aspect ratio before the photograph exists, so nothing
   shifts when the file lands. Replace the inner span with an <img> and the slot
   styles fall away. */
.figure-frame.is-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-style: dashed;
  border-color: rgba(15, 14, 16, 0.22);
}
.slot-label { color: var(--zinc-500); }

/* ══════════ About ══════════
   The record. An asymmetric masthead over a contents rail, prose in ruled
   columns, solid hairlines, paper from the header to the footer — no dark band
   anywhere. Join is deliberately the opposite page; keep them apart. */
.page-about { background: var(--light); color: var(--dark); }
.about-masthead { position: relative; }
.about-masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(68, 99, 212, 0.07), transparent 60%),
    radial-gradient(70% 55% at 10% 100%, rgba(230, 103, 75, 0.06), transparent 60%);
  pointer-events: none;
}
.about-masthead-pad { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 96px; }
/* The headline sets the column width and the rail hangs off it, which is what
   keeps this page from reading as another centred intro block. */
.about-masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(15, 14, 16, 0.2);
}
.about-title { max-width: 15ch; }
.about-rail {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 28px;
  border-left: 1px solid rgba(15, 14, 16, 0.2);
}
.about-lede {
  max-width: 42ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--zinc-600);
}

.about-leadership blockquote { margin: 0; }
/* Portrait beside the quote. The column is capped at 260px, comfortably under
   the file's native 640px, so the frame never renders upscaled even at 2x. */
.about-leadership-grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.about-portrait { margin: 0; }
.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}
.about-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.55rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
  max-width: 22ch;
  color: var(--dark);
}
.about-quote-attr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 32px;
}
.about-quote-name {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.about-quote-role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--zinc-500);
  line-height: 1.4;
}

.about-standfirst {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 30ch;
  color: var(--dark);
}
.about-story-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 62ch;
  margin-top: 40px;
}
.about-story-copy p {
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--zinc-600);
}

/* Values, mission and vision are the page's closing statement, so they get a
   surface of their own and full-width ruled rows at display size. Three narrow
   cells read as a footnote, which is what these were before. */
.about-stand { border-top: 1px solid rgba(15, 14, 16, 0.22); }
.about-stand-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  gap: 40px;
  align-items: baseline;
  padding: 44px 0;
  border-bottom: 1px solid rgba(15, 14, 16, 0.22);
}
.about-stand-label {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--zinc-500);
  line-height: 1.4;
}
.about-stand-num { color: var(--blue); }
.about-stand-text {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 34ch;
  color: var(--dark);
}
.about-values {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ══════════ Join our team ══════════
   The posting. Dark photographic bookends around a paper middle, filled spec
   cells instead of hairline rows, coral numerals, and the same action offered
   twice. Nothing here is shared with About beyond the site chrome. */
.page-join { background: var(--light); color: var(--dark); }
.join-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88vh, 860px);
  overflow: clip;
}
.join-hero-media { position: absolute; inset: 0; }
.join-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Guideline 03: type never sits on a raw frame, and the fixed header passes
   over the top of this one. Both edges are protected before the file exists. */
.join-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-protect-dark), var(--gradient-vignette-dark);
  pointer-events: none;
}
.join-hero-inner {
  position: relative;
  width: 100%;
  padding-top: calc(var(--nav-h) + 96px);
  padding-bottom: 72px;
}
.join-title { max-width: 18ch; }
.join-hero-foot {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px dashed var(--zinc-700);
}
.join-lede {
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--zinc-300);
}

.join-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 62ch;
}
.join-copy p {
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--zinc-600);
}
/* The first paragraph defines the role, so it leads at display size */
.join-copy p:first-child {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.join-lead {
  margin-top: 8px;
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--dark);
}
.join-standard {
  list-style: none;
  display: flex;
  flex-direction: column;
  max-width: 62ch;
  margin-top: 28px;
  border-top: 1px dashed rgba(15, 14, 16, 0.28);
}
.join-standard li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px dashed rgba(15, 14, 16, 0.28);
}
.join-standard .eyelash { margin-bottom: 0; }
.join-standard p {
  padding-top: 2px;
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--zinc-600);
}
/* The plain eyelash chip is --panel, which disappears on this surface */
.join-standard-section .eyelash.is-plain .eyelash-num.is-panel { background: var(--light); }

.join-closing-inner { padding-top: 104px; padding-bottom: 112px; }
.join-closing-line {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 26ch;
}
.join-closing-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px dashed var(--zinc-700);
}
.join-closing-note { font-size: 0.875rem; line-height: 1.55; max-width: 34ch; }
.join-closing-mail {
  color: var(--zinc-300);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s;
}
.join-closing-mail:hover { color: var(--yellow); }
.join-cta { flex: none; }

/* ── Reveal defaults (JS enhances) ── */
[data-reveal] { will-change: transform, opacity; }
.split-line { overflow: clip; }

/* ══════════ Responsive ══════════ */
/* A before-and-after figure carries twice the characters of a plain one, and
   .stat-number never wraps. Three columns leave it enough room to sit only
   slightly below its neighbours; below that the cells are wider still. */
@media (min-width: 992px) {
  .stat-number.is-range { font-size: clamp(1.9rem, 3.3vw, 3.4rem); }
}

@media (max-width: 991px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .step-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .figure-pair { margin: 64px 0 72px; gap: 20px; }
  .figure-wide { margin-top: 64px; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-col-3 { grid-column: 1 / -1; border-right: 0; padding-left: var(--pad-x); }

  /* About: the rail stops hanging off the headline and stacks under it, so its
     hairline moves from the left edge to the top. */
  .about-masthead-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .about-rail { padding-left: 0; padding-top: 32px; border-left: 0; border-top: 1px solid rgba(15, 14, 16, 0.2); }
  .about-stand-row { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  /* Portrait sits above the quote, held narrow so it stays identification
     rather than becoming the section's main image */
  .about-leadership-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-portrait { max-width: 200px; }
}

@media (max-height: 700px) {
  .panel-2-grid { padding-top: 12px; padding-bottom: 28px; }
  .panel-2-body { gap: 16px; }
  .panel-2-cases { gap: 12px; }
}

@media (max-width: 767px) {
  :root { --nav-h: 68px; --pad-x: 18px; }
  .section-pad { padding-top: 72px; padding-bottom: 80px; }

  .nav-items, .nav-right .btn { display: none; }
  .nav-burger { display: flex; order: 3; }
  .theme-toggle { padding: 0 8px; }
  .wordmark-nav { width: 141px; }
  .wordmark-loader { width: 176px; }
  .wordmark-footer { width: 210px; }
  .nav-overlay { z-index: -1; }

  .hero-content .h1 { margin-bottom: 28px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-scroll { display: none; }

  .h2-serif { margin-bottom: 28px; }
  .panel-2-grid { padding-bottom: 32px; }
  .panel-2-body { gap: 20px; }
  .panel-2-claim,
  .panel-2-cases { gap: 12px; }
  .panel-2-fails { gap: 4px; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 36px 16px; }

  .step-grid { grid-template-columns: 1fr; gap: 36px; }

  /* One frame per row on a phone. Two 4:5 frames side by side at this width are
     stamps, and the band's diptych stops reading as a sequence. */
  .figure-pair { grid-template-columns: 1fr; gap: 40px; margin: 56px 0 64px; padding-top: 40px; }
  .figure-wide { margin-top: 56px; }
  .figure-frame.is-wide { aspect-ratio: 4 / 3; }
  .photo-band-grid { grid-template-columns: 1fr; gap: 4px; }
  .photo-band-frame { aspect-ratio: 3 / 4; }
  .photo-band-grid::before { height: 120px; }

  .move-wrapper { flex-direction: column; gap: 40px; }
  .move-visual { aspect-ratio: 16 / 10; }
  .move-visual svg { width: 46%; }

  .serve-grid { grid-template-columns: 1fr; }
  .serve-card { min-height: 0; }

  .section-closing { min-height: 0; }
  .closing-inner { padding-top: 104px; }
  .closing-line { margin-bottom: 40px; }
  .closing-foot { gap: 24px; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-col-1, .footer-col-2 { border-right: 0; }
  .footer-col-3 { grid-template-columns: 1fr 1fr; }
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-bottom-col-1 { border-right: 0; border-bottom: 1px dashed var(--zinc-700); }

  .about-masthead-pad { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 72px; }
  .about-masthead-grid { padding-bottom: 36px; }

  /* A phone has no height to spare for a hero that fills the viewport, so this
     one is sized by its type and the frame follows it. */
  .join-hero { min-height: 0; }
  .join-hero-inner { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 56px; }
  .join-cta { width: 100%; }
  .join-closing-inner { padding-top: 80px; padding-bottom: 88px; }
  .join-closing-foot { flex-direction: column; align-items: stretch; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}