/*
 * Mobile: stop horizontal pan / white gap beside fixed header.
 * body already has overflow-x:hidden in main.css; html often needs it too (esp. iOS).
 */
html {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

html,
body {
    overscroll-behavior-x: none;
}

.fs-text-md {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 24px
}

@media only screen and (max-width: 939px) {
    .fs-text-md-\@-mob {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -.01em;
        line-height: 24px
    }
}


.logo-ticker {
    overflow: hidden;
    padding: 24px 0 12px
}

@media only screen and (min-width: 940px) {
    .logo-ticker {
        padding: 30px 0 12px
    }
}

.logo-ticker__inner {
    position: relative
}

.logo-ticker__inner h3 {
    align-items: center;
    display: flex;
    height: 100%;
    left: 24px;
    position: absolute;
    top: 0;
    width: 164px;
    z-index: 1
}

@media screen and (min-width: 580px) {
    .logo-ticker__inner h3 {
        left: calc(19.95349px + .69767vw)
    }
}

@media screen and (min-width: 1440px) {
    .logo-ticker__inner h3 {
        left: 30px
    }
}

.logo-ticker.bgc-navy .logo-ticker__inner h3 {
    color: #fff
}

.logo-ticker__inner h3:after,
.logo-ticker__inner h3:before {
    content: "";
    height: 100%;
    position: absolute;
    top: 0
}

.logo-ticker__inner h3:after {
    background: linear-gradient(90deg, #fff 32.81%, transparent);
    left: 100%;
    width: 160px
}

.logo-ticker.bgc-navy .logo-ticker__inner h3:after {
    background: linear-gradient(90deg, #152c44 32.81%, transparent)
}

.logo-ticker.bgc-blue .logo-ticker__inner h3:after {
    background: linear-gradient(90deg, #dbf2ff 32.81%, transparent)
}

.logo-ticker__inner h3:before {
    background-color: #fff;
    right: 0;
    /* 100vw is wider than the layout when a vertical scrollbar exists — causes horizontal drag */
    width: 100%;
    min-width: 100%;
    z-index: -1
}

.logo-ticker.bgc-navy .logo-ticker__inner h3:before {
    background-color: #152c44
}

.logo-ticker.bgc-blue .logo-ticker__inner h3:before {
    background-color: #dbf2ff
}

@media only screen and (max-width: 939px) {
    .logo-ticker__inner h3 {
        display: none
    }
}

.logo-ticker__list {
    align-items: center;
    animation-duration: 24s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    display: inline-flex;
    left: 50%;
    list-style-type: none;
    position: relative;
    transform: translate3d(-33.333%, 0, 0);
    will-change: transform
}

.logo-ticker__list.instantiated {
    animation-name: scroller
}

@keyframes scroller {
    0% {
        transform: translate3d(-33.333%, 0, 0)
    }

    to {
        transform: translate3d(-66.666%, 0, 0)
    }
}

.logo-ticker__list li {
    padding: 0 23px
}

.logo-ticker__list li img {
    display: block;
    max-height: 54px;
    max-width: 120px;
    object-fit: contain
}

@media only screen and (min-width: 940px) {
    .logo-ticker__list li img {
        max-height: 70px;
        max-width: 160px
    }
}

/* News article featured image — fluid layout, no fixed 400px crop strip */
.blog-wrapper.news-wrapper .single-blog-post .post-featured-thumb--article {
    height: auto;
    min-height: 0;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background-color: #e9ecef;
}

.blog-wrapper.news-wrapper .single-blog-post .post-featured-thumb--article .post-featured-thumb__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 575.98px) {
    .blog-wrapper.news-wrapper .single-blog-post .post-featured-thumb--article {
        aspect-ratio: 4 / 3;
        border-radius: 8px;
    }
}

/* Right slide-in panel: never wider than viewport; logo scales inside */
.side_bar {
    width: min(450px, 100vw);
    box-sizing: border-box;
}

@media (max-width: 499.98px) {
    .side_bar {
        padding-left: 24px;
        padding-right: 24px;
    }

    .side_bar button {
        right: 24px;
        top: 24px;
    }
}

.side_bar .side-bar-logo {
    max-width: 100%;
}

.side_bar .side-bar-logo__img {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}