*,*::before,*::after{box-sizing:border-box;border:0 solid}
html{-webkit-text-size-adjust:100%;line-height:1.5;font-family:ui-sans-serif,system-ui,sans-serif;tab-size:4}
body{margin:0;line-height:inherit}
hr{height:0;color:inherit;border-top-width:1px}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,[type=button],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}
:-moz-focusring{outline:auto}
progress{vertical-align:baseline}
summary{display:list-item}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}
fieldset{margin:0;padding:0}
legend{padding:0}
ol,ul,menu{list-style:none;margin:0;padding:0}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
button,[role=button]{cursor:pointer}
:disabled{cursor:default}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
[hidden]{display:none}
:root{--font-geist-sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-geist-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}


:root {
  --paper: #f4f2ed;
  --paper-bright: #fbfaf7;
  --ink: #11110f;
  /* 5.2:1 on --paper (WCAG 1.4.3 AA for body text) */
  --muted: #63645f;
  --line: rgba(17, 17, 15, 0.22);
  --acid: #d8ff3e;
  --blue: #0a46ff;
  --font-display: var(--font-geist-sans), Arial, sans-serif;
  --font-mono: var(--font-geist-mono), monospace;

  /*
   * Typography scale — WCAG 2.2 AA.
   *
   * Every size is rem-based so it follows the reader's own browser font
   * setting (SC 1.4.4 Resize Text). Two multipliers sit on top:
   *
   *   --fs-density  design-side tightening, set once by the team.
   *                 0.9 = 10% smaller than the natural scale.
   *   --fs-scale    reader-side control, driven by the accessibility
   *                 toolbar. Never edit this by hand.
   *
   * --fs-min is a hard floor: max() keeps every token at or above 14px no
   * matter how far --fs-density is turned down, so tightening the design
   * can never quietly reintroduce the unreadable 9-12px labels this scale
   * was built to remove. Lower --fs-min and that guarantee is gone.
   */
  --fs-scale: 1;
  --fs-density: 0.9;
  --fs-min: 0.875rem; /* 14px — the floor, do not lower */

  --fs-2xs: calc(max(var(--fs-min), 0.875rem * var(--fs-density)) * var(--fs-scale));   /* 14px  (at floor) */
  --fs-xs: calc(max(var(--fs-min), 0.9375rem * var(--fs-density)) * var(--fs-scale));   /* 14px  (at floor) */
  --fs-sm: calc(max(var(--fs-min), 1rem * var(--fs-density)) * var(--fs-scale));        /* 14.4px — labels, meta */
  --fs-md: calc(max(var(--fs-min), 1.0625rem * var(--fs-density)) * var(--fs-scale));   /* 15.3px */
  --fs-base: calc(max(var(--fs-min), 1.125rem * var(--fs-density)) * var(--fs-scale));  /* 16.2px — body copy */
  --fs-lg: calc(max(var(--fs-min), 1.1875rem * var(--fs-density)) * var(--fs-scale));   /* 17.1px */
  --fs-xl: calc(max(var(--fs-min), 1.25rem * var(--fs-density)) * var(--fs-scale));     /* 18px */
  --fs-2xl: calc(max(var(--fs-min), 1.375rem * var(--fs-density)) * var(--fs-scale));   /* 19.8px */
  --fs-3xl: calc(max(var(--fs-min), 1.5rem * var(--fs-density)) * var(--fs-scale));     /* 21.6px */
  --fs-4xl: calc(max(var(--fs-min), 1.875rem * var(--fs-density)) * var(--fs-scale));   /* 27px */
  --fs-5xl: calc(max(var(--fs-min), 2.125rem * var(--fs-density)) * var(--fs-scale));   /* 30.6px */

  /* Tracking for the uppercase mono labels. Wide tracking hurts
     legibility at reading sizes, so it tightens as text grows. */
  --track-label: 0.08em;
  --track-label-tight: 0.05em;

  /* Minimum pointer target (SC 2.5.8 Target Size Minimum = 24px;
     44px is the comfortable target used for real controls). */
  --target-min: 44px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Never lock the root to px — it would break browser font scaling. */
  font-size: 100%;
  /* Stop iOS from silently re-scaling text in landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  /* SC 1.4.12 Text Spacing — survives reader-injected spacing. */
  letter-spacing: normal;
  word-spacing: normal;
}

/* SC 2.4.7 / 2.4.11 — a focus ring that stays visible on every surface,
   including the acid-on-ink and photo-backed sections. */
:where(a, button, summary, select, details, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}

.dark-surface :where(a, button, summary, select, [tabindex]):focus-visible,
.audio-journey :where(a, button, summary, select, [tabindex]):focus-visible,
.cad-showcase :where(a, button, summary, select, [tabindex]):focus-visible,
.hero :where(a, button, summary, select, [tabindex]):focus-visible,
.site-footer :where(a, button, summary, select, [tabindex]):focus-visible {
  outline-color: var(--acid);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.85);
}

/* SC 2.5.8 Target Size — inline links and small controls are padded out
   to a comfortable pointer target without shifting the visual design. */
:where(nav a, .lang-switch button, .footer-meta a, .source-note a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  min-width: 24px;
}

.skip-link {
  background: var(--acid);
  color: var(--ink);
  font-weight: 700;
  left: 18px;
  padding: 12px 16px;
  position: fixed;
  top: 12px;
  transform: translateY(-160%);
  transition: transform 160ms ease;
  z-index: 100;
}

.skip-link:focus {
  transform: translateY(0);
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(244, 242, 237, 0.84);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 82px;
  justify-content: space-between;
  left: 0;
  padding: 0 40px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  display: flex;
  gap: 3px;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.brand-mark span {
  background: var(--acid);
  border-radius: 8px;
  height: 15px;
  width: 6px;
}

.brand-mark span:last-child {
  height: 9px;
}

.brand strong {
  display: block;
  font-size: var(--fs-xl);
  letter-spacing: -0.04em;
}

.brand small {
  color: var(--muted);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  margin-top: 2px;
  text-transform: uppercase;
}

nav {
  align-items: center;
  display: flex;
  gap: 28px;
}

nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.lang-switch {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  gap: 5px;
  letter-spacing: 0.08em;
}

.lang-switch button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  padding: 5px 2px;
}

.lang-switch button.active {
  color: var(--ink);
  font-weight: 700;
}

.lang-switch button:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 3px;
}

.nav-cta {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 10px 16px;
}

.hero {
  min-height: 100vh;
  overflow: hidden;
  padding: 138px 40px 42px;
  position: relative;
}

.hero-grid {
  background-image: linear-gradient(to right, rgba(17, 17, 15, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(17, 17, 15, 0.055) 1px, transparent 1px);
  background-size: 52px 52px;
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
  pointer-events: none;
  position: absolute;
}

.eyebrow,
.section-heading > span {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-eyebrow {
  align-items: center;
  display: flex;
  gap: 10px;
  position: relative;
}

.live-dot {
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(10, 70, 255, 0.1);
  height: 7px;
  width: 7px;
}

.hero-title-wrap {
  align-items: end;
  display: flex;
  justify-content: space-between;
  position: relative;
}

h1 {
  font-size: calc(clamp(78px, 11vw, 168px) * var(--fs-density) * var(--fs-scale));
  font-weight: 330;
  letter-spacing: -0.075em;
  line-height: 0.78;
  margin: 66px 0 0;
}

h1 em {
  color: var(--blue);
  font-style: normal;
  font-weight: 500;
}

.hero-index {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  padding-bottom: 9px;
}

.hero-bottom {
  align-items: end;
  display: grid;
  gap: 70px;
  grid-template-columns: minmax(260px, 0.65fr) 1.35fr;
  margin-top: 70px;
  position: relative;
}

.lede {
  font-size: calc(clamp(22px, 2vw, 29px) * var(--fs-density) * var(--fs-scale));
  font-weight: 430;
  letter-spacing: -0.035em;
  line-height: 1.24;
  margin: 0 0 38px;
  max-width: 570px;
}

.text-link {
  border-bottom: 1px solid var(--ink);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  gap: 18px;
  letter-spacing: 0.12em;
  padding-bottom: 8px;
  text-decoration: none;
  text-transform: uppercase;
}

.hero-actions {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
}

.hero-actions .text-link:first-child {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: white;
  gap: 10px;
  min-height: 48px;
  padding: 14px 18px;
}

.text-link-muted {
  margin-top: 14px;
}

.hero-collage {
  height: min(38vw, 520px);
  margin: 0;
  min-height: 390px;
  position: relative;
}

.hero-photo {
  height: 84%;
  left: 10%;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 80%;
}

.hero-photo::after {
  background: linear-gradient(125deg, transparent 60%, rgba(10, 70, 255, 0.25));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-photo img {
  filter: saturate(0.78) contrast(1.03);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.photo-tag {
  background: var(--acid);
  bottom: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  left: 0;
  letter-spacing: 0.1em;
  padding: 10px 14px;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}

.robot-crop {
  background: #fff;
  border: 8px solid var(--paper);
  bottom: 0;
  height: 44%;
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 38%;
  z-index: 3;
}

.robot-crop img {
  height: 100%;
  object-fit: cover;
  object-position: 52% 81%;
  transform: scale(1.65);
  width: 100%;
}

.signal-card {
  align-items: center;
  background: var(--ink);
  color: white;
  display: flex;
  flex-direction: column;
  height: 132px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 16%;
  width: 132px;
  z-index: 4;
}

.signal-card span,
.signal-card b {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.signal-card i {
  border: 1px solid var(--acid);
  border-radius: 50%;
  height: 20px;
  margin: -7px 0;
  width: 52px;
}

.signal-card i:nth-of-type(2) {
  width: 72px;
}

.signal-card i:nth-of-type(3) {
  margin-bottom: 3px;
  width: 92px;
}

.signal-card b {
  color: var(--acid);
}

.hero-stats {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 62px;
  padding-top: 24px;
  position: relative;
}

.hero-stats div {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.hero-stats div:first-child {
  border-left: 0;
  padding-left: 0;
}

.hero-stats strong {
  display: block;
  font-size: calc(clamp(30px, 3vw, 45px) * var(--fs-density) * var(--fs-scale));
  font-weight: 430;
  letter-spacing: -0.06em;
}

.hero-stats span {
  color: var(--muted);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  margin-top: 7px;
  text-transform: uppercase;
}

.section {
  padding: 140px 40px;
}

.section-heading {
  align-items: start;
  display: grid;
  gap: 40px;
  grid-template-columns: 0.5fr 1.5fr;
}

.section-heading h2 {
  font-size: calc(clamp(52px, 7vw, 100px) * var(--fs-density) * var(--fs-scale));
  font-weight: 350;
  letter-spacing: -0.065em;
  line-height: 0.95;
  margin: 0;
  max-width: 1040px;
}

.mission-copy {
  display: grid;
  gap: 50px;
  grid-template-columns: 1.5fr 0.5fr;
  margin-left: 25%;
  margin-top: 100px;
}

.mission-copy > p:first-child {
  font-size: calc(clamp(27px, 3.4vw, 52px) * var(--fs-density) * var(--fs-scale));
  letter-spacing: -0.045em;
  line-height: 1.13;
  margin: 0;
}

.caption {
  border-top: 1px solid var(--ink);
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.65;
  margin: 0;
  padding-top: 15px;
}

.technology {
  background: var(--ink);
  color: white;
}

.section-heading.light > span {
  color: var(--acid);
}

.tech-flow {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 100px;
}

.tech-flow article {
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  min-height: 340px;
  padding: 24px;
  position: relative;
}

.tech-flow article:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.tech-num {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.tech-flow h3 {
  font-size: calc(clamp(30px, 3vw, 44px) * var(--fs-density) * var(--fs-scale));
  font-weight: 430;
  letter-spacing: -0.05em;
  margin: 95px 0 20px;
}

.tech-flow p {
  color: #b6b7b2;
  font-size: var(--fs-base);
  line-height: 1.6;
  margin: 0;
}

.research {
  background: var(--paper-bright);
}

.research-layout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: 1.1fr 0.9fr;
  margin-top: 100px;
}

.research-visual {
  margin: 0;
  overflow: hidden;
  position: relative;
}

.research-visual img {
  aspect-ratio: 4 / 3;
  filter: saturate(0.8) contrast(1.02);
  object-fit: cover;
  object-position: center 72%;
  width: 100%;
}

.research-visual figcaption {
  background: var(--paper-bright);
  bottom: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  left: 0;
  letter-spacing: 0.1em;
  padding: 12px 16px;
  position: absolute;
  text-transform: uppercase;
}

.paper-card {
  background: white;
  border: 1px solid var(--line);
  min-height: 100%;
  padding: 28px;
}

.paper-topline {
  border-bottom: 1px solid var(--ink);
  display: flex;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  justify-content: space-between;
  letter-spacing: 0.1em;
  padding-bottom: 16px;
  text-transform: uppercase;
}

.paper-card h3 {
  font-size: calc(clamp(26px, 2.6vw, 38px) * var(--fs-density) * var(--fs-scale));
  font-weight: 430;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 52px 0 28px;
}

.paper-card > p {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.65;
  margin: 0;
}

.paper-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 62px;
}

.paper-metrics div {
  background: var(--ink);
  color: white;
  min-height: 150px;
  padding: 18px;
}

.paper-metrics strong {
  color: var(--acid);
  display: block;
  font-size: calc(clamp(32px, 3vw, 46px) * var(--fs-density) * var(--fs-scale));
  font-weight: 430;
  letter-spacing: -0.06em;
}

.paper-metrics span {
  color: #b6b8b1;
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin-top: 40px;
  text-transform: uppercase;
}

.prototype-section {
  background: var(--paper-bright);
  padding: 0 40px 140px;
}

.prototype-media {
  height: min(67vw, 820px);
  min-height: 600px;
  overflow: hidden;
  position: relative;
}

.prototype-media::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 50%);
  content: "";
  inset: 0;
  position: absolute;
}

.prototype-media > img {
  filter: saturate(0.75);
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.prototype-label {
  bottom: 36px;
  color: white;
  display: flex;
  flex-direction: column;
  left: 36px;
  position: absolute;
  z-index: 2;
}

.prototype-label span,
.prototype-note > span,
.specs-intro > span,
.impact-kicker,
.contact-section > span,
.source-note > span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prototype-label strong {
  font-size: calc(clamp(43px, 6vw, 86px) * var(--fs-density) * var(--fs-scale));
  font-weight: 350;
  letter-spacing: -0.065em;
  margin-top: 14px;
}

.prototype-copy {
  display: grid;
  gap: 80px;
  grid-template-columns: 1.4fr 0.6fr;
  margin-left: 25%;
  padding-top: 70px;
}

.prototype-copy > p {
  font-size: calc(clamp(27px, 3.4vw, 48px) * var(--fs-density) * var(--fs-scale));
  letter-spacing: -0.045em;
  line-height: 1.13;
  margin: 0;
}

.prototype-note {
  border-top: 1px solid var(--ink);
  padding-top: 14px;
}

.prototype-note p {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.6;
  margin: 26px 0 0;
}

.specs {
  display: grid;
  gap: 8vw;
  grid-template-columns: 0.75fr 1.25fr;
}

.specs-intro h2 {
  font-size: calc(clamp(52px, 5.5vw, 82px) * var(--fs-density) * var(--fs-scale));
  font-weight: 350;
  letter-spacing: -0.065em;
  line-height: 0.95;
  margin: 44px 0 30px;
}

.specs-intro > p {
  color: var(--muted);
  font-size: var(--fs-lg);
  line-height: 1.7;
  max-width: 530px;
}

.spec-table {
  border-top: 1px solid var(--ink);
}

.spec-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 30px;
  grid-template-columns: 0.75fr 1.25fr 30px;
  min-height: 92px;
}

.spec-row span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.spec-row strong {
  font-size: calc(clamp(22px, 2vw, 25px) * var(--fs-density) * var(--fs-scale));
  font-weight: 480;
  letter-spacing: -0.03em;
}

.spec-row i {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-style: normal;
  text-align: right;
}

.impact {
  background: var(--blue);
  color: white;
}

.impact-kicker {
  color: var(--acid);
}

.impact-headline {
  margin-top: 80px;
}

.impact-headline p {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.impact-headline h2 {
  font-size: calc(clamp(60px, 9vw, 130px) * var(--fs-density) * var(--fs-scale));
  font-weight: 360;
  letter-spacing: -0.075em;
  line-height: 0.87;
  margin: 0;
  max-width: 1100px;
}

.impact-grid {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 120px;
  padding-top: 28px;
}

.impact-stat strong {
  color: var(--acid);
  display: block;
  font-size: calc(clamp(76px, 10vw, 150px) * var(--fs-density) * var(--fs-scale));
  font-weight: 430;
  letter-spacing: -0.08em;
  line-height: 0.85;
}

.impact-stat span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  margin-top: 18px;
  text-transform: uppercase;
}

.impact-statement {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding-left: 40px;
}

.impact-statement p {
  font-size: calc(clamp(22px, 2.4vw, 34px) * var(--fs-density) * var(--fs-scale));
  letter-spacing: -0.035em;
  line-height: 1.25;
  margin: 0;
}

.journey {
  background: var(--paper-bright);
}

.timeline {
  border-top: 1px solid var(--ink);
  list-style: none;
  margin: 100px 0 0 25%;
  padding: 0;
}

.timeline li {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 50px;
  grid-template-columns: 0.5fr 1.5fr;
  min-height: 210px;
  padding: 28px 0;
}

.timeline time {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.timeline li span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.timeline h3 {
  font-size: calc(clamp(28px, 3vw, 45px) * var(--fs-density) * var(--fs-scale));
  font-weight: 430;
  letter-spacing: -0.045em;
  margin: 25px 0 12px;
}

.timeline p {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.6;
  margin: 0;
}

.contact-section {
  background: var(--ink);
  color: white;
  padding: 150px 40px;
}

.contact-section > span {
  color: var(--acid);
}

.contact-section h2 {
  font-size: calc(clamp(65px, 10vw, 150px) * var(--fs-density) * var(--fs-scale));
  font-weight: 350;
  letter-spacing: -0.075em;
  line-height: 0.82;
  margin: 84px 0 90px;
}

.contact-section h2 em {
  color: var(--acid);
  font-style: normal;
  font-weight: 450;
}

.contact-section > a {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  gap: 28px;
  letter-spacing: 0.1em;
  padding: 18px 24px;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer {
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  display: grid;
  gap: 70px;
  grid-template-columns: 1fr 1fr;
  padding: 60px 40px 28px;
}

.footer-brand {
  align-items: center;
  display: flex;
  gap: 14px;
}

.footer-brand .brand-mark {
  background: white;
}

.footer-brand strong {
  display: block;
  font-size: var(--fs-3xl);
  letter-spacing: -0.04em;
}

.footer-brand small {
  color: #b5b7af;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.source-note {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.source-note > span {
  color: #b5b7af;
  margin-bottom: 6px;
}

.source-note a {
  color: white;
  font-size: var(--fs-md);
  text-decoration: none;
}

.footer-meta {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #b5b7af;
  display: flex;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  grid-column: 1 / -1;
  justify-content: space-between;
  letter-spacing: 0.06em;
  padding-top: 26px;
  text-transform: uppercase;
}

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

.cad-showcase {
  background: #10110f;
  color: white;
  overflow: hidden;
}

.cad-intro {
  align-items: end;
  display: grid;
  gap: 8vw;
  grid-template-columns: 1.2fr 0.8fr;
}

.cad-intro .eyebrow {
  color: var(--acid);
  display: block;
}

.cad-intro h2 {
  font-size: calc(clamp(63px, 8.5vw, 126px) * var(--fs-density) * var(--fs-scale));
  font-weight: 350;
  letter-spacing: -0.075em;
  line-height: 0.88;
  margin: 48px 0 0;
}

.cad-intro > p {
  color: #c5c7c0;
  font-size: calc(clamp(22px, 2vw, 27px) * var(--fs-density) * var(--fs-scale));
  letter-spacing: -0.025em;
  line-height: 1.42;
  margin: 0;
  max-width: 620px;
}

.cad-console {
  border: 1px solid rgba(255, 255, 255, 0.22);
  margin-top: 90px;
}

.cad-console-bar {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: #b8bab4;
  display: flex;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  justify-content: space-between;
  letter-spacing: 0.1em;
  min-height: 48px;
  padding: 0 18px;
  text-transform: uppercase;
}

.cad-console-bar span:first-child {
  color: var(--acid);
}

.cad-stage {
  background: #080b0d;
  height: min(56vw, 720px);
  min-height: 620px;
  overflow: hidden;
  position: relative;
}

.cad-stage::after {
  background:
    linear-gradient(90deg, rgba(216, 255, 62, 0.22) 1px, transparent 1px) 12px 12px / 54px 1px no-repeat,
    linear-gradient(rgba(216, 255, 62, 0.22) 1px, transparent 1px) 12px 12px / 1px 54px no-repeat,
    linear-gradient(270deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px) calc(100% - 12px) calc(100% - 12px) / 54px 1px no-repeat,
    linear-gradient(0deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px) calc(100% - 12px) calc(100% - 12px) / 1px 54px no-repeat,
    radial-gradient(circle at 50% 44%, transparent 42%, rgba(2, 4, 5, 0.3) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.cad-webgl {
  height: 100%;
  inset: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.cad-engine-host {
  height: 100%;
  width: 100%;
}

.cad-canvas {
  cursor: grab;
  display: block;
  height: 100%;
  outline: none;
  touch-action: none;
  width: 100%;
}

.cad-canvas:active {
  cursor: grabbing;
}

.cad-loader {
  align-items: center;
  background: radial-gradient(circle at 50% 46%, #262922 0, #171815 58%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 3;
}

.cad-loader-ring {
  animation: cad-loader-spin 1.1s linear infinite;
  border: 1px solid rgba(216, 255, 62, 0.24);
  border-radius: 50%;
  border-top-color: var(--acid);
  height: 42px;
  margin-bottom: 8px;
  width: 42px;
}

.cad-loader strong {
  font-size: var(--fs-lg);
  font-weight: 480;
  letter-spacing: -0.02em;
}

.cad-loader small {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
}

.cad-loader-failed img {
  filter: brightness(0.62) saturate(0.72);
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.cad-fallback-note {
  align-items: flex-start;
  backdrop-filter: blur(16px);
  background: rgba(8, 11, 13, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 2px solid var(--acid);
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  left: 18px;
  max-width: 360px;
  padding: 16px;
  position: absolute;
}

.cad-fallback-note strong {
  font-size: var(--fs-base);
}

.cad-fallback-note small {
  color: #b8bab4;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.cad-fallback-note button {
  background: var(--acid);
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.07em;
  margin-top: 4px;
  min-height: 36px;
  padding: 0 12px;
  text-transform: uppercase;
}

.cad-view-hint {
  display: flex;
  gap: 8px;
  pointer-events: none;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 5;
}

.cad-view-hint span {
  backdrop-filter: blur(10px);
  background: rgba(16, 17, 15, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #d3d5cf;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  padding: 8px 10px;
  text-transform: uppercase;
}

@keyframes cad-loader-spin {
  to { transform: rotate(360deg); }
}

.cad-grid {
  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: 48px 48px;
  inset: 0;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  position: absolute;
}

.cad-orbit {
  border: 1px solid rgba(216, 255, 62, 0.18);
  border-radius: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.cad-orbit-one {
  height: 48%;
  width: 58%;
}

.cad-orbit-two {
  height: 75%;
  width: 86%;
}

.cad-main-assembly,
.cad-node,
.cad-part-grid button {
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.cad-main-assembly {
  background: white;
  border: 1px solid transparent;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  left: 50%;
  padding: 0;
  position: absolute;
  top: 48%;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease;
  width: min(27vw, 330px);
  z-index: 3;
}

.cad-main-assembly.selected {
  border-color: var(--acid);
}

.cad-main-assembly img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100%;
}

.cad-main-assembly span {
  background: var(--acid);
  bottom: -1px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  left: -1px;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  position: absolute;
  text-transform: uppercase;
}

.cad-node {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.28);
  padding: 0;
  position: absolute;
  transition: left 520ms cubic-bezier(0.2, 0.8, 0.2, 1), top 520ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease;
  width: clamp(112px, 13vw, 176px);
  z-index: 4;
}

.cad-node:hover,
.cad-node.selected {
  border-color: var(--acid);
}

.cad-node img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100%;
}

.cad-node strong {
  background: #262722;
  color: white;
  display: block;
  font-size: var(--fs-xs);
  font-weight: 520;
  line-height: 1.3;
  padding: 9px 10px;
  text-align: left;
}

.cad-node-index {
  background: var(--blue);
  color: white;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  left: -1px;
  padding: 6px 8px;
  position: absolute;
  top: -1px;
  z-index: 2;
}

.cad-readout {
  backdrop-filter: blur(12px);
  background: rgba(16, 17, 15, 0.76);
  border-left: 2px solid var(--acid);
  bottom: 18px;
  display: flex;
  flex-direction: column;
  left: 18px;
  max-width: 310px;
  padding: 13px 15px;
  pointer-events: none;
  position: absolute;
  z-index: 6;
}

.cad-readout > span,
.cad-readout code {
  color: #aeb0a9;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cad-readout strong {
  font-size: var(--fs-3xl);
  font-weight: 470;
  letter-spacing: -0.025em;
  margin: 7px 0 5px;
}

.cad-readout small {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cad-readout code {
  line-height: 1.45;
  margin-top: 13px;
  text-transform: none;
}

.cad-inspector {
  animation: cad-inspector-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(20px);
  background: rgba(8, 11, 13, 0.91);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 2px solid var(--acid);
  bottom: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58);
  color: white;
  max-height: calc(100% - 36px);
  overflow-y: auto;
  padding: 22px;
  position: absolute;
  right: 18px;
  width: min(400px, calc(100% - 36px));
  z-index: 8;
}

.cad-inspector-close {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  cursor: pointer;
  display: flex;
  font-size: var(--fs-3xl);
  height: 34px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 34px;
}

.cad-inspector-close:hover,
.cad-inspector-close:focus-visible {
  border-color: var(--acid);
  color: var(--acid);
}

.cad-inspector-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-right: 44px;
}

.cad-inspector-status span,
.cad-inspector-status code {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cad-inspector-status span {
  color: var(--acid);
}

.cad-inspector-status code {
  color: #b0b7b5;
  overflow-wrap: anywhere;
}

.cad-inspector h3 {
  font-size: calc(clamp(28px, 3vw, 40px) * var(--fs-density) * var(--fs-scale));
  font-weight: 440;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 24px 0 14px;
}

.cad-inspector-description {
  color: #d2d6d3;
  font-size: var(--fs-base);
  line-height: 1.55;
  margin: 0 0 20px;
}

.cad-inspector-voice {
  align-items: center;
  background: var(--acid);
  border: 1px solid var(--acid);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  gap: 9px;
  letter-spacing: 0.06em;
  margin: 0 0 20px;
  min-height: 42px;
  padding: 0 14px;
  text-transform: uppercase;
}

.cad-inspector-voice:focus-visible {
  outline-color: white;
}

.cad-inspector dl {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin: 0;
}

.cad-inspector dl > div {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 16px;
  grid-template-columns: 102px 1fr;
  padding: 13px 0;
}

.cad-inspector dt {
  color: #b0b7b5;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.cad-inspector dd {
  color: #f2f4ef;
  font-size: var(--fs-md);
  line-height: 1.5;
  margin: 0;
}

.cad-inspector-file {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.cad-inspector-file code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.cad-inspector-file span {
  border: 1px solid rgba(216, 255, 62, 0.45);
  color: var(--acid);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  padding: 4px 6px;
}

.cad-inspector > small {
  color: #b0b7b5;
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: 16px;
}

@keyframes cad-inspector-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cad-controls {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  gap: 40px;
  justify-content: space-between;
  min-height: 82px;
  padding: 14px 18px;
}

.cad-controls p {
  color: #b8bab4;
  font-size: var(--fs-base);
  margin: 0;
}

.cad-control-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  min-width: min(100%, 520px);
}

.cad-control-actions button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  min-height: 40px;
  padding: 0 18px;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.cad-control-actions button:hover,
.cad-control-actions button:focus-visible {
  border-color: var(--acid);
  color: var(--acid);
}

.cad-control-actions button.active,
.cad-control-actions button.active:hover,
.cad-control-actions button.active:focus-visible {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
}

.cad-control-actions button:disabled {
  cursor: default;
  opacity: 1;
}

.cad-control-actions .cad-reset-view {
  border-color: rgba(255, 255, 255, 0.2);
  color: #b8bab4;
}

.cad-control-actions .cad-audio-description[aria-pressed="true"] {
  border-color: var(--acid);
  color: var(--acid);
}

/* Multisensory audio journey */
.audio-journey {
  background:
    radial-gradient(circle at 84% 15%, rgba(10, 70, 255, 0.36), transparent 34%),
    linear-gradient(145deg, #050a10, #071622 56%, #05090d);
  color: white;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.audio-ambient {
  align-items: center;
  display: flex;
  gap: 7px;
  height: 38%;
  opacity: 0.32;
  pointer-events: none;
  position: absolute;
  right: -2%;
  top: 3%;
  transform: rotate(-8deg);
  width: 56%;
}

.audio-ambient::after {
  background: radial-gradient(circle, rgba(216, 255, 62, 0.34), transparent 66%);
  content: "";
  filter: blur(12px);
  inset: 20% 18%;
  position: absolute;
}

.audio-ambient i {
  background: linear-gradient(to top, rgba(216, 255, 62, 0.16), var(--acid), rgba(255,255,255,0.5));
  border-radius: 99px;
  flex: 1;
  height: 22%;
  transform-origin: center;
}

.audio-ambient i:nth-child(3n) { height: 78%; }
.audio-ambient i:nth-child(4n) { height: 46%; }
.audio-ambient i:nth-child(5n) { height: 92%; }
.audio-ambient i:nth-child(7n) { height: 30%; }

.audio-heading {
  display: grid;
  gap: 38px 7vw;
  grid-template-columns: 0.58fr 1.42fr;
  position: relative;
  z-index: 2;
}

.audio-heading > span,
.accessible-heading > span {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.audio-heading h2,
.accessible-heading h2 {
  font-size: calc(clamp(56px, 7.8vw, 112px) * var(--fs-density) * var(--fs-scale));
  font-weight: 350;
  letter-spacing: -0.07em;
  line-height: 0.93;
  margin: 0;
  max-width: 980px;
}

.audio-heading p,
.accessible-heading > p {
  color: #bec8cd;
  font-size: calc(clamp(22px, 2vw, 26px) * var(--fs-density) * var(--fs-scale));
  grid-column: 2;
  line-height: 1.5;
  margin: 0;
  max-width: 760px;
}

.audio-console {
  backdrop-filter: blur(18px);
  background: rgba(4, 10, 15, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.42);
  margin-top: 90px;
  padding: 26px;
  position: relative;
  z-index: 3;
}

.audio-now {
  display: flex;
  flex-direction: column;
}

.audio-now > span,
.audio-now small {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.audio-now strong {
  font-size: calc(clamp(32px, 4.2vw, 64px) * var(--fs-density) * var(--fs-scale));
  font-weight: 420;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 22px 0 13px;
  max-width: 940px;
}

.audio-now small { color: #abb6bc; }

.audio-progress {
  background: rgba(255, 255, 255, 0.15);
  height: 3px;
  margin: 34px 0 22px;
  overflow: hidden;
}

.audio-progress span {
  background: var(--acid);
  display: block;
  height: 100%;
  transition: width 240ms ease;
}

.audio-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.audio-controls button,
.audio-controls select {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  min-height: 44px;
}

.audio-controls button {
  padding: 0 16px;
}

.audio-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.audio-controls .audio-primary {
  align-items: center;
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
  display: inline-flex;
  font-weight: 700;
  gap: 10px;
  min-width: 190px;
}

.audio-controls label {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  margin-left: auto;
}

.audio-controls label > span {
  color: #acb8bd;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audio-controls select {
  padding: 0 10px;
}

.audio-controls select option { color: var(--ink); }

.audio-warning {
  border-left: 2px solid var(--acid);
  color: #d8dddf;
  font-size: var(--fs-md);
  line-height: 1.6;
  padding-left: 14px;
}

.audio-chapters {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.audio-chapters li { background: rgba(255, 255, 255, 0.08); }
.audio-chapters li.active { background: rgba(216, 255, 62, 0.12); }

.audio-chapters button {
  align-items: flex-start;
  background: transparent;
  border: 1px solid transparent;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 142px;
  padding: 18px;
  text-align: left;
  width: 100%;
}

.audio-chapters button > span {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

.audio-chapters button strong {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.35;
}

.audio-transcript {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 26px;
  padding-top: 22px;
}

.audio-transcript summary {
  color: var(--acid);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audio-transcript > div {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 28px;
}

.audio-transcript article {
  border-left: 1px solid rgba(255,255,255,0.22);
  padding: 8px 20px;
}

.audio-transcript article > span {
  color: #abb6bc;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
}

.audio-transcript h3 {
  font-size: var(--fs-3xl);
  font-weight: 500;
  margin: 13px 0 10px;
}

.audio-transcript p {
  color: #c4ccd0;
  font-size: var(--fs-base);
  line-height: 1.7;
  margin: 0;
}

/* Braille and tactile project kit */
.accessibility-kit {
  background: #cfff2f;
  color: var(--ink);
}

.accessible-heading {
  display: grid;
  gap: 38px 7vw;
  grid-template-columns: 0.58fr 1.42fr;
}

.accessible-heading > span { color: var(--blue); }
.accessible-heading > p { color: #3f432f; }

.accessible-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.15fr 0.85fr;
  margin-top: 86px;
}

.braille-card,
.tactile-card {
  background: var(--ink);
  color: white;
  min-height: 620px;
  overflow: hidden;
  padding: 32px;
  position: relative;
}

.braille-card > span,
.tactile-card > span {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.braille-card h3,
.tactile-card h3 {
  font-size: calc(clamp(37px, 4vw, 60px) * var(--fs-density) * var(--fs-scale));
  font-weight: 390;
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 34px 0 22px;
  max-width: 660px;
}

.braille-card > p {
  color: #b9bcb5;
  font-size: var(--fs-lg);
  line-height: 1.7;
  max-width: 640px;
}

.braille-dots {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, 18px);
  opacity: 0.3;
  position: absolute;
  right: 38px;
  top: 34px;
}

.braille-dots i {
  background: var(--acid);
  border-radius: 50%;
  box-shadow: -4px 6px 8px rgba(0,0,0,0.7), inset 3px -3px 4px rgba(0,0,0,0.4), inset -2px 2px 4px rgba(255,255,255,0.5);
  height: 18px;
  width: 18px;
}

.braille-dots i:nth-child(2),
.braille-dots i:nth-child(5),
.braille-dots i:nth-child(8),
.braille-dots i:nth-child(11),
.braille-dots i:nth-child(13),
.braille-dots i:nth-child(18) { opacity: 0.14; }

.accessible-downloads {
  bottom: 32px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  left: 32px;
  position: absolute;
  right: 32px;
}

.accessible-downloads a,
.accessible-downloads button {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.26);
  color: white;
  cursor: pointer;
  display: flex;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  justify-content: space-between;
  min-height: 50px;
  padding: 0 15px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}

.accessible-downloads a:first-child {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
}

.tactile-card { background: var(--blue); }

.tactile-card ol {
  list-style: none;
  margin: 68px 0 0;
  padding: 0;
}

.tactile-card li {
  border-top: 1px solid rgba(255,255,255,0.28);
  display: grid;
  gap: 22px;
  grid-template-columns: 48px 1fr;
  padding: 20px 0;
}

.tactile-card li > strong {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.tactile-card h4 {
  font-size: var(--fs-2xl);
  font-weight: 520;
  margin: 0 0 6px;
}

.tactile-card li p {
  color: #d3dcff;
  font-size: var(--fs-md);
  line-height: 1.55;
  margin: 0;
}

.accessible-note {
  align-items: flex-start;
  border-top: 1px solid rgba(17,17,15,0.4);
  display: flex;
  font-size: var(--fs-md);
  gap: 14px;
  line-height: 1.65;
  margin: 34px 0 0;
  max-width: 980px;
  padding-top: 18px;
}

.accessible-note span { color: var(--blue); font-size: var(--fs-xs); margin-top: 5px; }

.cad-control-actions output {
  align-items: flex-end;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  gap: 3px;
  min-width: 92px;
  padding-left: 14px;
}

.cad-control-actions output span {
  color: #b0b7b5;
  font-size: var(--fs-2xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cad-control-actions output strong {
  color: var(--acid);
  font-size: var(--fs-sm);
  font-weight: 520;
}

.cad-facts {
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 70px;
}

.cad-facts div {
  border-right: 1px solid rgba(255, 255, 255, 0.24);
  padding: 25px 22px 28px;
}

.cad-facts div:last-child {
  border-right: 0;
}

.cad-facts strong {
  color: var(--acid);
  display: block;
  font-size: calc(clamp(45px, 5vw, 72px) * var(--fs-density) * var(--fs-scale));
  font-weight: 430;
  letter-spacing: -0.06em;
}

.cad-facts span {
  color: #b6b8b1;
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  margin-top: 5px;
  text-transform: uppercase;
}

.cad-layers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 70px;
}

.cad-layers article {
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  min-height: 220px;
  padding: 20px;
}

.cad-layers article:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.24);
}

.cad-layers h3 {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.cad-layers p {
  color: #b8bab4;
  font-size: var(--fs-lg);
  line-height: 1.65;
  margin: 68px 0 0;
}

.cad-archive {
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  margin-top: 90px;
  padding-top: 24px;
}

.cad-archive summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.cad-archive summary::-webkit-details-marker {
  display: none;
}

.cad-archive summary span {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cad-archive summary strong {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding-bottom: 6px;
  text-transform: uppercase;
}

.cad-archive > p {
  color: #b6b8b1;
  font-size: var(--fs-base);
  line-height: 1.65;
  margin: 24px 0 34px;
  max-width: 720px;
}

.cad-part-grid {
  display: grid;
  gap: 12px;
  grid-auto-columns: minmax(220px, 250px);
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  overflow-x: auto;
  padding-bottom: 18px;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--acid) #292a25;
}

.cad-part-grid button {
  background: #f4f2ed;
  border: 1px solid transparent;
  color: var(--ink);
  min-height: 330px;
  padding: 0 15px 16px;
  position: relative;
  scroll-snap-align: start;
  text-align: left;
}

.cad-part-grid button:hover,
.cad-part-grid button.selected {
  border-color: var(--acid);
}

.cad-part-grid img {
  aspect-ratio: 4 / 3;
  margin: 0 -15px 12px;
  object-fit: contain;
  width: calc(100% + 30px);
}

.cad-part-num {
  background: var(--blue);
  color: white;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  left: 0;
  padding: 7px 9px;
  position: absolute;
  top: 0;
  z-index: 2;
}

.cad-part-meta {
  display: flex;
  gap: 8px;
}

.cad-part-meta i,
.cad-part-grid small,
.cad-part-grid em {
  color: #6b6c67;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-style: normal;
  letter-spacing: 0.05em;
}

.cad-part-meta i:first-child {
  color: var(--blue);
}

.cad-part-grid strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 540;
  letter-spacing: -0.025em;
  margin: 12px 0 7px;
}

.cad-part-grid small {
  display: block;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cad-part-grid em {
  bottom: 14px;
  position: absolute;
  right: 15px;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .site-header {
    padding: 0 22px;
  }

  /* Scoped to the header nav: the breadcrumb is also a <nav>, and the bare
     element selector was hiding its link too. */
  #site-nav a:not(.nav-cta) {
    display: none;
  }

  .hero,
  .section {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero-bottom {
    gap: 44px;
    grid-template-columns: 1fr;
  }

  .audio-heading,
  .accessible-heading {
    grid-template-columns: 1fr;
  }

  .audio-heading p,
  .accessible-heading > p {
    grid-column: 1;
  }

  .audio-ambient {
    opacity: 0.2;
    width: 76%;
  }

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

  .braille-card,
  .tactile-card {
    min-height: 580px;
  }

  .hero-collage {
    height: 500px;
  }

  .section-heading {
    gap: 28px;
    grid-template-columns: 1fr;
  }

  .mission-copy {
    margin-left: 0;
  }

  .research-layout,
  .specs {
    grid-template-columns: 1fr;
  }

  .cad-intro {
    align-items: start;
    gap: 46px;
    grid-template-columns: 1fr;
  }

  .cad-stage {
    height: 720px;
  }

  .cad-main-assembly {
    width: 280px;
  }

  .cad-controls {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .cad-control-actions {
    width: 100%;
  }

  .cad-layers {
    grid-template-columns: repeat(2, 1fr);
  }

  .cad-layers article:nth-child(2) {
    border-right: 1px solid rgba(255, 255, 255, 0.24);
  }

  .prototype-copy {
    margin-left: 0;
  }

  .tech-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-flow article:nth-child(3) {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
  }
}

@media (max-width: 640px) {
  .site-header {
    height: 70px;
  }

  .brand small {
    display: none;
  }

  .nav-cta {
    padding: 9px 13px;
  }

  nav {
    gap: 16px;
  }

  .lang-switch {
    gap: 3px;
  }

  .hero {
    padding-top: 112px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .text-link {
    justify-content: space-between;
    margin-top: 0;
    width: 100%;
  }

  .audio-heading h2,
  .accessible-heading h2 {
    font-size: calc(clamp(52px, 15vw, 72px) * var(--fs-density) * var(--fs-scale));
  }

  .audio-console {
    margin-left: -22px;
    margin-right: -22px;
    margin-top: 60px;
    padding: 20px 14px;
  }

  .audio-controls label {
    margin-left: 0;
    width: 100%;
  }

  .audio-controls .audio-primary {
    flex: 1;
    min-width: 150px;
  }

  .audio-chapters {
    grid-template-columns: 1fr 1fr;
  }

  .audio-chapters button {
    min-height: 150px;
    padding: 14px;
  }

  .audio-transcript > div {
    grid-template-columns: 1fr;
  }

  .accessible-grid {
    margin-left: -22px;
    margin-right: -22px;
    margin-top: 60px;
  }

  .braille-card,
  .tactile-card {
    min-height: 640px;
    padding: 24px 20px;
  }

  .braille-dots {
    gap: 9px;
    grid-template-columns: repeat(6, 12px);
    right: 18px;
    top: 22px;
  }

  .braille-dots i {
    height: 12px;
    width: 12px;
  }

  .accessible-downloads {
    bottom: 20px;
    grid-template-columns: 1fr;
    left: 20px;
    right: 20px;
  }

  .tactile-card ol { margin-top: 48px; }

  .cad-intro h2 {
    margin-top: 34px;
  }

  .cad-console {
    margin-left: -22px;
    margin-right: -22px;
    margin-top: 60px;
  }

  .cad-console-bar {
    font-size: var(--fs-2xs);
    padding: 0 12px;
  }

  .cad-stage {
    height: 640px;
    min-height: 640px;
  }

  .cad-main-assembly {
    top: 47%;
    width: 190px;
  }

  .cad-main-assembly span {
    font-size: var(--fs-2xs);
    padding: 6px 7px;
  }

  .cad-node {
    width: 102px;
  }

  .cad-node strong {
    font-size: var(--fs-2xs);
    padding: 7px;
  }

  .cad-node-index {
    font-size: var(--fs-2xs);
    padding: 4px 6px;
  }

  .cad-readout {
    bottom: 11px;
    left: 11px;
    max-width: 230px;
    padding: 11px 12px;
  }

  .cad-readout strong {
    font-size: var(--fs-xl);
  }

  .cad-readout code {
    display: none;
  }

  .cad-inspector {
    bottom: 11px;
    max-height: calc(100% - 22px);
    padding: 18px;
    right: 11px;
    width: calc(100% - 22px);
  }

  .cad-inspector h3 {
    font-size: var(--fs-4xl);
  }

  .cad-inspector-description {
    font-size: var(--fs-md);
  }

  .cad-inspector dl > div {
    gap: 10px;
    grid-template-columns: 88px 1fr;
  }

  .cad-controls {
    padding: 14px 12px;
  }

  .cad-control-actions {
    gap: 8px;
  }

  .cad-control-actions button {
    font-size: var(--fs-2xs);
    padding: 0 9px;
  }

  .cad-control-actions output {
    align-items: flex-start;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    flex-basis: 100%;
    padding-left: 0;
    padding-top: 10px;
  }

  .cad-fallback-note {
    bottom: 11px;
    left: 11px;
    max-width: calc(100% - 22px);
  }

  .cad-facts {
    margin-top: 55px;
  }

  .cad-facts div {
    padding: 20px 10px 22px;
  }

  .cad-facts span {
    font-size: var(--fs-2xs);
    line-height: 1.4;
  }

  .cad-layers {
    grid-template-columns: 1fr;
    margin-top: 55px;
  }

  .cad-layers article,
  .cad-layers article:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    border-right: 1px solid rgba(255, 255, 255, 0.24);
    min-height: 180px;
  }

  .cad-layers p {
    font-size: var(--fs-base);
    margin-top: 48px;
  }

  .cad-view-hint {
    left: 11px;
    right: auto;
    top: 11px;
  }

  .cad-view-hint span {
    font-size: var(--fs-2xs);
    padding: 7px 8px;
  }

  .cad-view-hint span:nth-child(2),
  .cad-view-hint span:nth-child(3) {
    display: none;
  }

  .cad-archive {
    margin-top: 70px;
  }

  .cad-archive summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .cad-part-grid {
    grid-auto-columns: minmax(205px, 225px);
    grid-template-rows: 1fr;
  }

  h1 {
    font-size: calc(clamp(65px, 20vw, 98px) * var(--fs-density) * var(--fs-scale));
    margin-top: 48px;
  }

  .hero-index {
    display: none;
  }

  .hero-collage {
    height: 430px;
    min-height: 0;
  }

  .hero-photo {
    height: 78%;
    left: 0;
    width: 94%;
  }

  .signal-card {
    height: 105px;
    top: 59%;
    width: 105px;
  }

  .signal-card i:nth-of-type(3) {
    width: 72px;
  }

  .robot-crop {
    height: 42%;
    width: 52%;
  }

  .hero-stats {
    gap: 28px 0;
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stats div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .section {
    padding-bottom: 96px;
    padding-top: 96px;
  }

  .mission-copy {
    grid-template-columns: 1fr;
    margin-top: 60px;
  }

  .tech-flow {
    grid-template-columns: 1fr;
    margin-top: 60px;
  }

  .tech-flow article,
  .tech-flow article:nth-child(3) {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    min-height: 260px;
  }

  .tech-flow h3 {
    margin-top: 60px;
  }

  .research-layout {
    margin-top: 60px;
  }

  .paper-card {
    padding: 22px;
  }

  .paper-card h3 {
    margin-top: 38px;
  }

  .paper-metrics {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }

  .prototype-section {
    padding: 0 22px 96px;
  }

  .prototype-media {
    height: 78vh;
    min-height: 560px;
  }

  .prototype-media > img {
    object-position: 48% center;
  }

  .prototype-label {
    bottom: 22px;
    left: 22px;
    right: 22px;
  }

  .prototype-copy {
    gap: 50px;
    grid-template-columns: 1fr;
    padding-top: 54px;
  }

  .spec-row {
    gap: 12px;
    grid-template-columns: 0.8fr 1.2fr 22px;
    min-height: 108px;
  }

  .impact-grid {
    gap: 60px;
    grid-template-columns: 1fr;
    margin-top: 80px;
  }

  .impact-statement {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding-left: 0;
    padding-top: 30px;
  }

  .timeline {
    margin-left: 0;
    margin-top: 60px;
  }

  .timeline li {
    gap: 22px;
    grid-template-columns: 0.55fr 1.45fr;
  }

  .contact-section {
    padding: 110px 22px;
  }

  .contact-section h2 {
    margin: 65px 0 75px;
  }

  .site-footer {
    gap: 48px;
    grid-template-columns: 1fr;
    padding-left: 22px;
    padding-right: 22px;
  }

  .footer-meta {
    align-items: start;
    flex-direction: column;
    gap: 12px;
  }
}

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  @page { margin: 18mm; }

  body {
    background: white;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 16pt;
  }

  .site-header,
  .skip-link,
  main > section:not(.accessibility-kit),
  .site-footer,
  .accessible-downloads,
  .braille-dots {
    display: none !important;
  }

  .accessibility-kit {
    background: white;
    color: black;
    display: block !important;
    padding: 0;
  }

  .accessible-heading,
  .accessible-grid {
    display: block;
  }

  .accessible-heading > span,
  .accessible-heading > p {
    color: black;
  }

  .accessible-heading h2 {
    font-size: 40pt;
    margin: 14mm 0 8mm;
  }

  .accessible-heading > p {
    font-size: 18pt;
    line-height: 1.55;
  }

  .braille-card,
  .tactile-card {
    background: white;
    border-top: 2px solid black;
    color: black;
    min-height: 0;
    padding: 10mm 0;
  }

  .braille-card > span,
  .tactile-card > span,
  .braille-card > p,
  .tactile-card li > strong,
  .tactile-card li p {
    color: black;
  }

  .braille-card h3,
  .tactile-card h3 { font-size: 28pt; }
  .braille-card > p,
  .tactile-card li p,
  .accessible-note { font-size: 16pt; }
}

/* Documentary image direction: real photography, soft field blur, sharp story focus. */
.site-header {
  background: rgba(9, 11, 12, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.17);
  color: white;
}

.site-header .brand-mark {
  background: white;
}

.site-header .brand small,
.site-header .lang-switch button {
  color: rgba(255, 255, 255, 0.66);
}

.site-header .lang-switch button.active {
  color: white;
}

.site-header .nav-cta {
  border-color: rgba(255, 255, 255, 0.72);
}

.hero {
  background: #090b0c;
  color: white;
  min-height: max(780px, 100svh);
  padding-bottom: 36px;
  padding-top: 126px;
}

.hero-backdrop,
.hero-scrim {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-backdrop {
  overflow: hidden;
  z-index: 0;
}

.hero-image {
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  position: absolute;
  width: 100%;
}

.hero-image-blur {
  filter: blur(18px) brightness(0.38) saturate(0.62);
  transform: scale(1.08);
}

.hero-image-focus {
  filter: brightness(0.7) contrast(1.08) saturate(0.9);
  mask-image: radial-gradient(
    ellipse 50% 44% at 31% 43%,
    #000 0%,
    rgba(0, 0, 0, 0.98) 44%,
    rgba(0, 0, 0, 0.42) 69%,
    transparent 100%
  );
}

.hero-scrim {
  background:
    linear-gradient(90deg, rgba(3, 6, 8, 0.78) 0%, rgba(3, 6, 8, 0.28) 58%, rgba(3, 6, 8, 0.5) 100%),
    linear-gradient(0deg, rgba(3, 5, 7, 0.88) 0%, transparent 48%, rgba(3, 5, 7, 0.44) 100%);
  z-index: 1;
}

.hero .hero-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.065) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.065) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  z-index: 2;
}

.hero > :not(.hero-backdrop, .hero-scrim, .hero-grid) {
  position: relative;
  z-index: 3;
}

.hero-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.hero .live-dot {
  background: var(--acid);
  box-shadow: 0 0 0 6px rgba(216, 255, 62, 0.16);
}

.hero h1 {
  color: white;
  font-size: calc(clamp(82px, 10.3vw, 154px) * var(--fs-density) * var(--fs-scale));
  line-height: 0.8;
  margin-top: clamp(60px, 9vh, 104px);
  max-width: 1200px;
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.44);
}

.hero h1 em {
  color: var(--acid);
}

.hero .hero-index {
  color: rgba(255, 255, 255, 0.58);
}

.hero-bottom {
  align-items: end;
  gap: clamp(44px, 7vw, 100px);
  grid-template-columns: minmax(300px, 1.08fr) minmax(300px, 0.92fr);
  margin-top: clamp(54px, 8vh, 92px);
}

.hero .lede {
  color: white;
  font-size: calc(clamp(24px, 2.25vw, 34px) * var(--fs-density) * var(--fs-scale));
  line-height: 1.2;
  max-width: 720px;
  text-wrap: balance;
}

.hero .text-link {
  border-bottom-color: rgba(255, 255, 255, 0.74);
  color: white;
  font-size: var(--fs-sm);
}

.hero .hero-actions .text-link:first-child {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
}

.hero-field-note {
  backdrop-filter: blur(10px);
  background: rgba(5, 8, 10, 0.42);
  border-left: 3px solid var(--acid);
  display: grid;
  gap: 15px;
  justify-self: end;
  max-width: 480px;
  padding: 22px 24px;
}

.hero-field-note span,
.hero-field-note i {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero-field-note strong {
  font-size: calc(clamp(25px, 2.3vw, 34px) * var(--fs-density) * var(--fs-scale));
  font-weight: 430;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.hero-field-note i {
  color: var(--acid);
  font-size: var(--fs-2xs);
}

.hero .hero-stats {
  border-top-color: rgba(255, 255, 255, 0.3);
  margin-top: 54px;
}

.hero .hero-stats div {
  border-left-color: rgba(255, 255, 255, 0.24);
}

.hero .hero-stats strong {
  color: white;
}

.hero .hero-stats span {
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fs-xs);
}

.research-visual img {
  filter: saturate(0.92) contrast(1.05);
  object-position: center 56%;
}

.prototype-media {
  background: #080a0b;
}

.prototype-media > .prototype-image {
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

.prototype-image-blur {
  filter: blur(16px) brightness(0.38) saturate(0.7) !important;
  transform: scale(1.08);
}

.prototype-image-focus {
  filter: brightness(0.73) contrast(1.08) saturate(0.92) !important;
  mask-image: radial-gradient(
    ellipse 68% 51% at 37% 71%,
    #000 0%,
    rgba(0, 0, 0, 0.96) 46%,
    rgba(0, 0, 0, 0.36) 73%,
    transparent 100%
  );
}

.prototype-media::after {
  background:
    linear-gradient(to top, rgba(1, 3, 5, 0.84), transparent 58%),
    linear-gradient(90deg, rgba(1, 3, 5, 0.36), transparent 64%);
}

.prototype-label {
  max-width: 920px;
}

.prototype-label strong {
  color: white;
  font-size: calc(clamp(52px, 6.6vw, 96px) * var(--fs-density) * var(--fs-scale));
  line-height: 0.94;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.52);
}

.prototype-label span {
  color: var(--acid);
  font-size: var(--fs-sm);
}

@media (max-width: 960px) {
  .hero-bottom {
    grid-template-columns: 1fr;
  }

  .hero-field-note {
    justify-self: stretch;
    max-width: 640px;
  }

  .hero-image-focus {
    mask-image: radial-gradient(ellipse 70% 42% at 42% 39%, #000 0%, rgba(0, 0, 0, 0.94) 44%, transparent 100%);
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 940px;
    padding-bottom: 28px;
    padding-top: 106px;
  }

  .hero .hero-title-wrap {
    align-items: start;
  }

  .hero h1 {
    font-size: calc(clamp(63px, 18vw, 88px) * var(--fs-density) * var(--fs-scale));
    line-height: 0.84;
    margin-top: 52px;
  }

  .hero-bottom {
    gap: 30px;
    margin-top: 48px;
  }

  .hero .lede {
    font-size: var(--fs-2xl);
  }

  .hero-field-note {
    padding: 18px;
  }

  .hero-field-note strong {
    font-size: var(--fs-3xl);
  }

  .hero .hero-stats {
    margin-top: 36px;
  }

  .hero-image {
    object-position: 40% center;
  }

  .hero-image-focus {
    mask-image: radial-gradient(ellipse 88% 37% at 43% 34%, #000 0%, rgba(0, 0, 0, 0.92) 43%, transparent 100%);
  }

  .prototype-media {
    height: 74vh;
    min-height: 620px;
  }

  .prototype-media > .prototype-image {
    object-position: 48% center;
  }

  .prototype-image-focus {
    mask-image: radial-gradient(ellipse 92% 48% at 40% 73%, #000 0%, rgba(0, 0, 0, 0.95) 42%, transparent 100%);
  }
}

/* Immersive editorial system — larger type, continuous imagery, clearer UX. */
body {
  font-size: var(--fs-xl);
}

section[id] {
  scroll-margin-top: 82px;
}

.site-header {
  height: 86px;
}

.brand strong {
  font-size: var(--fs-2xl);
}

.brand small {
  font-size: var(--fs-xs);
}

nav a,
.lang-switch {
  font-size: var(--fs-sm);
}

.nav-cta,
.lang-switch button {
  min-height: 44px;
}

.section {
  padding-bottom: clamp(110px, 11vw, 180px);
  padding-top: clamp(110px, 11vw, 180px);
}

.eyebrow,
.section-heading > span,
.prototype-label span,
.prototype-note > span,
.specs-intro > span,
.impact-kicker,
.contact-section > span,
.source-note > span {
  font-size: var(--fs-sm);
}

.section-heading h2 {
  font-size: calc(clamp(65px, 8.4vw, 126px) * var(--fs-density) * var(--fs-scale));
  line-height: 0.9;
  max-width: 1180px;
  text-wrap: balance;
}

.hero h1 {
  font-size: calc(clamp(89px, 11vw, 172px) * var(--fs-density) * var(--fs-scale));
  text-shadow:
    0 3px 3px rgba(0, 0, 0, 0.34),
    0 18px 52px rgba(0, 0, 0, 0.72);
}

.hero h1 em {
  display: inline-block;
  text-shadow:
    0 0 32px rgba(216, 255, 62, 0.2),
    0 20px 54px rgba(0, 0, 0, 0.78);
}

.hero .lede {
  font-size: calc(clamp(26px, 2.55vw, 38px) * var(--fs-density) * var(--fs-scale));
  max-width: 790px;
}

.hero-field-note strong {
  font-size: calc(clamp(28px, 2.6vw, 39px) * var(--fs-density) * var(--fs-scale));
}

.hero .hero-stats span,
.hero-field-note span,
.hero-field-note i {
  font-size: var(--fs-sm);
}

.immersive-mission {
  background: #080b0c;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(820px, 100svh);
  overflow: hidden;
  position: relative;
}

.mission-backdrop,
.mission-scrim {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.mission-backdrop {
  overflow: hidden;
  z-index: 0;
}

.mission-image {
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  object-position: center 52%;
  position: absolute;
  width: 100%;
}

.mission-image-blur {
  filter: blur(17px) brightness(0.44) saturate(0.68);
  transform: scale(1.08);
}

.mission-image-focus {
  filter: brightness(0.74) contrast(1.08) saturate(0.86);
  mask-image: radial-gradient(
    ellipse 60% 48% at 55% 45%,
    #000 0%,
    rgba(0, 0, 0, 0.95) 44%,
    rgba(0, 0, 0, 0.4) 70%,
    transparent 100%
  );
}

.mission-scrim {
  background:
    linear-gradient(90deg, rgba(2, 5, 7, 0.78), rgba(2, 5, 7, 0.18) 62%, rgba(2, 5, 7, 0.5)),
    linear-gradient(0deg, rgba(2, 5, 7, 0.92), transparent 58%, rgba(2, 5, 7, 0.46));
  z-index: 1;
}

.immersive-mission > :not(.mission-backdrop, .mission-scrim) {
  position: relative;
  z-index: 2;
}

.immersive-mission .section-heading h2 {
  color: white;
  font-size: calc(clamp(73px, 9.2vw, 142px) * var(--fs-density) * var(--fs-scale));
  max-width: 1220px;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.82);
}

.immersive-mission .section-heading > span {
  color: var(--acid);
}

.immersive-mission .mission-copy {
  align-items: start;
  backdrop-filter: blur(14px);
  background: rgba(4, 7, 9, 0.53);
  border-left: 3px solid var(--acid);
  margin-top: clamp(64px, 8vw, 110px);
  padding: clamp(26px, 3vw, 44px);
}

.immersive-mission .mission-copy > p:first-child {
  font-size: calc(clamp(32px, 3.7vw, 58px) * var(--fs-density) * var(--fs-scale));
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.62);
}

.immersive-mission .caption {
  border-top-color: rgba(255, 255, 255, 0.62);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-lg);
}

.technology {
  overflow: hidden;
}

.tech-flow {
  border-top: 0;
  gap: 2px;
}

.tech-flow article,
.tech-flow article:first-child {
  background: #151714;
  border: 0;
  display: flex;
  flex-direction: column;
  min-height: 610px;
  overflow: hidden;
  padding: 0;
  transition: background-color 220ms ease;
}

.tech-flow article:hover,
.tech-flow article:focus-within {
  background: #1c2018;
}

.tech-card-image {
  align-items: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(216, 255, 62, 0.13), transparent 52%),
    #0b0d0b;
  display: flex;
  height: 260px;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.tech-card-image::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.tech-card-image img {
  filter: grayscale(0.35) contrast(1.05);
  height: 76%;
  object-fit: contain;
  transition: filter 280ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  width: 78%;
}

.tech-flow article:hover .tech-card-image img {
  filter: grayscale(0) contrast(1.08);
  transform: scale(1.08) rotate(-1deg);
}

.tech-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px;
}

.tech-num {
  font-size: var(--fs-sm);
}

.tech-flow h3 {
  font-size: calc(clamp(38px, 3.4vw, 54px) * var(--fs-density) * var(--fs-scale));
  margin: auto 0 20px;
}

.tech-flow p {
  font-size: var(--fs-xl);
  line-height: 1.55;
}

.visual-story {
  background: #050706;
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.78fr);
  grid-template-rows: 1fr 1fr;
  min-height: min(1180px, 112svh);
  overflow: hidden;
  padding: 2px;
}

.visual-story-frame {
  background: #10130f;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.visual-story-main {
  grid-row: 1 / 3;
}

.visual-story-frame::after {
  background: linear-gradient(0deg, rgba(2, 4, 5, 0.92), transparent 58%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.visual-story-frame img {
  filter: brightness(0.76) saturate(0.84);
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: filter 320ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  width: 100%;
}

.visual-story-cad img {
  background:
    radial-gradient(circle at 50% 48%, rgba(10, 70, 255, 0.25), transparent 55%),
    #0a0d10;
  object-fit: contain;
  padding: 6%;
}

.visual-story-frame:hover img {
  filter: brightness(0.9) saturate(1);
  transform: scale(1.035);
}

.visual-story-frame figcaption {
  bottom: 0;
  color: white;
  display: grid;
  gap: 13px;
  left: 0;
  padding: clamp(28px, 4vw, 60px);
  position: absolute;
  right: 0;
  z-index: 2;
}

.visual-story-frame figcaption span {
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.visual-story-frame figcaption strong {
  font-size: calc(clamp(37px, 4vw, 66px) * var(--fs-density) * var(--fs-scale));
  font-weight: 390;
  letter-spacing: -0.055em;
  line-height: 0.98;
  max-width: 760px;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.84);
}

.visual-story-main figcaption strong {
  font-size: calc(clamp(63px, 6.8vw, 110px) * var(--fs-density) * var(--fs-scale));
}

.research-layout {
  margin-top: clamp(72px, 8vw, 118px);
}

.research-visual img {
  aspect-ratio: 5 / 4;
}

.research-visual figcaption,
.paper-topline {
  font-size: var(--fs-xs);
}

.paper-card {
  padding: clamp(28px, 3vw, 44px);
}

.paper-card h3 {
  font-size: calc(clamp(32px, 3.1vw, 46px) * var(--fs-density) * var(--fs-scale));
  margin-top: 62px;
}

.paper-card > p {
  font-size: var(--fs-xl);
}

.paper-metrics span {
  font-size: var(--fs-xs);
}

.prototype-copy > p {
  font-size: calc(clamp(32px, 4vw, 60px) * var(--fs-density) * var(--fs-scale));
}

.prototype-note p {
  font-size: var(--fs-xl);
}

.specs {
  align-items: start;
}

.specs-intro h2 {
  font-size: calc(clamp(63px, 6.6vw, 100px) * var(--fs-density) * var(--fs-scale));
}

.specs-intro > p {
  font-size: var(--fs-xl);
}

.specs-visuals {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
}

.specs-visuals img {
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(216, 255, 62, 0.13), transparent 57%),
    #10120f;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  width: 100%;
}

.spec-row {
  min-height: 108px;
}

.spec-row span {
  font-size: var(--fs-xs);
}

.spec-row strong {
  font-size: calc(clamp(22px, 2.25vw, 31px) * var(--fs-density) * var(--fs-scale));
}

.impact {
  background: #05080b;
  min-height: max(820px, 100svh);
  overflow: hidden;
  position: relative;
}

.impact-backdrop,
.impact-scrim {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.impact-backdrop {
  overflow: hidden;
  z-index: 0;
}

.impact-image {
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  object-position: center 56%;
  position: absolute;
  width: 100%;
}

.impact-image-blur {
  filter: blur(18px) brightness(0.34) saturate(0.56);
  transform: scale(1.08);
}

.impact-image-focus {
  filter: brightness(0.68) contrast(1.05) saturate(0.9);
  mask-image: radial-gradient(
    ellipse 64% 48% at 46% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.94) 44%,
    rgba(0, 0, 0, 0.38) 71%,
    transparent 100%
  );
}

.impact-scrim {
  background:
    linear-gradient(90deg, rgba(5, 13, 48, 0.83), rgba(5, 13, 48, 0.36) 65%, rgba(3, 6, 12, 0.62)),
    linear-gradient(0deg, rgba(3, 6, 12, 0.94), transparent 58%, rgba(3, 6, 12, 0.46));
  z-index: 1;
}

.impact > :not(.impact-backdrop, .impact-scrim) {
  position: relative;
  z-index: 2;
}

.impact-headline h2 {
  font-size: calc(clamp(76px, 10.5vw, 158px) * var(--fs-density) * var(--fs-scale));
  max-width: 1250px;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.84);
}

.impact-headline p,
.impact-stat span {
  font-size: var(--fs-sm);
}

.impact-grid {
  backdrop-filter: blur(12px);
  background: rgba(3, 6, 12, 0.52);
  border-top-color: rgba(255, 255, 255, 0.62);
  padding: 30px;
}

.impact-stat strong {
  font-size: calc(clamp(99px, 13vw, 188px) * var(--fs-density) * var(--fs-scale));
  text-shadow: 0 14px 42px rgba(0, 0, 0, 0.72);
}

.impact-statement p {
  font-size: calc(clamp(28px, 3vw, 44px) * var(--fs-density) * var(--fs-scale));
}

.timeline time,
.timeline li span {
  font-size: var(--fs-sm);
}

.timeline h3 {
  font-size: calc(clamp(35px, 3.6vw, 54px) * var(--fs-density) * var(--fs-scale));
}

.timeline p {
  font-size: var(--fs-xl);
}

.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(760px, 92svh);
  overflow: hidden;
  position: relative;
}

.contact-background,
.contact-scrim {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.contact-background {
  filter: blur(7px) brightness(0.36) saturate(0.62);
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.035);
  width: 100%;
  z-index: 0;
}

.contact-scrim {
  background:
    linear-gradient(90deg, rgba(2, 4, 5, 0.86), rgba(2, 4, 5, 0.3) 68%),
    linear-gradient(0deg, rgba(2, 4, 5, 0.72), transparent 55%);
  z-index: 1;
}

.contact-section > :not(.contact-background, .contact-scrim) {
  position: relative;
  z-index: 2;
}

.contact-section h2 {
  font-size: calc(clamp(80px, 11.5vw, 174px) * var(--fs-density) * var(--fs-scale));
  text-shadow: 0 18px 56px rgba(0, 0, 0, 0.84);
}

.contact-section > a {
  align-self: flex-start;
  background: rgba(3, 6, 8, 0.44);
  font-size: var(--fs-sm);
  min-height: 54px;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.contact-section > a:hover,
.contact-section > a:focus-visible {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
}

@media (max-width: 960px) {
  .site-header {
    height: 78px;
  }

  .immersive-mission .mission-copy {
    margin-left: 0;
  }

  .tech-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .visual-story {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }

  .visual-story-main {
    grid-row: auto;
    min-height: 76svh;
  }

  .visual-story-frame:not(.visual-story-main) {
    min-height: 56svh;
  }

  .specs-visuals {
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: var(--fs-lg);
  }

  section[id] {
    scroll-margin-top: 70px;
  }

  .section {
    padding-bottom: 106px;
    padding-top: 106px;
  }

  .section-heading h2 {
    font-size: calc(clamp(58px, 15vw, 82px) * var(--fs-density) * var(--fs-scale));
  }

  .hero h1 {
    font-size: calc(clamp(67px, 19vw, 94px) * var(--fs-density) * var(--fs-scale));
  }

  .hero .lede {
    font-size: var(--fs-3xl);
  }

  .immersive-mission {
    min-height: 940px;
  }

  .immersive-mission .section-heading h2 {
    font-size: calc(clamp(63px, 16vw, 88px) * var(--fs-density) * var(--fs-scale));
  }

  .immersive-mission .mission-copy {
    gap: 34px;
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .immersive-mission .mission-copy > p:first-child {
    font-size: var(--fs-5xl);
  }

  .mission-image {
    object-position: 48% center;
  }

  .mission-image-focus {
    mask-image: radial-gradient(ellipse 94% 46% at 50% 42%, #000 0%, rgba(0, 0, 0, 0.93) 42%, transparent 100%);
  }

  .tech-flow {
    grid-template-columns: 1fr;
  }

  .tech-flow article,
  .tech-flow article:first-child {
    min-height: 530px;
  }

  .tech-card-image {
    height: 240px;
  }

  .visual-story-main,
  .visual-story-frame:not(.visual-story-main) {
    min-height: 64svh;
  }

  .visual-story-frame figcaption strong,
  .visual-story-main figcaption strong {
    font-size: calc(clamp(43px, 12vw, 60px) * var(--fs-density) * var(--fs-scale));
  }

  .paper-card h3 {
    font-size: var(--fs-5xl);
  }

  .prototype-copy > p {
    font-size: var(--fs-5xl);
  }

  .specs-visuals {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 36px;
  }

  .impact {
    min-height: 980px;
  }

  .impact-headline h2 {
    font-size: calc(clamp(69px, 18vw, 96px) * var(--fs-density) * var(--fs-scale));
  }

  .impact-grid {
    padding: 24px;
  }

  .impact-statement p {
    font-size: var(--fs-4xl);
  }

  .contact-section h2 {
    font-size: calc(clamp(69px, 18vw, 98px) * var(--fs-density) * var(--fs-scale));
  }
}

/* ==========================================================================
   Accessibility layer
   Added for WCAG 2.2 AA. Everything below is additive — it introduces the
   screen-reader utility class, the reader-facing display controls, and the
   high-contrast palette, without altering the original visual design.
   ========================================================================== */

/* Visible to assistive technology only (SC 1.3.1, 2.4.4, 4.1.3). */
.sr-only {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ...but a focusable one must become visible when it receives focus. */
.sr-only:focus,
.sr-only:focus-within {
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

/* Skip link — SC 2.4.1. Sits above every other layer, including the
   fixed header, and lands on <main>. */
.skip-link {
  align-items: center;
  border: 2px solid var(--ink);
  display: inline-flex;
  font-size: var(--fs-base);
  min-height: var(--target-min);
  z-index: 200;
  /* A percentage offset is unreliable once the type scale grows — the link
     gets taller and starts peeking back onto the page. Park it a fixed
     distance beyond its own full height instead. */
  transform: translateY(calc(-100% - 80px));
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

/* <main> is focus target for the skip link but must not show a ring
   when reached that way. */
main:focus {
  outline: none;
}

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

/* --------------------------------------------------------------------------
   Reader display controls
   -------------------------------------------------------------------------- */

.a11y-bar {
  position: fixed;
  right: 18px;
  top: 96px;
  z-index: 95;
  font-family: var(--font-display);
}

.a11y-bar-trigger {
  align-items: center;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--paper);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-sm);
  font-weight: 600;
  gap: 8px;
  line-height: 1;
  min-height: var(--target-min);
  padding: 10px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.a11y-bar-trigger:hover {
  background: var(--blue);
  border-color: var(--blue);
}

.a11y-bar-glyph {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--acid);
}

.a11y-bar-glyph sup {
  /* 0.9em rather than a smaller superscript: at the tightened density even
     this decorative "+" must clear the 14px floor the rest of the page holds */
  font-size: 0.9em;
}

.a11y-bar-panel {
  background: var(--paper-bright);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 14px;
  margin-top: 10px;
  min-width: 268px;
  padding: 16px;
}

.a11y-bar-panel[hidden] {
  display: none;
}

.a11y-bar-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.a11y-bar-row-label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.a11y-bar-buttons {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.a11y-bar-buttons button {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  min-height: var(--target-min);
  min-width: var(--target-min);
}

.a11y-bar-buttons button:hover:not(:disabled) {
  background: var(--acid);
}

.a11y-bar-buttons button:disabled {
  cursor: not-allowed;
  /* 4.6:1 against --paper — a disabled control must still be readable
     (SC 1.4.3 exempts it, but readers still need to see the state). */
  color: #63645f;
  opacity: 1;
  border-color: #9a9b95;
}

.a11y-bar-value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  min-width: 4.5ch;
  text-align: center;
}

.a11y-bar-toggle,
.a11y-bar-reset {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--fs-2xs);
  font-weight: 600;
  min-height: var(--target-min);
  padding: 8px 14px;
}

.a11y-bar-toggle[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.a11y-bar-toggle[aria-pressed="true"]::before {
  content: "✓ ";
}

@media (max-width: 960px) {
  .a11y-bar {
    right: 12px;
    top: auto;
    bottom: 12px;
  }

  .a11y-bar-trigger-text {
    /* the glyph alone carries the meaning on small screens;
       the accessible name still comes from the visible text node */
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .a11y-bar-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
  }
}

/* --------------------------------------------------------------------------
   High contrast — reader toggle, plus the OS-level preference.
   Every pair below clears 7:1, so the mode also satisfies SC 1.4.6 (AAA).
   -------------------------------------------------------------------------- */

:root[data-contrast="high"] {
  --paper: #ffffff;
  --paper-bright: #ffffff;
  --ink: #000000;
  --muted: #3a3a38;
  --line: rgba(0, 0, 0, 0.55);
  --acid: #c8f000;
  --blue: #0032c8;
}

:root[data-contrast="high"] body {
  background: #ffffff;
  color: #000000;
}

/* Photographic backdrops carry text on this site; in high contrast they
   step back so the type sits on a solid, predictable field. */
:root[data-contrast="high"] .hero-backdrop,
:root[data-contrast="high"] .mission-backdrop,
:root[data-contrast="high"] .contact-background,
:root[data-contrast="high"] .hero-grid,
:root[data-contrast="high"] .audio-ambient {
  filter: grayscale(1) brightness(0.28) contrast(1.2);
}

:root[data-contrast="high"] .hero-scrim,
:root[data-contrast="high"] .mission-scrim,
:root[data-contrast="high"] .contact-scrim {
  background: rgba(0, 0, 0, 0.82);
}

:root[data-contrast="high"] :where(a, button, summary, select) {
  text-decoration-thickness: 2px;
}

/* Inline links get a permanent underline — colour alone must not be the
   only way a link is distinguished (SC 1.4.1 Use of Colour). */
:root[data-contrast="high"] p a,
:root[data-contrast="high"] li a,
:root[data-contrast="high"] .source-note a,
:root[data-contrast="high"] .footer-meta a {
  text-decoration: underline;
}

:root[data-contrast="high"] :where(a, button, summary, select):focus-visible {
  outline: 4px solid #0032c8;
  outline-offset: 3px;
  box-shadow: 0 0 0 8px #ffffff;
}

/* Readers who set high contrast at the OS level get it without opting in
   through the page, unless they have explicitly turned it off here. */
@media (prefers-contrast: more) {
  :root:not([data-contrast="off"]) {
    --muted: #3a3a38;
    --line: rgba(0, 0, 0, 0.5);
  }

  :root:not([data-contrast="off"]) :where(p a, li a, .source-note a) {
    text-decoration: underline;
  }
}

/* --------------------------------------------------------------------------
   Motion — SC 2.3.3. The existing rule kills durations; these also stop the
   decorative loops that would otherwise keep running at 0.01ms forever.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .audio-ambient i,
  .live-dot,
  .cad-loader-ring,
  .hero-image,
  .mission-image {
    animation: none !important;
    transform: none !important;
  }

  .hero-image-blur,
  .mission-image-blur {
    filter: none !important;
  }
}

/* --------------------------------------------------------------------------
   Reflow and text spacing — SC 1.4.10 and SC 1.4.12.
   At 320px equivalent (or 400% zoom) nothing may require sideways scrolling,
   and reader-injected spacing must not clip any text.
   -------------------------------------------------------------------------- */

body {
  overflow-x: hidden;
}

:where(p, li, h1, h2, h3, h4, dd, dt, figcaption, blockquote) {
  overflow-wrap: break-word;
}

/* Wide content keeps its own scroll container rather than pushing the page. */
.cad-part-grid,
.audio-chapters,
.tech-flow,
.timeline {
  max-width: 100%;
}

/* Fixed heights are the usual cause of clipped text once type grows or a
   reader increases spacing; let these grow instead. */
.site-header {
  height: auto;
  min-height: 82px;
}

.hero-stats span,
.spec-row span,
.timeline li span,
.paper-metrics span,
.impact-stat span {
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Breadcrumb back to the parent Soft Robotics Lab site.
   -------------------------------------------------------------------------- */

.lab-crumb {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  left: 0;
  letter-spacing: var(--track-label-tight);
  padding: 0 40px;
  /* Fixed, like the header below it — the two form one chrome stack, so
     the header never leaves a gap once the page scrolls. */
  position: fixed;
  right: 0;
  top: 0;
  z-index: 60;
}

.lab-crumb ol {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  min-height: 40px;
  padding: 0;
}

.lab-crumb li + li::before {
  content: "/";
  margin-right: 10px;
  opacity: 0.6;
}

.lab-crumb a {
  align-items: center;
  color: var(--acid);
  display: inline-flex;
  min-height: 40px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lab-crumb a:hover {
  color: var(--paper);
}

.lab-crumb [aria-current="page"] {
  /* 8.1:1 on --ink */
  color: #c9cac4;
}

/* The fixed header sits below the crumb rather than over it, and the
   hero clears both. */
.site-header {
  top: 40px;
}

.hero {
  padding-top: 178px;
}

.skip-link {
  top: 52px;
}

.a11y-bar {
  top: 136px;
}

@media (max-width: 640px) {
  .lab-crumb {
    padding: 0 20px;
  }
}

/* Grid and flex children default to min-width:auto, so a long word or a
   wide child pushes the track past the viewport at narrow widths. Pinning
   them to 0 is what actually delivers SC 1.4.10 Reflow at 320 CSS px. */
.research-layout > *,
.specs > *,
.tech-flow > *,
.impact-grid > *,
.accessible-grid > *,
.cad-intro > *,
.audio-console > *,
.timeline li > * {
  min-width: 0;
}

.research-layout,
.specs,
.impact-grid,
.accessible-grid {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Mobile navigation
   The design hides the section links below 960px. Rather than leaving phone
   users with no navigation at all, the links move into a disclosure panel.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
}

@media (max-width: 960px) {
  .nav-toggle {
    align-items: center;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: var(--target-min);
    min-width: var(--target-min);
    order: -1;
  }

  .nav-toggle-bars {
    display: grid;
    gap: 4px;
    width: 20px;
  }

  .nav-toggle-bars span {
    background: currentColor;
    border-radius: 2px;
    display: block;
    height: 2px;
    width: 100%;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* The panel: links stack, still hidden until the button opens it, but
     now reachable. `display:none` while closed keeps them out of the tab
     order, which is what SC 2.4.3 Focus Order requires. */
  nav.is-open {
    background: var(--ink);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0;
    left: 12px;
    padding: 8px;
    position: absolute;
    right: 12px;
    top: calc(100% + 6px);
    z-index: 70;
  }

  nav.is-open a:not(.nav-cta) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--paper);
    display: flex;
    min-height: var(--target-min);
    padding: 6px 10px;
    width: 100%;
  }

  nav.is-open a:not(.nav-cta):last-of-type {
    border-bottom: 0;
  }

  nav.is-open .lang-switch,
  nav.is-open .nav-cta {
    color: var(--paper);
    margin-top: 8px;
  }

  .site-header {
    position: fixed;
  }
}

/* --------------------------------------------------------------------------
   Narrow-screen corrections for the two fixed overlays.
   These come last on purpose: the breadcrumb block above re-declares
   .a11y-bar { top } outside a media query, which would otherwise win over
   the earlier mobile placement through source order.
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .a11y-bar {
    bottom: 12px;
    right: 12px;
    top: auto;
  }
}

@media (max-width: 640px) {
  /* Two crumbs will not fit on one line, and wrapping them pushes the text
     out of the fixed bar. The current page is where the reader already is,
     so only the link back to the lab is kept. */
  .lab-crumb ol {
    flex-wrap: nowrap;
    min-height: 36px;
  }

  .lab-crumb li[aria-current="page"] {
    display: none;
  }

  .lab-crumb a {
    min-height: 36px;
    white-space: nowrap;
  }

  .site-header {
    top: 36px;
  }

  .skip-link {
    top: 44px;
  }

  .hero {
    padding-top: 150px;
  }
}

@media (max-width: 640px) {
  /* With the type scale raised, the header row needs explicit breathing
     room or the brand runs straight into the language switch. */
  .site-header {
    gap: 12px;
    padding: 8px 16px;
  }

  .site-header nav {
    gap: 10px;
  }

  .nav-cta {
    padding: 8px 12px;
    white-space: nowrap;
  }

  .brand {
    gap: 8px;
    min-width: 0;
  }

  .brand small {
    display: none;
  }
}

@media (max-width: 640px) {
  /* The brand was being shrunk by the flex row while its text kept its
     intrinsic width, so "LumiR" spilled over the language switch. */
  .brand {
    flex-shrink: 0;
  }

  .brand strong {
    font-size: var(--fs-base);
  }
}

@media (max-width: 480px) {
  /* Not enough room for the call to action beside the brand and the
     language switch; it lives in the menu panel instead, and the page
     still ends on a full contact section. */
  nav:not(.is-open) .nav-cta {
    display: none;
  }
}