/* ============================================================
   MAPPEX — design tokens
   ============================================================ */
:root {
  /* Neutral ramp */
  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #33363d;
  --neutral-800: #202124;
  --neutral-900: #0f1115;

  /* Blue — primary accent */
  --blue-50: #eef4ff;
  --blue-100: #dbe7fe;
  --blue-200: #bcd4fd;
  --blue-300: #8fb8fb;
  --blue-400: #5b93f6;
  --blue-500: #3a6af4;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a6e;

  /* Amber — sparing secondary accent (one moment per section) */
  --amber-50: #fdf3e4;
  --amber-100: #fbe6c4;
  --amber-200: #f5cf8e;
  --amber-300: #edb562;
  --amber-400: #e2963c;
  --amber-600: #b9741f;
  --amber-700: #96601b;

  /* Rust — validation / error only */
  --rust-50: #fbeae5;
  --rust-300: #d47a56;
  --rust-500: #b3452c;
  --rust-700: #8a3220;

  /* Type */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(15, 17, 21, 0.06);
  --shadow-sm: 0 4px 10px -6px rgba(18, 22, 28, 0.28);
  --shadow-md: 0 12px 28px -18px rgba(18, 22, 28, 0.35);
  --shadow-lg: 0 22px 40px -20px rgba(18, 22, 28, 0.28);
  --shadow-dark: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 10px 24px -10px rgba(29, 78, 216, 0.45);
  --shadow-accent-amber: 0 10px 24px -10px rgba(185, 116, 31, 0.4);
  --shadow-focus: 0 0 0 4px rgba(37, 99, 235, 0.15);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  --container: 1240px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .brand-marquee { animation: none !important; transform: none !important; flex-wrap: wrap; width: auto; }
  .brand-marquee-group:nth-child(2) { display: none; }}
body {
  margin: 0;
  background: var(--neutral-50);
  color: var(--neutral-800);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Safety net: nothing on the page is meant to scroll horizontally, but a
     handful of sections use scroll-driven transforms (the about-page
     timeline's slide-in and "stamp" effects) whose desktop-tuned magnitude
     can push an element past the viewport edge on narrow screens before
     it's revealed. This guarantees that never becomes a page-level
     horizontal scrollbar, regardless of any single transform's math. */
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }

::selection { background: var(--blue-600); color: var(--neutral-0); }

:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
/* Wide layout — widens the 1240px cap to 1460px and swaps the fixed gutter for
   a fluid one. */
.container--wide {
  max-width: 1460px;
  /* Content sits one bar-padding (20px) inside the navbar's edges, so the
     headline and stats line up with the M of the logo. */
  padding: 0 calc(clamp(24px, 4vw, 64px) + var(--space-5));
}
/* The navbar itself keeps the plain gutter — it is the wider outer edge. */
.site-header--float .container--wide { padding: 0 clamp(24px, 4vw, 64px); }

/* ============================================================
   Type scale
   ============================================================ */
.h-display { font-size: clamp(2.75rem, 4vw + 1.75rem, 5rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.h-1 { font-size: clamp(2.25rem, 2.2vw + 1.65rem, 3.25rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; }
.h-2 { font-size: clamp(1.75rem, 1.4vw + 1.35rem, 2.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.h-3 { font-size: clamp(1.375rem, 0.6vw + 1.2rem, 1.625rem); line-height: 1.3; font-weight: 700; }
.h-4 { font-size: 1.125rem; line-height: 1.35; font-weight: 700; }
.body-lg { font-size: 1.125rem; line-height: 1.6; }
.body { font-size: 1rem; line-height: 1.55; }
.small { font-size: 0.875rem; line-height: 1.5; }
.micro { font-size: 0.75rem; line-height: 1.4; }
.kicker { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; }
.lede { margin-top: 16px; font-size: 1.125rem; line-height: 1.6; color: var(--neutral-600); max-width: 46ch; }
.mono { font-family: var(--font-mono); }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--neutral-200);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
/* Floating navbar (index.html first; other pages join as they are rebuilt).
   A light rounded bar inset from the edges, fixed over the hero photo, with
   the links beside the logo and the language switch + CTA on the right. */
.site-header--float {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding-top: var(--space-4);
  background: none;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header--float .nav {
  position: relative;
  justify-content: flex-start;
  gap: var(--space-10);
  height: 64px;
  padding: 0 var(--space-5);
  background: rgba(243, 244, 246, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.site-header--float .nav-links { flex: 1; gap: var(--space-6); }
.site-header--float .nav-links a.btn { margin-left: auto; }
.site-header--float .nav-toggle { margin-left: auto; }
.site-header--float .nav-links a, .site-header--float .lang-switch { white-space: nowrap; }
/* Between the phone menu (720px) and full desktop spacing the bar is tight:
   close the gaps so the links stay on one line instead of wrapping */
@media (max-width: 980px) {
  .site-header--float .nav { gap: var(--space-5); }
  .site-header--float .nav-links { gap: var(--space-4); }}
/* Spanish labels are longer ("Solicitar cotización"), so tighten further just above the phone menu */
@media (min-width: 721px) and (max-width: 900px) {
  html[lang="es"] .site-header--float .nav { gap: var(--space-3); padding: 0 var(--space-4); }
  html[lang="es"] .site-header--float .nav-links { gap: var(--space-3); font-size: 0.88rem; }
  html[lang="es"] .site-header--float .nav-links a.btn { padding-left: 14px; padding-right: 14px; font-size: 0.88rem; }}
@media (min-width: 721px) and (max-width: 800px) {
  html[lang="es"] .site-header--float .nav { gap: var(--space-2); padding: 0 var(--space-3); }
  html[lang="es"] .site-header--float .nav-links { gap: var(--space-2); font-size: 0.82rem; }
  html[lang="es"] .site-header--float .nav-links a.btn { padding-left: 10px; padding-right: 10px; font-size: 0.82rem; }
  html[lang="es"] .site-header--float .brand--logo .brand-word { font-size: 26px; }}

/* Legacy lockup (hexagon mark + typed wordmark) — still on the pages that
   haven't been rebuilt yet. Removed once every page uses .brand--logo. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--neutral-900);
}
.brand svg { width: 32px; height: 32px; flex: none; color: var(--blue-600); }
.brand small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--neutral-500);
  margin-top: var(--space-1);
}
/* Logo-image lockup: mappex.png over the tagline */
.brand--logo {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
/* Wordmark set in the site font (Manrope 800) — replaces the logo image. */
.brand--logo .brand-word {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--neutral-900);
}
.brand--logo small { margin-top: 0; line-height: 1; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--neutral-700);
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--duration-fast) var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--neutral-900); }
.nav-links a.active { color: var(--neutral-900); }
.nav-links a.btn { padding: 10px var(--space-5); color: var(--neutral-0); font-weight: 700; letter-spacing: 0.01em; }
.nav-links a.active.btn { background: var(--blue-700); color: var(--neutral-0); }
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--blue-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease);
}
.nav-links a:not(.btn):hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* Language dropdown: globe + current code, menu with each language named in itself */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-left: 1px solid var(--neutral-200);
}
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--neutral-900);
  font: 700 0.82rem/1 var(--font-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lang-trigger:hover, .lang-switch.is-open .lang-trigger { background: var(--neutral-200); }
.lang-trigger:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.lang-chevron { transition: transform 0.2s var(--ease); }
.lang-switch.is-open .lang-chevron { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 60;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--neutral-0);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}
.lang-switch.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.nav-links .lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--neutral-800);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.nav-links .lang-menu a::after { content: none; }
.nav-links .lang-menu a:hover { background: var(--neutral-100); }
.nav-links .lang-menu a[aria-current="true"] { color: var(--blue-600); }
.nav-links .lang-menu a[aria-current="true"]::after {
  content: "\2713";
  position: static;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  font-size: 0.9rem;
}
/* No JavaScript: show both languages inline instead of a closed dropdown */
@media (scripting: none) {
  .lang-trigger { display: none; }
  .lang-menu { position: static; display: flex; gap: 4px; min-width: 0; padding: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: none; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--neutral-300);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle .bar {
  width: 20px;
  height: 2px;
  background: var(--neutral-900);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open .bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 13px var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease), color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--blue-600); color: var(--neutral-0); }
.btn-primary:hover {
  background: var(--blue-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn-primary:disabled, .btn-primary[disabled] { opacity: 0.5; pointer-events: none; }
.btn-ghost { border-color: var(--neutral-300); color: var(--neutral-900); background: transparent; }
.btn-ghost:hover { border-color: var(--neutral-900); }
.btn-block { width: 100%; justify-content: center; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: calc(80px + var(--space-16)) 0 0;
  border-bottom: 1px solid var(--neutral-200);
}
/* Photo hero: the picture runs edge to edge; a left-to-right dark scrim keeps
   the headline column legible while the photo shows through on the right. */
.hero {
  background-image: url("../images/hero-mining.webp");
  background-size: cover;
  background-position: 70% 60%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 17, 21, 0.9) 0%, rgba(15, 17, 21, 0.78) 38%, rgba(15, 17, 21, 0.3) 64%, rgba(15, 17, 21, 0.05) 88%);
  pointer-events: none;
}
.hero-stats-dock { margin-top: var(--space-12); position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
}
/* The one on-load entrance moment on the site that isn't scroll-triggered —
   the hero is above the fold, so the scroll-based .reveal system never gets
   a chance to fire here. A single staggered fade-and-rise across the text
   column gives the homepage's first instant the same considered motion as
   every section after it, without touching the RFQ ticket demo beside it
   (it runs on its own separate timer/animation, untouched). Reduced-motion
   users get this instantly via the site-wide transition/animation-duration
   override, same as everywhere else. */
@keyframes hero-rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero .hero-eyebrow-line,
.hero h1,
.hero .lede,
.hero .hero-actions,
.hero .hero-stats {
  animation: hero-rise-in 0.7s var(--ease) both;
}
.hero .hero-eyebrow-line { animation-delay: 0s; }
.hero h1 { animation-delay: 0.08s; }
.hero .lede { animation-delay: 0.16s; }
.hero .hero-actions { animation-delay: 0.24s; }
.hero .hero-stats { animation-delay: 0.4s; }

.hero-eyebrow-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--blue-300);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-6);
}
.hero-eyebrow-line::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--blue-400);
  flex: none;
  animation: status-pulse 1.8s ease-in-out infinite;
}
/* Hero-specific clamp: slightly under .h-display so the headline lands on
   three lines at desktop width. text-wrap: balance keeps the last line from
   stranding a single word. */
.hero h1 {
  color: var(--neutral-0);
  font-size: clamp(2.5rem, 3.4vw + 1rem, 4.25rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--blue-400); }
.hero .lede { margin-top: var(--space-6); font-size: 1.1875rem; max-width: 48ch; color: rgba(255, 255, 255, 0.85); }
.hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-10); flex-wrap: wrap; }
.hero-actions .btn { padding: 15px var(--space-8); }
.hero .btn-ghost { border-color: rgba(255, 255, 255, 0.5); color: var(--neutral-0); }
.hero .btn-ghost:hover { border-color: var(--neutral-0); background: rgba(255, 255, 255, 0.08); }

/* Impact stats — a dark full-bleed base bar docked to the bottom of the hero: hairline rules top
   and bottom, hairline dividers between cells, big mono numerals. Not cards:
   these are facts, not links, so nothing lifts or highlights on hover. The
   mono numeral treatment is reused on about.html's closer. */
.hero-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(15, 17, 21, 0.78);
  border-top: 1px solid var(--neutral-700);
  /* Content lines up with the header/hero gutters, including on very wide
     screens where the 1460px content cap kicks in. */
  --gutter: clamp(24px, 4vw, 64px);
  padding-inline: max(calc(var(--gutter) + var(--space-5)), calc((100% - 1460px) / 2 + var(--gutter) + var(--space-5)));
}
.hero-stats .stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  border-left: 1px solid var(--neutral-700);
}
.hero-stats .stat:first-child { border-left: 0; padding-left: 0; }
.hero-stats .stat b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6vw + 1.75rem, 3.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--neutral-0);
}
/* Unit after a stat numeral ("1–2 days"): smaller, in the sans, same baseline,
   so the stat stays on one line and the monospace word space doesn't gape */
.hero-stats .stat b small {
  font-family: var(--font-sans);
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.hero-stats .stat span {
  display: block;
  max-width: 40ch;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--neutral-0);
}

/* Full-bleed photo hero (About, Industries): the photo is the entire hero,
   edge to edge and full height — no card, no split column. A left-to-right
   scrim keeps the headline legible on the side people read first while the
   photo stays visible and undimmed on the right. Header is untouched — its
   existing near-opaque background already reads fine over a dark photo. */
.hero-full-bleed {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
/* Pages with the floating header: keep hero copy clear of the fixed bar */
.site-header--float ~ main .hero-full-bleed { padding-top: 96px; box-sizing: border-box; }
.hero-full-bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 17, 21, 0.92) 0%, rgba(15, 17, 21, 0.72) 38%, rgba(15, 17, 21, 0.25) 68%, rgba(15, 17, 21, 0.02) 100%);
}
/* Flex items shrink-wrap to their content's width by default instead of
   stretching to fill the row the way a normal block child would — so
   without this, .container was shrinking down to fit just the ~560px
   text block, and that smaller box was what ended up centered, not the
   real 1240px column. */
.hero-full-bleed .container { width: 100%; }
/* Lines up with the same content column as the header logo and every
   other section (.container's own left edge) — not a fixed distance from
   the true window edge, which would drift outside that column on a wide
   screen and misalign with the rest of the page. */
.hero-full-bleed-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
}
.hero-full-bleed-copy h1 { color: var(--neutral-50); }
.hero-full-bleed-copy .lede { color: rgba(240, 240, 236, 0.78); }
.hero-full-bleed-copy .btn-ghost { border-color: rgba(240, 240, 236, 0.4); color: var(--neutral-50); }
.hero-full-bleed-copy .btn-ghost:hover { border-color: var(--neutral-50); }
@media (max-width: 720px) {
  .hero-full-bleed { min-height: 420px; align-items: flex-end; padding-bottom: 48px; }
  .hero-full-bleed::before {
    background: linear-gradient(to top, rgba(15, 17, 21, 0.92) 0%, rgba(15, 17, 21, 0.55) 45%, rgba(15, 17, 21, 0.05) 80%);
  }
  .hero-full-bleed-copy { max-width: none; }}

/* About hero: taller full-bleed photo, wide container, copy bottom-left and
   the homepage impact-stats bar docked to the base (three facts here). */
.hero-full-bleed--stats {
  flex-direction: column;
  align-items: stretch;
  min-height: clamp(680px, 86vh, 820px);
  background-image: url('../images/hero-palms.webp');
}
/* Lighter scrim than the shared one: dark only behind the copy, photo at
   full brightness from mid-page right. The radial layer adds extra shade
   behind the lede, over the bright reflections on the glass tower. */
.hero-full-bleed--stats::before {
  background:
    radial-gradient(ellipse 40% 28% at 26% 66%, rgba(15, 17, 21, 0.7) 0%, rgba(15, 17, 21, 0.5) 60%, rgba(15, 17, 21, 0) 100%),
    linear-gradient(100deg, rgba(15, 17, 21, 0.7) 0%, rgba(15, 17, 21, 0.45) 32%, rgba(15, 17, 21, 0.1) 55%, rgba(15, 17, 21, 0) 70%);
}
.hero-full-bleed--stats > .container {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 0 clamp(24px, 4vw, 64px) var(--space-12);
}
.hero-full-bleed--stats .hero-full-bleed-copy { max-width: 760px; padding-top: var(--space-12); }
.hero-full-bleed--stats .hero-full-bleed-copy .lede { max-width: 56ch; }
.hero-full-bleed--stats .hero-full-bleed-copy h1 { font-size: clamp(2.75rem, 4.6vw + 1rem, 5.25rem); line-height: 1.02; }
.hero-full-bleed--stats .hero-stats { z-index: 1; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  /* Phones get a 1200x1600 portrait crop (~290 KB) instead of the 3200px
     desktop photo (~820 KB). */
  .hero-full-bleed--stats { min-height: 560px; padding-bottom: 0; background-image: url('../images/hero-palms-mobile.webp'); }
  .hero-full-bleed--stats > .container { padding-bottom: var(--space-8); }
  .hero-full-bleed--stats::before {
    background: linear-gradient(to top, rgba(15, 17, 21, 0.88) 0%, rgba(15, 17, 21, 0.74) 55%, rgba(15, 17, 21, 0.5) 80%, rgba(15, 17, 21, 0.3) 100%);
  }
  .hero-full-bleed--stats .hero-full-bleed-copy { padding-top: var(--space-16); }
  .hero-full-bleed--stats .hero-stats .stat:nth-child(n+3) { border-top: 0; }
  .hero-full-bleed--stats .hero-stats .stat:nth-child(3) { border-left: 1px solid var(--neutral-700); padding-left: var(--space-3); }
  .hero-full-bleed--stats .hero-stats { padding-inline: 24px; }
  .hero-full-bleed--stats .hero-stats .stat { padding: var(--space-5) var(--space-3); }
  .hero-full-bleed--stats .hero-stats .stat:first-child { padding-left: 0; }
  .hero-full-bleed--stats .hero-stats .stat b { font-size: 1.5rem; }
  .hero-full-bleed--stats .hero-stats .stat span { font-size: 0.8125rem; }}

/* Type-led hero (what-we-source): solid near-black, no photo. Headline left,
   lede and buttons right, bottom-aligned. Full-width container; content sits
   20px inside the navbar edges so it lines up with the logo's M. */
.hero-type {
  background: var(--neutral-900);
  color: var(--neutral-0);
  padding: 144px 0 0;
}
.hero-type .hero-type-grid { padding-bottom: clamp(48px, 5vw, 80px); }
/* Photo strip along the hero's bottom edge: muted at rest, full colour on hover */
.hero-type-strip { display: grid; grid-template-columns: repeat(6, 1fr); height: clamp(120px, 16vw, 220px); }
.hero-type-strip div {
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(0.8);
  transition: filter var(--duration-base) var(--ease);
}
.hero-type-strip div:hover { filter: none; }
.hero-type-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.hero-type h1 { color: var(--neutral-0); text-wrap: balance; }
.hero-type .lede { margin-top: 0; max-width: 42ch; color: rgba(255, 255, 255, 0.78); }
.hero-type .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-type .btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: var(--neutral-0); }
.hero-type .btn-ghost:hover { border-color: var(--neutral-0); }
@media (max-width: 980px) {
  .hero-type { padding: 120px 0 0; }
  .hero-type .hero-type-grid { grid-template-columns: 1fr; gap: var(--space-8); padding-bottom: 48px; }
  .hero-type-strip { grid-template-columns: repeat(3, 1fr); height: auto; }
  .hero-type-strip div { aspect-ratio: 4 / 3; }}

/* Matched: filled blue circle with a ring */
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   Brand strip
   ============================================================ */
.brand-strip {
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--neutral-200);
  background: var(--neutral-0);
}
/* The strip's one statement — set as a real line, not a caption. */
.brand-strip .label {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--neutral-900);
  margin-bottom: 0;
}
.brand-marquee-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.brand-strip-note {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin-top: var(--space-8);
}
.brand-strip-note a { color: var(--blue-700); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.brand-strip-note a:hover { color: var(--blue-800); }
.brand-marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 160px, black calc(100% - 160px), transparent);
  mask-image: linear-gradient(to right, transparent, black 160px, black calc(100% - 160px), transparent);
}
.brand-marquee {
  display: flex;
  width: max-content;
  gap: var(--space-12);
  animation: brand-marquee 170s linear infinite;
}
.brand-marquee:hover { animation-play-state: paused; }
.brand-marquee-b { animation-direction: reverse; }
.brand-marquee-group { display: flex; gap: var(--space-12); flex: none; }
@keyframes brand-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.brand-marquee-item {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--neutral-500); /* 4.8:1 on white; neutral-400 failed contrast */
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease);
}
/* Small square divider sitting in the gap between names */
.brand-marquee-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-6) * -1 - 2px);
  width: 4px;
  height: 4px;
  background: var(--neutral-300);
  transform: translateY(-50%) rotate(45deg);
}
.brand-marquee-item:hover { color: var(--neutral-900); }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { padding: 96px 0; }
.section-border { border-bottom: 1px solid var(--neutral-200); }
.section-alt { background: var(--neutral-100); }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head .kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--blue-700);
  margin-bottom: 14px;
  display: block;
}

/* ============================================================
   Process pin (sticky-based — exact, deterministic pin point)
   ============================================================ */
.process-pin-wrapper {
  position: relative;
  /* Flat --ink, no texture: the site's other dark sections earn their depth
     from a photo behind the gradient. Without one, a flat grid just reads
     as wallpaper — better to keep this one clean and let the step cards'
     own borders/shadows and the blur-to-focus motion carry the depth. */
  background: var(--neutral-900);
  /* height set by JS on desktop to create scroll "dwell" room; auto otherwise */
}
.process-pin-wrapper .kicker { color: var(--blue-500); }
.process-pin-wrapper .h-1 { color: var(--neutral-50); }
.process-pin-wrapper .lede { color: rgba(240, 240, 236, 0.7); }
/* The section's entrance moment: the title types in character by character as
   the pinned dwell approaches (see applyHeadReveal() in main.js), with a
   blinking caret on the last typed character; the lede fades in once the
   title has finished. Replaces an earlier scale-down zoom. Characters are
   only hidden by JS while the pin is running — static everywhere else. */
.tw-char.tw-off { visibility: hidden; }
.tw-char.tw-caret { position: relative; }
.tw-char.tw-caret::after {
  content: "";
  position: absolute;
  left: 100%; top: 0.12em; bottom: 0.08em;
  width: 0.08em;
  margin-left: 0.04em;
  background: var(--blue-500);
  animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
.process-pin-wrapper .section-head .lede {
  opacity: clamp(0, calc((var(--head-reveal, 1) - 0.6) * 5), 1);
}
.process-pin-inner {
  position: sticky;
  top: 76px; /* overridden precisely by JS to match live header height */
}

/* ============================================================
   Process steps — animated horizontal track
   ============================================================ */
.process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
}
.process-track::before {
  content: "";
  position: absolute;
  top: 20px; left: 12.5%; right: 12.5%;
  height: 1px;
  background-image: linear-gradient(to right, rgba(240, 240, 236, 0.22) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
}
.process-track .track-fill {
  position: absolute;
  top: 19px; left: 12.5%; right: 12.5%;
  height: 2px;
  background: var(--blue-600);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform 0.12s linear;
  will-change: transform;
}

.process-step { text-align: center; position: relative; }
.process-step .node {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(240, 240, 236, 0.28);
  background: var(--neutral-900);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(240, 240, 236, 0.55);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.process-step.active .node {
  border-color: var(--blue-600);
  color: var(--neutral-0);
  background: var(--blue-600);
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15), 0 0 18px rgba(37, 99, 235, 0.55);
  animation: node-pop 0.5s var(--ease);
}
@keyframes node-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1.1); }
}
/* One-time expanding ring right when a node lights up, echoing the timeline
   scroller's blip/ripple on the About page. */
.process-step .node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.process-step.active .node::after {
  animation: node-ripple 0.9s var(--ease);
}
@keyframes node-ripple {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
  100% { box-shadow: 0 0 0 22px rgba(37, 99, 235, 0); }
}

/* The card is the thing that blurs/rises into focus as the reading line
   approaches its step — see applyProgress() in main.js, which sets these
   custom properties every scroll frame. The node above stays crisp and
   just changes color/glow on activation, same as before; only the content
   card gets the depth-of-field treatment. Falls back to fully-revealed if
   JS hasn't run yet (e.g. no-JS), so content is never stuck hidden. */
.process-step-card {
  position: relative;
  background: var(--neutral-800);
  border: 1px solid rgba(240, 240, 236, 0.14);
  border-radius: var(--radius-sm);
  padding: 26px 22px 24px;
  opacity: var(--step-reveal, 1);
  filter: blur(calc((1 - var(--step-reveal, 1)) * 6px));
  transform: translateY(calc((1 - var(--step-reveal, 1)) * 22px)) scale(calc(0.97 + var(--step-reveal, 1) * 0.03));
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.process-step.active .process-step-card {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.5);
}
.process-step h3 { margin-bottom: 10px; color: var(--neutral-50); }
.process-step p {
  color: rgba(240, 240, 236, 0.62);
  font-size: 0.96rem;
  max-width: 32ch;
  margin: 0 auto;
  transition: opacity 0.3s var(--ease);
  opacity: 0.45;
}
.process-step.active p { opacity: 1; }
.process-step .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(240, 240, 236, 0.24);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: rgba(240, 240, 236, 0.55);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}

/* Received: neutral dot, one-time "logged" ping on arrival */
.status--received::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(240, 240, 236, 0.5);
  flex: none;
}
.process-step.active .status--received::before {
  animation: status-ping 0.7s var(--ease);
}
@keyframes status-ping {
  0% { box-shadow: 0 0 0 0 rgba(139, 151, 161, 0.55); }
  100% { box-shadow: 0 0 0 7px rgba(139, 151, 161, 0); }
}

/* Searching: still in progress — amber, same as the "right now" grid's
   Searching status, with an ambient pulse for as long as it's the live step */
.status--searching::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(240, 240, 236, 0.5);
  flex: none;
  transition: background 0.3s var(--ease);
}
.process-step.active .status--searching { color: #f0bc6b; border-color: rgba(217, 158, 61, 0.5); background: rgba(217, 158, 61, 0.22); }
.process-step.active .status--searching::before {
  background: #f0bc6b;
  animation: status-pulse 1.8s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Quoted: done and priced — brand blue, same as the "right now" grid,
   dot lands with a small bounce */
.status--quoted::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(240, 240, 236, 0.5);
  flex: none;
  transition: background 0.3s var(--ease);
}
.process-step.active .status--quoted { color: #6d94ff; border-color: rgba(37, 99, 235, 0.5); background: rgba(37, 99, 235, 0.24); }
.process-step.active .status--quoted::before {
  background: #6d94ff;
  animation: status-land 0.4s var(--ease);
}
@keyframes status-land {
  0% { transform: scale(0.4); }
  65% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Shipped: fully resolved — muted green, same as the "right now" grid,
   dot becomes a checkmark that draws on once, then holds */
.status--shipped { color: rgba(240, 240, 236, 0.5); }
.process-step.active .status--shipped { color: #6fe4a8; border-color: rgba(52, 163, 102, 0.5); background: rgba(52, 163, 102, 0.24); }
.status-check {
  flex: none;
  color: rgba(240, 240, 236, 0.5);
  transition: color 0.3s var(--ease);
}
.process-step.active .status-check { color: #6fe4a8; }
.status-check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.4s var(--ease) 0.15s;
}
.process-step.active .status-check path { stroke-dashoffset: 0; }

/* Section 4 wide layout (desktop, where the pin runs): headline left with the
   lede beside it, left-aligned cards, larger nodes at each card's edge, and a
   ghost mono numeral per card echoing the hero stats. Tablet/mobile keep the
   vertical pipeline in the 980px block. */
@media (min-width: 981px) {
  .process-pin-wrapper .section-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--space-12);
    margin-bottom: 64px;
  }
  .process-pin-wrapper .section-head .h-1 {
    font-size: clamp(2.5rem, 3vw + 1rem, 4rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
  }
  .process-pin-wrapper .section-head .lede { margin-top: 0; max-width: 40ch; justify-self: end; }
  .process-track {
    counter-reset: step;
    /* Appears last: headline types, then the lede, then the timeline. */
    opacity: clamp(0, calc((var(--head-reveal, 1) - 0.75) * 4), 1);
    transform: translateY(calc((1 - clamp(0, (var(--head-reveal, 1) - 0.75) * 4, 1)) * 16px));
  }
  .process-track::before {
    top: 28px;
    left: 28px;
    right: 0;
  }
  .process-track .track-fill {
    top: 27px;
    left: 28px;
    right: 0;
  }
  .process-step { text-align: left; counter-increment: step; display: flex; flex-direction: column; }
  .process-step .node {
    width: 56px; height: 56px;
    margin: 0 0 32px;
    font-size: 1rem;
  }
  .process-step-card {
    flex: 1;
    overflow: hidden;
    padding: 36px 28px 28px;
    border-top: 3px solid rgba(240, 240, 236, 0.14);
  }
  .process-step.active .process-step-card { border-top-color: var(--blue-600); }
  .process-step-card::after {
    content: counter(step, decimal-leading-zero) / "";
    position: absolute;
    bottom: -10px; right: 16px;
    font-family: var(--font-mono);
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(240, 240, 236, 0.05);
    pointer-events: none;
  }
  .process-step p { margin: 0; max-width: 36ch; }}

/* ============================================================
   Elastic gallery (desktop industries teaser)
   ============================================================ */
.elastic-gallery {
  display: none;
  gap: 12px;
  height: 460px;
  margin-bottom: 24px;
}
.elastic-panel {
  position: relative;
  flex: 1;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--neutral-900);
  background-image:
    linear-gradient(rgba(240, 240, 236, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 240, 236, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
}
.elastic-panel.active { flex: 4; }

.elastic-panel--photo { background-size: cover; background-position: center; }
/* The photo is repeated on a ::before layer so it can ease from slightly
   zoomed to rest when its panel becomes active, without scaling the panel
   itself. main.js passes the lazy-loaded photo in as --photo and adds
   .bg-ready. Not background-image: inherit, because Safari then drops
   background-size: cover on the layer and draws the photo at full size. */
.elastic-panel--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}
.elastic-panel--photo.bg-ready::before { background-image: var(--photo); }
.elastic-panel--photo.active::before { transform: scale(1); }

/* Base wash keeps the collapsed vertical label legible over a photo; the
   stronger gradient on .active brings up full contrast for the copy block. */
.elastic-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 0.08) 62%, transparent 80%),
    linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.elastic-panel--photo::after { opacity: 0.55; }
.elastic-panel.active::after { opacity: 1; }

.elastic-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.elastic-panel.active .elastic-content { opacity: 1; transform: none; transition-delay: 0.15s; }

/* Delayed to start once .elastic-content has actually faded into view
   (it has its own 0.15s transition-delay) — otherwise the pop would finish
   while the tag is still invisible underneath the parent's own fade-in.
   The dot then keeps an ambient pulsing glow for as long as the panel
   stays active, so it reads as a live "in progress" indicator rather than
   a one-shot blip that's easy to miss. */
.elastic-title {
  color: var(--neutral-50);
  font-size: 1.5rem;
  line-height: 1.15;
  white-space: nowrap;
}
.elastic-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  background: var(--neutral-0);
  color: var(--neutral-900);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.elastic-cta:hover, .elastic-cta:focus-visible { background: var(--blue-600); color: var(--neutral-0); }
.elastic-cta svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.elastic-panel:hover .elastic-cta svg { transform: translate(2px, -2px); }

.elastic-label {
  position: absolute;
  z-index: 1;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  color: var(--neutral-50);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}
.elastic-panel.active .elastic-label { opacity: 0; }

/* ============================================================
   Industries
   ============================================================ */
/* Below 981px, .elastic-gallery is hidden and this grid takes over — styled
   as the same dark schematic system as the desktop panels, just as static
   cards instead of a hover-expand interaction. */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.industry-panel {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-sm);
  background-color: var(--neutral-900);
  background-image:
    linear-gradient(rgba(240, 240, 236, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 240, 236, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}
.industry-panel h3 { color: var(--neutral-50); margin-bottom: 10px; }
.industry-panel p { color: rgba(240, 240, 236, 0.65); font-size: 0.92rem; margin-bottom: 18px; }
.industry-panel .example {
  border-top: 1px dashed rgba(240, 240, 236, 0.25);
  padding-top: 14px;
  font-size: 0.82rem;
  color: rgba(240, 240, 236, 0.55);
}
.industry-panel .example .mono { color: var(--blue-500); }

/* Photo variant — a fixed-height photo band up top (framed with the same
   schematic corner brackets used elsewhere), full text block on a solid
   dark panel underneath. Text never sits on top of the photo, so legibility
   never depends on how bright or busy any given shot happens to be. */
.industry-panel--photo {
  padding: 0;
  background-image: none;
}
.industry-panel--photo .industry-photo {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(240, 240, 236, 0.12);
}
.industry-panel--photo .industry-body { padding: 24px 28px 28px; }

/* ============================================================
   Differentiators
   ============================================================ */
.diff-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.diff-photo {
  position: sticky;
  top: 96px;
  height: calc(100vh - 144px);
  min-height: 460px;
  max-height: 760px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--neutral-900);
}
.diff-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% center;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.diff-photo img.is-loaded { opacity: 1; }
.diff-intro { margin-bottom: clamp(32px, 5vw, 64px); }
.diff-intro h2 { margin-bottom: 16px; max-width: 18ch; }
.diff-intro .lede { color: var(--neutral-600); max-width: 48ch; }

.diff-list { list-style: none; margin: 0; padding: 0; }
.diff-item {
  position: relative;
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--neutral-200);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.diff-item.is-active { border-top-color: var(--blue-600); box-shadow: 0 -1px 0 var(--blue-600); }
.diff-item:last-child { border-bottom: 1px solid var(--neutral-200); }
.diff-item h3 {
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--neutral-900);
  max-width: 20ch;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
}
.diff-item.is-active h3 { color: var(--blue-600); }
.diff-item p { color: var(--neutral-600); font-size: 1.02rem; max-width: 52ch; margin: 0; transition: opacity 0.4s var(--ease); }

@media (min-width: 981px) {
  .diff-list.is-tracking .diff-item:not(.is-active) h3 { opacity: 0.45; }
  .diff-list.is-tracking .diff-item:not(.is-active) p { opacity: 0.7; }}

/* ============================================================
   Technical panels (replace photography with schematic line-art)
   ============================================================ */

/* ============================================================
   Trust strip (answers "can I trust a broker with no stock")
   ============================================================ */
.trust-strip { padding: 88px 0; background: var(--neutral-100); border-bottom: 1px solid var(--neutral-200); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--neutral-200);
}
.trust-item {
  padding: 32px 28px 4px;
  border-left: 1px solid var(--neutral-200);
}
.trust-item:first-child { border-left: none; padding-left: 0; }
.trust-icon { color: var(--blue-600); display: block; margin-bottom: 20px; }
.trust-item h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--neutral-900);
  margin-bottom: 8px;
}
.trust-item p { color: var(--neutral-600); font-size: 0.92rem; }

/* Landing page trust: four plain columns with icons, set larger for easy skimming. */
.trust-strip--cols { padding: clamp(72px, 8vw, 112px) 0; }
.trust-strip--cols .section-head h2 { text-wrap: balance; }
.trust-strip--cols .trust-item { padding: 36px 32px 8px 32px; }
.trust-strip--cols .trust-item:first-child { padding-left: 0; }
.trust-strip--cols .trust-icon { width: 40px; height: 40px; margin-bottom: 24px; }
.trust-strip--cols .trust-item h3 { font-size: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); line-height: 1.2; margin-bottom: 12px; }
.trust-strip--cols .trust-item p { font-size: 1.05rem; line-height: 1.6; color: var(--neutral-600); }
/* Homepage trust section: the kicker words become the display statement, the headline a lede, the four points a ruled strip */
.trust-statement {
  padding: clamp(72px, 9vw, 128px) 0;
  background: var(--neutral-100);
  border-bottom: 1px solid var(--neutral-200);
  color: var(--neutral-900);
}
.trust-statement-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 5.1rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.trust-statement-title span { display: block; white-space: nowrap; }
.trust-statement-title .accent { color: var(--blue-600); }
.trust-statement-lede {
  margin: clamp(16px, 2vw, 26px) 0 0;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--neutral-600);
  text-wrap: balance;
}
.trust-statement-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(22px, 2.6vw, 38px);
  border-top: 2px solid var(--neutral-900);
}
.trust-statement-item {
  padding: 30px clamp(18px, 2vw, 32px) 8px 0;
  margin-right: clamp(18px, 2vw, 32px);
  border-right: 1px solid var(--neutral-300);
}
.trust-statement-item:last-child { border-right: 0; margin-right: 0; }
.trust-statement-item h3 {
  margin: 0 0 12px;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.trust-statement-item p { margin: 0; max-width: 30ch; font-size: 0.95rem; line-height: 1.55; color: var(--neutral-600); }
@media (max-width: 980px) {
  .trust-statement-title { font-size: clamp(2.3rem, 9.4vw, 4.6rem); }
  .trust-statement-strip { grid-template-columns: 1fr 1fr; }
  .trust-statement-item { padding: 26px 20px 30px 0; margin-right: 20px; border-bottom: 1px solid var(--neutral-300); }
  .trust-statement-item:nth-child(2), .trust-statement-item:nth-child(4) { border-right: 0; margin-right: 0; }
  .trust-statement-item:nth-child(3), .trust-statement-item:nth-child(4) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .trust-statement-strip { grid-template-columns: 1fr; }
  .trust-statement-item, .trust-statement-item:nth-child(n) { border-right: 0; margin-right: 0; padding: 24px 0 26px; border-bottom: 1px solid var(--neutral-300); }
  .trust-statement-item:last-child { border-bottom: 0; }
}

/* ============================================================
   Logistics (answers "how does it actually get to my site")
   ============================================================ */
/* Close-up cargo container markings — texture and mood over a literal
   ship shot, with real negative space (the dark right/top edge) for text
   to sit on instead of fighting a busy scene. Gradient still carries most
   of the legibility work over the brighter red panel on the left. */
.logistics-section {
  position: relative;
  padding: 64px 0;
  background-image: url('../images/logistics-cargo.webp');
  background-size: cover;
  background-position: center;
}
.logistics-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 8, 15, 0.88) 0%, rgba(3, 8, 15, 0.82) 45%, rgba(3, 8, 15, 0.92) 100%);
}
.logistics-section .container { position: relative; z-index: 1; }
.logistics-section .kicker { color: var(--blue-300); }
.logistics-section .h-1 { color: var(--neutral-50); }
.logistics-section .lede { color: rgba(240, 240, 236, 0.72); }
.logistics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(240, 240, 236, 0.16);
}
.logistics-item {
  padding: 32px 28px 4px;
  border-left: 1px solid rgba(240, 240, 236, 0.16);
}
.logistics-item:first-child { border-left: none; padding-left: 0; }
.logistics-item h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--neutral-50);
  margin-bottom: 8px;
}
.logistics-item p { color: rgba(240, 240, 236, 0.62); font-size: 0.92rem; }

/* Section 6 wide layout (desktop): the cargo photo shows through (clear on the
   right, darker under the text), headline left with the lede beside it, and
   three numbered columns with a top rule that draws in, replacing the icons. */
@media (min-width: 981px) {
  .logistics-section { padding: clamp(96px, 9vw, 140px) 0; }
  .logistics-section::before {
    /* Darkness sits where the small text is (the bottom band holding the three
       columns, plus a local glow behind the lede); the photo is left clear
       elsewhere. */
    background:
      radial-gradient(ellipse 34% 34% at 78% 24%, rgba(3, 8, 15, 0.55), transparent 100%),
      linear-gradient(180deg, rgba(3, 8, 15, 0.12) 0%, rgba(3, 8, 15, 0.36) 32%, rgba(3, 8, 15, 0.66) 62%, rgba(3, 8, 15, 0.9) 100%),
      linear-gradient(90deg, rgba(3, 8, 15, 0.35) 0%, rgba(3, 8, 15, 0.1) 100%);
  }
  .logistics-section .section-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: var(--space-12);
    align-items: end;
    margin-bottom: 72px !important;
  }
  .logistics-section .section-head .kicker,
  .logistics-section .section-head .h-1 { grid-column: 1; }
  .logistics-section .section-head .lede {
    grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-self: end; max-width: 40ch;
    color: rgba(240, 240, 236, 0.9);
    text-shadow: 0 1px 14px rgba(3, 8, 15, 0.7);
  }
  .logistics-section .section-head .h-1 { text-shadow: 0 2px 24px rgba(3, 8, 15, 0.45); }
  .logistics-section .section-head .h-1 {
    font-size: clamp(2.5rem, 3vw + 1rem, 4rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
  }
  .logistics-grid {
    counter-reset: logi;
    column-gap: var(--space-10);
    border-top: none;
  }
  .logistics-grid.reveal { opacity: 1; transform: none; }
  .logistics-item,
  .logistics-item:first-child {
    position: relative;
    counter-increment: logi;
    padding: 36px 0 8px;
    border-left: none;
    border-top: 1px solid rgba(240, 240, 236, 0.22);
  }
  .logistics-item::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--blue-600);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--ease);
  }
  .logistics-grid.in .logistics-item::before { transform: scaleX(1); }
  .logistics-grid.in .logistics-item:nth-child(2)::before { transition-delay: 0.15s; }
  .logistics-grid.in .logistics-item:nth-child(3)::before { transition-delay: 0.3s; }
  .logistics-item::after {
    content: counter(logi, decimal-leading-zero) / "";
    position: absolute;
    top: 14px; right: 0;
    font-family: var(--font-mono);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(240, 240, 236, 0.07);
    pointer-events: none;
  }
  .logistics-item h3 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    max-width: 16ch;
  }
  .logistics-item p { font-size: 1rem; color: rgba(240, 240, 236, 0.78); max-width: 36ch; }
  .logistics-grid.reveal .logistics-item { opacity: 0; }
  .logistics-grid.reveal.in .logistics-item { opacity: 1; animation: panel-rise 0.8s var(--ease) backwards; }
  .logistics-grid.reveal.in .logistics-item:nth-child(2) { animation-delay: 0.1s; }
  .logistics-grid.reveal.in .logistics-item:nth-child(3) { animation-delay: 0.2s; }}

/* ============================================================
   Sourcing network (home page closer, before the final CTA)
   ============================================================ */
.network-section {
  position: relative;
  color: var(--neutral-50);
  padding: clamp(72px, 9vw, 120px) 0;
  overflow: hidden;
  background-color: var(--neutral-900);
  border-bottom: 1px solid rgba(240, 240, 236, 0.12);
}
.network-section .container { position: relative; z-index: 1; }
.network-section .kicker { color: var(--blue-400); }
.network-section .h-1 { color: var(--neutral-50); }
.network-section .lede { color: rgba(240, 240, 236, 0.7); }

.network-node {
  padding: 22px 20px;
  border: 1px solid rgba(240, 240, 236, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(240, 240, 236, 0.05);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.network-node:hover {
  border-color: var(--blue-600);
  background: rgba(240, 240, 236, 0.08);
  transform: translateY(-2px);
}
.network-node .node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.network-node .rfq {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blue-400);
}
.network-node .industry-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(240, 240, 236, 0.65);
  background: rgba(240, 240, 236, 0.1);
  border: 1px solid rgba(240, 240, 236, 0.16);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 10px;
}
.network-node .part {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--neutral-50);
  margin-bottom: 4px;
}
.network-node .location {
  font-size: 0.85rem;
  color: rgba(240, 240, 236, 0.75);
  margin-bottom: 16px;
}
.network-node .status {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(240, 240, 236, 0.16);
  color: rgba(240, 240, 236, 0.88);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.network-node .status::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neutral-400);
  flex: none;
}
.network-node .status-check { flex: none; }

/* Searching: still in progress, so it's the one status that keeps moving —
   an ambient pulse on the dot, same idea as the process-track's "Searching"
   step, calmed to a single dot rather than restarting per-card constantly. */
.network-node .status--searching {
  background: rgba(217, 158, 61, 0.22);
  color: #f0bc6b;
}
.network-node .status--searching::before {
  background: #e0ab55;
  animation: node-status-pulse 1.8s ease-in-out infinite;
}
@keyframes node-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Quoted: done and priced — confident, static, brand blue. */
.network-node .status--quoted {
  background: rgba(37, 99, 235, 0.24);
  color: #6d94ff;
}
.network-node .status--quoted::before { background: var(--blue-500); }

/* Packing: order is being crated and prepped for freight — our own
   logistics step (see the RFQ FAQ on handling freight/customs), distinct
   from the sourcing statuses above. Static violet, no animation, keeping
   with only "Searching" pulsing. */
.network-node .status--packing {
  background: rgba(124, 111, 224, 0.24);
  color: #bcb0ff;
}
.network-node .status--packing::before { background: #a99df2; }

/* Shipped: fully resolved — static checkmark instead of a dot, muted green. */
.network-node .status--shipped {
  background: rgba(52, 163, 102, 0.24);
  color: #6fe4a8;
}
.network-node .status--shipped::before { content: none; }
.network-node .status--shipped .status-check { color: #6fe4a8; }

.network-section .container,
.network-rail { position: relative; z-index: 1; }

.network-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.network-head .section-head { margin: 0; max-width: 760px; }
.network-nav { display: flex; gap: 10px; flex: none; }
.network-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(240, 240, 236, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(8, 10, 14, 0.5);
  color: var(--neutral-50);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), opacity 0.25s var(--ease);
}
.network-arrow:hover:not(:disabled) { border-color: var(--blue-600); background: var(--blue-600); }
.network-arrow:disabled { opacity: 0.3; cursor: default; }

/* The swipe row: lines up with the headline on the left, bleeds off the right edge */
.network-rail {
  --rail-pad: max(calc(clamp(24px, 4vw, 64px) + var(--space-5)), calc((100vw - 1460px) / 2 + clamp(24px, 4vw, 64px) + var(--space-5)));
}
.network-grid {
  display: flex;
  gap: 16px;
  padding: 8px var(--rail-pad) 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rail-pad);
  scrollbar-width: none;
  cursor: grab;
}
.network-grid::-webkit-scrollbar { display: none; }
.network-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.network-node {
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(300px, 26vw, 380px);
  min-height: 270px;
  padding: 28px 26px 26px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.network-node .node-head { margin-bottom: 22px; }
.network-node .part { font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.2; margin-bottom: 8px; }
.network-node .location { font-size: 0.95rem; margin-bottom: 28px; }
.network-node .status { margin-top: auto; align-self: flex-start; }

.network-closer {
  margin: clamp(20px, 3vw, 36px) 0 0;
  max-width: 46ch;
  font-family: var(--font-sans);
  font-size: 1.15rem;
  color: rgba(240, 240, 236, 0.85);
}
/* Card design: photo strip on top, RFQ number + plain-text industry in one row,
   big part name, status pinned to the bottom, large faint industry icon as a watermark */
.network-node {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 340px;
}
.network-node .node-photo {
  flex: none;
  height: 140px;
  margin: 12px 12px 0;
  border-radius: 2px;
  overflow: hidden;
  background-color: rgba(240, 240, 236, 0.06);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  transition: filter 0.4s var(--ease);
}
.network-node:hover .node-photo,
.network-node:focus-within .node-photo { filter: none; }
@media (hover: none) {
  .network-node .node-photo { filter: none; }}
.network-node .node-photo::after {
  content: "";
  display: block;
  height: 100%;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0) 55%, rgba(8, 10, 14, 0.4) 100%);
}
.network-node .node-head,
.network-node .part,
.network-node .node-brand,
.network-node .location,
.network-node .status { margin-left: 26px; margin-right: 26px; }
.network-node .rfq,
.network-node .industry-tag,
.network-node .part,
.network-node .node-brand,
.network-node .location,
.network-node .status { position: relative; z-index: 1; }
/* Manufacturer under the part name, in the RFQ number's mono blue */
.network-node .node-brand {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin-top: 4px;
  margin-bottom: 8px;
}
.network-node .node-head {
  justify-content: flex-start;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 14px;
}
.network-node .industry-tag {
  margin: 0;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid rgba(240, 240, 236, 0.3);
  border-radius: 0;
  background: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--neutral-50);
}
.network-node .part { font-size: clamp(1.45rem, 1.9vw, 1.8rem); line-height: 1.15; margin-bottom: 8px; }
.network-node .location { margin-bottom: 26px; }
.network-node .status { margin-top: auto; margin-bottom: 26px; }
@media (max-width: 640px) {
  .network-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .network-nav { align-self: flex-end; }
  .network-arrow { width: 44px; height: 44px; }
  .network-node { flex-basis: min(80vw, 340px); }}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  background: var(--neutral-900);
  color: var(--neutral-50);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/cta-blueprint-wide.webp');
  background-size: cover;
  background-position: 78% center;
  filter: hue-rotate(16deg) saturate(1.05) brightness(0.92);
  opacity: 0.45;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,17,21,0.98) 0%, rgba(15,17,21,0.96) 12%, rgba(15,17,21,0.9) 25%, rgba(15,17,21,0.78) 38%, rgba(15,17,21,0.6) 50%, rgba(15,17,21,0.42) 62%, rgba(15,17,21,0.24) 75%, rgba(15,17,21,0.1) 88%, rgba(15,17,21,0.02) 100%);
}
.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { color: var(--neutral-0); }
.cta-band .lede { color: rgba(240,240,236,0.7); margin-top: 14px; }
.cta-band--plain::before,
.cta-band--plain::after { content: none; }

/* Blue band (index.html): the loudest moment on the page, a flat Mappex Blue finish before the footer */
.cta-band--blue {
  background: var(--blue-600);
  padding: clamp(72px, 9vw, 128px) 0;
}
/* Blueprint, tone on tone: grayscale + screen blend so only the linework lifts the blue; it fades out on the left to keep the headline on clean blue */
.cta-band--blue::before {
  content: "";
  background-image: url('../images/cta-blueprint-wide.webp');
  background-position: 78% center;
  filter: grayscale(1) brightness(0.85) contrast(1.5);
  mix-blend-mode: screen;
  opacity: 0.35;
}
.cta-band--blue::after {
  content: "";
  background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-600) 32%, rgba(37, 99, 235, 0) 68%);
}
.cta-band--blue .cta-inner { align-items: center; gap: clamp(28px, 5vw, 64px); }
.cta-band--blue h2 {
  max-width: 16ch;
  font-size: clamp(2.3rem, 4.8vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.cta-band--blue .lede {
  max-width: 44ch;
  margin-top: 20px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: rgba(255, 255, 255, 0.88);
}
.btn-on-blue {
  padding: 18px 30px;
  font-size: 1.0625rem;
  background: var(--neutral-0);
  color: var(--neutral-900);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn-on-blue:hover,
.btn-on-blue:focus-visible,
.btn-on-blue:active { background: var(--neutral-900); color: var(--neutral-0); }
/* Idle: the arrow gives a small nudge every few seconds */
.btn-on-blue svg { animation: cta-arrow-nudge 3.6s ease-in-out infinite; }
.btn-on-blue:hover svg { animation: none; transform: translateX(5px); transition: transform var(--duration-base) var(--ease); }
@keyframes cta-arrow-nudge {
  0%, 62%, 100% { transform: translateX(0); }
  74% { transform: translateX(6px); }
  86% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-on-blue svg { animation: none; }}
.btn-on-blue:focus-visible { outline-color: var(--neutral-0); outline-offset: 4px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { padding: 64px 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--neutral-200);
}
/* Footer column titles are labels, not headings (keeps heading levels in order) */
.footer-grid .footer-heading {
  letter-spacing: -0.015em;
  font-size: 0.82rem;
  color: var(--neutral-600);
  margin-bottom: 16px;
  font-family: var(--font-sans);
  font-weight: 600;
}
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid ul a { color: var(--neutral-800); font-size: 0.92rem; }
.footer-grid ul a:hover { color: var(--blue-700); }
.footer-brand p { color: var(--neutral-600); font-size: 0.9rem; margin-top: 16px; max-width: 34ch; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; color: var(--neutral-600); font-size: 0.82rem; flex-wrap: wrap; gap: 12px;
}
.footer-bottom-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom-right a { color: var(--neutral-600); }
.footer-bottom-right a:hover { color: var(--blue-700); }

/* Dark footer with a giant, faint wordmark as the base of the page (index.html) */
.site-footer--dark {
  background: var(--neutral-900);
  color: rgba(240, 240, 236, 0.7);
  padding: clamp(64px, 8vw, 104px) 0 0;
  overflow: hidden;
}
.site-footer--dark .brand,
.site-footer--dark .brand .brand-word { color: var(--neutral-50); }
.site-footer--dark .footer-grid { border-bottom-color: rgba(240, 240, 236, 0.12); }
.site-footer--dark .footer-grid .footer-heading { color: rgba(240, 240, 236, 0.5); }
.site-footer--dark .footer-grid ul a { color: rgba(240, 240, 236, 0.88); }
.site-footer--dark .footer-grid ul a:hover { color: var(--neutral-0); }
.site-footer--dark .footer-brand p,
.site-footer--dark .footer-bottom { color: rgba(240, 240, 236, 0.55); }
.site-footer--dark .footer-bottom-right a { color: rgba(240, 240, 236, 0.55); }
.site-footer--dark .footer-bottom-right a:hover { color: var(--neutral-0); }
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(240, 240, 236, 0.3);
  border-radius: 50%;
  color: rgba(240, 240, 236, 0.85);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.footer-social a:hover { color: var(--neutral-0); border-color: var(--blue-600); background: rgba(37, 99, 235, 0.25); }
.footer-social a:focus-visible { outline-offset: 3px; }
.footer-wordmark-wrap { container-type: inline-size; margin-top: clamp(28px, 5vw, 64px); pointer-events: none; }
.footer-wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 25.4cqw;
  line-height: 0.8;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: rgba(240, 240, 236, 0.07);
  margin-left: -0.03em;
  margin-bottom: -0.14em;
  user-select: none;
}

/* ============================================================
   404 / error page
   ============================================================ */

/* ============================================================
   Landing pages (paid-traffic — no main nav, one conversion goal)
   ============================================================ */

/* Landing-page header: the floating pill with the wordmark and one action, the phone number. */
.lp-header .nav { justify-content: space-between; }
.lp-call { gap: 10px; font-weight: 700; }
.lp-call svg { flex: none; }
.lp-call .num { font-family: var(--font-mono); letter-spacing: -0.01em; }
/* Phones: the wordmark and the full number don't fit in the pill together, so the
   button shrinks to a phone icon (still tap-to-call); the number stays readable to screen readers. */
@media (max-width: 720px) {
  .lp-call { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .lp-call .num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lp-call svg { width: 20px; height: 20px; }}

/* Same dark-section treatment as "How sourcing works," but every step
   renders in its resolved .active state up front with no scroll-linked JS —
   a focused landing page doesn't need the homepage's scrollytelling, and
   skipping it keeps this page lighter and lower-risk. */
.lp-process { background: var(--neutral-900); }
.lp-process .kicker { color: var(--blue-500); }
.lp-process .h-1 { color: var(--neutral-50); }

.lp-footer { padding: 40px 0 32px; }
.lp-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--neutral-200);
}
.lp-footer-contact { display: flex; gap: 20px; flex-wrap: wrap; }
.lp-footer-contact a { color: var(--neutral-600); }
.lp-footer-contact a:hover { color: var(--blue-700); }
.lp-footer .footer-bottom { padding-top: 20px; }
.site-footer--dark.lp-footer { padding: clamp(40px, 5vw, 64px) 0 0; }
.site-footer--dark.lp-footer .lp-footer-row { border-bottom-color: rgba(240, 240, 236, 0.12); }
.site-footer--dark .lp-footer-contact a { color: rgba(240, 240, 236, 0.88); }
.site-footer--dark .lp-footer-contact a:hover { color: var(--neutral-0); }
@media (max-width: 480px) {
  .lp-footer-row { flex-direction: column; align-items: flex-start; }}

/* ============================================================
   Reveal-on-scroll (single deliberate use per section)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   Forms (RFQ page)
   ============================================================ */

/* RFQ page split screen: dark intro panel bleeds to the left edge of the
   window, form on the light surface to its right. Scoped classes so the
   landing page and /es keep the legacy .rfq-layout. */
.rfq-split { overflow: clip; background: var(--neutral-50); }
.rfq-split-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: stretch;
}
.rfq-intro {
  position: relative;
  color: var(--neutral-0);
  padding: 144px 0 var(--space-24);
}
.rfq-intro::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * clamp(32px, 2.5vw, 48px)) 0 -100vw;
  background: var(--neutral-900);
  z-index: 0;
}
.rfq-intro-inner { position: sticky; top: 112px; z-index: 1; }
.rfq-intro h1, .rfq-intro h2 { color: var(--neutral-0); text-wrap: balance; }
.rfq-intro .lede { color: rgba(255, 255, 255, 0.78); max-width: 40ch; }
.rfq-intro-items { margin-top: var(--space-12); counter-reset: rfq-item; }
.rfq-intro-items .item {
  counter-increment: rfq-item;
  position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.rfq-intro-items .item::before {
  content: counter(rfq-item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--blue-300);
}
.rfq-intro-items h4 { font-size: 1rem; font-weight: 800; color: var(--neutral-0); margin-bottom: var(--space-2); }
.rfq-intro-items p { font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.7); }
.rfq-intro-items a { color: var(--blue-300); text-decoration: none; }
.rfq-intro-items a:hover { color: var(--neutral-0); text-decoration: underline; }
.rfq-form-col { padding: 144px 0 var(--space-24); }
@media (max-width: 980px) {
  .rfq-split-grid { grid-template-columns: 1fr; gap: 0; }
  .rfq-intro { padding: 120px 0 var(--space-12); }
  .rfq-intro::before { inset: 0 -100vw; }
  .rfq-intro-inner { position: relative; top: auto; }
  .rfq-form-col { padding: var(--space-10) 0 var(--space-16); }}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.field { margin-bottom: 20px; }
/* Rows inside a field-grid already get even spacing from its own gap — an
   extra margin-bottom on each field would stack on top of that and make
   grid rows sit twice as far apart as the standalone fields around them. */
.field-grid .field { margin-bottom: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: var(--space-2);
  color: var(--neutral-900);
  font-weight: 700;
}
.field .req { color: var(--blue-600); }
.field.invalid label { color: var(--rust-500); }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--rust-500); }
.field.invalid input:focus,
.field.invalid select:focus,
.field.invalid textarea:focus { box-shadow: 0 0 0 4px rgba(179, 69, 44, 0.15); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--neutral-0);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--neutral-900);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--neutral-400); }
.field input[name="part_number"],
.field input[name="serial_number"] { font-family: var(--font-mono); font-size: 0.9rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: var(--shadow-focus);
}
.field textarea { resize: vertical; min-height: 110px; }
.form-card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 3vw, 48px);
}
/* Three bands (you, the part, delivery), separated by hairlines. */
.form-band { display: grid; gap: var(--space-5); }
.form-band + .form-band { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--neutral-200); }
.form-band .field, .form-band .field-grid { margin-bottom: 0; }
.form-card .btn-block { margin-top: var(--space-8); padding-top: 16px; padding-bottom: 16px; font-size: 1rem; }
.form-success {
  display: none;
  text-align: center;
  padding: 60px 20px;
}
.form-success.show { display: block; }
.form-success .mark {
  width: 56px; height: 56px;
  background: var(--neutral-900);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  color: var(--neutral-0);
}
.form-hint { font-size: 0.8rem; color: var(--neutral-600); margin-top: 6px; }
.form-error {
  display: none;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--rust-50);
  border-left: 3px solid var(--rust-500);
  font-size: 0.88rem;
  color: var(--rust-700);
}
.form-error a { color: inherit; text-decoration: underline; }
.form-error.show { display: block; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: var(--neutral-0);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.faq-item:hover { border-color: var(--blue-600); }
.faq-item.open { border-color: var(--blue-600); box-shadow: 0 12px 28px -18px rgba(18, 22, 28, 0.35); }
.faq-question {
  width: 100%;
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  background: none; border: none;
  font-family: var(--font-sans);
  font-size: 1.05rem; font-weight: 600; color: var(--neutral-900);
  text-align: left; cursor: pointer;
}
.faq-num {
  flex: none;
  font-family: var(--font-mono);
  color: var(--blue-600);
  font-size: 0.85rem;
}
.faq-question-text { flex: 1; }
.faq-chevron { flex: none; color: var(--blue-600); transition: transform 0.3s var(--ease); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > p {
  overflow: hidden;
  color: var(--neutral-600);
  max-width: 68ch;
  padding: 0 24px 0 60px;
}
.faq-item.open .faq-answer > p { padding-bottom: 22px; }

/* RFQ page FAQ: full-width split (title left, ruled list right) on the same
   columns as the form above. Scoped to .faq-section so the landing page and
   /es keep the card-style list. */
.faq-section { padding: clamp(64px, 8vw, 112px) 0; }
.faq-split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.faq-section .section-head { position: sticky; top: 112px; margin: 0; max-width: none; }
.faq-section .section-head .h-1 { text-wrap: balance; }
.faq-section .faq-list { gap: 0; border-bottom: 1px solid var(--neutral-300); }
.faq-section .faq-item {
  border: 0;
  border-top: 1px solid var(--neutral-300);
  border-radius: 0;
  background: none;
  box-shadow: none;
  position: relative;
}
.faq-section .faq-item::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  height: 2px; width: 100%;
  background: var(--blue-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease);
}
.faq-section .faq-item.open::before { transform: scaleX(1); }
.faq-section .faq-item:hover,
.faq-section .faq-item.open { border-color: var(--neutral-300); box-shadow: none; }
.faq-section .faq-question {
  padding: var(--space-6) 0;
  gap: var(--space-5);
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.3125rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--neutral-900);
}
.faq-section .faq-question:hover .faq-question-text { color: var(--blue-700); }
.faq-section .faq-question:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.faq-section .faq-num { color: var(--neutral-500); font-size: 0.8rem; width: 1.75rem; }
.faq-section .faq-item.open .faq-num { color: var(--blue-600); }
.faq-section .faq-chevron { color: var(--blue-600); }
.faq-section .faq-answer > p {
  padding: 0 var(--space-10) 0 calc(1.75rem + var(--space-5));
  font-size: 1rem;
  line-height: 1.65;
  color: var(--neutral-600);
}
.faq-section .faq-item.open .faq-answer > p { padding-bottom: var(--space-8); }
@media (max-width: 980px) {
  .faq-split { grid-template-columns: 1fr; gap: var(--space-10); }
  .faq-section .section-head { position: static; }
  .faq-section .faq-answer > p { padding-right: 0; }}

/* ============================================================
   About page specifics
   ============================================================ */

/* "Not on this list?" (what-we-source): solid near-black, full-width. Headline
   left with the lede beside it, then four columns under top rules, each with
   the pulsing status dot and a large title. The dot's pulse is the only motion
   (disabled by the global reduced-motion rule). */
.beyond-section { background: var(--neutral-900); color: var(--neutral-0); padding: clamp(64px, 8vw, 112px) 0; }
.beyond-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 96px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.beyond-section .kicker { display: block; margin-bottom: var(--space-4); color: var(--blue-400); }
.beyond-section h2 { color: var(--neutral-0); text-wrap: balance; }
.beyond-section .lede { margin-top: 0; max-width: 40ch; color: rgba(255, 255, 255, 0.78); }
.beyond-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 40px); }
.beyond-col { display: flex; align-items: center; gap: var(--space-3); border-top: 2px solid rgba(255, 255, 255, 0.4); padding-top: var(--space-5); }
.beyond-col p { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; text-wrap: balance; }
.beyond-pulse {
  display: block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue-400);
  animation: status-pulse 1.8s ease-in-out infinite;
}
.beyond-cta { margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 980px) {
  .beyond-head { grid-template-columns: 1fr; align-items: start; }
  .beyond-cols { grid-template-columns: 1fr 1fr; }
  .beyond-col { border-top-width: 1px; border-top-color: rgba(255, 255, 255, 0.2); }}
@media (max-width: 560px) {
  .beyond-cols { grid-template-columns: 1fr; }
  .beyond-cta { margin-top: var(--space-12); }
  .beyond-section { padding-bottom: var(--space-24); }}

/* Industries (what-we-source): a swipe row of four tall photo cards, same
   mechanics as the homepage sourcing network (mandatory snap, drag, arrows,
   bleeds off the right edge). Cards enter once, staggered, when the row first
   scrolls into view; the dot in the blue strip is the only continuous motion. */
.ind-section {
  background: var(--neutral-100);
  padding: clamp(40px, 6svh, 112px) 0;
  /* Card height follows the window height (header + padding subtracted), so the
     whole section fits on screen; everything inside the card is sized in em off it */
  --ind-h: clamp(560px, calc(100svh - 260px), 700px);
  --rail-pad: max(calc(clamp(24px, 4vw, 64px) + var(--space-5)), calc((100vw - 1460px) / 2 + clamp(24px, 4vw, 64px) + var(--space-5)));
}
.ind-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(20px, 3svh, 52px);
}
.ind-head .kicker { display: block; margin-bottom: var(--space-4); color: var(--blue-600); }
.ind-head h2 { font-size: clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem); text-wrap: balance; }
.ind-nav { display: flex; gap: 10px; }
.ind-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1.5px solid var(--neutral-900);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--neutral-900);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}
.ind-arrow:hover:not(:disabled) { background: var(--neutral-900); color: var(--neutral-0); }
.ind-arrow:focus-visible, .ind-rail:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.ind-arrow:disabled { opacity: 0.3; cursor: default; }
.ind-rail {
  display: flex;
  gap: 16px;
  padding: 0 var(--rail-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rail-pad);
  scrollbar-width: none;
  cursor: grab;
}
.ind-rail::-webkit-scrollbar { display: none; }
.ind-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ind-card {
  scroll-margin-top: 110px;
  position: relative;
  flex: 0 0 min(calc(var(--ind-h) * 0.82), 85vw);
  height: var(--ind-h);
  font-size: max(14px, calc(var(--ind-h) / 40));
  display: flex;
  flex-direction: column;
  color: var(--neutral-0);
  background: var(--neutral-900);
  overflow: hidden;
  border-radius: var(--radius-xs);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.ind-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ind-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(10, 12, 16, 0.55) 0%, rgba(10, 12, 16, 0.15) 30%, rgba(10, 12, 16, 0.78) 62%, rgba(10, 12, 16, 0.95) 100%);
}
.ind-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.1em;
}
.ind-name { font-size: 3.3em; line-height: 1; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; color: var(--neutral-0); }
.ind-sub { margin: 0; font-size: 1.32em; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.ind-desc { margin: 0.6em 0 0; font-size: 0.92em; line-height: 1.5; color: rgba(255, 255, 255, 0.82); max-width: 46ch; }
.ind-specs { margin: 1.2em 0 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.ind-specs div { display: grid; grid-template-columns: 6.9em 1fr; gap: 0.7em; padding: 0.6em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.28); font-size: 0.81em; line-height: 1.4; }
.ind-specs dt { color: rgba(255, 255, 255, 0.6); }
.ind-specs dd { margin: 0; }
.ind-rfq {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  gap: 0.2em;
  padding: 0.85em 2.1em;
  background: var(--blue-600);
}
.ind-rfq-label { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.68em; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8); }
.ind-rfq-text { font-size: 0.9em; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-pulse { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--neutral-0); flex: none; animation: status-pulse 1.8s ease-in-out infinite; }
/* One-time staggered entrance (class added by JS, so no-JS shows the cards) */
.ind-rail.js-reveal .ind-card { opacity: 0; transform: translateY(24px); }
.ind-rail.js-reveal.is-in .ind-card {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease) calc(var(--i) * 90ms), transform 700ms var(--ease) calc(var(--i) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
  .ind-rail.js-reveal .ind-card { opacity: 1; transform: none; transition: none; }}
@media (max-width: 560px) {
  /* Phones: width-led card (85vw), natural height, fixed type */
  .ind-section { --ind-h: auto; padding: clamp(64px, 8vw, 112px) 0; }
  .ind-card { flex: 0 0 85vw; height: auto; min-height: 560px; font-size: 16px; }
  .ind-head { margin-bottom: 32px; }
  .ind-body { padding: 18px; }
  .ind-rfq { padding: 0.85em 18px; }
  .ind-arrow { width: 44px; height: 44px; }
  .ind-name { font-size: 2.25rem; }
  .ind-specs div { grid-template-columns: 1fr; gap: 2px; }}

/* Category selector (what-we-source): a ruled list of the 15 titles on the
   left, one pinned detail panel on the right. Click/tap or arrow keys change
   the selection; there is no hover or scroll motion. The panel is a JS clone
   of the selected item's detail. Below 981px it becomes an accordion. */
.cat-section { background: var(--neutral-100); padding: clamp(64px, 8vw, 112px) 0; }
.cat-section .section-head { max-width: none; margin-bottom: clamp(28px, 4vw, 56px); }
.cat-selector { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.cat-list { border-top: 2px solid var(--neutral-900); }
.cat-item { position: relative; border-bottom: 1px solid var(--neutral-300); }
.cat-item.is-active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--blue-600);
}
.cat-toggle {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-4) 0;
  cursor: pointer;
  color: var(--neutral-500);
  font-family: var(--font-sans);
  transition: color var(--duration-fast) var(--ease);
}
.cat-toggle:hover, .cat-item.is-active .cat-toggle { color: var(--neutral-900); }
.cat-toggle:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.cat-num { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; width: 28px; flex: none; }
.cat-item.is-active .cat-num { color: var(--blue-600); }
.cat-name { font-size: clamp(1.125rem, 0.6vw + 0.9rem, 1.375rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.cat-detail { display: none; }
.cat-photo {
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}
.cat-title { font-size: clamp(2rem, 2.4vw + 1rem, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; margin-top: var(--space-6); }
.cat-desc { margin-top: var(--space-5); font-size: 1.2rem; line-height: 1.5; font-weight: 500; color: var(--neutral-900); max-width: 52ch; }
.cat-examples { margin-top: var(--space-5); font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.6; font-weight: 500; color: var(--neutral-700); }
.cat-used { margin-top: var(--space-4); font-size: 0.95rem; font-weight: 700; color: var(--blue-700); }
.cat-panel { position: sticky; top: 112px; }
.cat-panel .cat-title { margin-top: var(--space-6); }
@media (max-width: 980px) {
  .cat-selector { grid-template-columns: 1fr; }
  .cat-panel { display: none; }
  /* Open row becomes a white card: it bleeds 16px into the gutter and pads back
     in by the same amount, so the text stays lined up with the other rows */
  .cat-item.is-active { background: var(--neutral-0); margin: 0 -16px; padding: 0 16px; }
  .cat-item.is-active::before { left: 0; }
  /* Plus/minus hint that each row opens (drawn with gradients, no text) */
  .cat-toggle::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    margin-left: auto;
    align-self: center;
    color: var(--neutral-500);
    background:
      linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  }
  .cat-item.is-active .cat-toggle::after {
    color: var(--blue-600);
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  }
  .cat-item.is-active .cat-detail { display: block; padding: 0 0 var(--space-6) 48px; }
  .cat-detail .cat-title { display: none; }
  .cat-detail .cat-text { margin-top: var(--space-3); }
  .cat-detail .cat-desc { margin-top: 0; font-size: 1.05rem; }
  .cat-detail .cat-examples { margin-top: var(--space-3); font-size: 0.8rem; }}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  /* Tablet keeps the side-by-side hero (same ratio as desktop, tighter gap) —
     only true phone widths below stack it. See the 720px block. */
  .hero-grid { gap: 40px; }
  /* Process track becomes a vertical pipeline: same dashed-track + copper-fill
     motif as desktop, rotated, since a 4-step sequence reads fine as a
     straight line regardless of orientation. */
  .process-track {
    display: block;
    padding-left: 52px;
    /* Match the section-head text column (max-width: 640px) above it, plus
       the node column's own 52px, so the cards align with the text rather
       than stretching to the full container width. */
    max-width: calc(640px + 52px);
  }
  .process-track::before {
    top: 0; bottom: 0; left: 18px; right: auto;
    width: 1px; height: auto;
    background-image: linear-gradient(to bottom, rgba(240, 240, 236, 0.22) 0 6px, transparent 6px 12px);
    background-size: 1px 12px;
    background-repeat: repeat-y;
  }
  .process-track .track-fill {
    top: 0; bottom: 0; left: 17px; right: auto;
    width: 2px; height: auto;
    transform: scaleY(var(--progress, 0));
    transform-origin: top;
  }
  .process-step { text-align: left; padding-bottom: 36px; }
  .process-step:last-child { padding-bottom: 0; }
  .process-step .node {
    margin: 0;
    position: absolute;
    left: -52px; top: 2px;
    width: 36px; height: 36px;
    font-size: 0.8rem;
  }
  .process-step h3 { margin-bottom: 8px; }
  .process-step p { margin: 0; max-width: 42ch; }
  .diff-split { grid-template-columns: 1fr; gap: 32px; }
  .diff-content { display: contents; }
  .diff-photo { position: relative; top: 0; height: clamp(180px, 34vw, 280px); min-height: 0; order: 1; }
  .diff-intro { order: 2; margin-bottom: 0; }
  .diff-list { order: 3; margin-top: -8px; }
  .diff-list { display: grid; gap: 28px; }
  .diff-item {
    padding: 2px 0 2px 18px;
    border-top: 0;
    border-left: 3px solid var(--blue-600);
    font-size: 1.05rem;
    line-height: 1.55;
  }
  .diff-item:last-child { border-bottom: 0; }
  .diff-item h3, .diff-item p { display: block; max-width: none; }
  .diff-item h3 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
  .diff-item p { font-size: 1rem; line-height: 1.55; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* The desktop ±40px horizontal reveal-in is tuned for a two-column layout
     with margin on either side; once .closer-grid stacks to one column
     above, both halves are already close to full width, so that same
     horizontal offset pushes them past the viewport edge pre-reveal. */
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item {
    border-left: none;
    border-top: 1px solid var(--neutral-200);
    padding: 28px 0 4px;
  }
  .trust-item:nth-child(odd) { padding-right: 28px; }
  .trust-item:nth-child(even) { padding-left: 28px; }
  .trust-item:nth-child(-n+2) { border-top: none; }
  .logistics-grid { grid-template-columns: 1fr; border-top: none; }
  .logistics-item {
    border-left: none;
    border-top: 1px solid var(--neutral-200);
    padding: 28px 0 4px;
  }
  .logistics-item:first-child { border-top: none; padding-top: 0; }}
@media (max-width: 720px) {
  /* Phone: plain stack in natural reading order — headline through its full
     supporting copy first, ticket demo after. Interleaving the ticket
     between the headline and its lede split the message in two, which read
     worse than just letting the demo follow everything. */
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 48px; }
  /* The old 22px dash looked cramped at this width, so it was dropped
     entirely. Now that the mark is a small 7px pulse dot instead, it reads
     fine at any width — keep it visible, just with a tighter gap. */
  .hero-eyebrow-line { gap: 8px; }
  .site-header--float { padding-top: var(--space-6); }
  .hero { padding-top: calc(88px + var(--space-6)); }
  /* Phone: the copy spans the full width and runs over the bright truck, so the
     left-to-right scrim isn't enough — darken the whole photo evenly, a little
     less at the bottom where the stats bar takes over. */
  .hero::before {
    background: linear-gradient(to bottom, rgba(15, 17, 21, 0.84) 0%, rgba(15, 17, 21, 0.78) 55%, rgba(15, 17, 21, 0.6) 100%);
  }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.mobile-open {
    display: flex;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 32px;
    gap: 20px;
  }
  .nav-links.mobile-open .lang-switch {
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid var(--neutral-200);
    width: 100%;
  }
  .nav-links.mobile-open .lang-trigger { display: none; }
  .nav-links.mobile-open .lang-menu {
    position: static;
    display: flex;
    gap: 8px;
    min-width: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-links.mobile-open .lang-menu a { padding: 10px 16px; background: var(--neutral-0); gap: 10px; }
  .site-header--float .nav-links.mobile-open a.btn { margin-left: 0; }
  .site-header--float .nav-links.mobile-open {
    top: calc(100% + var(--space-2));
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--neutral-100);
  }
  .hero-stats-dock { margin-top: var(--space-12); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .stat { padding: var(--space-6) var(--space-4); }
  .hero-stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-stats .stat:nth-child(n+3) { border-top: 1px solid var(--neutral-700); }
  .trust-grid { grid-template-columns: 1fr; border-top: none; }
  .trust-item,
  .trust-item:nth-child(odd),
  .trust-item:nth-child(even) {
    border-left: none;
    border-top: 1px solid var(--neutral-200);
    padding: 24px 0 4px;
  }
  .trust-item:first-child { border-top: none; padding-top: 0; }
  .industries-grid { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .cta-band--blue .cta-inner { align-items: stretch; }
  .btn-on-blue { justify-content: center; }
  /* Phones: the blueprint gets its own strip under the button, fading in from solid blue */
  .cta-band--blue { padding-bottom: 110px; }
  .cta-band--blue::before {
    inset: auto 0 0 0;
    height: 120px;
    opacity: 0.4;
    background-size: cover;
    background-position: 75% center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  }
  .cta-band--blue::after { content: none; }
  .form-card { padding: 28px 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }}
@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr; }}
@media (min-width: 981px) {
  .elastic-gallery { display: flex; }
  .industries-grid { display: none; }}

/* Section 5 wide layout (desktop): left headline with the lede beside it, as
   in section 4, then a taller, full-width gallery whose panels rise in with a
   short stagger. The hover/expand behaviour itself is unchanged. */
@media (min-width: 981px) {
  .industries-section .section-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--space-12);
    margin-bottom: 64px;
  }
  .industries-section .section-head .h-1 {
    font-size: clamp(2.25rem, 2.2vw + 1rem, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
  }
  .industries-section .section-head .lede { margin-top: 0; max-width: 40ch; justify-self: end; }
  .industries-section .elastic-gallery {
    height: clamp(480px, 62vh, 640px);
    margin-bottom: 0;
  }
  .industries-section .elastic-content { padding: 36px; gap: 12px; }
  .industries-section .elastic-title {
    font-size: clamp(2rem, 1.8vw + 1rem, 3rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    white-space: normal;
  }
  .industries-section .elastic-sub {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.88);
  }
  .industries-section .elastic-example {
    margin: 6px 0 0;
    padding-top: 14px;
    max-width: 46ch;
    border-top: 1px dashed rgba(255, 255, 255, 0.32);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
  }
  .industries-section .elastic-example .mono { color: var(--blue-400); font-weight: 600; }
  /* The gallery's own .reveal fade is replaced by per-panel staggered rises. */
  .industries-section .elastic-gallery.reveal { opacity: 1; transform: none; }
  .industries-section .elastic-gallery.reveal .elastic-panel { opacity: 0; }
  .industries-section .elastic-gallery.reveal.in .elastic-panel {
    opacity: 1;
    animation: panel-rise 0.8s var(--ease) backwards;
  }
  .industries-section .elastic-gallery.reveal.in .elastic-panel:nth-child(2) { animation-delay: 0.08s; }
  .industries-section .elastic-gallery.reveal.in .elastic-panel:nth-child(3) { animation-delay: 0.16s; }
  .industries-section .elastic-gallery.reveal.in .elastic-panel:nth-child(4) { animation-delay: 0.24s; }}
/* Tablet and mobile (<981px): the same gallery as a vertical accordion. Panels
   stack as slim photo bars with a horizontal name over the photo; tapping one
   (the existing data-panel click handler) opens it to the same stack as
   desktop — name, descriptor, RFQ example, button — and closes the previous.
   Replaces the old static card grid at these widths. */
@media (max-width: 980px) {
  .industries-grid { display: none; }
  .industries-section .elastic-gallery {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 10px;
    margin-bottom: 0;
  }
  .industries-section .elastic-panel {
    flex: none;
    height: 84px;
    transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .industries-section .elastic-panel.active { flex: none; height: 470px; }
  .industries-section .elastic-label {
    writing-mode: horizontal-tb;
    left: 22px; right: 22px;
    top: 50%; bottom: auto;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  /* Small plus on the collapsed bars: a hint that they open on tap. It lives
     on the label, so it fades out with it when the panel becomes active. */
  .industries-section .elastic-label::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    box-sizing: border-box;
    width: 24px; height: 24px;
    transform: translateY(-50%);
    border: 1.5px solid currentColor;
    border-radius: 2px;
    background:
      linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
  }
  .industries-section .elastic-content { padding: 24px 22px; gap: 10px; }
  .industries-section .elastic-title {
    font-size: clamp(2rem, 7vw, 2.75rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    white-space: normal;
  }
  .industries-section .elastic-sub {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.88);
  }
  .industries-section .elastic-example {
    margin: 4px 0 0;
    padding-top: 12px;
    max-width: 46ch;
    border-top: 1px dashed rgba(255, 255, 255, 0.32);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
  }
  .industries-section .elastic-example .mono { color: var(--blue-400); font-weight: 600; }}
@keyframes panel-rise {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}

/* Section 4 on tablet and mobile (<981px): the vertical pipeline, dressed in the
   desktop card language — larger numbered nodes, a blue top rule on the active
   card, a ghost mono numeral, and text that fills the card. No pin or
   typewriter here (desktop only). */
@media (max-width: 980px) {
  .process-pin-wrapper .section-head .h-1 {
    font-size: clamp(2.25rem, 6vw + 0.5rem, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
  }
  .process-track {
    counter-reset: step;
    padding-left: 64px;
    max-width: none;
  }
  .process-track::before { left: 23px; }
  .process-track .track-fill { left: 23px; }
  .process-step { counter-increment: step; padding-bottom: 24px; }
  .process-step .node {
    left: -64px; top: 0;
    width: 48px; height: 48px;
    font-size: 0.95rem;
  }
  .process-step-card {
    overflow: hidden;
    padding: 28px 24px 24px;
    border-top: 3px solid rgba(240, 240, 236, 0.14);
  }
  .process-step.active .process-step-card { border-top-color: var(--blue-600); }
  .process-step-card::after {
    content: counter(step, decimal-leading-zero) / "";
    position: absolute;
    bottom: -6px; right: 14px;
    font-family: var(--font-mono);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(240, 240, 236, 0.05);
    pointer-events: none;
  }
  .process-step h3 { font-size: 1.35rem; }
  .process-step p { max-width: 56ch; }}

/* Section 6 on tablet and mobile (<981px): the desktop treatment scaled down —
   photo lightest at the top with the darkness building toward the text, a
   bigger headline, and numbered items with a top rule that draws in and a
   ghost mono numeral. Three columns from 640px up; stacked below that. */
@media (max-width: 980px) {
  .logistics-section { padding: clamp(72px, 11vw, 96px) 0; }
  .logistics-section::before {
    background:
      radial-gradient(ellipse 80% 22% at 50% 22%, rgba(3, 8, 15, 0.45), transparent 100%),
      linear-gradient(180deg, rgba(3, 8, 15, 0.3) 0%, rgba(3, 8, 15, 0.5) 28%, rgba(3, 8, 15, 0.78) 55%, rgba(3, 8, 15, 0.92) 100%);
  }
  .logistics-section .section-head { max-width: none; margin-bottom: 40px !important; }
  .logistics-section .section-head .h-1 {
    font-size: clamp(2.25rem, 6vw + 0.5rem, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
    text-shadow: 0 2px 24px rgba(3, 8, 15, 0.45);
  }
  .logistics-section .section-head .lede {
    max-width: 52ch;
    color: rgba(240, 240, 236, 0.9);
    text-shadow: 0 1px 14px rgba(3, 8, 15, 0.7);
  }
  .logistics-grid {
    counter-reset: logi;
    grid-template-columns: 1fr;
    row-gap: 8px;
    border-top: none;
  }
  .logistics-grid.reveal { opacity: 1; transform: none; }
  .logistics-item,
  .logistics-item:first-child {
    position: relative;
    counter-increment: logi;
    padding: 30px 0 20px;
    border-left: none;
    border-top: 1px solid rgba(240, 240, 236, 0.22);
  }
  .logistics-item::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--blue-600);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--ease);
  }
  .logistics-grid.in .logistics-item::before { transform: scaleX(1); }
  .logistics-grid.in .logistics-item:nth-child(2)::before { transition-delay: 0.15s; }
  .logistics-grid.in .logistics-item:nth-child(3)::before { transition-delay: 0.3s; }
  .logistics-item::after {
    content: counter(logi, decimal-leading-zero) / "";
    position: absolute;
    top: 12px; right: 0;
    font-family: var(--font-mono);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(240, 240, 236, 0.07);
    pointer-events: none;
  }
  .logistics-item h3 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    padding-right: 3.5rem;
  }
  .logistics-item p { font-size: 1rem; color: rgba(240, 240, 236, 0.82); max-width: 44ch; }
  .logistics-grid.reveal .logistics-item { opacity: 0; }
  .logistics-grid.reveal.in .logistics-item { opacity: 1; animation: panel-rise 0.8s var(--ease) backwards; }
  .logistics-grid.reveal.in .logistics-item:nth-child(2) { animation-delay: 0.1s; }
  .logistics-grid.reveal.in .logistics-item:nth-child(3) { animation-delay: 0.2s; }}
@media (min-width: 640px) and (max-width: 980px) {
  .logistics-grid { grid-template-columns: repeat(3, 1fr); column-gap: 28px; row-gap: 0; }
  .logistics-item::after { font-size: 3.25rem; top: 14px; }
  .logistics-item h3 { font-size: 1.2rem; padding-right: 0; margin-top: 2.4rem; }}

/* Logistics on phones: the drawn-in rules are faint, the photo is a portrait
   crop (its own file) shown as a band across the top that fades into solid
   dark, and each item gets more room. */
@media (max-width: 639px) {
  .logistics-item::before { background: rgba(255, 255, 255, 0.13); }
  .logistics-item,
  .logistics-item:first-child { border-top-color: rgba(240, 240, 236, 0.1); }
  .logistics-section {
    background-color: #03080f;
    background-image: url('../images/logistics-cargo-mobile.webp');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .logistics-section::before {
    background:
      radial-gradient(ellipse 80% 130px at 50% 170px, rgba(3, 8, 15, 0.5), transparent 100%),
      linear-gradient(180deg, rgba(3, 8, 15, 0.3) 0, rgba(3, 8, 15, 0.5) 170px, rgba(3, 8, 15, 0.82) 390px, #03080f 520px);
  }
  .logistics-grid { row-gap: 0; }
  .logistics-item,
  .logistics-item:first-child { padding: 40px 0 36px; }}

/* ================= About: timeline (manifest ledger) =================
   Four full-width rows under a heavy ink rule: year numeral, copy, photo.
   The Tintaya note is a footnote inside the 1978 copy column. */
.ledger { border-top: 3px solid var(--neutral-900); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(160px, 24%) minmax(0, 1fr) minmax(0, 40%);
  gap: 0 56px;
  align-items: start;
  padding: 56px 0;
  border-bottom: 1px solid var(--neutral-300);
}
.ledger-year {
  margin-left: -0.04em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--neutral-900);
}
.ledger-copy h3 {
  margin: 6px 0 14px;
  font-size: clamp(1.6rem, 1.1vw + 1.3rem, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.ledger-copy > p { margin: 0; max-width: 46ch; font-size: 1.05rem; line-height: 1.6; color: var(--neutral-600); }
.ledger-figure { margin: 0; }
.ledger-figure figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.ledger-figure figcaption::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  vertical-align: 1px;
  background: var(--blue-600);
}
.ledger-photo { aspect-ratio: 16 / 10; background-size: cover; background-position: center; border-radius: 4px; }

.ledger-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 46ch;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--neutral-300);
}
.ledger-note-icon { width: 26px; height: 26px; flex: none; margin-top: 2px; color: var(--blue-600); }
.ledger-note-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.ledger-note h4 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; color: var(--neutral-900); }
.ledger-note p { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--neutral-600); }

@media (max-width: 900px) {
  .ledger-row { grid-template-columns: 1fr; gap: 14px 0; padding: 40px 0; }
  .ledger-year { font-size: clamp(3.5rem, 20vw, 5.5rem); }
  .ledger-figure { margin-top: 10px; }}

/* ================= About: where we work (region selector) =================
   Big region names on the left; the active region's countries on the right.
   Below 900px the countries open inline under each region (tap to toggle). */
.market-section { padding: clamp(72px, 9vw, 120px) 0; background: var(--neutral-900); color: var(--neutral-50); border-bottom: 1px solid rgba(240, 240, 236, 0.12); }
.market-section .section-head { max-width: 640px; }
.market-section .kicker { color: #7fa8ff; }
.market-section .h-1 { color: var(--neutral-50); }
.market-section .lede { color: rgba(240, 240, 236, 0.82); }
.market-selector { position: relative; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--neutral-700); }
.market-item { width: calc(50% - 40px); border-top: 1px solid var(--neutral-700); }
.market-region {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 2.9vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: rgba(240, 240, 236, 0.38);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.market-region:hover { color: rgba(240, 240, 236, 0.7); }
.market-item.active .market-region { padding-left: 22px; color: var(--neutral-50); box-shadow: inset 4px 0 0 var(--blue-600); }
.market-arrow { flex: none; width: 28px; height: 28px; color: #7fa8ff; opacity: 0; transform: translateX(-10px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.market-item.active .market-arrow { opacity: 1; transform: none; }
.market-panel {
  position: absolute;
  top: 0;
  left: calc(50% + 40px);
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(14px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s 0.35s;
}
.market-item.active .market-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease) 0.08s, transform 0.35s var(--ease) 0.08s; }
.market-countries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--neutral-700); }
.market-country {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--neutral-700);
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1.5vw, 1.6rem);
  font-weight: 700;
}
.market-pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7fa8ff; animation: market-pulse 1.8s ease-in-out infinite; }
@keyframes market-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127, 168, 255, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(127, 168, 255, 0); }
}
.market-closer { margin: 48px 0 0; font-size: 1.05rem; color: rgba(240, 240, 236, 0.7); }
.market-closer a { color: #7fa8ff; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s var(--ease); }
.market-closer a:hover { color: var(--neutral-50); }
@media (max-width: 900px) {
  .market-item { width: 100%; }
  .market-region { font-size: 1.9rem; padding: 20px 0; }
  .market-item.active .market-region { padding-left: 18px; }
  .market-arrow { opacity: 0.6; transform: rotate(90deg); }
  .market-item.active .market-arrow { opacity: 1; transform: rotate(-90deg); }
  .market-panel { position: static; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
  .market-item.active .market-panel { max-height: 900px; }
  .market-countries { grid-template-columns: 1fr; padding-bottom: 18px; border-top: 0; }
  .market-country { padding: 14px 0 14px 18px; font-size: 1.15rem; }}
@media (prefers-reduced-motion: reduce) { .market-pulse { animation: none; }}

/* ================= About: why it still works (statement + four columns) =================
   A huge display headline over a heavy rule, then four equal columns with
   big mono numerals (same treatment as the hero stats). */
.why-section { padding: clamp(80px, 10vw, 140px) 0 clamp(72px, 9vw, 120px); }
.why-kicker { display: block; margin-bottom: 22px; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-600); }
.why-headline { margin: 0 0 clamp(56px, 7vw, 96px); font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; color: var(--neutral-900); }
.why-reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 3px solid var(--neutral-900); }
.why-reason { padding: 32px 32px 8px 0; }
.why-reason + .why-reason { padding-left: 32px; border-left: 1px solid var(--neutral-300); }
.why-reason:nth-child(2).reveal { transition-delay: 0.08s; }
.why-reason:nth-child(3).reveal { transition-delay: 0.16s; }
.why-reason:nth-child(4).reveal { transition-delay: 0.24s; }
.why-n { display: block; margin: 0 0 28px -0.03em; font-family: var(--font-mono); font-weight: 700; font-size: clamp(3rem, 5vw, 5.5rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--neutral-900); }
.why-reason h3 { margin: 0 0 12px; font-size: clamp(1.2rem, 0.7vw + 1rem, 1.55rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 800; }
.why-reason p { margin: 0; max-width: 34ch; font-size: 1rem; line-height: 1.6; color: var(--neutral-600); }
@media (max-width: 1000px) {
  .why-reasons { grid-template-columns: 1fr 1fr; }
  .why-reason:nth-child(odd) { padding-left: 0; border-left: 0; }
  .why-reason:nth-child(n+3) { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--neutral-300); }}
@media (max-width: 600px) {
  .why-reasons { grid-template-columns: 1fr; }
  .why-reason, .why-reason + .why-reason { padding: 28px 0 8px; border-left: 0; margin-top: 0; }
  .why-reason + .why-reason { margin-top: 20px; border-top: 1px solid var(--neutral-300); }
  .why-n { font-size: 3.2rem; margin-bottom: 18px; }}

/* ===== Terms of Service (legal shell, shared with privacy.html) ===== */
.terms-band { background: var(--neutral-900); color: var(--neutral-0); padding: 160px 0 72px; }
.terms-band .kicker { color: var(--blue-300); }
.terms-title { margin: 16px 0 0; font-weight: 800; font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.95; letter-spacing: -0.03em; }
.terms-updated { display: block; margin-top: 32px; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.terms-notice { background: var(--amber-50); border-bottom: 1px solid var(--amber-200); }
.terms-notice .container { display: flex; gap: 20px; padding-top: 22px; padding-bottom: 22px; }
.terms-notice-bar { flex: none; width: 4px; border-radius: 2px; background: var(--amber-400); }
.terms-notice p { margin: 0; max-width: 90ch; font-size: 0.95rem; font-weight: 600; line-height: 1.6; color: var(--amber-700); }
.terms-split { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: clamp(32px, 6vw, 96px); padding-top: 72px; padding-bottom: 120px; }
.terms-rail { position: sticky; top: 110px; align-self: start; }
.terms-rail ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--neutral-300); }
.terms-rail a { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--neutral-200); font-size: 0.95rem; font-weight: 600; text-decoration: none; color: var(--neutral-500); transition: color 0.2s, padding 0.2s; }
.terms-rail a span { width: 24px; padding-top: 2px; font-family: var(--font-mono); font-size: 0.8rem; }
.terms-rail a.is-active { padding-left: 14px; color: var(--blue-600); box-shadow: inset 3px 0 0 var(--blue-600); }
.terms-clause { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 36px 0 44px; border-top: 1px solid var(--neutral-300); scroll-margin-top: 100px; }
.terms-clause::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--blue-600); transition: width 0.6s; }
.terms-clause.is-active::before { width: 100%; }
.terms-num { font-family: var(--font-mono); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; color: var(--neutral-300); transition: color 0.3s; }
.terms-clause.is-active .terms-num { color: var(--blue-600); }
.terms-clause h2 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.terms-clause p { margin: 0; max-width: 62ch; font-size: 1.05rem; line-height: 1.6; color: var(--neutral-600); }
.terms-clause p a { color: var(--blue-600); }
@media (max-width: 980px) {
  .terms-band { padding: 130px 0 56px; }
  .terms-split { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 80px; }
  .terms-rail { display: none; }
  .terms-clause { grid-template-columns: 64px 1fr; gap: 16px; }
  .terms-num { font-size: 1.8rem; }}

/* ===== 404 (light surface, large ghost numeral, ruled quick links) ===== */
.nf-section {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 100vh; box-sizing: border-box;
  padding: 128px 0 96px;
  background: var(--neutral-50);
}
.nf-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 17, 21, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 17, 21, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 70% at 85% 50%, black, transparent 75%);
}
.nf-digits {
  position: absolute; right: clamp(24px, 4vw, 64px); bottom: 5vh;
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(9rem, 27vw, 28rem); line-height: 1; letter-spacing: -0.04em;
  color: var(--neutral-200);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.nf-section > .container { width: 100%; }
.nf-inner { position: relative; z-index: 1; max-width: 860px; padding-left: 20px; }
.nf-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.nf-code { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--neutral-500); }
.nf-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--rust-300); background: var(--rust-50); color: var(--rust-700);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.nf-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rust-500); flex: none; animation: status-pulse 1.8s ease-in-out infinite; }
.nf-title { margin: 0; font-weight: 800; font-size: clamp(2.6rem, 7vw, 6.5rem); line-height: 0.98; letter-spacing: -0.03em; color: var(--neutral-900); }
.nf-lede { margin: 28px 0 0; max-width: 48ch; font-size: 1.15rem; line-height: 1.6; color: var(--neutral-600); }
.nf-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 36px 0 64px; }
.nf-actions .btn { padding: 16px 28px; font-size: 1rem; }
.nf-links { max-width: 520px; border-top: 3px solid var(--neutral-900); }
.nf-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--neutral-300);
  font-size: 1.05rem; font-weight: 700; color: var(--neutral-900); text-decoration: none;
  transition: color 0.2s var(--ease), padding 0.25s var(--ease);
}
.nf-links a i { font-style: normal; color: var(--blue-600); transition: transform 0.25s var(--ease); }
.nf-links a:hover { color: var(--blue-600); padding-left: 8px; }
.nf-links a:hover i { transform: translateX(6px); }
@keyframes nf-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.nf-meta, .nf-title, .nf-lede, .nf-actions, .nf-links { animation: nf-rise 0.7s var(--ease) both; }
.nf-title { animation-delay: 0.08s; }
.nf-lede { animation-delay: 0.16s; }
.nf-actions { animation-delay: 0.24s; }
.nf-links { animation-delay: 0.32s; }
@media (max-width: 720px) {
  .nf-section { min-height: 0; padding: 112px 0 72px; align-items: flex-start; }
  .nf-inner { padding-left: 0; }
  .nf-digits { display: none; }
  .nf-actions { flex-direction: column; margin-bottom: 48px; }
  .nf-actions .btn { width: 100%; justify-content: center; text-align: center; }}