.bnr.v2 {
    --bnr-tls-pd-v-tp: 90;
    --bnr-tls-pd-v-tp-mbl: 50;
    --bnr-tls-pd-v-bt: 40;
    --bnr-tls-pd-v-bt-mbl: 30;
    --bnr-img-bg-o: .45;
    --bnr-v2-oft: 4.72rem;
    
    background: linear-gradient(180deg, hsl(from var(--black) h s l / .8) 11.54%, hsl(from var(--background) h s l / .8) 100%);

    position: relative;



    .bnr-v2-cnt {
        position: relative;
        z-index: 1;
        padding-top: var(--bnr-tls-pd-v-tp-clc);
    }

    .bg-bx.frst-bg {
        --frst-bg-clr: var(--dk-alt-bg);
        --frst-bg-o: 1;
        --frst-blur: 7px;
        background-color: hsl(from var(--frst-bg-clr) h s l / var(--frst-bg-o));
        padding: 2rem 2.78rem;
        border: none;

        
        @media screen and (min-width:1280px) {
            & {
                gap: 4.4rem;
                margin-bottom: calc((4.72rem + var(--bnr-tls-pd-v-bt-clc)) * -1);
                .itm {
                    gap: 3.33rem;
                }
            }
        }

        .bnr-v2-cta-sub {
            --title-color: var(--fnt-t-co);
            font-family: var(--fnt-t);
            font-weight: var(--fnt-t-co-w);
            text-transform: uppercase;
            margin: 0;
        }

       
        .fnt_t-co {
            color: var(--accent);
        }

        .bnr-v2-cta-sub,
        p.fnt_pl {
            color: var(--white);
        }
    }
}

header:has(.hdr.v1) + main .bnr.v2 {
    --bnr-tls-pd-v-tp: 68;
    --bnr-tls-pd-v-bt: 64;
}

/* HeaderV2 overlays this banner transparently (see header-v2.css) — reserve
   extra top clearance for its taller two-row layout, matching the same
   treatment already applied to BannerV1. */
header:has(.hdr.v2) + main .bnr.v2 {
    --bnr-tls-pd-v-tp: 220;
    --bnr-tls-pd-v-tp-mbl: 130;
    --bnr-tls-pd-v-bt: 70;
    --bnr-tls-pd-v-bt-mbl: 45;
}

.bnr.v2:has(.bg-bx.frst-bg) + section {
    --bnr-v2-oft: 4.72rem;
    padding-top: calc(var(--pd-v, 0px) + var(--bnr-v2-oft));
}