.hero-video-banner {
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}

.hero-video-content {
    position: relative;
    z-index: 2;
}

.hero-video-badge {
    background-color: var(--stfm-secondary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    display: inline-block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-video-banner h1 {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.hero-video-banner .lead {
    max-width: 600px;
    font-family: var(--stfm-body-font);
    margin-bottom: 1rem;
    font-size: 1.12rem;
}

.hero-video-banner .btn {
    margin-top: 0.125rem;
}

.hero-video-media {
    position: relative;
    z-index: 2;
}

.hero-video-frame {
    position: relative;
}

    .hero-video-frame .ratio {
        position: relative;
        z-index: 2;
        border-radius: 10px;
        overflow: hidden;
        background-color: #000;
    }

.hero-video-caption {
    margin: calc(1.4rem + 5px) 0 0;
    text-align: center;
    font-size: 0.85rem;
}

.hero-video-banner .highlight-percent {
    font-weight: 700;
}

.hero-video-banner .line-spacer {
    display: block;
    height: 0.75rem;
}

/* Dark (navy) background */
.hero-video-dark {
    background-color: var(--stfm-primary);
    color: white;
}

    .hero-video-dark::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        height: 100%;
        background-color: var(--stfm-tertiary);
        clip-path: polygon(100% 0, 0 0, 100% 100%);
        opacity: 0.2;
    }

    .hero-video-dark h1 {
        color: white;
    }

    .hero-video-dark .lead {
        color: rgba(255, 255, 255, 0.9);
    }

    .hero-video-dark {
        --highlight-percent: white; /* global .highlight-percent uses color: var(--highlight-percent) !important */
    }

    .hero-video-dark .hero-video-content strong,
    .hero-video-dark .hero-video-content b {
        color: white;
        font-weight: 600;
    }

    .hero-video-dark .hero-video-frame::before {
        content: '';
        position: absolute;
        top: 20px;
        right: -20px;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        z-index: 1;
    }

    .hero-video-dark .hero-video-frame .ratio {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    }

    .hero-video-dark .hero-video-caption {
        color: rgba(255, 255, 255, 0.9);
    }

        .hero-video-dark .hero-video-caption .highlight-percent,
        .hero-video-dark .hero-video-caption strong,
        .hero-video-dark .hero-video-caption b {
            color: white;
        }

    .hero-video-dark .stfm-outline-button {
        background-color: transparent;
        border: 2px solid white;
        color: white;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .hero-video-dark .stfm-outline-button:hover {
            background-color: white;
            border-color: white;
            color: var(--stfm-primary) !important;
            transform: translateY(-2px);
        }

/* Light background */
.hero-video-light {
    background-color: #fff;
    color: var(--stfm-text);
    border-top: 1px solid var(--stfm-border-gray);
    border-bottom: 1px solid var(--stfm-border-gray);
}

    .hero-video-light {
        --highlight-percent: var(--stfm-primary); /* global .highlight-percent uses color: var(--highlight-percent) !important */
    }

    .hero-video-light h1 {
        color: var(--stfm-primary);
    }

    .hero-video-light .hero-video-frame .ratio {
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    }

    .hero-video-light .hero-video-caption {
        color: #555;
    }

    .hero-video-light .stfm-outline-button {
        background-color: transparent;
        border: 2px solid var(--stfm-primary);
        color: var(--stfm-primary) !important;
        font-weight: 600;
    }

@media (max-width: 991.98px) {
    .hero-video-dark .hero-video-frame::before {
        right: -10px;
    }
}