.bb-scroll-cards {
    --bb-scroll-layout: stacked;
    --bb-stage-space: var(--bb-space-section-mobile);
    --bb-card-gap: 48px;
    --bb-card-radius: var(--bb-radius-media);
    --bb-card-image-radius: calc(var(--bb-card-radius) - var(--bb-border-media));
    /* Keep the static glow low in the caption, independent of image height. */
    --bb-card-glow-width: 40%;
    --bb-card-glow-height: 64px;
    --bb-card-glow-strength: 50%;
    --bb-card-reveal-inset: 12%;
    --bb-card-mobile-reveal-end: 45%;
    --bb-card-entry-opacity: 0;
    --bb-card-scrub: 0.2;
    --bb-card-scroll-speed: 1;
    --bb-card-pop-scale: 1.03;
    --bb-card-pop-duration: 0.42;
    --bb-card-exit-rise: 64px;
    --bb-stage-header-gap: 24px;
    --bb-scroll-end-space: calc(var(--bb-space-section-mobile) / 2);
    --bb-heading-color: var(--bb-color-white);
    position: relative;
    isolation: isolate;
    /* Clip at the section boundary, so cards can pass behind the navbar. */
    overflow: clip;
    color: var(--bb-color-white);
    background-color: var(--bb-color-blue);
    padding-bottom: var(--bb-scroll-end-space);
    scroll-margin-top: var(--header-height, 0px);
}

.bb-scroll-cards::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 32px;
    background: linear-gradient(rgb(0 0 0 / 16%), transparent);
    pointer-events: none;
    z-index: 1;
}

.bb-scroll-cards__container {
    max-width: calc(var(--bb-content-width) + 2 * var(--bb-gutter-mobile));
    padding: var(--bb-stage-space) var(--bb-gutter-mobile);
}

.bb-scroll-cards__intro {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: var(--bb-stage-space);
}

.bb-scroll-cards__intro-copy {
    max-width: 320px;
    margin-top: 30px;
    font: 16px / 1.3 var(--bb-font-body);
}

.bb-scroll-cards__intro-copy,
.bb-scroll-card__description {
    letter-spacing: -0.25px;
    /* Match the softer Inter 400 rendering used in the card captions. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bb-scroll-cards__intro-copy > :last-child,
.bb-scroll-card__description > :last-child { margin-bottom: 0; }

.bb-scroll-cards__intro-copy p,
.bb-scroll-card__description p { color: inherit; }

.bb-scroll-cards__track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--bb-card-gap);
}

.bb-scroll-card {
    --bb-card-inset: 0px;
    --bb-card-pop-inset: 0px;
    --bb-card-frame-inset: calc(var(--bb-card-inset) + var(--bb-card-pop-inset));
    position: relative;
    flex-shrink: 0;
    padding-top: var(--bb-border-media);
    isolation: isolate;
    transform-origin: 50% 0;
}

.bb-scroll-card::before {
    content: "";
    position: absolute;
    inset: 0 var(--bb-card-frame-inset);
    border-radius: var(--bb-card-radius);
    background:
        radial-gradient(
            ellipse var(--bb-card-glow-width) var(--bb-card-glow-height) at 5% 100%,
            color-mix(in srgb, var(--bb-color-pink) var(--bb-card-glow-strength), transparent),
            transparent
        ),
        var(--bb-color-slate);
    z-index: -1;
}

.bb-scroll-card__media {
    margin-inline: var(--bb-border-media);
    aspect-ratio: 7 / 4;
    border-radius: var(--bb-card-image-radius);
    overflow: hidden;
    clip-path: inset(0 var(--bb-card-frame-inset) round var(--bb-card-image-radius));
}

.bb-scroll-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bb-scroll-card__caption {
    position: relative;
    padding: 20px 16px;
    clip-path: inset(0 var(--bb-card-frame-inset));
}

.bb-scroll-card__title {
    margin: 0;
    padding: 0;
    font: 700 16px / 1.25 var(--bb-font-heading);
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
}

.bb-scroll-card__description {
    margin-top: 4px;
    font: 16px / 1.3 var(--bb-font-body);
    overflow-wrap: anywhere;
}

.bb-scroll-card__description a,
.bb-scroll-cards__intro-copy a {
    /* The theme's global link color is also marked important. */
    color: inherit !important;
    text-decoration: underline;
}

.bb-scroll-cards a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Without enhancement, every card remains in normal document flow. */
.bb-scroll-cards.is-enhanced .bb-scroll-cards__container {
    /* The last card already has exit clearance below its caption. */
    padding-bottom: 0;
}

.bb-scroll-cards.is-enhanced .bb-scroll-cards__container::after {
    content: "";
    display: block;
    height: var(--bb-scroll-distance);
}

.bb-scroll-cards.is-enhanced .bb-scroll-cards__viewport {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--bb-stage-header-gap));
    height: calc(100svh - var(--header-height, 0px) - var(--bb-stage-header-gap));
}

.bb-scroll-cards.is-enhanced .bb-scroll-cards__layout { display: block; }

.bb-scroll-cards.is-enhanced .bb-scroll-cards__rail {
    height: calc(100svh - var(--header-height, 0px) - var(--bb-stage-header-gap));
}

/* Mobile scrolls as one section, with no hold or vertical track translation. */
.bb-scroll-cards.is-mobile-flow .bb-scroll-cards__viewport {
    position: static;
    height: auto;
    padding-bottom: var(--bb-scroll-exit-clearance);
}

.bb-scroll-cards.is-mobile-flow .bb-scroll-cards__rail { height: auto; }

@media (min-width: 992px) {
    .bb-scroll-cards {
        --bb-scroll-layout: columns;
        --bb-stage-space: var(--bb-space-section);
        --bb-card-gap: 160px;
        --bb-card-glow-width: 45%;
        --bb-card-glow-height: 96px;
        --bb-card-reveal-inset: 16%;
        --bb-card-scrub: 0.22;
        --bb-card-scroll-speed: 1.55;
        /* Later cards travel nearer the intro before completing their reveal. */
        --bb-card-reveal-span: 95%;
        --bb-card-first-reveal-span: 90%;
        --bb-card-pop-reserve: 2%;
        --bb-card-pop-scale: 1.02;
        --bb-card-pop-duration: 0.46;
        --bb-card-first-rise: 104px;
        --bb-card-exit-rise: var(--bb-space-section);
        --bb-stage-pin-top: max(0px, calc(var(--header-height, 0px) + var(--bb-stage-header-gap) - var(--bb-stage-space)));
        --bb-scroll-end-space: 0px;
    }

    .bb-scroll-cards__container { padding-block: 0; }
    .bb-scroll-cards__viewport { padding-block: var(--bb-stage-space); }
    .bb-scroll-cards .bb-rich-heading { font-size: 34px; line-height: 36px; }
    .bb-scroll-cards__intro-copy { margin-top: 24px; }
    .bb-scroll-cards__intro {
        width: 33.75%;
        align-items: flex-start;
        padding-right: var(--bb-space-section);
        margin-bottom: 0;
        text-align: left;
    }
    .bb-scroll-cards__rail { width: 66.25%; }
    .bb-scroll-cards__button { margin-top: auto; }

    .bb-scroll-cards.is-enhanced {
        /* The exit clearance is part of the total bottom spacing, not extra padding. */
        --bb-scroll-end-space: max(0px, calc(var(--bb-stage-space) - var(--bb-card-exit-rise)));
        scroll-margin-top: 0;
    }

    .bb-scroll-cards.is-enhanced .bb-scroll-cards__viewport {
        display: block;
        position: sticky;
        /* Offset the sticky position, keeping the section's own padding at 80px. */
        top: var(--bb-stage-pin-top);
        height: calc(100svh - var(--bb-stage-pin-top));
    }
    .bb-scroll-cards.is-enhanced .bb-scroll-cards__layout {
        display: flex;
        height: 100%;
    }
    .bb-scroll-cards.is-enhanced .bb-scroll-cards__intro {
        align-self: flex-start;
        height: 100%;
        min-height: 0;
    }
    .bb-scroll-cards.is-enhanced .bb-scroll-cards__rail {
        position: static;
        height: calc(100% + var(--bb-stage-space));
    }
}