/* =========================================================
   SCOPE BRIDGE
   SECTION → SECTION TRANSITION
   ========================================================= */

.scope-bridge {
    --bridge-accent: var(--primary-light, #c33642);
    --bridge-ink: var(--primary-dark, #0f172a);
    --bridge-line: rgba(255, 255, 255, 0.12);
    --bridge-soft: rgba(255, 255, 255, 0.055);

    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin:
        clamp(30px, 5vw, 65px) 0;

    padding:
        clamp(32px, 4vw, 46px) clamp(30px, 5vw, 55px);

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        var(--radius-lg, 24px);

    background:
        linear-gradient(135deg,
            rgba(15, 23, 42, 0.99) 0%,
            rgba(15, 23, 42, 0.96) 55%,
            rgba(23, 32, 52, 0.94) 100%);

    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.10);

    /* Prevent accidental interaction with decorative layers */
    isolation: isolate;
}


/* =========================================================
   AMBIENT BACKGROUND GLOW
   ========================================================= */

.scope-bridge::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    top: -220px;
    right: 4%;

    border-radius: 50%;

    background:
        var(--primary-glow,
            rgba(195, 54, 66, 0.22));

    filter: blur(70px);

    opacity: 0.75;

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   SYSTEM LINE / SIGNAL MOTIF
   ========================================================= */

.scope-bridge::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.035) 15%,
            rgba(255, 255, 255, 0.09) 50%,
            rgba(255, 255, 255, 0.035) 85%,
            transparent 100%);

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   BRIDGE COPY
   ========================================================= */

.scope-bridge-copy {
    position: relative;

    z-index: 2;

    max-width: 720px;

    min-width: 0;
}


/* =========================================================
   BRIDGE KICKER
   Matches CTA-LABEL language
   ========================================================= */

.scope-bridge .scope-kicker {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color:
        var(--primary-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.16em;

    line-height: 1;

    text-transform: uppercase;
}


/* Kicker line */

.scope-bridge .scope-kicker::before {
    content: "";

    width: 28px;
    height: 1px;

    flex:
        0 0 28px;

    background:
        currentColor;

    opacity: 0.9;
}


/* =========================================================
   BRIDGE HEADING
   ========================================================= */

.scope-bridge-copy h3 {
    margin: 0 0 12px;

    color:
        var(--text-light,
            (--text-white));

    font-size:
        clamp(1.45rem,
            3vw,
            2.35rem);

    line-height: 1.08;

    letter-spacing: -0.04em;
}


/* Accent statement */

.scope-bridge-copy h3 span {
    color:
        var(--primary);
}


/* =========================================================
   BRIDGE DESCRIPTION
   ========================================================= */

.scope-bridge-copy p {
    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 0.95rem;

    line-height: 1.65;
}


/* =========================================================
   BRIDGE ACTION
   ========================================================= */



/* =========================================================
   OPTIONAL — BRIDGE WITH VISUAL SECTION CONNECTION
   ========================================================= */

/*
   Add this class to a bridge when it sits directly between
   two major sections:

   <div class="scope-bridge scope-bridge--section">
*/

.scope-bridge--section {
    margin-top:
        clamp(55px, 7vw, 90px);

    margin-bottom:
        clamp(55px, 7vw, 90px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .scope-bridge {
        align-items: flex-start;

        flex-direction: column;

        gap: 26px;

        padding:
            32px;
    }

    .scope-bridge-copy {
        max-width: 680px;
    }



}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .scope-bridge {
        gap: 24px;

        margin:
            45px 0;

        padding:
            28px 24px;

        border-radius:
            20px;
    }


    .scope-bridge .scope-kicker {
        margin-bottom: 12px;

        font-size: 10px;

        letter-spacing: 0.14em;
    }


    .scope-bridge .scope-kicker::before {
        width: 22px;

        flex-basis: 22px;
    }


    .scope-bridge-copy h3 {
        margin-bottom: 11px;

        font-size:
            clamp(1.4rem,
                6vw,
                1.7rem);
    }


    .scope-bridge-copy p {
        font-size:
            0.88rem;

        line-height:
            1.65;
    }




}

/* =========================================================
   SCOPE BRIDGE ACTION
   EDITORIAL ANIMATED ARROW
   ========================================================= */

.scope-bridge-action {
    --arrow-color: rgba(255, 255, 255, 0.48);
    --arrow-hover: var(--primary-light, #c33642);

    position: relative;

    display: inline-block;

    flex: 0 0 auto;

    min-width: 180px;

    color: var(--arrow-color);

    text-decoration: none;

    font-size: 13px;
    font-weight: var(--fw-l, 500);

    letter-spacing: 0.02em;

    white-space: nowrap;

    transition:
        color 0.25s ease;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.scope-bridge-action__main {
    display: flex;

    align-items: center;

    transition:
        transform 0.25s ease;
}


/* Text */

.scope-bridge-action__text {
    margin-right: 16px;
    font-size: 18px;
    line-height: 1;
}


/* =========================================================
   ARROW SYSTEM
   ========================================================= */

.scope-bridge-action .the-arrow {
    width: 64px;

    transition:
        all 0.2s ease;
}


/* Arrow shaft */

.scope-bridge-action .the-arrow>.shaft {
    display: block;

    position: relative;

    height: 1px;

    background: var(--arrow-color);

    transition:
        all 0.2s ease;

    transition-delay: 0;

    will-change: transform;
}


/* Arrow heads */

.scope-bridge-action .the-arrow>.shaft::before,
.scope-bridge-action .the-arrow>.shaft::after {
    content: "";

    display: block;

    position: absolute;

    top: 0;
    right: 0;

    width: 8px;
    height: 1px;

    background: var(--arrow-color);

    transition:
        all 0.2s ease;
}


/* Head rotation */

.scope-bridge-action .the-arrow>.shaft::before {
    transform-origin: top right;
    transform: rotate(40deg);
}

.scope-bridge-action .the-arrow>.shaft::after {
    transform-origin: bottom right;
    transform: rotate(-40deg);
}


/* =========================================================
   LEFT ARROW
   Hidden until hover
   ========================================================= */

.scope-bridge-action .the-arrow--left {
    position: absolute;

    top: 50%;
    left: 0;

    transform: translateY(-50%);
}


.scope-bridge-action .the-arrow--left>.shaft {
    width: 0;

    background: transparent;
}


.scope-bridge-action .the-arrow--left>.shaft::before,
.scope-bridge-action .the-arrow--left>.shaft::after {
    width: 0;

    background: transparent;

    transform: rotate(0);
}


/* =========================================================
   RIGHT ARROW
   Visible by default
   ========================================================= */

.scope-bridge-action .the-arrow--right {
    position: relative;

    top: 3px;
}


.scope-bridge-action .the-arrow--right>.shaft {
    width: 64px;

    transition-delay: 0.2s;
}


.scope-bridge-action .the-arrow--right>.shaft::before,
.scope-bridge-action .the-arrow--right>.shaft::after {
    width: 8px;

    transition-delay: 0.3s;
}


/* =========================================================
   HOVER
   ========================================================= */

.scope-bridge-action:hover {
    color: var(--arrow-hover);
}


/* Left arrow expands */

.scope-bridge-action:hover .the-arrow--left>.shaft {
    width: 64px;

    background: var(--arrow-hover);

    transition-delay: 0.1s;
}


.scope-bridge-action:hover .the-arrow--left>.shaft::before,
.scope-bridge-action:hover .the-arrow--left>.shaft::after {
    width: 8px;

    background: var(--arrow-hover);

    transition-delay: 0.1s;
}


.scope-bridge-action:hover .the-arrow--left>.shaft::before {
    transform: rotate(40deg);
}


.scope-bridge-action:hover .the-arrow--left>.shaft::after {
    transform: rotate(-40deg);
}


/* Text moves right */

.scope-bridge-action:hover .scope-bridge-action__main {
    transform:
        translateX(80px);
}


/* Right arrow retracts */

.scope-bridge-action:hover .the-arrow--right>.shaft {
    width: 0;

    transform: translateX(200%);

    background: transparent;

    transition-delay: 0;
}


.scope-bridge-action:hover .the-arrow--right>.shaft::before,
.scope-bridge-action:hover .the-arrow--right>.shaft::after {
    width: 0;

    background: transparent;

    transform: rotate(0);

    transition-delay: 0;
}


/* =========================================================
   FOCUS
   ========================================================= */

.scope-bridge-action:focus-visible {
    outline: 1px solid var(--primary-light);
    outline-offset: 8px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .scope-bridge-action {
        min-width: 180px;
    }

}


@media (max-width: 640px) {

    .scope-bridge-action {
        width: auto;

        min-width: 180px;
    }

}