/* ═══ SECTION 3 — CLIENT LOGOS ═══ */
/* sits between two dark sections now, so it takes the slightly deeper ground to separate
   itself from the positioning section above it. Extra top padding keeps the marquee off
   the hairline rule that section 2 ends on. */
.clients{position:relative;padding:clamp(66px,10vh,112px) var(--gut) clamp(50px,8vh,86px);
  background:#080808;border-top:1px solid var(--border)}
.clients .lead{display:flex;align-items:center;gap:11px;font-size:10.5px;letter-spacing:.2em;
  font-weight:600;color:var(--dim);margin-bottom:clamp(26px,4vh,44px)}
.clients .lead::before{content:"";width:7px;height:7px;background:var(--cut);flex-shrink:0}
.logo-rows{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:clamp(14px,2.2vw,26px) 0;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.is-in .logo-rows{opacity:1;transform:none}

.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.mq-track{display:flex;width:max-content;will-change:transform}
/* duration scales with logos per row (22) so the drift speed stays the same as before */
.marquee.ltr .mq-track{animation:mq-left 200s linear infinite}
.marquee.rtl .mq-track{animation:mq-right 200s linear infinite}
.logo-rows:hover .mq-track{animation-play-state:paused}
/* each track holds the set twice; -50% completes one seamless cycle */
@keyframes mq-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mq-right{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

.logo-cell{--cell-w:clamp(150px,15vw,230px);--cell-h:clamp(66px,7vw,104px);
  flex-shrink:0;width:var(--cell-w);height:var(--cell-h);
  display:grid;place-items:center;padding:12px 20px;position:relative}
.logo-cell + .logo-cell::before{content:"";position:absolute;left:0;top:22%;bottom:22%;
  width:1px;background:var(--border)}

/* The logo files are padded squares, so each logo is cropped to its visible edges.
   Per-logo inline vars (measured from the file): --ar aspect of the visible logo, --sar its
   square root, --iw/--ix/--iy the image's size and offset inside the crop.
   Width grows with √aspect so wide wordmarks and square marks read at a similar visual size. */
.logo-crop{position:relative;display:block;overflow:hidden;aspect-ratio:var(--ar);
  width:min(calc(var(--cell-w) * .72), calc(var(--cell-h) * .6 * var(--sar)))}
.logo-crop img{position:absolute;left:var(--ix);top:var(--iy);width:var(--iw);height:auto;max-width:none;
  filter:grayscale(1);opacity:.78;transition:opacity .35s ease}
.logo-crop img.inv{filter:grayscale(1) invert(1)}    /* dark logos: flipped to light */
.logo-crop img.blend{mix-blend-mode:lighten}          /* logo on a solid light background: bg drops out */
.logo-cell:hover img{opacity:1}
.logo-cell .fallback{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--dim);
  transition:color .35s ease;text-align:center;white-space:nowrap}
.logo-cell:hover .fallback{color:var(--text)}

/* the marquees are aria-hidden (logos repeat for the loop), so screen readers get this list instead */
.clients .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .logo-rows{opacity:1;transform:none}
  .mq-track{animation:none!important}
  .marquee{overflow-x:auto}
}