.dsx-logos { padding: 20px 0 clamp(40px, 5vw, 64px); }
.dsx-logos__bar {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: 18px 28px;
  border: 1px solid var(--ds-evergreen-line);
  border-radius: var(--radius-pill);
}
.dsx-logos--paper .dsx-logos__bar { border-color: var(--ds-border); }
.dsx-logos__label { margin: 0; flex-shrink: 0; font-size: 0.9375rem; color: rgba(255,255,255,.9); white-space: nowrap; }
.dsx-logos--paper .dsx-logos__label { color: var(--ds-ink); }
.dsx-logos__list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2.4vw, 36px); }
.dsx-logos__list img { display: block; height: 22px; width: auto; max-width: 128px; }
.dsx-logos__list img.is-tall { height: 34px; }
@media (max-width: 1080px) {
  .dsx-logos__bar { flex-direction: column; border-radius: 24px; padding: 22px 20px; gap: 18px; }
  .dsx-logos__list { flex-wrap: wrap; justify-content: center; gap: 18px 28px; }
  .dsx-logos__label { white-space: normal; text-align: center; }
}

/* Logo wall, DD.NYC's way (studied 2026-09-24): a flat stone band, a small label led by a rule,
   five even columns of logos in one gray. The logos are pre-made (images/logos/wall/*.png): each is
   one gray, trimmed and placed on the same 340x160 canvas at an even visual weight, so the page
   needs no filters or blend modes (those drew faint boxes around some logos). */
.dsx-logos--wall { padding: var(--section-py) 0; }
.dsx-logos--stone { background: var(--ds-stone); }
.dsx-logos--wall .dsx-logos__heading { display: flex; align-items: center; gap: 24px; margin: 0 0 clamp(40px, 6vw, 72px); font-family: var(--font-primary); font-size: 1rem; font-weight: 500; line-height: 2; letter-spacing: 0; color: var(--ds-ink); }
.dsx-logos--wall .dsx-logos__heading::before { content: ""; flex: 0 0 76px; height: 1px; background: var(--ds-ink); }
.dsx-logos__wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) clamp(16px, 3vw, 40px); align-items: center; justify-items: center; }
.dsx-logos__wall img { display: block; width: 170px; max-width: 100%; height: auto; aspect-ratio: 340 / 160; }
@media (max-width: 767px) { .dsx-logos__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Rotating wall (DD.NYC's client grid, read from dd.nyc 2026-09-24): ten cells in two rows (eight at
   four across, six at two across); every 2 seconds one cell's logo shrinks away and the next scales in,
   0.5s each. Each cell keeps its group, so music, insurtech/finance and brands always share the screen.
   The logos past the visible count are the pool; without the script the first ones simply sit still. */
.dsx-logos__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 clamp(40px, 6vw, 72px); }
.dsx-logos__head .dsx-logos__heading { margin: 0; }
.dsx-logos--rotate .dsx-logos__wall li { position: relative; width: 100%; max-width: 170px; aspect-ratio: 340 / 160; }
.dsx-logos--rotate .dsx-logos__wall li:nth-child(n+11) { display: none; }
.dsx-logos--rotate .dsx-logos__wall img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.dsx-logos--rotate .dsx-logos__wall img.is-out, .dsx-logos--rotate .dsx-logos__wall img.is-in { opacity: 0; transform: scale(0.6); }
@media (max-width: 1199px) {
  .dsx-logos--rotate .dsx-logos__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dsx-logos--rotate .dsx-logos__wall li:nth-child(n+9) { display: none; }
}
@media (max-width: 767px) {
  .dsx-logos--rotate .dsx-logos__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsx-logos--rotate .dsx-logos__wall li:nth-child(n+7) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dsx-logos--rotate .dsx-logos__wall img { transition: none; }
  }