/* Clientele logo marquee: two rows scrolling in opposite directions (layout ported from an earlier design draft). */
.bk-clients { overflow: hidden; }
.bk-clients .bk-section-heading { margin-bottom: 36px; }
.bk-clients .marquee { display: flex; overflow: hidden; user-select: none; }
.bk-clients .marquee-track { display: flex; flex-shrink: 0; align-items: center; animation: bk-clients-marquee var(--speed, 50s) linear infinite; }
.bk-clients .marquee.reverse .marquee-track { animation-direction: reverse; }
.bk-clients .marquee:hover .marquee-track,
.bk-clients .marquee.is-paused .marquee-track { animation-play-state: paused; }
@keyframes bk-clients-marquee { to { transform: translateX(-100%); } }
.bk-clients .logo-row { mix-blend-mode: multiply; }
.bk-clients .logo-tile { flex: 0 0 auto; display: grid; place-items: center; width: clamp(9rem, 15vw, 13rem); aspect-ratio: 300/208; margin-right: clamp(1rem, 2.5vw, 2rem); }
.bk-clients .logo-tile img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .5s, opacity .5s; }
.bk-clients .logo-tile:hover img { filter: none; opacity: 1; }
.bk-clients .logo-row + .logo-row { margin-top: clamp(.6rem, 1.5vw, 1.2rem); }

/* Reduced motion (device setting or the site's Reduce motion switch): stop the loop
   and let the rows scroll sideways by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .bk-clients .marquee { overflow-x: auto; }
  .bk-clients .marquee-track { animation: none; }
  .bk-clients .marquee-track[aria-hidden="true"] { display: none; }
}
html.bk-reduce-motion .bk-clients .marquee { overflow-x: auto; }
html.bk-reduce-motion .bk-clients .marquee-track { animation: none !important; }
html.bk-reduce-motion .bk-clients .marquee-track[aria-hidden="true"] { display: none; }
html.bk-motion-controlled:not(.bk-reduce-motion) .bk-clients .marquee { overflow-x: hidden; }
html.bk-motion-controlled:not(.bk-reduce-motion) .bk-clients .marquee-track { animation: bk-clients-marquee var(--speed, 50s) linear infinite; }
html.bk-motion-controlled:not(.bk-reduce-motion) .bk-clients .marquee.reverse .marquee-track { animation-direction: reverse; }
html.bk-motion-controlled:not(.bk-reduce-motion) .bk-clients .marquee-track[aria-hidden="true"] { display: flex; }