/* Client logo strip under the hero: label left, logos drift in an endless loop
   with soft fades on both edges. Logos are pre-tinted one light gray. */
.client-logos{background:#fafafa;padding:44px 0 36px}
.client-logos .wrap{display:flex;align-items:center;gap:48px}
.client-logos-title{flex:0 0 auto;max-width:132px;margin:0;font-family:"Geist Mono",monospace;font-size:10px;font-weight:400;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:#a1a1a7;text-align:left}
.client-logos-marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.client-logos-track{display:flex;width:max-content;animation:client-logos-drift 42s linear infinite}
.client-logos-marquee:hover .client-logos-track{animation-play-state:paused}
@keyframes client-logos-drift{to{transform:translateX(-50%)}}
/* Each copy ends with the same trailing space as its gaps, so -50% loops seamlessly. */
.client-logos-list{--s:.74;list-style:none;margin:0;padding:0 64px 0 0;display:flex;align-items:center;gap:64px}
.client-logos-list li{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.client-logos-list img{display:block;width:calc(var(--w) * var(--s) * var(--k,1));height:auto;opacity:.8}
/* Balance optical weight: solid wordmarks down, the small-text emblem up. */
.client-logos-list img[alt="Nederlandse Loterij"]{--k:1.12}
.client-logos-list img[alt="TWT"],.client-logos-list img[alt="ORT"]{--k:.84}
.client-logos-list img[alt="Euvic"],.client-logos-list img[alt="Semrush"]{--k:.9}
@media (max-width:1180px){
  .client-logos .wrap{flex-direction:column;gap:22px}
  .client-logos-title{max-width:none;text-align:center}
  .client-logos-marquee{width:100%}
}
@media (max-width:960px){
  .client-logos{padding:40px 0 28px}
  .client-logos .wrap{width:100%}
  .client-logos-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
  .client-logos-list{--s:.66;gap:44px;padding-right:44px}
  .client-logos-track{animation-duration:34s}
}
@media (prefers-reduced-motion:reduce){
  .client-logos-track{animation:none}
  .client-logos-list[aria-hidden]{display:none}
  .client-logos-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}