/* Full-background hero selected by the user. Existing site content is unchanged. */
.hero-full-background .hero {
    display: block;
    isolation: isolate;
    min-height: 640px;
    padding: 0;
    background: #181818;
}
.hero-full-background .hero-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    clip-path: none;
}
.hero-full-background .hero-media::after {
    clip-path: none;
    background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.48) 48%, rgba(0,0,0,.75));
}
.hero-full-background .hero-poster,
.hero-full-background .hero-video { object-position: 60% top; }
.hero-full-background .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    min-height: 640px;
    margin: 0 auto;
    padding: 64px;
    text-align: center;
    pointer-events: none;
}
.hero-full-background .hero-content.reveal { opacity: 1; transform: none; }
.hero-full-background .hero-content a { pointer-events: auto; }
.hero-full-background .hero h1 { max-width: 960px; color: #fff; }
.hero-full-background .hero p { max-width: 680px; color: rgba(255,255,255,.92); }
.hero-full-background .hero-badge { color: #fff; background: rgba(255,255,255,.14); }
.hero-full-background .hero-consultation { color: #fff; }
.hero-full-background .hero-actions { justify-content: center; }
.hero-full-background .hero-play-button {
    top: auto;
    left: auto;
    right: 16px;
    bottom: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 48px;
    transform: none;
}
.hero-full-background .hero-pause-button { bottom: max(16px, env(safe-area-inset-bottom)); }

/* Match the reference framing instead of enlarging the worker on wide screens. */
@media (min-width: 1441px) {
    .hero-full-background .hero-media::before {
        content: '';
        position: absolute;
        inset: -24px;
        background: url('./hero-worker-gemini-poster.jpg') center top / cover no-repeat;
        filter: blur(20px);
    }
    .hero-full-background .hero-poster,
    .hero-full-background .hero-video {
        left: 50%;
        right: auto;
        width: 1440px;
        transform: translateX(-50%);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
    }
}

/* Leave the lower part of the portrait frame free for the jacket logo. */
@media (max-width: 1366px) {
    .hero-full-background .hero,
    .hero-full-background .hero-content {
        min-height: 660px;
        min-height: clamp(660px, calc(100svh - var(--header-h)), 840px);
    }
    .hero-full-background .hero-content { justify-content: flex-start; padding: 48px 24px 112px; }
    .hero-full-background .hero-poster,
    .hero-full-background .hero-video { object-position: 75% top; }
}
@media (max-width: 640px) {
    .hero-full-background .hero,
    .hero-full-background .hero-content {
        min-height: 740px;
        min-height: clamp(740px, calc(100svh - var(--header-h)), 860px);
    }
    .hero-full-background .hero-content { padding: 48px 24px 112px; }
    .hero-full-background .hero-actions { width: 100%; }
    .hero-full-background .form-group input,
    .hero-full-background .form-group select,
    .hero-full-background .form-group textarea { font-size: 16px; }
}
@media (max-width: 360px) {
    .hero-full-background .hero-content { padding: 32px 20px 112px; }
    .hero-full-background .hero h1 { font-size: 32px; }
    .hero-full-background .hero p { font-size: 14px; }
}
@media (min-width: 641px) and (max-width: 1366px) and (max-height: 520px) {
    .hero-full-background .hero-content { padding-top: 32px; }
    .hero-full-background .hero h1 { font-size: 42px; }
}