/* 主要客户：统一标题条与独立客户标识。 */
.clients-content { padding: 56px 0 72px; }
.clients-heading {
  display: flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 12px 20px;
  background: var(--red); color: #fff;
  text-align: center; font-size: 24px; font-weight: 600; letter-spacing: 2px;
}
.client-logo-viewport { --client-row-height: 112px; --client-row-gap: 20px; --client-logo-height: 54px; margin-top: 28px; }
.client-logo-track { display: flex; flex-direction: column; gap: var(--client-row-gap); }
.client-logo-list {
  display: grid; flex: none; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--client-row-height); gap: var(--client-row-gap) 24px;
  margin: 0; padding: 0; list-style: none;
}
.client-logo-list li {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 0; height: var(--client-row-height); padding: 18px 12px;
  border: 1px solid var(--line); background: #fff; cursor: default;
}
.client-logo-list img { display: block; width: 211px; max-width: 100%; height: var(--client-logo-height); object-fit: contain; cursor: default; }
.client-logo-list img.is-round-logo { height: calc(var(--client-logo-height) * 1.2); }
.client-logo-viewport.is-ready { height: var(--client-viewport-height); overflow: hidden; }
.client-logo-viewport.is-scrollable { overflow-y: auto; }
.client-logo-viewport.is-animated .client-logo-track {
  animation: client-logo-scroll var(--client-scroll-duration) linear infinite;
  will-change: transform;
}
.client-logo-viewport.is-page-hidden .client-logo-track,
.client-logo-viewport:focus-within .client-logo-track { animation-play-state: paused; }
.client-logo-viewport:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
@media (hover: hover) {
  .client-logo-viewport:hover .client-logo-track { animation-play-state: paused; }
}
@keyframes client-logo-scroll {
  to { transform: translate3d(0, calc(0px - var(--client-scroll-distance)), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .client-logo-viewport.is-ready { overflow-y: auto; }
  .client-logo-viewport.is-animated .client-logo-track { animation: none; transform: none; will-change: auto; }
}
@media (max-width: 760px) {
  .clients-content { padding: 38px 0 48px; }
  .clients-heading { min-height: 50px; padding: 10px 12px; font-size: 21px; }
  .client-logo-viewport { --client-row-height: 90px; --client-row-gap: 14px; --client-logo-height: 40px; margin-top: 20px; }
  .client-logo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .client-logo-list li { padding: 14px 8px; }
}