/* ================================================================
   UNIVAS AUTO - HOME PAGE
   Hero slider, vehicle search and trust section
   ================================================================ */

:root {
    --ua-home-red: #ff2d2d;
    --ua-home-orange: #ff7a00;
    --ua-home-blue: #2563ff;
    --ua-home-green: #16c47f;
    --ua-home-navy: #0f172a;
    --ua-home-text: #101828;
    --ua-home-muted: #667085;
    --ua-home-soft: #f6f8fb;
    --ua-home-line: #dce5ef;
}

.ua-home-container {
    width: min(100% - 48px, 1460px);
    margin-inline: auto;
    padding-inline: 0;
}

.ua-home-hero-section {
    position: relative;
    padding-bottom: 0;
    background: #f7f9fc;
}

/* ================================================================
   HERO
   ================================================================ */
.ua-hero,
.ua-hero-carousel,
.ua-hero-carousel .carousel-inner,
.ua-hero-carousel .carousel-item,
.ua-hero-slide {
    min-height: 500px;
}

.ua-hero {
    position: relative;
    overflow: hidden;
    background: #061426;
}

.ua-hero-slide {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.ua-hero-slide__image {
    position: absolute;
    inset: 0;
    z-index: -4;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ua-hero-slide__overlay {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(
            90deg,
            rgba(4, 14, 32, 0.96) 0%,
            rgba(4, 14, 32, 0.87) 28%,
            rgba(4, 14, 32, 0.54) 52%,
            rgba(4, 14, 32, 0.15) 75%,
            rgba(4, 14, 32, 0.07) 100%
        ),
        linear-gradient(180deg, rgba(3, 10, 24, 0.12), rgba(3, 10, 24, 0.3));
}

.ua-hero-slide__blue-light,
.ua-hero-slide__red-light {
    position: absolute;
    z-index: -2;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(66px);
    opacity: 0.28;
}

.ua-hero-slide__blue-light {
    left: -120px;
    bottom: -115px;
    width: 440px;
    height: 260px;
    background: var(--ua-home-blue);
}

.ua-hero-slide__red-light {
    right: -90px;
    bottom: -100px;
    width: 420px;
    height: 240px;
    background: var(--ua-home-red);
}

.ua-hero-copy {
    max-width: 700px;
    padding: 68px 0 130px;
}

.ua-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ua-hero-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1);
}

.ua-hero-title {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(44px, 4.35vw, 68px);
    font-weight: 950;
    letter-spacing: -0.048em;
    line-height: 0.96;
    text-wrap: balance;
}

.ua-hero-title__primary,
.ua-hero-title__highlight {
    display: block;
}

.ua-hero-title__primary {
    color: #fff;
}

.ua-hero-title__highlight {
    color: var(--ua-home-orange);
    text-shadow: 0 8px 28px rgba(255, 122, 0, 0.14);
}

.ua-hero-description {
    max-width: 610px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14.5px;
    font-weight: 540;
    line-height: 1.52;
}

.ua-hero-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 700px);
    margin-top: 22px;
}

.ua-hero-benefit {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 12px;
    background: rgba(7, 18, 37, 0.33);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.ua-hero-benefit__icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ua-hero-benefit__icon svg {
    width: 19px;
    height: 19px;
}

.ua-hero-benefit__icon--1 {
    background: linear-gradient(135deg, #2563ff, #3b82f6);
}
.ua-hero-benefit__icon--2 {
    background: linear-gradient(135deg, #16c47f, #34d399);
}
.ua-hero-benefit__icon--3 {
    background: linear-gradient(135deg, #2563ff, #60a5fa);
}
.ua-hero-benefit__icon--4 {
    background: linear-gradient(135deg, #ff2d55, #ff5c5c);
}

.ua-hero-benefit__copy {
    min-width: 0;
}

.ua-hero-benefit strong,
.ua-hero-benefit small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ua-hero-benefit strong {
    color: #fff;
    font-size: 10px;
    font-weight: 850;
}

.ua-hero-benefit small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 8px;
}

.ua-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 22px;
}

.ua-hero-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 19px;
    border: 0;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 850;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.ua-hero-btn svg {
    width: 17px;
    height: 17px;
}

.ua-hero-btn--primary {
    color: #fff;
    background: linear-gradient(
        100deg,
        var(--ua-home-red),
        var(--ua-home-orange)
    );
    box-shadow: 0 12px 28px rgba(255, 45, 45, 0.24);
}

.ua-hero-btn--primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(255, 45, 45, 0.32);
}

.ua-hero-btn--secondary {
    color: var(--ua-home-navy);
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.ua-hero-btn--secondary:hover {
    color: var(--ua-home-red);
    transform: translateY(-2px);
}

.ua-hero-control {
    top: 44%;
    bottom: auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    opacity: 1;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.ua-hero-control:hover {
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    transform: translateY(-1px);
}

.ua-hero-control--prev {
    left: 18px;
}
.ua-hero-control--next {
    right: 18px;
}

.ua-hero-indicators {
    right: auto;
    bottom: 66px;
    left: 50%;
    width: auto;
    margin: 0;
    gap: 8px;
    transform: translateX(-50%);
}

.ua-hero-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    opacity: 1;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.ua-hero-indicators .active {
    background: var(--ua-home-red);
    transform: scale(1.16);
}

.ua-hero-signature {
    position: absolute;
    right: clamp(28px, 4vw, 70px);
    bottom: 80px;
    z-index: 3;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-style: italic;
    line-height: 1.02;
    text-align: right;
    transform: rotate(-5deg);
}

.ua-hero-signature strong {
    color: #fff;
    font-size: 18px;
    font-weight: 850;
}

.ua-hero-empty {
    min-height: 500px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #061426, #102844);
}

/* ================================================================
   SEARCH PANEL
   ================================================================ */
.ua-home-search-wrap {
    position: relative;
    z-index: 20;
    margin-top: -32px;
    transform: none;
}

.ua-car-search {
    overflow: hidden;
    border: 1px solid rgba(214, 224, 236, 0.94);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.995);
    box-shadow:
        0 26px 65px rgba(15, 23, 42, 0.16),
        0 8px 22px rgba(15, 23, 42, 0.06);
}

.ua-car-search__intro {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 148px;
    padding: 26px 22px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--ua-home-red) 0%,
        #ff4035 44%,
        var(--ua-home-orange) 100%
    );
}

.ua-car-search__intro::after {
    content: "";
    position: absolute;
    top: -42px;
    right: -62px;
    z-index: -1;
    width: 150px;
    height: 230px;
    background: rgba(255, 255, 255, 0.14);
    transform: rotate(23deg);
}

.ua-car-search__intro-icon {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    place-items: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.ua-car-search__intro-icon svg {
    width: 24px;
    height: 24px;
}

.ua-car-search__intro h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

.ua-car-search__intro p {
    margin: 9px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11.5px;
    line-height: 1.5;
}

.ua-car-search__form {
    min-height: 148px;
    padding: 17px 20px 19px;
}

.ua-car-search__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.ua-car-search__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ua-car-search__tab {
    min-height: 33px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    color: #344054;
    background: #f8fafc;
    font-size: 10.5px;
    font-weight: 800;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ua-car-search__tab:hover,
.ua-car-search__tab.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(
        100deg,
        var(--ua-home-red),
        var(--ua-home-orange)
    );
    box-shadow: 0 7px 16px rgba(255, 45, 45, 0.15);
}

.ua-car-search__tab-icon,
.ua-car-search__tab-icon svg {
    width: 14px;
    height: 14px;
}

.ua-car-search__count {
    min-width: 110px;
    align-items: flex-end;
    flex-direction: column;
    text-align: right;
}

.ua-car-search__count strong {
    color: var(--ua-home-red);
    font-size: 23px;
    font-weight: 950;
    line-height: 1;
}

.ua-car-search__count span {
    margin-top: 4px;
    color: var(--ua-home-muted);
    font-size: 9.5px;
    font-weight: 750;
}

.ua-car-search__fields label {
    display: block;
    margin-bottom: 5px;
    color: #344054;
    font-size: 10px;
    font-weight: 800;
}

.ua-car-search__fields .form-select {
    min-height: 42px;
    border-color: #d7e1ec;
    border-radius: 8px;
    color: #172033;
    background-color: #fff;
    font-size: 11px;
    font-weight: 650;
    box-shadow: none;
}

.ua-car-search__fields .form-select:focus {
    border-color: rgba(37, 99, 255, 0.65);
    box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.08);
}

.ua-car-search__submit {
    min-width: 158px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 18px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(
        100deg,
        var(--ua-home-red),
        var(--ua-home-orange)
    );
    box-shadow: 0 10px 22px rgba(255, 45, 45, 0.2);
    font-size: 11.5px;
    font-weight: 850;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ua-car-search__submit:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 27px rgba(255, 45, 45, 0.28);
}

.ua-car-search__submit svg {
    width: 16px;
    height: 16px;
}

/* ================================================================
   WHY CHOOSE UNIVAS AUTO
   ================================================================ */
.ua-home-trust-section {
    padding: 30px 0 68px;
    background: linear-gradient(180deg, #ffffff, #f7f9fc);
}

.ua-section-heading {
    max-width: 760px;
    margin-inline: auto;
}

.ua-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ua-home-red);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ua-section-eyebrow::before,
.ua-section-eyebrow::after {
    content: "";
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--ua-home-red),
        var(--ua-home-orange)
    );
}

.ua-section-heading h2 {
    margin: 11px 0 0;
    color: var(--ua-home-text);
    font-size: clamp(31px, 3vw, 46px);
    font-weight: 920;
    letter-spacing: -0.045em;
}

.ua-section-heading p {
    margin: 9px 0 0;
    color: var(--ua-home-muted);
    font-size: 13px;
}

.ua-trust-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 22px;
    border: 1px solid #e6edf4;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.ua-trust-card:hover {
    transform: translateY(-4px);
    border-color: #dae5f0;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09);
}

.ua-trust-card__icon {
    display: grid;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    place-items: center;
    border-radius: 16px;
    color: #fff;
}

.ua-trust-card__icon svg {
    width: 24px;
    height: 24px;
}

.ua-trust-card__icon--red {
    background: linear-gradient(135deg, #ff203c, #ff4b5d);
}
.ua-trust-card__icon--green {
    background: linear-gradient(135deg, #12b76a, #32d583);
}
.ua-trust-card__icon--blue {
    background: linear-gradient(135deg, #2563ff, #4f8cff);
}
.ua-trust-card__icon--orange {
    background: linear-gradient(135deg, #ff6b00, #ff9a2f);
}

.ua-trust-card h3 {
    margin: 2px 0 0;
    color: #111827;
    font-size: 15px;
    font-weight: 850;
}

.ua-trust-card p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.55;
}

/* ================================================================
   DESKTOP HERO / SEARCH COMPOSITION
   Keeps the search card tucked into the bottom edge of the hero,
   matching the original Univas Auto design reference.
   ================================================================ */
@media (min-width: 1200px) {
    .ua-hero,
    .ua-hero-carousel,
    .ua-hero-carousel .carousel-inner,
    .ua-hero-carousel .carousel-item,
    .ua-hero-slide {
        min-height: 510px;
    }

    .ua-hero-copy {
        max-width: 650px;
        padding: 64px 0 92px;
    }

    .ua-hero-benefits {
        width: min(100%, 650px);
        margin-top: 20px;
    }

    .ua-hero-actions {
        margin-top: 20px;
    }

    .ua-hero-indicators {
        bottom: 28px;
    }

    .ua-hero-signature {
        bottom: 34px;
    }

    .ua-home-search-wrap {
        margin-top: -34px;
    }

    .ua-car-search__intro,
    .ua-car-search__form {
        min-height: 142px;
    }

    .ua-car-search__intro {
        padding: 25px 20px;
    }

    .ua-car-search__form {
        padding: 16px 20px 18px;
    }

    .ua-home-trust-section {
        padding-top: 34px;
    }
}

@media (min-width: 1440px) {
    .ua-home-container {
        width: min(100% - 72px, 1540px);
    }

    .ua-home-search-wrap {
        margin-top: -38px;
    }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1199.98px) {
    .ua-home-hero-section {
        padding-bottom: 0;
    }

    .ua-hero-copy {
        padding-bottom: 118px;
    }

    .ua-home-search-wrap {
        margin-top: -28px;
    }

    .ua-hero-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 550px;
    }

    .ua-hero-signature {
        display: none;
    }

    .ua-car-search__intro,
    .ua-car-search__form {
        min-height: 174px;
    }
}

@media (max-width: 991.98px) {
    .ua-home-hero-section {
        padding-bottom: 0;
    }

    .ua-hero,
    .ua-hero-carousel,
    .ua-hero-carousel .carousel-inner,
    .ua-hero-carousel .carousel-item,
    .ua-hero-slide {
        min-height: 640px;
    }

    .ua-hero-slide__image {
        object-position: 62% center;
    }

    .ua-hero-slide__overlay {
        background: linear-gradient(
            90deg,
            rgba(3, 12, 28, 0.97) 0%,
            rgba(3, 12, 28, 0.85) 58%,
            rgba(3, 12, 28, 0.44) 100%
        );
    }

    .ua-hero-copy {
        max-width: 620px;
        padding: 72px 0 105px;
    }

    .ua-home-search-wrap {
        position: relative;
        transform: none;
        margin-top: -54px;
        padding-bottom: 30px;
    }

    .ua-car-search__intro,
    .ua-car-search__form {
        min-height: auto;
    }

    .ua-home-trust-section {
        padding-top: 18px;
    }
}

@media (max-width: 767.98px) {
    .ua-home-container {
        width: min(100% - 24px, 1460px);
    }

    .ua-hero,
    .ua-hero-carousel,
    .ua-hero-carousel .carousel-inner,
    .ua-hero-carousel .carousel-item,
    .ua-hero-slide {
        min-height: 700px;
    }

    .ua-hero-slide__image {
        object-position: 68% center;
    }

    .ua-hero-slide__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4, 13, 30, 0.44) 0%,
                rgba(4, 13, 30, 0.85) 42%,
                rgba(4, 13, 30, 0.98) 100%
            ),
            linear-gradient(90deg, rgba(4, 13, 30, 0.65), rgba(4, 13, 30, 0.2));
    }

    .ua-hero-copy {
        display: flex;
        min-height: 700px;
        flex-direction: column;
        justify-content: flex-end;
        padding: 90px 0 125px;
    }

    .ua-hero-title {
        max-width: 94%;
        font-size: clamp(38px, 10.7vw, 52px);
        line-height: 0.98;
        letter-spacing: -0.043em;
    }

    .ua-hero-description {
        max-width: 96%;
        font-size: 13.5px;
        line-height: 1.55;
    }

    .ua-hero-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 18px;
    }

    .ua-hero-benefit {
        padding: 8px;
    }

    .ua-hero-benefit__icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .ua-hero-benefit strong {
        font-size: 9px;
    }

    .ua-hero-benefit small {
        font-size: 7.5px;
    }

    .ua-hero-actions {
        margin-top: 18px;
    }

    .ua-hero-btn {
        min-height: 44px;
        padding-inline: 16px;
        font-size: 10.5px;
    }

    .ua-hero-control {
        top: 42%;
        width: 40px;
        height: 40px;
    }

    .ua-hero-control--prev {
        left: 12px;
    }
    .ua-hero-control--next {
        right: 12px;
    }

    .ua-home-search-wrap {
        margin-top: -58px;
    }

    .ua-car-search {
        border-radius: 16px;
    }

    .ua-car-search__intro {
        align-items: center;
        padding: 20px;
    }

    .ua-car-search__intro h2 {
        font-size: 19px;
    }

    .ua-car-search__intro p {
        margin-top: 5px;
    }

    .ua-car-search__form {
        padding: 17px;
    }

    .ua-car-search__top {
        display: block;
    }

    .ua-car-search__tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ua-car-search__tab {
        justify-content: center;
    }

    .ua-home-trust-section {
        padding: 40px 0 50px;
    }
}

@media (max-width: 430px) {
    .ua-hero,
    .ua-hero-carousel,
    .ua-hero-carousel .carousel-inner,
    .ua-hero-carousel .carousel-item,
    .ua-hero-slide,
    .ua-hero-copy {
        min-height: 730px;
    }

    .ua-hero-title {
        max-width: 96%;
        font-size: clamp(36px, 10.8vw, 44px);
        line-height: 0.99;
        letter-spacing: -0.04em;
    }

    .ua-hero-benefit small {
        display: none;
    }

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

    .ua-hero-btn {
        width: 100%;
        padding-inline: 10px;
    }

    .ua-car-search__tabs {
        grid-template-columns: 1fr 1fr;
    }
}

/* ================================================================
   LARGE DESKTOP HERO VISIBILITY REFINEMENT
   Keeps the search panel overlapping the hero while ensuring the
   headline, supporting content, slider dots and signature remain
   fully visible above it.
   ================================================================ */
@media (min-width: 1200px) {
    .ua-hero,
    .ua-hero-carousel,
    .ua-hero-carousel .carousel-inner,
    .ua-hero-carousel .carousel-item,
    .ua-hero-slide {
        min-height: 565px;
    }

    .ua-hero-copy {
        max-width: 630px;
        padding: 34px 0 112px;
    }

    .ua-hero-title {
        max-width: 660px;
        font-size: clamp(46px, 3.65vw, 60px);
        line-height: 0.98;
        letter-spacing: -0.045em;
    }

    .ua-hero-description {
        max-width: 590px;
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.48;
    }

    .ua-hero-benefits {
        width: min(100%, 630px);
        margin-top: 18px;
        gap: 9px;
    }

    .ua-hero-benefit {
        padding: 7px;
    }

    .ua-hero-actions {
        margin-top: 18px;
    }

    .ua-hero-indicators {
        bottom: 76px;
        z-index: 26;
    }

    .ua-hero-signature {
        right: clamp(28px, 3.4vw, 58px);
        bottom: 70px;
        z-index: 25;
    }

    .ua-home-search-wrap {
        z-index: 20;
        margin-top: -46px;
    }

    .ua-home-trust-section {
        padding-top: 30px;
    }
}

@media (min-width: 1440px) {
    .ua-hero,
    .ua-hero-carousel,
    .ua-hero-carousel .carousel-inner,
    .ua-hero-carousel .carousel-item,
    .ua-hero-slide {
        min-height: 580px;
    }

    .ua-hero-copy {
        padding-top: 38px;
        padding-bottom: 118px;
    }

    .ua-hero-title {
        font-size: clamp(50px, 3.55vw, 62px);
    }

    .ua-hero-indicators {
        bottom: 82px;
    }

    .ua-hero-signature {
        bottom: 76px;
    }

    .ua-home-search-wrap {
        margin-top: -50px;
    }
}

/* ================================================================
   CAROUSEL CONTROL SAFE-ZONE REFINEMENT
   Keeps navigation arrows clear of hero copy on laptop/desktop
   widths and moves them into clean image space on phones.
   ================================================================ */

/* Laptops, tablets and desktop widths where the left edge of the
   content can otherwise sit underneath the previous-slide control. */
@media (min-width: 768px) {
    .ua-hero-copy {
        box-sizing: border-box;
        padding-left: 52px;
    }

    .ua-hero-control {
        z-index: 30;
    }
}

/* On larger desktop screens keep the arrows exactly on the outer
   edges, but preserve a dedicated navigation rail before the copy. */
@media (min-width: 1200px) {
    .ua-hero-copy {
        padding-left: 48px;
    }

    .ua-hero-control--prev {
        left: 18px;
    }

    .ua-hero-control--next {
        right: 18px;
    }
}

@media (min-width: 1440px) {
    .ua-hero-copy {
        padding-left: 42px;
    }
}

/* Phones: the content is bottom aligned, so the cleanest place for
   the carousel controls is the upper image area. This keeps both
   arrows easy to reach without covering headlines, benefits or CTAs. */
@media (max-width: 767.98px) {
    .ua-hero-control {
        top: 86px;
        bottom: auto;
        width: 38px;
        height: 38px;
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(6, 20, 38, 0.64);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .ua-hero-control--prev {
        left: 12px;
    }

    .ua-hero-control--next {
        right: 12px;
    }

    .ua-hero-control span {
        font-size: 17px;
        line-height: 1;
    }
}

@media (max-width: 430px) {
    .ua-hero-control {
        top: 76px;
        width: 36px;
        height: 36px;
    }

    .ua-hero-control--prev {
        left: 10px;
    }

    .ua-hero-control--next {
        right: 10px;
    }
}

/* ================================================================
   FINAL HERO NAVIGATION + VISIBILITY REFINEMENT
   - Desktop: preserves edge arrows but creates a true safe rail for
     the copy, keeps the signature readable and lifts the indicators.
   - Mobile: moves both arrows into a dedicated bottom navigation
     rail, with indicators centered between them above the search card.
   ================================================================ */

/* Better indicator visibility on every screen size. */
.ua-hero-indicators {
    z-index: 38;
    align-items: center;
}

.ua-hero-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    transition:
        width 0.22s ease,
        transform 0.22s ease,
        background 0.22s ease;
}

.ua-hero-indicators .active {
    width: 24px;
    border-radius: 999px;
    border-color: var(--ua-home-red);
    background: var(--ua-home-red);
    box-shadow: 0 4px 14px rgba(255, 45, 45, 0.34);
    transform: none;
}

/* ---------------------------------------------------------------
   LARGE SCREENS
   --------------------------------------------------------------- */
@media (min-width: 1200px) {
    /* Keep the arrows on the same outer edge positions, but move the
       content itself away from the previous-slide control. */
    .ua-hero-copy {
        box-sizing: border-box;
        margin-left: clamp(48px, 3.2vw, 68px);
        padding-left: 0;
        max-width: 660px;
        transform: translateY(56px);
    }

    .ua-hero-control {
        z-index: 42;
    }

    .ua-hero-control--prev {
        left: 18px;
    }

    .ua-hero-control--next {
        right: 18px;
    }

    /* Leave a clean visual lane above the overlapping search card. */
    .ua-hero-indicators {
        bottom: 90px;
    }

    /* Make the right-hand signature crisp and readable against cars,
       road lights and the brighter sunset backgrounds. */
    .ua-hero-signature {
        right: clamp(30px, 3vw, 54px);
        bottom: 92px;
        z-index: 39;
        padding: 4px 8px;
        color: #ffffff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 15px;
        font-weight: 650;
        line-height: 1.03;
        opacity: 1;
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.92),
            0 0 18px rgba(0, 0, 0, 0.78),
            0 0 28px rgba(255, 45, 45, 0.16);
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
    }

    .ua-hero-signature strong {
        color: #ffffff;
        font-size: 20px;
        font-weight: 850;
        text-shadow:
            0 2px 5px rgba(0, 0, 0, 0.95),
            0 0 18px rgba(0, 0, 0, 0.82);
    }
}

@media (min-width: 1440px) {
    .ua-hero-copy {
        margin-left: clamp(54px, 3.4vw, 76px);
        max-width: 680px;
        transform: translateY(62px);
    }

    .ua-hero-indicators {
        bottom: 96px;
    }

    .ua-hero-signature {
        bottom: 98px;
    }
}

/* ---------------------------------------------------------------
   TABLETS + PHONES
   Give the arrows their own bottom navigation rail instead of
   placing them over the headline/body copy.
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ua-hero,
    .ua-hero-carousel,
    .ua-hero-carousel .carousel-inner,
    .ua-hero-carousel .carousel-item,
    .ua-hero-slide,
    .ua-hero-copy {
        min-height: 700px;
    }

    .ua-hero-copy {
        justify-content: center;
        padding-top: 40px;
        padding-bottom: 132px;
    }

    .ua-hero-control {
        top: auto;
        bottom: 88px;
        width: 40px;
        height: 40px;
        z-index: 42;
        border: 1px solid rgba(255, 255, 255, 0.23);
        background: rgba(5, 17, 36, 0.68);
        box-shadow:
            0 10px 26px rgba(0, 0, 0, 0.25),
            inset 0 0 0 1px rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .ua-hero-control:hover,
    .ua-hero-control:focus-visible {
        background: rgba(7, 22, 45, 0.86);
    }

    .ua-hero-control--prev {
        left: 14px;
    }

    .ua-hero-control--next {
        right: 14px;
    }

    .ua-hero-indicators {
        bottom: 101px;
        z-index: 43;
        gap: 7px;
    }

    .ua-home-search-wrap {
        margin-top: -54px;
    }
}

@media (max-width: 430px) {
    .ua-hero,
    .ua-hero-carousel,
    .ua-hero-carousel .carousel-inner,
    .ua-hero-carousel .carousel-item,
    .ua-hero-slide,
    .ua-hero-copy {
        min-height: 710px;
    }

    .ua-hero-copy {
        justify-content: center;
        padding-top: 32px;
        padding-bottom: 132px;
    }

    .ua-hero-control {
        top: auto;
        bottom: 90px;
        width: 38px;
        height: 38px;
    }

    .ua-hero-control--prev {
        left: 12px;
    }

    .ua-hero-control--next {
        right: 12px;
    }

    .ua-hero-indicators {
        bottom: 102px;
    }
}

/* ================================================================
   FINAL VERTICAL POSITIONING
   Desktop: slightly lower, visually centered copy.
   Mobile: reduced empty image space above copy.
   ================================================================ */
@media (max-width: 1199.98px) {
    .ua-hero-copy {
        transform: none;
    }
}

/* ================================================================
   UNIFORM DESKTOP HERO COPY POSITION
   Anchors EVERY carousel slide to the same vertical start position.
   This avoids different text heights making one slide appear higher
   or lower than another.
   ================================================================ */
@media (min-width: 1200px) {
    .ua-hero-carousel
        .carousel-item
        .ua-hero-slide
        > .ua-home-container
        > .row {
        align-items: flex-start !important;
    }

    .ua-hero-carousel .carousel-item .ua-hero-copy {
        margin-top: 112px;
        margin-left: clamp(48px, 3.2vw, 68px);
        padding-top: 0;
        transform: none !important;
    }
}

@media (min-width: 1440px) {
    .ua-hero-carousel .carousel-item .ua-hero-copy {
        margin-top: 122px;
        margin-left: clamp(54px, 3.4vw, 76px);
        transform: none !important;
    }
}

/* ================================================================
   UNIFORM DESKTOP SLIDE RHYTHM
   Makes every slide follow the visual rhythm of the third slide.
   Short one-line headings reserve the same two-line title space,
   so descriptions, benefit cards and CTAs line up consistently.
   ================================================================ */
@media (min-width: 1200px) {
    .ua-hero-carousel .carousel-item .ua-hero-description {
        min-height: 3.05em;
    }

    .ua-hero-carousel .carousel-item .ua-hero-benefits {
        min-height: 54px;
    }

    .ua-hero-carousel .carousel-item .ua-hero-actions {
        min-height: 46px;
    }
}

/* ================================================================
   SEARCH PANEL READABILITY
   Slightly larger type for desktop/laptop readability.
   ================================================================ */
@media (min-width: 992px) {
    .ua-car-search__tab {
        letter-spacing: 0.005em;
    }

    .ua-car-search__fields label {
        line-height: 1.25;
    }

    .ua-car-search__fields .form-select {
        padding-left: 13px;
        padding-right: 34px;
        line-height: 1.25;
    }

    .ua-car-search__submit {
        letter-spacing: 0.005em;
    }
}