.brand-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    border-block: 1px solid rgba(255,255,255,.08);
    background: #0b0b0b;
}
.brand-marquee::before,
.brand-marquee::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: clamp(40px,7vw,90px);
    pointer-events: none;
    content: '';
}
.brand-marquee::before { left: 0; background: linear-gradient(90deg,#0b0b0b,transparent); }
.brand-marquee::after { right: 0; background: linear-gradient(270deg,#0b0b0b,transparent); }
.brand-marquee__track {
    display: flex;
    width: max-content;
    animation: brand-scroll 32s linear infinite;
    will-change: transform;
}
.brand-marquee--bottom .brand-marquee__track { animation-delay: -16s; }
.brand-marquee--catalog .brand-marquee__track { animation-delay: -8s; }
.brand-marquee__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(28px,4vw,52px);
    padding-right: clamp(28px,4vw,52px);
    white-space: nowrap;
}
.brand-marquee span {
    position: relative;
    color: #f5f5f5;
    font-family: Georgia, serif;
    font-size: clamp(.72rem,1.15vw,.9rem);
    font-weight: 800;
    letter-spacing: clamp(.12em,.25vw,.22em);
    text-transform: uppercase;
}
.brand-marquee span::after {
    position: absolute;
    top: 50%;
    right: calc(clamp(28px,4vw,52px) / -2 - 4px);
    transform: translateY(-50%);
    color: var(--color-orange);
    content: '•';
}
@keyframes brand-scroll { to { transform: translateX(-50%); } }

@media (max-width: 768px) {
    .brand-marquee { padding-block: 8px; }
    .brand-marquee__track { animation-duration: 24s; }
    .brand-marquee__group { gap: 27px; padding-right: 27px; }
    .brand-marquee span { font-size: .66rem; letter-spacing: .14em; }
    .brand-marquee span::after { right: -17px; }
}