.hk-video-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 280px;
    overflow: hidden;
    border-radius: 4px;
    background: #16171c;
    color: #fff;
}

.hk-video-banner--ratio-square { aspect-ratio: 1 / 1; }
.hk-video-banner--ratio-portrait { aspect-ratio: 4 / 5; }
.hk-video-banner--ratio-classic { aspect-ratio: 3 / 2; }
.hk-video-banner--ratio-wide { aspect-ratio: 16 / 9; }
.hk-video-banner--ratio-cinema { aspect-ratio: 21 / 9; }

.hk-video-banner__media,
.hk-video-banner__overlay {
    position: absolute;
    inset: 0;
}

.hk-video-banner__video,
.hk-video-banner__poster {
    display: block;
    width: 100%;
    height: 100%;
}

.hk-video-banner--fit-cover .hk-video-banner__video,
.hk-video-banner--fit-cover .hk-video-banner__poster { object-fit: cover; }
.hk-video-banner--fit-contain .hk-video-banner__video,
.hk-video-banner--fit-contain .hk-video-banner__poster { object-fit: contain; }

.hk-video-banner__overlay {
    z-index: 1;
    background: linear-gradient(90deg, rgba(10, 11, 14, var(--hk-video-overlay)), rgba(10, 11, 14, calc(var(--hk-video-overlay) * 0.35)));
    pointer-events: none;
}

.hk-video-banner--tone-light {
    background: #f7f7f5;
    color: #16171c;
}

.hk-video-banner--tone-light .hk-video-banner__overlay {
    background: rgba(255, 255, 255, var(--hk-video-overlay));
}

.hk-video-banner__content {
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    padding: clamp(1.5rem, 6vw, 5rem);
}

.hk-video-banner--center { justify-content: center; text-align: center; }
.hk-video-banner--right { justify-content: flex-end; text-align: right; }

.hk-video-banner__eyebrow {
    margin: 0 0 0.65rem;
    color: #e2233b;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hk-video-banner__headline {
    margin: 0;
    color: inherit;
    font-family: "Archivo Black", "Inter", sans-serif;
    font-size: clamp(2rem, 6vw, 5.5rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
}

.hk-video-banner__text {
    max-width: 58ch;
    margin: 1rem 0 0;
    color: inherit;
    font-size: clamp(0.95rem, 1.5vw, 1.125rem);
    line-height: 1.55;
}

.hk-video-banner--center .hk-video-banner__text { margin-inline: auto; }
.hk-video-banner--right .hk-video-banner__text { margin-left: auto; }
.hk-video-banner__content .hk-button { margin-top: 1.35rem; }

.hk-video-banner__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background: linear-gradient(135deg, #16171c, #25262c);
    color: #e2233b;
    font-size: 3rem;
}

@media (max-width: 767.98px) {
    .hk-video-banner--ratio-cinema,
    .hk-video-banner--ratio-wide { aspect-ratio: 4 / 5; }
    .hk-video-banner__content { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hk-video-banner__video { scroll-behavior: auto; }
}