:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:no-preference){
.motion-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--motion-ease) var(--motion-delay,0ms),transform .7s var(--motion-ease) var(--motion-delay,0ms)}
.motion-reveal.motion-visible{opacity:1;transform:none}
.motion-reveal:focus-within{opacity:1;transform:none}
.motion-hero .hero-text>.eyebrow,.motion-hero .hero-text>h1,.motion-hero .hero-text>p,.motion-hero .hero-text>.button{animation:motion-arrive .85s var(--motion-ease) both}
.motion-hero .hero-text>h1{animation-delay:70ms}.motion-hero .hero-text>p{animation-delay:140ms}.motion-hero .hero-text>.button{animation-delay:210ms}
.button{transition:transform .3s var(--motion-ease),background .25s,color .25s,box-shadow .3s}.button>span{transition:transform .3s var(--motion-ease)}
.button:active{transform:scale(.98)}
.guide-tabs button,.manual-nav a,.nav-cta{transition:color .25s,background .25s,border-color .25s,transform .3s var(--motion-ease)}
.guide-tabs button b,.manual-nav a span,.guide-next span{display:inline-block;transition:transform .3s var(--motion-ease)}
.guide-panel:not([hidden]){animation:motion-arrive .4s var(--motion-ease)}
.service-row summary b{transition:transform .3s var(--motion-ease)}
.service-row summary h3{transition:transform .35s var(--motion-ease),color .25s}
.service-photo img{transition:transform .8s var(--motion-ease)}
.perk-grid article{transition:opacity .7s var(--motion-ease),transform .7s var(--motion-ease),border-color .3s}
@media(hover:hover) and (pointer:fine){
.button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #00000012}.button:hover>span{transform:translate(3px,-3px)}
.manual-nav a:hover span,.guide-tabs button:hover b{transform:translate(3px,-2px)}
.guide-next:hover span{transform:translateX(5px)}
.service-row summary:hover h3{transform:translateX(8px);color:var(--pink)}
.perk-grid article:hover{border-color:var(--pink)}
.service-card:nth-child(2):hover img{transform:scale(1.25)}.service-card:nth-child(4):hover img{transform:scale(1.65)}
}
@keyframes motion-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){.motion-reveal{opacity:1;transform:none}*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-motion:no-preference){
.motion-reveal{transform:translateY(55px);transition-duration:.95s;will-change:opacity,transform}
.motion-from-left{transform:translate(-55px,15px)}.motion-from-right{transform:translate(55px,15px)}
.motion-rise{transform:translateY(75px) scale(.97);transform-origin:50% 100%}
.motion-reveal.motion-visible{transform:none;will-change:auto}
.motion-photo{clip-path:inset(12% 0 0 0);opacity:.4;transition:clip-path 1.15s var(--motion-ease),opacity 1s var(--motion-ease)}
.motion-photo.motion-visible{clip-path:inset(0);opacity:1}
body{overflow-x:clip}
@media(max-width:600px){.motion-from-left{transform:translate(-22px,25px)}.motion-from-right{transform:translate(22px,25px)}.motion-rise{transform:translateY(45px) scale(.98)}.motion-reveal.motion-visible{transform:none}}
}
/* Contain the animated photo beneath its gradient mask. */
.dark-photo{overflow:hidden;isolation:isolate}.dark-photo::after{z-index:1;pointer-events:none}.dark-photo>img{transform-origin:center;will-change:transform}