:root {
    --red: #ea1f24;
    --redHover: #c61a1e;
    --redSoft: #ffe9ea;
    --black: #0b0b0b;
    --black2: #161616;
    --muted: #6b6b6b;
    --border: #e6e6e6;
    --surface: #f7f7f7;
    --white: #ffffff;
}

.text-brand-muted {
    color: #4a4a4a;
}

html,
body {
    font-family: Manrope, system-ui, -apple-system, sans-serif;
}

.focus-brand:focus {
    outline: none;
    box-shadow: 0 0 0 5px rgba(234, 31, 36, .18);
    border-color: var(--red);
}

input[type="range"] {
    accent-color: var(--red);
}

.hero {
    min-height: auto;
    padding-top: clamp(44px, 5vh, 72px);
    padding-bottom: clamp(24px, 4vh, 64px);
}

.heroVideo {
    object-fit: cover;
    object-position: center;
    transform-origin: center;
    transform: scale(1.05);
    background: #000;
    transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
    filter: saturate(1.05) contrast(1.05);
}

@media (min-width: 1024px) {
    .heroVideo {
        transform: scale(1.12);
    }
}

@media (min-width: 1536px) {
    .heroVideo {
        transform: scale(1.18);
    }
}

.glass {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.floatGlow {
    position: absolute;
    inset: -60px;
    pointer-events: none;
    background:
        radial-gradient(600px 300px at 20% 25%, rgba(234, 31, 36, .20), transparent 60%),
        radial-gradient(520px 280px at 78% 30%, rgba(255, 255, 255, .12), transparent 55%),
        radial-gradient(800px 420px at 40% 85%, rgba(234, 31, 36, .12), transparent 60%);
    filter: blur(8px);
    opacity: .95;
    transform: translateZ(0);
    animation: glowShift 9s ease-in-out infinite;
}

@keyframes glowShift {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .92;
    }

    50% {
        transform: translate3d(0, -8px, 0) scale(1.02);
        opacity: 1;
    }
}

.reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(.99);
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform, filter;
    filter: blur(10px);
}

.reveal.show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.tiltCard {
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1), border-color .35s cubic-bezier(.2, .8, .2, 1), filter .35s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

.tiltCard:hover {
    transform: translate3d(0, -6px, 0);
}

.btnPrimary {
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s, box-shadow .2s, filter .2s;
    will-change: transform, box-shadow;
}

.btnPrimary:hover {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 12px 30px rgba(234, 31, 36, .22);
}

.btnPrimary:active {
    transform: translate3d(0, 0, 0) scale(.98);
}

.chip {
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}

.chip:hover {
    transform: translate3d(0, -1px, 0);
}

.bodyPill {
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s, background-color .25s, color .25s;
    will-change: transform;
}

.bodyPill:active {
    transform: scale(.98);
}

.bodyPill::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .24), transparent 62%);
    transform: translate3d(-30%, -30%, 0);
    opacity: 0;
    transition: opacity .35s, transform .55s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.bodyPill:hover::after {
    opacity: 1;
    transform: translate3d(20%, 20%, 0);
}

.bodyPill.active {
    animation: selectPop .38s cubic-bezier(.2, .9, .2, 1);
}

@keyframes selectPop {
    0% {
        transform: translate3d(0, 0, 0) scale(.96);
    }

    60% {
        transform: translate3d(0, -2px, 0) scale(1.02);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.pulseDot {
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

.topStrip {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(320px 120px at 12% 50%, rgba(234, 31, 36, .22), transparent 60%),
        radial-gradient(320px 120px at 88% 50%, rgba(255, 255, 255, .12), transparent 60%),
        linear-gradient(90deg, #0b0b0b 0%, #121212 40%, #0b0b0b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.topStrip::before {
    content: "";
    position: absolute;
    inset: -80% 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%);
    animation: stripSheen 6.5s ease-in-out infinite;
    pointer-events: none;
    opacity: .6;
}

@keyframes stripSheen {

    0%,
    55% {
        transform: translateX(-25%);
        opacity: 0;
    }

    70% {
        opacity: .6;
    }

    100% {
        transform: translateX(25%);
        opacity: 0;
    }
}

.topStripInner {
    position: relative;
    z-index: 1;
}

.offerBar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(234, 31, 36, .35), rgba(255, 255, 255, .12), rgba(234, 31, 36, .28));
    background-size: 200% 100%;
    border: 1px solid rgba(234, 31, 36, .45);
    box-shadow: 0 10px 24px rgba(234, 31, 36, .18), 0 6px 16px rgba(0, 0, 0, .25);
    overflow: hidden;
    animation: offerFlow 5.5s linear infinite;
}

.offerBar::before {
    content: "";
    position: absolute;
    inset: -120% -30%;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
    animation: offerSheen 3.8s ease-in-out infinite;
    pointer-events: none;
    opacity: .85;
}

.offerTextWrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.offerTextWrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(234, 31, 36, .9), transparent);
    animation: offerPulseLine 2.2s ease-in-out infinite;
    pointer-events: none;
    opacity: .7;
}

@keyframes offerFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes offerSheen {

    0%,
    60% {
        transform: translateX(-20%);
        opacity: 0;
    }

    75% {
        opacity: .7;
    }

    100% {
        transform: translateX(20%);
        opacity: 0;
    }
}

@keyframes offerPulseLine {

    0%,
    100% {
        opacity: .15;
        transform: scaleX(.7);
    }

    50% {
        opacity: .75;
        transform: scaleX(1);
    }
}

.offerHeadline {
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    font-size: 11px;
}

.offerHeadline strong {
    color: #fff;
    text-shadow: none;
}

.offerDivider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .12);
}

.offerTimer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    font-weight: 900;
    letter-spacing: .08em;
    white-space: nowrap;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    animation: timerGlow 2.4s ease-in-out infinite;
}

@keyframes timerGlow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(234, 31, 36, 0);
    }

    50% {
        box-shadow: 0 0 22px rgba(234, 31, 36, .45);
    }
}

.offerTimerLabel {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .16em;
    opacity: .85;
}

.topActions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 800;
}

.topActionLink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.topActionLink:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(234, 31, 36, .5);
}

.topActionIcon {
    width: 14px;
    height: 14px;
    color: #fff;
    opacity: .9;
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::before {
    content: "";
    position: absolute;
    inset: -120%;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
    transform: translateX(-40%);
    animation: shine 5.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shine {

    0%,
    55% {
        transform: translateX(-40%);
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    100% {
        transform: translateX(40%);
        opacity: 0;
    }
}

.filterShell {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(500px 240px at 0% 0%, rgba(234, 31, 36, .12), transparent 60%),
        radial-gradient(520px 240px at 100% 0%, rgba(0, 0, 0, .12), transparent 55%);
    background-color: rgba(18, 18, 18, .5);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .14);
}

.filterShell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 30%, rgba(255, 255, 255, .06));
    opacity: .6;
    animation: floatSheen 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes floatSheen {

    0%,
    100% {
        transform: translateX(-4%);
        opacity: .35;
    }

    50% {
        transform: translateX(4%);
        opacity: .6;
    }
}

.filterInner {
    position: relative;
    z-index: 1;
}

.filterInner .text-brand-muted {
    color: #2f2f2f;
}

.priceCard {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(130deg, rgba(11, 11, 11, .06), rgba(255, 255, 255, .96));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.priceQuick {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--black2);
    background: #fff;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.priceQuick:hover {
    transform: translateY(-1px);
    border-color: #0b0b0b;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

.priceQuick.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    box-shadow: 0 12px 26px rgba(234, 31, 36, .2);
}

.benefitIcon {
    line-height: 0;
}

.benefitIcon svg {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
}

.benefitIcon.lg svg {
    width: 22px;
    height: 22px;
}

.benefitText {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.benefitsRow .text-brand-muted {
    color: #5b5b5b;
}

.multiSelect {
    position: relative;
    width: 100%;
}

.multiTrigger {
    min-height: 48px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 40px 8px 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.multiTrigger:hover {
    border-color: #0b0b0b;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.multiTrigger.active {
    border-color: var(--red);
    box-shadow: 0 12px 26px rgba(234, 31, 36, .18);
}

.multiPlaceholder {
    color: #1b1b1b;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .02em;
}

.multiPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(234, 31, 36, .12);
    color: #0b0b0b;
    font-weight: 800;
    font-size: 11px;
}

.multiPill button {
    border: none;
    background: transparent;
    color: inherit;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.multiCaret {
    position: absolute;
    right: 12px;
    top: 14px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: #4a4a4a;
}

.multiPanel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: rgba(18, 18, 18, .98);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 10px;
    display: none;
    z-index: 20;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.multiSelect.open .multiPanel {
    display: block;
}

.multiSearch {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 8px 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    outline: none;
}

.multiOptions {
    margin-top: 8px;
    max-height: 180px;
    overflow: auto;
    display: grid;
    gap: 6px;
}

.multiOption {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.multiOption:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-1px);
}

.multiOption input {
    width: 14px;
    height: 14px;
    accent-color: #ea1f24;
}

.reviewsCarousel {
    margin-top: 24px;
}

.reviewsViewport {
    overflow: hidden;
}

.reviewsTrack {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 16px;
    will-change: transform;
}

.reviewsTrack.rolling {
    transition: transform 1.4s cubic-bezier(.2, .8, .2, 1);
}

.reviewCard {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.reviewHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 0 18px;
    justify-content: space-between;
}

.reviewMetaWrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.reviewMeta .text-brand-muted {
    color: #5b5b5b;
}

.reviewAvatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.reviewMeta {
    display: flex;
    flex-direction: column;
}

.reviewStars {
    color: var(--red);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .1em;
}

.reviewImage {
    position: relative;
    margin-top: 12px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.reviewImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewBadge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reviewBody {
    padding: 16px 18px 18px 18px;
}

.reviewBody p {
    margin-top: 8px;
    color: var(--muted);
    font-weight: 600;
}

.reviewQuote {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reviewToggle {
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    color: var(--red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.reviewModal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    z-index: 60;
    padding: 24px;
}

.reviewModal.open {
    display: flex;
}

.reviewModalCard {
    width: min(760px, 92vw);
    background: #fff;
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.reviewModalHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 0 20px;
}

.reviewModalBody {
    padding: 16px 20px 22px 20px;
}

.reviewModalClose {
    border: none;
    background: rgba(0, 0, 0, .05);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}

.reviewsDots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.reviewsControls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.reviewsArrow {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(11, 11, 11, .12);
    background: #fff;
    color: var(--black);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    transition: transform .2s, border-color .2s, box-shadow .2s, background .2s, color .2s;
    cursor: pointer;
}

.reviewsArrow:hover {
    transform: translateY(-1px);
    border-color: var(--red);
    background: var(--red);
    color: #fff;
    box-shadow: 0 10px 20px rgba(234, 31, 36, .25);
}

.reviewsDots button {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, .2);
    cursor: pointer;
}

.reviewsDots button.active {
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(234, 31, 36, .2);
}

.filterSteps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stepPill {
    border: 1px dashed rgba(11, 11, 11, .18);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--black2);
    background: rgba(255, 255, 255, .9);
}

.filterMotion {
    position: relative;
    width: 220px;
    height: 46px;
    position: absolute;
    top: 18px;
    right: 28px;
    pointer-events: none;
}

.searchRush {
    position: relative;
    width: 240px;
    height: 46px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.searchTitleBlock {
    position: relative;
}

.searchTitleBlock>* {
    position: relative;
    z-index: 1;
}

.searchRush.front {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    margin-bottom: 4px;
    opacity: .85;
    justify-content: flex-start;
}

.rushTrack {
    position: absolute;
    inset: 0;
}

.rushLine {
    position: absolute;
    top: 50%;
    height: 2px;
    width: 72px;
    background: linear-gradient(90deg, transparent, rgba(234, 31, 36, .9), transparent);
    transform: translateY(-50%);
    animation: rushLine 1.2s linear infinite;
}

.rushLine.line2 {
    animation-delay: .4s;
    opacity: .7;
}

.rushLine.line3 {
    animation-delay: .8s;
    opacity: .5;
}

@keyframes rushLine {
    0% {
        left: -60%;
    }

    100% {
        left: 120%;
    }
}

.rushCar {
    width: 42px;
    height: 42px;
    color: #fff;
    animation: rushCar 1.6s cubic-bezier(.2, .8, .2, 1) infinite;
    filter: drop-shadow(0 6px 10px rgba(234, 31, 36, .35));
}

.rushCar svg {
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
}

.rushCar .carBody {
    fill: rgba(255, 255, 255, .9);
}

.rushCar .carAccent {
    fill: #ea1f24;
}

@keyframes rushCar {
    0% {
        transform: translateX(-120px) scale(.92);
        opacity: .2;
    }

    20% {
        opacity: 1;
    }

    60% {
        transform: translateX(40px) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(140px) scale(.94);
        opacity: 0;
    }
}

.motionBadge {
    position: relative;
    width: 150px;
    height: 64px;
    border-radius: 999px;
    background: rgba(8, 8, 12, .35);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.orbitRing {
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 0 10px rgba(255, 255, 255, .08);
}

.orbitRing.ringOne {
    width: 56px;
    height: 56px;
}

.orbitRing.ringTwo {
    width: 72px;
    height: 72px;
    border-color: rgba(234, 31, 36, .18);
}

.orbitSpin {
    position: absolute;
    width: 76px;
    height: 76px;
    animation: orbitSpin 6s linear infinite;
}

.orbitDot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px currentColor;
}

.orbitDot.dotRed {
    color: rgba(234, 31, 36, .9);
    background: rgba(234, 31, 36, .9);
}

.orbitDot.dotWhite {
    top: auto;
    bottom: -3px;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .9);
}

.orbitPulse {
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    animation: orbitPulse 3.6s ease-in-out infinite;
    opacity: .4;
}

.orbitCar {
    position: relative;
    width: 62px;
    height: 30px;
    animation: carFloat 3.2s ease-in-out infinite;
}

.orbitCar svg {
    width: 100%;
    height: 100%;
    opacity: .9;
    filter: drop-shadow(0 0 4px rgba(234, 31, 36, .35));
}

.orbitCar .carOutline {
    fill: none;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.orbitCar .carBase {
    fill: rgba(234, 31, 36, .22);
}

.orbitCar .carGlass {
    fill: rgba(255, 255, 255, .32);
}

.orbitCar .carShadow {
    fill: rgba(255, 255, 255, .18);
}

.orbitCar .carStripe {
    fill: rgba(255, 255, 255, .55);
}

.orbitCar .carDetail {
    fill: rgba(234, 31, 36, .42);
}

.orbitCar .carLine {
    fill: none;
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes orbitSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes orbitPulse {
    0% {
        transform: scale(.8);
        opacity: .15;
    }

    50% {
        opacity: .35;
    }

    100% {
        transform: scale(1.05);
        opacity: .05;
    }
}

@keyframes carFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.brandWrap {
    position: relative;
    overflow: visible;
}

.brandClip {
    position: relative;
    padding-right: 64px;
    max-height: 128px;
    overflow: hidden;
    transition: max-height .4s ease;
}

.brandWrap.expanded .brandClip {
    max-height: min(420px, 58vh);
    overflow: auto;
    padding-right: 6px;
}

.brandFade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0), rgba(18, 18, 18, .9));
    pointer-events: none;
}

.brandWrap.expanded .brandFade {
    display: none;
}

.brandGridWrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.azLayout {
    display: block;
}

.azContent {
    display: block;
}

.brandWrap.expanded .letterIndex {
    display: none;
}

.brandWrap.expanded .brandSection {
    display: block;
    margin: 0;
}

.brandWrap.expanded .brandGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
    margin-top: 0;
}

.brandWrap.expanded .brandSectionTitle {
    margin: 0;
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .1);
    border: 1px dashed rgba(255, 255, 255, .28);
    border-radius: 14px;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brandHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255, 255, 255, .9);
}

.brandHeading label {
    color: inherit;
    text-shadow: none;
}

.brandTag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: inherit;
    text-shadow: none;
}

.brandSection {
    position: relative;
}

.brandToggleBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(234, 31, 36, .35);
    background: radial-gradient(circle at 30% 20%, #ffffff 0%, #fff6f6 40%, #ffe3e5 100%);
    box-shadow: 0 10px 26px rgba(234, 31, 36, .18), 0 6px 18px rgba(0, 0, 0, .12);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.brandToggleBtn::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 1px solid rgba(234, 31, 36, .25);
    opacity: .65;
    animation: togglePulse 2.2s ease-in-out infinite;
    pointer-events: none;
}

.brandToggleBtn:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(234, 31, 36, .6);
    box-shadow: 0 16px 28px rgba(234, 31, 36, .22), 0 8px 22px rgba(0, 0, 0, .16);
}

.brandToggleBtn:active {
    transform: translateY(0) scale(.98);
}

.brandToggleChevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #0b0b0b;
    transition: transform .25s ease;
}

.brandToggleChevron svg {
    width: 100%;
    height: 100%;
    animation: chevronBob 1.4s ease-in-out infinite;
}

.brandToggleBtn[aria-expanded="true"] .brandToggleChevron {
    transform: rotate(180deg);
}

.brandToggleRight {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

@keyframes togglePulse {
    0% {
        transform: scale(.92);
        opacity: .2;
    }

    60% {
        transform: scale(1.05);
        opacity: .5;
    }

    100% {
        transform: scale(1.12);
        opacity: 0;
    }
}

@keyframes chevronBob {

    0%,
    100% {
        transform: translateY(0);
        opacity: .85;
    }

    50% {
        transform: translateY(3px);
        opacity: 1;
    }
}

.logoAnimated {
    animation: logoFloat 4.8s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.brandSearchWrap {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

@media (min-width: 1024px) {
    .brandSearchWrap {
        max-width: 58.333%;
    }
}

.brandSearchInput {
    flex: 1;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    background: #fff;
    color: #0b0b0b;
    caret-color: #0b0b0b;
    -webkit-text-fill-color: #0b0b0b;
    font-size: 12px;
    font-weight: 800;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.brandSearchInput::placeholder {
    color: #1b1b1b;
    font-weight: 800;
}

.brandSearchInput:focus {
    border-color: var(--red);
    box-shadow: 0 12px 26px rgba(234, 31, 36, .18);
}

.brandSearchInput:hover {
    border-color: #0b0b0b;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.filterClearBtn {
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    background: transparent;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .2s, border-color .2s, color .2s;
}

.filterClearBtn:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6);
}

.filterClearBtn.dark {
    color: #0b0b0b;
    border-color: rgba(11, 11, 11, .2);
}

.filterClearBtn.dark:hover {
    background: rgba(11, 11, 11, .08);
    border-color: rgba(11, 11, 11, .35);
}

.brandAction {
    font-size: 11px;
    font-weight: 800;
    color: #0b0b0b;
}

.brandAction.light {
    color: #ffffff;
}

.brandAction.primary {
    background: #ea1f24;
    color: #fff;
    border-radius: 999px;
    padding: 4px 10px;
}

.letterIndex {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .75);
}

.letterIndex button {
    border: none;
    background: transparent;
    padding: 2px 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.letterIndex .dim {
    opacity: .35;
    cursor: default;
}

.brandGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
}

.brandWrap:not(.expanded) .brandGrid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: hidden;
    max-width: 100%;
}

.brandWrap:not(.expanded) .brandTile {
    flex: 0 0 84px;
}

.brandTile {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s;
    will-change: transform;
}

.brandTile:hover {
    transform: translate3d(0, -2px, 0);
    border-color: #0b0b0b;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}

.brandTile.active {
    border-color: var(--red);
    background: linear-gradient(180deg, #ffffff 0%, #ffecec 100%);
    box-shadow: 0 14px 28px rgba(234, 31, 36, .22);
    transform: translate3d(0, -2px, 0);
}

.brandTile.active::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ea1f24;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}

.brandTile.active .brandLogoWrap {
    border-color: rgba(234, 31, 36, .45);
    box-shadow: inset 0 0 0 2px rgba(234, 31, 36, .12);
}

.brandTile.featured {
    animation: featuredGlow 2.2s ease-in-out infinite;
}

@keyframes featuredGlow {

    0%,
    100% {
        box-shadow: 0 8px 22px rgba(234, 31, 36, .18);
    }

    50% {
        box-shadow: 0 14px 30px rgba(234, 31, 36, .35);
    }
}

.brandLogoWrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.brandLogoWrap img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: saturate(.95);
}

.brandFallback {
    display: none;
    font-weight: 800;
    font-size: 12px;
    color: #111;
    letter-spacing: .02em;
}

.brandName {
    font-size: 11px;
    font-weight: 800;
    color: #111;
    line-height: 1;
}

.brandSection {
    margin-top: 8px;
    width: 100%;
}

.brandSectionTitle {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #4a4a4a;
    text-transform: uppercase;
    margin: 8px 0;
}

.socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(11, 11, 11, .12);
    background: #fff;
    transition: transform .2s, border-color .2s, background .2s;
}

.socialLink img {
    width: 16px;
    height: 16px;
    display: block;
}

.socialLink:hover {
    transform: translateY(-1px);
    border-color: var(--red);
    background: var(--red);
}

.socialLink:hover img {
    filter: brightness(0) invert(1);
}

.mobileMenuBtn {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 10px;
    background: #fff;
}

.mobileMenuBtn span {
    display: block;
    width: 18px;
    height: 2px;
    background: #0b0b0b;
    margin: 3px 0;
}

.badge {
    border-radius: 999px;
    padding: 6px 10px;
    background: #0b0b0b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.badge.financeBtn {
    background: #ea1f24;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(234, 31, 36, .35);
}

.bodyIcon {
    width: 78px;
    height: 28px;
}

.bodyIconWrap {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bodyLabel {
    line-height: 1;
}

.bodyPill[data-body="SUV"] .bodyIcon,
.bodyPill[data-body="Ute"] .bodyIcon,
.bodyPill[data-body="Van"] .bodyIcon {
    width: 96px;
    height: 38px;
}

.bodyPill[data-body="Van"] .bodyIcon {
    width: 80px;
    height: 33px;
}

.bodyIcon .bodyPath {
    fill: rgba(234, 31, 36, .12);
    stroke: #ea1f24;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: bodyDraw 3.2s ease-in-out infinite;
}

@keyframes bodyDraw {
    0% {
        stroke-dashoffset: 520;
        opacity: .6;
    }

    40% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -520;
        opacity: .8;
    }
}

.financeStrip {
    margin-top: 6px;
    border-radius: 16px;
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(234, 31, 36, .45), rgba(0, 0, 0, .45));
    border: 1px solid rgba(234, 31, 36, .55);
    box-shadow: 0 14px 30px rgba(234, 31, 36, .28);
    border-left: 4px solid rgba(234, 31, 36, .9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #ffffff;
    animation: financePulse 2.8s ease-in-out infinite;
}

@keyframes financePulse {

    0%,
    100% {
        box-shadow: 0 14px 30px rgba(234, 31, 36, .28);
    }

    50% {
        box-shadow: 0 18px 36px rgba(234, 31, 36, .45);
    }
}

.financeStrip p {
    margin: 0;
    color: #ffffff;
    position: relative;
    padding-right: 6px;
    animation: financeText 3.2s ease-in-out infinite;
}

.financeStrip strong {
    color: #ffffff !important;
}

@keyframes financeText {

    0%,
    100% {
        text-shadow: 0 0 0 rgba(234, 31, 36, 0);
    }

    50% {
        text-shadow: 0 0 10px rgba(234, 31, 36, .55);
    }
}

.financeStrip p::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .6) 40%, transparent 60%);
    transform: translateX(-120%);
    animation: financeSheen 3.6s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes financeSheen {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    40% {
        opacity: .6;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

.financeStrip strong {
    font-weight: 800;
    color: #0b0b0b;
}

.brandTile {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s, background-color .25s, filter .25s;
    will-change: transform;
}

.brandTile:hover {
    transform: translate3d(0, -2px, 0);
    border-color: #0b0b0b;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
    filter: saturate(1.08);
}

.brandTile.active {
    border-color: var(--red);
    box-shadow: 0 12px 30px rgba(234, 31, 36, .18);
    animation: tilePop .38s cubic-bezier(.2, .9, .2, 1);
}

@keyframes tilePop {
    0% {
        transform: translate3d(0, 0, 0) scale(.97);
    }

    60% {
        transform: translate3d(0, -2px, 0) scale(1.02);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.brandMark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: #0b0b0b;
    color: #fff;
    transition: background-color .25s, transform .25s, box-shadow .25s;
}

.brandTile:hover .brandMark {
    transform: translate3d(0, -1px, 0);
}

.brandTile.active .brandMark {
    background: var(--red);
    box-shadow: 0 14px 30px rgba(234, 31, 36, .22);
}

.ticker {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.tickerPinned {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background:
        linear-gradient(90deg, rgba(8, 8, 8, .88), rgba(12, 12, 12, .9) 50%, rgba(8, 8, 8, .88));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, .05);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, .2);
    padding: 2px 0;
}

.tickerPinned::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .03), transparent);
    opacity: .35;
    pointer-events: none;
}

.tickerTrack {
    color: rgba(255, 255, 255, .68);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 11px;
}

.tickerTrack>div {
    position: relative;
    padding: 0 6px;
}

.tickerTrack>div::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    width: 1px;
    height: 8px;
    background: rgba(255, 255, 255, .06);
    transform: translateY(-50%);
}

.tickerTrack {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: ticker 18s linear infinite;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.autoScroll {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.autoScrollTrack {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: scrollX 22s linear infinite;
}

.autoScroll:hover .autoScrollTrack {
    animation-play-state: paused;
}

@keyframes scrollX {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.magnetic {
    transition: transform .18s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

.faqItem {
    overflow: hidden;
    border-radius: 16px;
    transform: translateZ(0);
}

.faqBtn {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    transition: background-color .25s, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
    will-change: transform;
}

.faqBtn:hover {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
}

.faqPanel {
    height: 0;
    overflow: hidden;
    transition: height .48s cubic-bezier(.2, .8, .2, 1);
    will-change: height;
}

.faqPanelInner {
    padding: 0 18px 18px 18px;
}

.faqPanelInner p {
    margin-top: 10px;
}

.chev {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), color .25s;
    transform: rotate(0deg);
}

.faqItem[data-open="true"] .chev {
    transform: rotate(180deg);
    color: var(--red);
}

.faqItem[data-open="true"] .faqBtn {
    background: rgba(234, 31, 36, .05);
    border-color: rgba(234, 31, 36, .35);
    box-shadow: 0 18px 44px rgba(234, 31, 36, .10);
}

.floatIn {
    animation: floatIn .8s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(.99);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

.blogCard:hover .blogImg {
    transform: scale(1.05);
}

.blogImg {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

.filterShell .text-brand-muted {
    color: rgba(255, 255, 255, .82);
}

.filterShell .benefitsRow .text-brand-muted {
    color: #5b5b5b;
}

.filterShell label {
    color: rgba(255, 255, 255, .9);
}

.filterShell select,
.filterShell input,
.filterShell textarea {
    color: #0b0b0b;
}

.filterShell .multiSearch {
    color: #ffffff;
}

.filterShell .multiSearch::placeholder {
    color: rgba(255, 255, 255, .6);
}

.filterShell .brandSectionTitle {
    color: rgba(255, 255, 255, .7);
}

@media (min-width: 1280px) {
    .max-w-7xl {
        max-width: 1400px;
    }
}

@media (min-width: 1536px) {
    .max-w-7xl {
        max-width: 1600px;
    }
}

@media (max-width: 768px) {
    .filterMotion {
        width: 190px;
        height: 64px;
    }

    .motionBadge {
        width: 140px;
        height: 58px;
    }

    .orbitRing.ringOne {
        width: 52px;
        height: 52px;
    }

    .orbitRing.ringTwo {
        width: 66px;
        height: 66px;
    }

    .priceCard {
        padding: 14px;
    }

    .brandGrid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }

    .reviewsTrack {
        grid-auto-columns: calc(50% - 8px);
    }

    .autoScrollTrack>.tiltCard {
        width: calc(50vw - 28px);
    }
}

@media (max-width: 640px) {
    .filterSteps {
        gap: 6px;
    }

    .stepPill {
        font-size: 10px;
        padding: 4px 8px;
    }

    .filterMotion {
        width: 160px;
        height: 56px;
        top: 12px;
        right: 14px;
    }

    .motionBadge {
        width: 122px;
        height: 52px;
    }

    .orbitRing.ringOne {
        width: 46px;
        height: 46px;
    }

    .orbitRing.ringTwo {
        width: 60px;
        height: 60px;
    }

    .orbitCar {
        width: 52px;
        height: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .tiltCard,
    .btnPrimary,
    .chip,
    .bodyPill,
    .shine::before,
    .floatGlow,
    .heroVideo,
    .tickerTrack,
    .autoScrollTrack,
    .magnetic,
    .faqPanel,
    .chev,
    .blogImg,
    .orbitSpin,
    .orbitPulse,
    .orbitCar,
    .bodyPath {
        animation: none !important;
        transition: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }
}








/* =================================== */

html {
    font-family: 'Outfit', sans-serif !important;
}

body.home {
    padding-top: 0 !important;
}

.header .logo img {
    width: 85px;
}

.header .logo {
    margin-top: 15px;
    margin-bottom: 15px;
}

.top-header {
    background-color: #24272C;
}

.top-header .flex-basic {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
}

.top-header .flex-basic>div {
    display: flex !important;
    gap: 20px;
    align-items: center;
}

.nav-menu {
    top: 57px;
}

.top-header .top-timer {
    background: linear-gradient(to right, #651617, #656464);
    color: #fff;
    padding: 4px 10px 4px 25px;
    border-radius: 50px;
    font-size: 12px;
    border: 1px solid #ED1C24;
    margin-top: -1px;
}

.top-header .top-timer span {
    padding: 0px 20px;
    border: 1px solid #fff;
    border-radius: 50px;
}

.top-header .top-timer span small {
    margin-right: 5px;
}

.top-header .top-dets>div {
    border: solid 1px #656464;
    border-radius: 50px;
    padding: 3px 20px;
}

.top-header .top-dets a {
    font-size: 14px !important;
    color: #fff !important;
}

.top-header .top-dets .icon-location,
.top-header .top-dets .icon-mobile {
    color: #fff !important;
}

.logo-menu {
    display: flex;
    align-items: center;
    gap: 150px;
}

.more-icons {
    display: flex;
    align-items: center;
    gap: 50px;
}

.more-icons div {
    display: flex;
    align-items: center;
    gap: 15px;
}

.more-icons div a {
    border: .5px solid #656464;
    padding: 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.stock-btn {
    background: #EA1F24;
    color: #fff;
    padding: 13px 20px;
    border-radius: 10px;
}

.top-heading {
    font-weight: bolder;
    color: #fff;
    font-size: 3.75rem;
    line-height: 1;
}

.filterShell .flex>* {
    width: auto !important;
}
.jmg-btn{
        border: solid 1px #000;
    border-radius: 10px;
    background: #fff;
    color: #000;
    font-weight: bold;
    font-size: 18px;
}

/* --------------------------
:root {
	--clr-primary: #ea1f24 !important;
}

.video-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
/* 	margin-top: -30px; */
}
.firstsec:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* adjust darkness here */
  z-index: 1;
}
.firstsec .lrg-wrapper, .header>.topStrip{
	z-index: 2
}

.jmg button:hover {
    background: #ea1f24 !important;
}
.jmg .jmg-btn-red:hover {
    background: #fff !important;
    color: #ED1C24 !important;
    border-radius: 16px;
    border: 1px solid #ED1C24;
}
.jmg .btn:hover, .jmg-btn:hover, .stock-btn:hover, .jmg-btn-red:hover, .sl-mini-search-btn:hover, .financeBtn:hover{
	    transform: translate3d(0, -1px, 0);
    box-shadow: 0 12px 30px rgba(234, 31, 36, .22);
}
body {
    padding-top: 0 !important;
}
a:hover {
    color: #ED1C24 !important;
}
.main, main{
	   padding-top: 110px;
}
.home .main{
	   padding-top: 0px;
}
.primary-nav .current-menu-item a{
	color: #ea1f24 !important;
}
.form-control, .select-container, .stock-option , .stock-option .so-select, .keywords-wrapper{
	border-radius: 10px !important;
}
.form-group .select-container.active+label{
	font-weight: 700;
    top: -15px;
	    color: #6b6b6b;
}
.form-control.empty + label, .form-group .select-container+label{
	letter-spacing: normal
}
.form-group label{
	  font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #6b6b6b;
}
.single-post .post {
    line-height: 30px !important;
    font-size: 18px !important;
    max-width: 800px;
    margin: 0 auto;
}
.single-post .date{
		color: #0000006e;
}
.single-post em{
	border-left: 2px solid #ea1f24;
    padding-left: 10px;
	    display: block;
}
.single-post .content{
	    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}
.jmg-btn{
    border: solid 1px #000;
    background: #fff !important;
    color: #000 !important;
    font-weight: bold;
    font-size: 18px;
}
.jmg-btn-red{
	  background: #ED1C24 !important;
    color: #fff !important;
    border-radius: 16px;
		border: 1px solid #ED1C24
}
.jmg-btn-red:hover{
	  background: #fff !important;
    color: #ED1C24 !important;
    border-radius: 16px;
		border: 1px solid #ED1C24
}

.jmg-btn-white{
	  background: #fff !important;
    color: #000 !important;
    border-radius: 16px;
		border: 1px solid #000
}
.jmg-btn-white:hover{
	  background: #ED1C24 !important;
    color: #fff !important;
    border-radius: 16px;
		border: 1px solid #ED1C24
}
.jmg-whys>div{
		padding: 30px;
}
.jmg-whys>div>div{
		padding: 30px;
    box-shadow: 0 0 5px 2px #cccccc5e;
    border-radius: 16px;
    text-align: left;
}
.jmg-whys>div>div .font-extrabold{
	  font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
}
.embla__slide .cow{
	border-radius: 16px !important;
	overflow: hidden;
	border: 0px !important;
	 box-shadow: 0 0 5px 2px #cccccc5e !important;
}
.ate-stock-locator .stock-item{
		border-radius: 16px !important;
	overflow: hidden;
	border: 0px !important;
	 box-shadow: 0 0 5px 2px #cccccc5e !important;
}
.home .embla__viewport {
    padding: 8px;
}
.featcars .cow .t-large {
    font-weight: 700 !important;
    margin: 0;
    color: #ed1c24;
    font-size: 22px;
    margin-bottom: 10px;
    display: block;
}

.featcars .cow h3 .price-text {
    color: #8C8C8C;
}
.featcars .cow .cow-il li {

    padding: 2px 4px 2px;
    border-radius: 20px;
}

/* Hide radio buttons */
.jmg input[type="radio"] {
  display: none !important;
}

/* Buttons */
.jmg .buttons {
  margin-bottom: 20px;
	gap: 15px !important;
    display: flex !important;
    flex-direction: column;
}


/* Hide all forms by default */
.jmg .form-box,
.jmg .form-box2{
  display: none;
		padding: 40px;
    border-radius: 16px;
    box-shadow: 0 0 7px 2px #00000014;
	--tw-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    --tw-shadow-colored: 0 16px 40px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Show first form on load */
.jmg #valuation-tab:checked ~ .forms .valuation-form,
.jmg #finance-tab:checked ~ .forms .finance-form{
  display: block;
}

/* Show second form when selected */
.jmg #enquire-tab:checked ~ .forms .enquire-form,
.jmg #enquire-tab2:checked ~ .forms .enquire-form2{
  display: block;
}

/* Inputs */
.jmg input,
.jmg textarea,
.jmg .select-container{
    border-radius: 8px;
}


.jmg button:hover {
  background: #218838;
}
.jmg .form-box h2,
.jmg .form-box2 h2{
	    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
}
.jmg .accord-container{
	background-color: #fff
}
.jmg .accord-head{
	    justify-content: space-between;
}
.jmg .accord-head .icon-add{
	    margin-right: 0;
    fill: #ed1c24;
    border-color: #ed1c24;
}
.jmg .accord-content{
	padding-left: 30px
}
.jmg .accord-head:hover, .jmg .accord-container.active .accord-head {
    color: #ed1c24;
}
.pre-footr{
	  background: #cccccc1a;
    padding: 20px;
    border-radius: 10px;
    width: 50%;
    border: 1px solid #4d4d4d;
}
.pre-footr a{
	    color: #ed1c24;
    font-size: 22px;
}
.jmg.dark-bg .form-group label{
	color: #fff
}
.jmg.dark-bg input,
.jmg.dark-bg select,
.jmg.dark-bg textarea,
.jmg.dark-bg .select-container{
	    color: #fbfbfb;
    background-color: #ffffff00;
}
.jmg.dark-bg .select-container select option {
  background-color: #f9f9f9;
  color: #333;
}

.footer-links, .copyright {
    background-color: #ffffff;
    color: #000 !important;
}
.footlogo img{
	width: 115px;
}
.footer-links a{
	color: #000 !important;
}
.footer-links .h3{
	color: #000;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}
.footer-links .grid>div ul{
	margin-top: 0px;
	line-height: 35px;
}
.copyright, .copyright a, .copyright span {
    color: #000000;
}
.cntct-form-conti{
	padding: 50px;
    box-shadow: 0 0 5px 0px #cccccc96;
    border-radius: 16px;
}
.primary-nav li:hover a {
   color: #ea1f24 !important;
}
.stock-btn:hover{
		color: #fff !important
}



.tips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
/*     gap: 25px; */
}

.tips-item {
    background: #fff;
    box-shadow: 0 1px 8px 2px #ccccccb0;
    border-radius: 15px;
	padding: 0px;
	overflow: hidden;
}

.tips-image img {
    width: 100%;
       height: 250px;
    object-fit: cover;
}

.tips-category {
    font-size: 14px;
    color: #888;
    margin: 10px 0 5px;
}

.tips-title {
    font-size: 18px;
    margin: 5px 0 15px;
	font-weight: 600;
}
.tips-title a{
	    display: -webkit-box;
    -webkit-line-clamp: 1;   /* Limit to 1 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tips-excerpt {
    font-size: 14px;
    margin-bottom: 15px;
    color: #555;

    display: -webkit-box;
    -webkit-line-clamp: 2;   /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.view-tips-btn {
    color: #ea1f24;
    text-decoration: none;
    font-weight: 600;
	    background: transparent !important;
}

.view-tips-btn:hover {
    background: #005177;
}
.tips-content{
	    padding: 25px;
    padding-top: 15px;
}
.sl-wrapper{
	    max-width: 2000px !important;
}
.single-post h1{
    font-size: 33px;
    font-weight: 700;
}
.single-post .date{
    margin-bottom: 40px !important;
    display: block;
}
.m-menu{
	    top: 125px !important;
	padding-top: 30px !important;
}
	.offerHeadline, .topActions{
		    font-weight: 600;
	}
.eapps-widget-show-toolbar {
    overflow: visible;
}
.si-title .badge, .ate-stock-locator .badge{
	background: transparent !important;
	padding: 0px !important
}
.ate-form .jmg-btn-red:hover{
	  background: #ffffff !important;
}
.cow-addbtn{
	display: block;
	padding: 0 20px 20px;
}
.cow-addbtn a{
	display: block;
	position: relative;
}
.tips-pagination .page-numbers:hover{
	color: #ffffff !important;
	    background: #ED1C24 !important;
}
.single-banner-image{
    width:100vw;
    margin-left:calc(-50vw + 50%);
	  margin-bottom: 80px;
}

.single-banner-image img{
    width:100%;
    object-fit:cover;
    display:block;
/* 	height: 800px */
}
.single-post .wrapper{
}
.single-post main{
	    padding-top: 0px;
	overflow: hidden;
}
.single-post article p{
	margin-bottom:30px
}
.cntct-form-conti.tradein-form h2{
	font-size: 32px;
}
	.cntct-form-conti.tradein-form{
		padding: 20px !important;
	}
.cntct-form-conti.tradein-form label{
	    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #6b6b6b;
}
.cntct-form-conti.tradein-form input, .cntct-form-conti.tradein-form select{
	border: 1px solid var(--form-lb);
	    outline: 0 !important;
}
.cntct-form-conti.tradein-form input:focus, .cntct-form-conti.tradein-form select:focus{
	    border-color: var(--clr-primary);
}

.jmg .accord-container.active .accord-head {
    color: #000 !important;
    background: rgba(234, 31, 36, .05);
    border-color: rgba(234, 31, 36, .35);
    box-shadow: 0 18px 44px rgba(234, 31, 36, .10);
}
.jmg .accord-container, .jmg-whys>div{
	    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1), border-color .35s cubic-bezier(.2, .8, .2, 1), filter .35s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}
.jmg .accord-container:hover, .jmg-whys>div:hover {
    transform: translate3d(0, -6px, 0) !important;
}
.primary-nav .sub-menu li:hover a {
    color: #ffffff !important;
}
.featcars {
  position: relative;
  overflow: hidden;
}

/* subtle left/right fade */
.featcars::before,
.featcars::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 40px; /* smaller width for subtle fade */
  pointer-events: none;
  z-index: 10;
}

.featcars::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0));
}

.featcars::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0));
}
.home .embla__viewport {
  padding: 0px;
/* 	padding-bottom: 8px; */
	border-radius: 15px
}
.home .embla__slide{
	margin-bottom:8px
}
/* Responsive */
@media (max-width: 992px) {
    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
		.main {
			padding-top: 68px;
	}
			.home.main {
			padding-top: 110px;
	}
    .tips-grid {
        grid-template-columns: 1fr;
    }
	.nav-menu .more-icons{
		display: none
	}
	.nav-menu .mobile-icons a{
		display: none
	}
	.topStripInner{
		padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
		padding-left: 1rem !important;
    padding-right: 1rem !important;
		    flex-wrap: wrap !important;
	}
	.topStripInner>.flex{
		width: 100% !important;
    padding: 0 !important;
    margin-left: 0px !important;
	}
	.header .logo {
			margin-top: 5px;
			margin-bottom: 5px;
	}

		.top-heading {
			font-weight: bolder;
			color: #fff;
			font-size: 2rem;
			line-height: 1.3;
	}
	.firstsec .filterShell .flex>* {
			width: 100% !important;
	}
	.header .logo img {
			width: auto;
	}
	.stock-btn-sm {
				background: #EA1F24;
        color: #fff;
        padding: 7px 14px;
        border-radius: 10px;
        display: block !important;
        font-size: 15px;
	}
	.mobile-icons{
		gap: 10px;
	}
	.mobile-icons #mobile-button{
		padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
	}
	.mobile-header a svg, .mobile-link svg {
			color: #222;
			font-size: 17px;
	}
	.firstsec .mt-10 {
    margin-top: .5rem !important;
	}
	.firstsec .lrg-wrapper>p{
		font-size: 1rem !important;
	}
	.firstsec .filterShell .locfilter label, 
	.firstsec .filterShell .locfilter button,
	.firstsec .filterShell .locfilter a{
		width: auto !important
	}
	.financeStrip{
		margin-left: 10px !important;
	}
	.financeStrip .text-sm {
    font-size: 0.7rem;
    line-height: 1rem;
}
	.firstsec .lrg-wrapper{
		padding-left: 20px;
    padding-right: 20px;
	}
	.searchbtm .benefitIcon{
		    margin-left: 20px !important;
	}
	.tohide{
		display:none
	}
	.jmg-whys>div {
            padding: 15px 20px;
}
	.jmg-whys>div>div {
    padding: 25px;
}
	.firstsec .filterShell .price-r-btn .priceQuick{
		        width: auto !important;
	}
	.formtabs{
		display: flex;
    gap: 15px;
	}
	.formtabs a{
		width: 50%;
		        padding: 16px;
	}
	.jmg .form-box, .jmg .form-box2{
		padding:30px
	}
	.pre-footr {
    padding: 15px;
    width: 100%;
}
	.jmg-whys{
		margin-right: -20px;
	}
	.topStripInner .topActions{
	display: none
}
	.financeStrip{
		border-left: 1px solid rgba(234, 31, 36, .9);
	}
	.finance-form .grid.d-two-cols{
		    gap: 40px;
	}
	.tips-image img {
			height: 180px;
	}
	.cntct-form-conti{
		padding: 30px;
	}
	.cntct-form-conti.tradein-form{
		padding: 0px !important;
	}
	.cntct-form-conti.tradein-form h2{
	font-size: 24px;
}
}




----------------------------*/