/* ==========================================================================
   LimeoX Capital — style.css
   1. Fonts  2. Tokens  3. Base  4. Layout  5. Type  6. Controls
   7. Header & menu  8. Sections  9. Reveal states  10. Responsive
   11. Reduced motion
   ========================================================================== */

/* 1. Fonts — self-hosted Latin subsets. Inter Tight is a variable file (400–500). */
@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/inter-tight.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks limit layout shift on font swap. */
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 96%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Menlo"), local("Courier New");
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* 2. Tokens */
:root {
  --red-900: #8f272b;
  --red-800: #a72f33;
  --red-700: #bb393c;
  --red-600: #c84849;
  --red-soft: #d98886;
  --rose-line: rgba(177, 55, 58, 0.18);

  --ink-950: #080b0d;
  --ink-900: #0d1114;
  --ink-800: #15191c;
  --ink-700: #25292d;

  --paper: #f8f6f3;
  --paper-2: #f2efeb;
  --white: #ffffff;
  --text-dark: #14100f;
  --text-muted: #3a3232;
  --text-light: #f7f4f2;
  --text-light-2: rgba(247, 244, 242, 0.88);
  --text-light-3: rgba(247, 244, 242, 0.72);

  --line-dark: rgba(247, 244, 242, 0.1);
  --line-paper: rgba(32, 23, 24, 0.12);

  --font-display: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-hero: clamp(2.75rem, 6.2vw, 6.75rem);
  --fs-h2: clamp(2rem, 4vw, 4rem);
  --fs-h3: clamp(1.3125rem, 1.8vw, 1.6875rem);
  --fs-body: clamp(1.0625rem, 0.2vw + 1rem, 1.1875rem);
  --fs-lead: clamp(1.1875rem, 0.6vw + 1rem, 1.4375rem);
  --fs-label: 0.8125rem;
  --fs-micro: 0.75rem;

  --page-max: 1440px;
  --page-gutter: clamp(24px, 5vw, 88px);
  --grid-gap: clamp(20px, 2.4vw, 40px);
  --section-y: clamp(72px, 7vw, 120px);
  --section-y-tight: clamp(52px, 5vw, 88px);
  --content-gap-lg: clamp(40px, 4vw, 64px);
  --content-gap-md: clamp(24px, 2.5vw, 40px);
  --content-gap-sm: clamp(14px, 1.5vw, 24px);

  --pad-x: var(--page-gutter);
  --gap: var(--grid-gap);
  --measure: 36rem;
  --nav-h: 72px;
  --radius: 6px;

  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);   /* power3.out */
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);       /* expo.out */
  --ease-inout: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* power2.inOut */
  /* One motion language: every transition uses these. */
  --ease-system: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 200ms;
  --dur-ui: 300ms;
  --dur-reveal: 700ms;
  --dur-diagram: 1000ms;
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* No CSS smooth scrolling: ScrollTrigger measures by jumping the scroll position, and smooth
     scrolling would offset every pin by the current scroll. Anchor scrolling is smoothed in JS. */
  scroll-behavior: auto;
  scroll-padding-top: var(--nav-h);
  background: var(--ink-950);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
::selection { background: var(--red-800); color: var(--white); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--red-700);
  outline-offset: 3px;
  border-radius: 2px;
}
[data-theme="dark"] :focus-visible, .core :focus-visible, .stack :focus-visible { outline-color: var(--red-soft); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--white);
  color: var(--red-900);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

#main:focus { outline: none; }

/* Lenis recommended base CSS */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Static film grain: inline SVG feTurbulence tile, never animated */
.grain {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* 4. Layout */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
/* Section headers share one anchor system: label row, headline on the left (1-8), supporting copy on the right (9-12). */
.grid { row-gap: var(--content-gap-sm); }
.col-label { grid-column: 1 / -1; }
.col-head { grid-column: 1 / 9; }
.col-body, .col-lead, .col-side { grid-column: 9 / 13; align-self: end; }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight { padding-block: var(--section-y-tight); }

/* Themes */
[data-theme="paper"] { background: var(--paper); color: var(--text-dark); }
[data-theme="dark"] { background: var(--ink-950); color: var(--text-light-2); }
[data-theme="red"] { background: var(--red-800); color: var(--text-light); }

/* Technical grid layer */
.grid-bg {
  position: absolute;
  inset: -8px;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 80px 80px;
}
.grid-bg--fine {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(247, 244, 242, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 244, 242, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 85%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 85%);
}

/* Corner registration ticks (ambient interface layer) */
.hud { position: absolute; inset: calc(var(--nav-h) + 12px) var(--pad-x) 20px; pointer-events: none; z-index: 1; }
.hud__tick { position: absolute; width: 12px; height: 12px; border-color: rgba(255, 255, 255, 0.4); border-style: solid; border-width: 0; pointer-events: none; }
.hud__tick--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hud__tick--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hud__tick--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud__tick--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Animated signal divider at the top of dark sections */
.signal-divider { position: absolute; top: 0; left: 0; right: 0; height: 24px; transform: translateY(-50%); pointer-events: none; z-index: 2; }
.signal-divider svg { width: 100%; height: 100%; overflow: visible; }
.signal-divider path { fill: none; vector-effect: non-scaling-stroke; }
.signal-divider__base { stroke: transparent; }
.signal-divider__trace { stroke: var(--red-600); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal .signal-divider__trace { stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-diagram) var(--ease-inout); }
.reveal .signal-divider.is-in .signal-divider__trace { stroke-dashoffset: 0; }

/* 5. Type */
.h2, .hero__title, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 18ch;
  text-wrap: balance;
}
[data-theme="paper"] .h2 { color: var(--text-dark); }
[data-theme="dark"] .h2 { color: var(--text-light); }
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
}
p { max-width: var(--measure); }
.lead { font-size: var(--fs-lead); line-height: 1.5; }
[data-theme="paper"] .lead { color: var(--text-dark); }
[data-theme="dark"] .lead { color: var(--text-light); }

.label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  padding-top: 0.6em;
}
[data-theme="paper"] .label { color: var(--text-muted); }
[data-theme="dark"] .label { color: var(--text-light-2); }
.label__mark { width: 6px; height: 6px; flex: none; background: var(--red-700); transform-origin: 50% 50%; }
[data-theme="dark"] .label__mark { background: var(--red-600); }
.label__num { display: inline-flex; overflow: hidden; color: var(--red-700); }
[data-theme="dark"] .label__num { color: var(--red-soft); }
.label__num > span { display: block; }
.label__sep { opacity: 0.5; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-700);
  margin-bottom: var(--content-gap-sm);
}
.eyebrow--dark { color: var(--red-soft); }

/* Line-split headlines */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line__inner { display: inline-block; }

/* 6. Controls */
.link {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-ui) var(--ease-system), color var(--dur-micro);
  padding-bottom: 2px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; background-position: 0% 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color var(--dur-ui) var(--ease-system), color var(--dur-ui) var(--ease-system), border-color var(--dur-ui) var(--ease-system), transform var(--dur-ui) var(--ease-system);
}
.btn__arrow { display: inline-block; transition: transform var(--dur-ui) var(--ease-system); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); }
.hero .btn:hover .btn__arrow, .hero .btn:focus-visible .btn__arrow { transform: translateY(3px); }
.btn--light { background: var(--white); color: var(--red-900); }
.btn--light:hover { background: var(--paper); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.5); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.btn--solid { background: var(--red-800); color: var(--white); }
.btn--solid:hover { background: var(--red-900); }
.btn--outline { border-color: currentColor; }

.motion-toggle {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light-2);
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  transition: color var(--dur-micro), border-color var(--dur-micro);
}
.motion-toggle:hover { color: var(--text-light); border-color: rgba(247, 244, 242, 0.3); }

/* Logo and typographic fallback */
.logo { display: inline-flex; align-items: center; }
.logo img { width: auto; transition: filter var(--dur-ui) var(--ease-system); }
.wordmark { display: none; flex-direction: column; line-height: 1; }
.wordmark__main { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.02em; }
.wordmark__main span { color: var(--red-700); }
.wordmark__sub { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.42em; margin-top: 4px; opacity: 0.7; }
.logo--fallback img { display: none; }
.logo--fallback .wordmark { display: inline-flex; }

/* 7. Header & menu */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: var(--text-light);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-ui) var(--ease-system), border-color var(--dur-ui) var(--ease-system), color var(--dur-ui) var(--ease-system);
}
.nav { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.nav__logo img { height: 34px; }
.nav__links { position: relative; display: flex; gap: clamp(16px, 2vw, 32px); margin-left: auto; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  opacity: 0.78;
  transition: opacity var(--dur-micro) var(--ease-system);
}
.nav__links a:hover, .nav__links a.is-active { opacity: 1; }
.nav__dot {
  position: absolute;
  left: 0; bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translateX(var(--dot-x, 0px));
  transition: transform var(--dur-reveal) var(--ease-inout), opacity var(--dur-micro);
  pointer-events: none;
}
.nav__dot.is-on { opacity: 1; }
.nav__cta { min-height: 40px; padding: 0 16px; }
.nav__menu-btn {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav__menu-btn__icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 16px;
  height: 12px;
}
.nav__menu-btn__icon span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-ui) var(--ease-system), opacity var(--dur-micro) var(--ease-system);
  transform-origin: center;
}
.nav__menu-btn[aria-expanded="true"] .nav__menu-btn__icon span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__menu-btn[aria-expanded="true"] .nav__menu-btn__icon span:nth-child(2) { opacity: 0; }
.nav__menu-btn[aria-expanded="true"] .nav__menu-btn__icon span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--red-600);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}

/* Header theme: follows the section under it */
.site-header[data-theme="red"] .logo img { filter: brightness(0) invert(1); }
.site-header[data-theme="red"] .nav__progress { background: var(--white); }
.site-header[data-theme="red"].is-scrolled,
body.is-menu-open .site-header[data-theme="red"] { background: rgba(143, 39, 43, 0.94); border-bottom-color: rgba(255, 255, 255, 0.14); }
.site-header[data-theme="paper"] { color: var(--text-dark); }
.site-header[data-theme="paper"].is-scrolled,
body.is-menu-open .site-header[data-theme="paper"] { background: rgba(248, 246, 243, 0.95); border-bottom-color: var(--line-paper); }
.site-header[data-theme="paper"] .nav__dot { background: var(--red-700); }
.site-header[data-theme="dark"].is-scrolled,
body.is-menu-open .site-header[data-theme="dark"] { background: rgba(8, 11, 13, 0.94); border-bottom-color: var(--line-dark); }
.site-header[data-theme="dark"] .nav__dot { background: var(--red-600); }
.site-header[data-theme="paper"] :focus-visible { outline-color: var(--red-700); }
.site-header[data-theme="dark"] :focus-visible { outline-color: var(--red-soft); }
.site-header[data-theme="red"] :focus-visible { outline-color: var(--white); }

/* Mobile dropdown panel — compact tab list under the header */
.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: var(--pad-x);
  left: auto;
  z-index: 160;
  width: min(22rem, calc(100vw - (var(--pad-x) * 2)));
  padding: 8px;
  background: var(--ink-950);
  color: var(--text-light);
  border: 1px solid rgba(247, 244, 242, 0.14);
  border-radius: 2px;
  box-shadow: 0 16px 40px rgba(8, 11, 13, 0.45);
  overflow: hidden;
}
.menu[hidden] { display: none !important; }
.menu__body { padding: 0; }
.menu__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0;
  opacity: 0.88;
  transition: background-color var(--dur-micro) var(--ease-system), opacity var(--dur-micro) var(--ease-system);
}
.menu__links a:hover,
.menu__links a:focus-visible,
.menu__links a.is-active {
  opacity: 1;
  background: rgba(247, 244, 242, 0.08);
}
.menu__num {
  flex: none;
  width: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--red-soft);
}
.menu__tab { flex: 1; }
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 11, 13, 0.28);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.menu-backdrop[hidden] { display: none !important; }
.site-header[data-theme="paper"] .menu {
  background: var(--paper);
  color: var(--text-dark);
  border-color: var(--line-paper);
  box-shadow: 0 16px 40px rgba(20, 16, 15, 0.12);
}
.site-header[data-theme="paper"] .menu__links a:hover,
.site-header[data-theme="paper"] .menu__links a:focus-visible,
.site-header[data-theme="paper"] .menu__links a.is-active {
  background: rgba(32, 23, 24, 0.06);
}
.site-header[data-theme="paper"] .menu__num { color: var(--red-700); }
.site-header[data-theme="red"] .menu {
  background: rgba(143, 39, 43, 0.98);
  border-color: rgba(255, 255, 255, 0.16);
}
.site-header[data-theme="red"] .menu__links a:hover,
.site-header[data-theme="red"] .menu__links a:focus-visible,
.site-header[data-theme="red"] .menu__links a.is-active {
  background: rgba(255, 255, 255, 0.1);
}
.site-header[data-theme="red"] .menu__num { color: rgba(255, 255, 255, 0.7); }
:focus-visible:where(.menu *) { outline-color: var(--red-soft); }
.site-header[data-theme="paper"] :focus-visible:where(.menu *) { outline-color: var(--red-700); }
.site-header[data-theme="red"] :focus-visible:where(.menu *) { outline-color: var(--white); }

/* 8. Sections ------------------------------------------------------------ */

/* Hero — red computational field */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  max-height: 960px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    radial-gradient(110% 90% at 78% 42%, var(--red-600) 0%, var(--red-800) 42%, var(--red-900) 78%, #6f1d21 100%);
}
.hero .grid-bg {
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse at 70% 50%, #000 25%, transparent 78%);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(111, 29, 33, 0.72) 0%, rgba(120, 31, 35, 0.45) 34%, rgba(143, 39, 43, 0) 62%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__content { max-width: min(100%, 46rem); padding-top: var(--nav-h); }
.hero__label { padding-top: 0; margin-bottom: var(--content-gap-md); color: rgba(255, 255, 255, 0.92); }
.hero__label .label__mark { background: var(--white); }
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--white);
}
.hline { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hline > span { display: inline-block; }
.hero__copy { margin-top: var(--content-gap-md); max-width: 34rem; color: rgba(255, 255, 255, 0.88); }
.hero__copy p + p { margin-top: 0.8em; }
.hero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: var(--content-gap-md); }
.hero__readout {
  position: absolute;
  right: var(--pad-x);
  bottom: 28px;
  z-index: 2;
  display: flex;
  gap: 4px 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - var(--pad-x) * 2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}
.hero__readout li { position: relative; padding-bottom: 8px; transition: color var(--dur-ui) var(--ease-system); }
.hero__readout li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-reveal) var(--ease-system);
}
.hero__readout li + li::before { content: "→"; position: absolute; left: -11px; opacity: 0.5; }
.hero__readout .is-active { color: var(--white); }
.hero__readout .is-active::after { transform: scaleX(1); }

/* Hero entrance — CSS only, so the LCP heading never waits for scripts */
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .hero__label { animation: fadeUp 1s var(--ease-out) 0.3s both; }
  html:not(.motion-off) .hline > span { animation: rise 1.2s var(--ease-expo) both; }
  html:not(.motion-off) .hline:nth-child(1) > span { animation-delay: 0.42s; }
  html:not(.motion-off) .hline:nth-child(2) > span { animation-delay: 0.54s; }
  html:not(.motion-off) .hero__copy { animation: fadeUp 1.1s var(--ease-out) 0.8s both; }
  html:not(.motion-off) .hero__ctas { animation: fadeUp 1.1s var(--ease-out) 0.92s both; }
  html:not(.motion-off) .hero__readout, html:not(.motion-off) .hud--hero { animation: fadeUp 1.2s var(--ease-out) 1.1s both; }
}

/* About — editorial split */
.about .grid { row-gap: var(--content-gap-md); }
.about .col-head { grid-column: 1 / 7; grid-row: 2 / span 2; }
.about__statement { max-width: 14ch; }
.about__lead { font-family: var(--font-display); font-size: clamp(1.25rem, 1.6vw, 1.625rem); line-height: 1.3; letter-spacing: -0.012em; color: var(--text-dark); padding-top: var(--content-gap-sm); border-top: 1px solid var(--red-700); }
.about__lead { grid-column: 7 / 13; grid-row: 2; }
.about__body { grid-column: 7 / 13; grid-row: 3; align-self: start; color: var(--text-muted); }
.about__body p + p { margin-top: 1em; }
.about__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about__steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--rose-line);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.65);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--red-900);
}

[data-theme="red"] .label { color: rgba(255, 255, 255, 0.92); }
[data-theme="red"] .label__mark { background: var(--white); }
[data-theme="red"] .label__num { color: var(--white); }

/* Four principles — signal rail on a red band */
.principles-sec { background: linear-gradient(100deg, var(--red-900) 0%, var(--red-800) 55%, var(--red-700) 100%); }
.principles-sec .grid-bg--fine { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); }
.principles-sec { overflow: hidden; }
.principles-sec > .container { position: relative; }
.principles-sec__head { margin-bottom: var(--content-gap-lg); }
.principles-sec__title { margin-top: var(--content-gap-sm); font-family: var(--font-display); color: var(--white); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; }
.rail { position: relative; }
.rail__line { position: absolute; top: 0; left: 0; width: 100%; height: 12px; overflow: visible; }
.rail__line line { vector-effect: non-scaling-stroke; }
.rail__track { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.rail__signal { stroke: var(--white); stroke-width: 1.5; transform-origin: 0 50%; transform-box: view-box; transform: scaleX(var(--rail-p, 1)); }
.rail__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.rail__item {
  position: relative;
  padding: 34px 20px 4px 0;
  outline-offset: 6px;
  transition: transform var(--dur-reveal) var(--ease-system);
}
.rail__node {
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: var(--red-800);
  transition: background-color var(--dur-ui) var(--ease-system), border-color var(--dur-ui) var(--ease-system), box-shadow var(--dur-reveal) var(--ease-system);
}
.rail__num { display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.9); margin-bottom: 12px; }
.rail__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.625rem, 2.6vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--white); margin-bottom: 12px; transition: color var(--dur-ui) var(--ease-system); }
.rail__icon { display: none; }
.rail__copy, .rail__item p { color: rgba(255, 255, 255, 0.94); max-width: 22rem; transition: color var(--dur-ui) var(--ease-system); }
.rail__item.is-lit .rail__node, .rail__item:hover .rail__node, .rail__item:focus-visible .rail__node { background: var(--white); border-color: var(--white); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.16); }
.rail.is-armed .rail__item:not(.is-lit) .rail__title { color: rgba(255, 255, 255, 0.94); }
.rail.is-armed .rail__item:not(.is-lit) .rail__copy, .rail.is-armed .rail__item:not(.is-lit) p { color: rgba(255, 255, 255, 0.94); }
.rail__item:hover .rail__title, .rail__item:focus-visible .rail__title { color: var(--white) !important; }
.rail__item:hover .rail__copy, .rail__item:focus-visible .rail__copy,
.rail__item:hover p, .rail__item:focus-visible p { color: rgba(255, 255, 255, 0.94) !important; }

/* Capabilities — paper cards */
.capabilities .grid { row-gap: var(--content-gap-sm); }
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--content-gap-lg);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2vw, 30px);
  background: var(--white);
  border: 1px solid rgba(32, 23, 24, 0.07);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(32, 23, 24, 0.03), 0 24px 48px -36px rgba(110, 29, 33, 0.35);
  overflow: hidden;
  transition: transform var(--dur-reveal) var(--ease-system), box-shadow var(--dur-reveal) var(--ease-system);
}
.card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.card__num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--red-700); }
.card__glyph { width: 44px; height: 44px; overflow: visible; }
.card__glyph * { fill: none; stroke: var(--red-700); stroke-width: 1; vector-effect: non-scaling-stroke; }
.card__glyph rect, .card__glyph circle:not(.card__ping) { stroke: rgba(32, 23, 24, 0.35); }
.card__ping { fill: var(--red-700); stroke: none; transform-box: fill-box; transform-origin: center; }
.card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; color: var(--text-dark); }
.card p { color: var(--text-muted); font-size: 1.0625rem; }
.card__rule { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--red-700); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-reveal) var(--ease-system); }
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(32, 23, 24, 0.03), 0 32px 60px -34px rgba(110, 29, 33, 0.45); }
  .card:hover .card__rule { transform: scaleX(1); }
  .card:hover .card__ping { animation: ping 1.4s var(--ease-out) infinite; }
}
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(2.4); opacity: 0.2; } 100% { transform: scale(1); opacity: 1; } }

/* Areas of Research — dark computational field */
.research { padding-block: var(--section-y); }
.research__layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.research__col { grid-column: 1 / 6; }
.research__title { margin-top: var(--content-gap-sm); margin-bottom: var(--content-gap-md); }
.areas { border-bottom: 1px solid var(--line-dark); }
.area { position: relative; border-top: 1px solid var(--line-dark); padding-bottom: 16px; }
.area::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 100%; height: 1px;
  background: var(--red-600);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-reveal) var(--ease-system);
}
.area.is-active::before { transform: scaleX(1); }
.area__btn {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 14px 0 6px;
  color: var(--text-light-2);
  transition: color var(--dur-ui) var(--ease-system);
}
.area__num { flex: none; width: 3.25rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--text-light-3); transition: color var(--dur-ui); }
.area__title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.625rem); letter-spacing: -0.015em; line-height: 1.2; }
.area__desc { padding-left: calc(3.25rem + 16px); font-size: 1.0625rem; color: var(--text-light-3); transition: color var(--dur-ui) var(--ease-system); }
.area.is-active .area__btn, .area__btn:hover { color: var(--text-light); }
.area.is-active .area__num { color: var(--red-soft); }
.area.is-active .area__desc { color: var(--text-light-2); }

/* Centered against the research column, and held at the middle of the viewport while the list scrolls. */
.field { grid-column: 7 / 13; align-self: center; position: sticky; top: calc(var(--nav-h) + (100svh - var(--nav-h) - min(64svh, 560px)) / 2); }
.field__frame {
  position: relative;
  height: min(64svh, 560px);
  min-height: 380px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: radial-gradient(90% 70% at 60% 45%, rgba(37, 41, 45, 0.6) 0%, var(--ink-900) 70%);
  overflow: hidden;
}
.grid-bg--field {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(247, 244, 242, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 244, 242, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  transform: none;
}
.field__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.field__hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light-3); }
.field__tag { position: absolute; left: 20px; top: 18px; display: flex; align-items: center; gap: 8px; color: var(--text-light); }
.field__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red-600); box-shadow: 0 0 0 4px rgba(200, 72, 73, 0.2); }
.field .hud__tick { border-color: rgba(247, 244, 242, 0.25); }
.field .hud__tick--tl { top: 8px; left: 8px; }
.field .hud__tick--tr { top: 8px; right: 8px; }
.field .hud__tick--bl { bottom: 8px; left: 8px; }
.field .hud__tick--br { bottom: 8px; right: 8px; }

/* Systematic Investment Process — full-bleed dark stage */
.process { padding-block: 0; border-top: 1px solid var(--line-dark); }
.process__grid { -webkit-mask-image: none; mask-image: none; }
.process-stage { position: relative; padding-block: var(--section-y); background: var(--ink-950); }
.container--wide { max-width: none; }
.process__head { padding-bottom: var(--content-gap-sm); margin-bottom: var(--content-gap-md); border-bottom: 1px solid var(--line-dark); }
.process__title { margin-top: var(--content-gap-sm); max-width: none; font-size: clamp(2rem, 3.4vw, 3.25rem); }
.core { position: relative; color: var(--text-light-2); }
.core__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.loop { grid-column: 1 / 6; position: absolute; width: 1px; height: 1px; overflow: hidden; visibility: hidden; pointer-events: none; }
.loop svg { width: 100%; height: auto; max-height: 56svh; overflow: visible; margin-inline: auto; }
.loop-track { fill: none; stroke: rgba(247, 244, 242, 0.12); stroke-width: 1; }
.loop-flow { fill: none; stroke: rgba(247, 244, 242, 0.32); stroke-width: 1; stroke-dasharray: 2 14; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.loop-progress { fill: none; stroke: var(--red-600); stroke-width: 1.5; }
.loop-glow { pointer-events: none; }
.loop-node circle { fill: var(--ink-950); stroke: rgba(247, 244, 242, 0.4); stroke-width: 1; transition: fill var(--dur-ui) var(--ease-system), stroke var(--dur-ui) var(--ease-system); }
.loop-node .loop-node__ring { fill: none; stroke: var(--red-600); opacity: 0; transform-box: fill-box; transform-origin: center; }
.loop-node text { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.12em; fill: rgba(247, 244, 242, 0.8); transition: fill var(--dur-ui); }
.loop-node.is-done circle:not(.loop-node__ring) { fill: var(--red-900); stroke: var(--red-soft); }
.loop-node.is-active circle:not(.loop-node__ring) { fill: var(--red-600); stroke: var(--red-600); }
.loop-node.is-active .loop-node__ring { animation: nodePulse 2s var(--ease-out) infinite; }
.loop-node.is-active text, .loop-node.is-hover text { fill: var(--text-light); }
.loop-node { cursor: pointer; }
@keyframes nodePulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.loop-center__num { font-family: var(--font-display); font-size: 64px; letter-spacing: -0.04em; fill: var(--text-light); }
.loop-center__title {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.16em;
  fill: var(--red-soft);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.loop-center__of { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; fill: rgba(247, 244, 242, 0.5); text-transform: uppercase; }
.loop-marker { fill: var(--white); }
.loop-marker-ring { fill: none; stroke: var(--red-600); stroke-width: 1.5; }

.core__panel { grid-column: 1 / -1; }
.stages { position: relative; padding-left: 30px; }
.stages::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--red-600);
  transform-origin: 50% 0;
  transform: scaleY(var(--line-p, 1));
}
.stage { position: relative; padding-bottom: var(--content-gap-sm); }
.stage::before {
  content: "";
  position: absolute;
  left: -30px; top: 5px;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--red-soft);
  background: var(--ink-950);
}
.stage__num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-soft); margin-bottom: 6px; }
.stage__copy { font-family: var(--font-display); font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--text-light); max-width: 30rem; }
.stage-index { display: none; }
.core__close {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--content-gap-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  max-width: none;
}
.core__close svg { flex: none; }
.core__close path { fill: none; stroke: var(--red-600); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.strip-wrap { position: relative; margin-top: var(--content-gap-md); padding-top: var(--content-gap-sm); padding-bottom: 0; border-top: 1px solid var(--line-dark); }
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light-2);
}
.strip li { transition: color var(--dur-ui) var(--ease-system), border-color var(--dur-ui) var(--ease-system), background var(--dur-ui) var(--ease-system); }
.strip__point {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.strip__dot {
  display: none;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(247, 244, 242, 0.35);
  background: transparent;
  transition: background var(--dur-ui) var(--ease-system), border-color var(--dur-ui) var(--ease-system), box-shadow var(--dur-ui) var(--ease-system);
}
.strip__label { display: inline; }
.strip__arrow { color: var(--red-soft); transition: color var(--dur-ui) var(--ease-system), opacity var(--dur-ui) var(--ease-system); }
.strip__arrow.is-lit { color: var(--red-soft); opacity: 1; }
.strip__return { display: none; }
.process-stage.is-live .strip__point { color: var(--text-light-3); }
.process-stage.is-live .strip__point.is-lit { color: var(--text-light); }
.process-stage.is-live .strip__point.is-lit .strip__dot {
  background: var(--red-600);
  border-color: var(--red-600);
}
.process-stage.is-live .strip__point.is-current .strip__dot {
  background: var(--red-soft);
  border-color: var(--red-soft);
  box-shadow: 0 0 0 4px rgba(200, 72, 73, 0.22);
}

/* Desktop/tablet: diagram visible beside the list */
@media (min-width: 1024px) {
  .loop { position: relative; width: auto; height: auto; overflow: visible; visibility: visible; pointer-events: auto; }
  .core__panel { grid-column: 7 / 13; }
}

/* Pinned process (desktop/tablet with motion) */
.process-stage.is-pinned { height: 100vh; height: 100svh; padding-block: calc(var(--nav-h) + 20px) 16px; }
.process-stage.is-pinned .process-stage__wrap { height: 100%; display: flex; flex-direction: column; }
.process-stage.is-pinned .core { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.process-stage.is-pinned .strip-wrap { margin-top: var(--content-gap-sm); }
.process-stage.is-pinned .core__grid { flex: 1; min-height: 0; }
.process-stage.is-pinned .stages { display: grid; padding-left: 0; }
.process-stage.is-pinned .stages::before { display: none; }
.process-stage.is-pinned .stage { grid-area: 1 / 1; padding: 0; opacity: 0; pointer-events: none; }
.process-stage.is-pinned .stage.is-active { opacity: 1; pointer-events: auto; }
.process-stage.is-pinned .stage::before { display: none; }
.process-stage.is-pinned .stage__num, .process-stage.is-pinned .stage__copy { overflow: hidden; }
.process-stage.is-pinned .stage__num { font-size: 0.9375rem; margin-bottom: 16px; }
.process-stage.is-pinned .stage__copy { font-size: clamp(1.625rem, 2.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.025em; min-height: 3.4em; }
.process-stage.is-pinned .stage-index { display: block; margin-top: var(--content-gap-md); }
.stage-index__bar { position: relative; height: 1px; background: var(--line-dark); margin-bottom: 4px; }
.stage-index__fill { position: absolute; inset: 0; background: var(--red-600); transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; }
.stage-index__list { display: grid; grid-template-columns: repeat(7, 1fr); }
.stage-index__list button {
  width: 100%;
  min-height: 40px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--text-light-3);
  text-align: left;
  transition: color var(--dur-micro);
}
.stage-index__list button:hover, .stage-index__list button.is-active { color: var(--text-light); }
.stage-index__list button.is-active { color: var(--red-soft); }
.mask-in { display: block; }

/* Risk & Capital — red-tinted paper */
.risk { background: linear-gradient(180deg, var(--paper-2) 0%, #f5ebe9 100%); }
.risk__layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.risk__intro { grid-column: 1 / 6; }
.risk__intro .label { margin-bottom: var(--content-gap-md); }
.risk__copy { margin-top: var(--content-gap-md); }
.risk__copy p + p { margin-top: 1em; color: var(--text-muted); }
.scope {
  margin-top: var(--content-gap-md);
  background: var(--ink-950);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  color: var(--text-light-2);
}
.scope__head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.scope__label { color: var(--text-light); }
.scope__view { color: var(--red-soft); }
.scope__frame { position: relative; height: clamp(240px, 22vw, 320px); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.scope__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope__note { margin-top: 14px; font-size: 1rem; color: var(--text-light-2); max-width: none; }

.risk__factors { grid-column: 7 / 13; padding-top: calc(var(--content-gap-md) + 2.6em); }
.risk__lead-in { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--content-gap-sm); }
.risk-list { display: grid; grid-auto-rows: 1fr; border-bottom: 1px solid var(--line-paper); }
.risk-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: var(--gap);
  align-items: baseline;
  padding: 20px 16px 20px 18px;
  border-top: 1px solid var(--line-paper);
  outline-offset: -2px;
  cursor: default;
  transition: background-color var(--dur-ui) var(--ease-system);
}
.risk-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--red-700);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--dur-ui) var(--ease-system);
}
.risk-row.is-active { background: rgba(255, 255, 255, 0.7); }
.risk-row.is-active::before, .risk-row:focus-visible::before { transform: scaleY(1); }
.risk-row__num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--red-700); }
.risk-row__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.125rem, 1.4vw, 1.375rem); letter-spacing: -0.015em; color: var(--text-dark); transition: color var(--dur-ui); }
.risk-row.is-active .risk-row__title { color: var(--red-900); }
.risk-row p { font-size: 1.0625rem; color: var(--text-muted); }

/* Philosophy — dark editorial */
.philosophy .grid { row-gap: var(--content-gap-sm); }
.philosophy__lead { max-width: 14ch; }
.tenets { margin-top: var(--content-gap-lg); border-bottom: 1px solid var(--line-dark); }
.tenet {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: baseline;
  padding-block: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--line-dark);
}
.tenet__num { grid-column: 1 / 2; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--red-soft); }
.tenet__rule { grid-column: 2 / 4; align-self: center; position: relative; height: 1px; background: var(--line-dark); }
.tenet__rule span { position: absolute; inset: 0; background: var(--red-600); transform-origin: 0 50%; transform: scaleX(var(--tr, 1)); }
.tenet__rule span::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-600); }
.tenet__title {
  grid-column: 4 / 9;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--text-light);
  transition: color var(--dur-ui) var(--ease-system);
}
.tenet p { grid-column: 9 / 13; font-size: 1.0625rem; color: var(--text-light-2); }
.tenets.is-armed .tenet:not(.is-current) .tenet__title { color: rgba(247, 244, 242, 0.62); }

/* Where Disciplines Converge — dark network with red transition */
.disciplines {
  background:
    radial-gradient(60% 55% at 85% 105%, rgba(167, 47, 51, 0.38) 0%, rgba(167, 47, 51, 0) 70%),
    var(--ink-950);
  border-top: 1px solid var(--line-dark);
}
.disciplines__layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.disciplines__copy { grid-column: 1 / 6; }
.disciplines__copy .label { margin-bottom: var(--content-gap-md); }
.disciplines__title { max-width: 14ch; }
.disciplines__intro { margin-top: var(--content-gap-md); color: var(--text-light); }
.disc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; margin-top: 12px; }
.disc-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-light-2);
  font-size: 1.0625rem;
  transition: color var(--dur-micro);
}
.disc__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.disc-converge { display: none; }
.disc-list button::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--text-light-3); transition: background-color var(--dur-micro), border-color var(--dur-micro); }
.disc-list button:hover, .disc-list button:focus-visible, .disc-list button.is-hot { color: var(--text-light); }
.disc-list button:hover::before, .disc-list button:focus-visible::before, .disc-list button.is-hot::before { background: var(--red-600); border-color: var(--red-600); }
.disciplines__close { margin-top: var(--content-gap-md); color: var(--text-light); font-family: var(--font-display); font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.35; letter-spacing: -0.01em; }
.disciplines__close p + p { color: var(--text-light-2); }

.network { grid-column: 6 / 13; position: relative; }
.network__inner { position: relative; max-width: 640px; margin-inline: auto; }
.network__svg { width: 100%; height: auto; overflow: visible; }
.network__rings circle { fill: none; stroke: rgba(247, 244, 242, 0.06); stroke-width: 1; stroke-dasharray: 2 6; }
.network__edges line { stroke: rgba(247, 244, 242, 0.16); stroke-width: 1; transition: stroke var(--dur-ui) var(--ease-system), opacity var(--dur-ui); }
.network__edges line.is-spoke { stroke: rgba(247, 244, 242, 0.22); }
.network__edges line.is-hot { stroke: var(--red-600); stroke-width: 1.5; }
.network.has-hot .network__edges line:not(.is-hot) { opacity: 0.35; }
.network__node { cursor: pointer; }
.network__node circle { fill: var(--ink-950); stroke: rgba(247, 244, 242, 0.6); stroke-width: 1; transition: fill var(--dur-micro), stroke var(--dur-micro); }
.network__node .network__hit { fill: transparent; stroke: none; }
.network__node text, .network__core text, .loop-node text { paint-order: stroke; stroke: var(--ink-950); stroke-width: 6px; stroke-linejoin: round; }
.network__node text { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; fill: rgba(247, 244, 242, 0.88); text-transform: uppercase; transition: fill var(--dur-micro); }
.network__node.is-hot circle:not(.network__hit) { fill: var(--red-600); stroke: var(--red-600); }
.network__node.is-hot text { fill: var(--text-light); }
.network__pulse { fill: var(--white); opacity: 0; }
.network__core-halo { fill: rgba(200, 72, 73, 0.12); stroke: rgba(200, 72, 73, 0.5); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.network__core-dot { fill: var(--red-600); }
.network__core text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; fill: var(--text-light); }
.network.is-live .network__core-halo { animation: halo 3.2s var(--ease-inout) infinite; }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.6; } }
.network__caption { max-width: 640px; margin: 8px auto 0; padding-top: 16px; border-top: 1px solid var(--line-dark); min-height: 5.25rem; }
.network__caption-name { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-soft); margin-bottom: 6px; }
.network__caption-desc { color: var(--text-light); }

/* Careers — bright close */
.careers__inner { display: flex; flex-direction: column; gap: var(--content-gap-md); }
.careers__main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--content-gap-sm);
  align-items: end;
}
.careers__head { grid-column: 1 / 6; }
.careers__head .h2 { max-width: 12ch; }
.careers__copy { grid-column: 7 / 13; max-width: 38rem; justify-self: end; }
.careers__copy p,
.careers__values { max-width: none; }

/* Footer */
.footer { position: relative; padding-block: var(--section-y-tight) 32px; color: var(--text-light-2); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.footer__brand { grid-column: 1 / 5; }
.footer__logo img { height: 56px; }
.footer__tag { margin-top: 18px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; }
.footer__nav { grid-column: 5 / 9; }
.footer__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.footer__nav a { display: inline-block; font-size: 1.0625rem; padding-block: 10px; }
.footer__nav a:hover { color: var(--text-light); }
.footer__meta { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer__careers { color: var(--text-light); font-size: 1.0625rem; padding-block: 10px; }
.footer__bottom { margin-top: var(--content-gap-lg); padding-top: 24px; border-top: 1px solid var(--line-dark); }
.footer__copy { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light-3); }


/* Shared: quiet careers links placed after key sections */
.signal-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: var(--content-gap-md);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}
.signal-link__arrow { color: var(--red-600); transition: transform var(--dur-ui) var(--ease-system); }
.signal-link__dest { color: var(--red-soft); background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-ui) var(--ease-system); padding-bottom: 2px; }
.signal-link:hover .signal-link__arrow, .signal-link:focus-visible .signal-link__arrow { transform: translateX(6px); }
.signal-link:hover .signal-link__dest, .signal-link:focus-visible .signal-link__dest { background-size: 100% 1px; }
.signal-link--paper { color: var(--text-dark); }
.signal-link--paper .signal-link__arrow, .signal-link--paper .signal-link__dest { color: var(--red-700); }

/* What We're Working On — dark signature */
.work { overflow: hidden; }
.work > .container { position: relative; }
.work__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--content-gap-md);
  align-items: start;
}
.work__intro { grid-column: 1 / 7; }
.work__title { margin-top: var(--content-gap-sm); max-width: 17ch; }
.work-map {
  grid-column: 7 / 13;
  position: relative;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(68% 58% at 50% 48%, rgba(37, 41, 45, 0.78) 0%, rgba(13, 17, 20, 0.55) 70%, transparent 100%),
    linear-gradient(180deg, rgba(247, 244, 242, 0.03), transparent 42%),
    var(--ink-950);
  overflow: hidden;
}
.work-map__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 320;
  max-height: min(34svh, 260px);
  margin-inline: auto;
}
.work-map__grid path {
  fill: none;
  stroke: rgba(247, 244, 242, 0.12);
  stroke-width: 1;
}
.work-map__edge {
  fill: none;
  stroke: rgba(247, 244, 242, 0.18);
  stroke-width: 1.25;
  transition: stroke var(--dur-ui) var(--ease-system), opacity var(--dur-ui) var(--ease-system);
}
.work-map__edge.is-hot {
  stroke: var(--red-600);
  stroke-width: 1.6;
}
.work-map.has-hot .work-map__edge:not(.is-hot) { opacity: 0.35; }
.work-map__pulse {
  fill: var(--white);
  opacity: 0;
  pointer-events: none;
}
.work-map__core-ring {
  fill: rgba(200, 72, 73, 0.1);
  stroke: rgba(200, 72, 73, 0.5);
  stroke-width: 1;
}
.work-map__core-dot { fill: var(--red-600); }
.work-map__core-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  fill: var(--text-light-2);
}
.work-map.is-live .work-map__core-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: halo 3.2s var(--ease-inout) infinite;
}
.work-map__node circle {
  fill: var(--ink-950);
  stroke: rgba(247, 244, 242, 0.55);
  stroke-width: 1.25;
  transition: fill var(--dur-micro), stroke var(--dur-micro);
}
.work-map__node text {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: rgba(247, 244, 242, 0.82);
  paint-order: stroke;
  stroke: var(--ink-950);
  stroke-width: 5px;
  stroke-linejoin: round;
  transition: fill var(--dur-micro);
}
.work-map__node.is-hot circle {
  fill: var(--red-600);
  stroke: var(--red-600);
}
.work-map__node.is-hot text { fill: var(--text-light); }

.work-domains {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.work-domain {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  padding: 18px 16px 18px 0;
  border-right: 1px solid var(--line-dark);
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease-system);
}
.work-domain:last-child { border-right: 0; padding-right: 0; }
.work-domain__num {
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--text-light-3);
}
.work-domain__name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  letter-spacing: -0.02em;
  color: var(--text-light-2);
  transition: color var(--dur-ui) var(--ease-system);
}
.work-domain__hint {
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-light-3);
}
.work-domain.is-active .work-domain__num,
.work-domain:hover .work-domain__num { color: var(--red-soft); }
.work-domain.is-active .work-domain__name,
.work-domain:hover .work-domain__name { color: var(--text-light); }
.work-domain.is-active {
  background: linear-gradient(180deg, rgba(200, 72, 73, 0.08), transparent 70%);
}

.work__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: var(--content-gap-lg); }
.streams { grid-column: 1 / 6; border-bottom: 1px solid var(--line-dark); }
.stream { position: relative; border-top: 1px solid var(--line-dark); }
.stream::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--red-600); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-reveal) var(--ease-system); }
.stream.is-open::before { transform: scaleX(1); }
.stream__btn { display: flex; align-items: baseline; gap: 16px; width: 100%; min-height: 56px; padding: 16px 0; color: var(--text-light-2); transition: color var(--dur-ui) var(--ease-system); }
.stream__num { flex: none; width: 3.25rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--text-light-3); }
.stream__title { flex: 1; font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.625rem); letter-spacing: -0.015em; line-height: 1.2; }
.stream__icon { position: relative; flex: none; width: 12px; height: 12px; align-self: center; }
.stream__icon::before, .stream__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: currentColor; transition: transform var(--dur-ui) var(--ease-system); }
.stream__icon::after { transform: rotate(90deg); }
.stream.is-open .stream__icon::after { transform: rotate(0deg); }
.stream.is-open .stream__btn, .stream__btn:hover { color: var(--text-light); }
.stream.is-open .stream__num { color: var(--red-soft); }
.stream__items { display: none; padding: 0 0 18px calc(3.25rem + 16px); }
.stream.is-open .stream__items { display: grid; gap: 14px; }
.stream__items h3 { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 4px; }
.stream__items p { font-size: 1.0625rem; color: var(--text-light-2); }
.no-js .stream__items, html:not(.js) .stream__items { display: grid; gap: 14px; }

.lab { grid-column: 6 / 13; position: sticky; top: calc(var(--nav-h) + 24px); padding-left: clamp(0px, 2vw, 24px); }
.lab__frame {
  position: relative;
  height: min(70svh, 600px);
  min-height: 400px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: radial-gradient(90% 70% at 55% 45%, rgba(37, 41, 45, 0.55) 0%, var(--ink-900) 72%);
  overflow: hidden;
}
.lab__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab__hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light-3); }
.lab__state { position: absolute; right: 20px; top: 18px; color: var(--red-soft); }
.lab .hud__tick { border-color: rgba(247, 244, 242, 0.25); }
.lab .hud__tick--tl { top: 8px; left: 8px; } .lab .hud__tick--tr { top: 8px; right: 8px; }
.lab .hud__tick--bl { bottom: 8px; left: 8px; } .lab .hud__tick--br { bottom: 8px; right: 8px; }

/* Purpose-Built Research Infrastructure */
.infra .grid { row-gap: var(--content-gap-md); }
.infra__head .col-head .h2 { max-width: 16ch; }
.infra__head .col-head { grid-row: 2; }
.infra__lead { grid-column: 1 / 8; grid-row: 3; color: var(--text-dark); }
.infra__support { grid-column: 8 / 13; grid-row: 3; align-self: start; color: var(--text-muted); font-size: 1.0625rem; }
.infra__support p + p { margin-top: 0.9em; }
.infra__note { padding-left: 12px; border-left: 2px solid var(--red-700); color: var(--text-dark); }
.caps-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: var(--content-gap-lg);
  border-top: 1px solid var(--line-paper);
  border-bottom: 1px solid var(--line-paper);
}
.caps-strip li { position: relative; padding: 16px 14px 16px 0; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dark); }
.caps-strip li + li { padding-left: 14px; border-left: 1px solid var(--line-paper); }
.caps-strip li::before { content: ""; display: block; width: 6px; height: 6px; background: var(--red-700); margin-bottom: 10px; }

.stack {
  position: relative;
  margin-top: var(--content-gap-md);
  padding: clamp(20px, 2.6vw, 40px);
  background: var(--ink-950);
  color: var(--text-light-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.stack__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
.layers { grid-column: 1 / 5; display: flex; flex-direction: column; border-bottom: 1px solid var(--line-dark); }
.layer { flex: 1; position: relative; border-top: 1px solid var(--line-dark); padding-bottom: 12px; transition: background-color var(--dur-ui) var(--ease-system); }
.layer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--red-600); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--dur-ui) var(--ease-system); }
.layer.is-active { background: rgba(200, 72, 73, 0.07); }
.layer.is-active::before { transform: scaleY(1); }
.layer__btn { display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 44px; padding: 12px 12px 4px 16px; color: var(--text-light-2); }
.layer__num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--text-light-3); }
.layer__name { font-family: var(--font-display); font-size: clamp(1.125rem, 1.4vw, 1.375rem); letter-spacing: -0.015em; }
.layer.is-active .layer__btn, .layer__btn:hover { color: var(--text-light); }
.layer.is-active .layer__num { color: var(--red-soft); }
.layer__items { padding: 0 12px 0 calc(16px + 2.5rem + 14px); font-size: 1rem; color: var(--text-light-3); }
.layer.is-active .layer__items { color: var(--text-light-2); }
.stack__viz { grid-column: 5 / 13; position: relative; min-height: 440px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--ink-900); overflow: hidden; }
.stack__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chain { position: relative; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: var(--content-gap-md); padding-top: var(--content-gap-sm); border-top: 1px solid var(--line-dark); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light-2); }
.chain li { display: flex; align-items: center; gap: 10px; }
.chain li + li::before { content: "→"; color: var(--red-soft); }
.chain li:first-child, .chain li:last-child { color: var(--text-light); }

.infra__cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--content-gap-lg) var(--gap); margin-top: var(--content-gap-lg); }
.infra__h3 { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-700); margin-bottom: var(--content-gap-sm); }
.reasons div { padding-block: 12px; border-top: 1px solid var(--line-paper); }
.reasons dt { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--text-dark); }
.reasons dd { margin: 2px 0 0; font-size: 1.0625rem; color: var(--text-muted); }
.infra__col--stack { padding-inline: clamp(0px, 1.5vw, 24px); border-left: 1px solid var(--line-paper); border-right: 1px solid var(--line-paper); }
.infra__big { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 2.8vw, 2.75rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--text-dark); margin-bottom: var(--content-gap-sm); }
.infra__col--stack > p { color: var(--text-muted); }
.verbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--content-gap-sm); }
.verbs li { padding: 6px 10px; border: 1px solid var(--rose-line); border-radius: 2px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-900); background: rgba(255, 255, 255, 0.6); }
.infra__coloc { margin-top: var(--content-gap-sm); padding-top: 14px; border-top: 1px solid var(--line-paper); font-size: 1.0625rem; color: var(--text-dark) !important; }
.tech li { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-top: 1px solid var(--line-paper); cursor: default; transition: background-color var(--dur-micro); }
.tech li:hover, .tech li.is-hot { background: rgba(255, 255, 255, 0.7); }
.tech__group { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.tech__items { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.01em; color: var(--text-dark); }

/* Disciplines: how the work moves between people */
.collab { margin-top: var(--content-gap-lg); padding-top: var(--content-gap-sm); border-top: 1px solid var(--line-dark); }
.collab__title { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-soft); margin-bottom: var(--content-gap-sm); }
.collab__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; counter-reset: c; }
.collab__list li { position: relative; padding-top: 18px; border-top: 1px solid rgba(247, 244, 242, 0.2); }
.collab__list li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-950); border: 1px solid var(--red-soft); }
.collab__list li::after { content: "→"; position: absolute; top: -11px; right: 0; font-size: 0.75rem; color: var(--red-soft); }
.collab__list li.collab__back::after { content: "↺"; }
.collab__who { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 4px; }
.collab__what { display: block; font-size: 1rem; line-height: 1.45; color: var(--text-light-2); }
.collab__back .collab__who { color: var(--red-soft); }

/* Recruiting bridge — red */
.bridge { overflow: hidden; background: radial-gradient(110% 120% at 85% 30%, var(--red-600) 0%, var(--red-800) 45%, var(--red-900) 100%); }
.bridge .grid-bg { -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 80%); }
.bridge__inner { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.bridge__inner > .label { grid-column: 1 / -1; }
.bridge__inner > .converge { grid-column: 1 / -1; }
.bridge__title {
  grid-column: 1 / 9;
  margin-top: var(--content-gap-sm);
  max-width: 20ch;
  color: var(--white);
  font-size: clamp(2rem, 3.8vw, 3.75rem);
  line-height: 1.05;
}
.bridge__copy {
  grid-column: 9 / 13;
  margin-top: var(--content-gap-sm);
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.bridge__copy p {
  margin: 0;
  max-width: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.bridge__copy p + p { margin-top: 0.85em; }
.converge { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: var(--content-gap-lg); padding-top: var(--content-gap-md); border-top: 1px solid rgba(255, 255, 255, 0.22); }
.converge__from { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 20px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.94); }
.converge__lines { width: 96px; height: 76px; }
.converge__lines path { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.converge__to { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.625rem); letter-spacing: -0.02em; color: var(--white); max-width: none; }
.converge .btn { margin-left: auto; }

/* Careers additions */
.careers__copy p + p { margin-top: 1em; color: var(--text-muted); }
.careers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--content-gap-md) var(--gap); margin-top: var(--content-gap-lg); }
.enjoy__list { columns: 2; column-gap: var(--gap); }
.enjoy__list li { break-inside: avoid; display: flex; gap: 10px; padding-block: 8px; border-top: 1px solid var(--line-paper); font-size: 1.0625rem; color: var(--text-dark); }
.enjoy__list li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.6em; background: var(--red-700); }
.enjoy__short { display: none; }

.area-detail { display: none; }

/* Work: one evidence row under the visual, synced with the selection */
.lab__note { display: flex; align-items: center; gap: 10px; max-width: none; margin-top: 10px; padding: 12px 16px; border: 1px solid var(--line-dark); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light-2); }
.lab__note::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--red-600); }

/* Process: each stage names its system state */
.stage__sys { display: inline-block; margin-left: 10px; padding: 2px 8px; border: 1px solid rgba(217, 136, 134, 0.4); border-radius: 2px; font-size: var(--fs-micro); color: var(--text-light-2); vertical-align: 1px; }
.strip li.is-current,
.strip__point.is-current { color: var(--red-soft) !important; }
.loop-node.is-loop circle:not(.loop-node__ring) { stroke: var(--red-soft); stroke-dasharray: 2 2; }

/* Careers: one role hierarchy — discipline, context, focus, representative areas */
.roles { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--grid-gap); align-items: start; margin-top: var(--content-gap-lg); border-top: 1px solid var(--line-paper); }
.role { display: contents; }
.role__btn {
  grid-column: 1;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--line-paper);
  transition: background-color var(--dur-micro) var(--ease-system);
}
.role__btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--red-700); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--dur-ui) var(--ease-system); }
.role.is-open .role__btn, .role.is-preview .role__btn { background: rgba(255, 255, 255, 0.7); }
.role.is-open .role__btn::before { transform: scaleY(1); }
.role__num { flex: none; width: 1.75rem; padding-top: 3px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--red-700); }
.role__text { flex: 1; min-width: 0; }
.role__name { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-dark); }
.role__desc { display: block; margin-top: 2px; font-size: 1rem; line-height: 1.45; color: var(--text-muted); }
.role__icon { display: none; }
.role__detail {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: none;
  padding: clamp(24px, 3vw, 44px);
  background: var(--white);
  border: 1px solid rgba(32, 23, 24, 0.07);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -36px rgba(110, 29, 33, 0.3);
}
.role.is-shown .role__detail { display: block; animation: roleIn var(--dur-ui) var(--ease-system) both; }
@keyframes roleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.role__focus { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em; color: var(--text-dark); max-width: 24ch; margin-bottom: var(--content-gap-md); }
.role__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.role__tags li { padding: 7px 10px; border: 1px solid var(--rose-line); border-radius: 2px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-900); }
.roles__aside { grid-column: 2; grid-row: 5 / span 4; align-self: end; padding-top: var(--content-gap-md); }
.careers__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 20px;
  margin-top: 0;
  padding-top: var(--content-gap-sm);
  border-top: 1px solid var(--line-paper);
}
.careers__values {
  flex: 0 1 auto;
  width: auto;
  max-width: 34rem;
  margin: 0;
  color: var(--text-muted);
}
.careers__close .btn {
  flex: none;
  margin: 0;
}
html:not(.js) .role__detail { display: block; grid-row: auto; grid-column: 1 / -1; }

/* The Firm — red band: founding scale, people, and the two offices on a map */
.firm { overflow: hidden; background: linear-gradient(100deg, var(--red-900) 0%, var(--red-800) 55%, var(--red-700) 100%); }
.firm > .container { position: relative; }
.firm .grid-bg--fine { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); }
.firm__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--grid-gap); margin-top: var(--content-gap-md); }
.fcard--offices { grid-column: 1 / -1; }
.fcard { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 2.2vw, 32px); background: rgba(60, 10, 14, 0.28); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); overflow: hidden; }
.fcard::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--white); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-diagram) var(--ease-system); }
.firm.is-in .fcard::before { transform: scaleX(1); }
.firm.is-in .fcard--people::before { transition-delay: 0.15s; }
.firm.is-in .fcard--offices::before { transition-delay: 0.3s; }
.fcard__k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); }
.fcard__k--strong { color: var(--white); }
.fcard__fig { margin-top: 10px; font-family: var(--font-display); font-size: clamp(3rem, 5vw, 5rem); line-height: 1; letter-spacing: -0.035em; color: var(--white); font-variant-numeric: tabular-nums; }
.fcard__mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.04em; }
.fcard__year { display: inline-block; }

/* Founded: a vertical timeline, one node per year, 2018 to today */
.years { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: var(--grid-gap); margin-top: auto; padding-top: var(--content-gap-md); }
.years li { position: relative; display: flex; align-items: center; min-height: 32px; padding-left: 26px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.92); }
.years li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--white); transition: opacity var(--dur-micro) var(--ease-system); transition-delay: var(--d, 0s); }
.years li::after { content: ""; position: absolute; left: 4px; top: 50%; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.7); transform-origin: 50% 0; transition: transform var(--dur-ui) var(--ease-system); transition-delay: var(--d, 0s); }
.years li:nth-child(5)::after, .years li:last-child::after { display: none; }
.years li:first-child { color: var(--white); }
.years li:first-child::before { width: 11px; height: 11px; left: -1px; margin-top: -5.5px; }
.years .years__now { color: var(--white); }
.years__dot { position: absolute; left: -4px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; border-radius: 50%; border: 1px solid var(--white); opacity: 0; }
.firm.is-live .years__dot { animation: dotPulse 2.4s var(--ease-out) infinite; }
@keyframes dotPulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }

/* People: one figure per person; engineers solid white */
.fcard__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.crowd { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 8px 6px; margin-top: auto; padding-top: var(--content-gap-md); }
.fig { width: 100%; height: auto; aspect-ratio: 20 / 24; fill: currentColor; color: var(--white); opacity: 0.42; transition: color var(--dur-ui) var(--ease-system), opacity var(--dur-ui) var(--ease-system), transform var(--dur-ui) var(--ease-system); transition-delay: var(--d, 0s); }
.crowd__legend { display: flex; align-items: center; gap: 8px; max-width: none; margin-top: 16px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); }
.crowd__key { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.42); }

/* Offices: the land map with both cities and the link between them */
.fcard--offices { padding: 0; }
.fcard__over { position: absolute; left: clamp(20px, 2.2vw, 32px); top: clamp(20px, 2.2vw, 32px); z-index: 1; }
.fcard--offices::after { content: ""; position: absolute; left: 0; top: 0; width: 34%; height: 60%; background: radial-gradient(70% 70% at 0% 0%, rgba(120, 30, 34, 0.85) 0%, rgba(120, 30, 34, 0) 100%); pointer-events: none; }
.fcard__over { z-index: 2; }
.map { display: block; width: 100%; height: auto; }
.map__land { fill: none; stroke: rgba(255, 255, 255, 0.24); stroke-width: 4.2; stroke-linecap: round; }
.map__arc { fill: none; stroke: var(--white); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.map__pulse { fill: none; stroke: var(--white); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.03 0.97; stroke-dashoffset: 1; opacity: 0; }
.firm.is-live .map__pulse { opacity: 1; animation: linkPulse 3s linear infinite; }
@keyframes linkPulse { to { stroke-dashoffset: 0; } }
.map__node { fill: var(--white); }
.map__halo { fill: none; stroke: var(--white); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.firm.is-live .map__halo { animation: nodePulse 2.8s var(--ease-out) infinite; }
.firm.is-live .map__halo--b { animation-delay: 1.4s; }
.firm.is-live .map__halo--c { animation-delay: 2.8s; }
.map__label {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.12em;
  fill: var(--white);
  paint-order: stroke fill;
  stroke: rgba(120, 30, 34, 0.88);
  stroke-width: 4px;
  stroke-linejoin: round;
  dominant-baseline: alphabetic;
}
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--grid-gap); padding: 0 clamp(20px, 2.2vw, 32px) clamp(16px, 1.8vw, 24px); }
.offices li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.offices__city { color: var(--white); font-size: 1.0625rem; }
.offices__coord { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.88); }

/* Pre-entry states exist only while motion is on; without JS or motion everything is final. */
.reveal .firm:not(.is-in) .fcard__year { transform: translateY(105%); }
.reveal .firm:not(.is-in) .years li::before { opacity: 0; }
.reveal .firm:not(.is-in) .years li::after { transform: scaleY(0); }
.reveal .firm:not(.is-in) .map__arc { stroke-dashoffset: 1; }
.reveal .firm:not(.is-in) .map__node, .reveal .firm:not(.is-in) .map__label { opacity: 0; }
.reveal .firm:not(.is-in) .fig { opacity: 0.08; transform: translateY(4px); }
.fcard__year { transition: transform var(--dur-diagram) var(--ease-system) 0.1s; }
.map__arc { transition: stroke-dashoffset 1.6s var(--ease-system) 0.6s; }
.map__node, .map__label { transition: opacity var(--dur-ui) var(--ease-system) 0.4s; }

/* Compact firm band: founded · people · offices in a single row on wide screens */
@media (min-width: 1024px) {
  .firm__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); margin-top: var(--content-gap-sm, 24px); }
  .fcard--offices { grid-column: auto; }
  .fcard { padding: clamp(18px, 1.6vw, 24px); }
  .fcard__fig { font-size: clamp(2.5rem, 3.6vw, 3.75rem); }
  .years { padding-top: 20px; }
  .years li { min-height: 24px; }
  .crowd { grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px 3px; padding-top: 20px; }
  .crowd__legend { margin-top: 12px; }
  .fcard__over { position: static; padding: clamp(18px, 1.6vw, 24px) clamp(18px, 1.6vw, 24px) 0; }
  .fcard--offices { justify-content: space-between; }
  .offices { grid-template-columns: 1fr; gap: 6px; }
  .offices li { padding-top: 8px; }
}

/* 9. Reveal states — only while JS + motion are active (html.reveal) */
.reveal:not(.motion-fallback) [data-reveal]:not(.is-in) { opacity: 0; }
.reveal:not(.motion-fallback) [data-reveal="lines"].is-split:not(.is-in) { opacity: 1; }
.reveal:not(.motion-fallback) [data-reveal="lines"].is-split:not(.is-in) .line__inner { transform: translateY(105%); }
.motion-fallback [data-reveal] { opacity: 1 !important; transform: none !important; visibility: visible !important; }
.motion-fallback [data-reveal] .line__inner { transform: none !important; }

/* 10. Responsive ----------------------------------------------------------
   >= 1280 full desktop · 1024–1279 compact desktop · 768–1023 tablet · < 768 mobile */

/* Compact desktop / landscape tablet */
@media (max-width: 1279.98px) {
  .nav { gap: 20px; }
  .nav__links { gap: 16px; }
  .nav__links a { font-size: 0.9375rem; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work__intro { grid-column: 1 / 7; }
  .work-map { grid-column: 7 / 13; }
  .work-map__svg { max-height: min(30svh, 220px); }
  .tenet__rule { display: none; }
  .tenet__title { grid-column: 2 / 8; }
  .tenet p { grid-column: 8 / 13; }
  .caps-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caps-strip li:nth-child(4) { border-left: 0; padding-left: 0; }
  .caps-strip li:nth-child(n + 4) { border-top: 1px solid var(--line-paper); }
  .collab__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 24px; }
}

/* Tablet: menu navigation, stacked headers, process as a vertical sequence */
@media (max-width: 1023.98px) {
  :root { --nav-h: 60px; }
  .nav__links, .nav__cta { display: none; }
  .nav__menu-btn { display: inline-flex; }
  .nav__logo img { height: 28px; }
  /* Mobile-only: hide Join Our Team + Motion controls; use compact dropdown tabs */
  .footer .motion-toggle { display: none; }

  .col-head, .col-body, .col-lead, .col-side, .about__lead, .about__body, .infra__lead { grid-column: 1 / -1; grid-row: auto; }
  .about .col-head, .infra__head .col-head, .infra__support { grid-column: 1 / -1; grid-row: auto; }
  .col-body, .col-lead, .col-side { align-self: start; }

  .hero { height: auto; min-height: min(100svh, 760px); padding-block: calc(var(--nav-h) + 56px) 96px; }
  .work__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .work__intro,
  .work-map,
  .work-domains { grid-column: auto; width: 100%; }
  .work__title { max-width: none; margin-top: 8px; }
  .work-map {
    min-height: 0;
    border: 0;
  }
  .work-map__svg { max-height: min(28svh, 200px); }
  .work-domains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }
  .work-domain {
    padding: 12px 12px 12px 0;
    row-gap: 2px;
  }
  .work-domain:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
    padding-left: 12px;
  }
  .work-domain:nth-child(n + 3) {
    border-top: 1px solid var(--line-dark);
  }
  .work-domain__hint { font-size: 0.875rem; }
  .work__body { display: flex; flex-direction: column; align-items: stretch; }
  .lab { order: -1; position: relative; top: 0; padding-left: 0; margin-bottom: var(--content-gap-md); }
  .lab__frame { height: 340px; min-height: 0; }

  .research__layout { display: flex; flex-direction: column; }
  .research__col { display: contents; }
  .research__col > .label { order: 1; }
  .research__title { order: 2; }
  .areas { order: 3; }
  .area-detail { order: 4; }
  .field { order: 5; position: relative; top: 0; width: 100%; margin-top: var(--content-gap-md); }
  .field__frame { height: 340px; min-height: 0; }

  .layers { grid-column: 1 / 6; }
  .stack__viz { grid-column: 6 / 13; }
  .infra__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infra__col--stack { grid-column: 1 / -1; grid-row: 1; padding-inline: 0; border: 0; }

  .risk__layout { display: block; }
  .risk__factors { padding-top: var(--content-gap-md); }

  .tenet { grid-template-columns: 2.5rem 1fr; row-gap: 6px; }
  .tenet__title, .tenet p { grid-column: 2; }

  .disciplines__layout { display: flex; flex-direction: column; gap: var(--content-gap-md); align-items: stretch; }
  .network { width: 100%; }

  .bridge__title,
  .bridge__copy {
    grid-column: 1 / -1;
    max-width: none;
  }
  .bridge__title {
    font-size: clamp(1.75rem, 4.2vw, 2.5rem);
    line-height: 1.08;
  }
  .bridge__copy {
    margin-top: 10px;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.45;
  }

  /* Research: selector chips, active explanation, then the visual */
  .js .areas { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .js .area { border: 0; padding: 0; }
  .js .area::before { display: none; }
  .js .area__btn { width: auto; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-dark); border-radius: 2px; }
  .js .area__num { display: none; }
  .js .area__title { font-family: var(--font-body); font-size: 1.0625rem; letter-spacing: 0; }
  .js .area.is-active .area__btn { border-color: var(--red-600); background: rgba(200, 72, 73, 0.14); }
  .js .area__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .area-detail { display: block; margin-top: var(--content-gap-md); padding-left: 14px; border-left: 2px solid var(--red-600); }
  .area-detail__title { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.015em; color: var(--text-light); margin-bottom: 4px; }
  .area-detail__desc { color: var(--text-light-2); }
  .area__desc { padding-left: 0; }

  /* Careers: accordion, one open, every role readable before expanding */
  .roles { display: block; }
  .role { display: block; border-bottom: 1px solid var(--line-paper); }
  .role__btn { border-bottom: 0; padding-right: 4px; }
  .role__icon { display: block; position: relative; flex: none; width: 12px; height: 12px; margin-top: 8px; color: var(--text-muted); }
  .role__icon::before, .role__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: currentColor; transition: transform var(--dur-ui) var(--ease-system); }
  .role__icon::after { transform: rotate(90deg); }
  .role.is-open .role__icon::after { transform: rotate(0deg); }
  .role.is-preview .role__btn { background: none; }
  .role__detail, .role.is-shown .role__detail { display: none; padding: 0 8px 18px 58px; background: none; border: 0; box-shadow: none; animation: none; }
  .role.is-open .role__detail { display: block; }
  .role__focus { font-size: 1.25rem; margin-bottom: 12px; }
  .roles__aside { padding-block: var(--content-gap-md) 0; border-bottom: 0; }

  .stage__copy { max-width: 40rem; }
  .converge .btn { margin-left: 0; }

  /* About: stack body copy full-width so unequal lengths don't leave empty half-columns */
  .about .grid { row-gap: 18px; }
  .about__statement { max-width: 16ch; }
  .about__lead {
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    line-height: 1.32;
  }
  .about__body {
    display: block;
    font-size: 1rem;
    line-height: 1.55;
  }
  .about__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .firm__grid { grid-template-columns: 1fr; }

  /* Careers — stacked header + close row after roles removed */
  .careers__inner { gap: 20px; }
  .careers__main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .careers__head,
  .careers__copy {
    grid-column: auto;
    max-width: none;
    justify-self: start;
    width: 100%;
  }
  .careers__head .h2 {
    max-width: 14ch;
    font-size: clamp(2rem, 5.2vw, 2.75rem);
    line-height: 1.08;
  }
  .careers__copy .lead {
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    line-height: 1.4;
  }
  .careers__close {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 14px;
  }
  .careers__values {
    flex: none;
    width: 100%;
    max-width: none;
  }
  .careers__close .btn {
    width: auto;
    align-self: flex-start;
  }

  .footer__brand { grid-column: 1 / -1; }
  .footer__nav { grid-column: 1 / 7; }
  .footer__meta { grid-column: 7 / 13; }
}

/* Mobile: purpose-built compositions */
@media (max-width: 767.98px) {
  /* The Firm — compact cards; keep founded / people / offices animations intact */
  .firm.section--tight { padding-block: 36px; }
  .firm__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
  }
  .fcard--offices { grid-column: 1 / -1; }
  .fcard {
    padding: 12px 12px 14px;
    border-radius: 4px;
    min-height: 0;
  }
  .fcard__k {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }
  .fcard__fig {
    margin-top: 4px;
    font-size: clamp(1.75rem, 8.5vw, 2.25rem);
  }
  .fcard__pair { gap: 8px; }

  .years {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    column-gap: 8px;
    padding-top: 12px;
  }
  .years li {
    min-height: 20px;
    padding-left: 16px;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }
  .years li::before {
    width: 6px;
    height: 6px;
    margin-top: -3px;
  }
  .years li::after { left: 2.5px; }
  .years li:first-child::before {
    width: 8px;
    height: 8px;
    left: -1px;
    margin-top: -4px;
  }
  .years__dot {
    width: 12px;
    height: 12px;
    left: -3px;
    margin-top: -6px;
  }

  .crowd {
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 2px 2px;
    padding-top: 10px;
  }
  .crowd__legend {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
  }
  .crowd__key { width: 6px; height: 6px; }
  .crowd__key--eng { margin-left: 8px; }

  .fcard--offices { padding: 0; }
  .fcard__over {
    position: static;
    padding: 12px 12px 0;
  }
  .fcard--offices::after {
    width: 55%;
    height: 55%;
  }
  .map {
    width: 100%;
    max-height: min(42vw, 180px);
    min-height: 150px;
    margin-top: 4px;
  }
  .map__land { stroke-width: 3.4; }
  .map__arc { stroke-width: 1.35; }
  .map__pulse { stroke-width: 3; }
  .map__label {
    display: block;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 0.1em;
    stroke-width: 5px;
  }
  .map__node { r: 6; }
  .map__halo { r: 11; }
  .offices {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 2px 12px 12px;
  }
  .offices li {
    padding-top: 8px;
    gap: 6px;
  }
  .offices__city { font-size: 0.875rem; }
  .offices__coord {
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
  }

  :root { --section-y: 56px; --section-y-tight: 44px; --content-gap-lg: 32px; --content-gap-md: 22px; --fs-micro: 0.8125rem; --fs-hero: clamp(2.75rem, 12vw, 3.5rem); --page-gutter: 16px; }

  /* Compact dropdown spans the content width on phones */
  .menu {
    left: var(--pad-x);
    right: var(--pad-x);
    width: auto;
  }

  /* Hero (mobile only): heading → copy left | animated pattern right → CTA row */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
    column-gap: 12px;
    row-gap: 18px;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: calc(var(--nav-h) + 24px) var(--pad-x) 20px;
    overflow: hidden;
  }
  .hero__inner,
  .hero__content {
    display: contents;
  }
  .hero__label { display: none; }
  .hero__title {
    grid-column: 1 / -1;
    max-width: 12.5ch;
    font-size: var(--fs-hero);
    line-height: 0.92;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }
  .hero__title .hline + .hline { margin-top: 0.02em; }
  .hero__copy {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7em;
    margin-top: 0;
    max-width: none;
    min-width: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.8125rem, 3.5vw, 0.95rem);
    line-height: 1.48;
  }
  .hero__copy p { max-width: 34ch; }
  .hero__copy p + p { margin-top: 0; color: rgba(255, 255, 255, 0.78); font-size: 0.94em; line-height: 1.42; }
  /* Freestanding animated pattern on the right — no frame or panel chrome */
  .hero__canvas {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    inset: auto;
    z-index: 1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    min-height: 180px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
  }
  .hero__scrim, .hud--hero { display: none; }
  .hero__ctas {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    margin-top: 2px;
  }
  .hero__ctas .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    gap: 6px;
  }
  /* Stage line under CTAs: one row, smaller type, spaced arrows */
  .hero__readout {
    grid-column: 1 / -1;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 6px 0 2px;
    overflow: visible;
    font-size: clamp(0.5rem, 2.15vw, 0.625rem);
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.78);
  }
  .hero__readout li {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    padding-bottom: 5px;
    white-space: nowrap;
  }
  .hero__readout li + li {
    padding-left: clamp(0.7rem, 2.8vw, 1.05rem);
  }
  .hero__readout li + li::before {
    content: "→";
    position: absolute;
    left: 0.12em;
    top: 0;
    opacity: 0.45;
    font-size: 0.95em;
    letter-spacing: 0;
  }
  .hero__readout .is-active { color: var(--white); }
}

/* Very small phones: keep copy left / animated pattern right */
@media (max-width: 379.98px) {
  .hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: 8px;
    row-gap: 14px;
    padding-top: calc(var(--nav-h) + 18px);
  }
  .hero__title { max-width: none; font-size: clamp(2.35rem, 11.5vw, 2.85rem); }
  .hero__copy { font-size: 0.78125rem; gap: 0.5em; line-height: 1.42; }
  .hero__copy p { max-width: none; }
  .hero__canvas { min-height: 156px; }
  .hero__ctas .btn { padding: 0 8px; font-size: 0.625rem; letter-spacing: 0.06em; }
  .hero__readout {
    font-size: clamp(0.4375rem, 2.4vw, 0.53125rem);
    letter-spacing: 0.04em;
    padding-top: 4px;
  }
  .hero__readout li + li { padding-left: 0.65rem; }
  .hero__readout li + li::before { left: 0.08em; }
}

@media (max-width: 767.98px) {
  /* About LimeoX Capital — stacked alignment, full-width, no empty half-column */
  .about .grid { row-gap: 16px; }
  .about__statement {
    max-width: none;
    font-size: clamp(1.75rem, 8.2vw, 2.35rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }
  .about__lead {
    font-size: clamp(1.0625rem, 4vw, 1.1875rem);
    line-height: 1.35;
    letter-spacing: -0.01em;
    padding-top: 12px;
  }
  .about__body {
    display: block;
    margin-top: 2px;
  }
  .about__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .about__steps li {
    min-height: 42px;
    padding: 9px 10px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }

  /* Capabilities — pin-stacked deck (mobile only; GSAP arms .has-cap-stack) */
  .capabilities {
    overflow: visible;
  }
  .capabilities .grid { row-gap: 10px; }
  .capabilities .h2 {
    max-width: none;
    font-size: clamp(1.65rem, 7.5vw, 2.15rem);
    line-height: 1.05;
  }
  .capabilities .lead {
    font-size: clamp(0.9rem, 3.5vw, 1.03rem);
    line-height: 1.45;
    color: var(--text-muted);
  }
  .capabilities .cards {
    --cap-size: min(72vw, 280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-template-columns: none;
    gap: 14px;
    margin-top: 14px;
  }
  .capabilities .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    width: var(--cap-size);
    height: var(--cap-size);
    min-height: 0;
    margin: 0 auto;
    padding: 16px 14px 14px;
    border-radius: 16px;
    border: 2px solid var(--red-700);
    overflow: hidden;
    box-shadow: 0 16px 34px -16px rgba(20, 16, 15, 0.42);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Armed stack stage: absolute overlapping deck inside a pinned viewport */
  .capabilities.has-cap-stack .cards.is-cap-stack {
    position: relative;
    display: block;
    width: 100%;
    height: var(--cap-size);
    margin-top: 18px;
    margin-bottom: 8px;
    gap: 0;
    overflow: visible;
  }
  .capabilities.has-cap-stack .cards.is-cap-stack .card {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    /* GSAP owns transform — kill CSS transition so scrub stays locked to scroll */
    transition: none;
    will-change: transform, opacity;
    box-shadow:
      0 18px 36px -14px rgba(20, 16, 15, 0.48),
      0 2px 0 rgba(20, 16, 15, 0.06);
  }
  .capabilities .card__top {
    flex: none;
    align-items: center;
    margin-bottom: 2px;
  }
  .capabilities .card__num {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }
  .capabilities .card__glyph {
    width: 30px;
    height: 30px;
  }
  .capabilities .card__title {
    margin: 0;
    font-size: clamp(1.2rem, 5vw, 1.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .capabilities .card p {
    margin: 0;
    flex: 1 1 auto;
    font-size: clamp(0.9rem, 3.5vw, 1.02rem);
    line-height: 1.45;
  }
  .capabilities .card__rule {
    height: 2px;
    transform: scaleX(0);
  }
  .capabilities .card.is-in .card__rule {
    transform: scaleX(1);
    transition-delay: 0.08s;
  }
  .capabilities .card.is-in .card__ping {
    animation: ping 1.4s var(--ease-out) 0.12s 2;
  }

  /* Shared sticky top = clean cover stack; mixed light/dark surfaces */
  .capabilities .card:nth-child(1) {
    z-index: 1;
    background: var(--white);
    border-color: var(--red-700);
  }
  .capabilities .card:nth-child(2) {
    z-index: 2;
    background: var(--ink-900);
    border-color: rgba(247, 244, 242, 0.55);
    box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.55);
    color: var(--text-light);
  }
  .capabilities .card:nth-child(3) {
    z-index: 3;
    background: var(--paper-2);
    border-color: var(--red-700);
  }
  .capabilities .card:nth-child(4) {
    z-index: 4;
    background: var(--ink-950);
    border-color: var(--red-soft);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
    color: var(--text-light);
  }

  .capabilities .card:nth-child(2) .card__num,
  .capabilities .card:nth-child(4) .card__num {
    color: var(--red-soft);
  }
  .capabilities .card:nth-child(2) .card__title,
  .capabilities .card:nth-child(4) .card__title {
    color: var(--text-light);
  }
  .capabilities .card:nth-child(2) p,
  .capabilities .card:nth-child(4) p {
    color: var(--text-light-2);
  }
  .capabilities .card:nth-child(2) .card__glyph *,
  .capabilities .card:nth-child(4) .card__glyph * {
    stroke: var(--red-soft);
  }
  .capabilities .card:nth-child(2) .card__glyph rect,
  .capabilities .card:nth-child(2) .card__glyph circle:not(.card__ping),
  .capabilities .card:nth-child(4) .card__glyph rect,
  .capabilities .card:nth-child(4) .card__glyph circle:not(.card__ping) {
    stroke: rgba(247, 244, 242, 0.4);
  }
  .capabilities .card:nth-child(2) .card__ping,
  .capabilities .card:nth-child(4) .card__ping {
    fill: var(--red-soft);
  }
  .capabilities .card:nth-child(2) .card__rule,
  .capabilities .card:nth-child(4) .card__rule {
    background: var(--red-soft);
  }

  /* Process — mobile circular timeline (armed by .is-mobile-loop) */
  .process-stage.is-mobile-loop {
    padding-block: calc(var(--nav-h) + 10px) 10px;
  }
  .process-stage.is-mobile-loop.is-pinned .process-stage__wrap {
    gap: 0;
    overflow: hidden;
  }
  .process-stage.is-mobile-loop .process__head {
    flex: none;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .process-stage.is-mobile-loop .process__title {
    font-size: clamp(1.35rem, 5.8vw, 1.7rem);
    line-height: 1.08;
  }
  /* Loop + larger description above; Data→Learning strip below (no 01–07 bar) */
  .process-stage.is-mobile-loop.is-pinned .core {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
    overflow: hidden;
  }
  .process-stage.is-mobile-loop .core__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    gap: 12px;
    overflow: hidden;
  }
  .process-stage.is-mobile-loop .loop {
    position: relative;
    grid-column: auto;
    flex: none;
    width: min(68vw, 268px);
    height: auto;
    margin: 0 auto;
    overflow: visible;
    visibility: visible;
    pointer-events: auto;
  }
  .process-stage.is-mobile-loop .loop svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(40svh, 268px);
  }
  .process-stage.is-mobile-loop .loop-track,
  .process-stage.is-mobile-loop .loop-flow {
    stroke-width: 1.35;
  }
  .process-stage.is-mobile-loop .loop-progress {
    stroke-width: 2;
  }
  .process-stage.is-mobile-loop .loop-node text {
    display: none;
  }
  .process-stage.is-mobile-loop .loop-center__num {
    font-size: 78px;
    letter-spacing: -0.045em;
  }
  .process-stage.is-mobile-loop .loop-center__title {
    opacity: 1;
    font-size: 24px;
    letter-spacing: 0.14em;
    font-weight: 500;
    /* Sit clearly under the larger count inside the loop */
    transform: translateY(10px);
  }
  .process-stage.is-mobile-loop .loop-center__of {
    opacity: 0;
  }
  .process-stage.is-mobile-loop .core__panel {
    grid-column: auto;
    position: relative;
    z-index: 1;
    flex: none;
    width: 100%;
  }
  .process-stage.is-mobile-loop.is-pinned .stages {
    display: grid;
    padding-left: 0;
    min-height: 4.6em;
  }
  .process-stage.is-mobile-loop.is-pinned .stages::before { display: none; }
  .process-stage.is-mobile-loop.is-pinned .stage {
    grid-area: 1 / 1;
    padding: 0;
    opacity: 0;
    pointer-events: none;
  }
  .process-stage.is-mobile-loop.is-pinned .stage.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  .process-stage.is-mobile-loop.is-pinned .stage::before { display: none; }
  .process-stage.is-mobile-loop.is-pinned .stage__num {
    display: none; /* title lives inside the circular timeline */
  }
  .process-stage.is-mobile-loop.is-pinned .stage__copy {
    overflow: hidden;
    margin: 0 auto;
    max-width: 24rem;
    padding-inline: 4px;
    font-size: clamp(1.12rem, 4.6vw, 1.32rem);
    line-height: 1.4;
    letter-spacing: -0.015em;
    text-align: center;
    min-height: 4.4em;
  }
  /* Mobile only: hide the 01–07 horizontal stage timeline under the description */
  .process-stage.is-mobile-loop .stage-index,
  .process-stage.is-mobile-loop.is-pinned .stage-index {
    display: none !important;
  }
  /* Mobile only: remove the “Research continues…” line */
  .process-stage.is-mobile-loop .core__close {
    display: none !important;
  }
  .process-stage.is-mobile-loop .strip-wrap,
  .strip-wrap {
    display: none !important;
  }
  .process-stage.is-mobile-loop .strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 14px;
    align-items: start;
    font-size: clamp(0.625rem, 2.6vw, 0.75rem);
    letter-spacing: 0.1em;
  }
  .process-stage.is-mobile-loop .strip__arrow {
    display: none; /* CSS connectors link the dots instead */
  }
  .process-stage.is-mobile-loop .strip__point {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 2px 2px 0;
    text-align: center;
  }
  .process-stage.is-mobile-loop .strip__point[data-strip="4"] { grid-column: 1; }
  .process-stage.is-mobile-loop .strip__point[data-strip="5"] { grid-column: 2; }
  .process-stage.is-mobile-loop .strip__point[data-strip="6"] { grid-column: 3; }

  .process-stage.is-mobile-loop .strip__point::after {
    content: "";
    position: absolute;
    top: 6px;
    left: calc(50% + 8px);
    width: calc(100% - 16px);
    height: 1px;
    background: rgba(247, 244, 242, 0.22);
    pointer-events: none;
  }
  .process-stage.is-mobile-loop .strip__point[data-strip="3"]::after,
  .process-stage.is-mobile-loop .strip__point[data-strip="6"]::after {
    display: none;
  }
  .process-stage.is-mobile-loop .strip__point.is-lit::after {
    background: rgba(200, 72, 73, 0.55);
  }
  .process-stage.is-mobile-loop .strip__point.is-current::after {
    background: var(--red-soft);
  }
  .process-stage.is-mobile-loop .strip__dot {
    display: block;
    width: 11px;
    height: 11px;
    z-index: 1;
    background: var(--ink-950);
  }
  .process-stage.is-mobile-loop .strip__label {
    display: block;
    max-width: 100%;
    line-height: 1.3;
    word-break: break-word;
  }
  .process-stage.is-mobile-loop .strip__return {
    display: none;
  }

  @media (max-width: 379.98px) {
    .process-stage.is-mobile-loop .loop {
      width: min(72vw, 240px);
    }
    .process-stage.is-mobile-loop .loop svg {
      max-height: min(36svh, 240px);
    }
    .process-stage.is-mobile-loop .loop-center__num {
      font-size: 68px;
    }
    .process-stage.is-mobile-loop .loop-center__title {
      font-size: 20px;
      transform: translateY(8px);
    }
    .process-stage.is-mobile-loop.is-pinned .stage__copy {
      font-size: clamp(1.05rem, 4.4vw, 1.2rem);
      min-height: 4.2em;
    }
    .process-stage.is-mobile-loop .strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 12px;
      font-size: 0.625rem;
    }
    .process-stage.is-mobile-loop .strip__point[data-strip="3"] { grid-column: auto; }
    .process-stage.is-mobile-loop .strip__point[data-strip="4"],
    .process-stage.is-mobile-loop .strip__point[data-strip="5"],
    .process-stage.is-mobile-loop .strip__point[data-strip="6"] { grid-column: auto; }
    .process-stage.is-mobile-loop .strip__point[data-strip="3"]::after { display: block; }
    .process-stage.is-mobile-loop .strip__point[data-strip="2"]::after,
    .process-stage.is-mobile-loop .strip__point[data-strip="5"]::after,
    .process-stage.is-mobile-loop .strip__point[data-strip="6"]::after {
      display: none;
    }
  }

  /* Principles: default stacked list; scroll timeline when .is-mobile-timeline is armed */
  .principles-sec { overflow: visible; }
  .principles-sec__head { margin-bottom: 18px; }
  .principles-sec__title { font-size: clamp(1.35rem, 5.5vw, 1.75rem); max-width: none; }
  .rail__line { display: none; }
  .rail__list {
    grid-template-columns: 1fr;
    row-gap: 22px;
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    margin-left: 6px;
  }
  .rail__item { padding: 0; }
  .rail__node { left: -35px; top: 2px; }
  .rail__title { font-size: 1.75rem; margin-bottom: 6px; }

  /* Principles mobile: full timeline line always visible; faster sequential typing */
  .rail.is-mobile-timeline .rail__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 4px 0 6px 0;
    border: 0;
  }
  .rail.is-mobile-timeline .rail__list::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: rgba(255, 255, 255, 0.4);
    transform: none;
    z-index: 0;
  }
  .rail.is-mobile-timeline .rail__item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding: 0;
    opacity: 1;
    filter: none;
    transform: translateY(8px);
    transition: transform 0.4s var(--ease-system);
  }
  .rail.is-mobile-timeline .rail__item.is-in {
    transform: none;
  }
  .rail.is-mobile-timeline .rail__node {
    display: none;
  }
  .rail.is-mobile-timeline .rail__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1 / span 3;
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    margin-left: 2px;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--red-800);
    box-shadow: 0 0 0 3px rgba(143, 39, 43, 0.35);
    transition: transform 0.28s var(--ease-system), box-shadow 0.28s var(--ease-system);
  }
  .rail.is-mobile-timeline .rail__icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
  }
  .rail.is-mobile-timeline .rail__item.is-writing .rail__icon {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28);
  }
  .rail.is-mobile-timeline .rail__item.is-done .rail__icon {
    transform: none;
    box-shadow: 0 0 0 3px rgba(143, 39, 43, 0.35);
  }
  .rail.is-mobile-timeline .rail__num {
    grid-column: 2;
    margin: 0;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.9);
  }
  .rail.is-mobile-timeline .rail__title {
    grid-column: 2;
    margin: 0;
    font-size: clamp(1.2rem, 5.2vw, 1.4rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--white);
  }
  .rail.is-mobile-timeline .rail__copy {
    grid-column: 2;
    max-width: none;
    min-height: 2.5em;
    margin: 2px 0 0;
    font-size: clamp(0.84375rem, 3.3vw, 0.9375rem);
    line-height: 1.42;
    color: rgba(255, 255, 255, 0.95);
    white-space: pre-wrap;
  }
  .rail.is-mobile-timeline .rail__copy.is-typing::after {
    content: "";
    display: inline-block;
    width: 0.55ch;
    height: 1em;
    margin-left: 1px;
    vertical-align: -0.12em;
    background: var(--white);
    animation: railCaret 0.55s steps(1) infinite;
  }

  .stream__items { padding-left: 0; }
  .lab__frame { height: 250px; }
  .lab__state { display: none; }

  /* Work — smaller graph, visible bg grid, no border */
  .work.section { padding-block: 36px 32px; }
  .work__layout { gap: 10px; }
  .work__intro { min-width: 0; }
  .work__title {
    margin-top: 4px;
    font-size: clamp(1.45rem, 6.8vw, 1.9rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .work-map {
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(70% 60% at 50% 45%, rgba(37, 41, 45, 0.85) 0%, rgba(13, 17, 20, 0.4) 72%, transparent 100%),
      var(--ink-950);
  }
  .work-map__svg {
    width: 92%;
    max-height: min(26svh, 168px);
  }
  .work-map__grid { opacity: 0.55; }
  .work-map__grid path { stroke: rgba(247, 244, 242, 0.16); }
  .work-map__node text { font-size: 10px; letter-spacing: 0.08em; }
  .work-map__core-label { font-size: 8px; letter-spacing: 0.1em; }
  .work-domains {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
    border-top: 1px solid var(--line-dark);
  }
  .work-domain {
    grid-template-columns: 1.35rem 1fr;
    column-gap: 6px;
    row-gap: 1px;
    padding: 8px 6px 8px 0;
    border-right: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
    min-width: 0;
  }
  .work-domain:nth-child(2n) {
    border-right: 0;
    padding-left: 8px;
    padding-right: 0;
  }
  .work-domain:nth-child(n + 3) {
    border-bottom: 0;
  }
  .work-domain__num {
    padding-top: 2px;
    font-size: 0.5625rem;
  }
  .work-domain__name { font-size: 0.875rem; line-height: 1.2; }
  .work-domain__hint {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--text-light-3);
  }
}

@media (max-width: 767.98px) {
  /* Infrastructure: swipeable copy + rotating caps; stack becomes a vertical sequence */
  .infra.has-infra-mobile .infra__support[data-infra-support-host] {
    display: none;
  }
  .infra.has-infra-mobile .infra__carousel {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 4px;
  }
  .infra.has-infra-mobile .infra__carousel-viewport {
    position: relative;
    min-height: 8.5em;
    outline: none;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  .infra.has-infra-mobile .infra__carousel-track {
    display: grid;
  }
  .infra.has-infra-mobile .infra__carousel-slide {
    grid-area: 1 / 1;
    margin: 0;
    max-width: none;
    font-size: clamp(1.02rem, 4vw, 1.15rem);
    line-height: 1.5;
    color: var(--text-muted);
    opacity: 0;
    transform: translateX(18px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.38s var(--ease-system),
      transform 0.38s var(--ease-system),
      visibility 0.38s;
  }
  .infra.has-infra-mobile .infra__carousel-slide.is-infra-active {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .infra.has-infra-mobile .infra__carousel-slide.infra__lead {
    color: var(--text-dark);
  }
  .infra.has-infra-mobile .infra__carousel-slide.infra__note {
    padding-left: 12px;
    border-left: 2px solid var(--red-700);
    color: var(--text-dark);
  }
  .infra.has-infra-mobile .infra__carousel-ui {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
  }
  .infra.has-infra-mobile .infra__carousel-btn {
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-paper);
    border-radius: 2px;
    background: var(--white);
    color: var(--text-dark);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
  }
  .infra.has-infra-mobile .infra__carousel-btn:active {
    background: var(--paper-2);
  }
  .infra.has-infra-mobile .infra__carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
  }
  .infra.has-infra-mobile .infra__carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(32, 23, 24, 0.22);
    cursor: pointer;
  }
  .infra.has-infra-mobile .infra__carousel-dot.is-active {
    background: var(--red-700);
    transform: scale(1.15);
  }

  /* Default (unarmed) caps grid — overridden when rotator is armed */
  .caps-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps-strip li:nth-child(n) { border-left: 0; padding-left: 0; }
  .caps-strip li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line-paper); }
  .caps-strip li:nth-child(n + 3) { border-top: 1px solid var(--line-paper); }

  .infra.has-infra-mobile .caps-strip.is-caps-rotate {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    min-height: 4.75rem;
    margin-top: 22px;
    padding: 18px 12px;
    border-top: 1px solid var(--line-paper);
    border-bottom: 1px solid var(--line-paper);
    background:
      linear-gradient(180deg, rgba(110, 29, 33, 0.04), transparent 40%),
      var(--paper);
  }
  .infra.has-infra-mobile .caps-strip.is-caps-rotate li {
    grid-area: 1 / 1;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    text-align: center;
    font-size: clamp(0.8rem, 3.4vw, 0.95rem);
    letter-spacing: 0.14em;
    color: var(--text-dark);
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.4s var(--ease-system),
      transform 0.4s var(--ease-system),
      visibility 0.4s;
  }
  .infra.has-infra-mobile .caps-strip.is-caps-rotate li::before {
    margin: 0 auto 10px;
  }
  .infra.has-infra-mobile .caps-strip.is-caps-rotate li.is-caps-on {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  /* Stack layers — compact mobile list (canvas viz stays desktop/tablet) */
  .stack {
    padding: 14px 12px 16px;
    border-radius: 10px;
  }
  .stack__grid { display: block; }
  .stack__viz { display: none; }
  .layers {
    border-bottom: 0;
  }
  .layer {
    flex: none;
    padding: 0;
    border-top: 1px solid rgba(247, 244, 242, 0.12);
  }
  .layer:first-child { border-top: 0; }
  .layer:not(:last-child)::after { display: none; }
  .layer__btn {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    min-height: 42px;
    padding: 8px 8px 8px 12px;
  }
  .layer__num {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }
  .layer__name {
    font-size: clamp(0.98rem, 3.8vw, 1.1rem);
    letter-spacing: -0.015em;
  }
  .layer__items {
    padding: 0 12px 10px calc(12px + 2.4rem + 8px);
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .chain {
    gap: 6px 8px;
    margin-top: 12px;
    padding-top: 10px;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
  }

  /* Armed accordion: only the active layer detail is open */
  .stack.is-stack-mobile .layer__btn::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(247, 244, 242, 0.28);
    background: transparent;
    transition: background 0.3s var(--ease-system), border-color 0.3s var(--ease-system), box-shadow 0.3s var(--ease-system);
  }
  .stack.is-stack-mobile .layer.is-active .layer__btn::after {
    background: var(--red-soft);
    border-color: var(--red-soft);
    box-shadow: 0 0 0 4px rgba(200, 72, 73, 0.2);
  }
  .stack.is-stack-mobile .layer__items {
    display: block;
    max-height: 0;
    margin: 0;
    padding: 0 12px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition:
      max-height 0.35s var(--ease-system),
      opacity 0.3s var(--ease-system),
      padding 0.3s var(--ease-system),
      transform 0.3s var(--ease-system);
  }
  .stack.is-stack-mobile .layer.is-active .layer__items {
    max-height: 5.5em;
    padding: 0 12px 10px calc(12px + 2.4rem + 8px);
    opacity: 1;
    color: var(--text-light-2);
    transform: translateY(0);
  }
  .infra__cols { grid-template-columns: 1fr; }

  .risk-row { grid-template-columns: 2.25rem 1fr; row-gap: 4px; padding-inline: 14px 8px; }
  .risk-row p { grid-column: 2; }
  .risk-list { grid-auto-rows: auto; }
  .scope__frame { height: 230px; }

  /* Disciplines — heading on top, radial diagram + labels below (mobile) */
  .disciplines.has-mobile-network .disciplines__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .disciplines.has-mobile-network .disciplines__copy {
    display: contents;
  }
  .disciplines.has-mobile-network .label {
    order: 1;
    margin-bottom: 0;
  }
  .disciplines.has-mobile-network .eyebrow {
    order: 2;
  }
  .disciplines.has-mobile-network .disciplines__title {
    order: 3;
    max-width: none;
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.08;
  }
  .disciplines.has-mobile-network .disciplines__intro {
    order: 4;
    margin-top: 0;
    font-size: 0.95rem;
    color: var(--text-light-2);
  }
  .disciplines.has-mobile-network .disc-list,
  .disciplines.has-mobile-network .disc-converge {
    display: none;
  }
  .disciplines.has-mobile-network .network {
    display: block;
    order: 5;
    width: 100%;
    margin: 2px auto 0;
  }
  .disciplines.has-mobile-network .network__inner {
    max-width: min(92vw, 340px);
    margin-inline: auto;
  }
  .disciplines.has-mobile-network .network__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .disciplines.has-mobile-network .network__rings circle:nth-child(1) { r: 72; }
  .disciplines.has-mobile-network .network__rings circle:nth-child(2) { r: 170; }
  .disciplines.has-mobile-network .network__rings circle:nth-child(3) { r: 198; }
  .disciplines.has-mobile-network .network__node circle:not(.network__hit) {
    r: 6;
  }
  .disciplines.has-mobile-network .network__node text {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .disciplines.has-mobile-network .network__core-halo { r: 38; }
  .disciplines.has-mobile-network .network__core-dot { r: 7; }
  .disciplines.has-mobile-network .network__core text {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .disciplines.has-mobile-network .network__caption {
    max-width: min(92vw, 340px);
    margin-top: 4px;
    padding-top: 12px;
    min-height: 4.4rem;
  }
  .disciplines.has-mobile-network .network__caption-name {
    font-size: 0.6875rem;
  }
  .disciplines.has-mobile-network .network__caption-desc {
    font-size: 0.92rem;
    line-height: 1.4;
  }
  .disciplines.has-mobile-network .disciplines__close {
    order: 6;
    margin-top: 4px;
    font-size: clamp(1rem, 4vw, 1.15rem);
    line-height: 1.35;
  }

  /* Fallback if JS does not arm the diagram */
  .disciplines:not(.has-mobile-network) .network { display: none; }
  .disciplines:not(.has-mobile-network) .disc-list {
    grid-template-columns: 1fr;
    margin-left: 4px;
    padding-left: 18px;
    border-left: 1px solid var(--red-600);
  }
  .disciplines:not(.has-mobile-network) .disc-list button {
    flex-wrap: wrap;
    align-items: baseline;
    padding-block: 10px;
  }
  .disciplines:not(.has-mobile-network) .disc-list button::before { display: none; }
  .disciplines:not(.has-mobile-network) .disc__name { color: var(--text-light); font-size: 1rem; }
  .disciplines:not(.has-mobile-network) .disc__desc {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    flex-basis: 100%;
    font-size: 1rem;
    color: var(--text-light-2);
  }
  .disciplines:not(.has-mobile-network) .disc-converge {
    display: block;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--red-600);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
  }
  .collab__list { grid-template-columns: 1fr 1fr; }
  .field__frame { height: 250px; }
  /* Careers — compact single-column mobile layout (no roles list) */
  .careers.section {
    padding-block: 36px 32px;
  }
  .careers__inner {
    gap: 12px;
  }
  .careers__main {
    gap: 8px;
  }
  .careers .label {
    margin: 0;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }
  .careers__head .eyebrow {
    margin: 0 0 6px;
  }
  .careers__head .h2 {
    max-width: none;
    margin: 0;
    font-size: clamp(1.55rem, 7.2vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .careers__copy {
    max-width: none;
  }
  .careers__copy p {
    margin: 0;
    font-size: clamp(0.9375rem, 3.6vw, 1.05rem);
    line-height: 1.5;
  }
  .careers__copy .lead {
    font-size: clamp(0.98rem, 3.7vw, 1.1rem);
    line-height: 1.45;
    color: var(--text-dark);
  }
  .careers__copy p + p {
    margin-top: 0.7em;
  }
  .careers__close {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: none;
    margin-top: 0;
    padding-top: 12px;
    gap: 8px;
    text-align: left;
  }
  .careers__values {
    flex: none;
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: left;
  }
  .careers__close .btn {
    flex: none;
    width: 100%;
    min-height: 44px;
    margin: 0;
    justify-content: center;
    padding-inline: 16px;
  }
  .careers.has-careers-mobile .roles {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 16px;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    border-top: 1px solid var(--line-paper);
  }
  .careers.has-careers-mobile .role {
    display: block;
    width: 100%;
    border-bottom: 0;
  }
  .careers.has-careers-mobile .role__btn {
    display: flex;
    align-items: center;
    grid-column: auto;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 4px 10px 10px;
    border-bottom: 1px solid var(--line-paper);
    background: transparent;
  }
  .careers.has-careers-mobile .role.is-active-list .role__btn,
  .careers.has-careers-mobile .role__btn:active {
    background: rgba(255, 255, 255, 0.72);
  }
  .careers.has-careers-mobile .role__num {
    flex: none;
    width: 1.55rem;
    padding-top: 0;
    font-size: 0.625rem;
    line-height: 1;
  }
  .careers.has-careers-mobile .role__text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .careers.has-careers-mobile .role__name {
    font-size: 0.95rem;
    line-height: 1.25;
  }
  /* Keep rows clean — full detail opens in the popup */
  .careers.has-careers-mobile .role__desc {
    display: none;
  }
  .careers.has-careers-mobile .role__icon {
    display: block;
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    margin: 0 6px 0 auto;
    color: var(--red-700);
    opacity: 1;
  }
  .careers.has-careers-mobile .role__icon::before,
  .careers.has-careers-mobile .role__icon::after {
    left: 1px;
    width: 12px;
    background: currentColor;
  }
  /* Keep + (do not collapse to −) since details open in a popup */
  .careers.has-careers-mobile .role.is-open .role__icon::after,
  .careers.has-careers-mobile .role.is-active-list .role__icon::after {
    transform: rotate(90deg);
  }
  .careers.has-careers-mobile .role__detail {
    display: none !important;
  }
  .careers.has-careers-mobile .roles__aside {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: stretch !important; /* override desktop align-self: end */
    justify-self: start;
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--line-paper);
    border-bottom: 0;
    text-align: left;
  }
  .careers.has-careers-mobile .roles__aside .infra__h3 {
    margin: 0 0 6px;
    padding: 0;
    font-size: 0.6875rem;
    text-align: left;
  }
  .careers.has-careers-mobile .enjoy__list {
    columns: auto;
    column-count: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .careers.has-careers-mobile .enjoy__full { display: none; }
  .careers.has-careers-mobile .enjoy__short { display: inline; }
  .careers.has-careers-mobile .enjoy__list li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch !important;
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 5px 0;
    border-top: 1px solid var(--line-paper);
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-dark);
    text-align: left;
  }
  .careers.has-careers-mobile .enjoy__list li:first-child {
    border-top: 0;
  }
  .careers.has-careers-mobile .enjoy__list li::before {
    width: 4px;
    height: 4px;
    margin-top: 0;
  }

  /* Role detail popup */
  .roles-modal {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
  }
  .roles-modal[hidden] { display: none !important; }
  .roles-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 15, 0.48);
    backdrop-filter: blur(2px);
  }
  .roles-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: min(78vh, 520px);
    overflow: auto;
    margin-bottom: 8px;
    padding: 18px 16px 16px;
    border: 1px solid rgba(32, 23, 24, 0.08);
    border-radius: 14px 14px 10px 10px;
    background: var(--white);
    box-shadow: 0 24px 48px -20px rgba(20, 16, 15, 0.45);
    transform: translateY(18px);
    opacity: 0;
    transition: transform 0.28s var(--ease-system), opacity 0.28s var(--ease-system);
  }
  .roles-modal.is-open .roles-modal__panel {
    transform: translateY(0);
    opacity: 1;
  }
  .roles-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--text-dark);
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    z-index: 2;
  }
  .roles-modal__kicker {
    padding-right: 36px;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--text-dark);
  }
  .roles-modal__desc {
    margin: 0 0 12px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
  }
  .roles-modal__focus {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 0.98rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--text-dark);
  }
  .roles-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .roles-modal__tags li {
    padding: 5px 8px;
    border: 1px solid var(--rose-line);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red-900);
  }
  html.roles-modal-open,
  html.roles-modal-open body {
    overflow: hidden;
  }

  .enjoy__list { columns: 1; }

  /* Bridge / Who we want to work with — stacked mobile layout */
  .bridge.section--tight {
    padding-block: 40px 36px;
  }
  .bridge .bridge__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: left;
  }
  .bridge .label {
    justify-content: flex-start;
    margin: 0;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-align: left;
  }
  .bridge .bridge__title {
    width: 100%;
    max-width: none !important;
    margin: 0;
    font-size: clamp(1.45rem, 6.8vw, 1.95rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: pretty;
    text-align: left;
  }
  .bridge .bridge__copy {
    width: 100%;
    max-width: none !important;
    margin: 0;
    font-size: clamp(0.95rem, 3.7vw, 1.0625rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
  }
  .bridge .bridge__copy p {
    max-width: none;
  }
  .bridge .bridge__copy p + p {
    margin-top: 0.75em;
  }
  .bridge .converge {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    max-width: none;
    margin: 4px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }
  .bridge .converge__from {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    width: 100%;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    line-height: 1.25;
    text-align: left;
  }
  .bridge .converge__from li {
    width: auto;
    padding-left: 0;
    text-align: left;
  }
  .bridge .converge__from li::before {
    display: none;
  }
  .bridge .converge__lines {
    display: none;
  }
  .bridge .converge__to {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: clamp(1.05rem, 4.2vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: left;
  }
  .bridge .converge .btn {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 44px;
    justify-content: center;
    padding: 0 16px;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }

  /* Footer — compact centered mobile layout */
  .footer {
    padding-block: 28px 18px;
  }
  .footer__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    row-gap: 14px;
    text-align: center;
  }
  .footer__brand,
  .footer__nav,
  .footer__meta {
    grid-column: auto;
    width: 100%;
  }
  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__logo {
    display: inline-flex;
    justify-content: center;
  }
  .footer__logo img {
    height: 36px;
    margin-inline: auto;
  }
  .footer__tag {
    margin-top: 8px;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
  }
  .footer__nav ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    justify-items: center;
  }
  .footer__nav a {
    display: block;
    padding-block: 7px;
    font-size: 0.9rem;
    line-height: 1.25;
    text-align: center;
  }
  .footer__meta {
    display: flex; /* keep email + phone visible on mobile */
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .footer__meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1rem;
    color: var(--text-light);
    overflow-wrap: anywhere;
  }
  .footer__bottom {
    margin-top: 12px;
    padding-top: 12px;
    text-align: center;
  }
  .footer__copy {
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-align: center;
  }
}

@media (max-width: 400px) {
  .footer__nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
  }
  .footer__nav a {
    font-size: 0.875rem;
    padding-block: 6px;
  }

  .collab__list { grid-template-columns: 1fr; }
  .about__steps {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .about__steps li {
    min-height: 40px;
    padding: 8px 8px;
    font-size: 0.625rem;
  }
  .about__lead { font-size: 1.03125rem; }

  /* Firm: still tighter on very small phones */
  .firm__grid { gap: 8px; }
  .fcard { padding: 10px 10px 12px; }
  .fcard__fig { font-size: clamp(1.5rem, 9vw, 1.875rem); }
  .years li { min-height: 18px; font-size: 0.5625rem; padding-left: 14px; }
  .crowd { grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 2px 1px; }
  .map {
    min-height: 140px;
    max-height: min(48vw, 168px);
  }
  .map__label {
    font-size: 34px;
    letter-spacing: 0.08em;
    stroke-width: 4.5px;
  }
  .fcard__over, .offices { padding-inline: 10px; }
  .offices { padding-bottom: 10px; }
  .offices__city { font-size: 0.8125rem; }
}

@media (max-height: 820px) and (min-width: 1024px) {
  .process-stage.is-pinned .stage__copy { font-size: clamp(1.375rem, 2vw, 1.875rem); }
  .loop svg { max-height: 50svh; }
}

@keyframes railCaret {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 11. Reduced motion ------------------------------------------------------ */
@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; }
  .work__phrase { opacity: 1 !important; color: var(--red-soft) !important; animation: none !important; }
}
html.motion-off { scroll-behavior: auto; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; }
html.motion-off .work__phrase { opacity: 1 !important; color: var(--red-soft) !important; }


/* The Firm: bright paper surface, red data accents, responsive card layout */
.firm {
  color: var(--text-dark);
  background: var(--white);
}
.firm .grid-bg--fine {
  background-image: linear-gradient(to right, rgba(200, 72, 73, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(200, 72, 73, 0.045) 1px, transparent 1px);
}
.firm__grid { align-items: stretch; }
.firm .fcard {
  min-width: 0;
  color: var(--text-dark);
  background: var(--white);
  border-color: rgba(200, 72, 73, 0.24);
  box-shadow: 0 14px 36px rgba(70, 20, 22, 0.07);
}
.firm .fcard::before { background: var(--red-600); }
.firm .fcard__k { color: var(--text-muted); }
.firm .fcard__k--strong { color: var(--red-800); }
.firm .fcard__fig { color: var(--ink-950); }
.firm .years li { color: var(--text-muted); }
.firm .years li::before { background: var(--red-600); }
.firm .years li::after { background: rgba(200, 72, 73, 0.34); }
.firm .years li:first-child,
.firm .years .years__now { color: var(--red-800); }
.firm .years__dot { border-color: var(--red-600); }
.firm .fig { color: var(--red-600); opacity: 0.58; }
.firm .fcard--offices::after {
  background: radial-gradient(70% 70% at 0% 0%, rgba(200, 72, 73, 0.1) 0%, rgba(200, 72, 73, 0) 100%);
}
.firm .map__land { stroke: rgba(143, 39, 43, 0.2); }
.firm .map__arc { stroke: var(--red-700); }
.firm .map__pulse { stroke: var(--red-600); }
.firm .map__node { fill: var(--red-800); }
.firm .map__halo { stroke: var(--red-600); }
.firm .map__label {
  fill: var(--red-900);
  stroke: var(--white);
}
.firm .offices li { border-color: rgba(143, 39, 43, 0.18); }
.firm .offices__city { color: var(--ink-950); }
.firm .offices__coord { color: var(--text-muted); }

@media (max-width: 479.98px) {
  .firm.section--tight { padding-block: 32px; }
  .firm__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
  .firm .fcard--offices { grid-column: 1; }
  .firm .fcard--year,
  .firm .fcard--people { min-height: 210px; }
  .firm .crowd { grid-template-columns: repeat(25, minmax(0, 1fr)); }
  .firm .map { max-height: none; min-height: 0; }
}


/* Compact Founded and People cards: keep all content close to its heading */
.firm .fcard--year,
.firm .fcard--people { min-height: 0; }
.firm .fcard--people .fcard__pair { display: block; }
.firm .fcard--year .fcard__fig,
.firm .fcard--people .fcard__fig {
  margin-top: 8px;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
}
.firm .fcard--year .years {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-auto-flow: row;
  gap: 2px 12px;
  margin-top: 16px;
  padding-top: 0;
}
.firm .fcard--year .years li { min-height: 24px; padding-left: 20px; font-size: 0.6875rem; }
.firm .fcard--people .crowd {
  grid-template-columns: repeat(25, minmax(0, 1fr));
  gap: 4px 3px;
  margin-top: 18px;
  padding-top: 0;
}

@media (max-width: 767.98px) {
  .firm .fcard--year .fcard__fig,
  .firm .fcard--people .fcard__fig { font-size: clamp(2rem, 7vw, 2.75rem); }
  .firm .fcard--year .years { gap: 2px 8px; }
  .firm .fcard--year .years li { min-height: 22px; padding-left: 17px; font-size: 0.625rem; }
  .firm .fcard--people .crowd { gap: 3px 2px; margin-top: 14px; }
}

@media (max-width: 479.98px) {
  .firm .fcard--year,
  .firm .fcard--people { min-height: 0; }
  .firm .fcard--year .fcard__fig,
  .firm .fcard--people .fcard__fig { font-size: clamp(2.25rem, 10vw, 3rem); }
  .firm .fcard--year .years { margin-top: 14px; }
  .firm .fcard--people .crowd { grid-template-columns: repeat(25, minmax(0, 1fr)); margin-top: 14px; }
}

@media (max-width: 359.98px) {
  .firm .fcard--year .years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .firm .fcard--people .crowd { grid-template-columns: repeat(20, minmax(0, 1fr)); }
}


/* Compact office names under the map */
.firm .offices {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-top: 0;
}
.firm .offices li {
  justify-content: flex-start;
  padding-top: 7px;
}
.firm .offices__city {
  font-size: 0.875rem;
  line-height: 1.35;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .firm .offices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .firm .offices li { min-width: 0; }
}
@media (max-width: 767.98px) {
  .firm .offices { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .firm .offices li { padding-top: 6px; }
  .firm .offices__city { font-size: 0.75rem; }
}


/* Offices card: locations share the top row; map fills the row below */
.firm .fcard--offices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "overview locations" "map map";
  align-content: start;
  align-items: start;
  column-gap: clamp(8px, 1.5vw, 20px);
  padding: clamp(12px, 1.6vw, 20px);
}
.firm .fcard--offices .fcard__over {
  grid-area: overview;
  position: static;
  left: auto;
  top: auto;
  padding: 0;
}
.firm .fcard--offices .offices {
  grid-area: locations;
  width: auto;
  max-width: 220px;
  margin: 0;
  padding: 2px 0 0;
  justify-self: end;
  text-align: right;
  gap: 2px;
}
.firm .fcard--offices .offices li {
  justify-content: flex-end;
  padding: 0;
  border: 0;
}
.firm .fcard--offices .offices__city {
  font-size: clamp(0.625rem, 0.8vw, 0.75rem);
  line-height: 1.35;
}
.firm .fcard--offices .map {
  grid-area: map;
  align-self: end;
  width: 100%;
  min-height: 0;
  max-height: none;
  height: auto;
  margin: 8px 0 0;
}
@media (max-width: 767.98px) {
  .firm .fcard--offices { padding: 12px; }
  .firm .fcard--offices .offices { max-width: 58%; }
  .firm .fcard--offices .offices__city { font-size: 0.6875rem; }
  .firm .fcard--offices .map { margin-top: 4px; }
}
@media (max-width: 359.98px) {
  .firm .fcard--offices { column-gap: 6px; }
  .firm .fcard--offices .offices { max-width: 62%; }
  .firm .fcard--offices .offices__city { font-size: 0.625rem; }
}


/* Footer disclaimer: readable width and natural wrapping at every breakpoint */
.footer__disclaimer {
  max-width: 34rem;
  margin-top: 12px;
  color: var(--text-light-3);
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-wrap: pretty;
}
@media (max-width: 767.98px) {
  .footer__tag { max-width: 100%; white-space: normal; }
  .footer__disclaimer {
    max-width: 34rem;
    margin-top: 10px;
    font-size: 0.75rem;
    line-height: 1.55;
    text-align: center;
    text-wrap: pretty;
  }
}


/* Disclaimer is the only supporting copy beneath the footer logo */
.footer__disclaimer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.75rem;
  line-height: 1.65;
}
@media (max-width: 767.98px) {
  .footer__disclaimer {
    margin-top: 10px;
    padding-top: 10px;
    font-size: 0.6875rem;
    line-height: 1.6;
  }
}


/* Founded timeline: fill years down each column before starting the next */
.firm .fcard--year .years {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
}
.firm .fcard--year .years li::after { display: block; }
.firm .fcard--year .years li:nth-child(3n)::after,
.firm .fcard--year .years li:last-child::after { display: none; }
@media (max-width: 359.98px) {
  .firm .fcard--year .years {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
  }
  .firm .fcard--year .years li:nth-child(3n)::after { display: block; }
  .firm .fcard--year .years li:nth-child(5n)::after,
  .firm .fcard--year .years li:last-child::after { display: none; }
}


/* Keep office markers visible above route strokes and separate labels from paths */
.firm .map__node {
  fill: var(--red-800);
  stroke: var(--white);
  stroke-width: 2.5;
}
.firm .map__label {
  paint-order: stroke fill;
  stroke: var(--white);
  stroke-width: 8px;
  stroke-linejoin: round;
}