/* Eral motion: measured entrances, architectural image reveals, quiet feedback. */
:root{--motion-ease:cubic-bezier(.22,.7,.25,1)}
.header{transition:box-shadow .4s ease,background .4s ease}
.header.is-scrolled{box-shadow:0 7px 28px #10203c0b}
.header:after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:#758d91;transform:scaleX(var(--scroll-progress,0));transform-origin:left;pointer-events:none}
.hero-content{animation:none}
.hero-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero-line>span{display:block;animation:line-enter 1.15s var(--motion-ease) both;animation-delay:.22s}
.hero-line:nth-child(2)>span{animation-delay:.4s}
.hero-content>.eyebrow{animation:soft-enter .85s var(--motion-ease) .08s both}
.hero-content>p:not(.eyebrow){animation:soft-enter .95s var(--motion-ease) .65s both}
.hero-content>.button{animation:soft-enter .9s var(--motion-ease) .82s both}
.hero-image{transform:translate3d(0,var(--hero-shift,0px),0) scale(1.07);animation:architectural-enter 1.9s var(--motion-ease) both}
.hero-bottom{animation:none}
.hero-grid{animation:grid-enter 1.5s var(--motion-ease) .3s both;transform-origin:top}

.js-animated .reveal{transform:translateY(32px);transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease)}
.js-animated .reveal.visible{transform:none}
.js-animated .motion-item{opacity:0;transform:translateY(16px);transition:opacity .75s var(--motion-ease),transform .75s var(--motion-ease);transition-delay:var(--item-delay,0ms)}
.js-animated .visible .motion-item{opacity:1;transform:none}
.js-animated .eyebrow>span{transform:scale(.5);transition:transform .7s var(--motion-ease) .1s}
.js-animated .visible .eyebrow>span,.hero .eyebrow>span{transform:scale(1)}
.js-animated .project-card .project-image{clip-path:inset(0 0 12% 0);transition:clip-path 1.05s var(--motion-ease);transition-delay:inherit}
.js-animated .project-card.visible .project-image{clip-path:inset(0)}
.project-card .project-image img{transition:transform 1s var(--motion-ease),filter .7s ease}
.project-meta h3{transition:color .35s ease}
.project-card .round-arrow{transition:transform .5s var(--motion-ease),background .35s,color .35s}
.button{position:relative;overflow:hidden;transition:background .35s,box-shadow .35s,transform .35s var(--motion-ease)}
.button>span,.header-cta>span,.back-top{transition:transform .4s var(--motion-ease)}
.button:active,.dialog-pagination button:active{transform:translateY(1px)}
.text-link{position:relative;transition:border-color .3s,color .3s}
.text-link:after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--motion-ease)}
.text-link:hover:after{transform:scaleX(1);transform-origin:left}
.sector-list details{box-sizing:border-box}
.sector-list details.is-collapsing .plus{transform:rotate(0)}
.sector-list summary h3{transition:transform .4s var(--motion-ease),color .3s}
.map-project-tabs button,.map-reset,.dialog-pagination button{transition:color .25s,background .25s,transform .3s var(--motion-ease),box-shadow .3s}
.map-project-tabs button:hover{background:#ffffff22}
.map-project-tabs button.active:hover{background:white}
.pin-icon .map-pin{transition:background .3s,box-shadow .3s}
.pin-icon.selected .map-pin{box-shadow:0 0 0 6px #758d9126,0 3px 12px #10203c40}
#map-project-card{overflow:hidden}
.dialog-layout{overflow:hidden}
#dialog-image{transform-origin:center}
.dialog-close{transition:transform .3s var(--motion-ease),background .3s}
.dialog-close:hover{transform:rotate(90deg);background:#edf0ee}
dialog[open]::backdrop{animation:backdrop-enter .35s ease both}
@keyframes line-enter{from{opacity:0;transform:translateY(112%) rotate(1.5deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes soft-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes architectural-enter{from{opacity:.4;transform:translate3d(0,var(--hero-shift,0px),0) scale(1.13)}to{opacity:1;transform:translate3d(0,var(--hero-shift,0px),0) scale(1.07)}}
@keyframes grid-enter{from{opacity:0;transform:scaleY(.1)}to{opacity:1;transform:scaleY(1)}}
@keyframes scroll-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes backdrop-enter{from{background:#0b192b00;backdrop-filter:blur(0)}to{background:#0b192bba;backdrop-filter:blur(7px)}}
@media(hover:hover) and (pointer:fine){
.project-card:hover .project-image img{transform:scale(1.065)}
.project-card:hover .round-arrow{transform:translate(2px,-2px);box-shadow:0 4px 18px #10203c20}
.project-card:hover .project-meta h3{color:#657d83}
.button:hover{box-shadow:0 8px 24px #10203c12}
.button:hover>span,.header-cta:hover>span{transform:translate(3px,-3px)}
.sector-list summary:hover h3{transform:translateX(5px);color:#d3dfe0}
.back-top:hover{transform:translateY(-3px)}
.map-reset:hover{box-shadow:0 4px 18px #10203c20;transform:translateY(-2px)}
}
@media(max-width:760px){
.hero-line>span{animation-duration:.95s}
.hero-content>p:not(.eyebrow){animation-delay:.5s}
.hero-content>.button{animation-delay:.65s}

.header nav.open{animation:menu-enter .35s var(--motion-ease) both}
.header nav.open>a{animation:soft-enter .4s var(--motion-ease) both}
.header nav.open>a:nth-child(2){animation-delay:.045s}
.header nav.open>a:nth-child(3){animation-delay:.09s}
.header nav.open>a:nth-child(4){animation-delay:.135s}
.js-animated .reveal{transform:translateY(22px)}
.js-animated .reveal.visible{transform:none}
}
@keyframes menu-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.hero-image{transform:none!important}
.hero-line>span,.hero-content>.eyebrow,.hero-content>p,.hero-content>.button,.hero-bottom{opacity:1;transform:none}
.js-animated .reveal,.js-animated .motion-item{opacity:1;transform:none}
.js-animated .project-card .project-image{clip-path:none}
}
/* Let the primary action respond to hover after its entrance has finished. */
.hero-content>.button{animation-fill-mode:backwards}