.brand-strip { display: block; overflow: hidden; padding: 0; }
.brand-marquee {
  display: block;
  width: 100%;
  border: 0;
  padding: 23px 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.brand-track { display: flex; width: max-content; animation: brand-travel 30s linear infinite; }
.brand-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: max(100vw, 960px);
  gap: 45px;
  padding: 0 35px;
}
.brand-group > span { flex-shrink: 0; white-space: nowrap; font-size: 19px; }
.brand-strip[data-paused="true"] .brand-track,
.brand-marquee:hover .brand-track,
.brand-marquee:focus-visible .brand-track { animation-play-state: paused; }
.brand-marquee:focus-visible { outline-color: white; outline-offset: -5px; }
@keyframes brand-travel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .brand-marquee { padding: 20px 0; }
  .brand-group > span { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-track { width: 100%; animation: none; transform: none; }
  .brand-group { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0 5%; gap: 24px; }
  .brand-group[aria-hidden="true"] { display: none; }
  .brand-group > span { white-space: normal; }
  .brand-marquee:disabled { cursor: default; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .brand-group { grid-template-columns: 1fr 1fr; gap: 16px 22px; }
}