/* Preserve content sizing. Only the opted-in pages receive transition layering. */
body.st-page main{position:relative;isolation:isolate}
body.st-page main>*,body.st-page main>.pin-spacer>*{position:relative;z-index:var(--st-layer-base,1)}
body.st-page .st-surface,body.st-page .work-hero{background:var(--egg)}
/* Short pinned introductions/processes fill the frame so a transparent spacer
   cannot expose a later reveal. Long case studies retain their natural height. */
body.st-page .service-intro-surface[data-st-01="pin"],body.st-page .bs-section[data-st-01="pin"]{min-height:100svh;display:grid;align-content:center}
body.st-page section[data-st-01]:not([data-st-01="pin"]){will-change:transform}
body.st-page>footer{position:relative;z-index:2}
/* The first handoff starts below the initial viewport, preventing a load-time
   parallax offset. Content remains taller whenever its natural layout needs it. */
body.st-page main>section[data-st-01="parallax"]{min-height:calc(100svh - 142px);display:grid;align-content:center}
body.st-page .service-hero-surface>.service-hero{width:calc(100% - 112px)}
body.st-page .bs-section-nav{background:#fff}
/* The form itself does not move, fade, pin or become a transformed ancestor. */
body.st-page.contact-page .inquiry-form{transform:none!important;translate:none!important;rotate:none!important;opacity:1!important}
html.motion-paused body.st-page section[data-st-01]{will-change:auto}
@media(max-width:1100px){body.st-page .service-hero-surface>.service-hero{width:calc(100% - 72px)}}
@media(max-width:850px){body.st-page main>section[data-st-01="parallax"]{min-height:calc(100svh - 126px)}}
@media(max-width:600px){body.st-page main>section[data-st-01="parallax"]{min-height:calc(100svh - 115px)}body.st-page .service-hero-surface>.service-hero{width:calc(100% - 40px)}}
@media(prefers-reduced-motion:reduce){body.st-page section[data-st-01]{will-change:auto}}