/* Mobile-only cache-busted fix: rotating orange orbit + metric spacing */
@keyframes mobileArcSpinV6{
  from{transform:rotate(-35deg)}
  to{transform:rotate(325deg)}
}

@media(max-width:820px){
  /* Keep the orbit container fixed; rotate only the orange arc itself.
     This avoids transform conflicts with translateX on iOS Safari. */
  .agency-hero .agency-orbit{
    animation:none!important;
    -webkit-animation:none!important;
    transform:translateX(-50%)!important;
  }
  .agency-hero .agency-orbit::before{
    animation:mobileArcSpinV6 5.5s linear infinite!important;
    -webkit-animation:mobileArcSpinV6 5.5s linear infinite!important;
    transform-origin:50% 50%!important;
    -webkit-transform-origin:50% 50%!important;
    will-change:transform!important;
  }

  /* Separate the %180 block from the explanatory copy. */
  .agency-hero .agency-metric{
    display:grid!important;
    grid-template-columns:100px minmax(0,1fr)!important;
    column-gap:20px!important;
    align-items:center!important;
    max-width:100%!important;
  }
  .agency-hero .agency-metric-left{
    min-width:0!important;
    padding-right:14px!important;
    border-right:1px solid #d2d2d2!important;
  }
  .agency-hero .agency-metric-left strong{
    display:block!important;
    font-size:30px!important;
    line-height:.95!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
  }
  .agency-hero .agency-metric-left em{
    display:block!important;
    margin-top:6px!important;
    font-size:10px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  .agency-hero .agency-metric > span{
    padding-left:0!important;
    margin:0!important;
    max-width:190px!important;
    font-size:10.5px!important;
    line-height:1.28!important;
  }
}

@media(max-width:620px){
  .agency-hero .agency-metric{
    grid-template-columns:94px minmax(0,1fr)!important;
    column-gap:18px!important;
  }
  .agency-hero .agency-metric-left strong{font-size:28px!important;}
  .agency-hero .agency-metric-left em{font-size:9.5px!important;}
  .agency-hero .agency-metric > span{
    font-size:10px!important;
    max-width:175px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .agency-hero .agency-orbit::before{
    animation-duration:12s!important;
    -webkit-animation-duration:12s!important;
  }
}