/* Quiet brand ribbon: one composited translation, no animated filters. */
.brand-ribbon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 110px;
  border-block: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, #202324, #191c1d 75%, #1c1f20);
}
.brand-ribbon::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 15%, #696d6d55 50%, transparent 85%);
}
.brand-ribbon__viewport {
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 88%, transparent);
}
.brand-ribbon__track { display: flex; width: 100%; height: 100%; }
.brand-ribbon__group {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  padding: 0 40px;
  margin: 0;
  list-style: none;
}
.brand-ribbon__item { display: grid; flex: 1; min-width: 0; place-items: center; }
.brand-ribbon__item img {
  display: block;
  width: 52px;
  height: 46px;
  object-fit: contain;
  opacity: .62;
  filter: grayscale(1);
  transition: opacity .3s ease;
}
.brand-ribbon__item--audi img { width: 88px; height: 40px; }
.brand-ribbon__item--mercedes-benz img,
.brand-ribbon__item--audi img { filter: grayscale(1) invert(.88); }
.brand-ribbon__item--bmw img { filter: grayscale(1) brightness(1.6); }
.brand-ribbon__item--porsche img { height: 51px; }
.brand-ribbon__item:hover img { opacity: .92; }
.brand-ribbon__group[aria-hidden], .brand-ribbon__item[aria-hidden] { display: none; }
.brand-ribbon.is-motion-ready .brand-ribbon__track {
  width: max-content;
  animation: brand-ribbon-slide 100s linear infinite;
  animation-play-state: paused;
}
.brand-ribbon.is-motion-ready .brand-ribbon__group {
  display: flex;
  flex: 0 0 auto;
  width: max(100vw, 1120px);
  padding: 0;
}
.brand-ribbon.is-motion-ready .brand-ribbon__item[aria-hidden] { display: grid; }
.brand-ribbon.is-playing .brand-ribbon__track { animation-play-state: running; }
.brand-ribbon:focus-within .brand-ribbon__track { animation-play-state: paused; }
.brand-ribbon__toggle {
  position: absolute;
  z-index: 1;
  right: clamp(6px, 1.3vw, 22px);
  top: 50%;
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #ffffff18;
  border-radius: 50%;
  background: #1b1e1fd9;
  color: #a5acab;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.brand-ribbon.is-motion-ready .brand-ribbon__toggle { display: grid; place-items: center; }
.brand-ribbon__toggle:hover { border-color: #ffffff50; color: #eee; }
.brand-ribbon__toggle:focus-visible { outline: 2px solid #e84747; outline-offset: 3px; }
.brand-ribbon__toggle span { width: 9px; height: 11px; border-inline: 2px solid currentColor; }
.brand-ribbon__toggle[aria-pressed="true"] span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border: 6px solid transparent;
  border-right: 0;
  border-left: 8px solid currentColor;
}
@keyframes brand-ribbon-slide { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) {
  .brand-ribbon:hover .brand-ribbon__track { animation-play-state: paused; }
}
@media (max-width: 560px) {
  .brand-ribbon { height: 94px; }
  .brand-ribbon__item img { height: 40px; width: 44px; }
  .brand-ribbon__item--audi img { width: 75px; }
  .brand-ribbon__item--porsche img { height: 46px; }
  .brand-ribbon__group { padding: 0 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-ribbon.is-motion-ready .brand-ribbon__track { width: 100%; animation: none; transform: none; }
  .brand-ribbon.is-motion-ready .brand-ribbon__group { flex: 0 0 100%; width: 100%; padding: 0 15px; }
  .brand-ribbon.is-motion-ready .brand-ribbon__group[aria-hidden],
  .brand-ribbon.is-motion-ready .brand-ribbon__item[aria-hidden],
  .brand-ribbon.is-motion-ready .brand-ribbon__toggle { display: none; }
  .brand-ribbon__item img { transition: none; }
}