.hero-line{display:block}

@media(prefers-reduced-motion:no-preference){
  @keyframes rise-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  @keyframes settle-photo{from{transform:scale(1.055)}to{transform:scale(1)}}
  @keyframes turn-accent{from{transform:rotate(-90deg)}to{transform:rotate(0)}}

  /* The headline is readable on first paint (it starts at 45% and settles, rather than fading in from
     nothing); the second line follows the first by a beat, not a pause. */
  @keyframes settle-text{from{opacity:.45;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .hero-line{animation:settle-text .45s cubic-bezier(.22,1,.36,1) both}
  .hero-line:nth-child(2){animation-delay:.06s}
  .hero-intro{animation:rise-in .65s .2s cubic-bezier(.22,1,.36,1) both}
  .hero-image img{animation:settle-photo 3.8s cubic-bezier(.2,.65,.3,1) both}
  .image-label{animation:rise-in .65s .3s cubic-bezier(.22,1,.36,1) both}
  .tiny-cross{display:inline-block;animation:turn-accent .8s .15s cubic-bezier(.22,1,.36,1) both}

  .motion-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
  .motion-reveal.is-visible,.motion-reveal:focus-within{opacity:1;transform:none}
  .motion-reveal:focus-within{transition-delay:0ms}
  .motion-reveal .large-plus{transform:rotate(-90deg);transition:transform .8s cubic-bezier(.22,1,.36,1)}
  .motion-reveal.is-visible .large-plus{transform:rotate(0)}

  .service-arrow,.nav-cta span,.submit-button>span:last-child,.round-arrow,.back-top span{display:inline-block;transition:transform .2s ease}
  .round-arrow{display:grid}
  .service h3{transition:transform .2s ease}
  .nav-cta,.submit-button{transition:background-color .2s ease,color .2s ease}

  @media(hover:hover){
    .service:hover .service-arrow,.nav-cta:hover span,.submit-button:hover:not(:disabled)>span:last-child{transform:translate(3px,-3px)}
    .service:hover h3{transform:translateX(3px)}
    .text-link:hover .round-arrow{transform:translateY(3px)}
    .back-top:hover span{transform:translateY(-3px)}
  }
}

@media(prefers-reduced-motion:reduce){
  .motion-reveal{opacity:1;transform:none}
}

@media print{
  .motion-reveal{opacity:1;transform:none}
  .hero-line,.hero-intro,.hero-image img,.image-label,.tiny-cross{animation:none}
}