/* Corporate client logo marquee — desktop: single row ~22s loop; mobile: 3x2 grid "page", faster ~11s loop. */

.logo-marquee{border-top:1px solid rgba(21,18,15,.12);padding-top:28px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;gap:56px;align-items:center;width:max-content;animation:ddmarquee 22s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-page{display:flex;gap:56px;align-items:center;flex:none}
.logo-tile{width:150px;height:52px;flex:none}
.logo-tile img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) opacity(.6)}
/* An empty slot, as the approved design draws it: the client's name in a light outline,
   filling the tile, instead of a square placeholder shrunk to a 52px icon. Replaced by the
   real image as soon as one is uploaded. */
.logo-tile.is-placeholder{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid rgba(21,18,15,.14);border-radius:8px;box-sizing:border-box;padding:6px 8px}
.logo-tile.is-placeholder span{font-family:var(--dd-font-ui);font-size:10.5px;line-height:1.25;
  letter-spacing:.04em;color:rgba(21,18,15,.4)}

@media (max-width:900px){
  .logo-track{animation-duration:11s;gap:16px}
  .logo-page{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:none;width:calc(100vw - 40px)}
  .logo-tile{width:auto;height:auto}
  .logo-tile img{aspect-ratio:3/2;height:auto}
}