:root {
  --ink: #141713;
  --paper: #f2f0e8;
  --white: #fffefa;
  --orange: #ed5a24;
  --yellow: #f0bd19;
  --blue: #173c48;
  --mono: "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
html.film-page, html.film-page body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
button, a { font: inherit; }
button { color: inherit; }

.experience { position: fixed; inset: 0; height: 100dvh; min-height: 100svh; overflow: hidden; background: var(--paper); perspective: 1200px; }
.masthead { position: absolute; z-index: 40; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; padding: 0 clamp(18px, 3.4vw, 54px); color: var(--scene-ink, var(--ink)); mix-blend-mode: difference; filter: invert(1); }
.identity { font-size: 16px; font-weight: 850; text-decoration: none; }
.masthead p { margin: 0; font: 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.masthead button { justify-self: end; border: 0; border-bottom: 1px solid currentColor; background: none; padding: 3px 0; cursor: pointer; }

.sequence, .scene { position: absolute; inset: 0; }
.scene { overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; backface-visibility: hidden; }
.scene.is-visible { visibility: visible; }
.scene.is-active { pointer-events: auto; }
.scene > img { width: 100%; height: 100%; object-fit: cover; }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

.scene-copy { position: absolute; z-index: 5; max-width: min(570px, 48vw); }
.scene-copy > span, .final-copy > span { display: block; margin-bottom: 16px; font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.scene-copy h1, .scene-copy h2, .final-copy h2 { margin: 0; font-size: clamp(38px, 5.6vw, 82px); line-height: .91; letter-spacing: -.06em; }
.scene-copy p { max-width: 38rem; margin: 20px 0 0; font-size: clamp(14px, 1.35vw, 19px); line-height: 1.45; }
.scene-copy button, .scene-btn { display: inline-block; margin-top: 24px; border: 1px solid currentColor; background: transparent; padding: 10px 14px; font: 750 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; color: inherit; text-decoration: none; }
.scene-copy button:hover, .scene-copy button:focus-visible, .scene-btn:hover, .scene-btn:focus-visible { background: currentColor; color: var(--paper); }
.contact-link { justify-self: end; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; padding: 3px 0; }
.copy-light { color: white; text-shadow: 0 2px 24px rgba(0,0,0,.34); }
.copy-dark { color: var(--ink); }

.exploration {
  position: absolute;
  z-index: 8;
  width: min(360px, 31vw);
  padding: 20px 22px;
  border-left: 3px solid var(--orange);
  background: rgba(255,254,250,.94);
  color: var(--ink);
  box-shadow: 0 18px 54px rgba(15,16,14,.2);
  opacity: 0;
  transition: opacity 420ms ease 120ms, transform 560ms cubic-bezier(.2,.8,.2,1) 80ms;
}
.exploration::before { content: ""; position: absolute; top: 30px; height: 1px; background: var(--orange); }
.exploration span { display: block; margin-bottom: 11px; font: 750 10px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.exploration p { margin: 0; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.52; }
.scene.is-active .exploration { opacity: 1; transform: translate3d(0,0,0); }
.from-rack { right: 7vw; top: 17vh; transform: translate3d(70px,0,0); }
.from-rack::before { right: 100%; width: 12vw; }
.from-scan { left: 7vw; bottom: 8vh; transform: translate3d(0,60px,0); }
.from-scan::before { left: 44%; bottom: 100%; top: auto; width: 1px; height: 16vh; }
.from-metric { right: 7vw; top: 15vh; transform: translate3d(80px,0,0); }
.from-metric::before { right: 100%; width: 10vw; }
.from-record { left: 12vw; bottom: 6vh; transform: translate3d(0,70px,0); }
.from-record::before { left: 28px; bottom: 100%; top: auto; width: 1px; height: 9vh; }
.from-panel { right: 8vw; top: 17vh; transform: translate3d(70px,-18px,0); }
.from-panel::before { right: 100%; width: 9vw; background: white; }
.from-boot { right: 7vw; bottom: 9vh; transform: translate3d(70px,0,0); background: rgba(14,17,15,.88); color: white; border-color: #7ef0a8; }
.from-boot::before { right: 100%; width: 12vw; background: #7ef0a8; }

.scene-ppk::after { background: linear-gradient(90deg, rgba(12,18,12,.78) 0%, rgba(12,18,12,.18) 52%, transparent 76%); }
.scene-ppk img { transform: scale(1.06); }
.scene-ppk .scene-copy { left: clamp(24px, 6vw, 96px); bottom: clamp(76px, 12vh, 140px); }

.scene-inventory { background: #dad8cf; }
.inventory-pair { position: absolute; inset: 11vh 4vw 9vh; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: hidden; background: #111; box-shadow: 0 32px 80px rgba(26,25,20,.22); }
.inventory-pair figure { position: relative; margin: 0; overflow: hidden; }
.inventory-pair img { width: 100%; height: 100%; object-fit: cover; }
.inventory-pair figcaption { position: absolute; left: 14px; top: 14px; background: var(--paper); padding: 7px 9px; font: 700 10px/1 var(--mono); text-transform: uppercase; }
.inventory-scan { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--orange); box-shadow: 0 0 20px var(--orange); }
.scene-inventory .scene-copy { z-index: 6; right: 6vw; bottom: 10vh; padding: 22px 26px; background: rgba(242,240,232,.95); }
.scene-inventory .scene-copy h2 { font-size: clamp(28px, 3.4vw, 54px); }

.scene-warehouse { display: grid; grid-template-columns: 1.15fr .85fr; background: var(--yellow); }
.metric-field { align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 8vw 4vw 5vw 6vw; }
.metric-field div { min-width: 0; }
.metric-field strong { display: block; font-size: clamp(92px, 15vw, 240px); line-height: .72; letter-spacing: -.1em; }
.metric-field span { display: block; max-width: 12rem; margin-top: 28px; font: 700 12px/1.4 var(--mono); text-transform: uppercase; }
.scene-warehouse .scene-copy { position: relative; align-self: end; max-width: none; padding: 0 6vw 9vh 4vw; }
.scene-warehouse .scene-copy h2 { font-size: clamp(42px, 5vw, 76px); }

.scene-lab { background: #d7d4c8; }
.lab-record { position: absolute; left: 7vw; top: 16vh; width: min(48vw, 720px); padding: clamp(24px, 4vw, 56px); background: var(--white); box-shadow: 0 35px 80px rgba(20,18,13,.18); font-family: var(--mono); }
.lab-record > div { display: flex; justify-content: space-between; gap: 30px; padding: 15px 0; border-top: 1px solid #c6c2b4; font-size: clamp(11px, 1.1vw, 15px); }
.lab-record .record-head { border-top: 0; padding-top: 0; font-size: clamp(15px, 1.6vw, 22px); }
.lab-record b { color: var(--orange); }
.scene-lab .scene-copy { right: 6vw; bottom: 10vh; width: 38vw; }
.scene-lab .scene-copy h2 { font-size: clamp(40px, 5vw, 74px); }

.scene-workspace::after { background: linear-gradient(90deg, rgba(9,11,10,.78), rgba(9,11,10,.08) 68%); }
.scene-workspace .scene-copy { left: 6vw; bottom: 10vh; }
.object-orbit { position: absolute; z-index: 3; right: 13vw; top: 21vh; width: 28vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }
.object-orbit i { position: absolute; width: 12px; height: 12px; border: 2px solid white; background: var(--orange); transform: translate(-50%,-50%); }
.object-orbit i:nth-child(1) { left: 2%; top: 50%; }
.object-orbit i:nth-child(2) { left: 73%; top: 4%; }
.object-orbit i:nth-child(3) { left: 88%; top: 78%; }

.scene-pythos { background: #0d100e; }
.scene-pythos::after { background: linear-gradient(90deg, rgba(4,6,5,.86), rgba(4,6,5,.1) 60%, rgba(4,6,5,.5)); }
.scene-pythos .scene-copy { left: 6vw; bottom: 9vh; }
.proof-block { position: absolute; z-index: 5; right: 5vw; top: 14vh; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 42px; padding: 24px; border: 1px solid rgba(255,255,255,.62); color: white; backdrop-filter: blur(9px); background: rgba(0,0,0,.28); }
.proof-block strong { display: block; font-size: clamp(58px, 7vw, 108px); line-height: .8; letter-spacing: -.08em; }
.proof-block span, .proof-block p { font: 700 10px/1.3 var(--mono); text-transform: uppercase; }
.proof-block p { grid-column: 1 / -1; margin: 4px 0 0; }
.boot-lines { position: absolute; z-index: 4; inset: 12vh 9vw auto auto; width: 34vw; opacity: .45; }
.boot-lines i { display: block; height: 2px; margin: 12px 0; background: white; transform-origin: left; }
.boot-lines i:nth-child(2) { width: 78%; }.boot-lines i:nth-child(3) { width: 92%; }.boot-lines i:nth-child(4) { width: 64%; }.boot-lines i:nth-child(5) { width: 83%; }.boot-lines i:nth-child(6) { width: 48%; }

.scene-final { display: grid; place-items: center; background: var(--paper); }
.final-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(#d7d3c7 1px, transparent 1px), linear-gradient(90deg, #d7d3c7 1px, transparent 1px); background-size: 9vw 9vw; mask-image: radial-gradient(circle, black, transparent 75%); }
.final-copy { position: relative; z-index: 2; width: min(1120px, 84vw); }
.final-copy h2 { max-width: 14ch; font-size: clamp(52px, 7vw, 110px); }
.final-copy p { margin: 28px 0 0; font-size: clamp(20px, 2vw, 30px); }
.final-copy .final-reflection { max-width: 720px; margin-top: 24px; padding-left: 18px; border-left: 3px solid var(--orange); font-size: clamp(14px, 1.25vw, 18px); line-height: 1.5; }
.final-links { display: flex; gap: 26px; margin-top: 34px; }
.final-links a { color: inherit; font: 750 13px/1 var(--mono); text-underline-offset: 6px; }

.rail { position: absolute; z-index: 50; right: clamp(14px, 2vw, 32px); top: 50%; display: grid; gap: 11px; transform: translateY(-50%); }
.rail button { position: relative; width: 12px; height: 12px; border: 1px solid rgba(128,128,128,.72); border-radius: 50%; background: rgba(255,255,255,.65); padding: 0; cursor: pointer; }
.rail button::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; background: var(--orange); transform: scale(0); transition: transform 180ms ease; }
.rail button.is-active::after { transform: scale(1); }
.rail span { position: absolute; right: 22px; top: 50%; width: max-content; padding: 5px 7px; background: rgba(20,23,19,.88); color: white; font: 10px/1 var(--mono); text-transform: uppercase; opacity: 0; transform: translate(8px,-50%); transition: 160ms ease; pointer-events: none; }
.rail button:hover span, .rail button:focus-visible span { opacity: 1; transform: translate(0,-50%); }

.instruction { position: absolute; z-index: 40; left: clamp(20px, 3.4vw, 54px); bottom: 24px; display: flex; align-items: center; gap: 12px; color: white; mix-blend-mode: difference; font: 10px/1 var(--mono); text-transform: uppercase; }
.instruction i { display: block; width: 58px; height: 1px; background: currentColor; transform-origin: left; }
.counter { position: absolute; z-index: 40; right: clamp(20px, 3.4vw, 54px); bottom: 20px; color: white; mix-blend-mode: difference; font-family: var(--mono); }
.counter b { font-size: 24px; }.counter span { font-size: 11px; }

.detail { width: min(760px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); border: 0; padding: clamp(30px, 5vw, 70px); background: var(--white); color: var(--ink); box-shadow: 0 30px 100px rgba(0,0,0,.35); }
.detail::backdrop { background: rgba(18,19,17,.72); backdrop-filter: blur(10px); }
.detail-close { position: absolute; right: 20px; top: 18px; border: 0; border-bottom: 1px solid; background: none; padding: 3px 0; cursor: pointer; }
.detail span { font: 700 11px/1 var(--mono); text-transform: uppercase; }
.detail h2 { margin: 18px 0; font-size: clamp(38px, 6vw, 70px); line-height: .94; letter-spacing: -.055em; }
.detail p { font-size: 17px; line-height: 1.55; }
.detail a { display: inline-block; margin-top: 16px; color: inherit; font-weight: 750; text-underline-offset: 5px; }

button:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr auto; }
  .masthead p { display: none; }
  .scene-copy { max-width: calc(100vw - 48px); }
  .scene-copy h1, .scene-copy h2 { font-size: clamp(38px, 12vw, 62px); }
  .scene-ppk .scene-copy, .scene-workspace .scene-copy, .scene-pythos .scene-copy { left: 24px; right: 36px; bottom: 76px; }
  .scene-ppk::after, .scene-workspace::after, .scene-pythos::after { background: linear-gradient(0deg, rgba(8,10,8,.9), transparent 78%); }
  .exploration { top: 78px; right: 42px; bottom: auto; left: 20px; width: auto; padding: 14px 16px; transform: translate3d(0,-32px,0); }
  .exploration::before { display: none; }
  .exploration p { font-size: 12px; line-height: 1.4; }
  .inventory-pair { inset: 28vh 20px 22vh; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .inventory-scan { top: 50%; left: 0; right: 0; bottom: auto; width: auto; height: 3px; }
  .scene-inventory .scene-copy { left: 20px; right: 20px; bottom: 8vh; }
  .scene-inventory .scene-copy h2 { font-size: 28px; }
  .scene-warehouse { display: block; }
  .metric-field { padding: 35vh 28px 0; }
  .metric-field strong { font-size: clamp(86px, 29vw, 150px); }
  .metric-field span { margin-top: 18px; }
  .scene-warehouse .scene-copy { position: absolute; left: 28px; right: 42px; bottom: 8vh; padding: 0; }
  .scene-warehouse .scene-copy p { display: none; }
  .lab-record { left: 22px; right: 42px; top: 31vh; width: auto; padding: 18px 22px; }
  .lab-record > div { padding: 10px 0; }
  .scene-lab .scene-copy { left: 22px; right: 42px; bottom: 7vh; width: auto; }
  .scene-lab .scene-copy p { display: none; }
  .object-orbit { display: none; }
  .proof-block { top: 32vh; left: 24px; right: 42px; }
  .boot-lines { display: none; }
  .final-copy { width: calc(100vw - 48px); }
  .final-copy h2 { font-size: clamp(42px, 12vw, 66px); }
  .final-copy .final-reflection { font-size: 13px; }
  .rail { right: 12px; }
  .rail span { display: none; }
  .instruction { left: 20px; }
  .counter { right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .scene { transform: none !important; }
}



/* Hire page — never clip */
html.index-page, html.index-page body {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
}
body.index { background: #f4f1e8; }
.hire-top {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  width: min(920px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 0;
}
.hire-top p { margin: 8px 0 0; max-width: 36rem; color: #4f4d46; font-size: 14px; line-height: 1.4; }
.hire-top-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hire-top-links a { color: inherit; font: 750 12px/1 var(--mono); }
.hire-main { width: min(920px, calc(100% - 48px)); margin: 0 auto 88px; }
.hire-hero { padding: 7vh 0 2vh; }
.hire .kicker { margin: 0 0 18px; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6a3a12; }
.hire-hero h1 { margin: 0; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.15; letter-spacing: -.03em; font-weight: 700; }
.hire-hero .lede { max-width: 46rem; margin: 22px 0 0; font-size: 18px; line-height: 1.5; }
.hire-hero .now { margin: 18px 0 0; font-weight: 650; }
.hire-do, .hire-proof, .hire-fit, .hire-contact { padding-top: 40px; border-top: 1px solid #d4d0c4; margin-top: 40px; }
.hire h2 { margin: 0 0 16px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-family: var(--mono); }
.hire-do ul { margin: 0; padding: 0 0 0 1.1em; }
.hire-do li { margin: 0 0 10px; line-height: 1.45; }
.hire-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.hire-proof h2 { grid-column: 1 / -1; }
.hire-proof article { padding: 0; }
.hire-proof .num { margin: 0 0 8px; font: 750 16px/1 var(--mono); }
.hire-proof p { margin: 0 0 8px; line-height: 1.45; }
.hire-proof .meta { color: #5c5a52; font-size: 13px; }
.hire-proof a { margin-right: 14px; color: inherit; font-weight: 750; }
.hire-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.hire-fit p { margin: 0; line-height: 1.5; }
.hire-contact p { margin: 0 0 8px; font-size: 18px; }
.hire-contact a { color: inherit; }
.hire-contact .quiet { margin-top: 18px; font-size: 14px; color: #5c5a52; }
.hire .btn { display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 10px 12px; text-decoration: none; font: 750 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 760px) {
  .hire-top { flex-direction: column; align-items: flex-start; }
  .hire-proof, .hire-fit { grid-template-columns: 1fr; }
}

.hire-do .job { margin: 0 0 22px; }
.hire-do .job .num { margin: 0 0 6px; font: 750 16px/1 var(--mono); }
.hire-do .job p { margin: 0; line-height: 1.5; }

.hire-run { padding-top: 40px; border-top: 1px solid #d4d0c4; margin-top: 40px; }
.hire-run .take { display: block; width: 100%; background: #111; }
.hire-run .quiet { margin: 10px 0 0; font-size: 14px; color: #5c5a52; }