.layout-banner-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.no-pad {
    padding: 0 !important;
}

.small-font {
    font-size: 16px !important;
    font-style: normal;
    font-weight: 600;
    line-height: 24px !important;
    text-transform: uppercase;
}

.layout-banner-image {
    flex: 0 1 626px;
    max-width: 626px;
    width: 100%;
}

.layout-info-wrapper {
    flex: 1 1 50%;
    min-width: 300px;
    align-content: flex-end;
}

.layout-banner-content {
    gap: 20px;
}

.layout-banner-cards {
    overflow: hidden;
    margin-right: calc(-50vw + 60% - var(--bs-gutter-x, 0.75rem));
    padding-right: var(--bs-gutter-x, 0.75rem);
}

.layout-card {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 312px;
    max-width: 410px;
    flex-shrink: 0;
}

.layout-card.has-image {
    padding: 0;
    max-width: 248px;
    min-width: min-content;
    gap: 0;
}

.layout-card.has-image .layout-card-image {
    width: 100%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.layout-card.has-image .layout-card-image img {
    width: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.layout-card.has-image .svg-has-image {
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.layout-card.has-image:hover .svg-has-image {
    opacity: 1;
}

.layout-card.has-image .layout-card-title {
    font-size: 20px;
    line-height: 24px;
    padding-inline: 20px;
    padding-top: 20px;
}

.layout-card.has-image .layout-card-title p {
    line-height: 24px;
    margin-bottom: 10px;
}

.layout-card.has-image .layout-card-text {
    padding-inline: 20px;
    padding-bottom: 20px;
}

.layout-card.numbers-variation {
    max-width: 411px;
}

.layout-card.numbers-variation .layout-card-title {
    color: var(--bs-black);
    font-family: var(--font-secondary);
    font-size: 28px;
    font-style: normal;
    font-weight: 800;
    line-height: 32px;
    text-transform: uppercase;
}

.layout-card-text ul {
    margin-left: 0;
    list-style: none;
    padding-left: 0;
}

.layout-card-text li {
    position: relative;
    padding-left: 20px;
}

.layout-card-text li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Cpath d='M6.29738 3.64457C6.14189 3.72732 5.99028 3.79878 5.84257 3.85896C5.69485 3.91914 5.54325 3.96427 5.38776 3.99436C5.69874 4.05454 6.00194 4.17489 6.29738 4.35543L8 5.3371L7.16035 6.67983L5.45773 5.69817C5.14674 5.53268 4.89796 5.35214 4.71137 5.15656C4.80467 5.42736 4.85131 5.71697 4.85131 6.02539V8H3.14869V6.04796C3.14869 5.88999 3.15646 5.73578 3.17201 5.58533C3.19534 5.43489 3.23032 5.29196 3.27697 5.15656C3.1759 5.26187 3.06317 5.35966 2.93878 5.44993C2.81438 5.53267 2.68222 5.61542 2.54227 5.69817L0.83965 6.65726L0 5.31453L1.70262 4.35543C2.00583 4.18242 2.30515 4.06206 2.60058 3.99436C2.45287 3.97179 2.30126 3.93042 2.14577 3.87024C1.99806 3.80254 1.85034 3.72732 1.70262 3.64457L0 2.6629L0.83965 1.30888L2.54227 2.30183C2.85326 2.46732 3.10204 2.64786 3.28863 2.84344C3.19534 2.57264 3.14869 2.28303 3.14869 1.97461V0H4.85131V1.95204C4.85131 2.11001 4.83965 2.26422 4.81633 2.41467C4.80078 2.56511 4.76968 2.70804 4.72303 2.84344C4.8241 2.73813 4.93683 2.6441 5.06122 2.56135C5.18562 2.47109 5.31778 2.38458 5.45773 2.30183L7.16035 1.33145L8 2.68547L6.29738 3.64457Z' fill='%23ABABAB'/%3E%3C/svg%3E");
}

.layout-banner-cards-track {
    display: flex;
    gap: 8px;
    transition: transform 0.3s ease-in-out;
}

/* Carousel Navigation Arrows */
.carousel-arrow {
    transform: translateY(-50%);
    background: #FFFFFF;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


.carousel-arrow.prev {
    left: -20px;
}

.carousel-arrow.prev svg {
    transform: rotate(180deg);
}


.carousel-arrow svg {
    width: 20px;
    height: 20px;
}

/* Carousel Indicators */
.carousel-indicators {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
    position: relative;
}

.carousel-indicator {
    width: 40px;
    height: 4px;
    background: var(--bs-neutral);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    padding: 0;
    border-radius: 2px;
}

.carousel-indicator.active {
    background: var(--bs-black);
}

.carousel-indicator:hover {
    background: var(--bs-black);
}

.full-width {
    width: 100%;
}

.half {
    width: 50%;
}

@media (max-width: 991px) {
    .carousel-arrow {
        display: none;
    }

    .half {
        width: 100%;
    }
}


.layout-banner-variation {
    background-color: var(--bs-accent-500);
    min-width: 626px;
    width: 626px;
    min-height: 312px;
    height: 312px;
    position: relative;
}

.variation-wrapper {
    padding-bottom: 32px;
    padding-left: 32px;
    justify-content: flex-end;
    width: 50%;
}

.variation-image {
    display: flex;
    justify-content: flex-end;
    min-width: 265px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.variation-cta {
    text-decoration: none;
    background-color: var(--bs-secondary-500);
    padding: 12px 32px;
    color: var(--bs-white);
    text-transform: uppercase;
    text-decoration: none;
}

.variation-cta a {
    color: var(--bs-white);
    text-decoration: none !important;
}

.layout-banner-mobile-variation {
    background-color: var(--bs-accent-500);
    height: 256px;
    margin-top: 24px;
}

.variation-mobile-image {
    width: 50%;
    display: flex;
    justify-content: end;
    align-items: flex-end;
}

.variation-mobile-image img {
    max-height: 202px;
}

.arrow-nav {
    top: 40%;
}

.carousel-arrow {
    background-color: var(--bs-main-500);
}

/* Variations of Cards */
.normal-variant {
    
}

/* Scoped to desktop only — below 992px Swiper's own computed slide width needs to win instead, this !important was capping the card and hiding the mobile peek. */
@media (min-width: 993px) {
    .dynamic-variant {
        max-width: 303px !important;
    }
}

.dynamic-variant .layout-card-title {
    font-size: 23px;
    line-height: 1.3;
    margin-bottom: 0;
}

/* Image cards: take full width of the slide */
.layout-banner-cards-wrapper .layout-card.has-image {
    max-width: none;
    width: 100%;
}

/* Fixes swiper overflow-x on mobile */
.layout-banner-cards-wrapper.swiper {
    overflow: hidden; /* avoids external horizontal scroll */
    width: 100%;
}

.layout-banner-cards-wrapper .swiper-wrapper {
    box-sizing: border-box;
    padding-right: 1px; /* avoids a pixel gap */
}

.layout-banner-cards-wrapper .swiper-slide .numbers-variation {
    flex-shrink: 0;
    width: auto; /* required for freeMode */
    max-width: 411px; /* keeps a slide from overflowing the viewport */
}

.layout-banner-cards-wrapper .layout-card {
    /* align-self instead of height:100% — percentage height against .swiper-wrapper's intrinsic height is ambiguous and Safari doesn't stretch it like Chrome does. */
    height: auto;
    align-self: stretch;
}

/* Long-content cards: on desktop, bound the description and let it scroll vertically (on .layout-card-text, not .layout-card, since a flex card's max-height isn't a "definite" height) so a single long card can't stretch the whole align-self:stretch row; desktop-only since mobile cards grow freely and an inner scroll would fight the horizontal swipe. */
@media (min-width: 993px) {
    .layout-banner-cards-wrapper .layout-card > .layout-card-icon,
    .layout-banner-cards-wrapper .layout-card > .layout-card-image,
    .layout-banner-cards-wrapper .layout-card > .layout-card-title {
        flex-shrink: 0;
    }

    /* Top/bottom breathing room lives on this non-scrolling wrapper, not on .layout-card-text (the scrolling element), so it stays always-visible instead of only appearing once scrolled to the end. */
    .layout-banner-cards-wrapper .layout-card > .layout-card-text-wrapper {
        padding-top: 12px;
        padding-bottom: 24px;
    }

    .layout-banner-cards-wrapper .layout-card > .layout-card-text-wrapper > .layout-card-text {
        /* 220px was this row's established height budget before the wrapper existed; reduced by the wrapper's 12px+24px padding so the combined total still lands on 220px and the row stays even. */
        max-height: 184px;
        overflow-y: auto;
        /* Resets the has-image variant's own padding-bottom:20px — that vertical spacing is now the wrapper's job on every variant alike. */
        padding-bottom: 0;
        /* Always-visible, styled scrollbar so it's clear the text scrolls, since macOS hides overlay scrollbars until interaction. */
        scrollbar-width: thin;
        scrollbar-color: var(--bs-black) transparent;
    }

    .layout-banner-cards-wrapper .layout-card > .layout-card-text-wrapper > .layout-card-text::-webkit-scrollbar {
        width: 6px;
    }

    .layout-banner-cards-wrapper .layout-card > .layout-card-text-wrapper > .layout-card-text::-webkit-scrollbar-track {
        background: transparent;
    }

    .layout-banner-cards-wrapper .layout-card > .layout-card-text-wrapper > .layout-card-text::-webkit-scrollbar-thumb {
        background-color: var(--bs-black);
        border-radius: 3px;
    }
}

/* Desktop only — a mobile override that used to cancel this margin-right back down to Swiper's spaceBetween:8 was removed by mistake, so this stays scoped here to avoid it bleeding into mobile again. */
@media (min-width: 993px) {
    .layout-banner-cards-wrapper .dynamic-variant {
        min-width: 411px;
        width: 411px;
        margin-right: 32px !important;
    }
}

.layout-banner-cards-wrapper .swiper-pagination {
    position: initial;
    display: flex;
    gap: 8px;
    justify-content: center;
    padding-top: 16px;
    padding-right: 24px;
}

.layout-banner-cards-wrapper .swiper-pagination-bullet {
    height: 3px;
    border-radius: 0;
    margin: 0 !important;
    width: 62px
}

.layout-banner-cards-wrapper .swiper-pagination-bullet {
    background: var(--bs-lighter);
    opacity: 1;
}

.layout-banner-cards-wrapper .swiper-pagination-bullet-active {
    background: var(--bs-black);
}

.layout-banner-nav-wrapper .swiper-button-next,
.layout-banner-nav-wrapper .swiper-button-prev {
    border-radius: 40px;
    background: var(--bs-main-500);
}

.layout-banner-nav-wrapper .swiper-button-next {
    right: -24px;
}

.layout-banner-nav-wrapper .swiper-button-prev {
    left: -24px;
}

.layout-banner-nav-wrapper .swiper-button-next,
.layout-banner-nav-wrapper .swiper-button-prev {
    background: none !important;
    width: 40px;
    height: 40px;
    z-index: 9 !important;
}

/* Arrow Right */

.layout-banner-nav-wrapper .swiper-button-next::after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    right: -15px;
    background-color: var(--bs-main-500) !important;
    border-radius: 40px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M7.97951 1.76087L15.5615 9.34286C15.7368 9.51819 15.833 9.75168 15.833 10.0062C15.833 10.2606 15.7368 10.4893 15.5615 10.6644L7.98689 18.2393C7.81156 18.4146 7.57779 18.511 7.32841 18.511C7.07904 18.511 6.84526 18.4146 6.66993 18.2393L6.11217 17.6815C5.93684 17.5062 5.8401 17.2724 5.8401 17.023C5.8401 16.7736 5.93684 16.5399 6.11217 16.3645L12.4731 10.0036L6.1048 3.63587C5.92975 3.46054 5.83301 3.22706 5.83301 2.9774C5.83301 2.72774 5.92947 2.49453 6.1048 2.3192L6.66284 1.76116C7.02598 1.3983 7.61666 1.3983 7.97951 1.76116V1.76087Z' fill='%2307080D'/></svg>") no-repeat center center;
}

/* Arrow Left */

.layout-banner-nav-wrapper .swiper-button-prev::after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    left: -15px;
    border-radius: 40px;
    background-color: var(--bs-main-500) !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' style='transform: rotate(180deg);'><path d='M7.97951 1.76087L15.5615 9.34286C15.7368 9.51819 15.833 9.75168 15.833 10.0062C15.833 10.2606 15.7368 10.4893 15.5615 10.6644L7.98689 18.2393C7.81156 18.4146 7.57779 18.511 7.32841 18.511C7.07904 18.511 6.84526 18.4146 6.66993 18.2393L6.11217 17.6815C5.93684 17.5062 5.8401 17.2724 5.8401 17.023C5.8401 16.7736 5.93684 16.5399 6.11217 16.3645L12.4731 10.0036L6.1048 3.63587C5.92975 3.46054 5.83301 3.22706 5.83301 2.9774C5.83301 2.72774 5.92947 2.49453 6.1048 2.3192L6.66284 1.76116C7.02598 1.3983 7.61666 1.3983 7.97951 1.76116V1.76087Z' fill='%2307080D'/></svg>") no-repeat center center;
}

@media (max-width: 992px) {
    /* SWIPER MOBILE */
        .layout-banner-inner {
        padding-inline: 0;
        }

        .layout-banner-inner > *:not(.layout-banner-cards-wrapper) {
        padding-inline: 24px;
        }

        /* Inherits padding-inline:24px from the rule above for the left gutter; only the right side is removed here so the swiper's box reaches the screen edge (needs the same specificity as the rule above to actually win). */
        .layout-banner-inner > .layout-banner-nav-wrapper {
        padding-right: 0;
        }

        /* No padding of its own — the next-slide peek comes from a fractional slidesPerView in banner-cards-swiper.js instead, since padding-right left a visible gap before the true edge. */
        .layout-banner-cards-wrapper.swiper {
        padding-inline: 0;
        }

        .swiper-button-next,
        .swiper-button-prev {
        display: none;
        }

        .swiper-pagination {
        justify-content: space-between;
        padding-top: 8px;
        }

        .layout-banner-inner {
        padding-bottom: 40px;
        }

    /* dynamic-variant's forced min/max/width:327px !important was removed here — it beat Swiper's own per-slide width and fell out of sync with its transform math, hiding the peek. */

    /* END SWIPER MOBILE */
        .variation-wrapper {
        padding-bottom: 24px;
        padding-left: 24px;
        width: fit-content;
        }

        .variation-cta {
        width: fit-content;
        max-width: 192px;
        }

        .variation-icon {
        margin-bottom: 16px !important;
        }

        .variation-description {
        margin-bottom: 16px !important;
        }
}

@media (max-width: 576px) {
        .layout-card.numbers-variation {
        max-width: 327px;
        }

        .layout-banner-section {
        padding-top: 40px;
        padding-bottom: 0;
        }

        .layout-card.numbers-variation {
        gap: 0;
        }

        .numbers-variation .layout-card-icon img {
        width: fit-content;
        height: 28px;
        object-fit: contain;
        margin-bottom: 16px;
        }

        .numbers-variation .layout-card-title {
        font-size: 18px !important;
        line-height: 20px !important;
        margin-bottom: 16px;
        }

        .numbers-variation .layout-card-text {
        font-size: 14px !important;
        line-height: 20px !important;
        }

        /* dynamic-variant's own min/max-width forcing removed here too, same reason as the 992px breakpoint above — let Swiper's computed slide width win. */

        .layout-card {
        height: initial !important;
        align-self: auto !important;
        }
}