.brn-nv.v1 {
    --brn-nv-min-h: 30rem;
    --brn-nv-lnk-pd: 0.85rem 1rem;
    --brn-nv-lnk-rds: 0.5rem;
    --brn-nv-hvr-bg: hsl(from var(--text-color) h s l / 0.12);

    /* Decorative light-blue "lens" framing behind the card.
       Purely cosmetic brand-blue tints — tune or remove to taste. */
    --brn-nv-wave-1: #e3edf9;
    --brn-nv-wave-2: #cddff3;

    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(120% 75% at 50% 50%, transparent 58%, var(--brn-nv-wave-1) 59%, var(--brn-nv-wave-1) 72%, transparent 73%),
            radial-gradient(135% 88% at 50% 50%, transparent 70%, var(--brn-nv-wave-2) 71%, var(--brn-nv-wave-2) 86%, transparent 87%);
        opacity: 0.7;
        pointer-events: none;
    }

    picture.bg img {
        opacity: 1;
    }

    /* ── Card shell ──────────────────────────────────────── */

    .brn-nv-card {
        position: relative;
        overflow: hidden;
        align-items: stretch;
        min-height: var(--brn-nv-min-h);
    }

    /* Module-wide background image — show the photo at full strength
       and darken it with the overlay so text stays legible. */
    .brn-nv-card > .bg {
        z-index: 0;

        img {
            opacity: 1;
            filter: none;
        }
    }

    .brn-nv-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            90deg,
            hsl(from var(--background) h s l / 0.5) 0%,
            hsl(from var(--background) h s l / 0.7) 45%,
            hsl(from var(--background) h s l / 0.88) 100%
        );
        pointer-events: none;
    }

    /* Content sits above the image + overlay */
    .brn-nv-lft,
    .brn-nv-rgt {
        position: relative;
        z-index: 2;
    }

    /* ── Left: title + CTA ───────────────────────────────── */

    .brn-nv-lft {
        justify-content: center;
        align-items: flex-start;
        gap: 2rem;
    }

    .brn-nv-ttl {
        color: #C92C0C;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #FFF;
        font-family: Anton;
        font-size: 100.01px;
        font-style: normal;
        font-weight: 400;
        line-height: 100.01px; /* 100% */
        text-transform: uppercase;
    }

    /* ── Right: branch nav list ──────────────────────────── */

    .brn-nv-rgt {
        align-self: center;
    }

    .brn-nv-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
        row-gap: 0.25rem;
    }

    .brn-nv-link {
        padding: var(--brn-nv-lnk-pd);
        border-radius: var(--brn-nv-lnk-rds);
        color: hsl(from var(--text-color) h s l / 0.9);
        text-decoration: none;
        line-height: 1.2;
        transition: background-color 0.2s, color 0.2s;

        /* brand leaf (Flair) bullet, to the left of the label */
        svg {
            flex-shrink: 0;
            width: 1.4em;
            height: 1.4em;
        }

        &.active,
        &:hover,
        &:focus-visible {
            background-color: var(--brn-nv-hvr-bg);
            color: var(--text-color);
        }
    }

    /* ── Responsive ──────────────────────────────────────── */

    @media screen and (max-width: 1279px) {
        --brn-nv-min-h: 22rem;

        .brn-nv-rgt {
            align-self: stretch;
        }
    }

    @media screen and (max-width: 699px) {
        --brn-nv-min-h: 20rem;

        .brn-nv-list {
            grid-template-columns: 1fr;
        }

        .brn-nv-lft {
            gap: 1.5rem;
        }
    }
}