/* The photograph stays visible; its frame contains the one-off settling motion. */
.hero-photo-frame{position:absolute;inset:0 0 0 auto;width:48%;height:100%;overflow:hidden;z-index:-1}
.hero .hero-photo-frame>.hero-photo{position:static;display:block;width:100%;height:100%;z-index:auto;transform-origin:50% 54%}

.service-row-arrow svg,.additional-services>a>svg:last-child,.related-links>a>svg:last-child{transition:transform 220ms ease}
.button{transition:background-color 200ms ease,transform 200ms ease}
.service-v4-card,.additional-services>a{transition:background-color 180ms ease}
.button:active{transform:translateY(0) scale(.98)}
.service-v4-card:active,.additional-services>a:active{background-color:#e8ecdf}

@media(hover:hover) and (pointer:fine){
 .service-v4-card:hover .service-row-arrow svg,.additional-services>a:hover>svg:last-child,.related-links>a:hover>svg:last-child{transform:translate(3px,-3px)}
}
@media(hover:none){
 .service-v4-card:hover img,.inspiration-card:hover img{transform:none}
}
@media(max-width:760px){
 .hero .hero-photo-frame{grid-area:photo;position:relative;inset:auto;width:100%;height:clamp(300px,82vw,340px);z-index:auto}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .button:hover,.button:active{transform:none}
 .service-v4-card:hover img,.inspiration-card:hover img,.text-link:hover svg{transform:none}
 .service-v4-card:hover .service-row-arrow svg,.additional-services>a:hover>svg:last-child,.related-links>a:hover>svg:last-child{transform:none}
}