/* A single sprite preserves every supplied logo without altering the artwork. */
.client-logos { position: relative; padding: 32px 0 24px; background: transparent; }
.client-logo-heading { margin: 0 0 32px; text-align: center; font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: -.035em; }
.client-logo-window { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, #0002 8%, #000 25%, #000 75%, #0002 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #0002 8%, #000 25%, #000 75%, #0002 92%, transparent 100%); }
.client-logo-track { display: flex; width: max-content; animation: client-logo-scroll 150s linear infinite !important; }
.client-logo-group { display: flex; flex-shrink: 0; align-items: center; gap: 48px; padding-right: 48px; }
.client-logo { display: block; flex: 0 0 200px; width: 200px; height: 94px; background-image: url('../assets/all-logos-white-transparent.png'); background-repeat: no-repeat; background-size: 864px 540px; background-position: var(--logo-x) var(--logo-y); opacity: .9; }
@keyframes client-logo-scroll { to { transform: translateX(-50%); } }

.worldwide-section { overflow: hidden; padding-block: 0; background: transparent; }
.worldwide-layout { position: relative; display: flex; align-items: center; min-height: 660px; }
.worldwide-copy { position: relative; z-index: 1; width: 46%; margin-left: 14%; padding-block: 70px; }
.worldwide-copy h2 { font-size: clamp(2.4rem, 4.5vw, 4.4rem); line-height: 1.08; font-weight: 600; letter-spacing: -.055em; margin-top: 24px; text-wrap: balance; text-shadow: 0 3px 24px #0009; }
.worldwide-copy .gradient-text { display: block; }
.worldwide-art { position: absolute; width: min(85%, 960px); aspect-ratio: 3 / 2; right: -8%; top: 50%; transform: translateY(-50%); pointer-events: none; background: url('../assets/wildcolour-worldwide-globe.png') center / contain no-repeat; mix-blend-mode: screen; mask-image: radial-gradient(ellipse at center, #000 48%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, transparent 74%); }
@media (max-width: 700px) {
  .client-logo-group { gap: 24px; padding-right: 24px; }
  .worldwide-layout { min-height: 650px; align-items: flex-start; }
  .worldwide-copy { width: 100%; margin-left: 0; padding-top: 42px; padding-bottom: 0; text-align: center; }
  .worldwide-copy h2 { max-width: 480px; margin-inline: auto; font-size: clamp(2.5rem, 9vw, 3.5rem); }
  .worldwide-copy .gradient-text { display: block; }
.worldwide-art { width: 150%; right: -25%; top: auto; bottom: 0; transform: none; }
}




.worldwide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; }
.worldwide-video.is-playing { opacity: 1; }