/* Site motion. Restrained: things ease in once as you scroll, the client logos drift,
   real stats count up, a thin bar shows scroll progress. Every effect has a
   prefers-reduced-motion fallback that shows the final state with no movement. */

/* scroll reveals (class is added by motion.js only to things below the fold) */
.m-pre{opacity:0;transform:translateY(18px)}
.m-pre.m-in{opacity:1;transform:none;
  transition:opacity .6s ease var(--d,0s),transform .65s cubic-bezier(.22,.68,.28,1) var(--d,0s)}

/* scroll progress */
.m-prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:1000;pointer-events:none;
  background:var(--blue,#38AEFD);transform-origin:0 50%;transform:scaleX(0);opacity:.9}

/* client logo marquee: "In good hands" */
.marquee{position:relative;overflow:hidden;margin-top:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:m-marquee 38s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;gap:14px;padding-right:14px;flex:none}
.marquee-set div{flex:none;width:190px;height:88px;padding:0 22px;display:flex;align-items:center;justify-content:center;
  background:var(--slate,#0D222F);border:1px solid var(--edge,#1B3A4E);border-radius:var(--radius,14px)}
.marquee-set img{max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain}
@keyframes m-marquee{to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .m-pre,.m-pre.m-in{opacity:1;transform:none;transition:none}
  .m-prog{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .marquee-track{animation:none;width:auto;display:block}
  .marquee-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding-right:0}
  .marquee-set div{width:auto}
  .marquee-set[aria-hidden="true"]{display:none}
}

/* ---------- header: a little more alive ---------- */
.nav{transition:background-color .3s ease,box-shadow .3s ease,-webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
.nav.m-scrolled{background:rgba(5,6,7,.94) !important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--edge,#1B3A4E),0 10px 30px rgba(0,0,0,.35)}
.nav.m-scrolled:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue,#38AEFD),transparent);opacity:.55;pointer-events:none}
.nav-in{transition:height .3s ease}
.nav.m-scrolled .nav-in{height:58px !important}
.nav-links a:not(.nav-cta){position:relative}
.nav-links > a:not(.nav-cta):after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--blue,#38AEFD);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease}
.nav-links > a:not(.nav-cta):hover:after,.nav-links > a[aria-current="page"]:after{transform:scaleX(1)}
.nav-phone{display:inline-flex;align-items:center;gap:8px}
.nav-phone:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue,#38AEFD);flex:none}
.nav-cta{position:relative;overflow:hidden}
.nav-cta:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none}
.btn-blue{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.btn-blue:hover{transform:translateY(-1px)}

@media(prefers-reduced-motion:no-preference){
  .nav{animation:m-nav-in .6s cubic-bezier(.22,.68,.28,1) both}
  @keyframes m-nav-in{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
  .nav-phone:before{animation:m-dot 2.4s ease-out infinite}
  @keyframes m-dot{0%{box-shadow:0 0 0 0 rgba(56,174,253,.6)}70%,100%{box-shadow:0 0 0 9px rgba(56,174,253,0)}}
  .nav-cta:after{animation:m-shine 5.5s ease-in-out 1.5s infinite}
  @keyframes m-shine{0%,70%{left:-60%}100%{left:130%}}
}
@media(prefers-reduced-motion:reduce){.nav-cta:after{display:none}.btn-blue:hover{transform:none}}

/* ---------- hero words rise in ---------- */
.m-w{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .m-w{opacity:0;transform:translateY(.5em);animation:m-word .7s cubic-bezier(.22,.68,.28,1) forwards;animation-delay:calc(.1s + var(--i,0) * .06s)}
  @keyframes m-word{to{opacity:1;transform:none}}
  .hx-copy .sub,.hiw-hero .sub,.gs-hero .sub{animation:m-fade .8s ease .5s both}
  .hx-copy .cta-row,.hiw-hero .cta-row,.gs-hero .cta-row{animation:m-fade .8s ease .65s both}
  @keyframes m-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ---------- images ease in ---------- */
.m-img{opacity:0;transform:translateY(22px) scale(.965)}
.m-img.m-in{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.22,.68,.28,1)}
@media(prefers-reduced-motion:reduce){.m-img,.m-img.m-in{opacity:1;transform:none;transition:none}}
.m-float{will-change:transform}