.home-brand-heading {
  padding: 48px 16px 24px;
  background: #fff;
  text-align: center;
}
.home-brand-heading h1 {
  margin: 0;
  color: #111827;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
}
.home-brand-heading h1 span { color: #ff1493; }
.brand-band {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid #f3f4f6;
  background: #fff;
  text-align: center;
}
.brand-band-label {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 16px 16px 8px;
}
.brand-band-label p {
  margin: 0 0 8px;
  color: #9ca3af;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.brand-slider {
  position: relative;
  display: flex;
  width: 100%;
  height: 176px;
  align-items: center;
  overflow: hidden;
}
.brand-slider::before,
.brand-slider::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  width: min(128px, 12vw);
  height: 100%;
  pointer-events: none;
}
.brand-slider::before { left: 0; background: linear-gradient(90deg, #fff, #fff0); }
.brand-slider::after { right: 0; background: linear-gradient(270deg, #fff, #fff0); }
.brand-track {
  display: flex;
  flex: none;
  width: max-content;
  height: 128px;
  align-items: center;
  --brand-gap: 32px;
  white-space: nowrap;
  animation: brand-marquee 60s linear infinite;
  will-change: transform;
}
.brand-run {
  display: flex;
  flex: none;
  height: 100%;
  align-items: center;
  gap: var(--brand-gap);
  padding-right: var(--brand-gap);
}
.brand-item {
  display: flex;
  width: 160px;
  height: 100%;
  flex: 0 0 160px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: #9ca3af;
  font-size: 14px;
}
.brand-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
}
.brand-item img[data-source-asset-missing] {
  color: #9ca3af;
  font: 500 14px/1.5 Poppins, Arial, sans-serif;
}
.brand-item:hover img { filter: grayscale(0); opacity: 1; }
.home-hero-track { height: 90vh; }
@keyframes brand-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (min-width: 640px) {
  .public-team-avatar { width: 128px; height: 128px; }
}
@media (min-width: 768px) {
  .home-brand-heading h1 { font-size: 36px; }
  .brand-band-label p { font-size: 16px; }
  .brand-slider { height: 184px; }
  .brand-track { height: 120px; --brand-gap: 64px; }
  .brand-item { width: 256px; flex-basis: 256px; }
}
@media (max-width: 767px) {
  .home-hero-track { height: 100dvh; }
}