/* Youth's Online — premium motion v1.1: accessible and layout-preserving. */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-copy .eyebrow,.hero .hero-copy .trust-tags,
  .hero .hero-copy h1,.hero .hero-copy .lead,
  .hero .hero-copy .hero-actions,.hero .hero-copy .hero-note,
  .hero .hero-copy .hero-stats { animation: yo-arrive .66s cubic-bezier(.19,.75,.25,1) both; }
  .hero .hero-copy .eyebrow {animation-delay:.03s}
  .hero .hero-copy .trust-tags {animation-delay:.08s}
  .hero .hero-copy h1 {animation-delay:.13s}
  .hero .hero-copy .lead {animation-delay:.21s}
  .hero .hero-copy .hero-actions {animation-delay:.29s}
  .hero .hero-copy .hero-note {animation-delay:.36s}
  .hero .hero-copy .hero-stats {animation-delay:.42s}
  .hero .hero-visual {animation:yo-arrive-visual .78s cubic-bezier(.2,.75,.25,1) .15s both}
  @keyframes yo-arrive {from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:none}}
  @keyframes yo-arrive-visual {from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
  /* Javascript marks only eligible blocks. CSS remains completely visible without JS. */
  .yo-motion-ready .yo-motion-reveal:not(.yo-motion-shown) { opacity:0; transform:translateY(17px); }
  .yo-motion-ready .yo-motion-reveal { transition:opacity .53s ease,transform .57s cubic-bezier(.2,.73,.23,1); transition-delay:var(--yo-motion-delay,0ms); }
  .yo-motion-ready .yo-motion-reveal.yo-motion-shown {opacity:1;transform:none}
  .service-card,.yo-blog-card,.step,.contact-box {transition:transform .23s ease,box-shadow .23s ease,border-color .23s ease}
  @media (hover:hover) and (pointer:fine) {
    .service-card:hover,.yo-blog-card:hover {transform:translateY(-4px);box-shadow:0 13px 30px rgba(8,51,112,.12)}
    .step:hover,.contact-box:hover {transform:translateY(-2px)}
  }
}
/* Accessibility and small-screen refinements, with no changes to default geometry. */
.service-card:focus-within,.yo-blog-card:focus-within {outline:2px solid #2467cf;outline-offset:3px}
.service-card h3,.yo-blog-card h3 {overflow-wrap:anywhere}
@media (max-width:767px) {
  .hero .hero-visual {animation-duration:.44s}
  .yo-motion-ready .yo-motion-reveal {transition-duration:.36s;transition-delay:0ms}
  .hero .hero-copy h1 {overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce) {
 .yo-motion-reveal,.yo-motion-ready .yo-motion-reveal {opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
 .hero .hero-copy *,.hero .hero-visual {animation:none!important;transition:none!important}
 .service-card,.yo-blog-card,.step,.contact-box {transition:none!important;transform:none!important}
}