/* 03 — klanten: monochrome logo-rij + marquee met klantnamen */
.klanten {
  --k-krijt: var(--krijt, #E9E8E3);
  --k-dim: rgba(233, 232, 227, .5);
  --k-lijn: rgba(233, 232, 227, .12);
  --k-naam: clamp(3.25rem, 5.6vw, 5.5rem);
  --k-gat: clamp(28px, 3.2vw, 52px);
  --k-logo-h: 44px;
  position: relative;
  padding-block: clamp(56px, 5.6vw, 88px) clamp(56px, 6vw, 96px);
  background: var(--zwart, #0A0A0A);
  color: var(--k-krijt);
  overflow: hidden;
}

/* kopregel: mono label + haarlijn */
.klanten .klanten__kop { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(24px, 2.4vw, 36px); }
.klanten .klanten__label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-dim); white-space: nowrap; line-height: 1;
}
.klanten .klanten__stip { width: 6px; height: 6px; border-radius: 50%; background: var(--juno, #1E6FB8); box-shadow: 0 0 0 4px rgba(30, 111, 184, .18); }
.klanten .klanten__lijn { flex: 1; height: 1px; background: linear-gradient(90deg, var(--k-lijn), transparent); }

/* logo-rij */
.klanten .klanten__rij { max-width: 1240px; margin-inline: auto; padding-inline: var(--zij, 20px); }
.klanten .klanten__logos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
}
.klanten .klanten__logo {
  display: flex; align-items: center; justify-content: center;
  height: 96px; position: relative;
  opacity: .62; filter: grayscale(1);
  transition: opacity .5s var(--ease, ease);
}
.klanten .klanten__logo + .klanten__logo::before {
  content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: var(--k-lijn);
}
.klanten .klanten__logo:hover { opacity: 1; }
.klanten .klanten__logo img { width: auto; height: var(--k-logo-h); display: block; }
.klanten .klanten__logo--clipzies img { height: calc(var(--k-logo-h) * 1.08); }
.klanten .klanten__logo--epic img { height: calc(var(--k-logo-h) * 1.12); }
.klanten .klanten__logo--amusement img { height: calc(var(--k-logo-h) * 1.15); }
.klanten .klanten__logo--irm img { height: calc(var(--k-logo-h) * .62); }
.klanten .klanten__merk { display: inline-flex; align-items: center; gap: 10px; }
.klanten .klanten__logo--isatis img { height: calc(var(--k-logo-h) * .82); }
.klanten .klanten__merk span { font-family: var(--font-kop); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: calc(var(--k-logo-h) * .42); color: var(--krijt); line-height: 1; }
.klanten .klanten__woord {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-kop); font-weight: 900; text-transform: uppercase;
  font-size: 15px; line-height: .86; letter-spacing: .02em; white-space: nowrap; color: var(--k-krijt);
}
.klanten .klanten__woord b { font-weight: 900; font-size: 1.62em; letter-spacing: -.035em; }

/* marquee */
.klanten .klanten__band {
  margin-top: clamp(40px, 4.2vw, 64px);
  padding-block: clamp(22px, 2.2vw, 34px);
  border-block: 1px solid var(--k-lijn);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.klanten .klanten__spoor { display: flex; width: max-content; will-change: transform; }
.klanten .klanten__reeks { display: flex; align-items: center; flex-shrink: 0; }
.klanten .klanten__reeks span {
  font-family: var(--font-tekst); font-size: var(--k-naam); font-weight: 500;
  line-height: 1.02; letter-spacing: -.035em; white-space: nowrap;
  color: rgba(233, 232, 227, .82); padding-bottom: .06em;
}
.klanten .klanten__reeks i {
  font-style: normal; display: inline-block;
  font-size: calc(var(--k-naam) * .42); line-height: 1;
  color: var(--k-krijt); margin-inline: var(--k-gat);
  animation: klanten-ster 9s linear infinite;
}
@keyframes klanten-ster { to { transform: rotate(360deg); } }

/* standaard-CSS-loop (JS neemt over voor snelheid met scroll) */
.klanten .klanten__spoor.is-css { animation: klanten-loop var(--k-duur, 28s) linear infinite; }
@keyframes klanten-loop { to { transform: translateX(-50%); } }

/* mobiel: logo's lopen mee als marquee */
@media (max-width: 720px) {
  .klanten { --k-logo-h: 34px; --k-naam: 3.1rem; --k-gat: 22px; padding-block: 64px 56px; }
  .klanten .klanten__kop { margin-bottom: 28px; }
  .klanten .klanten__rij {
    padding-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  .klanten .klanten__logos { display: flex; width: max-content; animation: klanten-loop 22s linear infinite; }
  .klanten .klanten__logo { height: 72px; padding-inline: 30px; flex-shrink: 0; }
  .klanten .klanten__logo + .klanten__logo::before { display: none; }
  .klanten .klanten__woord { font-size: 12px; }
  .klanten .klanten__band { margin-top: 40px; padding-block: 18px; }
}

/* rust: geen beweging */
@media (prefers-reduced-motion: reduce) {
  .klanten .klanten__spoor, .klanten .klanten__logos, .klanten .klanten__reeks i { animation: none !important; transform: none !important; }
  .klanten .klanten__logos { flex-wrap: wrap; width: auto; justify-content: center; }
}
html.is-shot .klanten .klanten__spoor,
html.is-shot .klanten .klanten__logos,
html.is-shot .klanten .klanten__reeks i { animation: none !important; transform: none !important; }
html.is-shot .klanten .klanten__spoor { transform: translateX(-4%) !important; }