.attn-client-strip {
  --attn-client-bg: #101b25;
  --attn-client-gap: clamp(34px, 4.2vw, 63px);
  --attn-client-fade: clamp(14px, 3vw, 42px);
  display: flex;
  align-items: stretch;
  height: 75px;
  min-width: 0;
  border-block: 1px solid #a4c9e329;
  background: var(--attn-client-bg);
  color: #dce9f2;
}

.attn-client-frame { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.attn-client-frame::before, .attn-client-frame::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset-block: 0;
  width: var(--attn-client-fade);
  pointer-events: none;
}
.attn-client-frame::before { left: 0; background: linear-gradient(90deg, var(--attn-client-bg), transparent); }
.attn-client-frame::after { right: 0; background: linear-gradient(270deg, var(--attn-client-bg), transparent); }
.attn-client-frame:focus-within::before, .attn-client-frame:focus-within::after { opacity: 0; }
.attn-client-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.attn-client-viewport:focus-visible { outline: 2px solid #4dd2ff; outline-offset: -2px; }
.attn-client-track {
  display: flex;
  width: max-content;
  min-height: 100%;
  animation: attn-client-marquee var(--attn-client-duration, 54s) linear infinite;
  will-change: transform;
}
.attn-client-group {
  display: flex;
  flex: 0 0 auto;
  min-width: 100vw;
  justify-content: space-around;
  align-items: center;
  gap: var(--attn-client-gap);
  margin: 0;
  padding: 0 calc(var(--attn-client-gap) / 2);
  list-style: none;
}
.attn-client-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  color: #d3e4ef;
  font: 750 clamp(16px, 1.65vw, 23px)/1 Inter, system-ui, sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.attn-client-brand img { display: block; width: 128px; height: 50px; max-width: none; object-fit: contain; }
.attn-client-brand .attn-client-logo-pale { padding: 5px 8px; border-radius: 5px; background: #e7eff2; }
.attn-client-brand-compact { width: 128px; }
.attn-client-brand .attn-client-logo-compact { width: 105px; max-width: 105px; height: 55px; padding: 0; background: #fff; }
.attn-client-brand.attn-client-with-name { gap: 12px; }
.attn-client-brand.attn-client-with-name img { width: 34px; height: 50px; border-radius: 3px; }
.attn-client-brand.attn-client-with-name span { max-width: 110px; white-space: normal; font-size: 16px; line-height: 1.15; }
@keyframes attn-client-marquee { to { transform: translate3d(-50%, 0, 0); } }

@media (hover: hover) {
  .attn-client-frame:hover .attn-client-track { animation-play-state: paused; }
}
.attn-client-frame:focus-within .attn-client-track { animation-play-state: paused; }

.attn-client-strip[data-static="true"] .attn-client-viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #42657a var(--attn-client-bg);
}
.attn-client-strip[data-static="true"] .attn-client-frame::before,
.attn-client-strip[data-static="true"] .attn-client-frame::after { opacity: 0; }
.attn-client-strip[data-static="true"] .attn-client-track { animation: none; will-change: auto; }
.attn-client-strip[data-static="true"] .attn-client-clone { display: none; }

@media (max-width: 640px) {
  .attn-client-strip { --attn-client-gap: 32px; }
  .attn-client-brand img { width: 110px; height: 46px; }
  .attn-client-brand-compact { width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .attn-client-track { animation: none; will-change: auto; }
  .attn-client-clone { display: none; }
  .attn-client-viewport { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #42657a var(--attn-client-bg); }
  .attn-client-frame::before, .attn-client-frame::after { opacity: 0; }
}