/* Homepage client strip: static by default; motion is progressively enhanced. */
.client-marquee {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.client-marquee__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
}

.client-marquee__viewport:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

.client-marquee__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 28px;
}

.client-marquee .client-logo-item {
  flex: 0 0 180px;
  min-height: 92px;
  padding: 6px 10px;
}

.client-marquee .client-logo-item img {
  width: 160px;
  height: 80px;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  opacity: 1;
}

.client-marquee.is-ready .client-marquee__track {
  display: flex;
  width: max-content;
  animation: client-logo-slide 36s linear infinite;
}

.client-marquee.is-ready .client-marquee__group {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 28px;
  padding-right: 28px;
}

.client-marquee__viewport:hover .client-marquee__track,
.client-marquee__viewport:focus-within .client-marquee__track {
  animation-play-state: paused;
}

@keyframes client-logo-slide {
  to { transform: translateX(-50%); }
}

@media (max-width: 600px) {
  .client-marquee { gap: 8px; }
  .client-marquee .client-logo-item { flex-basis: 156px; min-height: 80px; padding: 4px 6px; }
  .client-marquee .client-logo-item img { width: 144px; height: 72px; }
  .client-marquee.is-ready .client-marquee__group { gap: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .client-marquee.is-ready .client-marquee__track { display: block; width: auto; animation: none; }
  .client-marquee.is-ready .client-marquee__group { flex-wrap: wrap; padding-right: 0; }
  .client-marquee__group[aria-hidden="true"] { display: none; }
  .client-marquee .client-logo-item img { transition: none; }
}