/* The second direction adds a cinematic scene without changing the content system. */
:root{--night:#060916;--ice:#899cff}
.header{transition:background .45s,color .45s,border-color .45s}.header.scene-header{background:rgba(5,8,18,.88);color:#f5f7ff;border-color:#abb8e533}.scene-header .brand img{filter:invert(1) grayscale(1);mix-blend-mode:screen}.scene-header .nav-book{color:var(--accent)}.scene-header .nav nav a:after{background:var(--ice)}.scene-header .menu-lines{color:white}.hero-world{background:var(--night);color:#f5f7ff;position:relative;isolation:isolate;overflow:clip}.cinematic-backdrop{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}.cinematic-backdrop video{width:100%;height:115%;object-fit:cover;object-position:center;transform:translateY(var(--film-offset,0px));opacity:.87;filter:saturate(1.3);will-change:transform}.scene-vignette{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#040711df 0%,#050811b3 28%,#06091612 65%,#06091608),linear-gradient(0deg,#060916 0%,transparent 26%,transparent 80%,#06091665)}.scene-grain{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.hero{position:relative;min-height:calc(100svh - 166px);padding-block:40px 56px;gap:0}.hero-copy{position:relative;z-index:4}.hero h1{font-size:clamp(62px,6.8vw,105px);text-shadow:0 3px 24px #03060b55}.hero h1 span{color:var(--ice);background:linear-gradient(125deg,#aebcff 5%,#7f94ff 45%,#617aff 95%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-copy>p{color:#c1c7d9;max-width:480px;font-size:17px;line-height:1.65;margin-top:29px}.hero-actions{margin-top:32px}.hero-actions .dark{background:var(--accent);color:#0b1021;border-color:var(--accent);box-shadow:0 0 40px #ff9f5410}.hero-actions .dark:hover{background:#ffb577;box-shadow:0 0 35px #ff9f5420}.hero-actions .text-link{color:#e8edff}.hero-art{z-index:2;width:calc(100% + 140px);margin-left:-70px;align-self:center}.hero-art .loop-stage{position:relative;height:clamp(400px,calc(100svh - 240px),680px);overflow:visible;touch-action:pan-y;cursor:grab;perspective:none}.loop-stage:active{cursor:grabbing}.loop-stage:focus-visible{outline:1px solid #899cff80;outline-offset:-30px}.loop-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s;pointer-events:none}.loop-stage.webgl-ready canvas{opacity:1}.loop-stage.webgl-ready .loop-parallax{opacity:0;pointer-events:none}.loop-parallax{width:100%;height:100%;margin:auto;transition:opacity .6s}.loop-sculpture{animation:none;transform:none}.loop-center{z-index:3}.loop-center strong{font-size:23px;color:#e7edff;text-shadow:0 0 24px #3150ff}.loop-center span{color:var(--accent)}.loop-controls{position:relative;z-index:4;margin:0 56px;gap:25px}.loop-steps button{color:#b2bbd1;letter-spacing:.06em;font-size:11px;min-height:40px}.loop-steps button+button:before{color:#45506a}.loop-steps button[aria-pressed=true]{color:var(--accent)}.loop-play{border:1px solid #8a9fff70;color:#d5ddff;background:#050a1680;font-size:12px}.loop-play:hover{background:#23398580;color:white;border-color:var(--ice)}.loop-caption{color:#bdcaff;bottom:-25px;font-size:11px}.sculpture-hint{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#a9b8dc;pointer-events:none;transition:opacity .3s}.hero-art:has(.is-active) .sculpture-hint{opacity:0}.promise-strip{position:relative;border-color:#879dc133;background:#070b1680;backdrop-filter:blur(10px)}.promise-strip .wrap{height:86px}.promise-strip span{color:#b8c2d7;font-size:14px}.promise-strip span+span{border-color:#8a9bbc40}.hero-world :focus-visible{outline-color:var(--accent)}
.layered-section{position:relative;isolation:isolate}.flow-layer{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.flow-deep{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.flow-deep:before,.flow-deep:after{content:'';position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(80px);animation:atmosphere-drift 18s ease-in-out infinite;opacity:.13}.flow-deep:before{background:#627eff;right:-20%;top:-15%}.flow-deep:after{background:#68f4f2;bottom:-45%;left:12%;animation-delay:-8s;opacity:.08}.finder{background:linear-gradient(125deg,#14265f 0%,#203ae0 55%,#294efb 100%);overflow:clip}.finder .flow-layer{opacity:.6}.finder-form{background:#13205847;backdrop-filter:blur(14px);border-color:#b7c6ff60;box-shadow:inset 0 0 60px #6079ff0a}.recommendation{background:#060b20eb;border:1px solid #7a91ed3d;backdrop-filter:blur(20px);box-shadow:0 30px 90px #040d4b3d}.service.is-open{background:linear-gradient(130deg,#223def,#193bbf)}.workflow-demo{background:#060b1f;box-shadow:0 18px 60px #040d4b40}.use-tabs button[aria-selected=true]{background:#2849ec}.engagement{background:linear-gradient(135deg,#090c19,#10162c);overflow:clip}.engagement .plan{position:relative;transition:transform .4s var(--ease),box-shadow .4s}.engagement .plan:hover{transform:translateY(-8px);box-shadow:0 25px 60px #0004;z-index:2}.engagement .plan.featured{background:linear-gradient(145deg,#e9edff,#dbe3ff)}.footer{background:#060916;overflow:clip}.footer h2 span{color:#8ba0ff}.footer>.wrap{position:relative;z-index:1}.footer .flow-layer{opacity:.8}.story-type{background:linear-gradient(135deg,#203ff5,#7190ff 40%,#142ab1 70%);color:transparent;background-clip:text;-webkit-background-clip:text;background-size:200% 200%;animation:type-light 12s ease-in-out infinite}.section-intro,.use-cases,.results-grid,.story-copy,.faq-item{position:relative;z-index:1}.method-wheel{filter:drop-shadow(0 18px 30px #344fc511)}.wheel-step{backdrop-filter:blur(10px)}.wheel-center{box-shadow:0 0 70px #4767ff18}.header .motion-shortcut{border:1px solid #7988b144;background:transparent;display:flex;gap:7px;align-items:center;padding:7px 9px;font-size:9px;letter-spacing:.04em;flex-shrink:0}.motion-shortcut .icon{width:12px;height:12px}.nav{gap:36px}.nav-book{margin-left:auto}.scene-header .motion-shortcut{color:#bdc9e4}.motion-paused .cinematic-backdrop video{transform:none!important}.motion-paused .scene-grain{opacity:.02}.webgl-unavailable .sculpture-hint{display:none}
@keyframes atmosphere-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-110px,80px,0) scale(1.2)}}@keyframes type-light{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
@media(min-width:1600px){.hero h1{font-size:108px}.hero{min-height:820px}}
@media(max-width:1100px){.hero-art{width:calc(100% + 90px);margin-left:-45px}.hero-art .loop-stage{height:500px}.loop-controls{margin-inline:35px;gap:12px;flex-direction:column;align-items:center}.hero-copy>p{font-size:15px}.hero h1{font-size:6.8vw}.nav{gap:20px}.nav nav{gap:20px}.header .motion-shortcut{padding:7px}.motion-shortcut span{display:none}.sculpture-hint{bottom:95px}.loop-caption{text-align:center;bottom:-30px}}
@media(max-width:760px){.header.scene-header{background:#060916ed}.scene-header .nav nav{background:#090e20;color:#eff3ff;border-color:#7389ad50}.scene-header .menu-toggle[aria-expanded=true] .menu-lines:before,.scene-header .menu-toggle[aria-expanded=true] .menu-lines:after{background:#eff3ff}.nav{gap:12px}.nav-book{gap:7px}.header .motion-shortcut{padding:7px;border:0;margin-left:0}.header .motion-shortcut .icon{width:13px;height:13px}.hero{padding-block:42px 28px;gap:0;min-height:0}.hero h1{font-size:clamp(47px,12.5vw,82px);letter-spacing:-.06em}.hero-copy>p{font-size:15px;max-width:390px;line-height:1.65;margin-top:24px}.hero-actions{margin-top:24px}.hero-art{width:calc(100% + 44px);max-width:500px;margin-left:0;margin-top:4px;justify-self:center}.hero-art .loop-stage{height:370px;aspect-ratio:auto;max-width:100%;width:100%;margin:0}.loop-controls{margin:0 22px;flex-direction:row;gap:8px;align-items:center}.loop-steps button{font-size:8px;min-height:40px}.loop-play{font-size:10px;min-height:40px}.sculpture-hint{bottom:76px;font-size:8px}.loop-caption{position:static;min-height:18px;margin:12px 20px 0;font-size:10px}.cinematic-backdrop video{object-position:68% center;opacity:.78;height:110%}.scene-vignette{background:linear-gradient(180deg,#050813b3 0%,#050813b3 37%,#05081315 65%,#060916 100%)}.promise-strip .wrap{height:auto;padding:0;grid-template-columns:1fr}.promise-strip span{font-size:12px;padding:15px 22px}.promise-strip span+span{border-top:1px solid #8a9bbc25}.finder-form{backdrop-filter:none}.recommendation{backdrop-filter:none}.engagement .plan:hover{transform:none}.flow-deep:before,.flow-deep:after{width:300px;height:300px;filter:blur(50px)}.hero-world{overflow:clip}.footer .flow-layer{opacity:.5}.nav nav{gap:24px}.brand{width:145px}}
@media(max-width:365px){.brand{width:125px}.nav{gap:8px}.hero-actions{gap:14px}.hero-actions .button{padding:14px 12px;gap:12px}.hero-actions .text-link{font-size:10px}.hero-art .loop-stage{height:335px}}
@media(prefers-reduced-motion:reduce){.cinematic-backdrop video{transform:none!important}.engagement .plan:hover{transform:none}.hero-art .loop-stage{cursor:default}}

/* Reference refinement: volume above, one shared sequence below. */
.hero{padding-block:28px 18px;row-gap:12px}.hero-art .loop-stage{height:clamp(410px,calc(100svh - 310px),640px)}.hero-loop-bar{grid-column:1/-1;position:relative;z-index:4;padding-top:12px}.hero-loop-bar .loop-controls{margin:0 50px;display:flex;flex-direction:row;gap:40px}.hero-loop-bar .loop-steps{display:grid;grid-template-columns:repeat(4,1fr);flex:1}.hero-loop-bar .loop-steps button{display:flex;align-items:center;justify-content:center;gap:16px;font-size:13px;letter-spacing:.13em;min-height:52px;padding:8px 20px;white-space:nowrap}.hero-loop-bar .loop-steps button+button{border-left:1px solid #8c9bc43b}.hero-loop-bar .loop-steps button+button:before{display:none}.stage-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #718cff;border-radius:50%;color:#9aaeff;font-size:10px;letter-spacing:0;transition:box-shadow .4s,background .4s}.loop-steps button[aria-pressed=true] .stage-mark{background:#718cff25;box-shadow:0 0 24px #597cff40}.hero-loop-bar .loop-play{min-width:160px;padding:12px 18px;font-size:13px}.hero-loop-bar .loop-caption{position:static;min-height:18px;text-align:center;margin:12px 0 0;font-size:12px}.sculpture-hint{bottom:5px}.hero h1 span{text-shadow:none}.cinematic-backdrop video{opacity:.58}.scene-vignette{background:linear-gradient(90deg,#040711ee 0%,#050811bb 28%,#06091622 65%,#06091618),linear-gradient(0deg,#060916 0%,transparent 35%,transparent 80%,#06091665)}
.method-wheel{position:relative;isolation:isolate}.method-wheel:before,.method-wheel:after{content:'';position:absolute;inset:-10%;border:1px solid #3758de35;border-radius:50%;z-index:-1;pointer-events:none;transform:rotateX(62deg) rotateZ(-24deg);animation:method-orbit 26s linear infinite}.method-wheel:after{inset:-18%;border-color:#3758de20;animation-direction:reverse;animation-duration:34s}.finder .flow-layer{opacity:.85}.footer .flow-deep:before{opacity:.2}.footer .flow-layer{opacity:1}
@keyframes method-orbit{to{transform:rotateX(62deg) rotateZ(336deg)}}
@media(max-width:1100px){.hero-loop-bar .loop-controls{margin:0;gap:18px}.hero-loop-bar .loop-steps button{font-size:11px;padding:8px;gap:9px}.hero-loop-bar .loop-play{min-width:140px}.hero-art .loop-stage{height:500px}.sculpture-hint{bottom:0}}
@media(max-width:760px){.hero{padding-block:36px 16px;row-gap:0}.hero-art .loop-stage{height:385px}.hero-loop-bar{padding-top:8px}.hero-loop-bar .loop-controls{flex-direction:column;gap:14px;margin:0}.hero-loop-bar .loop-steps{width:100%;flex:none}.hero-loop-bar .loop-steps button{flex-direction:column;gap:8px;font-size:9px;padding:4px;min-height:64px;letter-spacing:.06em}.stage-mark{width:27px;height:27px;font-size:9px}.hero-loop-bar .loop-play{min-height:44px;width:100%;justify-content:center}.hero-loop-bar .loop-caption{font-size:11px;margin-top:10px}.hero-art{margin-top:6px}.sculpture-hint{bottom:0}.scene-vignette{background:linear-gradient(180deg,#050813a3 0%,#050813aa 32%,#05081310 65%,#060916 100%)}.method-wheel:before{inset:-5%}.method-wheel:after{inset:-8%}}
#approach{overflow:clip}

/* State is already named in the OODA controls; keep the reactor unobstructed. */
.loop-center{display:none}

/* Keep the hero focused on the working drive assembly. */
.cinematic-backdrop video{opacity:.28}

.sculpture-hint{white-space:nowrap;text-align:center}

/* Scroll depth is driven by the existing visibility-aware animation clock. */
.hero-art{translate:0 var(--hero-depth,0px)}
.ooli-hero{translate:0 var(--ooli-depth,0px)}
.flow-deep{translate:0 var(--section-depth,0px);inset:-70px 0}
.method-wheel{translate:0 var(--method-depth,0px)}
.motion-paused .hero-art,.motion-paused .ooli-hero,.motion-paused .flow-deep,.motion-paused .method-wheel{translate:none}
@media(prefers-reduced-motion:reduce){.hero-art,.ooli-hero,.flow-deep,.method-wheel{translate:none!important}}

/* Mechanical drafting marks sit on separate scroll planes from the live assembly. */
.hero-drafting{position:absolute;inset:-10% -5% -10% 38%;z-index:-1;pointer-events:none;opacity:.22;background-image:linear-gradient(#7c99dd21 1px,transparent 1px),linear-gradient(90deg,#7c99dd21 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse,#000,transparent 70%);transform:perspective(900px) rotateX(18deg) rotateZ(-12deg);translate:0 var(--hero-grid-depth,0px)}
.hero-foreground{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:clip;translate:0 var(--hero-front-depth,0px)}
.hero-foreground i{position:absolute;width:450px;height:450px;border:1px solid #86aaff24;border-radius:50%;right:-330px;top:30%;box-shadow:0 0 0 22px #769eff06,0 0 0 24px #789dff12;transform:rotateX(40deg) rotateY(-25deg)}
.hero-foreground i+i{width:220px;height:220px;right:37%;top:85%;border-color:#ff9f5429;box-shadow:0 0 0 12px #ff9f5406;filter:blur(1px)}
.fabrication-note{position:absolute;left:48%;bottom:28px;pointer-events:none;border-left:1px solid #ff9f5470;padding:8px 12px;color:#b8c8e2;font-size:8px;letter-spacing:.12em;background:linear-gradient(90deg,#080e21bb,transparent);z-index:4}
.fabrication-note b{display:block;font-size:10px;letter-spacing:.02em;font-weight:400;margin-top:5px;color:#e2e8f5}.fabrication-note b span{color:#ff9f54;padding:0 5px}.fabrication-dot{display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:50%;margin-right:6px;box-shadow:0 0 8px #ff9f5490}
.depth-assembly{position:absolute;right:-100px;top:12%;width:460px;height:460px;z-index:-1;pointer-events:none;color:#3862c5;opacity:.13;translate:0 var(--foreground-depth,0px);rotate:var(--depth-turn,0deg)}
.depth-ring{position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;background:repeating-conic-gradient(from 0deg,currentColor 0deg .35deg,transparent .35deg 10deg);mask-image:radial-gradient(transparent 65%,#000 65.3%,#000 68%,transparent 68.3%)}
.depth-ring.inner{inset:38px;transform:rotateX(42deg) rotateY(-20deg);background:none;mask-image:none;border-style:dashed}.depth-cross{position:absolute;inset:46%;border:1px solid currentColor;transform:rotate(45deg)}.depth-cross:before,.depth-cross:after{content:'';position:absolute;background:currentColor;width:150px;height:1px;top:50%;left:-55px}.depth-cross:after{transform:rotate(90deg)}.depth-trace{position:absolute;top:67%;right:65%;width:55vw;height:120px;border-top:1px solid currentColor;border-left:1px solid currentColor;transform:skewY(-18deg)}
.depth-1{right:auto;left:-230px;top:30%;color:#adc7ff;opacity:.19}.depth-2{right:-200px;top:55%;color:#ff9f54;opacity:.16}
.layered-section{overflow:clip}.story-type{translate:0 var(--story-depth,0px)}
.motion-paused .hero-drafting,.motion-paused .hero-foreground,.motion-paused .depth-assembly,.motion-paused .story-type{translate:none;rotate:none}
@media(max-width:760px){.hero-drafting{inset:25% -40% 0 0;background-size:42px 42px}.hero-foreground i{right:-400px}.hero-foreground i+i{display:none}.depth-assembly{width:300px;height:300px;right:-190px;opacity:.09}.depth-1{left:-210px;right:auto}.fabrication-note{left:43%;bottom:26px;font-size:6px;padding:6px 8px}.fabrication-note b{font-size:8px}.ooli-hero-label>span{display:inline}}
@media(prefers-reduced-motion:reduce){.hero-drafting,.hero-foreground,.depth-assembly,.story-type{translate:none!important;rotate:none!important}}