/* Progressive enhancement: content remains available without animations. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .22s ease both}
::view-transition-new(root){animation:page-in .42s cubic-bezier(.22,1,.36,1) both}
@keyframes page-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes page-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes image-rise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
@keyframes rec-pulse{0%,100%{box-shadow:0 0 0 0 #df172550}65%{box-shadow:0 0 0 7px #df172500}}
@keyframes menu-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes read-progress{to{transform:scaleX(1)}}
.hero-brand{animation:none}
.hero-brand>span:first-child{animation:image-rise 1.05s cubic-bezier(.22,1,.36,1) both}
.hero-brand>.hero-studio{animation:image-rise .9s .2s cubic-bezier(.22,1,.36,1) both}
.hero-top{animation:page-in .7s .1s both}
.hero-bottom{animation:image-rise .9s .3s cubic-bezier(.22,1,.36,1) both}
.rec-dot{animation:rec-pulse 3s 1s ease-in-out 3}
.page-heading .page-title{animation:image-rise .85s cubic-bezier(.22,1,.36,1) both}
.reveal{transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.reveal.is-pending{transform:translateY(45px)}
.photo-pair>.reveal:nth-child(2),.steps>.reveal:nth-child(2){transition-delay:.1s}
.steps>.reveal:nth-child(3){transition-delay:.2s}
figure.reveal{overflow:hidden}
figure.reveal img{transition:transform 1.25s cubic-bezier(.22,1,.36,1)}
figure.reveal.is-pending img{transform:scale(1.07)}
figure.reveal.is-visible img{transform:scale(1)}
.text-link span,.service-arrow{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.service-link{position:relative;isolation:isolate;overflow:hidden}
.service-link:before{content:'';position:absolute;inset:0;background:#df172509;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:-1}
.service-link:focus-visible:before{transform:scaleX(1)}
.mobile-menu:not([hidden])>a{animation:menu-in .4s cubic-bezier(.22,1,.36,1) both}
.mobile-menu:not([hidden])>a:nth-child(2){animation-delay:.07s}
.mobile-menu:not([hidden])>a:nth-child(3){animation-delay:.14s}
input,textarea,select{transition:border-color .25s,background-color .25s}
input:focus,textarea:focus,select:focus{border-color:var(--red);background-color:#ffffff30}
@media(hover:hover) and (pointer:fine){
 .service-link:hover:before{transform:scaleX(1)}
 .service-link:hover .service-arrow{transform:translate(5px,-5px)}
 .service-link:hover .service-number{transform:translateX(4px)}
 .service-number{transition:transform .35s}
 .service-photo{transition:transform .6s cubic-bezier(.22,1,.36,1)}
 .service-detail:hover .service-photo{transform:translateY(-5px)}
 figure.reveal.is-visible:hover img{transform:scale(1.025)}
 .button:hover{transform:translateY(-2px)}
 .logo{transition:opacity .25s}.logo:hover{opacity:.7}
}
@supports(animation-timeline:scroll()){
 body:after{content:'';position:fixed;top:0;left:0;width:100%;height:3px;background:var(--red);z-index:70;pointer-events:none;transform:scaleX(0);transform-origin:left;animation:read-progress linear both;animation-timeline:scroll(root)}
}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none!important}
 *,*:before,*:after{animation:none!important;transition:none!important}
 .reveal.is-pending{opacity:1;transform:none}
 figure.reveal.is-pending img{transform:none}
 body:after{display:none}
}