/* Cutting Room — scrolling client/brand logo strip */

/* ---------- brands: scrolling client strip ---------- */
  .brands { border-top: 1px solid var(--line); padding: clamp(36px, 5.32vw, 56px) 0 clamp(20px, 3vw, 32px); overflow: hidden; }
  .marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  }
  .marquee-track {
    display: flex; align-items: center; width: max-content;
    gap: clamp(36px, 5.06vw, 73px);
    animation: marquee 145s linear infinite; will-change: transform;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .brand {
    font-size: clamp(23px, 3.03vw, 34px); font-weight: 500; letter-spacing: -0.01em;
    color: var(--ink-dim); white-space: nowrap;
    transition: color 0.25s ease;
  }
  .brand:hover { color: var(--ink); }
  .brand--logo {
    display: inline-block; height: clamp(28px, 4.4vw, 52px); width: auto; vertical-align: middle;
    background-color: var(--ink-dim); transition: background-color 0.25s ease;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
  }
  .brand--logo:hover { background-color: var(--ink); }

  
/* ---------- brand logo masks ---------- */
  .logo-bolcom { aspect-ratio: 4.1800; -webkit-mask-image: url(../assets/images/logos/logo-bolcom.png); mask-image: url(../assets/images/logos/logo-bolcom.png); }
  .logo-kpn { aspect-ratio: 2.1900; -webkit-mask-image: url(../assets/images/logos/logo-kpn.png); mask-image: url(../assets/images/logos/logo-kpn.png); }
  .logo-puma { aspect-ratio: 1.9800; -webkit-mask-image: url(../assets/images/logos/logo-puma.png); mask-image: url(../assets/images/logos/logo-puma.png); }
  .logo-philips { aspect-ratio: 5.3250; -webkit-mask-image: url(../assets/images/logos/logo-philips.png); mask-image: url(../assets/images/logos/logo-philips.png); }
  .logo-audi { aspect-ratio: 2.8400; -webkit-mask-image: url(../assets/images/logos/logo-audi.png); mask-image: url(../assets/images/logos/logo-audi.png); }
  .logo-bbc { aspect-ratio: 3.2400; -webkit-mask-image: url(../assets/images/logos/logo-bbc.png); mask-image: url(../assets/images/logos/logo-bbc.png); }
  .logo-instagram { aspect-ratio: 3.5500; -webkit-mask-image: url(../assets/images/logos/logo-instagram.png); mask-image: url(../assets/images/logos/logo-instagram.png); }
  .logo-mauritshuis { aspect-ratio: 1.6550; -webkit-mask-image: url(../assets/images/logos/logo-mauritshuis.png); mask-image: url(../assets/images/logos/logo-mauritshuis.png); }
  .logo-meta { aspect-ratio: 4.9450; -webkit-mask-image: url(../assets/images/logos/logo-meta.png); mask-image: url(../assets/images/logos/logo-meta.png); }
  .logo-catawiki { aspect-ratio: 3.4300; -webkit-mask-image: url(../assets/images/logos/logo-catawiki.png); mask-image: url(../assets/images/logos/logo-catawiki.png); }
  .logo-pathe { aspect-ratio: 2.2100; -webkit-mask-image: url(../assets/images/logos/logo-pathe.png); mask-image: url(../assets/images/logos/logo-pathe.png); }
  .logo-tirisi { aspect-ratio: 2.8950; -webkit-mask-image: url(../assets/images/logos/logo-tirisi.png); mask-image: url(../assets/images/logos/logo-tirisi.png); }
  .logo-triumph { aspect-ratio: 2.7000; -webkit-mask-image: url(../assets/images/logos/logo-triumph.png); mask-image: url(../assets/images/logos/logo-triumph.png); }
  .logo-unive { aspect-ratio: 3.2550; -webkit-mask-image: url(../assets/images/logos/logo-unive.png); mask-image: url(../assets/images/logos/logo-unive.png); }
  .logo-vorwerk { aspect-ratio: 2.5650; -webkit-mask-image: url(../assets/images/logos/logo-vorwerk.png); mask-image: url(../assets/images/logos/logo-vorwerk.png); }
  .logo-vechain { aspect-ratio: 4.4600; -webkit-mask-image: url(../assets/images/logos/logo-vechain.png); mask-image: url(../assets/images/logos/logo-vechain.png); }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
  @media (max-width: 700px) {
    .brands { padding: 28px 0 16px; }
    .marquee-track { gap: 32px; animation-duration: 90s; }
  }