/* ── Trusted-by canonical (liquid chrome) ──────────────────────────
   Single source of truth for the trusted-by strip on every BD page.
   Markup contract:
   <section id="brand-strip" aria-label="Trusted by">
     <p class="strip-label">Trusted by</p>
     <ul class="brands-flex" role="list" style="list-style:none">
       <li class="strip-name chrome-name">Adidas</li>
       ...
     </ul>
   </section>
   Mirrors events.html v3 chrome effect — keep in sync if updated. */

#brand-strip {
  background: var(--dark, #0B1220);
  padding: 14px 52px 20px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
#brand-strip::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 200% at 12% 55%, rgba(14,165,233,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 70% 220% at 88% 45%, rgba(2,132,199,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 80% 120% at 50% 100%, rgba(14,165,233,0.05) 0%, transparent 70%);
  pointer-events: none;
}
#brand-strip .strip-label {
  text-align: center;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin: 0 0 14px;
}
#brand-strip .brands-flex {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 0; max-width: 1280px; margin: 0 auto;
  padding: 0; list-style: none;
  position: relative; z-index: 2;
  white-space: nowrap;
}
#brand-strip .strip-name {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-size: 16px; font-weight: 700;
  letter-spacing: -.01em;
  padding: 6px 13px; flex-shrink: 0;
  display: inline-block;
}
.chrome-name {
  position: relative;
  background: linear-gradient(
    100deg,
    #2a2f37 0%,
    #525a66 14%,
    #8a93a0 30%,
    #b8c0cc 42%,
    #e6d4c8 46%,
    #f4f6f8 50%,
    #cadef0 54%,
    #b8c0cc 58%,
    #8a93a0 70%,
    #525a66 86%,
    #2a2f37 100%
  );
  background-size: 380% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  animation: chrome-flow 8s linear infinite, chrome-halo 8s ease-in-out infinite;
  will-change: background-position, filter;
}
@keyframes chrome-flow {
  from { background-position: 130% 0; }
  to   { background-position: -110% 0; }
}
@keyframes chrome-halo {
  0%, 46%, 54%, 100% {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  }
  50% {
    filter:
      drop-shadow(0 0 7px rgba(255,250,235,0.30))
      drop-shadow(0 0 14px rgba(180,210,255,0.16))
      drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  }
}
.chrome-name:nth-child(1)  { animation-delay: 0s, 0s; }
.chrome-name:nth-child(2)  { animation-delay: -0.20s, -0.20s; }
.chrome-name:nth-child(3)  { animation-delay: -0.40s, -0.40s; }
.chrome-name:nth-child(4)  { animation-delay: -0.60s, -0.60s; }
.chrome-name:nth-child(5)  { animation-delay: -0.80s, -0.80s; }
.chrome-name:nth-child(6)  { animation-delay: -1.00s, -1.00s; }
.chrome-name:nth-child(7)  { animation-delay: -1.20s, -1.20s; }
.chrome-name:nth-child(8)  { animation-delay: -1.40s, -1.40s; }
.chrome-name:nth-child(9)  { animation-delay: -1.60s, -1.60s; }
.chrome-name:nth-child(10) { animation-delay: -1.80s, -1.80s; }
.chrome-name:nth-child(11) { animation-delay: -2.00s, -2.00s; }
.chrome-name:nth-child(12) { animation-delay: -2.20s, -2.20s; }
@media (prefers-reduced-motion: reduce) {
  .chrome-name {
    animation: none;
    background-position: 50% 0;
  }
}
@media (max-width: 720px) {
  #brand-strip { padding: 16px 20px 24px; }
  #brand-strip .strip-name { font-size: 13px; padding: 4px 9px; }
}