@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: optional;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: optional;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --void: #070707;
  --carbon: #0d0e12;
  --obsidian: #141418;
  --iron: #2e3038;
  --steel-border: #22222a;
  --white: #ffffff;
  --mist: #f0f0f0;
  --fog: #d9dae5;
  --ash: #c8cad0;
  --graphite: #aeaeb7;
  --slate: #a2a4a9;
  --cinder: #60606c;
  --mint: #0bc797;
  --mint-ink: #0bc797;
  --signal: #0092e4;
  --ice: #a6e5f2;
  --current: #00ade4;
  --deep-signal: #0771d7;
  --verdant: #75ae4c;
  --iris: #929dbd;

  /* RGB triplet (no #, no rgba()) so hover/active veils can be written as
     rgba(var(--veil-rgb), X) once and just flip base channel per theme,
     instead of restating every opacity step per theme. */
  --veil-rgb: 255, 255, 255;
  --nav-bg-solid: rgba(9, 10, 13, 0.86);
  --nav-bg-glass: rgba(9, 10, 13, 0.52);
  --rail-item-bg: rgba(13, 14, 18, 0.6);

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px;
  --space-40: 40px; --space-56: 56px; --space-80: 80px;
}

/* Light theme: same token names, values swapped so every existing rule
   below (and every inline style="color: var(--ash)" in the HTML) adapts
   automatically. --mint, --signal and --deep-signal stay constant across
   themes -- they're the brand accent and already pass contrast on both
   backgrounds where they're used decoratively; only --mint-ink, --ice and
   --verdant get theme-specific values because those three are used as
   *text* color, where the dark-mode value would fail contrast on white. */
:root[data-theme="light"] {
  color-scheme: light;
  --void: #ffffff;
  --carbon: #f7f8fa;
  --obsidian: #eef0f3;
  --iron: #dde0e5;
  --steel-border: #e8eaed;
  --white: #0d0f12;
  --mist: #23262b;
  --fog: #c7cad1;
  --ash: #454850;
  --graphite: #5b5e66;
  --slate: #71747a;
  --cinder: #9a9ca2;
  --mint-ink: #067a5f;
  --ice: #0d7490;
  --verdant: #2f6b1f;

  --veil-rgb: 10, 12, 16;
  --nav-bg-solid: rgba(255, 255, 255, 0.86);
  --nav-bg-glass: rgba(255, 255, 255, 0.6);
  --rail-item-bg: rgba(255, 255, 255, 0.72);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body {
  background: var(--void);
  color: var(--white);
  margin: 0;
  font-family: var(--font-body);
}

body {
  padding: 0 24px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.27px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3, h4, p { margin: 0; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.056em;
  text-wrap: balance;
}

.wrap { max-width: 1200px; margin: 0 auto; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.094em;
  text-transform: uppercase;
  color: var(--ice);
}

/* Fixed dark ink, not the flipping --void: this always sits on the mint
   brand color, which itself doesn't change between themes. */
::selection { background: var(--mint); color: #070707; }

:focus-visible {
  outline: 2px solid var(--deep-signal);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 24px;
  z-index: 100;
  background: var(--white);
  color: var(--void);
  padding: 12px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

a, button {
  touch-action: manipulation;
}

/* ---------- Nav ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg-solid);
  border-bottom: 1px solid var(--slate);
  margin: 0 -24px;
  padding: 0 24px;
}
/* Glass treatment: only for browsers that actually support the blur, so
   the fallback above stays a solid, fully legible bar. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  nav {
    background: var(--nav-bg-glass);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(var(--veil-rgb), 0.09);
    box-shadow:
      inset 0 1px 0 rgba(var(--veil-rgb), 0.07),
      0 12px 32px -12px rgba(0, 0, 0, 0.55);
  }
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 34px; width: auto; display: block; }

.footer-logo { height: 34px; width: auto; display: block; margin-bottom: 16px; }
.nav-links-wrap {
  position: relative;
  display: flex;
}
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 14px;
}
.nav-links a {
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: var(--slate);
  display: inline-block;
  padding: 8px 16px;
  border-radius: 800px;
  border: 1px solid transparent;
  background-color: transparent;
  transition: color 0.2s ease, border-color 0.25s ease, background-color 0.25s ease;
}
/* Hover reads as a quieter preview of the active pill -- never as strong. */
.nav-links a:not(.active):hover {
  color: var(--white);
  border-color: rgba(var(--veil-rgb), 0.16);
  background-color: rgba(var(--veil-rgb), 0.04);
}
.nav-links a.active { color: var(--white); }

/* The active indicator is one shared element that slides/resizes to the
   active link's position (set via JS in script.js) instead of each link
   independently toggling its own border -- avoids the "remove one border,
   add another" jump and reads as a single capsule travelling between items. */
.nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 800px;
  border: 1px solid var(--white);
  background-color: rgba(var(--veil-rgb), 0.06);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.35s ease,
    height 0.35s ease,
    opacity 0.25s ease;
}
.nav-pill.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-pill { transition: opacity 0.25s ease; }
}
.nav-actions { display: flex; gap: 12px; align-items: center; }
.nav-actions .pill-ghost { display: none; }
@media (min-width: 720px) { .nav-actions .pill-ghost { display: inline-flex; } }
@media (max-width: 860px) { .nav-links-wrap { display: none; } }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) { .nav-toggle { display: flex; } }

.mobile-menu {
  position: fixed;
  top: 64px;
  left: 0; right: 0; bottom: 0;
  background: var(--void);
  border-top: 1px solid var(--iron);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 49;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a.mobile-link {
  text-decoration: none;
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 20px;
  padding: 14px 16px;
  margin: 0 -16px;
  border-bottom: 1px solid var(--iron);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.mobile-menu a.mobile-link.active {
  color: var(--white);
  background-color: rgba(var(--veil-rgb), 0.06);
  box-shadow: inset 0 0 0 1px var(--white);
}
.mobile-menu .mobile-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.mobile-menu .pill-filled, .mobile-menu .pill-ghost { width: 100%; }

/* ---------- Buttons ---------- */
.pill-filled, .pill-ghost {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  border-radius: 800px;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.pill-filled {
  background: var(--white);
  color: var(--void);
  box-shadow: rgba(0,0,0,0.05) 2px 2px 0 0,
    var(--white) 0 -1px 0 0 inset, var(--white) 1px 0 0 0 inset,
    var(--white) -1px 0 0 0 inset, var(--white) 0 1px 0 0 inset;
}
.pill-filled:hover { background: var(--mist); }
.pill-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
  font-weight: 400;
  transition: background-color 0.2s ease;
}
.pill-ghost:hover { background: var(--obsidian); }
/* Contact is already a white-outlined pill at rest, so its active state
   (the Contact section in view) is a subtle fill rather than a border
   change, matching the same white-border/white-text active language. */
.pill-ghost.nav-link.active { background-color: rgba(var(--veil-rgb), 0.1); }
.pill-sm { padding: 10px 20px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--space-80) 0 var(--space-56);
  overflow: hidden;
}
/* The homepage hero has a real dark photograph baked in (masked into the
   background on the right), so it can't follow the light-theme toggle --
   a light page background would cut a hard white edge into a dark night
   photo. Re-pin the tokens it actually uses back to their dark-mode
   values, regardless of [data-theme]; everything else on the page still
   switches normally. */
.hero-photo {
  --white: #ffffff;
  --void: #070707;
  --mist: #f0f0f0;
  --ash: #c8cad0;
  --slate: #a2a4a9;
  --mint-ink: #0bc797;
  --veil-rgb: 255, 255, 255;
  /* .hero itself is otherwise transparent and just shows the page's own
     background through -- fine normally, but here the pin above keeps
     this section's text dark-mode-bright even in light mode, so it needs
     its own dark backdrop too, or that text would sit on the (now white)
     page background. */
  background: var(--void);
  /* h1 has no color rule of its own -- it just inherits body's color, and
     inheritance carries body's already-resolved value, not a live re-read
     of var(--white) using this element's pinned custom properties. Without
     redeclaring color here too, the pin above never actually reaches it. */
  color: var(--white);
}
.hero-visual {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent, black 55%);
  mask-image: linear-gradient(to right, transparent, black 55%);
}
@media (min-width: 1280px) {
  .hero-visual { display: block; width: min(48%, 820px); }
  .hero-content { max-width: 920px; }
}
@media (min-width: 1440px) {
  .hero-visual { width: min(50%, 860px); }
}
.hero h1 {
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: 3.1px;
  margin-top: 16px;
}
@media (min-width: 720px) { .hero h1 { font-size: 72px; letter-spacing: 4px; line-height: 1; } }
@media (min-width: 1040px) { .hero h1 { font-size: 88px; letter-spacing: 4.9px; line-height: 0.96; } }
.hero h1 em { font-style: normal; color: var(--mint-ink); }

/* Service pages: longer, sentence-style headlines use the next rung down
   in the same type scale (text-heading-lg, 72px) instead of the display
   size (88px), which DESIGN.md reserves for very short homepage headlines. */
.hero-service h1 { font-size: 56px; line-height: 1.1; letter-spacing: 3.1px; }
@media (min-width: 720px) { .hero-service h1 { font-size: 64px; letter-spacing: 3.6px; line-height: 1.05; } }
@media (min-width: 1040px) { .hero-service h1 { font-size: 72px; letter-spacing: 4px; line-height: 1; } }
.hero-sub {
  max-width: 620px;
  color: var(--ash);
  font-size: 18px;
  line-height: 1.55;
  margin-top: 24px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.hero-connectors {
  margin-top: 56px;
  color: var(--slate);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* position+z-index so this stacks above .hero-visual: without it, the
   absolutely-positioned photo paints on top of the (static) text
   wherever their boxes overlap, even where the photo's own mask is only
   partially transparent, muddying whichever line of text reaches
   furthest into that overlap. */
.hero-content { position: relative; z-index: 1; display: grid; gap: var(--space-40); }

/* Scoped to the hero only -- doesn't touch .pill-filled/.pill-ghost
   sitewide. Brightness/background already come from the shared hover
   rules; this only adds the lift and the subtle edge highlight. */
.hero-ctas .pill-filled { transition: transform 0.2s ease, background-color 0.2s ease; }
.hero-ctas .pill-filled:hover { transform: translateY(-2px); }
.hero-ctas .pill-ghost { transition: box-shadow 0.2s ease, background-color 0.2s ease; }
.hero-ctas .pill-ghost:hover { box-shadow: 0 0 0 1px rgba(var(--veil-rgb), 0.25); }

/* Hero text entrance sequence. Pure CSS, runs automatically on load (no
   scroll trigger needed -- this is above the fold), gated entirely behind
   prefers-reduced-motion so a reduced-motion visit just renders everything
   at its final state immediately. */
@media (prefers-reduced-motion: no-preference) {
  .hero-content > * { opacity: 0; animation: hero-fade-up 0.7s ease forwards; }
  .hero-content .eyebrow { animation-delay: 0.05s; }
  .hero-content h1 { animation-delay: 0.2s; }
  .hero-content .hero-sub { animation-delay: 0.55s; }
  .hero-content .hero-ctas { animation-delay: 0.75s; }
  .hero-content .hero-connectors { animation-delay: 0.95s; }
  .hero-content h1 em {
    color: var(--mist);
    animation: hero-accent-color 0.6s ease forwards;
    animation-delay: 0.9s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ctas .pill-filled:hover,
  .hero-ctas .pill-ghost:hover { transform: none; }
}

@keyframes hero-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-accent-color { from { color: var(--mist); } to { color: var(--mint-ink); } }

/* ---------- Sections ---------- */
section { padding: var(--space-80) 0; scroll-margin-top: 80px; }
.section-header { max-width: 680px; margin-bottom: var(--space-56); }
.section-header h2 {
  font-size: 32px;
  letter-spacing: 1.8px;
  line-height: 1.1;
  margin-top: 12px;
}
@media (min-width: 720px) { .section-header h2 { font-size: 56px; letter-spacing: 3.1px; } }
.section-header p { color: var(--ash); margin-top: 20px; font-size: 16px; line-height: 1.55; }
.divider { border: none; border-top: 1px solid var(--iron); }

/* ---------- Cards ---------- */
.card {
  background: var(--carbon);
  border: 1px solid var(--fog);
  border-radius: 20px;
  padding: 20px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.service-card {
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}
.service-card:hover {
  border-color: var(--mint);
}
@media (prefers-reduced-motion: reduce) {
  .service-card { transition: none; }
}
a.card { text-decoration: none; }
.service-card h3 {
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--white);
  margin-top: 10px;
}
.service-card p {
  color: var(--graphite);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 10px;
}
.card-arrow {
  display: block;
  margin-top: auto;
  padding-top: 20px;
  color: var(--mint-ink);
  font-size: 14px;
  font-weight: 500;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--slate);
  font-size: 14px;
  text-decoration: none;
}
.back-link:hover { color: var(--white); }
.service-tag {
  display: inline-block;
  font-size: 12px;
  color: var(--slate);
  letter-spacing: 0.03em;
}

/* ---------- Approach: scroll-driven step timeline ---------- */
.approach-grid {
  display: grid;
  gap: var(--space-40);
  grid-template-columns: 1fr;
}
@media (min-width: 1040px) {
  /* align-items: start is what lets the sticky column actually stick for
     the timeline's full scroll range instead of stretching to match it. */
  .approach-grid { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
  .approach-sticky { position: sticky; top: 104px; }
}

.approach-timeline { position: relative; padding-left: 40px; }
@media (min-width: 1040px) { .approach-timeline { padding-left: 48px; } }

.approach-line {
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--iron);
  border-radius: 2px;
}
.approach-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--mint);
  border-radius: 2px;
}

.approach-step {
  position: relative;
  padding: 32px 0;
  min-height: 32vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.4;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media (min-width: 1040px) { .approach-step { min-height: 46vh; } }
.approach-step:first-child { padding-top: 0; }
.approach-step:last-child { padding-bottom: 0; min-height: 0; }

.approach-dot {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--void);
  border: 2px solid var(--iron);
  transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}
@media (min-width: 1040px) { .approach-dot { left: -48px; } }

.approach-num {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--slate);
  letter-spacing: 0.056em;
  transition: color 0.4s ease;
}
.approach-body h3 {
  font-size: 22px;
  letter-spacing: 0.5px;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--graphite);
  margin-top: 8px;
  transition: color 0.4s ease;
}
.approach-body p {
  color: var(--slate);
  font-size: 15px;
  margin-top: 8px;
  max-width: 480px;
  transition: color 0.4s ease;
}

/* Already passed: stays visible, never disappears, just subdued relative
   to the active step. */
.approach-step.is-done { opacity: 0.75; transform: translateY(0); }
.approach-step.is-done .approach-dot { border-color: var(--mint); background: var(--mint); opacity: 0.55; }
.approach-step.is-done .approach-num { color: var(--mint-ink); opacity: 0.65; }
.approach-step.is-done .approach-body h3 { color: var(--mist); }
.approach-step.is-done .approach-body p { color: var(--slate); }

/* The current visual focus. */
.approach-step.is-active { opacity: 1; transform: translateY(0); }
.approach-step.is-active .approach-dot { border-color: var(--mint); background: var(--mint); box-shadow: 0 0 0 5px rgba(11, 199, 151, 0.16); }
.approach-step.is-active .approach-num { color: var(--mint-ink); }
.approach-step.is-active .approach-body h3 { color: var(--white); }
.approach-step.is-active .approach-body p { color: var(--ash); }

@media (prefers-reduced-motion: reduce) {
  .approach-step { transition: none; transform: none; }
}

/* ---------- Standards ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  border: 1px solid var(--deep-signal);
  color: var(--ice);
  border-radius: 800px;
  padding: 6px 16px;
  font-size: 13px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.standards-statement {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--steel-border);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.34px;
  color: var(--mist);
  max-width: 640px;
}
.standards-note {
  margin-top: 16px;
  color: var(--slate);
  font-size: 14px;
  max-width: 640px;
}

/* Standards rail: decorative animated marquee, full-bleed to the viewport.
   Screen readers get .standards-static (the original badge list) instead --
   the animated rail is aria-hidden and never the only way to read the
   standards. */
.standards-rail {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-top: 48px;
  margin-bottom: 48px;
  padding: 40px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 48px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.rail-divider {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--iron);
  transform: translateY(-50%);
}
.rail-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.rail-track:hover { animation-play-state: paused; }
.rail-track-a { animation: rail-scroll-left 75s linear infinite; }
.rail-track-b { animation: rail-scroll-right 92s linear infinite; }
.rail-seq { display: flex; align-items: center; flex-shrink: 0; }
.rail-item {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  margin: 0 14px;
  border: 1px solid rgba(var(--veil-rgb), 0.16);
  border-radius: 800px;
  background: var(--rail-item-bg);
  color: var(--mist);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.rail-item:hover {
  border-color: var(--mint);
  color: var(--white);
  background: rgba(11, 199, 151, 0.1);
  box-shadow: 0 0 24px rgba(11, 199, 151, 0.22);
}
.rail-dot {
  color: var(--slate);
  font-size: 16px;
  margin: 0 4px;
  flex-shrink: 0;
}

@keyframes rail-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes rail-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 720px) {
  .standards-rail { padding: 28px 0; gap: 32px; }
  .rail-item { padding: 8px 16px; margin: 0 8px; font-size: 12px; letter-spacing: 0.06em; }
  .rail-dot { font-size: 14px; margin: 0 2px; }
}

/* Reduced motion: swap the animated rail for the plain static badge list. */
.standards-static {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  list-style: none;
}
@media (prefers-reduced-motion: reduce) {
  .standards-rail { display: none; }
  .standards-static {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/* ---------- Who we help ---------- */
.who-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .who-grid { grid-template-columns: 1.3fr 1fr; } }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--obsidian);
  border: 1px solid var(--iron);
  border-radius: 800px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ash);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.3s ease, opacity 0.45s ease;
}
.chip:hover {
  border-color: var(--mint);
  color: var(--mist);
  transform: translateY(-2px);
}
/* Entrance: hidden pre-reveal only when JS has run and the grid hasn't
   entered the viewport yet; .is-visible is added once by script.js
   (IntersectionObserver), with a per-chip stagger set via inline
   transition-delay that's cleared right after so it never lingers and
   slows down the hover transition above. */
.js .who-grid .chip-grid .chip { opacity: 0; transform: translateY(10px); }
.js .who-grid .chip-grid.is-visible .chip { opacity: 1; transform: translateY(0); }

.role-list { list-style: none; margin: 0; padding: 0; }
.role-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--iron);
  font-size: 15px;
  color: var(--mist);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, opacity 0.5s ease;
}
.role-list li:first-child { padding-top: 0; }
.role-list li:hover {
  color: var(--white);
  border-color: var(--slate);
  transform: translateX(3px);
}
.js .role-list li { opacity: 0; transform: translateX(16px); }
.js .role-list.is-visible li { opacity: 1; transform: translateX(0); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.role-list li:hover .dot {
  background: var(--mint);
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(11, 199, 151, 0.12);
}
/* One-shot signal flash as each row settles in -- not a continuous
   pulse. Runs once (no infinite/loop) via a class added alongside the
   row reveal, timed slightly after the row's own stagger delay. */
@keyframes dot-signal {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(11, 199, 151, 0); }
  45% { transform: scale(1.6); background-color: var(--mint); box-shadow: 0 0 0 5px rgba(11, 199, 151, 0.16); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(11, 199, 151, 0); }
}
.js .role-list.is-visible li .dot { animation: dot-signal 0.6s ease; }

.who-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); margin-bottom: 10px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .js .chip-grid .chip,
  .js .role-list li {
    opacity: 1;
    transform: none;
    transition: border-color 0.25s ease, color 0.25s ease;
  }
  .chip:hover,
  .role-list li:hover { transform: none; }
  .js .role-list.is-visible li .dot { animation: none; }
}

/* ---------- Positioning ---------- */
.accent-card {
  background: var(--mint);
  border-radius: 24px;
  padding: 56px 32px;
  text-align: center;
}
@media (min-width: 720px) { .accent-card { padding: 80px 56px; } }
.accent-card p.statement {
  font-family: var(--font-display);
  font-weight: 300;
  color: #070707;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  max-width: 780px;
  margin: 0 auto;
  text-wrap: balance;
}
@media (min-width: 720px) { .accent-card p.statement { font-size: 40px; } }
.accent-card p.connectors {
  margin-top: 24px;
  color: rgba(7,7,7,0.72);
  font-size: 15px;
  letter-spacing: 0.03em;
  max-width: 620px;
  margin-left: auto; margin-right: auto;
}
.accent-card .pill-filled { display: inline-flex; }

/* ---------- Contact ---------- */
.contact-wrap {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact-wrap { grid-template-columns: 1fr 1.1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 13px; color: var(--slate); letter-spacing: 0.03em; }
.field input, .field textarea {
  background: var(--carbon);
  border: 1px solid var(--iron);
  border-radius: 5px;
  padding: 12px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  box-shadow: rgba(0,0,0,0.05) 2px 2px 0 0;
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--cinder); }
.field input:focus, .field textarea:focus {
  border-color: var(--deep-signal);
}
.field textarea { resize: vertical; min-height: 96px; font-family: var(--font-body); }
#contact-status {
  margin-top: 16px;
  font-size: 14px;
  color: var(--verdant);
}

/* ---------- Footer ---------- */
footer { padding: var(--space-56) 0 var(--space-40); border-top: 1px solid var(--iron); }
.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 40px; } }
.footer-col h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  font-family: var(--font-body);
  letter-spacing: normal;
  text-wrap: initial;
}
.footer-col p { color: var(--graphite); font-size: 13px; margin-top: 12px; line-height: 1.5; }
.footer-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { text-decoration: none; color: var(--graphite); font-size: 14px; }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--steel-border);
  color: var(--slate);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- Scroll reveal (safe without JS: everything visible by default) ---------- */
.reveal-target { opacity: 1; transform: none; }
.js .reveal-target {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal-target.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal-target { opacity: 1; transform: none; transition: none; }
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--veil-rgb), 0.14);
  background: rgba(var(--veil-rgb), 0.06);
  box-shadow: inset 0 1px 0 rgba(var(--veil-rgb), 0.12);
  color: var(--white);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s ease, background-color 0.25s ease,
    color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
/* Same glass treatment as nav -- only where the browser can actually
   blur, so the plain translucent fallback above stays legible. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .theme-toggle {
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
  }
}
.theme-toggle:hover {
  border-color: var(--mint);
  color: var(--mint-ink);
  background-color: rgba(11, 199, 151, 0.14);
  box-shadow: inset 0 1px 0 rgba(var(--veil-rgb), 0.12), 0 0 18px rgba(11, 199, 151, 0.25);
}
.theme-toggle:active { transform: scale(0.9); }

.theme-toggle svg {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
:root[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
:root[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle svg { transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
  .theme-toggle:active { transform: none; }
}