/* ReActive site. Tokens follow the demo (accent, ink) so the site and the walkthrough read as one product. */
@font-face { font-family:"Archivo"; src:url("fonts/archivo-var.woff2") format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("fonts/plexmono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("fonts/plexmono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

:root {
  --ground:#08090a;
  --panel:#101114;
  --line:#26272c;
  --ink:#e9ebec;
  --ink-2:#b9bdc0;
  --ink-3:#8a8f93;
  --accent:#e67e2e;
  --accent-br:#f4954c;
  --paper:#e4e1da;
  --paper-ink:#1c1d20;
  --paper-mute:#6b6a66;
  --sans:"Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap:1180px;
  --gut:clamp(20px, 5vw, 56px);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--ground); color:var(--ink); -webkit-text-size-adjust:100%; }
body { font-family:var(--sans); font-size:17px; line-height:1.6; font-weight:380; min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }
img { max-width:100%; display:block; }
a { color:inherit; }
::selection { background:rgba(230,126,46,.35); }
:focus-visible { outline:2px solid var(--accent-br); outline-offset:3px; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

/* header */
.site-head { position:sticky; top:0; z-index:20; background:rgba(8,9,10,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-head .wrap { display:flex; align-items:center; gap:28px; height:60px; }
.mark { font-family:var(--mono); font-weight:500; font-size:17px; letter-spacing:.02em; text-decoration:none; }
.mark .re { color:#c8c8c8; }
.mark .ac { color:var(--accent-br); }
.nav { display:flex; gap:24px; margin-left:auto; align-items:center; }
.nav a { text-decoration:none; color:var(--ink-3); font-size:15px; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--ink); }
.btn { display:inline-block; font-family:var(--sans); font-size:15px; font-weight:500; text-decoration:none; padding:10px 18px; border:1px solid var(--accent); color:var(--ground); background:var(--accent); transition:background .2s, border-color .2s; }
.btn:hover { background:var(--accent-br); border-color:var(--accent-br); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover { border-color:var(--ink-3); background:transparent; }

@media (max-width:640px) {
  .site-head .wrap { gap:14px; }
  .nav { gap:16px; }
  .nav a.opt { display:none; }
}

/* small-screen note next to demo links */
.phone-note { display:none; font-size:14px; color:var(--ink-3); margin-top:10px; }
@media (max-width:899px) { .phone-note { display:block; } }

/* type */
h1, h2, h3 { font-weight:500; line-height:1.08; letter-spacing:-.01em; font-stretch:78%; }
h1 { font-size:clamp(38px, 6.2vw, 78px); max-width:17ch; }
h2 { font-size:clamp(30px, 4vw, 50px); max-width:20ch; }
h3 { font-size:clamp(20px, 2vw, 24px); font-stretch:88%; letter-spacing:0; line-height:1.2; }
.lede { font-size:clamp(18px, 1.7vw, 21px); color:var(--ink-2); max-width:56ch; }
.prose p + p { margin-top:1em; }
.prose p { max-width:62ch; color:var(--ink-2); }
.ref { font-family:var(--mono); font-size:13px; color:var(--ink-3); }

section { padding:clamp(72px, 11vw, 140px) 0; }
.rule { border-top:1px solid var(--line); }

/* hero over the dataroom plate */
.hero { position:relative; min-height:min(92vh, 900px); display:flex; align-items:flex-end; padding:0 0 clamp(56px, 9vw, 110px); overflow:hidden; }
.hero .plate { position:absolute; inset:0; background:url("img/dataroom.webp") center 62%/cover no-repeat; filter:saturate(.4) brightness(.62); transform:scale(1.04); }
.hero .shade { position:absolute; inset:0; background:linear-gradient(to top, var(--ground) 4%, rgba(8,9,10,.78) 38%, rgba(8,9,10,.35) 70%, rgba(8,9,10,.55) 100%); }
.hero .wrap { position:relative; width:100%; }
.hero .brand-line { font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--ink-3); margin-bottom:26px; }
.hero .lede { margin-top:26px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; align-items:center; }
.hero .caption { position:absolute; right:var(--gut); top:28px; font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:right; max-width:30ch; }
@media (max-width:700px) { .hero .caption { display:none; } }

/* problem */
.problem .wrap { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(28px, 6vw, 90px); align-items:start; }
@media (max-width:860px) { .problem .wrap { grid-template-columns:1fr; } }

/* exhibit */
.exhibit-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:48px; }
@media (max-width:860px) { .exhibit-head { grid-template-columns:1fr; gap:18px; } }
.exhibit { position:relative; display:grid; grid-template-columns:minmax(0,5fr) 90px minmax(0,7fr); align-items:center; }
.doc { background:var(--paper); color:var(--paper-ink); padding:26px 26px 24px; box-shadow:0 30px 60px -30px rgba(0,0,0,.8); position:relative; z-index:1; }
.doc .src { font-family:var(--mono); font-size:12px; color:var(--paper-mute); line-height:1.5; border-bottom:1px solid #cbc7be; padding-bottom:12px; margin-bottom:16px; }
.doc .src strong { color:var(--paper-ink); font-weight:500; display:block; }
.doc blockquote { font-family:var(--sans); font-size:18px; line-height:1.5; font-weight:400; }
.hl { background:linear-gradient(transparent 58%, rgba(230,126,46,0) 58%); transition:background .6s ease .5s; padding:0 2px; }
.lit .hl { background:linear-gradient(transparent 58%, rgba(230,126,46,.45) 58%); }
.doc table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px; }
.doc th { text-align:left; font-weight:500; color:var(--paper-mute); font-size:11.5px; padding:0 8px 8px 0; border-bottom:1px solid #cbc7be; }
.doc td { padding:7px 8px 7px 0; border-bottom:1px solid #d8d4cb; white-space:nowrap; }
.doc td.num, .doc th.num { text-align:right; padding-right:0; }
.doc tr.out td { color:#9a9892; }
.doc .more { font-family:var(--mono); font-size:12px; color:var(--paper-mute); margin-top:10px; }
.link { position:relative; height:100%; }
.link svg { position:absolute; top:50%; left:-8px; width:calc(100% + 16px); height:180px; transform:translateY(-50%); overflow:visible; }
.link path { fill:none; stroke:var(--accent); stroke-width:1.5; stroke-dasharray:240; stroke-dashoffset:240; transition:stroke-dashoffset 1.1s ease .2s; }
.link circle { fill:var(--accent); opacity:0; transition:opacity .3s ease 1.2s; }
.lit .link path { stroke-dashoffset:0; }
.lit .link circle { opacity:1; }
.result { margin-top:34px; border-left:2px solid var(--accent); padding:4px 0 4px 20px; }
.result .fig { font-family:var(--mono); font-size:15px; color:var(--ink); }
.result .fig + .fig { margin-top:4px; }
.result p { margin-top:14px; color:var(--ink-2); max-width:64ch; }
.fiction { margin-top:22px; }
@media (max-width:860px) {
  .exhibit { grid-template-columns:1fr; }
  .link { height:64px; }
  .link svg { width:40px; height:64px; left:50%; top:0; transform:translateX(-50%); }
  .link svg path.h { display:none; }
  .link svg path.v { display:inline; }
  .doc { padding:20px 18px; }
  .doc table { font-size:12px; }
  .doc .hide-s { display:none; }
}
@media (min-width:861px) { .link svg path.v { display:none; } }

/* desk */
.desk-intro { display:flex; justify-content:space-between; align-items:end; gap:30px; flex-wrap:wrap; margin-bottom:40px; }
.stage { position:relative; overflow:hidden; aspect-ratio:1672/941; background:#0a0b0c; }
.stage .inner { position:absolute; left:0; top:0; width:100%; aspect-ratio:1672/941; }
.stage .inner > img.plate { width:100%; height:100%; object-fit:cover; filter:saturate(.7); }
.stage .scr { position:absolute; overflow:hidden; background:#0c0d0e; }
.stage .scr img { width:100%; height:100%; object-fit:cover; object-position:top left; filter:brightness(.92); }
.stage .scr.l { left:20.45%; top:32.41%; width:29.31%; height:31.67%; }
.stage .scr.r { left:50.24%; top:32.41%; width:29.19%; height:31.67%; }
.stage-caps { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.stage-caps p { color:var(--ink-3); font-size:15px; }
.stage-caps strong { color:var(--ink); font-weight:500; }
@media (max-width:700px) {
  .stage { aspect-ratio:4/3; }
  .stage .inner { width:170%; left:-35%; top:-11.2%; }
  .stage-caps { grid-template-columns:1fr; gap:10px; }
}

/* steps */
.steps { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; margin-top:48px; border-top:1px solid var(--line); counter-reset:s; }
.steps li { padding:26px 24px 0 0; counter-increment:s; }
.steps li::before { content:counter(s); display:block; font-family:var(--mono); font-size:13px; color:var(--accent-br); margin-bottom:14px; }
.steps li p { color:var(--ink-3); font-size:15.5px; margin-top:8px; }
@media (max-width:860px) { .steps { grid-template-columns:1fr 1fr; row-gap:10px; } }
@media (max-width:520px) { .steps { grid-template-columns:1fr; } }

.bounds { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px, 6vw, 90px); margin-top:clamp(56px, 8vw, 96px); }
.bounds ul { list-style:none; }
.bounds li { padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink-2); }
.bounds li:first-child { border-top:1px solid var(--line); }
.pull { font-size:clamp(22px, 2.4vw, 30px); line-height:1.3; font-stretch:88%; font-weight:420; max-width:26ch; }
@media (max-width:860px) { .bounds { grid-template-columns:1fr; } }

/* origin teaser */
.origin-teaser .wrap { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(28px, 6vw, 90px); align-items:end; }
.origin-teaser blockquote { font-size:clamp(24px, 3vw, 38px); line-height:1.25; font-stretch:82%; font-weight:420; max-width:28ch; }
.origin-teaser .by { margin-top:18px; color:var(--ink-3); font-size:15px; }
@media (max-width:860px) { .origin-teaser .wrap { grid-template-columns:1fr; } }

/* contact band */
.contact-band { background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.contact-band .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:end; }
.mail { font-family:var(--mono); font-size:clamp(17px, 2vw, 22px); color:var(--accent-br); text-decoration:none; border-bottom:1px solid rgba(244,149,76,.35); }
.mail:hover { border-bottom-color:var(--accent-br); }
@media (max-width:760px) { .contact-band .wrap { grid-template-columns:1fr; } }

/* inner pages */
.page-head { padding:clamp(64px, 10vw, 128px) 0 clamp(40px, 6vw, 72px); border-bottom:1px solid var(--line); }
.page-head .lede { margin-top:24px; }
.two { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px, 6vw, 90px); }
.two + .two { margin-top:clamp(56px, 8vw, 96px); }
@media (max-width:860px) { .two { grid-template-columns:1fr; gap:18px; } }
.runlog { list-style:none; border-top:1px solid var(--line); counter-reset:r; }
.runlog li { display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; padding:18px 0; border-bottom:1px solid var(--line); counter-increment:r; }
.runlog li::before { content:counter(r, decimal-leading-zero); font-family:var(--mono); font-size:13px; color:var(--accent-br); padding-top:3px; }
.runlog h3 { font-size:19px; }
.runlog p { color:var(--ink-3); font-size:15.5px; margin-top:4px; max-width:60ch; }
.runlog .tag { font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:6px; }
.runlog .tag.lm { color:var(--accent-br); }
.levels { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--line); }
.levels div { padding:22px 20px; }
.levels div + div { border-left:1px solid var(--line); }
.levels p { color:var(--ink-3); font-size:15px; margin-top:6px; }
@media (max-width:640px) { .levels { grid-template-columns:1fr; } .levels div + div { border-left:0; border-top:1px solid var(--line); } }

.timeline { list-style:none; border-top:1px solid var(--line); }
.timeline li { display:grid; grid-template-columns:130px minmax(0,1fr); gap:20px; padding:20px 0; border-bottom:1px solid var(--line); }
.timeline .when { font-family:var(--mono); font-size:13px; color:var(--ink-3); padding-top:4px; }
.timeline p { color:var(--ink-3); font-size:15.5px; margin-top:4px; max-width:60ch; }
.timeline li.now .when { color:var(--accent-br); }
@media (max-width:560px) { .timeline li { grid-template-columns:1fr; gap:4px; } }
.facts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.facts div { padding:22px 20px 22px 0; }
.facts .v { font-size:clamp(28px, 3.4vw, 42px); font-stretch:78%; font-weight:500; line-height:1.1; }
.facts .k { color:var(--ink-3); font-size:15px; margin-top:6px; }
@media (max-width:640px) { .facts { grid-template-columns:1fr; } .facts div + div { border-top:1px solid var(--line); } }

.legal h2 { font-size:22px; font-stretch:88%; margin:40px 0 10px; max-width:none; }
.legal p, .legal li { color:var(--ink-2); max-width:66ch; }
.legal ul { list-style:none; }

h2.label { font-family:var(--mono); font-size:13px; font-weight:400; font-stretch:100%; letter-spacing:0; color:var(--ink-3); margin-bottom:22px; }
.lede.sp { margin-top:16px; }

.mt { margin-top:22px; }
.pull.mb { margin-bottom:30px; }
.bounds.plain { display:block; margin-top:0; }

/* footer */
.site-foot { border-top:1px solid var(--line); padding:34px 0 40px; margin-top:auto; }
.site-foot .wrap { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; font-size:14px; color:var(--ink-3); }
.site-foot a { color:var(--ink-3); text-decoration:none; }
.site-foot a:hover { color:var(--ink); }
.site-foot .push { margin-left:auto; }
@media (max-width:640px) { .site-foot .push { margin-left:0; width:100%; } }

@media (prefers-reduced-motion: reduce) {
  .hl, .link path, .link circle { transition:none; }
}

/* ===== second draft additions ===== */
.btn { font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-br); background:rgba(230,126,46,.06); border:1px solid var(--accent); border-radius:3px; padding:12px 22px; transition:background .18s ease, border-color .18s ease; }
.btn:hover { background:rgba(230,126,46,.22); border-color:var(--accent-br); color:var(--accent-br); }
.btn.ghost { background:transparent; color:var(--ink-2); border-color:var(--line); }
.btn.ghost:hover { color:var(--ink); border-color:var(--ink-3); background:transparent; }
.nav a.btn, .nav a.btn:hover { color:var(--accent-br); padding:10px 18px; font-size:11.5px; }

/* entry screen */
.entry { position:relative; min-height:calc(100vh - 61px); min-height:calc(100svh - 61px); background:#000; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:0; }
.entry::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 180px 50px rgba(0,0,0,.9); }
.entry .inner { position:relative; z-index:1; max-width:1320px; margin:0 auto; padding:80px var(--gut) 120px; width:100%; text-align:center; }
.entry .logo { width:min(1200px, 100%); height:auto; margin:0 auto; mix-blend-mode:lighten; opacity:0; filter:brightness(.2); animation:logoIn 1.8s cubic-bezier(.2,.7,.2,1) .15s forwards; }
.entry h1 { font-family:var(--mono); font-weight:400; font-stretch:100%; font-size:clamp(12px, 1.35vw, 17px); letter-spacing:.28em; text-transform:uppercase; color:var(--ink-2); max-width:none; line-height:1.6; margin-top:clamp(22px, 3vw, 40px); opacity:0; animation:rise .9s ease 1.3s forwards; }
.entry .lede { margin:22px auto 0; text-align:center; opacity:0; animation:rise .9s ease 1.6s forwards; }
.entry .actions { justify-content:center; opacity:0; animation:rise .9s ease 1.9s forwards; }
.entry .phone-note { text-align:center; }
.cue { position:absolute; left:50%; bottom:92px; transform:translateX(-50%); z-index:1; width:1px; height:44px; background:linear-gradient(var(--accent), transparent); opacity:0; animation:rise .9s ease 2.4s forwards; }
@keyframes logoIn { to { opacity:1; filter:brightness(1); } }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.cue { animation-name:cueIn; }
@keyframes cueIn { to { opacity:.8; } }

.strip { position:absolute; left:0; right:0; bottom:0; z-index:2; height:64px; background:#101114; border-top:1px solid var(--line); display:flex; }
.strip div { flex:1; padding:0 20px; display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--line); }
.strip div:first-child { border-left:0; padding-left:var(--gut); }
.strip span { font-family:var(--mono); font-size:8.5px; letter-spacing:.22em; text-transform:uppercase; color:#5f6469; }
.strip b { font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-2); letter-spacing:.04em; margin-top:3px; white-space:nowrap; }
@media (max-width:760px) { .strip { display:none; } .cue { bottom:36px; } .entry .inner { padding-bottom:90px; } }

/* scroll story */
.story { position:relative; height:340vh; padding:0; background:#000; }
.story .pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.story .scene { position:absolute; inset:0; will-change:opacity, transform; }
.story .room img { width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.story .room { transform-origin:50% 68%; }
.story .desk { opacity:0; }
.story .deskbox { position:absolute; }
.story .deskbox > img { width:100%; height:100%; }
.story .scr { position:absolute; overflow:hidden; background:#0c0d0e; }
.story .scr img { width:100%; height:100%; object-fit:cover; object-position:top left; }
.story .scr.l { left:20.45%; top:32.41%; width:29.31%; height:31.67%; }
.story .scr.r { left:50.24%; top:32.41%; width:29.19%; height:31.67%; }
.story .veil { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); pointer-events:none; }
.story .say { position:absolute; left:var(--gut); top:clamp(90px, 14vh, 150px); max-width:min(760px, 86vw); font-family:var(--mono); font-size:clamp(20px, 2.6vw, 36px); line-height:1.3; color:var(--ink); opacity:0; will-change:opacity, transform; }
.story .caps { position:absolute; left:0; right:0; bottom:clamp(28px, 6vh, 60px); display:flex; justify-content:center; gap:clamp(18px, 6vw, 90px); opacity:0; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); flex-wrap:wrap; padding:0 var(--gut); }
.story .caps b { color:var(--ink); font-weight:500; }
.story .go { position:absolute; right:var(--gut); bottom:clamp(24px, 6vh, 56px); opacity:0; }
@media (max-width:700px) { .story .go { right:auto; left:var(--gut); bottom:80px; } .story .caps { justify-content:flex-start; flex-direction:column; gap:6px; bottom:28px; } }

/* reveal on scroll */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }

/* six stages */
.pipe-head { display:flex; align-items:center; gap:14px; margin-top:48px; font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.pipe-head::after { content:""; flex:1; height:1px; background:linear-gradient(to right, var(--accent), var(--line) 30%); }
.stages { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-left:1px solid var(--line); border-top:1px solid var(--line); margin-top:18px; }
.stages li { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 24px 26px; display:flex; flex-direction:column; min-height:220px; }
.stages .n { font-family:var(--mono); font-size:13px; color:var(--accent-br); }
.stages h3 { margin-top:14px; }
.stages p { color:var(--ink-3); font-size:15.5px; margin-top:8px; flex:1; }
.stages .tag { margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.stages .tag.lm { color:var(--accent-br); }
@media (max-width:900px) { .stages { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .stages { grid-template-columns:1fr; } .stages li { min-height:0; } }
.boundary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:28px; }
.boundary div { background:var(--ground); padding:22px 24px; }
.boundary h3 { font-size:18px; }
.boundary p { color:var(--ink-3); font-size:15.5px; margin-top:6px; }
.boundary .k { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-br); margin-bottom:10px; display:block; }
@media (max-width:760px) { .boundary { grid-template-columns:1fr; } }

/* origin v2 */
.figs { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.figs div { padding:22px 20px 22px 0; }
.figs div + div { padding-left:20px; border-left:1px solid var(--line); }
.figs .v { font-size:clamp(28px, 3.4vw, 44px); font-stretch:78%; font-weight:500; line-height:1.1; }
.figs .v.acc { color:var(--accent-br); }
.figs .k { color:var(--ink-3); font-size:14px; margin-top:6px; }
@media (max-width:760px) { .figs { grid-template-columns:1fr 1fr; } .figs div:nth-child(3) { padding-left:0; border-left:0; } .figs div:nth-child(n+3) { border-top:1px solid var(--line); } }
.versus { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:28px; }
.versus div { background:var(--ground); padding:22px 24px; }
.versus .k { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:10px; }
.versus div:last-child .k { color:var(--accent-br); }
.versus p { color:var(--ink-2); font-size:15.5px; }
@media (max-width:760px) { .versus { grid-template-columns:1fr; } }
.founder { display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px; align-items:start; }
.founder img { width:200px; height:auto; filter:grayscale(1) contrast(1.05); border:1px solid var(--line); }
@media (max-width:640px) { .founder { grid-template-columns:1fr; } .founder img { width:150px; } }
.why { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--line); }
.why li { padding:24px 24px 0 0; }
.why li + li { padding-left:24px; border-left:1px solid var(--line); }
.why .n { font-family:var(--mono); font-size:13px; color:var(--accent-br); }
.why h3 { margin-top:10px; }
.why p { color:var(--ink-3); font-size:15.5px; margin-top:8px; }
@media (max-width:760px) { .why { grid-template-columns:1fr; } .why li + li { padding-left:0; border-left:0; border-top:1px solid var(--line); margin-top:20px; } }
.src-note { font-family:var(--mono); font-size:11.5px; color:#6d7176; margin-top:22px; max-width:90ch; }

@media (prefers-reduced-motion: reduce) {
  .entry .logo, .entry h1, .entry .lede, .entry .actions, .cue { animation:none; opacity:1; filter:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  .story { height:auto; }
  .story .pin { position:relative; height:auto; }
  .story .scene { position:relative; }
  .story .room { height:70vh; }
  .story .desk { opacity:1; height:auto; aspect-ratio:1672/941; }
  .story .deskbox { position:absolute; inset:0; }
  .story .say, .story .caps, .story .go { opacity:1; }
}

/* ===== third draft ===== */
.mark.logo-mark { display:flex; align-items:center; }
.mark.logo-mark img { height:24px; width:auto; filter:brightness(2.4) contrast(1.15); }
.home .site-head { position:fixed; left:0; right:0; transform:translateY(-100%); transition:transform .35s ease; }
.home .site-head.shown { transform:none; }

.entry2 { position:relative; height:100vh; height:100svh; min-height:520px; background:#000; overflow:hidden; padding:0; }
.entry2::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 170px 44px rgba(0,0,0,.92); }
.entry2 .mark-block { position:absolute; left:0; right:0; bottom:clamp(40px, 9vh, 90px); z-index:1; padding:0 clamp(16px, 3vw, 48px); }
.entry2 .logo { width:100%; height:auto; display:block; mix-blend-mode:lighten; opacity:0; filter:brightness(.2); animation:logoIn 1.8s cubic-bezier(.2,.7,.2,1) .15s forwards; }
.entry2 .tagline { display:block; width:100%; height:auto; margin-top:clamp(10px, 1.6vw, 22px); opacity:0; animation:rise .9s ease 1.3s forwards; }
.entry2 .tagline text { font-family:var(--mono); font-size:22px; fill:#a6abb1; }
.entry2 .enter { position:absolute; left:50%; top:38%; transform:translate(-50%, -50%); z-index:2; opacity:0; animation:fadeIn .9s ease 1.8s forwards; }
@keyframes fadeIn { to { opacity:1; } }
.entry2 .enter-note { position:absolute; left:0; right:0; top:calc(38% + 34px); text-align:center; z-index:2; }
.entry2 .phone-note { margin:0; }

/* auto-played sequence */
.seq { position:relative; height:100vh; height:100svh; min-height:480px; background:#000; overflow:hidden; padding:0; }
.seq .layer { position:absolute; inset:0; transition:opacity .9s ease; }
.seq .L-room img { width:100%; height:100%; object-fit:cover; object-position:50% 62%; transform-origin:50% 70%; transform:scale(1); filter:brightness(.25) saturate(.5); transition:transform 6s cubic-bezier(.22,.61,.36,1), filter 1.4s ease; }
.seq .L-desk { opacity:0; }
.seq.p1 .L-room img, .seq.p2 .L-room img { transform:scale(1.5); filter:brightness(.95) saturate(.8); }
.seq.p2 .L-room { opacity:0; }
.seq.p2 .L-desk { opacity:1; }
.seq .deskbox { position:absolute; }
.seq .deskbox > img { width:100%; height:100%; }
.seq .scr { position:absolute; overflow:hidden; background:#0c0d0e; }
.seq .scr img { width:100%; height:100%; object-fit:cover; object-position:top left; }
.seq .scr.l { left:20.45%; top:32.41%; width:29.31%; height:31.67%; }
.seq .scr.r { left:50.24%; top:32.41%; width:29.19%; height:31.67%; }
.seq .veil { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.08) 30%, transparent 55%, rgba(0,0,0,.6) 100%); }
.seq .say { position:absolute; left:clamp(20px, 7%, 110px); top:clamp(40px, 10%, 110px); max-width:min(760px, 86vw); font-family:var(--mono); font-size:clamp(20px, 2.1vw, 32px); line-height:1.3; color:var(--ink); opacity:0; transition:opacity 1.1s ease; }
.seq.p1 .say1 { opacity:1; }
.seq.p2 .say1 { opacity:0; transition-duration:.5s; }
.seq.p2 .say2 { opacity:1; transition-delay:.6s; }
.seq .caps { position:absolute; left:0; right:0; bottom:clamp(26px, 7%, 64px); display:flex; justify-content:center; gap:clamp(18px, 6vw, 90px); flex-wrap:wrap; padding:0 var(--gut); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); opacity:0; transition:opacity .8s ease 1.2s; }
.seq .caps b { color:var(--ink); font-weight:500; }
.seq.p2 .caps { opacity:1; }
.seq .ctrl { position:absolute; right:clamp(20px, 5%, 80px); bottom:clamp(22px, 6%, 58px); display:flex; gap:10px; align-items:center; opacity:0; transition:opacity .8s ease 1.8s; }
.seq.p2 .ctrl { opacity:1; }
.seq .replay { font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:3px; padding:11px 14px; cursor:pointer; }
.seq .replay:hover { color:var(--accent-br); border-color:rgba(230,126,46,.5); }
@media (max-width:700px) { .seq .caps { justify-content:flex-start; flex-direction:column; gap:6px; bottom:96px; } .seq .ctrl { left:clamp(20px, 7%, 110px); right:auto; bottom:28px; } }

/* CBRE quote */
.cite { margin-top:34px; border-left:2px solid var(--accent); padding:2px 0 2px 20px; }
.cite blockquote { font-size:clamp(19px, 1.9vw, 23px); line-height:1.45; color:var(--ink); font-stretch:92%; }
.cite p { margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.cite a { color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; }
.cite a:hover { color:var(--ink); }

/* finding card, demo theme */
.fcard { display:grid; grid-template-columns:minmax(0,1fr) 300px; border:1px solid #28282c; background:#111112; font-family:var(--sans); }
.fcard .main { padding:24px 26px; border-right:1px solid #28282c; }
.fcard .eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#70747b; }
.fcard h3 { font-size:clamp(19px, 1.9vw, 23px); margin:10px 0 18px; font-stretch:92%; }
.fpanel { border:1px solid #28282c; border-left:2px solid #5f6772; background:#141416; padding:14px 16px; }
.fpanel + .fpanel { margin-top:10px; }
.fpanel .k { font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:#8a8f96; }
.fpanel p { color:#c9ccd0; font-size:15.5px; margin-top:6px; line-height:1.55; }
.fpanel p b { font-family:var(--mono); font-weight:500; color:#eceef0; }
.fpanel .from { font-family:var(--mono); font-size:11px; color:#5f6469; border-top:1px solid #28282c; margin-top:12px; padding-top:9px; }
.fpanel.delta { border-left-color:var(--accent); background:linear-gradient(90deg, rgba(230,126,46,.08), rgba(230,126,46,.02)); }
.fpanel.delta .k { color:var(--accent-br); }
.drow { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid rgba(230,126,46,.15); font-size:15px; color:#c9ccd0; }
.drow:last-child { border-bottom:0; }
.drow span:last-child { font-family:var(--mono); color:#eceef0; white-space:nowrap; }
.drow.hi, .drow.hi span:last-child { color:var(--accent-br); }
.drow.hi span:last-child { font-size:19px; }
.fcard .side { padding:24px 22px; }
.chain { list-style:none; margin-top:12px; }
.chain li { border:1px solid #28282c; background:#141416; padding:10px 12px; }
.chain li + li { margin-top:8px; }
.chain .k { font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#8a8f96; display:block; }
.chain .f { font-family:var(--mono); font-size:11px; color:#b9bdc0; word-break:break-all; display:block; margin-top:4px; }
.chain-note { color:#70747b; font-size:13.5px; margin-top:16px; line-height:1.55; }
.fcard .side .btn { display:block; text-align:center; margin-top:18px; }
.fcard-foot { margin-top:14px; font-family:var(--mono); font-size:11.5px; color:#5f6469; }
@media (max-width:860px) { .fcard { grid-template-columns:1fr; } .fcard .main { border-right:0; border-bottom:1px solid #28282c; padding:20px 18px; } .fcard .side { padding:20px 18px; } }

/* six stages on one line */
.line6 { margin-top:48px; position:relative; }
.line6 .src { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:22px; }
.line6 ol { list-style:none; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); position:relative; }
.line6 ol::before { content:""; position:absolute; left:0; right:0; top:6px; height:1px; background:linear-gradient(to right, var(--accent), var(--line) 18%, var(--line)); }
.line6 li { position:relative; padding:28px 18px 0 0; }
.line6 li::before { content:""; position:absolute; left:0; top:2px; width:9px; height:9px; border-radius:50%; background:var(--ground); border:1px solid var(--ink-3); }
.line6 li.lm::before { border-color:var(--accent); background:var(--accent); }
.line6 .n { font-family:var(--mono); font-size:12px; color:var(--accent-br); }
.line6 h3 { font-size:18px; margin-top:6px; }
.line6 .tag { display:block; margin-top:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.line6 li.lm .tag { color:var(--accent-br); }
.line6 p { color:var(--ink-3); font-size:14.5px; margin-top:10px; line-height:1.5; }
@media (max-width:900px) {
  .line6 ol { grid-template-columns:1fr; }
  .line6 ol::before { left:4px; right:auto; top:0; bottom:0; width:1px; height:auto; background:linear-gradient(to bottom, var(--accent), var(--line) 18%, var(--line)); }
  .line6 li { padding:0 0 26px 30px; }
  .line6 li::before { top:4px; }
}
.more-link { margin-top:36px; }
.pull.solo { max-width:30ch; margin-top:clamp(56px, 8vw, 96px); }

@media (prefers-reduced-motion: reduce) {
  .entry2 .logo, .entry2 .tagline, .entry2 .enter { animation:none; opacity:1; filter:none; }
  .seq .layer, .seq .L-room img, .seq .say, .seq .caps, .seq .ctrl { transition:none; }
}

.tagline-h { max-width:none; font-size:0; line-height:0; margin:0; }
.tagline-m { display:none; font-family:var(--mono); font-size:11px; letter-spacing:.3em; line-height:1.9; color:#a6abb1; text-align:center; text-transform:uppercase; margin-top:14px; opacity:0; animation:rise .9s ease 1.3s forwards; }
@media (max-width:700px) { .entry2 .tagline { display:none; } .tagline-m { display:block; } .entry2 .mark-block { bottom:clamp(60px, 14vh, 120px); } }
@media (prefers-reduced-motion: reduce) { .tagline-m { animation:none; opacity:1; } }

/* ===== fourth pass ===== */
.problem .decode { min-height:2.2em; }
.decode .nz { color:var(--accent-br); opacity:.75; }
.runlog2 { border:1px solid #28282c; background:#111112; font-family:var(--mono); max-width:620px; }
.rl-head { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid #28282c; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#70747b; }
.skip { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8a8f96; background:transparent; border:1px solid #28282c; border-radius:3px; padding:5px 10px; cursor:pointer; }
.skip:hover { color:var(--accent-br); border-color:rgba(230,126,46,.5); }
.runlog2 ol { list-style:none; padding:8px 16px 12px; }
.runlog2 li { display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:12px; padding:6px 0; font-size:12.5px; color:#b9bdc0; opacity:0; transition:opacity .3s ease; }
.runlog2 li.on { opacity:1; }
.runlog2 .t { color:#5f6469; }
.runlog2 .g { color:#70747b; font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding-top:2px; }
.runlog2 .g.lm, .runlog2 li.done .s { color:var(--accent-br); }
.runlog2 .s::after { content:""; display:inline-block; width:7px; height:13px; margin-left:4px; vertical-align:-2px; background:var(--accent); opacity:0; }
.runlog2 li.typing .s::after { opacity:1; animation:blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
@media (max-width:560px) { .runlog2 li { grid-template-columns:66px minmax(0,1fr); } .runlog2 .g { display:none; } }
.fcard.pending { opacity:.12; }
.fcard { transition:opacity .5s ease; }
.fcard .bld { opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.fcard.built .bld { opacity:1; transform:none; }
.fcard .drow.last { opacity:0; transition:opacity .6s ease; }
.fcard.final .drow.last { opacity:1; }
.drow small { display:block; font-family:var(--mono); font-size:11px; color:#8a8f96; margin-top:3px; }
.fcard .side { transition:opacity .6s ease; }
.fcard.pending .side { opacity:0; }
.line6 ol::before { transform-origin:left center; transform:scaleX(0); transition:transform 2.4s cubic-bezier(.4,.1,.2,1); }
.line6.drawn ol::before { transform:scaleX(1); }
.line6 li { opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.line6.drawn li { opacity:1; transform:none; }
.line6.drawn li.lm::before { animation:pulse 1.6s ease 1.1s 3; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(230,126,46,.7); } 100% { box-shadow:0 0 0 12px rgba(230,126,46,0); } }
@media (max-width:900px) { .line6 ol::before { transform-origin:center top; transform:scaleY(0); } .line6.drawn ol::before { transform:scaleY(1); } }
.bars { margin-top:30px; }
.bar { display:grid; grid-template-columns:160px minmax(0,1fr) 110px; gap:16px; align-items:center; padding:10px 0; }
.bl { color:var(--ink-3); font-size:14.5px; }
.bv { font-family:var(--mono); font-size:14px; text-align:right; }
.bv.acc { color:var(--accent-br); }
.track { position:relative; height:26px; background:#141416; border:1px solid var(--line); }
.fill { position:absolute; left:0; top:0; bottom:0; width:100%; background:linear-gradient(90deg,#3a3d42,#5f6469); }
.fill.rec { background:linear-gradient(90deg, rgba(230,126,46,.55), var(--accent)); transition:width 1.8s cubic-bezier(.4,.1,.2,1) .4s; }
.bars.in .fill.rec { width:56.72%; }
.gap { position:absolute; left:56.72%; right:0; top:0; bottom:0; border:1px dashed rgba(244,149,76,.6); border-left:0; opacity:0; transition:opacity .6s ease 2.2s; display:flex; align-items:center; justify-content:center; }
.gap span { font-family:var(--mono); font-size:13px; color:var(--accent-br); }
.bars.in .gap { opacity:1; }
@media (max-width:640px) { .bar { grid-template-columns:1fr auto; } .bar .track { grid-column:1 / -1; grid-row:2; } }
@media (prefers-reduced-motion: reduce) {
  .fcard.pending, .fcard.pending .side { opacity:1; } .fcard .bld, .fcard .drow.last, .runlog2 li { opacity:1; transform:none; }
  .line6 ol::before { transform:none; } .line6 li { opacity:1; transform:none; } .fill.rec { width:56.72%; transition:none; } .gap { opacity:1; }
}

.cases { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.cases > div { background:var(--ground); padding:24px 26px; }
.cases h3 { font-size:19px; }
.cases p { color:var(--ink-3); font-size:15.5px; margin-top:10px; }
@media (max-width:760px) { .cases { grid-template-columns:1fr; } }

.og-figs { border-top:1px solid var(--line); }
.ofig { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.ofig .v { font-family:var(--sans); font-size:clamp(22px, 2.3vw, 30px); font-stretch:78%; font-weight:500; line-height:1; }
.ofig .v.acc { color:var(--accent-br); }
.ofig .k { color:var(--ink-3); font-size:14px; text-align:right; }
.og-line { color:var(--ink-2); font-size:15.5px; margin-top:18px; }
.og-figs .btn { margin-top:20px; display:inline-block; }

/* scroll cue on the entry screen */
.cue2 { position:absolute; left:50%; top:calc(38% + 62px); transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; opacity:0; animation:fadeIn 1s ease 2.2s forwards; }
.cue-line { width:1px; height:46px; background:linear-gradient(to bottom, rgba(230,126,46,0), var(--accent)); position:relative; overflow:hidden; }
.cue-line::after { content:""; position:absolute; left:0; top:-46px; width:1px; height:46px; background:linear-gradient(to bottom, rgba(244,149,76,0), var(--accent-br)); animation:cueRun 2.6s ease-in-out infinite; }
@keyframes cueRun { 0% { transform:translateY(0); } 60% { transform:translateY(92px); } 100% { transform:translateY(92px); } }
.cue-word { font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:#5f6469; transition:color .3s ease; }
.cue2:hover .cue-word, .entry2.near .cue-word { color:var(--accent-br); }
.entry2.near .cue-line { background:linear-gradient(to bottom, rgba(230,126,46,0), var(--accent-br)); }
@media (max-width:700px) { .cue2 { top:calc(38% + 58px); } }
@media (prefers-reduced-motion: reduce) { .cue2 { animation:none; opacity:1; } .cue-line::after { animation:none; display:none; } }

/* origin: mission rows */
.cases.rows { grid-template-columns:1fr; }
.cases.rows > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:32px; align-items:baseline; padding:20px 26px; }
.cases.rows p { margin-top:0; }
@media (max-width:760px) { .cases.rows > div { grid-template-columns:1fr; gap:6px; } }