@media (max-width: 720px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + 42px);
        padding-bottom: 30px;
    }

    .hero__background {
        object-position: 58% center;
    }

    .hero__overlay {
        background:
            linear-gradient(90deg, rgba(3, 14, 27, .96) 0%, rgba(4, 20, 38, .78) 58%, rgba(4, 20, 38, .34) 100%),
            linear-gradient(0deg, rgba(4, 18, 34, .91) 0%, rgba(4, 18, 34, .24) 54%, transparent 100%);
    }

    .hero .hero__inner {
        display: block;
        width: calc(100% - (var(--public-mobile-gutter) * 2));
        max-width: none;
        min-width: 0;
        margin-inline: auto;
    }

    .hero__copy {
        display: block;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .hero .eyebrow {
        width: 100%;
        max-width: 260px;
        margin: 0;
        font-size: 10px;
        line-height: 1.45;
        word-break: keep-all;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;
        margin: 17px 0 17px;
        font-size: clamp(35px, 10.4vw, 42px);
        line-height: 1.08;
        letter-spacing: -.05em;
        overflow-wrap: normal;
        word-break: keep-all;
    }

    .hero h1 em {
        display: inline;
    }

    .hero__lead {
        width: 100%;
        max-width: 330px;
        margin: 0;
        font-size: 14px;
        line-height: 1.68;
        letter-spacing: -.018em;
        overflow-wrap: normal;
        word-break: keep-all;
    }

    .hero__actions {
        display: grid;
        width: 100%;
        max-width: 360px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 25px;
    }

    .hero__actions .button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 12px;
        line-height: 1.35;
        text-align: center;
        white-space: normal;
    }

    .hero__metrics {
        display: grid;
        width: 100%;
        max-width: 360px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin: 28px 0 0;
    }

    .hero__metrics div,
    .hero__metrics div:first-child {
        display: flex;
        min-width: 0;
        min-height: 76px;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 8px;
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 12px;
        background: rgba(5, 20, 37, .46);
        backdrop-filter: blur(8px);
    }

    .hero__metrics dt {
        min-height: 27px;
        margin: 0;
        color: rgba(255, 255, 255, .64);
        font-size: 9px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -.015em;
        word-break: keep-all;
    }

    .hero__metrics dd {
        display: flex;
        min-width: 0;
        align-items: baseline;
        margin: 4px 0 0;
        font-size: 20px;
        line-height: 1;
        letter-spacing: -.035em;
        white-space: nowrap;
    }

    .hero__metrics dd span {
        margin-left: 2px;
        font-size: 10px;
        font-weight: 500;
    }

    .hero .search-panel-wrap {
        position: relative;
        inset: auto;
        width: calc(100% - (var(--public-mobile-gutter) * 2));
        max-width: none;
        margin: 26px auto 0;
    }

    .hero .search-panel {
        width: 100%;
        gap: 9px;
        padding: 11px;
        border-radius: 17px;
        box-shadow: 0 17px 42px rgba(3, 15, 29, .24);
    }

    .hero .search-field {
        min-height: 68px;
        padding: 9px 12px;
        border-radius: 12px;
    }

    .hero .search-submit {
        min-height: 50px;
        border-radius: 12px;
    }

    .trust-strip {
        padding-top: 18px;
    }
}

@media (max-width: 380px) {
    .hero h1 {
        font-size: 35px;
    }

    .hero__lead {
        max-width: 305px;
        font-size: 13px;
    }

    .hero__actions .button {
        font-size: 11px;
    }

    .hero__metrics div,
    .hero__metrics div:first-child {
        padding-inline: 7px;
    }

    .hero__metrics dd {
        font-size: 18px;
    }
}