#brands.brand-showcase {
    --brand-surface: #00aff0;
    --brand-ink: #fff;
    --brand-muted: #f2fbff;
    --brand-line: #ffffff40;
    --brand-accent: #fff;
    padding-block: 1.5rem 5rem;
    padding-inline: 0;
    scroll-margin-top: 6rem;
}
#brands > .container { width: 100%; max-width: none; padding-inline: 0; }
#brands .brand-showcase-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-block: 1px solid #ffffff4d;
    background: radial-gradient(ellipse at 14% 0, #42d5f54d, transparent 60%), linear-gradient(135deg, #00b8e8 0%, var(--brand-surface) 45%, #0087c4 100%);
    box-shadow: inset 0 1px 0 #ffffff33;
    color: var(--brand-ink);
}
#brands .brand-showcase-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: linear-gradient(#000, transparent 85%);
}
#brands .brand-showcase-panel::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 25%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffffffb3, transparent);
    box-shadow: 0 0 28px 3px #ffffff26;
    pointer-events: none;
}
#brands .brand-showcase-heading {
    padding: 3.1rem 2rem 2.2rem;
    text-align: center;
    text-shadow: 0 1px 2px #005781a6;
}
#brands .brand-showcase-eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1rem;
    color: var(--brand-accent);
    font-size: calc(var(--bs-body-font-size) * .75);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
[dir="rtl"] #brands .brand-showcase-eyebrow { letter-spacing: 0; }
#brands .brand-showcase-eyebrow > span {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    transform: rotate(45deg);
    box-shadow: 0 0 12px #ffffff33;
}
#brands #brands-title {
    margin: 0;
    color: var(--brand-ink);
    font-size: clamp(calc(var(--bs-body-font-size) * 1.7), 3.1vw, calc(var(--bs-body-font-size) * 2.6));
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.5;
    text-wrap: balance;
}
#brands #brands-title > span { color: var(--brand-accent); font-weight: 700; }
[dir="rtl"] #brands #brands-title { letter-spacing: 0; line-height: 1.6; }
#brands .brand-showcase-description {
    margin: .75rem 0 0;
    color: var(--brand-muted);
    font-size: var(--bs-body-font-size);
    font-weight: 600;
    line-height: 1.9;
    text-wrap: balance;
}
#brands .brand-showcase-rail {
    position: relative;
    padding-block: .65rem;
    background: linear-gradient(90deg, #ffffff00, #ffffff0d 50%, #ffffff00);
}
#brands .brand-showcase-rail::before,
#brands .brand-showcase-rail::after {
    content: "";
    position: absolute;
    inset-inline: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffffff40 20%, #ffffff40 80%, transparent);
}
#brands .brand-showcase-rail::before { top: 0; }
#brands .brand-showcase-rail::after { bottom: 0; }
#brands .brand-showcase-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    direction: ltr;
    scrollbar-width: thin;
    scrollbar-color: #ffffff99 #009bd5;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
#brands .brand-showcase-track:focus-visible { outline: 2px solid #07334c; outline-offset: -3px; mask-image: none; }
#brands.brand-showcase-ready .brand-showcase-track { display: block; overflow: hidden; }
#brands .js-marquee { display: flex; align-items: center; }
#brands .brand-showcase-logo {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 12rem;
    width: 12rem;
    height: 6.7rem;
    vertical-align: middle;
}
#brands .brand-showcase-logo::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    height: 1.25rem;
    background: var(--brand-line);
}
#brands .brand-showcase-logo img {
    width: 8.2rem;
    height: 3.3rem;
    padding: 0;
    object-fit: contain;
    opacity: .9;
    transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}
#brands .brand-showcase-logo:hover img { opacity: 1; transform: translateY(-3px); filter: drop-shadow(0 5px 14px #00598426); }
#brands .brand-showcase-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7rem;
    min-height: 4.5rem;
    padding: 1.1rem 4.5rem;
    position: relative;
}
#brands .brand-showcase-footer p {
    margin: 0;
    color: var(--brand-muted);
    font-size: calc(var(--bs-body-font-size) * .8125);
    font-weight: 600;
    text-shadow: 0 1px 2px #005781b3;
    line-height: 1.8;
    letter-spacing: .015em;
}
#brands .brand-showcase-signature { display: flex; gap: 3px; align-items: center; direction: ltr; }
#brands .brand-showcase-signature span { width: 3px; height: 8px; border-radius: 1px; background: var(--brand-ink); transform: skewX(-20deg); }
#brands .brand-showcase-signature span:nth-child(2) { height: 13px; }
#brands .brand-showcase-signature span:nth-child(3) { height: 18px; }
#brands .brand-showcase-motion {
    position: absolute;
    inset-inline-end: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid #ffffff66;
    border-radius: 50%;
    color: var(--brand-ink);
    background: #0077aacc;
    transition: background .2s, border-color .2s;
}
#brands .brand-showcase-motion[hidden] { display: none; }
#brands .brand-showcase-motion:hover { background: #006a9f; border-color: #ffffffb3; }
#brands .brand-showcase-motion:focus-visible { outline: 2px solid #07334c; outline-offset: 4px; }
#brands .brand-showcase-motion svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#brands .brand-motion-play, #brands.brand-showcase-paused .brand-motion-pause { display: none; }
#brands.brand-showcase-paused .brand-motion-play { display: block; }
#brands.brand-showcase-paused .js-marquee-wrapper { animation-play-state: paused !important; }
@media (max-width: 767px) {
    #brands.brand-showcase { padding-block: 1rem 3.5rem; }
    #brands .brand-showcase-heading { padding: 2.5rem 1.4rem 1.75rem; }
    #brands .brand-showcase-eyebrow { font-size: calc(var(--bs-body-font-size) * .75); }
    #brands #brands-title { font-size: calc(var(--bs-body-font-size) * 1.75); }
    #brands #brands-title > span { display: block; }
    #brands .brand-showcase-description { font-size: calc(var(--bs-body-font-size) * .9375); }
    #brands .brand-showcase-logo { width: 10rem; flex-basis: 10rem; height: 6rem; }
    #brands .brand-showcase-logo img { width: 7rem; height: 2.8rem; }
    #brands .brand-showcase-footer { gap: .6rem; padding-inline: 3.5rem; }
    #brands .brand-showcase-footer p { max-width: 14rem; text-align: center; }
    #brands .brand-showcase-motion { inset-inline-end: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
    #brands.brand-showcase-ready .brand-showcase-track { overflow-x: auto; mask-image: none; }
    #brands .js-marquee-wrapper { animation: none !important; transform: none !important; width: max-content !important; }
    #brands .js-marquee { margin: 0 !important; }
    #brands .js-marquee ~ .js-marquee { display: none; }
    #brands .brand-showcase-logo img { transition: none; }
    #brands .brand-showcase-logo:hover img { transform: none; }
    #brands .brand-showcase-motion { display: none; }
}