/* Bridge For Change motion: "Story scroll" (chosen 25 Oct 2026). Builds on Motion System V1. */
.m-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.22em;margin-bottom:-.22em}
.m-word-in{display:inline-block}
/* The split heading animates word by word, so switch off the old whole-heading entrance. */
.motion-ready h1[data-split]{opacity:1!important;animation:none!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.m-word-in,.m-word{animation:none!important;transition:none!important;transform:none!important;opacity:1!important;filter:none!important}}

/* OPTION B: Story scroll. Cinematic, photo-led, guides the eye down the page. */
:root{--b-ease:cubic-bezier(.77,0,.18,1);--b-out:cubic-bezier(.16,1,.3,1)}
/* Orange reading-progress bar along the top */
.m-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9998;background:#ED7B3B;transform-origin:0 50%;transform:scaleX(0)}
/* Hero: words slide up out of a mask; the photo dims as you scroll past */
.m-word-in{transform:translateY(110%);animation:bWord .95s var(--b-out) forwards;animation-delay:calc(.1s + var(--w)*55ms)}
@keyframes bWord{to{transform:none}}
.m-hero-dim{position:absolute;inset:0;z-index:0;pointer-events:none;background:#06243a;opacity:0}
.hero>.wrap,.page-hero>.wrap,.programs-hero>.wrap,.detail-hero>.wrap,.project-detail-hero>.wrap,.projects-page-hero>.wrap,.institutional-hero>.wrap,.content-page-hero>.wrap{position:relative;z-index:3}
/* Photos: a blue curtain wipes away to reveal the picture */
.m-curtain{position:relative;overflow:hidden;clip-path:none!important;opacity:1!important}
.m-curtain::after{content:"";position:absolute;inset:0;z-index:3;background:#0B5CC0;transform-origin:100% 50%;transform:scaleX(1);transition:transform 1.1s var(--b-ease)}
.m-curtain img{transform:scale(1.18);transition:transform 1.6s var(--b-out)}
.m-curtain.m-in::after{transform:scaleX(0)}
.m-curtain.m-in img{transform:scale(1)}
/* Small section labels: an orange line draws in before the text */
.eyebrow{position:relative}
.eyebrow.m-line::before{content:"";display:inline-block;vertical-align:middle;height:2px;width:0;margin-right:0;background:#ED7B3B;transition:width .8s var(--b-out),margin .8s var(--b-out)}
.eyebrow.m-line.m-in::before{width:28px;margin-right:10px}
/* Section text slides up a little further and faster */
.motion-reveal,.motion-reveal.from-left,.motion-reveal.from-right{transform:translateY(40px);transition:opacity .8s var(--b-out),transform 1s var(--b-out)!important}
.motion-reveal.is-visible{transform:none}
/* Cards settle in on a slight diagonal, one after another */
.motion-stagger>*{transform:translate(-10px,46px) rotate(1.2deg);transition:opacity .8s var(--b-out),transform 1.05s var(--b-out)!important;transition-delay:calc(var(--stagger-index,0)*90ms)!important}
.motion-stagger.is-visible>*{transform:none}
main article{transition:transform .45s var(--b-out),box-shadow .45s var(--b-out)!important}
main article:hover{transform:translateY(-8px)!important;box-shadow:0 26px 60px rgba(8,36,52,.18)!important}
/* Page change: the new page sweeps in from the right */
::view-transition-old(root){animation:380ms ease both bOut}
::view-transition-new(root){animation:700ms var(--b-ease) both bIn}
@keyframes bOut{to{opacity:.4;transform:translateX(-30px)}}
@keyframes bIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.m-curtain::after{display:none}.m-curtain img{transform:none!important}.m-progress{display:none}main article:hover{transform:none!important}.motion-stagger>*{transform:none!important}}