
/* Mobile artwork viewport corrections: prevent desktop SVG canvases being cropped. */
@media(max-width:991.98px){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  #hyeperks-ecosystem-diagram.hyeperks-rebuilt,
  #hyeperks-ecosystem-diagram .hyeperks-scroller{
    width:100%!important;max-width:100%!important;overflow-x:hidden!important;
  }
  #hyeperks-ecosystem-diagram .hyeperks-stage{
    width:100%!important;max-width:100%!important;min-width:0!important;
    min-height:0!important;height:auto!important;margin:0 auto!important;
    transform:none!important;overflow:visible!important;
  }
  #hyeperks-ecosystem-diagram object.hyeperks-svg{
    display:block!important;width:100%!important;max-width:100%!important;
    height:auto!important;min-height:0!important;aspect-ratio:13/7!important;
    transform:none!important;object-fit:contain!important;
  }
  #road-ahead .container{overflow:visible!important;max-width:100%!important}
  #road-ahead .road-ahead-visual{
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow:visible!important;margin:28px auto 35px!important;
  }
  #road-ahead .road-ahead-visual object{
    display:block!important;width:100%!important;max-width:100%!important;
    min-width:0!important;height:auto!important;min-height:0!important;
    aspect-ratio:1182.5/726.5!important;transform:none!important;
  }
  .hero.hero-faithful{min-height:0!important;overflow:hidden!important}
  .hero.hero-faithful .hero-live-art{
    position:relative!important;top:auto!important;left:auto!important;
    transform:none!important;width:100%!important;max-width:100%!important;
    height:auto!important;min-height:0!important;aspect-ratio:5/3!important;
    opacity:1!important;object-fit:contain!important;
  }
  .hero.hero-faithful>.container{
    min-height:0!important;max-width:100%!important;padding:18px 20px 32px!important;
  }
  .hero.hero-faithful h1{
    font-size:clamp(36px,8.5vw,68px)!important;
    line-height:1.07!important;max-width:100%!important;
    overflow-wrap:normal!important;
  }
  .hero.hero-faithful p{margin-top:20px!important;font-size:clamp(14px,3.6vw,17px)!important}
}
@media(max-width:600px){
  #road-ahead.road-ahead-original{padding:40px 0 48px!important}
  #road-ahead .road-ahead-intro h2{font-size:clamp(30px,8vw,44px)!important}
  #road-ahead .road-ahead-quote{font-size:clamp(14px,3.7vw,17px)!important;line-height:1.5!important}
  #road-ahead .road-ahead-visual{margin-top:22px!important}
  .hero.hero-faithful>.container{padding:15px 18px 28px!important}
}
