/* =========================================================
   MG Car Rental — Polished Hero Section CSS
   Replace your current hero.css with this file.
   This version removes duplicate overrides and fixes layout overlap.
========================================================= */

.hero-booking-section {
    padding: 120px 0 60px;
    background:
        radial-gradient(circle at 90% 12%, rgba(24, 115, 70, 0.10), transparent 30%),
        linear-gradient(180deg, #f5fbfd 0%, #ffffff 100%);
    overflow: hidden;
    scroll-margin-top: 120px;
}

.hero-booking-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 34px;
    align-items: center;
    padding: 46px;
    border-radius: 32px;
    background:
        linear-gradient(115deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 48%, rgba(235,247,255,.95) 100%);
    border: 1px solid rgba(214, 230, 238, .95);
    box-shadow: 0 24px 60px rgba(6, 29, 53, 0.09);
    overflow: visible;
}

.hero-booking-shell > * {
    min-width: 0;
}

.hero-copy {
    position: relative;
    z-index: 3;
    max-width: 650px;
}

.hero-badge,
.hero-car-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 10px 18px;
    border-radius: 999px;
    background: #e8f5ef;
    color: #187346;
    font-size: .86rem;
    font-weight: 900;
    margin-bottom: 22px;
}

.hero-title {
    max-width: 680px;
    color: #0b3765;
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: .98;
    letter-spacing: -0.055em;
    font-weight: 950;
    margin-bottom: 22px;
    text-wrap: balance;
}

.hero-title span {
    color: #187346;
}

.hero-description {
    max-width: 560px;
    color: #556474;
    font-size: clamp(1rem, 1.18vw, 1.14rem);
    line-height: 1.62;
    font-weight: 700;
    margin-bottom: 32px;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.hero-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-right: 12px;
    border-right: 1px solid #dfe8ee;
    transition: transform .2s ease;
}

.hero-feature:hover {
    transform: translateY(-2px);
}

.hero-feature:last-child {
    border-right: 0;
}

.hero-feature i {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #e8f5ef;
    color: #187346;
    font-size: 1.2rem;
}

.hero-feature strong {
    display: block;
    color: #0b3765;
    font-size: .88rem;
    font-weight: 950;
    margin-bottom: 4px;
}

.hero-feature small {
    display: block;
    color: #5b6673;
    line-height: 1.45;
    font-weight: 700;
}

.hero-showcase-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    min-height: 430px;
    padding: 34px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            90deg,
            rgba(239,248,255,.97) 0%,
            rgba(239,248,255,.78) 44%,
            rgba(239,248,255,.22) 100%
        ),
        url("/images/hero/car-for-rent-in-la-union-honda-city.avif") center right / cover no-repeat;
    border: 1px solid rgba(255,255,255,.72);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.65),
        0 16px 45px rgba(6,29,53,.08);
}

.hero-showcase-card::after {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -18%;
    width: 58%;
    height: 45%;
    background: radial-gradient(circle, rgba(24,115,70,.18), transparent 68%);
    z-index: 1;
    pointer-events: none;
}

.hero-car-content {
    position: relative;
    z-index: 3;
    max-width: 360px;
}

.hero-showcase-card h2 {
    color: #0b3765;
    font-size: clamp(2.4rem, 4vw, 4rem);
    line-height: .98;
    letter-spacing: -0.045em;
    font-weight: 950;
    margin-bottom: 16px;
}

.hero-showcase-card p {
    color: #4f5d6c;
    line-height: 1.55;
    font-weight: 750;
    margin-bottom: 24px;
}

.hero-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 14px;
    border: 1px solid #c9d8e4;
    background: rgba(255,255,255,.88);
    color: #102033;
    font-weight: 950;
    text-decoration: none;
    transition: transform .25s ease, color .25s ease, border-color .25s ease;
}

.hero-details-btn:hover {
    transform: translateY(-2px);
    color: #187346;
    border-color: #187346;
}

.hero-car-image-wrap {
    display: none;
}

.hero-car-image {
    display: block;
    width: 100%;
    height: auto;
}

.hero-search-form {
    position: relative;
    z-index: 5;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.05fr;
    gap: 18px;
    align-items: end;
    padding: 24px;
    margin-top: 4px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(217, 229, 236, .98);
    box-shadow: 0 18px 45px rgba(6, 29, 53, 0.10);
    width: 100%;
    max-width: 100%;
}

.hero-field-group {
    display: grid;
    gap: 10px;
}

.hero-field-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #344557;
    font-size: .88rem;
    font-weight: 950;
}

.hero-field-group label i {
    color: #187346;
}

.hero-input {
    width: 100%;
    height: 58px;
    border: 1px solid #d7e3eb;
    border-radius: 16px;
    padding: 0 18px;
    color: #102033;
    font-weight: 800;
    background: #ffffff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hero-input:hover {
    border-color: #b8cbd8;
}

.hero-input:focus {
    border-color: #187346;
    box-shadow: 0 0 0 4px rgba(24, 115, 70, 0.10);
}

.hero-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    border: 0;
    border-radius: 16px;
    background: #187346;
    color: #ffffff;
    font-weight: 950;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(24, 115, 70, 0.24);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.hero-search-btn:hover {
    transform: translateY(-2px);
    background: #126339;
    box-shadow: 0 16px 32px rgba(24, 115, 70, 0.28);
}

.hero-search-btn i {
    margin-right: 8px;
}

.hero-trust-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 42px;
    color: #344557;
    font-size: .9rem;
    font-weight: 900;
}

.hero-trust-row div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform .2s ease;
}

.hero-trust-row div:hover {
    transform: translateY(-2px);
}

.hero-trust-row i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e8f5ef;
    color: #187346;
}

.hero-car-slider .owl-dots,
.hero-car-slider .owl-nav,
.hero-showcase-card .owl-dots,
.hero-showcase-card .owl-nav {
    display: none !important;
}

/* Header protection */
.site-header,
.main-header,
.header-area,
.navbar {
    z-index: 999;
}

/* Tablet */
@media (max-width: 1199px) {
    .hero-booking-shell {
        padding: 38px;
        gap: 28px;
    }

    .hero-title {
        font-size: clamp(2.8rem, 5vw, 4.4rem);
    }

    .hero-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-feature {
        border-right: 0;
        padding-right: 0;
    }
}

@media (max-width: 991px) {
    .hero-booking-section {
        padding-top: 105px;
    }

    .hero-booking-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-showcase-card {
        min-height: 400px;
        background-position: center right;
    }

    .hero-search-form {
        grid-template-columns: 1fr 1fr;
        margin-top: 0;
    }
}

@media (max-width: 767px) {

    .hero-booking-section {
        padding: 105px 0 40px;
    }

    .hero-booking-shell {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        border-radius: 24px;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    .hero-copy {
        display: block;
        max-width: 100%;
    }

    .hero-badge {
        margin-bottom: 14px;
        font-size: .74rem;
    }

    .hero-title {
        font-size: clamp(2.25rem, 11vw, 3.25rem);
        letter-spacing: -0.035em;
        margin-bottom: 14px;
    }

    .hero-description {
        margin-bottom: 18px;
        font-size: .96rem;
        line-height: 1.55;
    }

    /* FEATURED CAR */
    .hero-showcase-card {
        order: 1;
        min-height: 400px;
        padding: 22px;
        border-radius: 24px;

        background:
            linear-gradient(
                180deg,
                rgba(239,248,255,.96) 0%,
                rgba(239,248,255,.72) 45%,
                rgba(239,248,255,.20) 100%
            ),
            url("/images/hero/car-for-rent-in-la-union-honda-city.avif")
            center bottom / cover no-repeat;
    }

    .hero-car-content {
        max-width: 100%;
    }

    .hero-car-label {
        font-size: .72rem;
        padding: 8px 14px;
        margin-bottom: 14px;
    }

    .hero-showcase-card h2 {
        font-size: clamp(2.4rem, 12vw, 3.3rem);
        line-height: .95;
        margin-bottom: 10px;
    }

    .hero-showcase-card p {
        max-width: 260px;
        font-size: .92rem;
        line-height: 1.45;
        margin-bottom: 18px;
    }

    .hero-details-btn {
        min-height: 48px;
        padding: 0 18px;
        border-radius: 14px;
        font-size: .9rem;
    }

    /* FEATURES BELOW CAR */
    .hero-features {
        order: 2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .hero-feature {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px;
        border: 0;
        border-radius: 16px;
        background: #f7fbfc;
    }

    .hero-feature i {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
        font-size: .92rem;
    }

    .hero-feature strong {
        font-size: .74rem;
        line-height: 1.2;
    }

    .hero-feature small {
        font-size: .66rem;
        line-height: 1.25;
    }

    /* FORM HORIZONTAL */
    .hero-search-form {
        order: 3;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 16px;
        margin-top: 0;
        border-radius: 22px;
        width: 100%;
        max-width: 100%;
    }

    .hero-field-group {
        gap: 6px;
    }

    .hero-field-group label {
        font-size: .72rem;
    }

    .hero-input {
        height: 50px;
        border-radius: 14px;
        font-size: .84rem;
        min-width: 0;
    }

    .hero-search-btn {
        grid-column: 1 / -1;
        height: 52px;
        border-radius: 14px;
        font-size: .92rem;
    }

    /* TRUST ROW */
    .hero-trust-row {
        order: 4;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        font-size: .72rem;
    }

    .hero-trust-row i {
        width: 28px;
        height: 28px;
        font-size: .72rem;
    }
}

@media (max-width: 480px) {
    .hero-booking-section > .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-booking-shell {
        padding: 14px;
        border-radius: 22px;
    }

    .hero-showcase-card {
        min-height: 370px;
        padding: 20px;
    }

    .hero-showcase-card h2 {
        font-size: 2.75rem;
    }

    .hero-search-form {
        grid-template-columns: 1fr;
    }

    .hero-trust-row {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-trust-row div {
        justify-content: flex-start;
        width: 100%;
    }
}

/* 2026-05-24 design cleanup: reduce duplicated header gap and use clean car art */
.hero-booking-section {
    padding: 56px 0 56px;
    scroll-margin-top: 96px;
}

.hero-showcase-card {
    background:
        linear-gradient(
            90deg,
            rgba(239,248,255,.98) 0%,
            rgba(239,248,255,.84) 43%,
            rgba(239,248,255,.34) 100%
        ),
        url("/images/fleet/honda-city-red-car-for-rent-in-la-union.avif") center right / cover no-repeat;
}

.hero-showcase-card h2,
.hero-showcase-card p {
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

@media (max-width: 991px) {
    .hero-booking-section {
        padding: 42px 0 42px;
        scroll-margin-top: 90px;
    }
}

@media (max-width: 767px) {
    .hero-booking-section {
        padding: 18px 0 34px;
    }

    .hero-showcase-card {
        background:
            linear-gradient(
                180deg,
                rgba(239,248,255,.98) 0%,
                rgba(239,248,255,.80) 45%,
                rgba(239,248,255,.28) 100%
            ),
            url("/images/fleet/honda-city-red-car-for-rent-in-la-union.avif") center / cover no-repeat;
    }
}

/* =========================================================
   2026 Modern Journey Hero — road background + floating form
   Inspired by premium travel/car booking layouts.
========================================================= */
.hero-drive-section {
    position: relative;
    min-height: 720px;
    padding: 92px 0 70px;
    background: #071827;
    overflow: hidden;
    isolation: isolate;
}

.hero-drive-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(7,24,39,.92) 0%, rgba(7,24,39,.78) 34%, rgba(7,24,39,.32) 58%, rgba(7,24,39,.12) 100%),
        linear-gradient(180deg, rgba(7,24,39,.18) 0%, rgba(7,24,39,.44) 100%),
        url("/images/hero/mg-car-rental-road-hero-bright.webp") center / cover no-repeat;
    transform: scale(1.02);
}

.hero-drive-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 75% 30%, rgba(255, 190, 96, .20), transparent 28%),
        radial-gradient(circle at 24% 22%, rgba(0, 118, 182, .16), transparent 26%),
        linear-gradient(180deg, rgba(7,24,39,0) 72%, rgba(7,24,39,.42) 100%);
    pointer-events: none;
}

.hero-drive-container {
    position: relative;
    z-index: 2;
}

.hero-drive-shell {
    min-height: 575px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    grid-template-areas: "copy form";
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(28px, 5vw, 64px);
    border-radius: 32px;
    background: rgba(7,24,39,.12);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 28px 80px rgba(0,0,0,.28);
    overflow: hidden;
    backdrop-filter: blur(2px);
}

.hero-drive-shell::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: min(58%, 720px);
    background: linear-gradient(90deg, rgba(7,24,39,.66), rgba(7,24,39,.30) 68%, transparent);
    pointer-events: none;
}

.hero-drive-copy {
    grid-area: copy;
    position: relative;
    z-index: 4;
    max-width: 660px;
}

.hero-drive-copy .hero-badge {
    margin-bottom: 20px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    color: #ffffff;
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.hero-drive-copy .hero-title {
    max-width: 650px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(3rem, 6vw, 5.75rem);
    line-height: .88;
    letter-spacing: -.065em;
    text-shadow: 0 12px 36px rgba(0,0,0,.34);
}

.hero-drive-copy .hero-title span {
    display: block;
    color: #ffffff;
    font-size: .62em;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.hero-drive-copy .hero-description {
    max-width: 560px;
    margin: 0 0 26px;
    color: rgba(255,255,255,.88);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.58;
    font-weight: 650;
    text-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.hero-primary-link,
.hero-secondary-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}

.hero-primary-link {
    color: #ffffff;
    background: #0b66b2;
    box-shadow: 0 16px 30px rgba(11,102,178,.28);
}

.hero-secondary-link {
    color: #ffffff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.32);
    backdrop-filter: blur(10px);
}

.hero-primary-link:hover,
.hero-secondary-link:hover {
    transform: translateY(-2px);
}

.hero-primary-link:hover {
    background: #095795;
    color: #ffffff;
}

.hero-secondary-link:hover {
    background: rgba(255,255,255,.18);
    color: #ffffff;
}

.hero-road-visual {
    position: absolute;
    z-index: 3;
    left: 35%;
    right: 23%;
    bottom: 7%;
    min-height: 330px;
    pointer-events: none;
}

.hero-road-car {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(650px, 48vw);
    max-width: none;
    height: auto;
    filter: drop-shadow(0 34px 34px rgba(0,0,0,.42));
    transform: translateX(6%);
}

.hero-floating-form {
    grid-area: form;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    max-width: 390px;
    justify-self: end;
    margin: 0;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.68);
    box-shadow: 0 26px 56px rgba(0,0,0,.25);
    backdrop-filter: blur(14px);
}

.hero-form-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: -8px -8px 2px;
    padding: 4px;
    border-radius: 14px;
    background: #eef5fb;
}

.hero-form-tab {
    min-height: 42px;
    border: 0;
    border-radius: 11px;
    color: #344557;
    background: transparent;
    font-size: .85rem;
    font-weight: 950;
    cursor: default;
}

.hero-form-tab.is-active {
    color: #0b66b2;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(6,29,53,.10);
}

.hero-floating-form .hero-field-group {
    gap: 7px;
}

.hero-floating-form .hero-field-group label {
    color: #1e3144;
    font-size: .78rem;
    font-weight: 950;
}

.hero-input-with-icon {
    position: relative;
}

.hero-input-with-icon > i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    transform: translateY(-50%);
    color: #0b66b2;
    font-size: .95rem;
    pointer-events: none;
}

.hero-floating-form .hero-input {
    height: 47px;
    width: 100%;
    padding: 0 14px 0 40px;
    border: 1px solid #d7e3eb;
    border-radius: 12px;
    background: #ffffff;
    color: #102033;
    font-size: .88rem;
    font-weight: 800;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

.hero-floating-form select.hero-input {
    padding-right: 34px;
}

.hero-floating-form .hero-input:focus {
    border-color: #0b66b2;
    box-shadow: 0 0 0 4px rgba(11,102,178,.12);
}

.hero-floating-form .hero-search-btn {
    height: 52px;
    margin-top: 2px;
    border-radius: 12px;
    background: #0b66b2;
    box-shadow: 0 14px 28px rgba(11,102,178,.25);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.hero-floating-form .hero-search-btn:hover {
    background: #095795;
    box-shadow: 0 18px 34px rgba(11,102,178,.30);
}

.hero-floating-form .hero-search-btn i {
    margin: 0 0 0 8px;
}

.hero-trust-inline {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.90);
    font-size: .82rem;
    font-weight: 850;
}

.hero-trust-inline div {
    gap: 7px;
}

.hero-trust-inline i {
    width: auto;
    height: auto;
    color: #f7c948;
    background: transparent;
}

.hero-trust-inline div:nth-child(2) i {
    color: #6ee7b7;
}

.hero-trust-inline div:nth-child(3) i {
    color: #93c5fd;
}

@media (max-width: 1199px) {
    .hero-drive-shell {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        padding: 42px;
    }

    .hero-road-visual {
        left: 32%;
        right: 26%;
    }

    .hero-road-car {
        width: min(540px, 45vw);
    }
}

@media (max-width: 991px) {
    .hero-drive-section {
        min-height: auto;
        padding: 72px 0 50px;
    }

    .hero-drive-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "form";
        min-height: auto;
        padding: 34px;
    }

    .hero-road-visual {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        min-height: 260px;
        order: 2;
        margin: -28px 0 -10px;
    }

    .hero-road-car {
        position: absolute;
        right: 50%;
        bottom: 0;
        width: min(520px, 82vw);
        transform: translateX(52%);
    }

    .hero-floating-form {
        justify-self: start;
        max-width: 100%;
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .hero-drive-section {
        padding: 18px 0 34px;
    }

    .hero-drive-bg {
        background:
            linear-gradient(180deg, rgba(7,24,39,.90) 0%, rgba(7,24,39,.62) 46%, rgba(7,24,39,.28) 100%),
            url("/images/hero/mg-car-rental-road-hero-bright.webp") center / cover no-repeat;
    }

    .hero-drive-shell {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "form";
        gap: 18px;
        padding: 22px;
        border-radius: 24px;
        background: rgba(7,24,39,.18);
    }

    .hero-drive-shell::before {
        width: 100%;
        background: linear-gradient(180deg, rgba(7,24,39,.58), rgba(7,24,39,.10));
    }

    .hero-drive-copy .hero-badge {
        font-size: .72rem;
        padding: 8px 12px;
        margin-bottom: 14px;
    }

    .hero-drive-copy .hero-title {
        font-size: clamp(2.65rem, 13vw, 4.1rem);
        line-height: .90;
        margin-bottom: 14px;
    }

    .hero-drive-copy .hero-description {
        font-size: .95rem;
        margin-bottom: 18px;
    }

    .hero-actions {
        gap: 10px;
        margin-bottom: 18px;
    }

    .hero-primary-link,
    .hero-secondary-link {
        min-height: 44px;
        padding: 0 16px;
        font-size: .78rem;
    }

    .hero-road-visual {
        display: none;
    }

    .hero-floating-form {
        order: initial;
        grid-template-columns: 1fr;
        padding: 16px;
        border-radius: 18px;
    }

    .hero-form-tabs {
        margin: -4px -4px 0;
    }

    .hero-floating-form .hero-input {
        height: 48px;
        font-size: .84rem;
    }

    .hero-floating-form .hero-search-btn {
        height: 50px;
        font-size: .9rem;
    }

    .hero-trust-inline {
        gap: 10px;
        font-size: .72rem;
    }
}

@media (max-width: 480px) {
    .hero-drive-section > .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-drive-shell {
        padding: 18px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-trust-inline {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-trust-inline div {
        width: auto;
    }
}

@media (max-width: 991px) {
    .hero-road-visual {
        grid-area: car;
    }

    .hero-drive-shell {
        grid-template-areas:
            "copy"
            "car"
            "form";
    }
}

@media (max-width: 767px) {
    .hero-drive-shell {
        grid-template-areas:
            "copy"
            "form";
    }
}


/* =========================================================
   2026-05-30 refinement — ground the hero car to the road
========================================================= */
.hero-drive-shell {
    overflow: visible;
}

.hero-road-visual {
    position: absolute;
    z-index: 3;
    left: 36%;
    right: 22%;
    bottom: 1.5%;
    min-height: 320px;
    pointer-events: none;
}

.hero-road-glow {
    position: absolute;
    right: 8%;
    bottom: 36px;
    width: min(410px, 30vw);
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,214,138,.18) 0%, rgba(255,214,138,.10) 42%, rgba(255,214,138,0) 74%);
    filter: blur(16px);
    opacity: .9;
}

.hero-road-shadow {
    position: absolute;
    right: 10%;
    bottom: 18px;
    width: min(420px, 31vw);
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.40) 0%, rgba(0,0,0,.26) 42%, rgba(0,0,0,.08) 62%, rgba(0,0,0,0) 76%);
    filter: blur(12px);
    transform: perspective(400px) rotateX(70deg) skewX(-18deg);
    transform-origin: center;
}

.hero-road-contact-shadow {
    position: absolute;
    bottom: 34px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.52) 0%, rgba(0,0,0,.22) 58%, rgba(0,0,0,0) 100%);
    filter: blur(7px);
}

.hero-road-contact-shadow-front {
    right: min(11%, 78px);
    width: min(112px, 8vw);
}

.hero-road-contact-shadow-rear {
    right: min(48%, 290px);
    width: min(124px, 8.8vw);
}

.hero-road-car {
    position: absolute;
    right: 2%;
    bottom: 16px;
    width: min(580px, 43vw);
    max-width: none;
    height: auto;
    filter: drop-shadow(0 26px 34px rgba(0,0,0,.30)) drop-shadow(0 10px 18px rgba(0,0,0,.14));
    transform: translateX(0) rotate(-1.2deg);
    transform-origin: bottom center;
}

@media (max-width: 1199px) {
    .hero-road-visual {
        left: 34%;
        right: 23%;
        bottom: 1%;
    }

    .hero-road-car {
        width: min(520px, 42vw);
    }

    .hero-road-shadow {
        width: min(370px, 30vw);
    }
}

@media (max-width: 991px) {
    .hero-road-visual {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        min-height: 250px;
        order: 2;
        margin: -16px 0 0;
    }

    .hero-road-glow {
        right: 50%;
        bottom: 26px;
        width: min(320px, 58vw);
        transform: translateX(50%);
    }

    .hero-road-shadow {
        right: 50%;
        bottom: 10px;
        width: min(320px, 60vw);
        transform: translateX(50%) perspective(400px) rotateX(70deg) skewX(-12deg);
    }

    .hero-road-contact-shadow-front {
        right: calc(50% - 98px);
        width: 84px;
        bottom: 22px;
    }

    .hero-road-contact-shadow-rear {
        right: calc(50% + 44px);
        width: 92px;
        bottom: 24px;
    }

    .hero-road-car {
        right: 50%;
        bottom: 10px;
        width: min(480px, 78vw);
        transform: translateX(50%) rotate(-1deg);
    }
}

@media (max-width: 767px) {
    .hero-road-visual,
    .hero-road-glow,
    .hero-road-shadow,
    .hero-road-contact-shadow {
        display: none;
    }
}

/* 2026-05-30 quick-search hero with generated road background */
.hero-drive-section {
    min-height: min(760px, calc(100vh - 24px));
    padding: 52px 0;
    background:
        linear-gradient(90deg, rgba(5,18,30,.50) 0%, rgba(5,18,30,.34) 34%, rgba(5,18,30,.10) 58%, rgba(5,18,30,0) 100%),
        linear-gradient(180deg, rgba(5,18,30,0) 0%, rgba(5,18,30,.14) 100%),
        url("/images/hero/mg-car-rental-road-hero-bright.webp") center / cover no-repeat,
        #dbeaf0;
}

.hero-drive-bg {
    display: none;
    background:
        linear-gradient(90deg, rgba(5,18,30,.50) 0%, rgba(5,18,30,.34) 34%, rgba(5,18,30,.10) 58%, rgba(5,18,30,0) 100%),
        linear-gradient(180deg, rgba(5,18,30,0) 0%, rgba(5,18,30,.14) 100%),
        url("/images/hero/mg-car-rental-road-hero-bright.webp") center / cover no-repeat;
    transform: none;
}

.hero-drive-section::before {
    background:
        radial-gradient(circle at 78% 24%, rgba(255, 185, 96, .18), transparent 25%),
        linear-gradient(180deg, rgba(7,24,39,0) 70%, rgba(7,24,39,.46) 100%);
}

.hero-drive-shell {
    min-height: 560px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: clamp(28px, 5vw, 72px);
    padding: clamp(28px, 5vw, 58px);
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.14);
    box-shadow: none;
    backdrop-filter: none;
}

.hero-drive-shell::before {
    width: min(52%, 670px);
    background: linear-gradient(90deg, rgba(4,16,28,.42), rgba(4,16,28,.12) 68%, transparent);
}

.hero-drive-copy .hero-badge {
    color: #ffffff;
    background: rgba(255,255,255,.12);
}

.hero-drive-copy .hero-title {
    max-width: 610px;
    font-size: clamp(2.75rem, 5vw, 4.7rem);
    line-height: .96;
    letter-spacing: 0;
}

.hero-drive-copy .hero-description {
    max-width: 520px;
}

.hero-road-visual {
    display: none;
}

.hero-floating-form {
    align-self: center;
    gap: 13px;
    max-width: 370px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 24px 52px rgba(0,0,0,.28);
}

.hero-quick-search-heading {
    display: grid;
    gap: 3px;
    padding: 2px 2px 4px;
}

.hero-quick-search-heading span {
    color: #0b66b2;
    font-size: .74rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hero-quick-search-heading strong {
    color: #102033;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1.15;
}

.hero-floating-form .hero-field-group label {
    color: #26394d;
    font-size: .76rem;
}

.hero-floating-form .hero-input {
    height: 46px;
    border-radius: 11px;
}

.hero-floating-form .hero-search-btn {
    height: 50px;
    border-radius: 11px;
}

@media (max-width: 991px) {
    .hero-drive-section {
        min-height: auto;
        padding: 36px 0;
        background:
            linear-gradient(180deg, rgba(5,18,30,.52) 0%, rgba(5,18,30,.36) 45%, rgba(5,18,30,.28) 100%),
            url("/images/hero/mg-car-rental-road-hero-bright.webp") center / cover no-repeat,
            #dbeaf0;
    }

    .hero-drive-bg {
        background:
            linear-gradient(180deg, rgba(5,18,30,.52) 0%, rgba(5,18,30,.36) 45%, rgba(5,18,30,.28) 100%),
            url("/images/hero/mg-car-rental-road-hero-bright.webp") center / cover no-repeat;
    }

    .hero-drive-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "form";
        min-height: auto;
    }

    .hero-drive-copy,
    .hero-floating-form {
        width: 100%;
        min-width: 0;
    }

    .hero-floating-form {
        justify-self: stretch;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .hero-drive-section {
        padding: 18px 0 30px;
        background:
            linear-gradient(180deg, rgba(5,18,30,.58) 0%, rgba(5,18,30,.42) 42%, rgba(5,18,30,.34) 100%),
            url("/images/hero/mg-car-rental-road-hero-bright.webp") 58% center / cover no-repeat,
            #dbeaf0;
    }

    .hero-drive-bg {
        background:
            linear-gradient(180deg, rgba(5,18,30,.58) 0%, rgba(5,18,30,.42) 42%, rgba(5,18,30,.34) 100%),
            url("/images/hero/mg-car-rental-road-hero-bright.webp") 58% center / cover no-repeat;
    }

    .hero-drive-shell {
        gap: 18px;
        padding: 20px;
        background: rgba(7,24,39,.16);
    }

    .hero-drive-copy .hero-title {
        max-width: 100%;
        font-size: clamp(2.35rem, 10vw, 3.05rem);
        line-height: .98;
        letter-spacing: 0;
    }

    .hero-drive-copy .hero-badge,
    .hero-drive-copy .hero-badge span {
        max-width: 100%;
        white-space: nowrap;
    }

    .hero-drive-copy .hero-description {
        max-width: 100%;
        font-size: .94rem;
        line-height: 1.5;
    }

    .hero-trust-inline {
        display: none;
    }

    .hero-floating-form {
        width: 100%;
        max-width: 100%;
    }
}