:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.media-placeholder{position:relative;overflow:hidden}
.motion-on .direction-card{transition:border-color .5s ease,box-shadow .7s ease,opacity .8s var(--motion-ease),transform 1.1s var(--motion-ease),clip-path 1.2s var(--motion-ease)!important}
.motion-on .direction-card:hover{border-color:var(--brand-taupe);box-shadow:0 18px 38px -30px #43464d50}
.motion-on .text-link{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .5s var(--motion-ease),color .25s ease!important}
.motion-on .text-link:hover{background-size:100% 1px}
.motion-on .button{transition:background .3s ease,transform .5s var(--motion-ease),box-shadow .5s ease!important}
.motion-on .button:hover{transform:translateY(-2px);box-shadow:0 8px 24px -14px #43464d75}
.motion-on .button:active{transform:translateY(0)}
.motion-on .hero-copy h1{animation:hero-type 1.2s var(--motion-ease) both!important}
.motion-on .hero-copy>p{animation:hero-enter 1s .15s var(--motion-ease) both!important}
.motion-on .faq-list details[open]>p{animation:answer-enter .45s var(--motion-ease) both!important}
@keyframes hero-type{
from{opacity:0;transform:translateY(25px);clip-path:inset(0 0 100% 0)}
to{opacity:1;transform:none;clip-path:inset(-3% -2% -8% -2%)}
}
@keyframes hero-enter{
from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:none}
}
@keyframes answer-enter{
from{opacity:0;transform:translateY(-5px)}
to{opacity:1;transform:none}
}