/* Open Runde (OFL) for text; Newsreader (Google Fonts) for headings. */
@font-face { font-family: "Open Runde"; src: url("fonts/OpenRunde-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("fonts/OpenRunde-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("fonts/OpenRunde-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("fonts/OpenRunde-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #07080b;
  --panel: #0e1015;
  --panel-2: #141720;
  --text: #ecedef;
  --muted: #8d919b;
  --rule: #20242d;
  --gold: #fdb515;
  --blue: #3d8bff;
  --accent: var(--gold);
  --accent-2: var(--blue);
  --on-accent: #07080b;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --sans: "Open Runde", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --gutter: clamp(16px, 4vw, 56px);
  --bar: 64px;
  --max: 1240px;
}

/* Each page picks a color world. */
body[data-theme="research"] { --accent: #4da3ff; --accent-2: #3ff0ff; }
body[data-theme="applied"]  { --accent: #3ddc84; --accent-2: #fdb515; }
body[data-theme="racing"]   { --accent: #ff4b3e; --accent-2: #ffffff; }
body[data-theme="mobility"] { --accent: #fdb515; --accent-2: #3d8bff; }
body[data-theme="projects"] { --accent: #b49bff; --accent-2: #fdb515; }
body[data-theme="partners"] { --accent: #3ff0d2; --accent-2: #fdb515; }
body[data-theme="join"]     { --accent: #fdb515; --accent-2: #ff4b3e; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar); background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- top bar ---------- */
.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--gutter);
  background: rgba(7, 8, 11, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; }
.mark svg { width: 26px; height: 26px; color: var(--accent); }
.mark b { color: var(--gold); font-weight: inherit; }
.bar nav { display: flex; gap: 4px; align-items: center; }
.bar nav a { text-decoration: none; color: var(--muted); padding: 7px 12px; border: 1px solid transparent; }
.bar nav a:hover { color: var(--text); }
.bar nav a[aria-current="page"] { color: var(--text); border-color: var(--rule); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); }
.bar nav a.cta { margin-left: 8px; color: var(--on-accent); background: var(--gold); border-color: var(--gold); font-weight: 600; box-shadow: none; }
.bar nav a.cta:hover { background: #fff; border-color: #fff; }
.menu { display: none; }

/* ---------- banner with the ASCII scene ---------- */
.scene {
  position: relative;
  height: 76vh;
  height: 76svh;
  min-height: 540px;
  margin-top: var(--bar);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 70% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
}
.scene.full { height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar)); min-height: 620px; }
.scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent));
}
.scene::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(7, 8, 11, 0), var(--bg) 90%);
  pointer-events: none;
}
.scene-title {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.scene-title h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 6.8vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  max-width: 13ch;
}
.scene-title h1 em { font-style: normal; color: var(--accent); }
.scene-title .side { max-width: 430px; padding-bottom: 8px; }
.scene-title .side p { font-size: 19px; line-height: 1.45; color: #c9cbd1; }
.scene-title .side .actions { margin-top: 22px; }
.hud {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hud b { color: var(--accent); font-weight: 500; }

/* ---------- pages without a banner ---------- */
.page-plain { padding-top: calc(var(--bar) + clamp(64px, 10vw, 128px)); }
.plain-title { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6.8vw, 108px); line-height: 0.95; letter-spacing: -0.025em; }
.plain-title em { font-style: normal; color: var(--accent); }

/* ---------- sections and bands ---------- */
.section { padding: clamp(72px, 10vw, 136px) var(--gutter); }
.wrap { max-width: var(--max); margin: 0 auto; }
.band-panel { background: var(--panel); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band-accent { background: var(--accent); color: var(--on-accent); }
.band-accent h2, .band-accent h3, .band-accent .num, .band-accent .muted { color: var(--on-accent); }
.band-accent .muted, .band-accent p { color: rgba(7, 8, 11, 0.78); }

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h2 em { font-style: normal; color: var(--accent); }
h3 { font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; }
.muted { color: var(--muted); }
.lead { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; letter-spacing: -0.01em; }
.statement { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 54px); line-height: 1.1; letter-spacing: -0.035em; }
.num { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.center { text-align: center; }
.center h2, .center .lead { margin-left: auto; margin-right: auto; }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.split.even { grid-template-columns: 1fr 1fr; }
.split.flip { grid-template-columns: 7fr 5fr; }
.split > * > p + p { margin-top: 16px; }
.stack-gap > * + * { margin-top: 18px; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.center .actions { justify-content: center; }
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid #3a3f4b;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { border-color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: #fff; border-color: #fff; }
.band-accent .btn { border-color: rgba(7, 8, 11, 0.5); color: var(--on-accent); }
.band-accent .btn:hover { background: var(--on-accent); color: var(--accent); }
.band-accent .btn.primary { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent); }
.band-accent .btn.primary:hover { background: #fff; border-color: #fff; color: var(--on-accent); }
.link { font-weight: 500; text-decoration: none; color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link:hover { color: #fff; }

/* ---------- editorial pieces ---------- */
/* Name-and-description rows separated by hairlines. */
.rows { margin-top: 48px; border-bottom: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 4fr 7fr 40px;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
  text-decoration: none;
}
.row h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.015em; color: var(--c, var(--text)); }
.row p { color: var(--muted); font-size: 18px; line-height: 1.5; }
.row .arrow { justify-self: end; font-size: 22px; color: var(--muted); transition: transform .2s, color .2s; }
a.row:hover h3, a.row:hover .arrow { color: var(--c, var(--accent)); }
a.row:hover .arrow { transform: translateX(4px); }
.rows.compact .row { grid-template-columns: 4fr 8fr; padding: 22px 0; }
.rows.compact .row h3 { font-size: 22px; letter-spacing: -0.015em; }
.c-research { --c: #4da3ff; }
.c-applied  { --c: #3ddc84; }
.c-racing   { --c: #ff4b3e; }
.c-mobility { --c: #fdb515; }

/* Plain multi-column list. */
.plain { list-style: none; columns: 2; column-gap: 56px; margin-top: 36px; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.01em; }
.plain.three { columns: 3; }
.plain li { padding: 12px 0; border-top: 1px solid var(--rule); break-inside: avoid; }
.band-accent .plain li { border-color: rgba(7, 8, 11, 0.3); }

/* A sequence written out as large type. */
.path { margin-top: 36px; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.25; letter-spacing: -0.035em; max-width: 30ch; }
.path i { font-style: normal; color: var(--muted); padding: 0 0.15em; }
.path b { font-weight: 500; color: var(--accent); }

/* Two-column spec table. */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; vertical-align: baseline; padding: 15px 0; border-top: 1px solid var(--rule); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--rule); }
.spec th { font-weight: 600; width: 34%; padding-right: 20px; }
.spec td { color: var(--muted); font-size: 16px; }

/* Words in a row, like an output list. */
.outputs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid rgba(7, 8, 11, 0.35); }
.outputs div { padding: 22px 20px 0 0; }
.outputs strong { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -0.035em; }
.outputs span { font-size: 15px; }

/* Stack logo carousel: two copies of the strip scroll left forever. */
.marquee {
  margin-top: 36px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; gap: 14px; padding-right: 14px; list-style: none; }
.marquee li {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 22px 0 16px;
  background: #f4f3ef;
  color: #17181c;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}
.marquee img { width: 34px; height: 34px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee-track { animation: none; width: auto; }
  .marquee ul { flex-wrap: wrap; }
  .marquee ul[aria-hidden] { display: none; }
}
.huge { font-family: var(--serif); font-weight: 500; font-size: clamp(64px, 12vw, 190px); line-height: 0.88; letter-spacing: -0.035em; color: var(--accent); }

/* quote */
.quote { font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 9vw, 140px); line-height: 0.92; letter-spacing: -0.03em; }
.quote span { color: var(--accent); }

/* form */
form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: grid; gap: 7px; font-size: 14px; font-weight: 500; color: #c9cbd1; }
label.full { grid-column: 1 / -1; }
input, textarea, select {
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 12px 13px;
  border-radius: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { min-height: 110px; resize: vertical; }
form .actions { grid-column: 1 / -1; margin-top: 4px; align-items: center; }
.form-note { font-size: 14px; color: var(--muted); }
.form-panel { background: var(--panel); border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: clamp(24px, 3vw, 40px); }

/* closing call to action */
.cta-band { text-align: center; }
.cta-band .statement { max-width: 22ch; margin: 0 auto; }
.cta-band .actions { justify-content: center; }

/* next page link */
.next {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 44px var(--gutter);
  border-top: 1px solid var(--rule);
  text-decoration: none;
}
.next span { font-size: 15px; color: var(--muted); }
.next strong { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 60px); letter-spacing: -0.04em; }
.next:hover strong { color: var(--accent); }

/* ---------- footer ---------- */
footer {
  background: var(--panel);
  border-top: 1px solid var(--rule);
  padding: 56px var(--gutter) 64px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
}
footer .mark svg { width: 30px; height: 30px; color: var(--gold); }
footer p { margin-top: 10px; font-size: 15px; color: var(--muted); max-width: 40ch; }
footer ul { list-style: none; columns: 2; font-size: 15px; line-height: 2.1; color: var(--muted); }
footer ul a { text-decoration: none; }
footer ul a:hover { color: var(--text); }
.socials { display: flex; gap: 14px; margin-top: 22px; align-items: center; }
.socials a { display: inline-flex; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.socials a:hover { color: var(--text); }
.socials svg { width: 20px; height: 20px; }
footer .credit { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; color: #5d616b; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .outputs { grid-template-columns: repeat(2, 1fr); }
  .plain.three { columns: 2; }
}
@media (max-width: 900px) {
  .menu {
    display: inline-flex;
    font: inherit;
    font-weight: 500;
    background: none;
    border: 1px solid #3a3f4b;
    padding: 7px 12px;
    color: var(--text);
    cursor: pointer;
  }
  .bar nav {
    position: fixed;
    top: var(--bar); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .bar.open nav { display: flex; }
  .bar nav a { padding: 14px 0; border: 0; border-bottom: 1px solid var(--rule); font-size: 17px; color: var(--text); }
  .bar nav a[aria-current="page"] { background: none; box-shadow: none; color: var(--accent); }
  .bar nav a.cta { margin: 14px 0 0; text-align: center; padding: 14px; }

  .scene { height: 80svh; min-height: 580px; }
  .scene-title { flex-direction: column; align-items: flex-start; bottom: 28px; gap: 18px; }
  .hud span + span { display: none; }
  .split, .split.even, .split.flip { grid-template-columns: 1fr; }
  .row, .rows.compact .row { grid-template-columns: 1fr; gap: 8px; }
  .row .arrow { display: none; }
  .plain, .plain.three { columns: 1; }
  .spec th { width: 42%; }
  form { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
  .next { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- research index: paper cards ---------- */
.papers-head { padding-bottom: 32px; }
.papers-section { padding-top: 24px; }
.papers-title { margin-bottom: 36px; }
.papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 20px; }
.paper { display: flex; flex-direction: column; text-decoration: none; }
.cover {
  position: relative;
  aspect-ratio: 640 / 300;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 7%;
  overflow: hidden;
}
.cover span {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 45%;
}
.cover.dark span { color: #fff; }
.cover.light span { color: #10151c; }
.paper .cover { transition: filter .2s; }
.paper:hover .cover { filter: brightness(1.08); }
.paper h3 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.paper:hover h3 { color: var(--accent); }
.paper p { margin-top: 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--muted); flex: 1; }
.paper .meta { margin-top: 16px; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.paper .tag { background: #c9ccd2; color: #0b0d10; padding: 3px 7px; }

/* ---------- research post: light reading page ---------- */
body[data-theme="reading"] main { background: #fafaf8; color: #17181b; }
.reading {
  display: grid;
  grid-template-columns: 1fr minmax(0, 660px) 1fr;
  gap: 32px;
  padding: calc(var(--bar) + 48px) var(--gutter) 120px;
}
.toc { grid-column: 1; align-self: start; position: sticky; top: calc(var(--bar) + 48px); padding-top: 330px; font-size: 14px; }
.toc p { font-weight: 600; margin-bottom: 10px; }
.toc ol { list-style: none; }
.toc li { padding: 4px 0; }
.toc a { color: #6b6e75; text-decoration: none; }
.toc a:hover { color: #17181b; }
.post { grid-column: 2; }
.post .back { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6e75; text-decoration: none; }
.post .back:hover { color: #17181b; }
.post header { text-align: center; margin: 40px 0 36px; }
.post h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.02em; }
.post-tag { margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6e75; }
.post-date { margin-top: 8px; color: #6b6e75; font-size: 15px; }
.post-authors { margin-top: 10px; font-size: 15px; }
.post-cover { margin: 0 0 36px; }
.post .tldr { background: #ececea; padding: 24px 26px; margin-bottom: 40px; }
.post .tldr h2 { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: 0; color: #6b6e75; margin: 0 0 10px; }
.post h2 { font-size: 28px; letter-spacing: -0.01em; color: #17181b; margin: 48px 0 14px; scroll-margin-top: calc(var(--bar) + 20px); }
.post p { font-size: 17px; line-height: 1.65; margin-top: 14px; color: #2a2c31; }
.post .tldr p:first-of-type { margin-top: 0; }
.post .spec th, .post .spec td { border-color: #dedfe2; }
.post .spec td { color: #4a4d54; }
.post .plain { font-size: 17px; columns: 2; margin-top: 18px; }
.post .plain li { border-color: #dedfe2; }
.post .path { font-size: clamp(22px, 2.4vw, 30px); margin: 18px 0 8px; color: #17181b; }
.post .path i { color: #9a9ca3; }
.post .path b { color: #b57a12; }
.post .link { color: #17181b; }
.post .link:hover { color: #b57a12; }
body[data-theme="reading"] .next { background: var(--bg); }

@media (max-width: 1100px) {
  .papers { grid-template-columns: repeat(2, 1fr); }
  .reading { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .post { grid-column: 1; max-width: 660px; margin: 0 auto; width: 100%; }
}
@media (max-width: 700px) {
  .papers { grid-template-columns: 1fr; gap: 44px; }
  .post .plain { columns: 1; }
}
body[data-theme="reading"] .bar { background: #000; }

/* =========================================================
   Content blocks modeled on inceptionlabs.ai
   ========================================================= */
:root { --cream: #f6f3eb; --cream-2: #efebe1; --ink-2: #2a2926; --charcoal: #1a1918; }

/* Announcement strip under the nav. */
.announce {
  margin-top: var(--bar);
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 11px var(--gutter);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.announce b { font-weight: 500; }
.announce a { color: var(--muted); text-decoration: none; }
.announce a:hover { color: var(--text); }
.announce i { font-style: normal; color: var(--rule); }

/* Split hero: copy and prompt rows on the left, ASCII art on the right. */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--bar) - 44px);
  min-height: calc(100svh - var(--bar) - 44px);
  border-bottom: 1px solid var(--rule);
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; }
.hero-copy .inner { padding: clamp(48px, 8vh, 96px) var(--gutter) 40px; }
.hero-copy h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 5.6vw, 92px); line-height: 0.98; letter-spacing: -0.025em; }
.hero-copy h1 em { font-style: normal; color: var(--accent); }
.hero-copy .inner > p { margin-top: 24px; max-width: 46ch; font-size: 18px; color: #c4c7ce; }
.hero-art { position: relative; margin-top: 0; height: auto; border-left: 1px solid var(--rule); min-height: 520px; overflow: hidden; }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.prompt { border-top: 1px solid var(--rule); }
.prompt .ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  font-size: 19px;
  color: var(--muted);
}
.prompt .ask a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e6e7ea; color: #0b0d10; text-decoration: none; font-size: 18px; }
.prompt .ask a:hover { background: var(--accent); }
.prompt .row-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px var(--gutter);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-size: 17px;
  color: #c4c7ce;
  transition: background .15s, color .15s;
}
.prompt .row-link:last-child { border-bottom: 0; }
.prompt .row-link:hover { background: var(--panel); color: var(--text); }
.prompt .row-link i { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--c, var(--accent)); width: 22px; }
.prompt .row-link span { margin-left: auto; color: var(--muted); }

/* Bordered strip, like a "trusted by" row. */
.strip { display: grid; grid-template-columns: 220px 1fr; align-items: center; border-bottom: 1px solid var(--rule); }
.strip > p { padding: 0 var(--gutter); font-size: 14px; color: var(--muted); }
.strip .marquee { margin: 0; padding: 20px 0; border-left: 1px solid var(--rule); }

/* Large statement in muted text with key phrases in full white. */
.highlight { font-family: var(--sans); font-weight: 500; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.22; letter-spacing: -0.025em; color: #6c7079; max-width: 26ch; }
.highlight b { font-weight: 500; color: var(--text); }
.more { display: inline-flex; gap: 6px; margin-top: 26px; font-size: 16px; font-weight: 500; text-decoration: none; color: var(--text); }
.more:hover { color: var(--accent); }
.split-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }
.split-head p { color: #b9bcc4; font-size: 18px; max-width: 46ch; }

/* "Same stack, every vehicle": pipeline stages light up in order. */
.pipeline { margin-top: 56px; }
.lane { padding: 26px 0 28px; border-bottom: 1px solid var(--rule); position: relative; }
.lane .who { font-size: 13px; color: var(--muted); }
.lane .name { margin-top: 4px; font-size: 17px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; list-style: none; }
.chips li {
  font-family: var(--mono);
  font-size: clamp(14px, 1.5vw, 22px);
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 35%, transparent);
  background: color-mix(in srgb, var(--c, var(--accent)) 7%, transparent);
  color: color-mix(in srgb, var(--c, var(--accent)) 80%, white);
  animation: chip var(--dur, 4s) linear infinite;
  animation-delay: calc(var(--i) * var(--dur, 4s) / 9);
}
@keyframes chip {
  0%, 9% { background: var(--c, var(--accent)); color: #07080b; }
  14%, 100% { background: color-mix(in srgb, var(--c, var(--accent)) 7%, transparent); color: color-mix(in srgb, var(--c, var(--accent)) 80%, white); }
}
.lane::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--c, var(--accent)); transform-origin: left; animation: sweep var(--dur, 4s) linear infinite; }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Light cream section. */
.band-cream { background: var(--cream); color: var(--ink-2); }
.band-cream h2, .band-cream h3 { color: #151412; }
.band-cream .muted, .band-cream p { color: #6a675f; }
.band-cream .btn { border-color: #cfcabe; color: #151412; }
.band-cream .btn.pill { background: #e7e2d6; border-color: #e7e2d6; }

/* Pill buttons. */
.btn.pill { border-radius: 999px; padding: 10px 20px; }

/* Cards that scroll sideways, each with an ASCII drawing. */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 24px; margin-top: 48px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.rail-card { scroll-snap-align: start; background: var(--cream-2); padding: 30px 30px 32px; display: flex; flex-direction: column; min-height: 470px; text-decoration: none; transition: background .2s; }
.rail-card:hover { background: #e9e4d8; }
.rail-card h3 { font-family: var(--sans); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; }
.rail-card pre { flex: 1; display: grid; place-items: center; margin: 22px 0; font-family: var(--mono); font-size: 8.8px; line-height: 1.1; font-weight: 500; color: #1f1d1a; overflow: hidden; }
.rail-card:hover pre { color: var(--c-dark, #000); }
.rail-card p { font-size: 15px; line-height: 1.5; }
.rail-card .go { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--c-dark, #151412); }

/* Product rows: name and pills on the left, description and checks on the right. */
.products { margin-top: 48px; }
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 36px 0; border-bottom: 1px solid #ddd8cc; }
.product:first-child { border-top: 1px solid #ddd8cc; }
.product .id { display: grid; grid-template-columns: 44px 1fr; gap: 6px 16px; align-items: center; }
.product .mark-ico { width: 40px; height: 40px; border: 2px dotted var(--c, #e56a2c); border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--c, #e56a2c); }
.product h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; }
.product .pills { grid-column: 2; display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.product .pills .btn.pill { background: color-mix(in srgb, var(--c, #e56a2c) 16%, var(--cream)); border-color: transparent; color: var(--c-dark, #b54a12); }
.product .pills a.text { font-size: 15px; color: #3a3833; text-decoration: none; }
.product .pills a.text:hover { color: #000; }
.product .desc p { font-size: 18px; line-height: 1.5; color: #77736a; }
.product .desc p b { font-weight: 500; color: #151412; }
.product .checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; list-style: none; font-size: 15px; color: #151412; }
.product .checks li::before { content: "\2713"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: var(--c, #e56a2c); color: #fff; font-size: 10px; vertical-align: -2px; }
.c-research { --c-dark: #1f6fd1; }
.c-applied { --c-dark: #178a4c; }
.c-racing { --c-dark: #c9271b; }
.c-mobility { --c-dark: #9a6a00; }

/* Write-up list rows. */
.paper-rows { border-top: 1px solid var(--rule); }
.paper-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.paper-row h3 { font-family: var(--sans); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.paper-row .go { font-size: 14px; font-weight: 500; color: var(--accent); }
.paper-row p { grid-column: 1; font-size: 15px; color: var(--muted); }
.paper-row:hover h3 { color: var(--accent); }
.band-cream .paper-rows, .band-cream .paper-row { border-color: #ddd8cc; }
.band-cream .paper-row h3 { color: #151412; }
.band-cream .paper-row .go { color: #0f8f87; }

/* Charcoal section, marker highlight, feature columns with an accent bar. */
.band-charcoal { background: var(--charcoal); color: #f2f1ee; }
.band-charcoal p { color: #a9a6a0; }
.mark-hl { background: var(--gold); color: #141312; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; padding-top: 36px; border-top: 1px solid #34322f; }
.features div { border-left: 2px solid var(--gold); padding-left: 12px; }
.features h3 { font-family: var(--sans); font-weight: 500; font-size: 17px; letter-spacing: 0; color: #f2f1ee; }
.features p { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.btn.light { background: #fff; color: #141312; border-color: #fff; border-radius: 999px; }
.btn.light:hover { background: var(--gold); border-color: var(--gold); }

/* Closing call to action over a dim character field. */
.cta-field { position: relative; overflow: hidden; background: var(--charcoal); border-top: 1px solid #2b2a28; }
.cta-field pre { position: absolute; inset: 0; margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.4; color: #2f2d2a; white-space: pre; pointer-events: none; user-select: none; }
.cta-field .wrap { position: relative; padding: clamp(96px, 14vw, 180px) 0; }
.cta-field h2 { color: #f2f1ee; max-width: 16ch; }

/* Footer in columns. */
footer.cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; background: var(--charcoal); border-top: 1px solid #2b2a28; padding: 56px var(--gutter) 40px; }
footer.cols h4 { font-weight: 400; font-size: 14px; color: #8d8a84; margin-bottom: 14px; }
footer.cols ul { columns: 1; list-style: none; line-height: 2.2; font-size: 15px; color: #e7e5e1; }
footer.cols .legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; font-size: 13px; color: #6f6c66; }

@media (max-width: 1000px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-art { border-left: 0; border-top: 1px solid var(--rule); min-height: 380px; order: -1; }
  .strip { grid-template-columns: 1fr; }
  .strip > p { padding: 16px var(--gutter) 0; }
  .strip .marquee { border-left: 0; }
  .split-head, .product { grid-template-columns: 1fr; gap: 20px; }
  .features { grid-template-columns: 1fr; gap: 28px; }
  footer.cols { grid-template-columns: 1fr 1fr; }
  footer.cols > div:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .chips li, .lane::after { animation: none; }
}

/* ---------- drive mode on the hero car ---------- */
.hero-art[data-drive] { cursor: pointer; }
.hero-art.driving { cursor: default; }
.drive-ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.drive-ui button { pointer-events: auto; font: inherit; cursor: pointer; }
.drive-start {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px; border: 1px solid #3a3f4b;
  background: rgba(7, 8, 11, 0.7); color: var(--text); font-size: 14px; font-weight: 500;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .15s, background .15s;
}
.hero-art:hover .drive-start { border-color: var(--accent); background: rgba(7, 8, 11, 0.9); }
.drive-start::before { content: "\25B6"; margin-right: 8px; font-size: 11px; color: var(--accent); }
.drive-hud {
  position: absolute; top: 18px; left: 18px; right: 18px;
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.drive-hud b { color: var(--accent); font-weight: 500; }
.drive-exit { margin-left: auto; padding: 6px 12px; border: 1px solid #3a3f4b; background: rgba(7, 8, 11, 0.8); color: var(--text); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.drive-exit:hover { border-color: var(--text); }
.drive-help { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 16px; background: rgba(7, 8, 11, 0.85); border: 1px solid #3a3f4b; font-size: 14px; white-space: nowrap; }
.drive-pad { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: 64px 64px 1fr 64px 64px; gap: 10px; }
.drive-pad button { height: 64px; border: 1px solid #3a3f4b; background: rgba(7, 8, 11, 0.75); color: var(--text); font-size: 22px; touch-action: none; user-select: none; -webkit-user-select: none; }
.drive-pad button:active { background: var(--accent); color: #07080b; }
.drive-pad [data-key="down"] { grid-column: 4; }
.drive-pad [data-key="up"] { grid-column: 5; }
.drive-ui [hidden] { display: none !important; }

/* =========================================================
   Page-specific blocks
   ========================================================= */

/* Racing: circuit map with sectors and a timing list. */
.circuit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; margin-top: 48px; }
.circuit svg { width: 100%; height: auto; overflow: visible; }
.circuit .track { fill: none; stroke: #2b2f38; stroke-width: 14; stroke-linejoin: round; }
.circuit .sector { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; opacity: 0.25; transition: opacity .2s, stroke-width .2s; }
.circuit .sector.on { opacity: 1; stroke-width: 5; }
.circuit .tick { fill: var(--text); font-family: var(--mono); font-size: 13px; }
.timing { list-style: none; border-top: 1px solid var(--rule); }
.timing li { display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); cursor: default; transition: background .15s; }
.timing li:hover, .timing li.on { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.timing .s { font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 3px; }
.timing h3 { font-size: 18px; font-weight: 600; }
.timing p { grid-column: 2; font-size: 15px; color: var(--muted); }

/* Racing: bars that grow with each step. */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: end; margin-top: 56px; height: 360px; }
.ladder div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ladder .bar { background: linear-gradient(to top, color-mix(in srgb, var(--accent) 70%, black), var(--accent)); position: relative; }
.ladder .bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.25) 18px 20px); }
.ladder h3 { margin-top: 14px; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.015em; }
.ladder span { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* Mobility: a transit-style route line through the phases. */
.route { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 64px; }
.route::before { content: ""; position: absolute; left: 10%; right: 10%; top: 13px; height: 6px; border-radius: 3px; background: linear-gradient(to right, #3a3f4b, var(--accent)); }
.route li { list-style: none; position: relative; text-align: center; padding-top: 48px; }
.route li::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--bg); border: 4px solid #5a5f6b; }
.route li.goal::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 22px var(--accent); }
.route .n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.route h3 { margin-top: 6px; font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.8vw, 26px); letter-spacing: -0.01em; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; border-top: 2px solid rgba(7,8,11,.8); }
.trio div { padding: 26px 26px 0 0; }
.trio strong { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; color: #07080b; }
.trio p { margin-top: 12px; font-size: 16px; color: rgba(7,8,11,.75); max-width: 30ch; }

/* Applied: tabbed capability panel. */
.tabs { margin-top: 48px; }
.tablist { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid var(--rule); }
.tablist button { font: inherit; font-size: 16px; padding: 14px 20px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.tablist button[aria-selected="true"] { color: var(--text); border-color: var(--accent); }
.tablist button:hover { color: var(--text); }
.panel { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-top: 0; min-height: 320px; }
.panel[hidden] { display: none; }
.panel > div { padding: 36px; }
.panel > div + div { border-left: 1px solid var(--rule); background: var(--panel); }
.panel h3 { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.015em; }
.panel p { margin-top: 12px; color: var(--muted); font-size: 17px; }
.term { font-family: var(--mono); font-size: 14px; line-height: 2; color: #c4c7ce; }
.term .bar3 { display: flex; gap: 6px; margin-bottom: 18px; }
.term .bar3 i { width: 10px; height: 10px; border-radius: 50%; background: #3a3f4b; }
.term b { color: var(--accent); font-weight: 400; }

/* Applied: where the money goes, as a flow. */
.flow { display: grid; grid-template-columns: 1fr 60px 1fr 60px 1.4fr; align-items: center; margin-top: 48px; }
.flow .node { border: 1px solid rgba(7,8,11,.35); padding: 22px; font-family: var(--serif); font-size: 26px; letter-spacing: -0.015em; color: #07080b; background: rgba(255,255,255,.18); }
.flow .arrow { text-align: center; font-size: 28px; color: #07080b; }
.flow ul { list-style: none; display: grid; gap: 8px; }
.flow ul li { border: 1px solid rgba(7,8,11,.35); padding: 12px 16px; font-weight: 600; color: #07080b; background: rgba(255,255,255,.12); }
.flow ul li span { display: block; font-weight: 400; font-size: 14px; color: rgba(7,8,11,.7); }

/* Projects: bento grid. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(240px, auto); gap: 16px; }
.tile-b { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; overflow: hidden; text-decoration: none; background-size: cover; background-position: center right; border: 1px solid var(--rule); min-height: 260px; }
.tile-b::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,8,11,.92) 30%, rgba(7,8,11,.2)); }
.tile-b.light::before { background: linear-gradient(to top, rgba(240,243,247,.96) 35%, rgba(240,243,247,.1)); }
.tile-b > * { position: relative; }
.tile-b.big { grid-column: span 2; grid-row: span 2; }
.tile-b .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c, var(--accent)); }
.tile-b h3 { margin-top: 8px; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.02em; }
.tile-b.big h3 { font-size: clamp(36px, 4vw, 60px); }
.tile-b p { margin-top: 10px; color: #c4c7ce; max-width: 46ch; }
.tile-b.light h3, .tile-b.light p { color: #10151c; }
.tile-b .go { margin-top: 16px; font-weight: 500; font-size: 15px; }
.tile-b:hover { border-color: var(--c, var(--accent)); }

/* Projects: vertical timeline with a sticky heading. */
.vt { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; }
.vt .stick { position: sticky; top: calc(var(--bar) + 40px); align-self: start; }
.vt ol { list-style: none; border-left: 1px solid var(--rule); }
.vt li { position: relative; padding: 0 0 56px 44px; }
.vt li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 11px; height: 11px; background: var(--bg); border: 1px solid var(--accent); }
.vt li:last-child::before { background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.vt .big-n { font-family: var(--serif); font-size: 72px; line-height: 1; color: #2b2f38; }
.vt h3 { margin-top: 6px; font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.015em; }
.vt p { margin-top: 8px; color: var(--muted); max-width: 48ch; }

/* Partners: two-column ledger. */
.ledger { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); margin-top: 48px; }
.ledger > div { padding: 36px; }
.ledger > div + div { border-left: 1px solid var(--rule); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.ledger h3 { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ledger ul { list-style: none; margin-top: 18px; }
.ledger li { padding: 14px 0; border-top: 1px solid var(--rule); font-size: 18px; }
.ledger li span { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }
.ledger .big-q { font-family: var(--serif); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -0.02em; margin-top: 18px; }

/* Partners: ASCII parts list. */
.parts { margin-top: 40px; font-family: var(--mono); font-size: 15px; line-height: 2.1; color: #2a2926; columns: 3; column-gap: 40px; }
.parts div::before { content: "[ ] "; color: #0f8f87; }
.parts-head { font-family: var(--mono); font-size: 13px; color: #8a867c; border-bottom: 1px dashed #c9c4b8; padding-bottom: 10px; margin-top: 36px; display: flex; justify-content: space-between; }

/* Join: big trait words. */
.words { margin-top: 32px; }
.words div { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; gap: 32px; padding: 18px 0; border-bottom: 1px solid #ddd8cc; }
.words strong { font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 8vw, 120px); line-height: 0.95; letter-spacing: -0.035em; color: #151412; transition: color .2s; }
.words div:hover strong { color: #c98a00; }
.words p { font-size: 19px; color: #6a675f; }

/* Join: FAQ. */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 60ch; }

@media (max-width: 1000px) {
  .circuit, .panel, .ledger, .vt { grid-template-columns: 1fr; }
  .panel > div + div, .ledger > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .vt .stick { position: static; }
  .flow { grid-template-columns: 1fr; gap: 10px; }
  .flow .arrow { transform: rotate(90deg); }
  .bento { grid-template-columns: 1fr; }
  .tile-b.big { grid-column: auto; grid-row: auto; }
  .route { grid-template-columns: 1fr; gap: 28px; }
  .route::before { left: 13px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; background: linear-gradient(#3a3f4b, var(--accent)); }
  .route li { text-align: left; padding: 2px 0 0 56px; }
  .route li::before { left: 16px; top: 0; }
  .trio, .ladder { grid-template-columns: 1fr; }
  .ladder { height: auto; }
  .ladder .bar { height: 40px !important; }
  .parts { columns: 2; }
  .words div { grid-template-columns: 1fr; gap: 6px; }
  .tablist { justify-content: flex-start; overflow-x: auto; }
}
.hero-art.driving canvas { filter: none; }
.hero-art.driving { background: #000; }
.hero-art.driving::after { display: none; }
.hero-art.driving .drive-hud { left: 12px; right: 12px; top: 12px; padding: 10px 12px; background: rgba(7, 8, 11, 0.82); }

/* =========================================================
   Paper theme: the whole site in the style of the division cards.
   Cream paper, dark ink, ASCII drawings, division colors as ink.
   ========================================================= */
:root {
  --bg: #f6f3eb;
  --panel: #efebe1;
  --panel-2: #e7e2d6;
  --text: #151412;
  --muted: #6a675f;
  --rule: #ddd8cc;
  --gold: #c98a00;
  --blue: #1f6fd1;
  --accent: #151412;
  --accent-2: #c98a00;
  --on-accent: #f6f3eb;
  --charcoal: #efebe1;
}
body[data-theme="home"]     { --accent: #9a6a00; --accent-2: #1f6fd1; }
body[data-theme="research"] { --accent: #1f6fd1; --accent-2: #0f8f87; }
body[data-theme="applied"]  { --accent: #178a4c; --accent-2: #9a6a00; }
body[data-theme="racing"]   { --accent: #c9271b; --accent-2: #151412; }
body[data-theme="mobility"] { --accent: #9a6a00; --accent-2: #1f6fd1; }
body[data-theme="projects"] { --accent: #6a4ad1; --accent-2: #9a6a00; }
body[data-theme="partners"] { --accent: #0f8f87; --accent-2: #9a6a00; }
body[data-theme="join"]     { --accent: #9a6a00; --accent-2: #c9271b; }
.c-research { --c: #1f6fd1; } .c-applied { --c: #178a4c; } .c-racing { --c: #c9271b; } .c-mobility { --c: #9a6a00; }

html, body { background: var(--bg); color: var(--text); }
.bar { background: rgba(246, 243, 235, 0.94); border-bottom-color: var(--rule); }
.bar nav a { color: var(--muted); }
.bar nav a:hover { color: var(--text); }
.bar nav a[aria-current="page"] { background: var(--panel); border-color: var(--rule); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.bar nav a.cta { background: var(--text); border-color: var(--text); color: var(--bg); }
.bar nav a.cta:hover { background: var(--accent); border-color: var(--accent); }
.mark svg { color: var(--accent); }
.mark b { color: var(--gold); }
.announce a:hover { color: var(--text); }
.menu { border-color: var(--text); color: var(--text); }

/* Banners: ink drawings on paper, no glow, fade into cream. */
.scene { background: var(--bg); }
.scene canvas, .hero-art canvas { filter: none; }
.scene::after { background: linear-gradient(to bottom, rgba(246, 243, 235, 0), var(--bg) 90%); }
.scene-title .side p, .hero-copy .inner > p { color: var(--muted); }
.hero-art { border-color: var(--rule); }
.drive-start { background: rgba(246, 243, 235, 0.9); border-color: var(--rule); color: var(--text); }
.hero-art:hover .drive-start { background: var(--bg); }

/* Buttons. */
.btn { border-color: #cfcabe; color: var(--text); border-radius: 999px; }
.btn:hover { border-color: var(--text); background: transparent; }
.btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.light { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.light:hover { background: var(--accent); border-color: var(--accent); }
.link { color: var(--accent); }

/* Bands become paper and card colors. */
.band-panel, .band-charcoal, .cta-field { background: var(--panel); color: var(--text); border-color: var(--rule); }
.band-charcoal p, .cta-field p { color: var(--muted) !important; }
.band-charcoal h2, .band-charcoal h3, .cta-field h2 { color: var(--text); }
.band-cream { background: var(--bg); }
.band-accent { background: var(--panel); color: var(--text); }
.band-accent h2, .band-accent h3 { color: var(--text); }
.band-accent p, .band-accent .muted { color: var(--muted); }
.band-accent .btn { border-color: #cfcabe; color: var(--text); }
.band-accent .btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.cta-field { border-top: 1px solid var(--rule); }
.cta-field pre { color: #ddd7c9; }
.mark-hl { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); color: var(--text); }
.features { border-color: var(--rule); }
.features div { border-color: var(--accent); }
.features h3 { color: var(--text); }
.highlight { color: #a5a094; }
.highlight b { color: var(--text); }
.more { color: var(--text); }
.split-head p { color: var(--muted); }
h1 em, h2 em, .scene-title h1 em, .hero-copy h1 em, .plain-title em { color: var(--accent); }

/* Page blocks in ink. */
.prompt .ask, .panel > div + div, .ledger > div + div, .form-panel { background: var(--panel); }
.term { color: var(--text); }
.term .bar3 i { background: #cfcabe; }
.tile-b { border-color: var(--rule); }
.tile-b::before { background: linear-gradient(to top, rgba(246, 243, 235, 0.97) 35%, rgba(246, 243, 235, 0.15)); }
.tile-b p, .tile-b.light p { color: var(--muted); }
.tile-b h3 { color: var(--text); }
.vt .big-n { color: #d9d3c5; }
.vt li::before { background: var(--bg); }
.circuit .track { stroke: #ddd8cc; }
.circuit .tick { fill: var(--muted); }
.ladder .bar { background: color-mix(in srgb, var(--accent) 85%, white); }
.ladder .bar::after { background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(246,243,235,.35) 18px 20px); }
.route::before { background: linear-gradient(to right, #ddd8cc, var(--accent)); }
.route li::before { background: var(--bg); border-color: #b9b3a5; }
.trio { border-color: var(--text); }
.trio strong { color: var(--text); }
.trio p { color: var(--muted); }
.flow .node, .flow ul li { color: var(--text); border-color: var(--rule); background: var(--bg); }
.flow ul li span { color: var(--muted); }
.flow .arrow { color: var(--muted); }
.parts { color: var(--text); }
.parts div::before { color: var(--accent); }
.chips li { color: var(--text); }
.paper-row .go { color: var(--accent); }
.huge { color: var(--accent); }
.quote span { color: var(--gold); }
input, textarea, select { background: var(--bg); color: var(--text); border-color: var(--rule); }
.marquee li { background: var(--panel); }
.strip > p { color: var(--muted); }

/* Research index cards and footer. */
.paper .tag { background: var(--panel-2); color: var(--text); }
footer.cols { background: var(--panel); border-top: 1px solid var(--rule); }
footer.cols h4 { color: var(--muted); }
footer.cols ul { color: var(--text); }
footer.cols .legal { color: var(--muted); }
footer.cols > div > p { color: var(--muted) !important; }
.socials a { color: var(--muted); }
.next { border-color: var(--rule); }
.next strong { color: var(--text); }
body[data-theme="reading"] .bar { background: rgba(246, 243, 235, 0.94); }
body[data-theme="reading"] main { background: var(--bg); }
body[data-theme="reading"] .next { background: var(--bg); }

/* Drive mode keeps its own full-color frame. */
.hero-art.driving { background: #000; }
.hero-art.driving .drive-hud { background: rgba(7, 8, 11, 0.82); color: #c4c7ce; }
.hero-art.driving .drive-hud b { color: #fdb515; }
.drive-exit { background: rgba(7, 8, 11, 0.8); color: #ecedef; border-color: #3a3f4b; }
.drive-help { background: rgba(7, 8, 11, 0.85); color: #ecedef; border-color: #3a3f4b; }

/* Engineers-from logo grid and how-it-drives cards. */
.orgs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 40px; }
.org { background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 18px; min-height: 170px; text-align: center; }
.org img { max-width: 120px; max-height: 44px; object-fit: contain; }
.org img.tall { max-height: 64px; }
.org span { font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .orgs { grid-template-columns: repeat(2, 1fr); } }

.cover.dark span, .cover.light span { color: #151412; }

/* Research cards: same type as the division cards. */
.paper h3 { font-family: var(--sans); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; line-height: 1.3; }
.paper p { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--muted); }
.paper .meta { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; }
.paper .tag { border-radius: 999px; padding: 4px 10px; }
.cover span { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; }
.post-tag { font-family: var(--sans); }
/* Card drawings use the same ink as the banners. */
.rail-card pre { color: #1d1c1a; }

/* ---------- Type system ----------
   Serif (Newsreader): page and section headings only.
   Sans (Open Runde): everything else, including all card and row titles.
   Mono (Geist Mono): small labels and numbers only. */
h3, .row h3, .rail-card h3, .product h3, .paper h3, .paper-row h3, .tile-b h3, .tile-b.big h3,
.ladder h3, .route h3, .vt h3, .timing h3, .features h3, .panel h3, .ledger li, .card h3,
.trio strong, .words strong, .outputs strong, .traits strong, .org span, .cover span, .path,
.highlight, .big-q, .flow .node, .statement {
  font-family: var(--sans);
  letter-spacing: -0.015em;
}
h3, .row h3, .rail-card h3, .product h3, .paper h3, .paper-row h3, .ladder h3, .route h3, .vt h3,
.timing h3, .features h3, .panel h3, .tile-b h3 { font-weight: 500; }
.tile-b.big h3, .row h3 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.025em; }
.trio strong, .words strong { font-weight: 500; letter-spacing: -0.035em; }
.outputs strong, .statement, .path, .big-q, .flow .node { font-weight: 500; }
.vt .big-n { font-family: var(--sans); font-weight: 500; letter-spacing: -0.03em; }
h1, h2, .plain-title, .scene-title h1, .hero-copy h1, .post h1, .huge, .quote, .next strong { font-family: var(--serif); }
.num, .tag, .k, .phase, .timing .s, .ladder span, .route .n, .term, .parts, .parts-head, .chips li,
.index, .post-tag, .drive-hud, .footer .credit { font-family: var(--mono); }
.paper .tag, .paper .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.tablist button, .btn, label, input, textarea, select { font-family: var(--sans); }

/* ---------- members (coffee chats) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filters button { font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--muted); cursor: pointer; }
.filters button:hover { color: var(--text); border-color: #cfcabe; }
.filters button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.members { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.member { background: var(--panel); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.member[hidden] { display: none; }
.member header { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; }
.member .face { position: relative; width: 64px; height: 64px; }
.member .face img, .member .initials { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--panel-2); font-family: var(--mono); font-size: 18px; color: var(--c, var(--text)); border: 1px solid var(--rule); }
.member .year { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--text); color: var(--bg); }
.member h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; }
.member .role { margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--c, var(--accent)); }
.member .major { margin-top: 2px; font-size: 14px; color: var(--muted); }
.member .div-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c, var(--muted)); }
.member .ask { background: var(--bg); padding: 14px 16px; text-align: center; }
.member .ask span, .member .interests span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.member .ask p { margin-top: 6px; font-size: 16px; }
.member .interests { text-align: center; }
.member .interests ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.member .interests li { font-size: 13px; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); }
.member .links { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.member .links .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; font-size: 14px; }
.member .links svg { width: 15px; height: 15px; }
.member .links .btn.off { opacity: 0.45; cursor: default; }
.member[data-placeholder] { outline: 1px dashed #cfcabe; outline-offset: -1px; }
@media (max-width: 1100px) { .members { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .members { grid-template-columns: 1fr; } }
.rail.rail-3 { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; overflow: visible; }
.rail.rail-3 .rail-card { min-height: 420px; }
.rail-card p { color: var(--muted); }
@media (max-width: 1000px) { .rail.rail-3 { grid-template-columns: 1fr; } }
label { color: var(--text); }

/* =========================================================
   Soft theme, modeled on entrepreneursatberkeley.com:
   rounded cards with soft shadows on a light grainy page,
   pill navigation and buttons, one sans font, few hard lines.
   ========================================================= */
:root {
  --bg: #f6f5f2;
  --card: #fffefa;
  --panel: #fffefa;
  --panel-2: #f1efe9;
  --text: #121826;
  --muted: #5d6472;
  --rule: rgba(21, 25, 31, 0.08);
  --card-border: 1px solid rgba(21, 25, 31, 0.1);
  --shadow: 0 30px 50px -34px rgba(32, 22, 6, 0.35), 0 14px 22px -20px rgba(20, 22, 28, 0.3), inset 0 1px 0 #fff;
  --shadow-lift: 0 44px 60px -34px rgba(32, 22, 6, 0.45), 0 18px 26px -20px rgba(20, 22, 28, 0.35), inset 0 1px 0 #fff;
  --r: 20px;
  --r-sm: 12px;
}
html, body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* One font: Open Runde everywhere, light and large for headings. */
h1, h2, .plain-title, .scene-title h1, .hero-copy h1, .post h1, .huge, .quote, .next strong, .statement {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.035em;
}
h2 { font-weight: 500; }
.scene-title h1, .hero-copy h1, .plain-title { font-weight: 500; letter-spacing: -0.045em; }
.mark-hl { background: none; color: var(--accent); }

/* Navigation: pills. */
.bar { background: rgba(246, 245, 242, 0.85); border-bottom: 1px solid var(--rule); }
.bar nav { gap: 2px; }
.bar nav a { border-radius: 999px; padding: 8px 14px; border: 1px solid transparent; }
.bar nav a[aria-current="page"] { background: var(--card); border: var(--card-border); box-shadow: 0 6px 14px -10px rgba(20, 22, 28, 0.35), inset 0 1px 0 #fff; }
.bar nav a.cta { border-radius: var(--r-sm); background: var(--text); color: #fff; box-shadow: 0 10px 18px -10px rgba(18, 24, 38, 0.6), inset 0 1px 0 rgba(255,255,255,.18); padding: 9px 18px; }
.announce { border-bottom: 0; }

/* Buttons. */
.btn { border-radius: var(--r-sm); border: var(--card-border); background: var(--card); box-shadow: 0 8px 16px -12px rgba(20, 22, 28, 0.35), inset 0 1px 0 #fff; }
.btn:hover { border-color: rgba(21, 25, 31, 0.22); background: var(--card); }
.btn.primary, .btn.light { background: var(--text); border-color: var(--text); color: #fff; box-shadow: 0 12px 20px -12px rgba(18, 24, 38, 0.7), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.primary:hover, .btn.light:hover { background: #1f2a40; border-color: #1f2a40; }

/* Sections: separated by space, not lines. */
.band-panel, .band-charcoal, .band-accent, .band-cream, .cta-field { background: transparent; border: 0; }
.next, footer.cols { border-top: 0; }
footer.cols { background: transparent; }

/* Cards. */
.rail-card, .member, .org, .tile-b, .form-panel, .ledger, .flow .node, .flow ul li, .marquee li,
.paper .cover, .post-cover, .timing, .faq, .tabs .panel, .term-card {
  border-radius: var(--r);
  border: var(--card-border);
  background-color: var(--card);
  box-shadow: var(--shadow);
}
.rail-card, .member, .org { transition: transform .2s, box-shadow .2s; }
a.rail-card:hover, .member:hover, .org:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.rail-card { background: var(--card); }
.rail-card pre { color: var(--text); }
.member .ask { background: var(--panel-2); border-radius: var(--r-sm); }
.member .interests li, .chips li, .paper .tag { border-radius: 999px; background: var(--card); border: var(--card-border); }
.member[data-placeholder] { outline: 0; }
.member .face img, .member .initials { border: 3px solid #fff; box-shadow: 0 6px 14px -8px rgba(20,22,28,.4); }
.org { min-height: 150px; }
.marquee li { border-radius: var(--r-sm); box-shadow: 0 8px 16px -12px rgba(20, 22, 28, 0.3), inset 0 1px 0 #fff; }
.strip, .strip .marquee { border: 0; }

/* Lists become single rounded cards with soft row dividers. */
.paper-rows, .rows, .timing { background: var(--card); border: var(--card-border); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px 24px; }
.paper-row, .row, .timing li { border-color: var(--rule); }
.paper-row:last-child, .row:last-child, .timing li:last-child { border-bottom: 0; }
.paper-rows { border-top: var(--card-border); }

/* Project rows become separate cards. */
.products { display: grid; gap: 16px; }
.product, .product:first-child { border: var(--card-border); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); padding: 32px; }
.product .mark-ico { border-style: solid; border-width: 1px; background: var(--panel-2); }

/* Research cards. */
.paper .cover { overflow: hidden; }
.papers { gap: 56px 28px; }

/* Forms. */
.form-panel { border-top: var(--card-border); padding: 32px; }
input, textarea, select { border-radius: var(--r-sm); background: var(--bg); border: var(--card-border); }
.filters button { background: var(--card); border: var(--card-border); box-shadow: 0 6px 12px -10px rgba(20,22,28,.35); }
.filters button[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }

/* Racing / mobility / partners blocks. */
.ladder .bar { border-radius: 14px 14px 0 0; }
.ladder .bar::after { border-radius: inherit; }
.tile-b { overflow: hidden; }
.ledger { overflow: hidden; }
.ledger > div + div { background: var(--panel-2); }
.flow .node { padding: 22px 24px; }
.flow ul li { padding: 14px 18px; }
.panel { border-radius: 0 0 var(--r) var(--r); }
.tablist { border-bottom: 0; gap: 6px; margin-bottom: 14px; }
.tablist button { border-radius: 999px; border: var(--card-border); background: var(--card); margin: 0; }
.tablist button[aria-selected="true"] { background: var(--text); color: #fff; border-color: var(--text); }
.panel { border: var(--card-border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.features div { background: var(--card); border: var(--card-border); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 22px; border-left: var(--card-border); }
.features { border-top: 0; padding-top: 0; gap: 16px; }
.trio { border-top: 0; gap: 16px; }
.trio div { background: var(--card); border: var(--card-border); border-radius: var(--r); box-shadow: var(--shadow); padding: 26px; }
.parts-head { border-bottom: 0; }
.parts { background: var(--card); border: var(--card-border); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px 28px; }
.words div { border-bottom-color: var(--rule); }
.faq { padding: 4px 24px; background: var(--card); }
.faq details:last-child { border-bottom: 0; }
.vt ol { border-left-color: var(--rule); }
.cta-field pre { opacity: 0.6; }
.post .tldr { border-radius: var(--r); background: var(--card); border: var(--card-border); box-shadow: var(--shadow); }
.hero-art { border-left: 0; }

/* Drive mode panel gets rounded corners too. */
.hero-art.driving { border-radius: var(--r); }
.scene, .hero-art { background: transparent; }
.scene::after { background: linear-gradient(to bottom, rgba(246, 245, 242, 0), var(--bg) 92%); }
.hero-art::after { display: none; }

/* Scrolling rows: no visible scrollbar (still swipeable), and room for
   card shadows and the hover lift so they don't trigger scrolling. */
.rail, .tablist, .marquee {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar, .tablist::-webkit-scrollbar, .marquee::-webkit-scrollbar { display: none; }
.rail { padding: 8px 4px 40px; margin-left: -4px; margin-right: -4px; }
@media (min-width: 1001px) {
  .rail { overflow: visible; grid-auto-columns: 1fr; }
}

/* Racing: competition cards and race formats. */
.comps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.comp { background: var(--card); border: var(--card-border); border-radius: var(--r); box-shadow: var(--shadow); padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s, box-shadow .2s; }
.comp:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.comp-logo { height: 92px; display: grid; place-items: center start; background: var(--panel-2); border-radius: var(--r-sm); padding: 0 22px; }
.comp-logo img { max-height: 40px; max-width: 80%; object-fit: contain; }
.comp-logo img.tall { max-height: 74px; }
.comp-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.badge { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); }
.scale { font-size: 13px; color: var(--muted); }
.comp h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.comp p { color: var(--muted); font-size: 15px; line-height: 1.55; flex: 1; }
.tests { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tests li { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: var(--card-border); }
.comp .more { margin-top: 4px; font-size: 14px; color: var(--accent); }
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.format { background: var(--card); border: var(--card-border); border-radius: var(--r); box-shadow: var(--shadow); padding: 26px; }
.format h3 { margin-top: 12px; font-size: 22px; font-weight: 500; }
.format p { margin-top: 8px; color: var(--muted); font-size: 15px; }
@media (max-width: 1000px) { .comps, .formats { grid-template-columns: 1fr; } }
.comp-logo img { max-height: 48px; max-width: 85%; }
.comp-logo img.tall { max-height: 80px; }

/* ---------- Mobility scroll journey ---------- */
.journey { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 96px); max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 80px; }
.journey-stage { position: sticky; top: calc(var(--bar) + 32px); height: calc(100vh - var(--bar) - 64px); height: calc(100svh - var(--bar) - 64px); display: grid; align-items: center; }
.stage-card { position: relative; height: min(560px, 100%); background: var(--card); border: var(--card-border); border-radius: 28px; box-shadow: var(--shadow-lift); overflow: hidden; }
.stage-progress { position: absolute; top: 18px; left: 22px; right: 22px; height: 3px; border-radius: 3px; background: var(--panel-2); z-index: 2; }
.stage-progress span { display: block; height: 100%; width: 20%; border-radius: inherit; background: var(--accent); transition: width .5s ease; }
.stage-layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.stage-layer.is-on { opacity: 1; transform: none; }
.stage-layer pre { font-family: var(--mono); font-size: 14px; line-height: 1.1; color: var(--text); margin: 0; }
.stage-cap { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.journey-steps { list-style: none; }
.journey-step { min-height: 80vh; min-height: 80svh; display: flex; flex-direction: column; justify-content: center; opacity: 0.28; transition: opacity .4s; }
.journey-step.is-on { opacity: 1; }
.journey-step h2 { margin-top: 12px; font-size: clamp(30px, 3.4vw, 48px); }
.journey-step p { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 44ch; }

/* The app mockup in the last step. */
.phone { width: 260px; height: 500px; border-radius: 38px; background: var(--text); padding: 10px; box-shadow: 0 30px 50px -24px rgba(18, 24, 38, 0.6); display: flex; flex-direction: column; }
.phone > * { background: var(--bg); }
.phone-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 8px; border-radius: 28px 28px 0 0; font-size: 11px; color: var(--muted); }
.phone-bar b { font-weight: 600; color: var(--text); font-size: 12px; }
.phone-map { flex: 1; display: grid; place-items: center; overflow: hidden; background: var(--panel-2); }
.phone-map pre { font-size: 6px; line-height: 1.1; color: var(--text); }
.phone-sheet { border-radius: 0 0 28px 28px; padding: 14px 14px 16px; display: grid; gap: 7px; }
.where { font-size: 15px; font-weight: 600; }
.trip { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.trip .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.trip .dot.a { background: var(--text); }
.trip .dot.b { background: var(--accent); margin-left: 6px; }
.choice { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 10px; border-radius: 12px; border: var(--card-border); background: var(--card); font-size: 12px; }
.choice span { font-weight: 600; }
.choice small { grid-column: 1; color: var(--muted); font-size: 10px; }
.choice b { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 500; }
.choice.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.order { margin-top: 2px; text-align: center; padding: 10px; border-radius: 12px; background: var(--text); color: #fff; font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; padding-top: 0; }
  .journey-stage { top: calc(var(--bar) + 8px); height: 46vh; height: 46svh; z-index: 2; }
  .stage-card { height: 100%; }
  .stage-layer pre { font-size: 8px; }
  .phone { transform: scale(.7); }
  .journey-step { min-height: 70vh; min-height: 70svh; background: linear-gradient(to bottom, transparent, var(--bg) 30%); }
}
@media (prefers-reduced-motion: reduce) {
  .stage-layer, .journey-step { transition: none; }
}
@media (max-width: 900px) {
  .journey-stage { height: 44vh; height: 44svh; }
  .phone { transform: scale(.56); transform-origin: center; }
  .stage-layer pre { font-size: 9px; }
  .journey-step { min-height: 72vh; min-height: 72svh; justify-content: flex-end; padding-bottom: 6vh; background: none; }
  .journey-step p { font-size: 16px; }
}

/* ---------- Mobility: full-screen campus journey ---------- */
.journey { display: block; max-width: none; padding: 0; margin: 0; position: relative; }
.journey-stage.scene {
  position: sticky;
  top: var(--bar);
  height: calc(100vh - var(--bar));
  height: calc(100svh - var(--bar));
  min-height: 0;
  margin: 0;
  z-index: 0;
  overflow: hidden;
}
.journey-stage.scene::after { display: none; }
.journey-stage .stage-progress { position: absolute; top: 20px; left: var(--gutter); right: var(--gutter); height: 3px; background: rgba(21,25,31,.08); border-radius: 3px; z-index: 2; }
.journey-stage .stage-progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .6s ease; }
.stage-phone { position: absolute; right: clamp(24px, 7vw, 120px); top: 50%; transform: translateY(-46%) scale(.96); opacity: 0; transition: opacity .6s ease, transform .6s ease; z-index: 2; pointer-events: none; }
.journey-stage.at-5 .stage-phone { opacity: 1; transform: translateY(-50%) scale(1); }
.journey-steps { list-style: none; position: relative; z-index: 2; margin-top: calc(-100vh + var(--bar)); margin-top: calc(-100svh + var(--bar)); pointer-events: none; }
.journey-step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 0 var(--gutter); opacity: 1; background: none; justify-content: flex-start; }
.step-card {
  pointer-events: auto;
  max-width: 460px;
  padding: 28px 30px;
  border-radius: var(--r);
  background: rgba(255, 254, 250, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--card-border);
  box-shadow: var(--shadow-lift);
  opacity: 0.35;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.journey-step.is-on .step-card { opacity: 1; transform: none; }
.step-card h1 { font-size: clamp(40px, 5vw, 72px); line-height: 0.98; margin-top: 12px; }
.step-card h1 em { font-style: normal; color: var(--accent); }
.step-card h2 { margin-top: 10px; font-size: clamp(28px, 3vw, 42px); }
.step-card p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.hero-card { max-width: 560px; }
.scroll-hint { display: inline-block; margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) {
  .journey-step { align-items: flex-end; padding-bottom: 8vh; }
  .step-card { max-width: none; padding: 20px 22px; }
  .stage-phone { right: 50%; top: 34%; transform: translate(50%, -50%) scale(.6); }
  .journey-stage.at-5 .stage-phone { transform: translate(50%, -50%) scale(.62); }
}
.journey-step { flex-direction: row; align-items: center; justify-content: flex-start; }
@media (max-width: 900px) { .journey-step { align-items: flex-end; } }

/* ---------- Motion and polish ---------- */
.motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.motion .reveal.in { opacity: 1; transform: none; }
/* Bars grow and route lines draw once revealed. */
.motion .ladder > .reveal .bar { transform: scaleY(0); transform-origin: bottom; transition: transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0ms) + 150ms); }
.motion .ladder > .reveal.in .bar { transform: none; }
.motion .route::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .2s; }
.motion .route:has(.in)::before { transform: none; }
/* Statements light up word by word. */
.motion .highlight .w { color: #c4c0b6; transition: color .35s ease; }
.motion .highlight .w.lit { color: #8a877f; }
.motion .highlight b .w.lit { color: var(--text); }
/* Hero titles rise in. */
.motion .rise { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .9s ease .1s, transform .9s cubic-bezier(.2,.7,.2,1) .1s, filter .9s ease .1s; }
.motion.loaded .rise { opacity: 1; transform: none; filter: none; }
.motion .scene-title .side, .motion .hero-copy .inner > p, .motion .hero-copy .actions { opacity: 0; transform: translateY(16px); transition: opacity .8s ease .45s, transform .8s ease .45s; }
.motion.loaded .scene-title .side, .motion.loaded .hero-copy .inner > p, .motion.loaded .hero-copy .actions { opacity: 1; transform: none; }

/* Buttons and links respond to touch and hover. */
.btn { transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn.primary:hover, .btn.light:hover { transform: translateY(-1px); }
.more span, .paper-row .go, .row .arrow { display: inline-block; transition: transform .2s; }
.more:hover span, .paper-row:hover .go { transform: translateX(3px); }
.bar nav a { transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.bar nav a:not(.cta):hover { background: rgba(255, 254, 250, .7); }
.comp-logo img, .org img { transition: transform .3s ease; }
.comp:hover .comp-logo img, .org:hover img { transform: scale(1.05); }
.paper .cover { transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .2s; }
.paper:hover .cover { transform: translateY(-4px); }
.member .face img, .member .initials { transition: transform .3s; }
.member:hover .initials, .member:hover .face img { transform: rotate(-4deg) scale(1.04); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
html { scroll-behavior: smooth; }

/* Bigger tap targets on phones. */
@media (max-width: 700px) {
  .mark { padding: 8px 0; }
  .more, .comp .more, .announce a { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
}

/* ---------- Mobility: labels over the 3D campus ---------- */
.label-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity .35s ease; }
.lbl.off { opacity: 0; }
.lbl-place span { display: inline-block; transform: translate(-50%, -100%); font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: rgba(255,254,250,.88); border: var(--card-border); box-shadow: 0 6px 14px -10px rgba(20,22,28,.4); white-space: nowrap; }
.lbl-place span::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: rgba(21,25,31,.35); }
.lbl-box { border: 1.5px solid var(--accent); border-radius: 4px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lbl-box span { position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; padding: 1px 5px; border-radius: 3px; background: var(--accent); color: #fff; white-space: nowrap; }
.lbl-box b { font-weight: 400; opacity: .8; }
.lbl-tag { transform-origin: left bottom; }
.lbl-tag > * { display: block; }
.lbl-tag { padding: 0; }
.lbl-tag strong, .lbl-tag small { position: relative; left: 18px; top: -46px; white-space: nowrap; }
.lbl-tag::before { content: ""; position: absolute; left: 0; top: -22px; width: 18px; height: 22px; border-left: 1.5px solid var(--text); border-top: 1.5px solid var(--text); transform: skewX(-30deg); transform-origin: bottom left; }
.lbl-tag strong { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; font-weight: 500; padding: 4px 9px; border-radius: 6px 6px 0 0; background: var(--text); color: #fff; }
.lbl-tag small { display: block; font-size: 12px; padding: 5px 9px; border-radius: 0 6px 6px 6px; background: rgba(255,254,250,.94); border: var(--card-border); box-shadow: 0 10px 20px -12px rgba(20,22,28,.45); width: max-content; }
.lbl-accent strong { background: var(--accent); }

/* Step rail. */
.step-rail { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: 12px; }
.step-rail a { display: flex; align-items: center; gap: 10px; justify-content: flex-end; text-decoration: none; font-size: 12px; color: var(--muted); }
.step-rail a span { opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; background: rgba(255,254,250,.9); padding: 3px 9px; border-radius: 999px; border: var(--card-border); }
.step-rail a:hover span, .step-rail a.on span { opacity: 1; transform: none; }
.step-rail a i { order: 2; width: 9px; height: 9px; border-radius: 50%; background: rgba(21,25,31,.18); transition: background .25s, transform .25s; }
.step-rail a.on i { background: var(--accent); transform: scale(1.5); }
.journey-stage.at-5 .step-rail { opacity: 0; pointer-events: none; }
.step-rail { transition: opacity .4s; }

/* Tighter, lighter step cards. */
.step-card { max-width: 420px; padding: 24px 26px; background: rgba(255, 254, 250, 0.78); }
.step-card h2 { font-size: clamp(26px, 2.6vw, 38px); }
.step-card p { font-size: 16px; }
.hero-card { max-width: 520px; }

/* How a ride would work. */
.ride-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; counter-reset: s; }
.ride-steps li { background: var(--card); border: var(--card-border); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.ride-steps li:not(:last-child)::after { content: "\2192"; position: absolute; right: -16px; top: 92px; font-size: 16px; color: var(--muted); z-index: 1; }
.ride-steps h3 { font-size: 20px; font-weight: 500; margin-top: 4px; }
.ride-steps p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.mini { height: 128px; border-radius: 16px; background: var(--panel-2); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mini b { font-size: 13px; font-weight: 600; }
.mini i { font-style: normal; font-size: 12px; }
.mini .field { background: var(--card); border: var(--card-border); border-radius: 8px; padding: 6px 9px; color: var(--muted); }
.mini .btnish { margin-top: auto; background: var(--text); color: #fff; border-radius: 8px; padding: 7px; text-align: center; font-weight: 600; }
.mini .row2 { color: var(--muted); }
.mini .bar2 { height: 6px; border-radius: 3px; background: rgba(21,25,31,.1); overflow: hidden; margin-top: auto; }
.mini .bar2 em { display: block; height: 100%; width: 40%; background: var(--accent); border-radius: inherit; animation: fill 2.6s ease-in-out infinite; }
@keyframes fill { from { width: 8%; } to { width: 92%; } }
.mini .route2 { flex: 1; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px) center / 100% 2px no-repeat, var(--card); position: relative; }
.mini .route2::after { content: ""; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--text); animation: drive 3s linear infinite; }
@keyframes drive { from { left: 4%; } to { left: 88%; } }
.mini .check { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 16px; margin: 6px 0; }
@media (max-width: 1000px) {
  .ride-steps { grid-template-columns: 1fr 1fr; }
  .ride-steps li::after { display: none; }
  .step-rail { display: none; }
}
@media (max-width: 600px) { .ride-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mini .bar2 em, .mini .route2::after { animation: none; } }