/* ============================================================
   Client logo wall (homepage under the hero, /portfolio, /instagram)
   Logos are alpha masks in /assets/img/clients/. The color is the
   background of the masked span, so grey + hover ink come from here.
   Each logo carries --ar (width / height) and --f (optical size, so a
   tall mark and a long wordmark read as the same weight).
   ============================================================ */
.clients {
  --cl-base: clamp(64px, 5.6vw, 120px);   /* height of an ar=1 logo before --f */
  --cl-gap: clamp(44px, 4.4vw, 96px);
  --cl-ink: rgba(17, 17, 16, 0.4);
  --cl-ink-on: #111110;
  --cl-speed: 46s;
  background: var(--bg, #d5cfbe);
  padding: 7vw var(--content-r, 1.39vw) 7.5vw var(--content-l, 21vw);
  overflow: hidden;
}
.clients-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 2vw;
  padding-bottom: 2.6vw; margin-bottom: 2.4vw;
  border-bottom: 1px solid rgba(17, 17, 16, 0.12);
}
.clients-label {
  font-family: var(--text); font-weight: 600;
  font-size: var(--fs-sm, 14px); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink, #111110);
}
.clients-note { font-size: var(--fs-sm, 14px); color: var(--gray, #6d6a5e); margin: 0; text-align: right; }

.clients-row {
  position: relative; overflow: hidden;
  /* soft edges so logos fade in and out instead of getting cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.clients-row + .clients-row { margin-top: clamp(22px, 2.4vw, 48px); }
.clients-track {
  display: flex; align-items: center; gap: var(--cl-gap);
  width: max-content; margin: 0; padding: 0 0 0 var(--cl-gap); list-style: none;
  animation: cl-drift var(--cl-speed) linear infinite;
  will-change: transform;
}
.clients-row.is-rev .clients-track { animation-direction: reverse; animation-duration: calc(var(--cl-speed) * 1.12); }
.clients-row:hover .clients-track { animation-play-state: paused; }
@keyframes cl-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.cl-logo {
  flex: none; display: flex; align-items: center;
  height: calc(var(--cl-base) * 0.7);   /* every row is the same height, logos center in it */
}
.cl-logo span {
  display: block;
  height: calc(var(--cl-base) * var(--f));
  width: calc(var(--cl-base) * var(--f) * var(--ar));
  background: var(--cl-ink);
  -webkit-mask: var(--src) center / contain no-repeat;
          mask: var(--src) center / contain no-repeat;
  transition: background-color 0.35s var(--ease, ease);
}
.cl-logo:hover span { background: var(--cl-ink-on); }

@media (max-width: 991px) {
  .clients {
    --cl-base: clamp(58px, 15vw, 84px);
    --cl-gap: clamp(30px, 8vw, 52px);
    --cl-speed: 38s;
    padding: 16vw 0 15vw;
  }
  .clients-head {
    flex-direction: column; align-items: flex-start; gap: 6px;
    margin: 0 var(--content-r) 7vw var(--content-l); padding-bottom: 5vw;
  }
  .clients-note { text-align: left; }
  .clients-row { -webkit-mask-image: none; mask-image: none; }
}

/* no motion: one still, centered wall, copies hidden */
@media (prefers-reduced-motion: reduce) {
  .clients-track {
    animation: none; width: auto; flex-wrap: wrap; justify-content: center;
    padding: 0; row-gap: clamp(18px, 2vw, 32px);
  }
  .clients-track [aria-hidden="true"] { display: none; }
  .clients-row { -webkit-mask-image: none; mask-image: none; }
}

/* dark pages (/portfolio, /instagram): same wall, inverted */
.clients.is-dark {
  --cl-ink: rgba(237, 231, 216, 0.42);
  --cl-ink-on: #EDE7D8;
  --content-l: clamp(16px, 5vw, 84px);
  --content-r: clamp(16px, 5vw, 84px);
  background: #0B0A08;
}
.clients.is-dark .clients-head { border-bottom-color: rgba(237, 231, 216, 0.14); }
.clients.is-dark .clients-label { color: #EDE7D8; }
.clients.is-dark .clients-note { color: rgba(237, 231, 216, 0.62); }