/* Homepage client logo strip. Static wrapping layout by default; JS adds .is-marquee. */
.client-logos { background: var(--white); border-bottom: 1px solid var(--line); }
.client-logos[hidden] { display: none; }
.client-logos__inner { max-width: 1160px; margin: 0 auto; padding: 22px clamp(20px, 4vw, 48px); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px clamp(20px, 3vw, 40px); }
.client-logos__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.client-logos__heading { margin: 0; position: relative; padding-left: 1.6rem; font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.client-logos__heading::before { content: ""; position: absolute; left: 0; top: 50%; width: 1rem; height: 2px; background: var(--orange); }
.client-logos__viewport { min-width: 0; }
.client-logos__track { display: flex; }
.client-logos__group { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(28px, 4vw, 52px); min-width: 0; }
.client-logos__item { flex: none; display: flex; align-items: center; height: 44px; max-width: 100%; border-radius: 4px; }
.client-logos__item:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.client-logos__img { display: block; height: 40px; width: auto; max-width: min(180px, 70vw); object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease; }
.client-logos__item:hover .client-logos__img, .client-logos__item:focus-visible .client-logos__img, .client-logos__item:focus .client-logos__img { filter: none; opacity: 1; }

/* Loop mode: two or more logos, enhanced only while motion is allowed. */
.client-logos.is-marquee .client-logos__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.client-logos.is-marquee .client-logos__track { width: max-content; animation: clientLogosLoop var(--cl-duration, 40s) linear infinite; animation-play-state: paused; }
.client-logos.is-marquee .client-logos__group { flex: none; min-width: var(--cl-min-width, 0px); flex-wrap: nowrap; justify-content: space-around; padding-right: clamp(28px, 4vw, 52px); }
.client-logos.is-marquee.is-running:not(.is-offscreen):not(.is-document-hidden) .client-logos__track { animation-play-state: running; }
.client-logos.is-marquee:hover .client-logos__track,
.client-logos.is-marquee:focus-within .client-logos__track { animation-play-state: paused !important; }
@keyframes clientLogosLoop { to { transform: translateX(-50%); } }

@media (max-width: 768px) {
  .client-logos__inner { grid-template-columns: minmax(0, 1fr); padding-block: 18px; }
  .client-logos__head { justify-content: space-between; }
  .client-logos__img { height: 34px; }
  .client-logos__item { height: 38px; }
  .client-logos__group { gap: 14px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-logos .client-logos__track { animation: none !important; transform: none !important; }
  .client-logos .client-logos__img { transition: none; }
}