/* Persistent navigation and a bounded, shared character choreography. */
html{scroll-padding-top:calc(var(--header-height,104px) + 24px)}
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);transition:box-shadow .25s}
.site-header.is-scrolled{box-shadow:0 5px 20px #09090b09}
.mobile-nav{position:fixed;top:var(--header-height,104px);z-index:49;max-height:calc(100dvh - var(--header-height,104px));overflow-y:auto}
/* One scroll-driven stage, with the headline outside the pinned story. */
.hero{overflow:visible}
.hero .hero-offer{margin-bottom:32px}
.hero-story{position:relative;height:auto;padding:0;width:100%}
.hero-story-sticky{position:relative;top:auto;padding-top:16px;padding-bottom:8px;background:var(--paper)}
.hero-story.is-static .hero-story-sticky{position:relative;top:auto}
.hero-story.is-static{height:auto;padding:0}
.hero .hero-stage{--letter-size:clamp(150px,15vw,210px);--letter-height:calc(var(--letter-size)*1.07142857);--letter-gap:64px;--cameraX:0;--cameraY:0;--vx:-132;--vy:0;--vz:0;--vrz:-10;--hx:132;--hy:0;--hry:0;--wire:1;--sideWire:0;height:calc(var(--letter-size)*1.7 + 110px);margin:0 auto;transform:none!important;perspective:none}
/* Perspective is owned once. These wrappers must never flatten their children. */
.perspective-scene{position:absolute;left:50%;bottom:calc(80px + var(--letter-size)*.32);margin-left:calc(var(--letter-size)/-2);width:var(--letter-size);height:var(--letter-height);perspective:1200px;perspective-origin:50% 50%;transform-style:preserve-3d;overflow:visible}
.hero-rig{position:absolute;inset:0;transform-style:preserve-3d;overflow:visible;transform-origin:50% 50%;transform:rotateX(calc(var(--cameraX)*1deg)) rotateY(calc(var(--cameraY)*1deg))}
.hero .hero-stage .character{position:absolute;inset:0;left:0;bottom:auto;width:100%;height:100%;margin:0;aspect-ratio:auto;transform-origin:50% 50%;transform-style:preserve-3d;overflow:visible;backface-visibility:hidden;transition:none;animation:none!important;--response:0px}
.hero .hero-stage[data-scene] .character-v,.hero .hero-stage[data-scene] .character-v:is(:hover,:focus-visible){transform:translate3d(calc(var(--vx)*1px),calc(var(--vy)*1px + var(--response)),calc(var(--vz)*1px)) rotateZ(calc(var(--vrz)*1deg))}
.hero .hero-stage[data-scene] .character-h,.hero .hero-stage[data-scene] .character-h:is(:hover,:focus-visible){transform:translate3d(calc(var(--hx)*1px),calc(var(--hy)*1px + var(--response)),calc(var(--hz,0)*1px)) rotateY(calc(var(--hry)*1deg)) scale(var(--hScale,1))}
.hero .hero-stage .letter-art{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;backface-visibility:hidden;transform:translateZ(.6px);user-select:none}
.hero .hero-stage .character svg,.hero .hero-stage .character:is(:hover,:focus-visible) svg{display:block;width:100%;height:100%;overflow:hidden;transform:none;filter:none!important;transition:none}
.hero .hero-stage .character-h svg path{fill:#2445f2}
.hero .hero-stage .character-h:before{display:none}
.face-wire{position:absolute;inset:0;display:block;box-sizing:border-box;border:1px solid #b8bdc7cc;background-image:linear-gradient(#b8bdc780 1px,transparent 1px),linear-gradient(90deg,#b8bdc780 1px,transparent 1px);background-size:25% 25%;pointer-events:none;backface-visibility:hidden}
.character-v .face-wire{opacity:var(--wire)}
.character-h .face-wire,.cube-top .face-wire{opacity:calc(var(--sideWire)*var(--wire))}
.cube-top{position:absolute;left:0;top:calc((var(--letter-height) - var(--letter-size))/2);width:var(--letter-size);height:var(--letter-size);transform-style:preserve-3d;overflow:visible;backface-visibility:hidden;transform-origin:50% 50%;transform:translateY(calc(var(--letter-height)/-2)) rotateX(90deg)}
.hero .hero-stage[data-scene="lead"]:has(.character:is(:hover,:focus-visible)) .character{--response:-3px}
.hero .hero-stage .stage-caption{display:block;position:absolute;bottom:0;left:0;right:0;min-height:56px;padding:0;transform:none}
.caption-layer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:16px;font-size:12px;line-height:1.7;opacity:0;pointer-events:none;transition:opacity .24s}
.caption-layer:first-child{opacity:1}.caption-layer .mono{color:var(--blue);font-size:10px;white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-story .hero-bottom{padding-top:16px;gap:24px;grid-template-columns:1fr auto 1fr}
.hero-story .story-hint{grid-column:1;grid-row:1;font-size:11px;color:var(--muted);display:flex;gap:12px;align-items:center}
.hero-story .hero-bottom .scene-controls{grid-column:2;grid-row:1}
.hero-story .hero-bottom .discover-link{grid-column:3;grid-row:1}
.hero .scene-controls{display:flex;gap:4px;--pill-color:var(--ink);padding:4px}
.scene-tabs{position:relative;display:grid;grid-template-columns:repeat(3,74px);border-radius:24px;isolation:isolate}
.scene-indicator{position:absolute;left:0;top:0;bottom:0;width:74px;border-radius:24px;background:var(--pill-color);z-index:-1;pointer-events:none;transition:transform .42s cubic-bezier(.22,1,.36,1),background .25s}
.hero .scene-controls .scene-tabs button,.hero .scene-controls .scene-tabs button:is(:hover,[aria-pressed="true"]){font-size:11px;line-height:1.5;padding:12px 0;border:0;background:transparent;position:relative;min-height:44px}
.hero .scene-controls .scene-tabs button:focus-visible{outline-offset:-3px;outline:2px solid var(--blue)}
.hero .scene-controls .motion-toggle{min-width:38px;min-height:44px;padding:8px;font-size:12px}
@media(min-width:900px) and (max-height:900px){.hero .hero-stage{--letter-size:140px}.hero .hero-offer{margin-bottom:28px}}
@media(max-width:850px){
 .hero-story .hero-bottom{grid-template-columns:1fr;gap:20px}
 .hero-story .hero-bottom .scene-controls{grid-column:1;grid-row:1}
 .hero-story .hero-bottom .discover-link{grid-column:1;grid-row:2;justify-self:center}
 .hero-story .story-hint{display:none}
}
@media(max-width:700px){
 .hero .hero-stage{--letter-size:clamp(105px,29vw,150px);--letter-gap:44px;height:calc(var(--letter-size)*1.7 + 110px)}
 .hero .hero-offer{margin-bottom:32px}
 .hero-story-sticky{padding-top:12px}
 .caption-layer{flex-direction:column;gap:4px;font-size:11px;padding-inline:8px;text-align:center}
 .caption-layer .mono{font-size:9px}
 .scene-tabs{grid-template-columns:repeat(3,64px)}.scene-indicator{width:64px}
}
@media(prefers-reduced-motion:reduce){
 .hero-story{height:auto;padding:0}.hero-story-sticky{position:relative;top:auto}
 .hero .hero-stage[data-scene="lead"]:has(.character:is(:hover,:focus-visible)) .character{--response:0px}
 .scene-indicator,.site-header,.caption-layer{transition:none}
 .hero-story[data-motion="reduced"] .motion-toggle{display:none}
}

/* Full-viewport hero: its scroll track is occupied by the pinned picture. */
.hero-scroll-track{position:relative}
.hero-scroll-track.is-pinned{height:var(--hero-track-height)}
.hero-scroll-track.is-framed .hero{position:relative;top:auto;height:var(--hero-height);min-height:0;max-height:none;padding-block:16px;display:flex;flex-direction:column;gap:0;justify-content:center;background:var(--paper);overflow:visible}
.hero-scroll-track .hero h1{transform:none!important;opacity:1!important}
.hero-scroll-track.is-framed .hero h1{font-size:var(--hero-title-size);line-height:1.08;gap:12px;margin:0 auto;flex:none}
.hero-scroll-track.is-framed .hero-offer{font-size:13px;line-height:1.55;max-width:660px;margin:12px auto 0;flex:none}
.hero-scroll-track.is-framed .hero-story{flex:none;min-height:0;height:auto;display:flex;flex-direction:column;padding:0;margin:24px 0 0}
.hero-scroll-track.is-framed .hero-story-sticky{flex:none;min-height:0;position:relative;top:auto;display:flex;flex-direction:column;padding:0}
.hero-scroll-track.is-framed .hero .hero-stage{--letter-size:var(--hero-letter-size);flex:none;min-height:0;height:calc(var(--letter-size)*1.7 + 110px);margin:0 auto}
.hero-scroll-track.is-framed .hero-bottom{flex:none;padding-top:8px;gap:12px}
.hero-scroll-track .hero .hero-stage .letter-art,.hero-scroll-track .hero .stage-caption{animation:none!important}
.hero-scroll-track .hero .hero-stage .character{--response:0px!important}
.hero-scroll-track .caption-layer,.hero-scroll-track .scene-indicator{transition:none}
@media(max-width:850px){
 .hero-scroll-track.is-framed .hero{padding-block:12px}
 .hero-scroll-track.is-framed .hero-offer{font-size:12px;line-height:1.5}
 .hero-scroll-track.is-framed .hero-bottom{gap:10px}
 .hero-scroll-track.is-framed .hero-bottom .discover-link{font-size:11px;line-height:1.5}
}

/* Diagnose → Build → Lead: one rig, intentional entrances and a manual escape. */
.hero-scroll-track{--blue:#2445f2}
.hero-scroll-track.is-framed:not(.is-pinned){height:var(--hero-height)}
.hero-scroll-track.is-pinned .hero{position:sticky;top:var(--hero-top)}
.hero .hero-stage{--hAlpha:0}
.hero .hero-stage .character-h{visibility:hidden}
.hero .hero-stage .character-h .letter-art{opacity:var(--hAlpha)}
.character-h .face-wire{opacity:calc(var(--sideWire)*var(--wire)*var(--hAlpha))}
.hero .hero-stage .character-v .face-wire{border:0;background:none}
.hero .hero-stage .character-v .face-wire svg{stroke:#b8bdc7;stroke-width:1;fill:none;overflow:visible;opacity:.8}
.hero .hero-stage .character-v .face-wire svg :is(rect,path){vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:var(--wireErase,0)}
.hero-scroll-track .hero .hero-stage[data-diagnosing="true"] .character-v .letter-art{animation:none!important}
.hero-scroll-track .hero .hero-stage[data-diagnosing="true"] .character-v .face-wire svg :is(rect,path){animation:vh-trace-draw 3.2s cubic-bezier(.4,0,.2,1) var(--scan-delay,0s) both}
.hero-scroll-track[data-paused="true"] .hero .hero-stage .letter-art,
.hero-scroll-track[data-paused="true"] .hero .hero-stage .face-wire svg :is(rect,path),
body.welcome-active .hero-scroll-track .hero .hero-stage .letter-art,
body.welcome-active .hero-scroll-track .hero .hero-stage .face-wire svg :is(rect,path){animation-play-state:paused!important}
.hero-scroll-track .scene-controls .scene-indicator{transition:transform .38s cubic-bezier(.22,1,.36,1),background .2s}
.hero-scroll-track .stage-caption .caption-layer{transition:opacity .2s}
.hero-scroll-track[data-paused="true"] .hero-rig,
.hero-scroll-track[data-paused="true"] .hero .hero-stage .character{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.hero-scroll-track[data-reduced="true"] .motion-toggle{display:none}
@keyframes vh-diagnose-float{0%,100%{transform:translate3d(0,0,.6px)}50%{transform:translate3d(0,-2px,.6px)}}
@keyframes vh-trace-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:var(--wireErase,0)}}
@media(prefers-reduced-motion:reduce){
 .hero-scroll-track .hero .hero-stage[data-diagnosing="true"] .character-v .letter-art,
 .hero-scroll-track .hero .hero-stage[data-diagnosing="true"] .character-v .face-wire svg :is(rect,path){animation:none!important}
 .hero-scroll-track .scene-controls .scene-indicator,.hero-scroll-track .stage-caption .caption-layer,
 .hero-scroll-track[data-paused="true"] .hero-rig,.hero-scroll-track[data-paused="true"] .hero .hero-stage .character{transition:none}
}

/* Manual poses use the same easing for scaffolding and letter assembly. */
.hero-scroll-track[data-paused="true"] .face-wire{transition:opacity .4s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.hero-scroll-track[data-paused="true"] .face-wire{transition:none}}

/* Dedicated stage: effects are leaf/sibling layers, never flattened 3D parents. */
.hero .hero-stage{background:#f8f9fa;border-radius:16px}
.hero-scroll-track.is-framed .hero,.hero-scroll-track .hero-story-sticky{background:#fff}
.hero .hero-stage .face-wire{border:0;background:none}
.hero .hero-stage .face-wire svg{display:block;width:100%;height:100%;stroke:#a2a9b5;stroke-width:1;fill:none;opacity:.8}
.hero .hero-stage .face-wire svg :is(rect,path){vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:var(--wireErase,0)}
.hero .hero-stage[data-diagnosing="true"] .character-v .face-wire svg{stroke:#727b8b;animation:vh-grid-pulse 3.8s ease-in-out infinite}
.scan-line{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#2445f2a6 20%,#2445f2a6 80%,transparent);box-shadow:0 0 10px 2px #2445f22b;transform:translateZ(.3px);pointer-events:none;opacity:0}
.hero-stage[data-diagnosing="true"] .scan-line{animation:vh-scan 4s linear infinite}
.hero-scroll-track[data-paused="true"] .scan-line,.hero-scroll-track[data-paused="true"] .face-wire svg,
body.welcome-active .scan-line,body.welcome-active .face-wire svg{animation-play-state:paused!important}
.lock-ripple{position:absolute;left:50%;bottom:calc(80px + var(--letter-size)*.32);margin-left:calc(var(--letter-size)*-.95);width:calc(var(--letter-size)*1.9);height:var(--letter-height);border:1px solid #2445f2;border-radius:12px;box-shadow:0 0 22px #2445f240,inset 0 0 18px #2445f218;opacity:0;pointer-events:none;transform-origin:center}
@keyframes vh-grid-pulse{0%,100%{opacity:.2}50%{opacity:.4}}
@keyframes vh-scan{0%{top:0;opacity:0}8%{opacity:.7}90%{opacity:.7}100%{top:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){
 .hero .hero-stage[data-diagnosing="true"] .face-wire svg{animation:none;opacity:.65}
 .hero-stage .scan-line,.hero-stage .lock-ripple{display:none}
}

/* All grids use exact plane bounds. Shared edges have one stroke owner. */
.hero .hero-stage .face-wire svg,
.hero .hero-stage .character .face-wire svg{overflow:visible;stroke:#9ba3af;opacity:.75}
.hero .hero-stage .character-h .face-wire svg path{fill:none}
