/* --------------------------------------------------------------------------
   Home Hero — 2026 design
   --------------------------------------------------------------------------
   Home comp y 150–868 (718px): van photo under a navy wash; left column
   (x 64): 18px lime kicker, 62px Anton two-tone headline, 18/30 intro, the
   "Serving the Midwest · CHANGE" pill, phone + Schedule buttons, stars line,
   review badges. Right (x 792): 375px owner's-message video card with a
   Chat / Email / Owner's-message bar. */

.hero {
    position: relative;
    overflow: hidden;
    background-color: var(--color-navy);
    background-image: none;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(21, 23, 71, 0.94) 0%, rgba(21, 23, 71, 0.86) 55%, rgba(21, 23, 71, 0.78) 100%);
}
.hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* A piece of the brand illustration (the sewer monster) breaking out from
   behind the video card, fading into the hero. */
.hero__art {
    position: absolute;
    z-index: 1;
    right: max(0px, calc(50% - 720px + 200px));
    bottom: -6px;
    width: 540px;
    height: auto;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 70%, transparent 100%), linear-gradient(0deg, #000 70%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: center;
    gap: 48px;
    min-height: 718px;
    padding-top: 72px;
    padding-bottom: 72px;
}

.hero__media { margin-right: 49px; }

.hero__kicker {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-lime);
}

.hero__title {
    margin: 0;
    max-width: 600px;
    font-family: var(--font-display);
    font-size: 62px;
    font-weight: 400;
    line-height: 59px;
    letter-spacing: -0.01em;
    color: var(--color-white);
}

/* Only the highlight ("The Best Plumbers") is green — "& Missouri" stays
   white like the rest of the line (Volley #7). */
.hero__title-highlight {
    background: linear-gradient(90deg, var(--color-lime) 0%, #C4FF7A 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.hero__title-accent { display: block; }

.hero__text {
    max-width: 480px;
    margin: 22px 0 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 30px;
    color: var(--color-lavender);
}

.hero__text-highlight { color: var(--color-lime); }
.hero__text-more { display: block; margin-top: 8px; } /* same 18/30 as the lead line — one subtext size */


.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero__actions .btn { min-width: 173px; }

.hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    font-size: 14px;
    color: var(--color-lavender);
    text-decoration: none;
}

.hero__rating:hover { color: var(--color-white); text-decoration: none; }

.hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 36px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.hero__badge { display: flex; align-items: center; gap: 12px; }
.hero__badge-icon { flex: none; height: 40px; width: auto; }
.hero__badge-icon--bbb { height: 34px; }
.hero__badge-body { display: flex; flex-direction: column; }
.hero__badge-value { font-family: var(--font-ui); font-size: 26px; font-weight: 800; line-height: 1; color: var(--color-lime); }
.hero__badge-star { margin-left: 3px; font-size: 13px; vertical-align: top; color: var(--color-lime); }
.hero__badge-label { margin-top: 5px; font-size: 12px; line-height: 1.2; color: var(--color-white); }

/* Video card */
.hero__player { position: relative; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.hero__media-actions { overflow: hidden; border-radius: 0 0 var(--radius) var(--radius); }
.hero__player:only-child { border-radius: var(--radius); }

.hero__video,
.hero__photo {
    display: block;
    width: 100%;
    height: 560px;
    object-fit: cover;
    object-position: 50% 30%;
    background-color: var(--color-navy-deep);
}

.hero__player-pause {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.hero__player-fs {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 4px;
    background-color: rgba(27, 42, 107, 0.9); /* --color-navy-raised */
    color: var(--color-white);
    cursor: pointer;
}

/* Captions: hero.js renders the track's cues into .hero__player-captions so the
   box can blur what's behind it; native ::cue is the no-JS fallback. */
.hero__video::cue {
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--color-ink);
    background-color: color-mix(in srgb, var(--color-white) 75%, transparent);
}

.hero__player-captions {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 6px 12px;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--color-white) 75%, transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-ink);
    text-align: center;
    text-wrap: balance;
    white-space: normal; /* collapse the VTT's hard line breaks; the narrow player re-wraps them badly */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.hero__player-captions--visible { opacity: 1; }

/* Fullscreen: the fs button fullscreens the whole player (so our captions and
   buttons come along), so drop the card sizing — fixed 560px height, cover
   crop, rounded corners — and let the video fill the screen uncropped. */
.hero__player:fullscreen { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 0; background-color: var(--color-ink); }
.hero__player:-webkit-full-screen { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 0; background-color: var(--color-ink); }
.hero__player:fullscreen .hero__video { width: 100%; height: 100%; object-fit: contain; }
.hero__player:-webkit-full-screen .hero__video { width: 100%; height: 100%; object-fit: contain; }

/* Small play button, bottom right — turns the owner's message on with sound. */
.hero__player-play {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0 0 0 3px;
    border: 0;
    border-radius: 50%;
    background-color: var(--color-lime);
    box-shadow: 0 6px 18px rgba(4, 19, 75, 0.45);
    color: var(--color-navy-deep);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.hero__player-play:hover { transform: scale(1.06); background-color: var(--color-white); }
.hero__player--sound:not(.hero__player--paused) .hero__player-play { display: none; }
.hero__player:not(.hero__player--sound) .hero__player-captions { bottom: 76px; } /* clear the play button */

.hero__media-actions { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; }

.hero__media-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 67px;
    background-color: var(--color-navy-deep);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-white);
    white-space: nowrap;
    text-decoration: none;
}

.hero__media-action:hover { color: var(--color-lime); text-decoration: none; }
.hero__media-action-icon { width: 18px; height: 18px; color: var(--color-lime); }
.hero__media-action--highlight { background-color: var(--color-lime); color: var(--color-navy-deep); }
.hero__media-action--highlight .hero__media-action-icon { color: var(--color-navy-deep); }
.hero__media-action--highlight:hover { background-color: var(--color-white); color: var(--color-navy-deep); }

@media (max-width: 1199.98px) {
    .hero__art { display: none; }
    .hero__media { margin-right: 0; }
    .hero__title { font-size: 54px; line-height: 52px; }
}

@media (max-width: 991.98px) {
    .hero__art { display: none; }
    .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 48px; padding-bottom: 56px; }
    .hero__media { max-width: 440px; }
    .hero__title { font-size: 46px; line-height: 45px; }
}

@media (max-width: 575.98px) {
    .hero__title { font-size: 40px; line-height: 40px; }
    .hero__badges { justify-content: center; gap: 16px 24px; }
    .hero__rating { display: flex; justify-content: center; }
    .hero__actions .btn { flex: 1 1 100%; }
    .hero__video, .hero__photo { height: 420px; }
}

/* The monster art sits in a <picture> (AVIF + WebP); keep it positioned off the section. */
.hero > picture { display: contents; }