/* the home page only (gen_site clients_strip) — firms that use LitArbi: their logos pass slowly under the app picture, in one muted tone;
   still for reduced motion, each firm once */
.clients { margin: 2.75rem auto 0; max-width: 52rem; text-align: center; }
.clients__label { margin: 0 0 1.1rem; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-foreground); }
.clients__viewport { display: flex; 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); }
.clients__track { flex: none; display: flex; align-items: center; gap: 5rem; margin: 0; padding: 0 2.5rem; list-style: none; animation: clients-pass 36s linear infinite; }
.clients__viewport:hover .clients__track { animation-play-state: paused; }
.clients__item { flex: none; display: flex; align-items: center; height: 3.5rem; }
.clients__logo { display: block; height: 1.15rem; width: auto; max-width: 14rem; filter: grayscale(1) brightness(0); opacity: .55; }
.clients__logo--emblem { height: 2.6rem; }
.clients__name { font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; color: var(--muted-foreground); white-space: nowrap; }
@keyframes clients-pass { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; }
  .clients__track + .clients__track, .clients__item--again { display: none; }
  .clients__viewport { justify-content: center; -webkit-mask-image: none; mask-image: none; }
}
:root[data-theme="dark"] .clients__logo { filter: grayscale(1) brightness(0) invert(1); opacity: .6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clients__logo { filter: grayscale(1) brightness(0) invert(1); opacity: .6; } }