/* Physical scroll chapters. The shared drill canvas is outside every chapter. */
.workshop-journey{position:relative;background:#10140f}.chapter{position:relative;isolation:isolate}
.assembly-chapter{height:200svh;z-index:1;background:#12140e}.storage-chapter{height:160svh;z-index:2;background:#18231b}.drawer-chapter{height:120svh;z-index:3;background:#192019}.garage-chapter{height:165svh;z-index:4;background:#1a2118}
.chapter-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}.chapter .scene{clip-path:none;opacity:1;transform:none;will-change:auto}.chapter .scene>img,.chapter .scene>video{height:100%;width:100%;object-fit:cover}.chapter .scene-copy{opacity:1;transform:none}.chapter .system-copy{bottom:17%;max-width:540px}.chapter .wall-hotspots{opacity:1;pointer-events:auto}
.chapter-bottom{position:absolute;bottom:34px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:18px;z-index:11;padding-right:170px}.chapter-index{font-family:monospace;font-size:12px;letter-spacing:.8px;color:#d3d5c4;white-space:nowrap}.chapter-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#e5dbc51b;z-index:12}.chapter-progress>span{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.scroll-film{opacity:0;transition:none!important}.scroll-film.frame-ready{opacity:1}.film-freeze{opacity:0;z-index:1}.hero-scrim,.system-scrim,.drawer-scrim{z-index:3}.hero-poster{opacity:1}.assembly-stage:after{content:'';position:absolute;inset:0;z-index:4;background:#080e09;opacity:var(--opening-darkness,.12);pointer-events:none}.hero-copy{z-index:6}.technical-grid{z-index:5}.assembly-stage .hero-scene{transform-origin:72% 50%}
.shared-object-layer{position:fixed;inset:0;z-index:18;pointer-events:none;opacity:0;visibility:hidden;contain:strict}.shared-object-layer.is-visible{visibility:visible}#drill-canvas{display:block;width:100%;height:100%;opacity:0}.shared-object-layer.model-ready #drill-canvas{opacity:1}.drill-fallback{position:absolute;width:330px;left:70%;top:60%;transform:translate(-50%,-93%);opacity:1;filter:drop-shadow(10px 20px 12px #0005)}.shared-object-layer.model-ready .drill-fallback{display:none}
.journey-motion{position:fixed;right:var(--gutter);bottom:24px;z-index:35;padding:12px 15px;background:#171f18b8;backdrop-filter:blur(12px);border:1px solid #f0e8d922;min-width:140px;font-size:12px;justify-content:center}.journey-motion:hover{background:#263526e8}.storage-stage .system-scene img{transform-origin:65% 53%}.storage-stage .feature-card{bottom:15%}
.drawer-stage .drawer-scene{transform-origin:64% 54%;will-change:clip-path}.drawer-stage:before{content:'';position:absolute;inset:0 0 auto;height:10px;background:linear-gradient(0deg,#533d28,#ac8657,#3b2c1c);z-index:15}.drawer-stage .drawer-copy{top:31%}.drawer-stage .drawer-scene img{transform-origin:67% 65%}.garage-scene{z-index:0}.garage-scene .garage-detail-blend{opacity:0;z-index:2;object-position:65% center}.garage-copy{top:30%}.garage-copy h2{font-size:clamp(68px,7vw,116px)}.chapter .technical-index{font-size:12px}
body.reduce-motion .chapter{height:100svh;min-height:650px}body.reduce-motion .chapter-stage{position:relative;height:100%;min-height:650px}body.reduce-motion .shared-object-layer{display:none}body.reduce-motion .scroll-film{display:none}body.reduce-motion .film-freeze{opacity:1!important}body.reduce-motion .scene,body.reduce-motion .scene-copy{transform:none!important;clip-path:none!important;opacity:1!important}body.reduce-motion .assembly-stage:after{opacity:0}body.reduce-motion .technical-grid{opacity:.3!important}
@media(max-width:1000px){.chapter-bottom{padding-right:150px}.chapter-index{font-size:11px}}
@media(max-width:680px){.assembly-chapter{height:190svh}.storage-chapter{height:155svh}.drawer-chapter{height:115svh}.garage-chapter{height:155svh}.chapter-stage{min-height:600px}.chapter-bottom{bottom:80px;display:block;padding-right:0}.chapter-bottom .scroll-hint{position:static;font-size:10px;letter-spacing:.6px}.chapter-index{display:none}.journey-motion{bottom:17px;right:var(--gutter);padding:11px 12px;font-size:11px;min-width:130px}.chapter .system-copy{bottom:21%;max-width:100%}.chapter .system-copy h2{font-size:13vw}.chapter .wall-hotspots{bottom:17.5%;z-index:12}.chapter .system-copy .explore-label{visibility:hidden}.storage-stage .feature-card{bottom:24%;width:calc(100% - 42px)}.drawer-stage .drawer-copy{top:31%}.garage-copy{top:29%;right:var(--gutter)}.garage-copy h2{font-size:14vw}.garage-copy .scene-description{font-size:14px}.garage-film,.garage-poster,.garage-freeze{object-position:62% center}.chapter .technical-index{font-size:10px}.assembly-stage .hero-copy{top:19%}.hero-copy .scene-description{max-width:90%}}
@media(prefers-reduced-motion:reduce){.chapter .system-scene,.chapter .drawer-scene,.chapter .system-copy,.chapter .drawer-copy,.chapter .wall-hotspots{display:block}.chapter .wall-hotspots{display:flex}.chapter{height:100svh;min-height:650px}.chapter-stage{position:relative}.shared-object-layer{display:none}.film-freeze{opacity:1!important}.scroll-film{display:none}.chapter .scene,.chapter .scene-copy{transform:none!important;clip-path:none!important;opacity:1!important}.technical-grid{display:none}.assembly-stage:after{opacity:0}}

/* ---- Scene handoff -------------------------------------------------------
   The chapters are separate sticky stages, so each boundary read as a raw
   horizontal cut with the outgoing scene still at full strength. The outgoing
   scene now sinks toward its chapter background and the incoming stage carries
   a warm leading edge that rises with it. --seam, --exit and --handoff are
   written per stage by motion.js and default to 0, so the composition, the
   responsive media frames and the reduced-motion layout are unchanged. */
.chapter-stage:before{content:'';position:absolute;inset:0 0 auto;height:1px;z-index:16;pointer-events:none;opacity:var(--seam,0);background:linear-gradient(90deg,transparent,#cb754759 11%,#e9c79d 50%,#cb754759 89%,transparent);box-shadow:0 16px 46px -14px #eac89e5c}
.chapter .scene{opacity:calc(1 - var(--exit,0)*.55)}
/* The drawer keeps its wood leading edge. The seam only gives it its entrance. */
.drawer-stage:before{height:10px;background:linear-gradient(0deg,#533d28,#ac8657,#3b2c1c);box-shadow:0 18px 50px -16px #d0a06e55;opacity:calc(.42 + var(--seam,0)*.58);z-index:15}
/* Act break. The closing film dissolves into the daylight of the build journal
   instead of cutting to it, so the cream section arrives as the next scene. */
.garage-stage .scene{opacity:1}
.garage-stage:after{content:'';position:absolute;left:0;right:0;bottom:0;height:38vh;z-index:14;pointer-events:none;opacity:var(--handoff,0);background:linear-gradient(180deg,rgba(240,232,217,0),rgba(240,232,217,.26) 44%,rgba(240,232,217,.84) 79%,var(--cream))}
.builds-section:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#b98a5a8c 18%,#b98a5a8c 82%,transparent)}

@media(prefers-reduced-motion:reduce){.chapter-stage:before,.garage-stage:after{opacity:0}.drawer-stage:before{opacity:1}.chapter .scene{opacity:1}}
body.reduce-motion .chapter-stage:before,body.reduce-motion .garage-stage:after{opacity:0}
body.reduce-motion .drawer-stage:before{opacity:1}
body.reduce-motion .chapter .scene{opacity:1}
/* The motion control is fixed, so the homepage footer keeps clear of it at every
   width rather than only on phones. */
.footer-bottom{padding-bottom:54px}

/* ---- Scene copy choreography --------------------------------------------
   Each chapter's copy travels its own path through the frame. motion.js writes
   the block transform and --p, the chapter's scroll phase; the lines below
   parallax against the headline at their own rates so the stack reads as layers
   in the room rather than one flat plate. Headlines are left out on purpose:
   they carry the reveal transition, and a transition on a scroll-driven
   transform would lag behind the scroll instead of freezing with it. The button
   is left out for the same reason — its transform belongs to :hover. --p
   defaults to 0, so nothing moves before script runs. */
.assembly-stage .hero-copy{transform-origin:10% 50%}
.chapter .system-copy{transform-origin:0% 100%}
.drawer-stage .drawer-copy{transform-origin:0% 100%}
.garage-copy{transform-origin:16% 100%}
.chapter .scene-copy>.eyebrow,.chapter .scene-copy>.scene-description,.chapter .scene-copy>.text-link,.chapter .scene-copy>.explore-label{will-change:transform}
/* The lines no longer travel across the frame. They resolve in place: the eyebrow's
   letters converge from wide dispersion into their final tracking, and the supporting
   lines settle a few pixels behind the headline. The scene is what moves. */
.chapter .scene-copy>.eyebrow{letter-spacing:var(--track,.09em);white-space:nowrap}
.assembly-stage .hero-copy>.scene-description{transform:translate3d(0,calc((1 - var(--p,0))*7px),0)}
.chapter .system-copy>.scene-description{transform:translate3d(0,calc((1 - var(--p,0))*8px),0)}
.chapter .system-copy>.explore-label{transform:translate3d(0,calc((1 - var(--p,0))*12px),0)}
.drawer-stage .drawer-copy>.scene-description{transform:translate3d(0,calc((1 - var(--p,0))*9px),0)}
.drawer-stage .drawer-copy>.text-link{transform:translate3d(0,calc((1 - var(--p,0))*13px),0)}
.garage-copy>.scene-description{transform:translate3d(0,calc(var(--p,0)*7px),0)}
.garage-copy>.text-link{transform:translate3d(0,calc(var(--p,0)*11px),0)}
/* Type composites into the photograph instead of sitting on a soft black pad. The scrims
   still carry the contrast; this only removes the halo that read as pasted-on HTML. */
.chapter .scene-copy{text-shadow:0 1px 9px #10160d7a}
.chapter .scene-copy .button{text-shadow:none}
/* The technical marks open outward like a viewfinder as the opening chapter settles. */
.assembly-stage .technical-grid{transform:scale(calc(.962 + var(--reticle,1)*.038));transform-origin:50% 46%}

/* Portrait keeps the choreography but drops the lateral travel and the rotation:
   the copy sits in a fixed block under the media frame there, so it drifts on one
   axis only and never moves toward the gutters. */
@media(max-width:1000px) and (orientation:portrait){
 .assembly-stage .hero-copy>.eyebrow,.chapter .system-copy>.eyebrow{transform:translate3d(0,calc(var(--p,0)*-10px),0)}
 .garage-copy>.eyebrow{transform:translate3d(0,calc(var(--p,0)*-12px),0)}
 .assembly-stage .hero-copy>.scene-description,.chapter .system-copy>.scene-description,.garage-copy>.scene-description{transform:translate3d(0,calc(var(--p,0)*8px),0)}
 .chapter .system-copy>.explore-label,.garage-copy>.text-link{transform:translate3d(0,calc(var(--p,0)*14px),0)}
 .drawer-stage .drawer-copy>.eyebrow{transform:translate3d(0,calc((1 - var(--p,0))*10px),0)}
 .drawer-stage .drawer-copy>.scene-description{transform:translate3d(0,calc((1 - var(--p,0))*14px),0)}
 .drawer-stage .drawer-copy>.text-link{transform:translate3d(0,calc((1 - var(--p,0))*18px),0)}
}

/* Scene images are scroll-driven too (the storage push and the drawer zoom), so they
   need the same reduced-motion reset the scene and copy layers already had. */
body.reduce-motion .chapter .scene>img{transform:none!important}
@media(prefers-reduced-motion:reduce){.chapter .scene>img{transform:none!important}}
@media(prefers-reduced-motion:reduce){.chapter .scene-copy>*{transform:none!important;will-change:auto}.chapter .scene-copy>.eyebrow{letter-spacing:.09em!important}.assembly-stage .technical-grid{transform:none!important}}
body.reduce-motion .chapter .scene-copy>*{transform:none!important;will-change:auto}
body.reduce-motion .chapter .scene-copy>.eyebrow{letter-spacing:.09em!important}
body.reduce-motion .assembly-stage .technical-grid{transform:none!important}

/* ---- Scene notes ---------------------------------------------------------
   One supporting state per chapter, in an editorial register rather than a
   display one: sentence case, body face, medium size, generous leading, a
   hairline instead of a plate. Each arrives in layers — the rule draws, the
   index follows, the line last — holds long enough to be read, then leaves
   whole. Placement rotates chapter to chapter so the handoff reads as the copy
   moving somewhere else, not as two blocks sharing a corner. Never headings:
   each chapter keeps its single h1/h2 in the copy block. */
.scene-note{position:absolute;z-index:7;opacity:0;pointer-events:none;color:var(--cream);font-family:var(--body);max-width:min(34ch,38vw);will-change:opacity}
.scene-note>p{margin:0}
.note-rule{display:block;width:62px;height:1px;background:linear-gradient(90deg,#e9c79d,#e9c79d2e);transform:scaleX(var(--rule,0));transform-origin:left;margin-bottom:18px}
.note-index{text-shadow:0 1px 14px #0d110ce6,0 1px 3px #0d110cb3;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:#d6c9b0;margin-bottom:11px;opacity:var(--l1,0);transform:translate3d(0,calc((1 - var(--l1,0)) * 7px),0)}
.note-line{text-shadow:0 1px 16px #0d110ce6,0 1px 4px #0d110cb3;font-size:clamp(.95rem,1.28vw,1.2rem);line-height:1.72;color:#f1ebde;opacity:var(--l2,0);transform:translate3d(0,calc((1 - var(--l2,0)) * 10px),0);text-wrap:pretty}
/* Legibility as scene lighting, not as a label. Each state carries a wide directional
   falloff anchored to the frame edge and running nearly the full height, so it reads as
   the same grading the scene scrims already apply rather than a panel behind the type.
   Measured against the film and stills, the plain type sat at 1.71:1 on the lit wall and
   2.43:1 over the drawer; the falloff carries all four past 4.5:1. It is a child of the
   state, so it arrives and leaves with the words. */
.scene-note:before{content:'';position:absolute;z-index:-1;pointer-events:none;top:-46vh;bottom:-46vh}
.note-one:before{right:-14vw;left:-36vw;background:linear-gradient(270deg,#0c100bd6,#0c100b96 38%,#0c100b45 64%,transparent 88%)}
.note-two:before,.note-three:before{left:-14vw;right:-36vw;background:linear-gradient(90deg,#0c100bd6,#0c100b96 38%,#0c100b45 64%,transparent 88%)}
.note-four:before{left:-14vw;right:-14vw;top:-26vh;bottom:-34vh;background:linear-gradient(0deg,#0c100bdb,#0c100ba3 34%,#0c100b4d 62%,transparent 88%)}
.note-one{right:var(--gutter);top:61%;text-align:right}
.note-two{left:var(--gutter);top:32%}
.note-three{left:var(--gutter);top:58%}
.note-four{left:var(--gutter);right:var(--gutter);bottom:23%;text-align:center;max-width:none}
.note-one .note-rule{margin-left:auto;transform-origin:right;background:linear-gradient(270deg,#e9c79d,#e9c79d2e)}
.note-four .note-rule{margin-left:auto;margin-right:auto;transform-origin:center;background:linear-gradient(90deg,#e9c79d2e,#e9c79d,#e9c79d2e)}
.note-four .note-line{max-width:38ch;margin-left:auto;margin-right:auto}

/* Portrait brings every state into the copy column, left aligned and a step smaller. */
@media(max-width:1000px) and (orientation:portrait){
 .scene-note{left:var(--gutter);right:var(--gutter);top:var(--copy-top);bottom:auto;text-align:left;max-width:none}
 .note-one .note-rule,.note-four .note-rule{margin-left:0;margin-right:0;transform-origin:left;background:linear-gradient(90deg,#e9c79d,#e9c79d2e)}
 .note-four .note-line{margin-left:0;margin-right:0;max-width:none}
 .note-line{font-size:1rem;line-height:1.65}
}

/* Reduced motion shows the anchored copy block only. */
@media(prefers-reduced-motion:reduce){.scene-note{display:none!important}}
body.reduce-motion .scene-note{display:none!important}