/* =========================================================
   v1.22 — compact, pixel-perfect mobile homepage hero
   ========================================================= */

/* Slightly reduce the homepage hero headline on all screens so long mission
   copy occupies less vertical space without changing the rest of the site's
   typography. */
.hero-section.hero-slider .hero-slide__content h1,
.hero-section.hero-slider .hero-slide__content h2 {
    font-size: clamp(3rem, 5.15vw, 5.5rem);
}

/* Phone-only compact composition. The media keeps the full hero canvas while
   copy, controls and trust cues use less vertical space and remain touch-safe. */
@media (max-width: 620px) {
    .hero-section.hero-slider {
        min-height: 680px !important;
        height: clamp(680px, calc(100svh - 72px), 760px) !important;
        max-height: 760px !important;
    }

    .hero-slide__media > img,
    .hero-native-video,
    .hero-video-poster {
        object-position: center 22%;
    }

    .hero-slide__scrim {
        background:
            linear-gradient(180deg,
                rgba(14,10,12,.05) 0%,
                rgba(14,10,12,.10) 27%,
                rgba(14,10,12,.48) 46%,
                rgba(14,10,12,.90) 70%,
                rgba(14,10,12,.98) 100%);
    }

    .hero-slide__inner {
        align-items: flex-end;
        padding-top: 150px !important;
        padding-bottom: 124px !important;
    }

    .hero-slide__content {
        width: 100%;
        max-width: 100%;
        padding: 13px 14px 14px;
        border-radius: 17px;
        background: linear-gradient(145deg, rgba(29,24,25,.73), rgba(29,24,25,.51));
        box-shadow: 0 14px 38px rgba(0,0,0,.20);
        backdrop-filter: blur(7px);
    }

    .hero-slide__eyebrow {
        margin-bottom: 9px;
        padding: 6px 10px;
        font-size: .62rem;
        letter-spacing: .10em;
    }

    .hero-section.hero-slider .hero-slide__content h1,
    .hero-section.hero-slider .hero-slide__content h2 {
        margin-bottom: 8px;
        font-size: clamp(1.82rem, 8.6vw, 2.48rem);
        line-height: 1.02;
        letter-spacing: -.045em;
    }

    .hero-slide__tagline {
        margin-bottom: 6px;
        font-size: .88rem;
        line-height: 1.3;
    }

    .hero-slide__lede {
        margin: 0;
        color: rgba(255,255,255,.82);
        font-size: .79rem;
        line-height: 1.4;
    }

    .hero-slide__actions {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 7px !important;
        margin-top: 11px !important;
    }

    .hero-slider .hero-slide__actions .button {
        min-height: 42px !important;
        padding: 8px 9px !important;
        font-size: .65rem !important;
        line-height: 1.1;
        border-radius: 11px;
    }

    /* The counter/progress copy is useful on desktop but redundant on phones;
       dots + large previous/next controls give a clearer mobile interaction. */
    .hero-slider__meta {
        display: none !important;
    }

    .hero-slider__chrome {
        bottom: 61px !important;
        justify-content: center;
        width: auto !important;
        max-width: calc(100% - 20px);
        min-height: 43px;
        padding: 4px 6px !important;
        gap: 0 !important;
    }

    .hero-slider__controls {
        gap: 3px !important;
    }

    .hero-arrow {
        width: 37px !important;
        height: 37px !important;
        min-width: 37px;
    }

    .hero-arrow .material-symbols-rounded {
        font-size: 1.15rem;
    }

    .hero-slider__dots {
        gap: 0 !important;
    }

    .hero-dot {
        width: 20px !important;
        height: 34px !important;
    }

    .hero-dot span {
        width: 6px;
        height: 6px;
    }

    .hero-dot.is-active span {
        width: 14px !important;
    }

    /* Keep the three strongest credibility signals and remove secondary ones
       on phones. This keeps the hero compact without losing essential trust. */
    .hero-trust-rail {
        bottom: 8px !important;
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 5px !important;
        width: calc(100% - 18px) !important;
    }

    .hero-trust-rail > div {
        min-height: 45px !important;
        padding: 5px 6px !important;
        border-radius: 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        gap: 0 5px !important;
        text-align: left !important;
    }

    .hero-trust-rail > div:nth-child(n+4) {
        display: none !important;
    }

    .hero-trust-rail .material-symbols-rounded {
        display: block !important;
        grid-row: 1 / 3;
        align-self: center;
        font-size: 1.05rem !important;
    }

    .hero-trust-rail strong {
        align-self: end;
        font-size: .64rem !important;
        line-height: 1.1;
    }

    .hero-trust-rail span:last-child {
        align-self: start;
        font-size: .49rem !important;
        line-height: 1.1;
    }
}

/* Narrow phones: let the two conversion actions stack, but still stay far
   shorter than the previous 870px mobile hero. */
@media (max-width: 390px) {
    .hero-section.hero-slider {
        min-height: 710px !important;
        height: clamp(710px, calc(100svh - 72px), 748px) !important;
        max-height: 748px !important;
    }

    .hero-slide__inner {
        padding-top: 142px !important;
        padding-bottom: 124px !important;
    }

    .hero-slide__content {
        padding: 12px 12px 13px;
    }

    .hero-section.hero-slider .hero-slide__content h1,
    .hero-section.hero-slider .hero-slide__content h2 {
        font-size: clamp(1.72rem, 8.9vw, 2.2rem);
    }

    .hero-slide__lede {
        font-size: .76rem;
    }

    .hero-slide__actions {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        margin-top: 9px !important;
    }

    .hero-slider .hero-slide__actions .button {
        min-height: 38px !important;
        padding-block: 7px !important;
    }

    .hero-slider__chrome {
        bottom: 60px !important;
    }
}

@media (max-width: 340px) {
    .hero-section.hero-slider {
        min-height: 720px !important;
        height: 720px !important;
    }

    .hero-slide__tagline {
        font-size: .82rem;
    }

    .hero-trust-rail span:last-child {
        display: none !important;
    }

    .hero-trust-rail > div {
        min-height: 41px !important;
        grid-template-columns: auto 1fr !important;
    }

    .hero-trust-rail .material-symbols-rounded {
        grid-row: auto;
    }

    .hero-trust-rail strong {
        align-self: center;
        font-size: .60rem !important;
    }
}

/* Short mobile landscape: keep the slider usable without a desktop-sized
   canvas. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    .hero-section.hero-slider {
        min-height: 520px !important;
        height: 520px !important;
        max-height: 520px !important;
    }

    .hero-slide__inner {
        align-items: flex-start;
        padding-top: 24px !important;
        padding-bottom: 86px !important;
    }

    .hero-slide__content {
        width: min(620px, 72%);
        padding: 10px 12px;
    }

    .hero-section.hero-slider .hero-slide__content h1,
    .hero-section.hero-slider .hero-slide__content h2 {
        font-size: clamp(1.7rem, 4.2vw, 2.35rem);
    }

    .hero-slide__lede {
        font-size: .74rem;
    }

    .hero-slide__actions {
        margin-top: 8px !important;
    }

    .hero-slider__chrome {
        bottom: 8px !important;
        left: auto;
        right: 10px;
        transform: none;
    }

    .hero-trust-rail {
        display: none !important;
    }
}