/* Atlas House · MVP (16 Oct 2026). One page composed from Jay's picks:
   r2-glass hero + three moves + close · r4-live prompt, lever, stories · r4-orbit type, machine, live cards
   · E Atlas "glass over ground" · a Raycast streak in the ground. Engine (scrollcraft) and planes.js untouched. */

/* ------------------------------------------------------------------ tokens: the settled system */
:root{
  --canvas:#120E0B; --lacquer:#0F0B09; --surface:#1C1410; --plate:#181009; --walnut:#2A1B12;
  --ink:#F3E9D8; --soft:#B5A28C; --mat:#E6DCC8;
  --oxblood:#7A1F2B; --oxblood-bright:#A93242;
  --light:232,196,160;            /* the warm light: peach-bone, never orange */

  --sc-canvas:var(--canvas); --sc-surface:var(--surface);
  --sc-ink:var(--ink); --sc-ink-soft:var(--soft);
  --sc-accent:var(--oxblood-bright); --sc-accent-ink:var(--ink);
  --sc-shadow-color:24 30% 3%;
  --sc-font-display:"Instrument Sans",system-ui,sans-serif;
  --sc-font-text:"Geist",system-ui,sans-serif;
  --sc-font-mono:"Geist Mono",ui-monospace,monospace;
  --sc-r-sm:4px; --sc-r-md:8px; --sc-r-lg:12px;
  --sc-maxw:78rem;

  --edge:rgba(243,233,216,.14); --edge-hi:rgba(255,250,240,.32);
  --hair:rgba(243,233,216,.11); --hair-strong:rgba(243,233,216,.2);
  --glass:rgba(243,233,216,.06); --glass-2:rgba(243,233,216,.1);
  --bar-h:4.25rem;
  --ease:cubic-bezier(.23,1,.32,1);
  --mx:.5; --my:.42;

  /* the grade: the orbit clip, its still and the cut panes pulled from gold to peach and bone. one filter. */
  --grade:saturate(.55) hue-rotate(-14deg) brightness(1.04);
}
html{scroll-padding-top:var(--bar-h); background:var(--canvas)}
body{font-size:1.0625rem; line-height:1.58; letter-spacing:-.004em; position:relative}
main{position:relative; z-index:1}
a{color:inherit}
b,strong{font-weight:600; color:var(--ink)}
::selection{background:var(--ink); color:var(--canvas)}
:focus-visible{outline:2px solid var(--oxblood-bright); outline-offset:3px; border-radius:4px}
img{display:block; max-width:100%; height:auto}
h1,h2,h3,p,figure,ul{margin:0}
.sc-grain{opacity:.045}

/* ------------------------------------------------------------------ the ground: one solid ground, everything glides over it */
.ground{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--canvas)}
.ground__light{position:absolute; left:50%; top:50%; width:0; height:0}
.ground__light i{position:absolute; left:0; top:0; border-radius:50%;
  transform:translate(calc(-50% + (var(--mx) - .5) * var(--sway,120px)),calc(-50% + (var(--my) - .5) * var(--sway,120px)));
  transition:transform 1100ms var(--ease)}
.ground__light--far i{width:min(1500px,170vw); height:min(900px,110vh); background:radial-gradient(closest-side,rgba(var(--light),.13),rgba(var(--light),.04) 52%,transparent 72%); --sway:160px; margin-top:-6vh}
.ground__light--red i{width:min(1100px,140vw); height:min(600px,70vh); background:radial-gradient(closest-side,rgba(122,31,43,.16),transparent 70%); --sway:220px; margin-top:26vh; margin-left:18vw}
.ground__streak{position:absolute; left:26%; top:-40%; width:30vw; height:180%;
  background:linear-gradient(90deg,transparent 0%,rgba(var(--light),.16) 38%,rgba(var(--light),.22) 50%,transparent 100%);
  filter:blur(52px); opacity:.5; mix-blend-mode:screen;
  transform:rotate(-34deg) translate3d(calc((var(--mx) - .5) * 40px),calc((var(--my) - .5) * 24px),0);
  transition:transform 1100ms var(--ease)}
.ground__streak--2{left:58%; width:14vw; opacity:.22; top:-20%}
.ground__floor{position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(to top,rgba(10,7,5,.6),transparent)}

/* ------------------------------------------------------------------ type */
.d{font-family:var(--sc-font-display); font-weight:600; letter-spacing:-.03em; line-height:.96; text-wrap:balance; margin:0; color:var(--ink)}
.d--xl{font-size:clamp(2.5rem,5.4vw,5.1rem); letter-spacing:-.036em; line-height:.94}
.d--lg{font-size:clamp(2rem,4vw,3.8rem); letter-spacing:-.033em}
.d--md{font-size:clamp(1.5rem,2.5vw,2.35rem); letter-spacing:-.025em; line-height:1.02}
.d--sm{font-size:clamp(1.2rem,1.5vw,1.45rem); letter-spacing:-.018em; line-height:1.1}
.h3{font-family:var(--sc-font-display); font-weight:500; font-size:clamp(1.35rem,1.9vw,1.75rem); line-height:1.15; letter-spacing:-.015em; color:var(--ink)}
.t{margin:0; color:var(--soft); text-wrap:pretty; max-width:34rem}
.t--lg{font-size:clamp(1.05rem,1.25vw,1.2rem); line-height:1.5}
.t--sm{font-size:.94rem; line-height:1.5}
.t b{color:var(--ink)}
.label,.mono{font-family:var(--sc-font-mono); font-weight:500; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin:0}
.wrap{width:min(var(--sc-maxw),100% - 2*var(--sc-gutter)); margin-inline:auto}
.head{display:grid; grid-template-columns:1.1fr 1fr; gap:2rem 3rem; align-items:end; margin-bottom:clamp(1.6rem,4.5vh,3rem)}

/* ------------------------------------------------------------------ the wordmark: Two lines, one cut (Space Grotesk 700, ticks) */
.wm{position:relative; display:inline-block; color:currentColor; line-height:1; white-space:nowrap;
  font-family:"Space Grotesk",var(--sc-font-display); font-weight:700; font-size:var(--wm,1rem); letter-spacing:.14em; text-align:center; text-transform:uppercase;
  padding:.48em .62em .48em .76em}
.wm__l{display:block}
.wm__cut{display:block; height:clamp(1px,.05em,4px); background:currentColor; margin:.2em 0}
.wm__tk{position:absolute; width:clamp(6px,.42em,30px); height:clamp(6px,.42em,30px); border:1px solid currentColor; opacity:.85}
.wm__tk:nth-of-type(1){left:0; top:0; border-right:0; border-bottom:0}
.wm__tk:nth-of-type(2){right:0; top:0; border-left:0; border-bottom:0}
.wm__tk:nth-of-type(3){left:0; bottom:0; border-right:0; border-top:0}
.wm__tk:nth-of-type(4){right:0; bottom:0; border-left:0; border-top:0}
/* the one-line form, next to the mark */
.wm--line{font-family:"Space Grotesk",var(--sc-font-display); font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; padding:0; color:var(--ink)}

/* ------------------------------------------------------------------ buttons, links, pills */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:46px; padding:0 1.3rem; border-radius:var(--sc-r-md);
  font-family:var(--sc-font-text); font-weight:600; font-size:.95rem; letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  transition:transform 140ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn--ink{background:var(--ink); color:var(--canvas)}
.btn--ink:hover{background:var(--oxblood-bright); color:var(--ink)}
.btn--line{color:var(--ink); background:none; border:1px solid var(--edge); padding:0 1.2rem}
.btn--line:hover{border-color:var(--ink)}
.ctas{display:flex; gap:.7rem; flex-wrap:wrap}
.link{display:inline-flex; align-items:center; gap:.45rem; min-height:44px; font-weight:600; font-size:.95rem; text-decoration:none; color:var(--ink); line-height:1}
.link span{border-bottom:1px solid var(--edge); padding-bottom:2px; transition:border-color 140ms var(--ease)}
.link:hover span{border-color:var(--ink)}
.link svg{width:14px; height:14px; flex:none}
.pill{display:inline-flex; align-items:center; gap:.45rem; height:26px; padding:0 .7rem 0 .55rem; border-radius:999px;
  background:rgba(18,14,11,.82); border:1px solid var(--edge); font-family:var(--sc-font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); white-space:nowrap}
.pill i{width:7px; height:7px; border-radius:50%; background:var(--oxblood-bright); box-shadow:0 0 0 0 rgba(169,50,66,.55); animation:pulse 2.2s var(--ease) infinite; flex:none}
.pill.done i{background:var(--mat); animation:none; box-shadow:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(169,50,66,.5)} 70%{box-shadow:0 0 0 7px rgba(169,50,66,0)} 100%{box-shadow:0 0 0 0 rgba(169,50,66,0)}}
.caret{display:inline-block; width:2px; height:.95em; background:var(--ink); vertical-align:-.12em; margin-left:.06em; animation:blink 1.05s steps(1) infinite}
.caret.off{display:none}
@keyframes blink{50%{opacity:0}}

/* ------------------------------------------------------------------ bar */
.bar{position:fixed; inset:0 0 auto 0; z-index:var(--sc-z-chrome); height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 var(--sc-gutter);
  background:linear-gradient(180deg,rgba(15,11,9,.56),rgba(15,11,9,.4));
  -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid rgba(243,233,216,.07); transition:background 240ms var(--ease)}
.bar--solid{background:linear-gradient(180deg,rgba(15,11,9,.9),rgba(15,11,9,.78))}
.brand{display:flex; align-items:center; gap:.75rem; min-height:44px; text-decoration:none; color:var(--ink)}
.brand__mark{width:38px; height:38px; border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(243,233,216,.18), 0 8px 20px -8px rgba(0,0,0,.8)}
.bar__links{display:flex; gap:.1rem}
.bar__links a{display:inline-flex; align-items:center; min-height:44px; padding:0 .8rem; text-decoration:none; font-size:.9rem; font-weight:500; color:var(--soft); transition:color 140ms var(--ease)}
.bar__links a:hover,.bar__links a[aria-current]{color:var(--ink)}
.bar .btn{min-height:44px; padding:0 1.05rem; font-size:.9rem}

/* ------------------------------------------------------------------ 1 · hero: the orbit under your hand (r2-glass) */
.hero__stage{background:#070503}
.hero__media{position:absolute; inset:0; overflow:hidden}
.hero__stage .hero__media video[data-sc-scrub], .hero__stage .hero__media .sc-stage__poster{position:absolute; inset:0; width:100%; max-width:none; height:100%; object-fit:cover; object-position:50% 42%; filter:var(--grade)}
.hero__scrim{position:absolute; inset:0; z-index:4; pointer-events:none; opacity:clamp(0, calc((.4 - var(--sc-p)) / .12), 1); background:linear-gradient(to top right,rgba(7,5,3,.9) 0%,rgba(7,5,3,.62) 22%,rgba(7,5,3,.2) 42%,transparent 58%)}
.hero__intro{position:absolute; left:var(--sc-gutter); bottom:clamp(2.5rem,9vh,5.5rem); z-index:5; color:var(--ink); --wm:clamp(1.3rem,2.6vw,2.2rem)}
.hero__intro p{margin:1.2rem 0 0; font-size:clamp(1rem,1.25vw,1.2rem); color:var(--ink); max-width:26rem; line-height:1.4}
.hero__pane-wrap{position:absolute; left:0; right:0; bottom:0; z-index:8; padding:0 var(--sc-gutter) clamp(1.25rem,4vh,2.5rem); pointer-events:none}
.hero__pane{width:min(62rem,100%); pointer-events:auto; will-change:transform}
.pane{position:relative; border-radius:var(--sc-r-lg);
  background:linear-gradient(160deg,rgba(243,233,216,.09),rgba(243,233,216,.03));
  border:1px solid var(--edge); box-shadow:inset 0 1px 0 var(--edge-hi), 0 30px 70px -30px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2)}
.hero__pane-in{padding:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3.4vw,2.8rem); opacity:var(--po,0); background:linear-gradient(160deg,rgba(15,11,9,.84),rgba(15,11,9,.7))}
.hero__pane-copy{display:grid; grid-template-columns:1.3fr 1fr; grid-template-areas:"h h" "t c"; gap:clamp(1rem,2.2vw,1.6rem) clamp(1.2rem,3vw,3rem); align-items:end}
.hero__pane-copy h1{grid-area:h; font-size:clamp(2.3rem,4.6vw,4.5rem)}
.hero__pane-copy .t{grid-area:t}
.hero__pane-copy .ctas{grid-area:c; justify-content:flex-end}

/* ------------------------------------------------------------------ 2 · ask the house: the product, running (r4-live) */
.ask__stage{display:grid; place-items:center; background:transparent}
.light{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; will-change:transform}
.light i{position:absolute; left:0; top:0; border-radius:50%; transform:translate(calc(-50% + (var(--mx) - .5) * var(--sway,120px)),calc(-50% + (var(--my) - .5) * var(--sway,120px))); transition:transform 900ms var(--ease)}
.light--far i{width:min(1300px,150vw); height:min(820px,96vh); background:radial-gradient(closest-side,rgba(var(--light),.22),rgba(var(--light),.07) 52%,transparent 72%); --sway:160px}
.light--near i{width:min(760px,116vw); height:min(500px,64vh); background:radial-gradient(closest-side,rgba(var(--light),.2),rgba(var(--light),.06) 50%,transparent 70%); --sway:70px; margin-top:-4vh}
.light--red i{width:min(1000px,130vw); height:min(560px,64vh); background:radial-gradient(closest-side,rgba(122,31,43,.22),transparent 70%); --sway:220px; margin-top:20vh}
.ask__box{position:relative; z-index:2; width:min(50rem,calc(100% - 2*var(--sc-gutter))); display:grid; gap:1.1rem; justify-items:center; padding-top:var(--bar-h)}
.prompt{display:block; color:inherit; text-decoration:none; cursor:pointer; position:relative; width:100%; background:linear-gradient(180deg,#1E1610,#181009); border:1px solid var(--hair-strong); border-radius:18px; padding:1.05rem 1.3rem 1.15rem; box-shadow:inset 0 1px 0 rgba(243,233,216,.09),0 30px 60px -30px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.4); text-align:left}
.prompt:hover{border-color:rgba(243,233,216,.34)}
.prompt::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(420px 220px at calc(var(--mx)*100%) -20%,rgba(var(--light),.14),transparent 70%); mix-blend-mode:screen}
.prompt__label{display:flex; align-items:center; gap:.55rem; margin-bottom:.55rem}
.prompt__label .dot{width:6px; height:6px; border-radius:50%; background:var(--oxblood-bright); box-shadow:0 0 0 3px rgba(169,50,66,.18)}
.prompt__q{font-family:var(--sc-font-display); font-weight:500; font-size:clamp(1.45rem,2.9vw,2.5rem); line-height:1.2; letter-spacing:-.02em; color:var(--ink); min-height:2.4em; padding-right:3.2rem; text-wrap:pretty}
.prompt__send{position:absolute; right:.9rem; bottom:.9rem; width:44px; height:44px; border-radius:50%; border:0; background:var(--mat); color:var(--lacquer); display:grid; place-items:center; box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px -6px rgba(0,0,0,.7)}
.prompt__send svg{width:16px; height:16px}
.tw .ch{display:none} .tw .ch.on{display:inline}
.thread{width:1px; height:1.1rem; background:linear-gradient(180deg,var(--hair-strong),transparent); margin:-.4rem 0 -.5rem; opacity:var(--card,0)}
.acard{position:relative; width:min(40rem,100%); background:linear-gradient(180deg,#1C1410,#160F0A); border:1px solid var(--hair); border-radius:14px; box-shadow:inset 0 1px 0 rgba(243,233,216,.07),0 24px 50px -28px rgba(0,0,0,.9); text-align:left; overflow:hidden;
  opacity:0; transform:translateY(10px) scale(.985); transition:opacity 520ms var(--ease),transform 640ms var(--ease)}
.acard.on{opacity:1; transform:none}
.acard::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent calc(var(--mx)*100% - 30%),rgba(var(--light),.05) calc(var(--mx)*100%),transparent calc(var(--mx)*100% + 30%))}
.acard__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--hair)}
.acard__title{font-family:var(--sc-font-display); font-weight:500; font-size:.98rem; letter-spacing:-.01em}
.acard__body{padding:.9rem 1rem 1rem; display:grid; gap:.6rem; font-size:.92rem; line-height:1.45}
.msg{max-width:88%; padding:.55rem .8rem; border-radius:12px 12px 12px 4px; background:rgba(243,233,216,.06); border:1px solid var(--hair)}
.msg small{display:block; font-family:var(--sc-font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin-bottom:.2rem}
.msg--me{justify-self:end; border-radius:12px 12px 4px 12px; background:rgba(230,220,200,.1)}
.arow{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem .1rem 0; border-top:1px solid var(--hair); color:var(--soft); font-size:.86rem}
.arow .mono{color:var(--mat)}
.astep{opacity:0; transform:translateY(6px); transition:opacity 420ms var(--ease),transform 520ms var(--ease)}
.astep.on{opacity:1; transform:none}
.ask__line{font-family:var(--sc-font-display); font-weight:500; font-size:clamp(1.25rem,1.9vw,1.6rem); letter-spacing:-.015em; text-align:center; margin-top:.6rem; color:var(--ink)}
.ask__sub{font-size:clamp(.95rem,1.1vw,1.06rem); line-height:1.55; color:var(--soft); max-width:34rem; text-align:center; text-wrap:pretty}
.ask__line,.ask__sub{opacity:0; transform:translateY(8px); transition:opacity 480ms var(--ease),transform 560ms var(--ease)}
.ask.landed .ask__line,.ask.landed .ask__sub{opacity:1; transform:none}
.ask.landed .ask__sub{transition-delay:90ms}

/* ------------------------------------------------------------------ 3 · we lift your world (r4-live) */
.lift__stage{display:grid; grid-template-rows:auto 1fr; background:var(--lacquer)}
.lift__copy{position:relative; z-index:2; padding:calc(var(--bar-h) + 4vh) var(--sc-gutter) 0; display:flex; align-items:end; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.lift__copy .d--lg{max-width:14ch}
.lift__copy p{max-width:30rem; color:var(--soft); font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.5}
.lift__pic{position:relative; margin:0 auto; width:min(1120px,calc(100% - 2*var(--sc-gutter))); align-self:center; aspect-ratio:2752/1536}
.lift__glow{position:absolute; left:50%; top:60%; width:120%; height:120%; transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(var(--light),.12),transparent 70%); pointer-events:none; z-index:-1}
.lev{position:absolute; inset:0; --th:0deg}
.lev > *{position:absolute}
.lev__ful{left:40.552%; top:61.849%; width:9.230%; height:auto; z-index:2}
.lev__arm{inset:0; transform-origin:44.767% 62.044%; transform:rotate(var(--th)); z-index:3; will-change:transform}
.lev__bar{position:absolute; left:16.824%; top:47.266%; width:66.28%; height:auto}
.lev__wpos{position:absolute; left:69.99%; top:48.25%; width:12.056%; aspect-ratio:1}
.lev__world{width:100%; height:100%; transform:rotate(calc(-1 * var(--th)))}
.lev__refl{inset:0 0 -45% 0; z-index:1; transform-origin:50% 50.78%; transform:scaleY(-1); opacity:.24; filter:blur(2.2px); -webkit-mask-image:linear-gradient(0deg,transparent 0,rgba(0,0,0,.14) 14%,rgba(0,0,0,.45) 34%,#000 49.1%,transparent 49.3%); mask-image:linear-gradient(0deg,transparent 0,rgba(0,0,0,.14) 14%,rgba(0,0,0,.45) 34%,#000 49.1%,transparent 49.3%)}
.lev__refl .lev__arm{z-index:auto}
.lev__wref{left:0; top:0; width:12.056%; height:auto; z-index:1; transform:translate(-50%,0) scaleY(-.62); transform-origin:50% 0; opacity:.2; filter:blur(2.5px); -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%); mask-image:linear-gradient(180deg,#000,transparent 85%)}
.ann{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:4}
.ann line,.ann circle,.ann path{stroke:var(--mat); fill:none; stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-linecap:round}
.ann circle.t{fill:var(--oxblood-bright); stroke:none}
.ann .lbl{font-family:var(--sc-font-mono); font-size:27px; letter-spacing:.14em; text-transform:uppercase; fill:var(--mat); font-weight:500}
.ann .sub{font-family:var(--sc-font-text); font-size:33px; fill:var(--soft)}
.ann g{opacity:0; transition:opacity 360ms var(--ease)}
.ann g.on{opacity:1}
.ann g.force path{stroke:var(--oxblood-bright); stroke-width:1.5}
.lift__ledger{display:none}

/* ------------------------------------------------------------------ 4 · one machine, five parts: the exploded isometric (r4-orbit) */
.mach__stage{background:var(--canvas)}
.mach__inner{position:absolute; inset:0; display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; padding:calc(var(--bar-h) + 1rem) var(--sc-gutter) clamp(1.5rem,5vh,3rem)}
.iso{width:100%; height:auto; max-height:calc(100svh - var(--bar-h) - 3rem)}
.iso .plate{transform:translateY(calc(var(--e,0) * var(--i) * -62px)); will-change:transform}
.iso .lbl{--o:0; opacity:var(--o); transition:none}
.iso .rod{opacity:calc(var(--e,0) * .9)}
.iso text{font-family:var(--sc-font-display); font-weight:600; font-size:19px; fill:var(--ink); letter-spacing:-.02em}
.iso text.role{font-family:var(--sc-font-mono); font-weight:500; font-size:10.5px; fill:var(--soft); letter-spacing:1.4px}
.mach__copy{max-width:30rem}
.mach__copy .t{margin-top:.9rem}
.mach__list{list-style:none; margin:1.6rem 0 0; padding:0; border-top:1px solid var(--edge)}
.mach__list li{--o:0; display:grid; grid-template-columns:8.2rem 1fr; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--edge); font-size:.95rem; line-height:1.4; color:var(--ink); opacity:calc(.3 + var(--o) * .7)}
.mach__list li .label{padding-top:.15rem}

/* ------------------------------------------------------------------ 5 · the machine, running: live state cards (r4-orbit) */
.run{padding:clamp(3.5rem,9vh,6.5rem) 0}
.run__grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem}
.card{position:relative; border-radius:var(--sc-r-lg); border:1px solid var(--edge); background:linear-gradient(170deg,rgba(28,20,16,.82),rgba(21,15,12,.82));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--edge-hi), 0 24px 60px -30px rgba(0,0,0,.8); padding:1.1rem 1.2rem 1.25rem; overflow:hidden; min-height:15rem; display:flex; flex-direction:column; gap:.9rem}
.card--a{grid-column:1/8} .card--b{grid-column:8/13} .card--c{grid-column:1/6} .card--d{grid-column:6/13}
.card__head{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.card__title{font-family:var(--sc-font-display); font-weight:600; font-size:1.05rem; letter-spacing:-.02em}
.card__body{display:grid; gap:.55rem; align-content:start; font-size:.92rem; line-height:1.42}
.step{--s:0; opacity:var(--s); transform:translate3d(0,calc((1 - var(--s)) * 6px),0); transition:opacity 420ms var(--ease), transform 420ms var(--ease)}
.bubble{max-width:34rem; padding:.6rem .8rem; border-radius:10px; background:rgba(243,233,216,.06); border:1px solid var(--edge); color:var(--ink)}
.bubble small{display:block; font-family:var(--sc-font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin-bottom:.25rem}
.bubble--me{background:rgba(243,233,216,.12); justify-self:end}
.row{display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.5rem 0 0; border-top:1px solid var(--edge); color:var(--ink)}
.row small{display:block; color:var(--soft); font-size:.82rem}
.doc{border-left:1px solid var(--edge); padding-left:.9rem; display:grid; gap:.35rem}
.doc .tl{color:var(--ink); min-height:1.3em}
.doc .tl--t{font-family:var(--sc-font-display); font-weight:600; font-size:1rem}
.doc .tl--soft{color:var(--soft)}
.inv{display:grid; gap:.2rem; color:var(--ink)}
.inv span{color:var(--soft); font-size:.86rem}
.track{position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin-top:.4rem; padding-top:1rem}
.track::before{content:""; position:absolute; left:6px; right:6px; top:5px; height:1px; background:var(--edge)}
.track-fill{position:absolute; left:6px; top:5px; height:1px; background:var(--ink); width:calc(var(--f,0) * (100% - 12px))}
.tnode{position:relative; font-family:var(--sc-font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.tnode i{position:absolute; top:-1rem; left:6px; width:9px; height:9px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--canvas); border:1px solid var(--edge)}
.tnode.on{color:var(--ink)} .tnode.on i{background:var(--ink); border-color:var(--ink)}
.tnode:nth-child(2){text-align:center} .tnode:nth-child(2) i{left:50%}
.tnode:nth-child(3){text-align:right} .tnode:nth-child(3) i{left:auto; right:6px; margin:-4px -4px 0 0}
.ask-in{display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:8px; background:rgba(243,233,216,.06); border:1px solid var(--edge); color:var(--ink); min-height:2.6rem}
.ask-in svg{width:16px; height:16px; stroke:var(--soft); flex:none}
.ask-a{padding:.7rem .85rem; border-radius:10px; background:rgba(243,233,216,.1); color:var(--ink); display:grid; gap:.35rem}
.ask-a .src{font-family:var(--sc-font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.card .t--sm{color:var(--soft)}

/* ------------------------------------------------------------------ 6 · the work: one continuous surface (r4-live) */
.stories{position:relative; padding:clamp(3rem,8vh,6rem) 0 0}
.spine{position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(180deg,transparent,var(--hair) 8%,var(--hair) 92%,transparent); pointer-events:none}
.story{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,4rem); align-items:center; padding:clamp(2rem,5vh,3.5rem) 0}
.story--flip{grid-template-columns:.85fr 1.15fr}
.story--flip .story__media{order:2}
.story__media{position:relative; padding:7% 0 5%}
.plate-clip{position:absolute; inset:0; pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.plate{position:absolute; right:-4%; top:2%; width:58%; height:auto; max-width:none; filter:var(--grade); opacity:.9}
.story--flip .plate{right:auto; left:-4%}
.browser{position:relative; width:88%; border-radius:12px; overflow:hidden; background:#0B0806; border:1px solid var(--hair-strong); box-shadow:inset 0 1px 0 rgba(243,233,216,.08),0 40px 80px -30px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.5); margin-top:6%}
.story--flip .browser{margin-left:12%}
.browser__bar{display:flex; align-items:center; gap:.4rem; height:30px; padding:0 .8rem; background:#17100B; border-bottom:1px solid var(--hair)}
.browser__bar i{width:8px; height:8px; border-radius:50%; background:rgba(243,233,216,.14)}
.browser__bar span{margin-left:.6rem; font-family:var(--sc-font-mono); font-size:.6rem; letter-spacing:.1em; color:var(--soft)}
.browser img,.browser video{width:100%; height:auto; display:block}
.phoneframe,.livestrip{display:none}
.livetag{position:absolute; right:1rem; bottom:1rem; display:grid; gap:.4rem; padding:.7rem .85rem; border-radius:12px; background:rgba(15,11,9,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--hair-strong); box-shadow:0 20px 40px -20px rgba(0,0,0,.9); max-width:min(20rem,78%); font-size:.86rem; line-height:1.4; color:var(--ink); animation:landing 7s var(--ease) infinite}
.livetag small{display:block; font-family:var(--sc-font-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft)}
.livetag .pill{height:22px; font-size:.6rem; justify-self:start}
@keyframes landing{0%,8%{opacity:0;transform:translateY(8px)} 16%,88%{opacity:1;transform:none} 96%,100%{opacity:0;transform:translateY(-4px)}}
.shard{position:absolute; left:-10%; bottom:-10%; width:60%; height:60%; border-radius:50%; background:radial-gradient(closest-side,rgba(var(--light),.13),transparent 70%); pointer-events:none; z-index:3}
.story--flip .shard{left:auto; right:-6%}
.story__text{display:grid; gap:.9rem; max-width:32rem}
.story__text .h3{margin-top:.2rem}
.story__text p{color:var(--soft)}
.story__text p.you{color:var(--ink)}
.story__link{display:inline-flex; align-items:center; min-height:44px; gap:.5rem; text-decoration:none; font-weight:500; color:var(--mat); border-bottom:1px solid var(--hair-strong); width:max-content}
.story__link:hover{border-bottom-color:var(--mat)}
.minis{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; padding:clamp(1.5rem,4vh,3rem) 0 clamp(2.5rem,6vh,5rem)}
.mini{display:grid; gap:1rem; align-content:start; padding:1rem 1rem 1.2rem; border:1px solid var(--hair); border-radius:14px; background:linear-gradient(180deg,rgba(28,20,16,.72),rgba(21,14,9,.72)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.mini__fig{position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--hair-strong); background:#0B0806; box-shadow:inset 0 1px 0 rgba(243,233,216,.08),0 20px 40px -20px rgba(0,0,0,.9)}
.mini__fig img,.mini__fig video{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; display:block}
.mini__strip{display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; background:var(--surface); border-top:1px solid var(--hair-strong); font-size:.78rem; line-height:1.3; color:var(--ink)}
.mini__strip .pill{margin-left:auto; flex:none; height:22px; font-size:.58rem}
.mini__cap{display:grid; gap:.45rem}
.mini__cap p{font-size:.86rem; line-height:1.45; color:var(--soft)}
.mini__cap .you{color:var(--ink)}
.mini__cap .story__link{font-size:.9rem}

/* ------------------------------------------------------------------ 7 · how we work: three moves, then it runs (r2-glass) */
.how__stage{background:#0B0908 radial-gradient(70% 60% at 82% 30%,rgba(var(--light),.12),transparent 70%)}
.how__ground{position:absolute; inset:-4%; width:108%; max-width:none; height:108%; object-fit:cover; object-position:50% 40%; filter:blur(14px) brightness(.55) saturate(.55) hue-rotate(-14deg); opacity:.9}
.how__inner{position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr; padding:calc(var(--bar-h) + 1.5rem) var(--sc-gutter) clamp(1.5rem,5vh,3rem); gap:1.5rem}
.how__head{display:flex; align-items:end; justify-content:space-between; gap:2rem}
.how__row{position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); gap:0 1.1rem; min-height:0}
.how__pane--1{grid-column:1/5; grid-row:5/9}
.how__pane--2{grid-column:5/9; grid-row:3/8}
.how__pane--3{grid-column:9/13; grid-row:1/7}
.lever{position:absolute; left:-2%; right:-2%; top:50%; translate:0 -50%; width:104%; height:auto; z-index:3; pointer-events:none; opacity:.9}
.lever path,.lever circle,.lever ellipse,.lever line{fill:none; stroke:var(--ink); stroke-width:1.6; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 5px rgba(243,233,216,.55)); stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--sc-p))}
.how__pane{position:relative; z-index:1; padding:clamp(1.3rem,2.4vw,2.2rem); min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:.8rem; overflow:hidden; border-radius:0;
  --l:0; background:linear-gradient(160deg,rgba(243,233,216,calc(.07 + var(--l) * .1)),rgba(243,233,216,calc(.025 + var(--l) * .04)));
  border:1px solid rgba(243,233,216,calc(.14 + var(--l) * .3)); box-shadow:inset 0 1px 0 rgba(255,250,240,calc(.18 + var(--l) * .5)), 0 30px 70px -30px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(24px) saturate(1.25); backdrop-filter:blur(24px) saturate(1.25);
  transform:translate3d(0,calc(var(--l) * -8px),0)}
.how__pane::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(243,233,216,.16) 50%,transparent 70%); opacity:var(--l); pointer-events:none; transform:translate3d(calc((1 - var(--l)) * 40%),0,0)}
.how__pane .n{font-family:var(--sc-font-display); font-weight:600; font-size:clamp(1.8rem,2.8vw,2.7rem); letter-spacing:-.03em; line-height:1; margin:0; color:var(--ink)}
.how__pane p{margin:0; color:var(--ink); font-size:clamp(.98rem,1.1vw,1.08rem); line-height:1.45}
.dot{display:inline-block; width:.42em; height:.42em; border-radius:50%; background:var(--oxblood-bright); vertical-align:baseline; margin-left:.12em}
.how__pane .dot{width:.5em; height:.5em; margin-left:.15em}
.how__pane .step{position:absolute; top:1.1rem; right:1.2rem; --s:1; transform:none; font-family:var(--sc-font-mono); font-weight:500; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(243,233,216,calc(.5 + var(--l) * .5))}

/* ------------------------------------------------------------------ 8 · the close: the orbit's last frame, at rest. it holds. (r2-glass) */
.close__stage{background:#070503 radial-gradient(60% 70% at 78% 32%,rgba(var(--light),.10),transparent 70%)}
.close__still{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; filter:var(--grade)}
.close__scrim{position:absolute; inset:0; background:linear-gradient(to top right,rgba(7,5,3,.96) 0%,rgba(7,5,3,.82) 30%,rgba(7,5,3,.34) 52%,transparent 70%), radial-gradient(50% 60% at 80% 30%,rgba(var(--light),.08),transparent 70%)}
.close__copy{position:absolute; left:var(--sc-gutter); right:var(--sc-gutter); bottom:clamp(5.5rem,15vh,8.5rem); z-index:5; max-width:44rem}
.close__line{margin:0 0 1rem; font-weight:500; color:var(--soft); font-size:1rem}
.close__who{margin:1.2rem 0 1.6rem; max-width:38rem}
.foot{position:absolute; left:var(--sc-gutter); right:var(--sc-gutter); bottom:1.1rem; z-index:5; display:flex; align-items:center; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:.9rem; color:var(--soft); font-weight:500}
.foot a,.foot span{text-decoration:none; min-height:44px; display:inline-flex; align-items:center; gap:.6rem}
.foot a:hover{color:var(--ink)}
.foot__mark{width:28px; height:28px; border-radius:50%; box-shadow:0 0 0 1px rgba(243,233,216,.18)}

/* ------------------------------------------------------------------ phone */
@media (max-width:860px){
  :root{--bar-h:3.75rem}
  .bar{padding:0 1rem}
  .bar__links{display:none}
  .brand__mark{width:32px; height:32px}
  .wm--line{font-size:.74rem}
  .head{grid-template-columns:1fr; gap:.6rem}

  .hero__stage .hero__media video[data-sc-scrub], .hero__stage .hero__media .sc-stage__poster{width:177svh; max-width:none; height:100svh; inset:0 auto auto 0; object-fit:cover; object-position:50% 50%; transform:translate3d(var(--vx,0px),0,0); will-change:transform}
  .hero__intro{left:1.1rem; bottom:3rem; --wm:1.15rem}
  .hero__intro p{font-size:1rem; max-width:20rem}
  .hero__scrim{background:linear-gradient(0deg,rgba(7,5,3,.94) 0%,rgba(7,5,3,.7) 30%,rgba(7,5,3,.15) 52%,transparent 64%)}
  .hero__pane-wrap{padding:0 .75rem .75rem}
  .hero__pane-in{padding:1.3rem 1.2rem 1.25rem}
  .hero__pane-copy{grid-template-columns:1fr; grid-template-areas:"h" "t" "c"; gap:.9rem}
  .hero__pane-copy h1{font-size:clamp(1.9rem,8.6vw,2.4rem)}
  .hero__pane-copy .t{font-size:.95rem; max-width:none}
  .hero__pane-copy .ctas{justify-content:stretch; flex-wrap:nowrap; gap:.55rem}
  .hero__pane-copy .btn{flex:1 1 0; min-width:0; min-height:48px}

  .ask__box{gap:.8rem; padding-top:calc(var(--bar-h) + .5rem)}
  .prompt{padding:.85rem 1rem 1rem; border-radius:14px}
  .prompt__q{font-size:1.4rem; padding-right:2.9rem; min-height:2.2em}
  .prompt__send{width:40px; height:40px; right:.7rem; bottom:.7rem}
  .acard__body{padding:.7rem .8rem .8rem; font-size:.86rem; gap:.45rem}
  .msg{max-width:94%}
  .ask__line{font-size:1.2rem; margin-top:.2rem}
  .ask__sub{font-size:.9rem; line-height:1.45}

  .lift__stage{grid-template-rows:auto auto 1fr}
  .lift__copy{padding-top:calc(var(--bar-h) + 1.2rem)}
  .lift__copy .d--lg{font-size:clamp(1.8rem,8vw,2.3rem)}
  .lift__pic{width:100%; aspect-ratio:4/3; overflow:clip}
  .lev{left:-6.8vw; top:5vw; width:118vw; height:auto; aspect-ratio:2752/1536; inset:auto; transform:none}
  .lev > svg.ann{inset:0}
  .ann text{display:none}
  .ann g.on path,.ann g.on line{display:none}
  .lift__ledger{display:grid; gap:.35rem; padding:0 var(--sc-gutter) 1.5rem; align-self:start; list-style:none; margin:0}
  .lift__ledger li{display:grid; grid-template-columns:1.2rem 8.5rem 1fr; gap:.6rem; align-items:baseline; padding:.45rem 0; border-top:1px solid var(--hair); color:var(--soft); font-size:.9rem; opacity:.35; transition:opacity 300ms var(--ease)}
  .lift__ledger li.on{opacity:1}
  .lift__ledger li i{width:6px; height:6px; border-radius:50%; background:var(--oxblood-bright); display:block; transform:translateY(-1px)}
  .lift__ledger li b{font-family:var(--sc-font-mono); font-weight:500; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mat)}

  .mach__inner{grid-template-columns:1fr; grid-template-rows:auto 1fr auto; gap:.6rem; padding:calc(var(--bar-h) + .6rem) 1rem 1rem; align-items:start}
  .mach__copy{order:-1; max-width:none}
  .mach__copy .d--lg{font-size:clamp(1.7rem,7.6vw,2.2rem)}
  .mach__copy .t{font-size:.93rem; margin-top:.4rem}
  .iso{max-height:44svh; justify-self:center}
  .iso .lbl{display:none}
  .mach__list{margin-top:.2rem}
  .mach__list li{grid-template-columns:6.4rem 1fr; padding:.4rem 0; font-size:.86rem; gap:.6rem}

  .run{padding:2.4rem 0}
  .run__grid{grid-template-columns:1fr; gap:.8rem}
  .card--a,.card--b,.card--c,.card--d{grid-column:1/-1}
  .card{min-height:0; padding:.75rem .9rem .85rem; gap:.5rem}
  .card__body{gap:.45rem}

  .stories{padding-top:2rem}
  .spine{display:none}
  .story,.story--flip{grid-template-columns:1fr; gap:1rem; padding:1.3rem 0}
  .story--flip .story__media{order:0}
  .story__media{min-height:0; display:grid; justify-items:center; padding:.2rem 0 0; overflow:visible}
  .plate{width:70%; right:-8%; top:0}
  .story--flip .plate{left:-8%}
  .browser{display:none}
  .story--nophone .browser{display:block; width:100%; margin:0}
  .phoneframe{display:block; position:relative; width:min(150px,42%); aspect-ratio:9/19; border-radius:26px; border:1px solid var(--hair-strong); background:#0B0806; overflow:hidden; box-shadow:inset 0 1px 0 rgba(243,233,216,.08),0 40px 80px -30px rgba(0,0,0,.95); padding:8px}
  .phoneframe img{width:100%; height:100%; object-fit:cover; object-position:top; border-radius:19px}
  .livestrip{display:flex; align-items:center; gap:.6rem; width:100%; margin-top:.5rem; padding:.5rem .7rem; border-radius:10px; background:var(--surface); border:1px solid var(--hair-strong); font-size:.82rem; line-height:1.35; color:var(--ink); box-shadow:inset 0 1px 0 rgba(243,233,216,.06)}
  .livestrip .pill{margin-left:auto; flex:none; height:22px; font-size:.56rem}
  .livetag{display:none}
  .shard{width:30%; height:22%; left:2%; bottom:0}
  .story__text{gap:.5rem; font-size:.92rem; line-height:1.5}
  .story__text .h3{font-size:1.25rem}
  .minis{grid-template-columns:1fr 1fr; gap:.6rem; padding-bottom:2.5rem}
  .mini{padding:.7rem .7rem .9rem; gap:.6rem}
  .mini__fig .browser__bar{height:22px}
  .mini__fig .browser__bar span{display:none}
  .mini__strip{padding:.35rem .5rem; gap:.4rem; justify-content:flex-start}
  .mini__strip-t{display:none}
  .mini__strip .pill{margin-left:0}
  .mini__strip .pill{font-size:.5rem; padding:0 .5rem 0 .4rem}
  .mini__cap p{font-size:.82rem; line-height:1.45}
  .mini__cap .h3{font-size:1.1rem}
  .mini__cap{gap:.35rem}

  .how__inner{padding:calc(var(--bar-h) + .8rem) 1rem 1rem; gap:.8rem; grid-template-rows:auto auto 1fr}
  .how__head{flex-direction:column; align-items:flex-start; gap:.4rem}
  .how__head .d--lg{font-size:clamp(1.8rem,8vw,2.3rem)}
  .lever--phone{position:relative; translate:none; left:0; width:100%; top:auto; height:auto; opacity:.9; margin:0}
  .how__row{grid-template-columns:minmax(0,1fr); grid-template-rows:none; gap:.6rem; align-content:end}
  .how__row .lever{display:none}
  .how__pane{grid-column:auto; grid-row:auto; min-height:0; padding:.95rem 1rem 1rem; gap:.35rem; border-radius:0}
  .how__pane--1{width:84%; justify-self:start}
  .how__pane--2{width:92%; justify-self:center}
  .how__pane--3{width:100%}
  .how__pane .n{font-size:1.45rem}
  .how__pane p{font-size:.92rem}
  .how__pane .step{top:.85rem; right:1rem}

  .close__still{object-position:25% 50%}
  .close__scrim{background:linear-gradient(0deg,rgba(7,5,3,.95) 0%,rgba(7,5,3,.8) 40%,rgba(7,5,3,.2) 62%,transparent 78%)}
  .close__copy{left:1.1rem; right:1.1rem; bottom:6rem}
  .close__copy .d--xl{font-size:clamp(2.2rem,10vw,2.8rem)}
  .close__who{font-size:.95rem; margin:.9rem 0 1.1rem}
  .close__copy .btn{flex:1 1 auto}
  .foot{left:1.1rem; right:1.1rem; bottom:.6rem; gap:0 1rem; font-size:.82rem}
}
@media (min-width:861px){ .lever--phone{display:none} }

/* ------------------------------------------------------------------ reduced motion: every state present, no lerp */
@media (prefers-reduced-motion:reduce){
  .hero__pane,.hero__media{transform:none!important}
  .hero__intro{display:none}
  .hero__pane-in{--po:1}
  .hero__scrim{opacity:0}
  .ground__light i,.ground__streak,.light i{transition:none; transform:none}
  .caret{animation:none}
  .pill i{animation:none}
  .astep,.acard,.ask__line,.ask__sub,.ann g{transition:none; opacity:1; transform:none}
  .tw .ch{display:inline}
  .lev{--th:-24deg}
  .iso .plate{transform:translateY(calc(var(--i) * -62px))!important}
  .iso .lbl{--o:1} .iso .rod{opacity:.9}
  .mach__list li{--o:1}
  .step{--s:1; transform:none}
  .livetag{animation:none}
  .how__pane{--l:1!important; transform:none}
  .how__pane::after{transform:none}
  .lever path,.lever circle,.lever ellipse,.lever line{stroke-dashoffset:0}
}