/* Featured-client card: off-white page, white rounded panel, one looping
   row of fully rounded logo pills. Motion pauses on hover, focus, the
   pause control, and while the row is offscreen. */
[data-client-brands-card] {
  background: #FFFFFF;
  border: 1px solid #ECE7E0;
  border-radius: 28px;
  padding: 52px 0 40px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(35, 32, 27, 0.04);
  overflow: hidden;
}
[data-client-brands-card] > h2 {
  margin: 0 auto;
  padding: 0 56px;
  line-height: 1.15;
}
[data-client-brands-card] > p {
  margin: 12px auto 0;
  padding: 0 48px;
}
[data-client-brands] {
  position: relative;
  margin-top: 32px;
}
[data-client-brands-viewport] {
  overflow: hidden;
  min-height: 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
[data-client-brands-track] {
  display: flex;
  width: max-content;
  align-items: center;
}
[data-client-brands-set],
[data-client-brands-clone] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
  flex: 0 0 auto;
}
[data-client-brands-set] > span,
[data-client-brands-clone] > span {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 999px !important;
  background: #FFFFFF;
  border: 1px solid #E4DED5;
  box-shadow: 0 1px 0 rgba(35, 32, 27, 0.03);
}
[data-client-brands][data-client-brands-motion="on"] [data-client-brands-track] {
  animation-name: client-brands-marquee;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
[data-client-brands]:hover [data-client-brands-track],
[data-client-brands]:focus-within [data-client-brands-track],
[data-client-brands][data-client-brands-paused="true"] [data-client-brands-track],
[data-client-brands][data-client-brands-off="true"] [data-client-brands-track] {
  animation-play-state: paused;
}
@keyframes client-brands-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
[data-client-brands-toggle] {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid #E4DED5;
  background: #FFFFFF;
  color: #55504A;
  cursor: pointer;
  box-shadow: 0 0 0 8px #FFFFFF;
}
[data-client-brands-toggle]:hover {
  border-color: #C9C2B7;
  color: #23201B;
}
[data-client-brands-toggle] [data-icon="play"] { display: none; }
[data-client-brands-toggle][aria-pressed="true"] [data-icon="pause"] { display: none; }
[data-client-brands-toggle][aria-pressed="true"] [data-icon="play"] { display: block; }
@media (forced-colors: active) {
  [data-client-brands-toggle] { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
}

/* 390px: heading wraps to three lines, pills shrink, row keeps scrolling. */
@media (max-width: 640px) {
  [data-client-brands-card] {
    border-radius: 22px;
    padding: 32px 0 24px;
  }
  [data-client-brands-card] > h2 {
    /* ~3 lines of the English heading at 26px inside a 390px viewport. */
    max-width: 300px;
    padding: 0 8px;
    font-size: 26px !important;
    line-height: 1.18 !important;
  }
  [data-client-brands-card] > p {
    padding: 0 20px;
    font-size: 14.5px !important;
  }
  [data-client-brands] { margin-top: 22px; }
  [data-client-brands-viewport] {
    min-height: 36px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
  [data-client-brands-set],
  [data-client-brands-clone] {
    gap: 8px;
    padding-right: 8px;
  }
  [data-client-brands-set] > span,
  [data-client-brands-clone] > span {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    gap: 6px !important;
  }
  [data-client-brands-set] img,
  [data-client-brands-clone] img {
    width: 14px !important;
    height: 14px !important;
  }
  [data-client-brands-toggle] {
    width: 36px;
    height: 36px;
    right: 4px;
    box-shadow: 0 0 0 6px #FFFFFF;
  }
}

/* Static wrapped grid: no auto motion, every brand remains visible. */
@media (prefers-reduced-motion: reduce), (scripting: none), print {
  [data-client-brands-viewport] {
    overflow: visible !important;
    min-height: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding: 0 28px;
  }
  [data-client-brands-track] {
    display: block !important;
    width: auto !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  [data-client-brands-set] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0 !important;
    gap: 12px !important;
  }
  [data-client-brands-clone],
  [data-client-brands-toggle] { display: none !important; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce),
       (max-width: 640px) and (scripting: none) {
  [data-client-brands-viewport] { padding: 0 16px; }
  [data-client-brands-set] { gap: 8px !important; }
}