/* ============================================================
   01 · CLIENTS  (auto-scrolling logo/name carousel)
   Scroll animation: @keyframes mslide, in css/04-utilities.css.
   ============================================================ */
.clients{padding:clamp(52px,7vw,80px) 0 clamp(22px,3vw,40px)}
.cl-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.carousel{padding-bottom:clamp(56px,8vw,96px);overflow:hidden;position:relative}
.carousel::before,.carousel::after{content:'';position:absolute;top:0;bottom:0;
  width:clamp(50px,14vw,210px);z-index:2;pointer-events:none}
.carousel::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.carousel::after{right:0;background:linear-gradient(270deg,#fff,transparent)}

.crow{display:flex;overflow:hidden;padding:7px 0}
.ctrack{display:flex;flex:0 0 auto;gap:clamp(30px,5vw,74px);
  padding-right:clamp(30px,5vw,74px);animation:mslide 42s linear infinite}
.crow.rev .ctrack{animation-direction:reverse;animation-duration:54s}

.ctrack i{font-style:normal;font-family:Archivo;font-weight:600;
  font-size:clamp(15px,2.2vw,26px);color:var(--ink300);
  transition:color .25s;white-space:nowrap}
.ctrack i:hover{color:var(--navy)}

@media(max-width:720px){
  .cl-head{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .ctrack{animation:none}
}