/* Motion compositions share the retained type scale; colours are owned by main-identity.css. */
.connected-grain{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);mask-image:radial-gradient(ellipse 47% 44% at 50% 44%,#000 37%,transparent 95%);-webkit-mask-image:radial-gradient(ellipse 47% 44% at 50% 44%,#000 37%,transparent 95%)}
/* The converging school view crosses the support line; the reading shade follows copy opacity. */
.connected-stage .connected-purpose p{position:relative;isolation:isolate;color:var(--ink)}
.connected-purpose p::before{content:"";position:absolute;inset:-10px -16px;z-index:-1;background:var(--main-charcoal);opacity:.92;filter:blur(14px);pointer-events:none}
.connected-copy h1{font-weight:550}.connected-evidence{font-size:12px}.connected-scope{font-size:13px}
.motion-chapter{position:relative;display:block;overflow:hidden;padding:110px var(--pad) 60px;isolation:isolate}
.motion-heading{display:grid;grid-template-columns:1.25fr .65fr;align-items:end;gap:7vw;position:relative;z-index:2}
.motion-heading h2{font-size:clamp(48px,5.4vw,90px);line-height:1.02;max-width:980px;letter-spacing:-.045em}.motion-heading>p{font-size:18px;line-height:1.6;max-width:380px;color:var(--muted)}
.motion-composition{display:grid;grid-template-columns:1.55fr .7fr;gap:5vw;align-items:center;margin-top:35px;min-height:520px}

.chapter-work{position:relative;z-index:2}.chapter-work h3{font-size:clamp(30px,2.8vw,45px);line-height:1.08;max-width:470px}.chapter-work>p{font-size:17px;line-height:1.55;margin-top:20px;max-width:380px;color:var(--muted)}.chapter-work>.text-link{display:inline-block;margin-top:28px}
.chapter-steps{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:40px;border-top:1px solid var(--rule);padding-top:16px}.chapter-steps button{font-size:14px;padding:10px 0;border-bottom:2px solid transparent;color:var(--muted);text-align:left}.chapter-steps button[aria-pressed=true]{border-color:var(--copper);color:var(--ink)}
.chapter-control{display:flex;gap:20px;justify-content:space-between;align-items:center;border-top:1px solid var(--rule);padding-top:18px;color:var(--muted)}.chapter-control small{font-size:12px}.chapter-control button{font-size:13px;padding:7px 0;border-bottom:1px solid currentColor}.motion-tail-link{display:inline-block;margin-top:30px}
.engineering-footnote p{font-size:14px;max-width:700px;color:var(--muted)}.engineering-footnote a{font-size:14px;white-space:nowrap}
.evidence-stage{max-width:1300px;margin:30px auto 0;position:relative;display:grid;grid-template-columns:1.15fr .75fr;align-items:center;gap:4vw}.evidence-context{display:flex;justify-content:space-between;gap:5vw;padding-top:30px;align-items:center}.evidence-context p{font-size:14px;max-width:740px;color:var(--muted)}.evidence-context button{white-space:nowrap}
@media(max-width:900px){.motion-chapter{padding-top:75px}.motion-heading{grid-template-columns:1fr;gap:25px}.motion-heading h2{font-size:clamp(43px,7vw,68px)}.motion-heading>p{max-width:580px}.motion-composition{grid-template-columns:1.3fr 1fr;gap:24px}.chapter-work h3{font-size:34px}.evidence-context{align-items:start;flex-direction:column;gap:20px}}
@media(max-width:650px){.connected-grain{mask-image:radial-gradient(ellipse 71% 44% at 50% 43%,#000 42%,transparent 94%);-webkit-mask-image:radial-gradient(ellipse 71% 44% at 50% 43%,#000 42%,transparent 94%)}.motion-chapter{padding:65px 22px 38px}.motion-heading h2{font-size:44px}.motion-heading>p{font-size:16px;line-height:1.55}.motion-composition,.evidence-stage{display:flex;flex-direction:column;gap:6px;margin-top:15px;min-height:0}.chapter-work{order:1;width:100%;padding:14px 0 25px;border:0}.chapter-work h3{font-size:32px;max-width:450px}.chapter-work>p{font-size:16px;margin-top:14px}.chapter-work>.text-link{margin-top:18px}.chapter-steps{display:flex;flex-direction:row;margin:25px 0 0;gap:18px;padding-top:12px;border-top:1px solid var(--rule);flex-wrap:wrap}.chapter-steps button{font-size:14px;padding:8px 0}.chapter-control{gap:15px;align-items:start}.chapter-control small{font-size:12px;max-width:170px;line-height:1.5}.chapter-control button{font-size:12px;white-space:nowrap}.evidence-context p{font-size:13px}.engineering-footnote p{font-size:13px}.motion-tail-link{font-size:14px}.connected-evidence{font-size:12px}}


.connected-motion{font:400 12px/1.4 var(--sans);color:inherit;border-bottom:1px solid currentColor;padding:8px 0;align-self:end}.immersive-reduced .connected-motion{display:none}.sector-entry [data-icon] svg{width:90px;height:90px;margin-bottom:25px}.sector-entry [data-icon]{display:block}.sector-entry:hover [data-icon] svg{transform:translateY(-5px);transition:transform .4s ease}.sector-entry [data-icon] svg{transition:transform .4s ease}
@media(prefers-reduced-motion:reduce){.connected-motion{display:none}.sector-entry [data-icon] svg{transform:none!important;transition:none!important}}

.platform-flow{display:contents}
@media(max-width:760px){.platform-flow{position:absolute;z-index:3;inset:auto 22px 28px;display:flex;flex-direction:column;gap:16px}.platform-flow .platform-layers,.platform-flow .platform-detail{position:relative;inset:auto;width:100%;margin:0}.platform-flow .platform-detail{padding-right:45px}.platform-flow .platform-detail .icon-button{right:0;top:0}}

@media(min-width:761px) and (max-height:540px){
 .connected-copy{top:104px;left:8%;right:8%}
 .connected-copy h1{font-size:clamp(34px,11svh,54px);line-height:1}
 .connected-copy>p{font-size:15px;line-height:1.4;max-width:670px;margin:16px auto 0}
 .connected-actions{margin-top:16px}.connected-actions .button{min-height:40px;padding:9px 16px;font-size:14px}
 .connected-bottom{bottom:34px}.connected-scope{font-size:12px}.connected-motion{font-size:12px;padding:6px 0}
}
/* The model-room stage (LM1): a pinned track whose sticky frame holds the lamp-lit model behind the copy.
   The track's height is the scroll the reader spends; overflow is clipped, not hidden, because a hidden
   overflow is a scroll container and a sticky frame inside one never sticks. */
.model-stage-section{position:relative;padding:0;overflow:clip}
.stage-track{position:relative;height:300svh}
.stage-sticky{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:#1d1c1a}
.stage-canvas{position:absolute;inset:0}
.stage-canvas canvas{display:block;width:100%;height:100%}
.stage-canvas img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
:root[dir="rtl"] .stage-canvas img{object-position:30% 50%}
.stage-copy{position:absolute;z-index:2;inset-inline-start:var(--pad);bottom:clamp(28px,7svh,72px);width:min(420px,31vw);color:var(--ink);--muted:#c9ced3}
/* The copy sits over a lamp-lit table, not over the page's flat ground: the muted grey is a step lighter here so
   body text keeps 4.5:1 against the brightest table the authored cameras put behind it (measured, LM1). */
.stage-copy .motion-heading{display:block}
.stage-copy .motion-heading h2{font-size:clamp(34px,3.25vw,54px);line-height:1.04;letter-spacing:-.035em;max-width:none}
.stage-copy .motion-heading>p{font-size:17px;line-height:1.5;margin-top:16px;max-width:380px}
.stage-copy .chapter-steps{margin-top:28px}
.stage-captions{list-style:none;margin:16px 0 0;padding:0}
.stage-captions>li+li{margin-top:22px}
.stage-captions h3{font-size:clamp(22px,1.75vw,27px);line-height:1.15;letter-spacing:-.02em}
.stage-captions p{font-size:16px;line-height:1.5;margin-top:8px;color:var(--muted);max-width:380px}
.stage-captions .text-link{display:inline-block;margin-top:12px}
[data-stage-mounted] .stage-captions{display:grid}
/* A caption hands over in sequence, out then in, so two captions never overlap mid-change. */
[data-stage-mounted] .stage-captions>li{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .14s linear,visibility 0s linear .14s}
[data-stage-mounted] .stage-captions>li[data-current]{opacity:1;visibility:visible;transition:opacity .24s cubic-bezier(.4,0,.2,1) .14s,visibility 0s linear .14s}
.model-stage-section .motion-tail-link{display:inline-block;margin:44px var(--pad) 72px}
@media(max-width:760px){
 .stage-track{height:280svh}
 .stage-sticky{min-height:600px}
 .stage-canvas{inset:0 0 auto;height:52%}
 .stage-copy{inset:52% 22px auto;bottom:auto;width:auto;padding-top:18px}
 .stage-copy .motion-heading h2{font-size:28px}
 .stage-copy .motion-heading>p{font-size:15px;line-height:1.45;margin-top:10px}
 .stage-copy .chapter-steps{margin-top:14px;padding-top:8px;gap:4px 20px}
 .stage-captions{margin-top:8px}
 .stage-captions h3{font-size:20px}
 .stage-captions p{font-size:15px;line-height:1.45;margin-top:6px}
 .stage-captions .text-link{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){[data-stage-mounted] .stage-captions>li{transition:none}}
/* A static plate when the stage cannot run: the authored still, then the heading and every caption in flow. Keyed to
   the two states that need it, no script (`scripting: none`) and a module that failed to load (`data-stage-error`, set
   by the loader), and never to "not mounted yet": that keyed the plate to every reader for as long as the page's
   scripts were still loading, and the section changed shape under them when the loader ran. */
@media(scripting:none){
.model-stage-section .stage-track{height:auto}
.model-stage-section .stage-sticky{position:relative;height:auto;min-height:0;overflow:visible}
.model-stage-section .stage-canvas{position:relative;inset:auto;height:auto;aspect-ratio:1470/725}
.model-stage-section .stage-copy{position:relative;inset:auto;width:auto;max-width:760px;padding:36px var(--pad) 0}
.model-stage-section .chapter-steps{display:none}
}
.model-stage-section[data-stage-error] .stage-track{height:auto}
.model-stage-section[data-stage-error] .stage-sticky{position:relative;height:auto;min-height:0;overflow:visible}
.model-stage-section[data-stage-error] .stage-canvas{position:relative;inset:auto;height:auto;aspect-ratio:1470/725}
.model-stage-section[data-stage-error] .stage-copy{position:relative;inset:auto;width:auto;max-width:760px;padding:36px var(--pad) 0}
.model-stage-section[data-stage-error] .chapter-steps{display:none}
/* The engineering stage (LM2) is the same pinned frame. Its footnote, the measured conditions' link, follows the pin
   in normal flow, as the section above's tail link does, so it reads in every edition: moving, still and plate. */
.model-stage-section .engineering-footnote{display:flex;gap:5vw;justify-content:space-between;align-items:center;margin:44px var(--pad) 72px}
@media(max-width:900px){.model-stage-section .engineering-footnote{align-items:start;flex-direction:column;gap:20px}}
/* "See what runs today. See what comes next." (LM3): the same table and lamp as the stage above, now as the record. The
   context note that qualifies every scene on the page follows the pinned track, in flow, where it always was. */
.evidence-stage-section .evidence-context{padding:44px var(--pad) 72px}
/* "Build the next stage with us." (LM4): the page's last section on the same stage. The pin is modest because this is the
   end of the page, 150svh of scroll while the stage holds (the section above holds for 200svh); after it the four calls and
   the footer sit in normal flow, inside the section's own padding as before
   (the title, which used to open that padding, is now the stage's). The section's diagonal copper line goes: it would
   cross the lamp-lit model, it is a glow the direction refuses (§8), and this section uses no orange. On a phone the
   copy is the title alone, so the canvas takes more of the frame than the section above gives it. */
#build.model-stage-section::before{content:none}
#build .stage-track{height:250svh}
#build .build-tail{padding:0 var(--pad) 55px}
@media(max-width:760px){
 #build .stage-canvas{height:76%}
 #build .stage-copy{inset:76% 22px auto}
 #build .build-tail{padding-bottom:45px}
}
/* The static plate, as the section above has it: these undo the rules just above, which outrank the plate's own. */
@media(scripting:none){#build .stage-track{height:auto}#build .stage-canvas{height:auto}#build .stage-copy{inset:auto}}
#build[data-stage-error] .stage-track{height:auto}
#build[data-stage-error] .stage-canvas{height:auto}
#build[data-stage-error] .stage-copy{inset:auto}