.brands { --brands-gap: clamp(.8rem, 1.2vw, 1.15rem); --brands-speed: 70s; --logo-scale: 1.02; display: grid; grid-template-columns: minmax(0, 3.1fr) minmax(0, 8.9fr); align-items: center; gap: 1.4rem clamp(2rem, 4vw, 4rem); margin-top: clamp(3rem, 5vw, 5.5rem); padding-top: clamp(1.8rem, 2.8vw, 2.8rem); border-top: 1px solid var(--line); }

.brands__intro { min-width: 0; }
.brands__title { font-size: clamp(1.02rem, 1.3vw, 1.3rem); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; color: var(--gold-lit); }   /* #f0b21a — 7.25:1 on the dark surface */
.brands__note { margin-top: .55rem; color: var(--on-dark-body); font-size: .8rem; line-height: 1.6; }

.brands__marquee { min-width: 0; margin-right: calc(-1 * var(--gutter)); overflow: hidden; border-radius: 2px; padding-block: .35rem; }
.brands__marquee:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.brands__track { display: flex; flex-wrap: wrap; }
.brands__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--brands-gap); padding-right: var(--brands-gap); }
.brands__list--clone { display: none; }
/* The ivory label: one height for every brand, width follows the logo. */
.brands__item { flex: none; display: grid; place-items: center; height: 4.9rem; padding-inline: clamp(1.2rem, 1.6vw, 1.6rem); border-radius: 6px; background: var(--surface-light); box-shadow: inset 0 0 0 1px rgb(36 44 37 / .06), 0 .6rem 1.4rem -1rem rgb(0 0 0 / .55); }
.brands__item img { width: calc(var(--w) * var(--logo-scale)); height: auto; max-width: none; }

@media (prefers-reduced-motion: no-preference) {
  .has-js .brands__marquee { -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 90%, transparent); }
  .has-js .brands__track { flex-wrap: nowrap; width: max-content; animation: brands-scroll var(--brands-speed) linear infinite; will-change: transform; }
  .has-js .brands__list { flex-wrap: nowrap; }
  .has-js .brands__list--clone { display: flex; }
  .brands__marquee:focus-visible .brands__track,
  .brands__marquee.is-paused .brands__track,
  .brands__marquee.is-offscreen .brands__track { animation-play-state: paused; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .brands__marquee:hover .brands__track { animation-play-state: paused; }
}
@keyframes brands-scroll { to { transform: translate3d(-50%, 0, 0); } }

@media (max-width: 63.99em) {
  .brands { grid-template-columns: 1fr; }
  .brands__marquee { margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); }
}
@media (max-width: 63.99em) and (prefers-reduced-motion: no-preference) {
  .has-js .brands__marquee { padding-left: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
}
@media (max-width: 47.99em) {
  /* On phones the last principle already closes with a full-width rule; a
     second rule right under it read as a double line. */
  .brands { --brands-gap: .7rem; --brands-speed: 56s; --logo-scale: .86; gap: 1rem; margin-top: 2.2rem; padding-top: 0; border-top: 0; }
  .brands__title { font-size: 1rem; }
  .brands__note { font-size: .76rem; margin-top: .35rem; }
  .brands__item { height: 4.1rem; padding-inline: 1rem; }
}