/* Partner logo marquee. Extracted from home.css 2026-09-20 so the guides page
   can carry it too - William moved the strip off the homepage and onto
   /guides, above "Available now". Markup: templates/partials/partner-logos.html,
   behaviour: partner-logos.js. */
/* ---------- partner logos ----------
   Horizontal marquee. The track holds the set twice and shifts by exactly
   half, so the loop is seamless as long as one set is wider than the
   viewport - with this many logos it always is.
   Logos are rendered white by filter rather than shipped white: the source
   art is full-colour, and several brands (Uber, Hotels.com) are dark enough
   to vanish against this background otherwise. */
.lg { position: relative; z-index: 1; width: 100%; padding: 54px 0 58px; }
.lg-head { text-align: center; padding: 0 22px; margin-bottom: 28px; }
.lg-head h2 { font-family: 'Sora', sans-serif; font-weight: 700;
              font-size: clamp(15px, 4vw, 19px); letter-spacing: .01em;
              color: var(--text); margin: 0 0 7px; }
.lg-head p { color: var(--muted); font-size: clamp(12.5px, 3.4vw, 13.5px); margin: 0; }

.lg-vp { position: relative; overflow: hidden; }
/* Default (and no-JS / reduced-motion) state: every logo visible, wrapped and
   centred. JS switches it to a single scrolling row. Motion is driven by
   rAF rather than a CSS animation because the page-wide reduced-motion rule
   below kills CSS animations outright - which would otherwise leave two
   thirds of the logos clipped off-screen permanently. */
.lg-track { display: flex; flex-wrap: wrap; align-items: center;
            justify-content: center; gap: 4px 0; }
.lg-track.is-marquee { flex-wrap: nowrap; width: max-content;
                       justify-content: flex-start; gap: 0; will-change: transform; }
.lg-vp.is-marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.lg-item { flex: none; display: flex; align-items: center; justify-content: center;
           padding: 0 26px; height: 46px; }
.lg-item img {
  height: 27px; width: auto; max-width: 145px; object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .62; transition: opacity .2s ease;
}
.lg-item:hover img { opacity: 1; }
/* square marks read visually larger than wordmarks at the same height */
.lg-item img.sq { height: 22px; }