.visual-motion .hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.visual-motion .hero::before{
  content:"";
  position:absolute;
  width:min(560px,72vw);
  aspect-ratio:1;
  right:-12%;
  bottom:-58%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,59,.24),rgba(0,58,107,.1) 48%,transparent 70%);
  filter:blur(10px);
  animation:visual-hero-glow 9s ease-in-out infinite alternate;
  pointer-events:none;
}
.visual-motion .hero>.wrap{position:relative;z-index:1}
.visual-motion .hero .breadcrumb,
.visual-motion .hero-copy>.ey,
.visual-motion .hero-copy>h1,
.visual-motion .hero-copy>p,
.visual-motion .hero-copy>.case-byline,
.visual-motion .hero-copy>.actions,
.visual-motion .hero :is(.proof,.time-panel,.control-panel,.profile-panel){
  opacity:0;
  animation:visual-hero-in .7s cubic-bezier(.22,1,.36,1) forwards;
}
.visual-motion .hero .breadcrumb{animation-delay:.03s}
.visual-motion .hero-copy>.ey{animation-delay:.1s}
.visual-motion .hero-copy>h1{animation-delay:.17s}
.visual-motion .hero-copy>p{animation-delay:.24s}
.visual-motion .hero-copy>.case-byline{animation-delay:.31s}
.visual-motion .hero-copy>.actions{animation-delay:.38s}
.visual-motion .hero :is(.proof,.time-panel,.control-panel,.profile-panel){animation-name:visual-proof-in;animation-delay:.22s}

.visual-motion .visual-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .68s cubic-bezier(.22,1,.36,1),transform .68s cubic-bezier(.22,1,.36,1);
}
.visual-motion .visual-reveal.is-visible{opacity:1;transform:none}

.visual-motion .visual-card{
  transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease,background-color .26s ease;
}
.visual-motion .visual-card:hover,
.visual-motion .visual-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(245,158,59,.48);
  box-shadow:0 18px 42px rgba(0,10,20,.22);
}
.visual-motion .visual-card-light:hover,
.visual-motion .visual-card-light:focus-within{
  border-color:rgba(226,112,42,.44);
  box-shadow:0 16px 34px rgba(12,30,45,.12);
}
.visual-motion .flow-figure{overflow:hidden}
.visual-motion .flow-figure img{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.visual-motion .flow-figure:hover img{transform:scale(1.012)}

@keyframes visual-hero-in{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes visual-proof-in{
  from{opacity:0;transform:translateX(22px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes visual-hero-glow{
  from{transform:translate3d(-2%,2%,0) scale(.96);opacity:.72}
  to{transform:translate3d(4%,-4%,0) scale(1.08);opacity:1}
}

@media(max-width:680px){
  .visual-motion .hero::before{right:-40%;bottom:-26%;opacity:.72}
  .visual-motion .visual-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .visual-motion .hero::before,
  .visual-motion .hero .breadcrumb,
  .visual-motion .hero-copy>.ey,
  .visual-motion .hero-copy>h1,
  .visual-motion .hero-copy>p,
  .visual-motion .hero-copy>.case-byline,
  .visual-motion .hero-copy>.actions,
  .visual-motion .hero :is(.proof,.time-panel,.control-panel,.profile-panel){animation:none!important;opacity:1!important;transform:none!important}
  .visual-motion .visual-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .visual-motion .visual-card,
  .visual-motion .flow-figure img{transition:none!important;transform:none!important}
}