:root{--ease-out:cubic-bezier(0,1.02,.56,1);--spring-out:cubic-bezier(.16,1,.3,1)}
html{scroll-behavior:auto}
.page-enter{animation:none;transform:none}
.hero{position:sticky;top:0;z-index:1;overflow:hidden;isolation:isolate;background:var(--paper)}
.hero h1{position:relative;z-index:2;pointer-events:none;animation:heading-in 1.5s var(--spring-out) .05s both}
.hero-trail{position:absolute;inset:0;pointer-events:none;z-index:1;contain:layout style paint}
.trail-image{position:absolute;left:0;top:0;width:300px;height:300px;max-width:none;object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.5);pointer-events:none;user-select:none;will-change:transform,opacity,filter}
.hero~.shell,.hero~.client-marquee{position:relative;z-index:2;background:var(--paper)}
/* Paint the inter-section spacing above the sticky hero, including pointer hit-testing. */
.hero~.client-marquee{margin-bottom:0}
.hero~.client-marquee+.shell{padding-top:120px}
.footer{position:relative;z-index:2}
.page-heading h1{animation:heading-in 1.5s var(--spring-out) .05s both}
@keyframes heading-in{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.js .reveal{opacity:.001;transform:translateY(var(--reveal-distance,150px));transition:opacity 1.5s var(--ease-out),transform 1.5s var(--ease-out)}
.js .reveal.visible{opacity:1;transform:none}
.work,.article-card{--reveal-distance:30px}
.work-image{position:relative;transition:border-radius .8s var(--spring-out)}
.work-image img{transform:scale(1);transition:transform 2s var(--spring-out);user-select:none;-webkit-user-drag:none}
.js .work.reveal:not(.visible) img{transform:scale(1.3)}
.work:hover img{transform:scale(1)}
.work-caption{transition:transform .8s var(--spring-out)}
.work-arrow{transition:background .5s,color .5s,transform .8s var(--spring-out)}
.article-card figure{transition:border-radius .8s var(--spring-out)}
.article-card img{transition:transform 1.6s var(--spring-out)}
.article-card :is(h2,h3){transition:transform .7s var(--spring-out)}
.js .article-card.reveal:not(.visible) img{transform:scale(1.15)}
.visual-intro img{transition:transform 2s var(--spring-out)}
.js .visual-intro.reveal:not(.visible) img{transform:scale(1.15)}
.visual-button{transition:width .7s var(--spring-out),height .7s var(--spring-out),transform .7s var(--spring-out),background .5s}
.text-link{position:relative;overflow:hidden;transition:gap .7s var(--spring-out)}
.text-link .arrow{transition:transform .7s var(--spring-out)}
.service-list summary{transition:padding .7s var(--spring-out),color .4s}
.service-list summary:after{transition:transform .7s var(--spring-out)}
.nav a{overflow:hidden}
.nav a:after{transform:translateX(-105%);transition:transform .8s var(--spring-out)}
.nav a:hover:after,.nav a[aria-current=page]:after{transform:translateX(0)}
.footer-nav a{transition:transform .8s var(--spring-out),color .4s}
.footer-contact .brand-footer{height:auto}
.motion-word{display:inline-block}
.js .closing:not(.visible) .motion-word{opacity:0;transform:translateY(10px)}
.js .closing.visible .motion-word{animation:heading-in 1.5s var(--spring-out) both;animation-delay:calc(var(--word-index)*50ms)}
.send-button{transition:background .5s}
.send-button span{transition:transform .6s var(--spring-out)}
.send-button:hover span{transform:translate(4px,-4px)}
@media(hover:hover) and (pointer:fine){
 .work:hover .work-image,.work:focus-visible .work-image{border-radius:45px}
 .work:hover .work-caption{transform:translate(5px,-5px)}
 .work:hover .work-arrow{transform:rotate(45deg)}
 .article-card:hover figure{border-radius:30px}
 .article-card:hover :is(h2,h3){transform:translateY(-10px)}
 .article-card:hover img{transform:scale(1.04)}
 .visual-button:hover{transform:rotate(-45deg) scale(1.12)}
 .text-link:hover{gap:42px}
 .text-link:hover .arrow{transform:translate(4px,-4px)}
 .footer-nav a:hover{transform:translateX(8px)}
 .service-list summary:hover{padding-inline:8px;color:#555}
}
@media(max-width:809px),(hover:none),(pointer:coarse){.hero-trail{display:none}}
@media(max-width:650px){
 .hero~.client-marquee+.shell{padding-top:70px}
 .nav{display:flex;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(-12px);pointer-events:none;transition:clip-path .8s var(--spring-out),transform .8s var(--spring-out),opacity .4s,visibility 0s .8s}
 .nav.open{visibility:visible;opacity:1;clip-path:inset(0);transform:none;pointer-events:auto;transition-delay:0s}
 .nav a{opacity:0;transform:translateY(25px);transition:opacity .35s,transform .7s var(--spring-out);transition-delay:0s}
 .nav.open a{opacity:1;transform:none;transition-delay:calc(.09s + var(--menu-index)*.045s)}
 .js .reveal{--reveal-distance:65px}
 .js .work,.js .article-card{--reveal-distance:30px}
}
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:1s}
::view-transition-old(root){animation:page-stay 1s linear both;mix-blend-mode:normal}
::view-transition-new(root){animation:page-slide-in 1s cubic-bezier(0,.81,.51,1) both;mix-blend-mode:normal}
@keyframes page-stay{from{opacity:1}to{opacity:1}}
@keyframes page-slide-in{from{opacity:1;transform:translateX(300px)}to{opacity:1;transform:translateX(0)}}
@supports not (view-transition-name:root){.page-enter{animation:page-slide-in 1s cubic-bezier(0,.81,.51,1)}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{animation:none!important;transition:none!important}
 .hero{position:relative}.hero-trail{display:none}
 .js .reveal,.js .closing .motion-word{opacity:1;transform:none}
 .js .work.reveal img,.js .article-card.reveal img,.js .visual-intro.reveal img{transform:none}
 ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important}
}