/* D.1 — geometry precedes mass. Final wordmark keeps its validated coordinates. */
.construction-scaffold{opacity:.16}.construction-nodes{stroke:#d3d9cd}.word-section{opacity:0}.build-dimensions{opacity:.45}
@keyframes measured-line{0%{stroke-dashoffset:1;opacity:0}15%{opacity:.65}75%{opacity:.65}100%{stroke-dashoffset:0;opacity:.16}}
@keyframes section-emerge{0%{opacity:0;stroke-width:.3}60%{opacity:.23;stroke-width:9}100%{opacity:0;stroke-width:9}}
@keyframes face-form{from{stroke-width:.3;opacity:0}to{stroke-width:9;opacity:1}}
@keyframes skeleton{0%{stroke-dashoffset:1;opacity:0}15%{opacity:1}70%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:.16}}
html[data-intro=playing] .construction-scaffold{opacity:1}
html[data-intro=playing] .construction-scaffold>path{stroke-dasharray:1;animation:measured-line calc(4.8s * var(--intro-speed)) calc(.45s * var(--intro-speed)) both}
html[data-intro=playing] .construction-scaffold>path:nth-child(even){animation-delay:calc(.75s * var(--intro-speed))}
html[data-intro=playing] .construction-nodes{animation:plan-in calc(.5s * var(--intro-speed)) calc(1.1s * var(--intro-speed)) both}
html[data-intro=playing] .build-dimensions{stroke-dasharray:1;animation:plan-build calc(1s * var(--intro-speed)) calc(1.2s * var(--intro-speed)) both}
html[data-intro=playing] .word-plan{stroke-dasharray:1;animation:skeleton calc(4.6s * var(--intro-speed)) calc(.9s * var(--intro-speed)) both}
html[data-intro=playing] .word-section{animation:section-emerge calc(2.6s * var(--intro-speed)) calc(1.8s * var(--intro-speed)) both}
html[data-intro=playing] .word-side,html[data-intro=playing] .word-depth{animation:volume-in calc(1.4s * var(--intro-speed)) calc(3s * var(--intro-speed)) both}
html[data-intro=playing] .word-front .letter,html[data-intro=playing] .mobile-drawing .word-front{stroke-dasharray:none;animation:face-form calc(1.25s * var(--intro-speed)) calc(3.1s * var(--intro-speed)) both}
html[data-intro=playing] .word-front .letter:not(.letter-n){animation-delay:calc(3.9s * var(--intro-speed))}
html[data-intro=playing] .hero-content{animation:none}
/* Same chassis and same three physical modules, reorganised without replacement. */
.sp-module{transition:transform .85s cubic-bezier(.2,.7,.2,1);transform-box:view-box;transform-origin:0 0}
.tile-face{fill:url(#porcelain);stroke:#a5ae9e;stroke-width:.6;transition:fill .6s}
.tile-thickness{fill:#6c7d70}.tile-edge{stroke:#fffef3;stroke-width:.85;stroke-opacity:.85}
.system-object text{font-family:Manrope,sans-serif;font-size:8px;letter-spacing:1px;fill:#536356}
.structure-rails{opacity:.35;transition:opacity .6s}.module-connections{opacity:0;transition:opacity .4s}
.web-detail,.process-detail{transition:opacity .45s}.process-detail{opacity:0}.care-guides,.care-mark{opacity:0}
.flow-packet{opacity:0;transform:translate(225px,174px)}
#system-stage[data-state] .object-body{transform:none}
#system-stage[data-state=flow] .module-a{transform:translate(-4px,-8px)}
#system-stage[data-state=flow] .module-b{transform:translate(-4px,4px)}
#system-stage[data-state=flow] .module-c{transform:translate(4px,4px)}
#system-stage[data-state=systems] .module-a{transform:translate(0,-12px)}
#system-stage[data-state=systems] .module-b{transform:translate(-7px,7px)}
#system-stage[data-state=systems] .module-c{transform:translate(7px,7px)}
#system-stage:not([data-state=web]) .web-detail{opacity:0}
#system-stage:not([data-state=web]) .process-detail{opacity:1}
#system-stage:not([data-state=web]) .module-connections{opacity:1}
#system-stage[data-state=systems] .structure-rails{opacity:1}
#system-stage[data-state=care] .care-mark{opacity:1}
#system-stage[data-state=care] .module-c .tile-face{fill:#e4eadc}
#system-stage[data-state=flow].state-changing .module-connections path{stroke-dasharray:1;animation:connection-build .7s both}
#system-stage[data-state=flow].state-changing .flow-packet{animation:information-route 1.2s ease-in-out both}
#system-stage[data-state=care].state-changing .module-c{animation:module-recalibrate 1.1s cubic-bezier(.2,.7,.2,1) both}
#system-stage[data-state=care].state-changing .care-guides{animation:alignment-guide 1.1s both}
#system-stage[data-state=care].state-changing .care-mark{stroke-dasharray:1;animation:connection-build .4s .65s both}
@keyframes information-route{0%{opacity:0;transform:translate(225px,159px)}15%{opacity:1}40%{transform:translate(225px,188px)}75%{opacity:1;transform:translate(311px,188px)}95%{opacity:1;transform:translate(311px,209px)}100%{opacity:0;transform:translate(311px,213px)}}
@keyframes module-recalibrate{0%,15%{transform:translate(8px,-8px)}100%{transform:translate(0,0)}}
@keyframes alignment-guide{0%,100%{opacity:0}25%,70%{opacity:.8}}
.construction-layout{grid-template-columns:.6fr 1.9fr .9fr;gap:1.65rem}
.system-object{display:block}.construction-layout figcaption{font-size:.6875rem}.human-space h2{font-size:clamp(2.2rem,3.65vw,4.4rem)}
.contact-space h2{font-size:clamp(2.9rem,5.7vw,6.5rem)}
@media(max-width:1050px){.construction-layout{grid-template-columns:.6fr 1.9fr}}
@media(max-width:650px){
 .spatial-home .site-header{row-gap:.45rem;padding-top:.8rem;padding-bottom:.4rem}
 .spatial-header nav a{font-size:.6875rem;min-height:36px;display:inline-flex;align-items:center}
 .hero-topline{font-size:.625rem;min-height:3.9rem;padding-top:0}
 .intro-controls{width:10.5rem}.intro-controls button,.intro-controls a{font-size:.625rem;min-height:30px}
 .mobile-drawing{max-height:216px}.hero-architecture{margin:.1rem -1.25rem 1.15rem}
 .spatial-home .eyebrow{font-size:.625rem;margin-bottom:.85rem}
 .hero-statement h1{font-size:clamp(1.85rem,8vw,2.55rem)}
 .hero-conversation{padding-top:1.15rem}.hero-conversation .spatial-cta{margin-top:1.2rem}
 .hero-content{padding-bottom:1.5rem}.hero-down{font-size:.625rem;min-height:56px}
 .micro,.state-button,.construction-layout figcaption{font-size:.625rem}
 .state-picker{gap:.6rem;margin-top:1.6rem}.state-button{letter-spacing:.055em}
 .system-object{max-height:355px;margin:.3rem auto .5rem}
 .human-space h2{font-size:clamp(2rem,8.5vw,2.75rem)}
 .contact-space h2{font-size:clamp(2.6rem,10.8vw,4.5rem)}
}
@media(max-width:359px){.hero-topline{gap:.4rem}.intro-controls{width:9.4rem}.intro-controls button,.intro-controls a{font-size:.5625rem}.mobile-drawing{max-height:190px}.hero-conversation>p{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){.spatial-home .construction-scaffold{opacity:.16}.spatial-home .word-section{opacity:0}.spatial-home .flow-packet{opacity:0}.spatial-home .care-guides{opacity:0}}
html[data-motion=reduced] .spatial-home .construction-scaffold{opacity:.16}
html[data-motion=reduced] .spatial-home .word-section,html[data-motion=reduced] .spatial-home .flow-packet,html[data-motion=reduced] .spatial-home .care-guides{opacity:0}
/* Explicit review only: pause the real CSS timeline, no alternative illustration. */
html[data-review-time] .hero-architecture,html[data-review-time] .hero-architecture *{animation-play-state:paused!important}
/* Reduced motion must not reveal the off-screen skip link until keyboard focus. */
.spatial-home .skip-link{clip-path:inset(50%)}.spatial-home .skip-link:focus{clip-path:none}
@media(max-width:650px){
 .sp-module{transition-duration:.55s}
 #system-stage[data-state=flow].state-changing .flow-packet{animation-duration:.8s}
 #system-stage[data-state=care].state-changing .module-c,#system-stage[data-state=care].state-changing .care-guides{animation-duration:.7s}
 #system-stage[data-state=care].state-changing .care-mark{animation-delay:.4s;animation-duration:.3s}
 .system-object .object-ground{opacity:.65}
}
/* Gutters remain physical space when text is enlarged; useful width goes to words. */
@media(max-width:650px){:root{--sp-space:20px}.hero-architecture{margin-inline:-20px}.needs-space,.construction-space{padding-left:36px}.space-axis{left:16px}.spatial-needs a{grid-template-columns:18px minmax(0,1fr) 18px;gap:12px}}