/* ==========================================================================
   SIGMA BROOKS — Marquee (logo strips)
   <div class="sbmq" data-sbmq data-direction="rtl|ltr" data-speed="40"><ul class="sbmq__track">…</ul></div>
   js/marquee.js clones the items to fill the loop; without JS the list simply wraps.
   Elementor: HTML widget with this markup, or the Pro "Loop Carousel" set to
   continuous autoplay (speed 0 transition, linear) as a no-code alternative.
   ========================================================================== */

.sbmq {
  --sbmq-gap: 0px;
  --sbmq-fade: 80px;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sbmq-fade), #000 calc(100% - var(--sbmq-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--sbmq-fade), #000 calc(100% - var(--sbmq-fade)), transparent 100%);
}
.sbmq__track { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sbmq-gap); }
.sbmq.is-ready .sbmq__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content;
  animation: sbmq-rtl var(--sbmq-duration, 40s) linear infinite; will-change: transform; }
.sbmq.is-ready[data-direction="ltr"] .sbmq__track { animation-name: sbmq-ltr; }
.sbmq.is-ready:hover .sbmq__track,
.sbmq.is-ready:focus-within .sbmq__track { animation-play-state: paused; }
.sbmq__track > li { flex: 0 0 auto; }

@keyframes sbmq-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes sbmq-ltr { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .sbmq.is-ready .sbmq__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .sbmq [data-sbmq-clone] { display: none; }
  .sbmq { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Trusted-by items (hero) ---------- */
.sbhero-trust .sbmq { --sbmq-fade: 60px; margin-inline: calc(var(--sbmq-fade) * -1); }
.sbhero-trust .sbmq__track > li { padding: 4px 48px; border-left: 1px solid #D5DDE8; font: 700 1.375rem/1 var(--sb-font-heading); font-stretch: 100%; letter-spacing: -.01em; color: #4B5A6E; white-space: nowrap; opacity: .85; transition: opacity .2s, color .2s; }
.sbhero-trust .sbmq__track > li:hover { opacity: 1; color: var(--sb-navy); }
@media (max-width: 767px) { .sbhero-trust .sbmq__track > li { padding: 4px 28px; font-size: 1.0625rem; } }

/* ---------- Platform logos ---------- */
.sb-strip .sbmq { --sbmq-fade: 100px; }
.sbpl { display: flex; align-items: center; gap: 12px; padding: 10px 36px; white-space: nowrap; font: 600 1.0625rem/1 var(--sb-font-body); color: #334155; }
.sbpl__logo { width: 34px; height: 34px; flex-shrink: 0; background: var(--brand, #334155);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.sbpl__icon { width: 34px; text-align: center; font-size: 1.75rem; color: var(--brand, #334155); flex-shrink: 0; }
.sbpl { filter: grayscale(.15); opacity: .92; transition: opacity .2s, filter .2s, transform .2s; }
.sbpl:hover { filter: none; opacity: 1; transform: translateY(-2px); }
@media (max-width: 767px) { .sbpl { padding: 8px 22px; font-size: .9375rem; } .sbpl__logo, .sbpl__icon { width: 28px; height: 28px; font-size: 1.4rem; } }