/* ============================================================
   NQB8: zero to one to infinity.
   A periwinkle particle field goes literally 0 -> 1 -> 8 -> ∞.
   One accent hue: periwinkle. Everything else is luminance on ink.
   Type: Switzer throughout.
   ============================================================ */

:root {
  --ink: #0a0a0b;
  --ink-2: #0e0e12;
  --text: #f4f3f1;
  --dim: #9a9aa2;
  --peri: #6f8fce;
  --peri-soft: #5f82c2;
  --rule: rgba(244, 243, 241, 0.14);
  --sans: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  /* Native chrome (scrollbars, selection UI) renders dark, not white. */
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* scroll-behavior stays auto: Lenis owns scroll smoothing and the two fight. */
html { overflow-x: clip; background: var(--ink); }

body {
  overflow-x: clip;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--peri); color: var(--ink); }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--peri);
  outline-offset: 4px;
  border-radius: 1px;
}
#main:focus { outline: none; }

.mark8 { color: var(--peri); }

/* The real wordmark. White nqb + periwinkle 8, transparent PNG. */
.logo-img {
  display: block;
  height: 1.35rem;
  width: auto;
}
.loader-word .logo-img { height: 1.8rem; margin: 0 auto; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--text);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: none; }

/* ---------------- Header ---------------- */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem var(--pad-x);
  transition: transform 420ms var(--ease-out);
  will-change: transform;
}
/* Tucked away while scrolling down; any upward scroll brings it back,
   and keyboard focus inside always untucks it. */
.site-head.tucked { transform: translateY(-110%); }
.site-head.tucked:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-head { transition: none; }
}

.wordmark {
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
/* Padding grows the hit area to ~40px; the negative margin gives the
   space straight back, so the text sits exactly where it always did. */
.site-nav a {
  position: relative;
  padding: 0.55rem 0.45rem;
  margin: -0.55rem -0.45rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--dim);
  transition: color 240ms ease;
  -webkit-tap-highlight-color: transparent;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0.45rem; right: 0.45rem;
  bottom: calc(0.55rem - 0.4em);
  height: 1px;
  background: var(--peri);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms var(--ease-out), opacity 240ms ease;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
/* Where you are: the current page keeps its underline, at half voice. */
.site-nav a[aria-current] { color: var(--text); }
.site-nav a[aria-current]::after { transform: scaleX(1); opacity: 0.55; }
.site-nav a[aria-current]:hover::after,
.site-nav a[aria-current]:focus-visible::after { opacity: 1; }

/* ---------------- Loader ---------------- */

.loader {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  transition: opacity 600ms ease 120ms, visibility 0s 800ms;
}
.loader-mark { text-align: center; }
.loader-word {
  display: block;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--text);
}
body.ready .loader { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes failsafe-hide { to { opacity: 0; visibility: hidden; } }
@keyframes failsafe-show { to { opacity: 1; transform: none; visibility: visible; } }
body:not(.ready) .loader { animation: failsafe-hide 600ms ease 6s forwards; }
body:not(.ready) .scene .line,
body:not(.ready) .scene .li,
body:not(.ready) .coda-lede .line,
body:not(.ready) .coda-actions,
body:not(.ready) .coda-meta,
body:not(.ready) .amb-eyebrow,
body:not(.ready) .amb-title,
body:not(.ready) .amb-lede,
body:not(.ready) .amb-body,
body:not(.ready) .amb-apply { animation: failsafe-show 700ms ease 6.3s forwards; }

/* Visually hidden, fully available to assistive tech. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Narrative track ---------------- */

.track { position: relative; height: 1140vh; }
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fallback-art { display: none; }

.scene {
  position: absolute; left: 0; width: 100%;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad-x);
  pointer-events: none;
}
.scene a { pointer-events: auto; }

#what        { top: 0; }        /* the hero: thesis leads */
#s-conviction { top: 250vh; }
#s-zto        { top: 480vh; }
#s-four       { top: 660vh; }
#s-hold       { top: 840vh; }

.place-center { align-items: center; text-align: center; }
.place-left  { align-items: flex-start; }
.place-right { align-items: flex-end; }
.lift { justify-content: flex-start; padding-top: 16vh; }

/* Reveal choreography: masked line rise + fade. */
.scene .line {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 340ms ease, transform 680ms var(--ease-out);
}
.scene .line:has(.li) {
  overflow: hidden;
  transform: none;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}
.scene .li {
  display: block;
  transform: translateY(118%);
  transition: transform 720ms var(--ease-out);
}
.scene.active .line { opacity: 1; transform: none; }
.scene.active .li { transform: none; }
.scene.active .line:nth-child(2),
.scene.active .line:nth-child(2) .li { transition-delay: 50ms; }
.scene:not(.active) .line { transition-duration: 300ms, 300ms; transition-delay: 0ms; }
.scene:not(.active) .li { transition-duration: 300ms; transition-delay: 0ms; }

.thesis {
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 15ch;
}
.thesis .line { display: block; }

/* Discipline lockups stick in the field's open space. Each cap scene
   is taller than a viewport so the sticky hold lasts through the whole
   passage of its data-window, not just the first few hundred pixels. */
.cap { justify-content: flex-start; min-height: 300vh; }
.cap-hold { position: sticky; width: min(31rem, 90%); isolation: isolate; }
/* A soft shade behind each lockup. Invisible against clean black; where
   a formation drifts under the words, the field dims a touch and the
   type stays legible. */
.cap-hold::before {
  content: "";
  position: absolute;
  inset: -3.5rem -5rem -4rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 10, 11, 0.58), rgba(10, 10, 11, 0) 68%);
}
.place-left.cap { align-items: flex-start; }
.place-right.cap { align-items: flex-end; }

#s-conviction .cap-hold { top: 30vh; }
#s-zto        .cap-hold { top: 32vh; }
#s-four       .cap-hold { top: 30vh; }
#s-hold       .cap-hold { top: 15vh; }

.cap-name {
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.cap-desc {
  margin-top: 1.4rem;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.55;
  color: var(--dim);
  max-width: 30rem;
}

body.pose-mode .cap-hold { position: fixed; z-index: 5; }
body.pose-mode .place-left.cap .cap-hold { left: var(--pad-x); right: auto; }
body.pose-mode .place-right.cap .cap-hold { right: var(--pad-x); left: auto; }

/* ---------------- Coda ---------------- */

/* The coda never covers the field: the particles disperse to clean
   black first, then the text reveals in the emptiness they leave. */
.coda {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  background: transparent;
  color: var(--text);
  /* A full viewport: the coda fills the black the field leaves behind,
     and together with the footer it closes the document flush. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* The #contact jump target must sit at the coda's true top — as a flex
   item it would be centred mid-panel and anchor glides would overshoot. */
.coda > #contact { position: absolute; top: 0; left: 0; }
.coda-lede .line,
.coda-actions,
.coda-meta {
  opacity: 0;
  transform: translateY(18px);
  /* visibility keeps the hidden links out of the tab order */
  visibility: hidden;
  transition: opacity 700ms ease, transform 1100ms var(--ease-out), visibility 0s linear 700ms;
}
.coda.on .coda-lede .line,
.coda.on .coda-actions,
.coda.on .coda-meta {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 700ms ease, transform 1100ms var(--ease-out), visibility 0s;
}
.coda.on .coda-actions { transition-delay: 240ms, 240ms, 0s; }
.coda.on .coda-meta { transition-delay: 520ms, 520ms, 0s; }
/* The story page has no footer: the copyright sits in the coda's floor. */
.coda-meta {
  position: absolute;
  left: 0; right: 0;
  bottom: 1.4rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--dim);
}
.coda-inner {
  padding: clamp(7rem, 18vh, 12rem) var(--pad-x) clamp(6rem, 14vh, 10rem);
  max-width: 74rem; margin: 0 auto;
  text-align: center;
}
.door {
  display: inline-block;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 2.2rem);
  letter-spacing: -0.025em;
  color: var(--peri);
  border-bottom: 1px solid rgba(111, 143, 206, 0.4);
  padding-bottom: 0.25rem;
  transition: border-color 260ms ease, color 260ms ease;
}
.door:hover, .door:focus-visible { border-bottom-color: var(--peri); }

/* ---------------- Footer ---------------- */

.site-foot {
  position: relative; z-index: 2;
  background: var(--ink);
  color: var(--text);
  padding: 1.6rem var(--pad-x);
  border-top: 1px solid rgba(244, 243, 241, 0.08);
}
.foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  max-width: 74rem; margin: 0 auto;
}
.foot-brand { font-weight: 600; font-size: 1.125rem; letter-spacing: 0.02em; }
.foot-brand .logo-img { height: 1rem; }
.foot-links { display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); }
.foot-links a {
  font-size: 0.8125rem; color: var(--dim);
  padding: 0.55rem 0.35rem; margin: -0.55rem -0.35rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 240ms ease, text-decoration-color 240ms ease;
  -webkit-tap-highlight-color: transparent;
}
.foot-links a:hover, .foot-links a:focus-visible { color: var(--text); text-decoration-color: var(--peri); }
.foot-links a[aria-current] { color: var(--text); }
.foot-meta { display: flex; gap: 1.75rem; font-size: 0.75rem; color: var(--dim); }

/* ---------------- Small screens ---------------- */

@media (max-width: 760px), (max-aspect-ratio: 27/20) {
  .site-head { padding: 1.1rem 1.25rem; }
  .wordmark { font-size: 1rem; }
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: 0.8125rem; }
  /* Everything centers on small screens, and the lockups keep their
     sticky hold. Text lives in the upper third; the particle story is
     framed low (portrait camera bias), so words never sit on the field. */
  .scene, .place-left, .place-right { align-items: center; text-align: center; }
  /* Outrank the desktop .place-left.cap / .place-right.cap rules. */
  .place-left.cap, .place-right.cap { align-items: center; }
  #what.hero { justify-content: flex-start; padding-top: 18vh; }
  /* Balanced wrap + explicit centring so the stacked thesis reads
     symmetrical regardless of how the lines break. */
  #what.hero .thesis { margin-inline: auto; text-wrap: balance; }
  .cap { justify-content: flex-start; }
  .cap-hold { position: sticky; width: min(26rem, 92%); }
  /* ID-strength to beat the desktop per-scene pins. */
  #s-conviction .cap-hold, #s-zto .cap-hold,
  #s-four .cap-hold, #s-hold .cap-hold { top: 12vh; }
  .cap-desc { margin-left: auto; margin-right: auto; }
}

/* ---------------- Static / reduced-motion ---------------- */

body.static-flow .track { height: auto; }
body.static-flow .coda { margin-top: 0; background: var(--ink); }
body.static-flow .coda-lede .line,
body.static-flow .coda-actions,
body.static-flow .coda-meta { opacity: 1; transform: none; visibility: visible; transition: none; }
body.static-flow .stage { position: absolute; inset: 0 0 auto 0; height: 100vh; z-index: -1; }
body.static-flow.nowebgl #gl { display: none; }
body.static-flow.nowebgl .fallback-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
body.static-flow .stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,11,0.35), rgba(10,10,11,0.92));
}
body.static-flow .scene {
  position: static; min-height: 0;
  padding-top: clamp(4rem, 12vh, 8rem); padding-bottom: clamp(4rem, 12vh, 8rem);
}
body.static-flow #what { padding-top: clamp(9rem, 30vh, 16rem); }
body.static-flow .scene .line,
body.static-flow .scene .li { opacity: 1; transform: none; transition: none; }
body.static-flow .cap-hold { position: static; width: auto; }
body.static-flow .loader { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene .line, .scene .li,
  .site-nav a::after, .loader { transition: none; animation: none; }
}

/* ============================================================
   E2E uplift: hero hierarchy, orientation rail, closing panel
   ============================================================ */

/* ---- Hero: the thesis leads, and it is the largest thing here ---- */
#what.hero {
  justify-content: center;
  gap: 0;
}
#what.hero .thesis {
  font-size: clamp(3rem, 8.2vw, 8.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 13ch;
}
/* Landscape desktop: the thesis reads as one unbroken line. Keyed to
   the same aspect threshold as the renderer's portrait framing. */
@media (min-width: 761px) and (min-aspect-ratio: 27/20) {
  #what.hero .thesis { max-width: none; white-space: nowrap; font-size: clamp(2.6rem, 5vw, 5.2rem); }
  #what.hero .thesis .line { display: inline-block; }
}

/* The landing holds its breath: thesis hidden until the first scroll.
   The chevron stays — it is the invitation. */
body.await-scroll #what .line { opacity: 0; }
body.await-scroll #what .li { transform: translateY(118%); }

/* One Organism: the DOM bows out while the field morphs to the next page. */
body.leaving main,
body.leaving .site-head,
body.leaving .site-foot,
body.leaving .rail { opacity: 0; transition: opacity 520ms ease; }

/* The verb rolls: build -> scale -> run -> fund, a slot of one word.
   Width eases so the centred line re-balances with each verb. */
.verb-rot {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  /* The 1em slot carries ~0.2em of descent below its internal baseline;
     dropping the box by that much lines the verbs up with "We". */
  vertical-align: -0.2em;
  text-align: left;
  transition: width 650ms var(--ease-out);
}
.verb-strip { display: block; }
/* max-content so each word keeps its natural width even when the
   container is pinned — the slot is measured from these. */
.verb { display: block; width: max-content; height: 1em; line-height: 1; }
.verb::before { content: attr(data-verb); }
@media (prefers-reduced-motion: reduce) {
  .verb-rot { width: auto !important; }
  .verb-strip { transform: none !important; }
}


/* ---- Orientation rail: where you are in a very long scroll ---- */
.rail {
  position: fixed;
  right: clamp(0.9rem, 2.2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  height: min(46vh, 380px);
  width: 12px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
body.ready.scrolled .rail,
body.ready.cap-mode .rail { opacity: 1; }
.rail-line {
  position: relative;
  width: 1px;
  height: 100%;
  background: rgba(244, 243, 241, 0.16);
}
.rail-fill {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 0%;
  background: var(--peri);
  box-shadow: 0 0 4px rgba(111, 143, 206, 0.4);
}
.rail-ticks {
  position: absolute;
  inset: 0;
  display: block;
}
/* Each tick is a link to its passage: a 28px target centred on the
   line, drawing a 5px tick — nothing visible pokes past the edge. */
.rail-ticks a {
  position: absolute;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.rail-ticks a::before {
  content: "";
  width: 5px;
  height: 1px;
  background: rgba(244, 243, 241, 0.3);
  transition: background 400ms ease, width 300ms var(--ease-out);
}
.rail-ticks a.on::before { background: var(--peri); }
.rail-ticks a:hover::before,
.rail-ticks a:focus-visible::before { width: 9px; background: var(--text); }
.rail-ticks a:focus-visible { outline-offset: -6px; }
/* The passage name surfaces beside the tick while it is pointed at. */
.rail-ticks a::after {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 0.2rem);
  top: 50%;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--dim);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%) translateX(4px);
  transition: opacity 240ms ease, transform 380ms var(--ease-out);
  pointer-events: none;
}
.rail-ticks a:hover::after,
.rail-ticks a:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .rail-ticks a::before, .rail-ticks a::after { transition: none; }
}

/* ---- Closing panel ---- */
.coda-lede {
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-align: center;
}
.coda-lede .line { display: block; }
.coda-actions {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
/* The coda types itself in behind a periwinkle caret. */
.caret {
  color: var(--peri);
  font-weight: 300;
  margin-left: 0.05em;
  animation: caretblink 1.05s steps(1) infinite;
}
.caret[hidden] { display: none; }
@keyframes caretblink { 50% { opacity: 0; } }

/* A whisper of a chevron under the thesis: scroll, or click to begin. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(6vh - 0.9rem);
  transform: translateX(-50%);
  display: inline-flex;
  padding: 0.9rem;
  -webkit-tap-highlight-color: transparent;
  color: var(--text);
  opacity: 0.45;
  transition: opacity 500ms ease, visibility 0s;
  animation: cue-drift 2.6s ease-in-out infinite;
}
.scroll-cue:hover, .scroll-cue:focus-visible { opacity: 0.75; }
.scene:not(.active) .scroll-cue {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
@keyframes cue-drift {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}
/* The passage chevrons live at the bottom of the screen, not with the
   text — the same seat the hero cue uses, one continuous invitation. */
.cap-cue {
  position: fixed;
  left: 50%;
  bottom: calc(6vh - 0.9rem);
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  padding: 0.9rem;
  -webkit-tap-highlight-color: transparent;
  color: var(--text);
  opacity: 0.45;
  transition: opacity 500ms ease, visibility 0s;
  animation: cue-drift 2.6s ease-in-out infinite;
}
.cap-cue:hover, .cap-cue:focus-visible { opacity: 0.75; }
.scene:not(.active) .cap-cue {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  .caret { animation: none; }
  .cap-cue { animation: none; }
}

.door-sub {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--dim);
  padding: 0.6rem 0.9rem;
  margin: -0.6rem -0.9rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: color 240ms ease, text-decoration-color 240ms ease;
  -webkit-tap-highlight-color: transparent;
}
.door-sub:hover, .door-sub:focus-visible {
  color: var(--text);
  text-decoration-color: var(--rule);
}

@media (max-width: 760px), (max-aspect-ratio: 27/20) {
  .rail { display: none; }
  #what.hero .thesis { font-size: clamp(2.6rem, 12vw, 4rem); max-width: 11ch; }
}



/* ---- Ambient pages (careers, role): the field lives behind the content ---- */
.amb-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.amb-stage #gl { width: 100%; height: 100%; display: block; }
/* the field sits under the type, never competing with it */
.amb-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(10,10,11,0.06), rgba(10,10,11,0.62) 78%),
    linear-gradient(to bottom, rgba(10,10,11,0.28), rgba(10,10,11,0.82));
}
body.amb main, body.amb .site-head, body.amb .site-foot { position: relative; z-index: 1; }
body.amb { background: var(--ink); }

/* Compact ambient page (careers): everything on one screen, no scroll. */
body.amb-compact { min-height: 100svh; display: flex; flex-direction: column; }
body.amb-compact main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 4.25rem; }
body.amb-compact .amb-hero { min-height: 0; padding: 1.5rem var(--pad-x) 0.5rem; width: 100%; max-width: 74rem; margin: 0 auto; }
body.amb-compact .amb-title { font-size: clamp(2.1rem, 4.4vw, 3.9rem); }
body.amb-compact .amb-lede { margin-top: 1.25rem; }
body.amb-compact .amb-body { padding-bottom: 0; width: 100%; }
body.amb-compact .amb-block { padding: 1.5rem 0; }
body.amb-compact .amb-apply { padding: 1.5rem var(--pad-x) 1rem; width: 100%; max-width: 74rem; margin: 0 auto; }
body.amb-compact .amb-apply p { margin-bottom: 0.75rem; }
body.amb-compact .site-foot { padding-top: 1rem; padding-bottom: 1rem; }
/* Quieter rules on the compact page: the field carries the depth. */
body.amb-compact .amb-block,
body.amb-compact .amb-block:last-of-type { border-color: rgba(244, 243, 241, 0.06); }
body.amb-compact .site-foot { border-top-color: rgba(244, 243, 241, 0.05); }
@media (max-width: 760px) {
  body.amb-compact main { padding-top: 3.75rem; }
  body.amb-compact .amb-hero { padding-top: 0.75rem; }
  body.amb-compact .amb-title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  body.amb-compact .amb-lede { font-size: 1rem; margin-top: 1rem; }
  body.amb-compact .amb-block { padding: 1.1rem 0; }
  body.amb-compact .role { padding: 1rem 0; }
  body.amb-compact .role-title { font-size: 1.25rem; }
  body.amb-compact .amb-apply { padding-bottom: 0.75rem; }
  body.amb-compact .door { font-size: 1.15rem; }
}

.amb-hero {
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--pad-x) 4rem;
  max-width: 74rem;
  margin: 0 auto;
}
.amb-eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peri);
  margin-bottom: 1.5rem;
}
.amb-title {
  font-weight: 300;
  font-size: clamp(2.6rem, 6.4vw, 6.4rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.amb-lede {
  margin-top: 2.25rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: #b6b6c0;
  max-width: 46ch;
}

/* The careers page introduces itself: each block rises in turn during
   the first moments after the loader lifts. */
body.amb .amb-eyebrow, body.amb .amb-title, body.amb .amb-lede,
body.amb .amb-body, body.amb .amb-apply {
  opacity: 0;
  transform: translateY(16px);
}
body.amb.ready .amb-eyebrow, body.amb.ready .amb-title, body.amb.ready .amb-lede,
body.amb.ready .amb-body, body.amb.ready .amb-apply {
  opacity: 1;
  transform: none;
}
body.amb.ready .amb-eyebrow { transition: opacity 600ms ease 120ms, transform 900ms var(--ease-out) 120ms; }
body.amb.ready .amb-title   { transition: opacity 700ms ease 240ms, transform 1000ms var(--ease-out) 240ms; }
body.amb.ready .amb-lede    { transition: opacity 700ms ease 400ms, transform 1000ms var(--ease-out) 400ms; }
body.amb.ready .amb-body    { transition: opacity 700ms ease 560ms, transform 1000ms var(--ease-out) 560ms; }
body.amb.ready .amb-apply   { transition: opacity 700ms ease 720ms, transform 1000ms var(--ease-out) 720ms; }
@media (prefers-reduced-motion: reduce) {
  body.amb .amb-eyebrow, body.amb .amb-title, body.amb .amb-lede,
  body.amb .amb-body, body.amb .amb-apply { opacity: 1; transform: none; transition: none; }
}
.amb-body { max-width: 74rem; margin: 0 auto; padding: 0 var(--pad-x) 7rem; }
.amb-block { border-top: 1px solid var(--rule); padding: 2.5rem 0; }
.amb-block:last-of-type { border-bottom: 1px solid var(--rule); }
.amb-block h2 {
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peri);
  margin-bottom: 1.25rem;
}
.amb-block p, .amb-block li {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.7;
  color: var(--text);
  max-width: 60ch;
}
.amb-block .role .meta { color: #a8a8b2; }
.amb-block ul { list-style: none; }
.amb-block li { position: relative; padding-left: 1.4rem; }
.amb-block li + li { margin-top: 0.85rem; }
.amb-block li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  background: var(--peri);
}
.amb-pay { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 300; letter-spacing: -0.02em; }
.amb-apply { padding: 5rem var(--pad-x) 7rem; max-width: 74rem; margin: 0 auto; }
.amb-apply p { color: var(--dim); font-size: 1.0625rem; margin-bottom: 1.25rem; }
.role-title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 400;
              letter-spacing: -0.025em; line-height: 1.15; color: var(--text); }
.role {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: center;
  padding: 1.75rem 0;
  text-decoration: none;
  transition: padding-left 320ms var(--ease-out);
}
.role:hover, .role:focus-visible { padding-left: 0.7rem; }
.role .go { white-space: nowrap; transition: transform 320ms var(--ease-out); }
.role:hover .go { transform: translateX(0.3rem); }
@media (max-width: 700px) { .role { grid-template-columns: 1fr; align-items: start; } }
.amb-block .role { align-items: center; }
.amb-block .role p { max-width: none; margin: 0; }
.amb-block .role .meta { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--dim); }
.amb-block .role .go { font-size: 0.9375rem; color: var(--peri); }


/* ---- WebGPU prototype badge (?gpu=webgpu only) ---- */
.gpu-badge {
  position: fixed;
  left: var(--pad-x);
  bottom: 1.1rem;
  z-index: 30;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--dim);
  opacity: 0.7;
  pointer-events: none;
}
/* Ambient pages keep their footer, so the badge sits under the header. */
body.amb .gpu-badge { bottom: auto; top: 4.6rem; }

/* ---- Role page breadcrumb: the trail is a link, the segment is not ---- */
.amb-eyebrow .crumb {
  color: var(--peri);
  text-decoration: underline;
  text-decoration-color: rgba(111, 143, 206, 0.38);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  transition: text-decoration-color 240ms ease;
}
.amb-eyebrow .crumb:hover, .amb-eyebrow .crumb:focus-visible { text-decoration-color: var(--peri); }
.amb-eyebrow .crumb-sep { margin: 0 0.7em; color: var(--dim); opacity: 0.7; }
.amb-eyebrow .crumb-here { color: var(--dim); }

/* ---- Not-found page: the ambient shell, two ways onward ---- */
.amb-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.35rem;
}

/* ---- Print: ink on paper, no field, no choreography ---- */
@media print {
  :root {
    --ink: #fff;
    --ink-2: #fff;
    --text: #111;
    --dim: #555;
    --peri: #3454a3;
    --peri-soft: #3454a3;
    --rule: rgba(0, 0, 0, 0.18);
    color-scheme: light;
  }
  html, body { background: #fff !important; color: var(--text); }
  .loader, .rail, .skip-link, .scroll-cue, .cap-cue, .caret,
  .amb-stage, .stage, #gl, .fallback-art, .site-nav { display: none !important; }
  .site-head { position: static; padding: 1rem var(--pad-x); background: none; transform: none; }
  /* The wordmark is white nqb + periwinkle 8 on transparent: inverting
     with a hue flip prints it black + blue instead of vanishing. */
  .logo-img { filter: invert(1) hue-rotate(180deg); }
  .site-foot { border-top-color: rgba(0, 0, 0, 0.15); }
  /* Ambient pages: everything visible, nothing waiting on the loader. */
  body.amb .amb-eyebrow, body.amb .amb-title, body.amb .amb-lede,
  body.amb .amb-body, body.amb .amb-apply { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.amb-compact { display: block; min-height: 0; }
  body.amb-compact main { padding-top: 0; }
  .amb-hero { min-height: 0; padding-top: 1.5rem; padding-bottom: 2rem; }
  .amb-lede { color: #333; }
  .amb-block p, .amb-block li { color: #111; }
  .amb-block .role .meta { color: #555; }
  .door { border-bottom-color: rgba(52, 84, 163, 0.5); }
  /* The story page lays its passages out in flow. */
  .track { height: auto; }
  .scene { position: static; min-height: 0; padding: 1.5rem var(--pad-x); transform: none !important; }
  .scene .line, .scene .li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cap { min-height: 0; }
  .cap-hold { position: static; width: auto; }
  .cap-hold::before { display: none; }
  .verb-rot { width: auto !important; }
  .verb-strip { transform: none !important; }
  .coda { margin-top: 0; min-height: 0; }
  .coda-lede .line, .coda-actions, .coda-meta { opacity: 1 !important; transform: none !important; visibility: visible !important; }
}