/* ==========================================================================
   Service — Logo Marquee (Flexible Content section, Variant 1)

   A dark, edge-to-edge band with an infinite horizontal logo strip.
   Seamless CSS-only loop: `.svc-logo-marquee-list` is rendered twice
   back-to-back inside `.svc-logo-marquee-track`, which animates
   translateX(-50%) — once the first copy has scrolled fully past, the
   second copy sits exactly where the first began, so the loop is
   continuous. No JS (same technique as the Hero Variant 1 trust marquee in
   assets/css/services/hero.css).

   Its own `.svc-logo-marquee-*` namespace, so it never touches the hero
   marquee or any other section variant.
   ========================================================================== */

.svc-logo-marquee {
  position: relative;
  padding: clamp(26px, 5vw, 46px) 0;
  background: #000000;
  overflow: hidden;
}

.svc-logo-marquee-title {
  margin: 0 0 clamp(16px, 3vw, 26px);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.svc-logo-marquee-viewport {
  width: 100%;
  overflow: hidden;
  /* Left/right fade. Duplicated -webkit- prop for older iOS Safari. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.svc-logo-marquee-track {
  display: flex;
  width: max-content;
  animation: svcLogoMarquee 38s linear infinite;
  will-change: transform;
  /* Smoother compositing on iOS. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.svc-logo-marquee:hover .svc-logo-marquee-track,
.svc-logo-marquee:focus-within .svc-logo-marquee-track {
  animation-play-state: paused;
}

.svc-logo-marquee--slow .svc-logo-marquee-track {
  animation-duration: 56s;
}

.svc-logo-marquee--fast .svc-logo-marquee-track {
  animation-duration: 24s;
}

.svc-logo-marquee-list {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6.5vw, 84px);
  margin: 0;
  padding: 0 clamp(40px, 6.5vw, 84px) 0 0;
  list-style: none;
  flex: 0 0 auto;
}

.svc-logo-marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(22px, 3.4vw, 34px);
}

.svc-logo-marquee-link {
  display: flex;
  align-items: center;
  height: 100%;
}

.svc-logo-marquee-logo {
  display: block;
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  /* Normalise every logo to a consistent mono-white on the dark band. */
  filter: brightness(0) invert(1);
  opacity: 0.62;
  transition: opacity 0.3s ease;
}

.svc-logo-marquee-link:hover .svc-logo-marquee-logo,
.svc-logo-marquee-link:focus-visible .svc-logo-marquee-logo {
  opacity: 1;
}

@keyframes svcLogoMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 640px) {
  .svc-logo-marquee-list {
    gap: 40px;
    padding-right: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Freeze the strip, same as the hero marquee does. */
  .svc-logo-marquee-track {
    animation: none;
  }
}