/* Styled like .banner-slider__eyebrow (bold, letter-spaced uppercase, no
   line-accent), but orange instead of blue for this section. */
.logos-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-dark, #E56910);
    margin: 0 0 14px;
}
.logos img { max-height: 100px; max-width: 150px; height: auto; width: auto; margin:0 auto; }
.slick-next:before { content: '\203A' !important; font-size: 60px; opacity: 1 !important; color: rgba(255, 255, 255, 0.618); transition: all 0.3s ease; }
.slick-prev:before { content: '\2039' !important; font-size: 60px; opacity: 1 !important; color: rgba(255, 255, 255, 0.618); transition: all 0.3s ease; }
.logo-carousel-shell.is-active {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}
.logo-carousel-shell.is-active .logos {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: clamp(1rem, 6vw, 5.5rem);
    padding-right: clamp(1rem, 6vw, 5.5rem);
}
/* Real overlay elements rather than a mask-image/pseudo-element gradient —
   more reliable here since the carousel track is GPU-composited (Slick
   moves it with translate3d), which in testing suppressed a soft mask
   gradient painted on an ancestor. The overlay's width has to clear the
   .logos side padding above or it only ever fades empty space, never a
   logo. */
.logo-carousel-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(6rem, 13vw, 13rem);
    z-index: 3;
    pointer-events: none;
}
.logo-carousel-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--gray-light, #F5F8FA) 0%, var(--gray-light, #F5F8FA) 25%, rgba(245,248,250,0) 100%);
}
.logo-carousel-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--gray-light, #F5F8FA) 0%, var(--gray-light, #F5F8FA) 25%, rgba(245,248,250,0) 100%);
}
.logo-carousel-shell.is-active .logo-carousel-item {
    text-align: center;
}
.logo-carousel-shell.is-active .logo-carousel-item img {
    display: inline-block;
}
.logo-carousel-shell.is-active .slick-track {
    display: flex;
    align-items: center;
}
@media screen and ( max-width:768px ) {
    .logos img { width:80%; height:auto; }
    .logo-carousel-fade {
        width: 2.5rem;
    }
}