/* Client logo band (markup from wavetec-site.php section 6): three rows of logos scrolling sideways,
   the middle row the other way. Each track holds the same strip twice and moves by half its width, so
   the loop is seamless. Flat: no cards, no shadows; the edges fade out instead of cutting off. */
body.wt-site .wt-logo-band-wrap {
  margin: 40px 0 8px;
  /* full-bleed: break out of the content column */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}
body.wt-site .wt-logo-band__link,
body.wt-site .wt-logo-band__link:hover {
  display: block;
  text-decoration: none;
}
body.wt-site .wt-logo-band {
  display: grid;
  gap: 18px;
  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);
}
body.wt-site .wt-logo-band__row {
  overflow: hidden;
}
body.wt-site .wt-logo-band__track {
  display: flex;
  width: max-content;
  animation: wt-logo-band var(--wt-band-dur, 140s) linear infinite;
  will-change: transform;
}
body.wt-site .wt-logo-band__row--reverse .wt-logo-band__track {
  animation-direction: reverse;
}
/* !important: Betheme's `#Content img { height: auto }` outranks any class selector. A definite height also
   matters before the image loads: at 0x0 a lazy image never counts as in view, so it never loads. */
body.wt-site .wt-logo-band__track img {
  display: block;
  flex: none;
  max-width: none !important;
  height: 68px !important; /* strip is 136px @2x: normal logos 56px, boosted ones up to 68px */
  width: auto !important;
  user-select: none;
}
/* Let people read a logo: hovering or focusing the band pauses every row */
body.wt-site .wt-logo-band:hover .wt-logo-band__track,
body.wt-site .wt-logo-band__link:focus-visible .wt-logo-band__track {
  animation-play-state: paused;
}
body.wt-site .wt-logo-band__link:focus-visible {
  outline: none;
  box-shadow: var(--wt-ring);
  border-radius: var(--wt-r-md);
}
@keyframes wt-logo-band {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  body.wt-site .wt-logo-band { gap: 12px; }
  body.wt-site .wt-logo-band__track img { height: 48px !important; }
}
/* Reduced motion: no movement; each row scrolls sideways by hand instead (second copy hidden) */
@media (prefers-reduced-motion: reduce) {
  body.wt-site .wt-logo-band { -webkit-mask-image: none; mask-image: none; }
  body.wt-site .wt-logo-band__row { overflow-x: auto; }
  body.wt-site .wt-logo-band__track { animation: none !important; transform: none; }
  body.wt-site .wt-logo-band__track img[aria-hidden] { display: none; }
}