:root {
    --warp-dur: 0.65s;
    --warp-curve: cubic-bezier(0.7, 0, 0.1, 1); 
    
    /* Updated Fluid Typography */
    --font-h1: clamp(1.2rem, 0.8rem + 1.5vw, 2.5rem); /* Keeps mobile perfect, reduces massive desktop size */
    --font-p: clamp(1.05rem, 0.6rem + 0.8vw, 1.5rem); /* Increases mobile size, protects desktop size */
    --font-cta: clamp(0.85rem, 0.5rem + 0.5vw, 1.1rem); /* Increases mobile size, protects desktop size */
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Michroma', sans-serif;
    overflow-x: hidden;
    background-color: #000;
}

/* --- HEADER STYLES --- */
.main-header {
    height: 10vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 10;
}

.main-header h1 {
    margin: 0;
    font-size: var(--font-h1);
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative; /* Keeps text above sliding overlays */
    z-index: 2;
}

/* --- HEADER SWEEPING BACKGROUND LOGIC --- */
.main-header::before, .main-header::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 1;
    transition: transform var(--warp-dur) var(--warp-curve);
}

.main-header::before {
    background-color: #00095b; /* Ford Blue */
    transform-origin: left center;
    transform: scaleX(0);
}

.main-header::after {
    background-color: #E60012; /* Mitsubishi Red */
    transform-origin: right center;
    transform: scaleX(0);
}

body:has(.left-brand:hover) .main-header::before,
body:has(.left-brand.is-active) .main-header::before {
    transform: scaleX(1);
}

body:has(.right-brand:hover) .main-header::after,
body:has(.right-brand.is-active) .main-header::after {
    transform: scaleX(1);
}

/* --- MAIN CONTAINER ADJUSTMENT --- */
.cont__links {
    width: 100vw;
    height: 90vh;
    position: relative;
    overflow: hidden;
}

.link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition-property: clip-path, background-position, flex;
    transition-duration: var(--warp-dur);
    transition-timing-function: var(--warp-curve);
    text-decoration: none;
    will-change: clip-path, background-position, flex;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.left-brand {
    z-index: 2;
    background: #000 url(uploads/2026_ford_ranger.webp) 180% center / 130% no-repeat;
    clip-path: polygon(0 0, calc(50% + 10vw) 0, calc(50% - 10vw) 100%, 0 100%);
}

.right-brand {
    z-index: 1;
    background: #000 url(uploads/2026_mitsubishi_outlander.webp) -220% center / 110% no-repeat;
    clip-path: polygon(calc(50% + 10vw - 2px) 0, 100% 0, 100% 100%, calc(50% - 10vw - 2px) 100%);
}


/* --- BACKGROUND DIMMING OVERLAY LOGIC --- */
.link::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Much lighter base dimming */
    background-color: rgba(0, 0, 0, 0.10); 
    transition: background-color var(--warp-dur) var(--warp-curve);
    z-index: 5; 
    pointer-events: none;
}

/* Hover/Tap Left Focus */
.cont__links:has(.left-brand:hover) .left-brand::before, 
.cont__links:has(.left-brand.is-active) .left-brand::before { background-color: rgba(0, 0, 0, 0.05); } /* Brighter */
.cont__links:has(.left-brand:hover) .right-brand::before, 
.cont__links:has(.left-brand.is-active) .right-brand::before { background-color: rgba(0, 0, 0, 0.4); } /* Old base dimming */

/* Hover/Tap Right Focus */
.cont__links:has(.right-brand:hover) .right-brand::before, 
.cont__links:has(.right-brand.is-active) .right-brand::before { background-color: rgba(0, 0, 0, 0.05); } /* Brighter */
.cont__links:has(.right-brand:hover) .left-brand::before, 
.cont__links:has(.right-brand.is-active) .left-brand::before { background-color: rgba(0, 0, 0, 0.4); } /* Old base dimming */

/* Idle Left Focus */
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand::before { background-color: rgba(0, 0, 0, 0.10); }
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand::before { background-color: rgba(0, 0, 0, 0.4); }

/* Idle Right Focus */
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand::before { background-color: rgba(0, 0, 0, 0.10); }
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand::before { background-color: rgba(0, 0, 0, 0.4); }

/* Overlay Transitions */
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .link::before,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .link::before {
    transition-duration: 1.8s;
    transition-timing-function: var(--warp-curve);
    transition-delay: 0s;
}

/* --- HEADER LOGO WRAPPER --- */
.header-logo-wrapper {
    position: absolute;
    height: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 15;
    transition: opacity var(--warp-dur) var(--warp-curve), transform var(--warp-dur) var(--warp-curve);
}

.ford-logo-wrapper { top: 6vh; left: 3vh; width: 230px; transform: translateY(-40px); }
.mitsubishi-logo-wrapper { top: 2vh; right: 3vh; width: 150px; transform: translateY(40px); }

.link:hover .header-logo-wrapper, 
.link.is-active .header-logo-wrapper { 
    opacity: 1; 
    transform: translateY(0); 
}
.header-logo { width: 100%; height: auto; display: block; }

/* --- CARD & CTA LAYOUT --- */
.card__card {
    position: absolute;
    top: calc(50% + 10dvh);
    transform: translateY(-50%);
    width: 50vw; 
    height: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 10;
    pointer-events: none; 
    transition: transform var(--warp-dur) var(--warp-curve);
}

/* Snap to the left half */
.left-brand .card__card { 
    left: 0; 
}

/* Snap to the right half */
.right-brand .card__card { 
    right: 0; 
    left: auto;
}

/* Desktop-only: Shift the wrapper to the new visual center when the split becomes ~70/30 */
@media (min-width: 1025px) {
    .cont__links:has(.left-brand:hover) .card__card, 
    .cont__links:has(.left-brand.is-active) .card__card {
        transform: translate(7.5vw, -50%); /* Shifts right to match expanded Ford area */
    }

    .cont__links:has(.right-brand:hover) .card__card, 
    .cont__links:has(.right-brand.is-active) .card__card {
        transform: translate(-7.5vw, -50%); /* Shifts left to match expanded Mitsubishi area */
    }
}

.card__card p { 
    width: 80%;
    margin: 0 0 30px 0; 
    font-size: var(--font-p);
    line-height: 1.6; 
    text-align: center;
    transition: transform 1.8s var(--warp-curve); /* Keeps your idle animations working */
}

.card__card .c__cta { 
    position: relative; 
    bottom: auto; 
    width: 100%; 
    text-align: center; 
}

/* --- RESTORED BUTTON STYLES --- */
.cta {
    border: 2px solid white;
    padding: 12px 30px;
    text-transform: uppercase;
    font-size: var(--font-cta);
    font-weight: bold;
    letter-spacing: 1px;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
    pointer-events: auto; 
}

.link:hover .cta:hover, .link.is-active .cta:hover { 
    background-color: white; 
    color: #000; 
}
.link:hover .cta:hover, .link.is-active .cta:hover { background-color: white; color: #000; }

/* --- TEXT/CTA ANIMATIONS --- */
.word {
    display: inline-block;
    opacity: 0;
    filter: blur(8px);
    transform: translateX(var(--slide-dir)) scale(0.6) skewX(var(--skew-dir)); 
    transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
    white-space: pre-wrap; 
    will-change: transform, opacity, filter;
}

.left-brand .word { --slide-dir: -50px; --skew-dir: 10deg; }
.left-brand .c__cta { opacity: 0; transform: translateX(-60px) scale(0.9); transition: opacity 0.35s ease, transform 0.35s ease; }

.right-brand .word { --slide-dir: 50px; --skew-dir: -10deg; }
.right-brand .c__cta { opacity: 0; transform: translateX(60px) scale(0.9); transition: opacity 0.35s ease, transform 0.35s ease; }

.link:hover .word, .link.is-active .word,
.cont__links.idle-left .left-brand .word,
.cont__links.idle-right .right-brand .word {
    opacity: 1; filter: blur(0); transform: translateX(0) scale(1) skewX(0deg);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.25), filter 0.75s ease;
}

.link:hover .word, .link.is-active .word { transition-delay: var(--hover-delay); }
.cont__links.idle-left .left-brand .word, .cont__links.idle-right .right-brand .word { transition-delay: var(--idle-delay); }

.left-brand:hover .c__cta, .left-brand.is-active .c__cta,
.right-brand:hover .c__cta, .right-brand.is-active .c__cta {
    opacity: 1; transform: translateX(0) scale(1);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.25);
    transition-delay: 0.1s;
}

/* --- SYNCHRONIZED HOVER/ACTIVE EFFECTS --- */
.cont__links:has(.left-brand:hover) .left-brand, .cont__links:has(.left-brand.is-active) .left-brand {
    clip-path: polygon(0 0, calc(50% + 25vw) 0, calc(50% + 5vw) 100%, 0 100%); background-position: 130% center;
}
.cont__links:has(.left-brand:hover) .right-brand, .cont__links:has(.left-brand.is-active) .right-brand {
    clip-path: polygon(calc(50% + 25vw - 2px) 0, 100% 0, 100% 100%, calc(50% + 5vw - 2px) 100%);
}
.cont__links:has(.right-brand:hover) .right-brand, .cont__links:has(.right-brand.is-active) .right-brand {
    clip-path: polygon(calc(50% - 5vw - 2px) 0, 100% 0, 100% 100%, calc(50% - 25vw - 2px) 100%); background-position: -70% center;
}
.cont__links:has(.right-brand:hover) .left-brand, .cont__links:has(.right-brand.is-active) .left-brand {
    clip-path: polygon(0 0, calc(50% - 5vw) 0, calc(50% - 25vw) 100%, 0 100%);
}

/* --- CENTRAL STEERING WHEEL --- */
.center-tyre {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg);
    z-index: 30; pointer-events: none; width: 80px; height: 80px;
    background-color: #111; border-radius: 50%; box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition-property: transform; transition-duration: var(--warp-dur); transition-timing-function: var(--warp-curve);
}
.cont__links:has(.left-brand:hover) .center-tyre, .cont__links:has(.left-brand.is-active) .center-tyre { transform: translate(calc(-50% + 15vw), -50%) rotate(-720deg); }
.cont__links:has(.right-brand:hover) .center-tyre, .cont__links:has(.right-brand.is-active) .center-tyre { transform: translate(calc(-50% - 15vw), -50%) rotate(720deg); }

.cont__links:has(.link.is-active) .center-tyre { pointer-events: auto; cursor: pointer; }

/* --- JIGGLE WIND-UP ANIMATIONS --- */
.cont__links.jiggle-left-1 .center-tyre { transform: translate(-50%, -50%) rotate(-15deg); transition: transform 0.25s ease-in-out; }
.cont__links.jiggle-left-2 .center-tyre { transform: translate(-50%, -50%) rotate(25deg); transition: transform 0.35s ease-in-out; }
.cont__links.jiggle-right-1 .center-tyre { transform: translate(-50%, -50%) rotate(15deg); transition: transform 0.25s ease-in-out; }
.cont__links.jiggle-right-2 .center-tyre { transform: translate(-50%, -50%) rotate(-25deg); transition: transform 0.35s ease-in-out; }

/* --- IDLE TRANSLATIONS --- */
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand {
    clip-path: polygon(0 0, calc(50% + 13vw) 0, calc(50% - 7vw) 100%, 0 100%); background-position: 160% center;
}
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand {
    clip-path: polygon(calc(50% + 13vw - 2px) 0, 100% 0, 100% 100%, calc(50% - 7vw - 2px) 100%);
}
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand {
    clip-path: polygon(calc(50% + 7vw - 2px) 0, 100% 0, 100% 100%, calc(50% - 13vw - 2px) 100%); background-position: -190% center;
}
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand {
    clip-path: polygon(0 0, calc(50% + 7vw) 0, calc(50% - 13vw) 100%, 0 100%);
}

.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .center-tyre { transform: translate(calc(-50% + 3vw), -50%) rotate(-360deg); }
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .center-tyre { transform: translate(calc(-50% - 3vw), -50%) rotate(360deg); }

/* Desktop-only: Shift the entire card wrapper to the new visual center during idle animation */
@media (min-width: 1025px) {
    .cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand .card__card { 
        transform: translate(1.5vw, -50%); 
    }
    .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand .card__card { 
        transform: translate(-1.5vw, -50%); 
    }
}

.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand,
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand,
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .center-tyre,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .center-tyre,
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand .card__card,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand .card__card {
    transition-duration: 1.8s;
    transition-timing-function: var(--warp-curve);
    transition-delay: 0s;
}

/* --- SVG HOVER/ACTIVE/IDLE WARP MORPHS --- */
.tyre-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all var(--warp-dur) var(--warp-curve); }
.icon-wheel { width: 75px; height: 75px; } .icon-ford { width: 110px; height: 40px; } .icon-mitsubishi { width: 60px; height: 60px; }

.w-part, .f-part, .m-part { transition: transform var(--warp-dur) var(--warp-curve), opacity var(--warp-dur) var(--warp-curve); }
.w-part { transform-origin: 12px 12px; } .f-part { transform-origin: 132px 47px; } .m-part { transform-origin: 50% 50%; }

.w-1 { transition: transform 0.9s var(--warp-curve), opacity 0.9s var(--warp-curve); transition-delay: 0.1s; }
.w-2 { transition: transform 0.6s var(--warp-curve), opacity 0.6s var(--warp-curve); transition-delay: 0.08s; }
.w-3 { transition: transform 0.5s var(--warp-curve), opacity 0.5s var(--warp-curve); transition-delay: 0.04s; }
.w-4 { transition: transform 0.5s var(--warp-curve), opacity 0.5s var(--warp-curve); transition-delay: 0.04s; }
.w-5 { transition: transform 0.55s var(--warp-curve), opacity 0.55s var(--warp-curve); transition-delay: 0s; }
.f-part, .m-part { transition: transform 0.6s var(--warp-curve), opacity 0.6s var(--warp-curve); transition-delay: 0s; }

.f-1 { transform: scale(0.3); opacity: 0; }
.m-1 { transform: translateY(-25px) scale(0); opacity: 0; }
.m-2 { transform: translate(25px, 15px) scale(0); opacity: 0; }
.m-3 { transform: translate(-25px, 15px) scale(0); opacity: 0; }

.cont__links:has(.left-brand:hover) .w-1, .cont__links:has(.left-brand.is-active) .w-1,
.cont__links:has(.right-brand:hover) .w-1, .cont__links:has(.right-brand.is-active) .w-1,
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-1,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-1 { transform: scale(1.4); opacity: 0; }

.cont__links:has(.left-brand:hover) .w-2, .cont__links:has(.left-brand.is-active) .w-2,
.cont__links:has(.right-brand:hover) .w-2, .cont__links:has(.right-brand.is-active) .w-2,
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-2,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-2 { transform: scale(1.6); opacity: 0; }

.cont__links:has(.left-brand:hover) .w-3, .cont__links:has(.left-brand.is-active) .w-3,
.cont__links:has(.right-brand:hover) .w-3, .cont__links:has(.right-brand.is-active) .w-3,
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-3,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-3 { transform: translateX(-14px) scale(0.6); opacity: 0; }

.cont__links:has(.left-brand:hover) .w-4, .cont__links:has(.left-brand.is-active) .w-4,
.cont__links:has(.right-brand:hover) .w-4, .cont__links:has(.right-brand.is-active) .w-4,
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-4,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-4 { transform: translateX(14px) scale(0.6); opacity: 0; }

.cont__links:has(.left-brand:hover) .w-5, .cont__links:has(.left-brand.is-active) .w-5,
.cont__links:has(.right-brand:hover) .w-5, .cont__links:has(.right-brand.is-active) .w-5,
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-5,
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-5 { transform: translateY(14px) scale(0.6); opacity: 0; }

.cont__links:has(.left-brand:hover) .w-1, .cont__links:has(.left-brand.is-active) .w-1, .cont__links:has(.right-brand:hover) .w-1, .cont__links:has(.right-brand.is-active) .w-1 { transition-duration: 0.5s; transition-delay: 0s; }
.cont__links:has(.left-brand:hover) .w-3, .cont__links:has(.left-brand.is-active) .w-3, .cont__links:has(.right-brand:hover) .w-3, .cont__links:has(.right-brand.is-active) .w-3, .cont__links:has(.left-brand:hover) .w-4, .cont__links:has(.left-brand.is-active) .w-4, .cont__links:has(.right-brand:hover) .w-4, .cont__links:has(.right-brand.is-active) .w-4 { transition-duration: 0.4s; transition-delay: 0.05s; }
.cont__links:has(.left-brand:hover) .w-5, .cont__links:has(.left-brand.is-active) .w-5, .cont__links:has(.right-brand:hover) .w-5, .cont__links:has(.right-brand.is-active) .w-5 { transition-duration: 0.4s; transition-delay: 0.08s; }
.cont__links:has(.left-brand:hover) .w-2, .cont__links:has(.left-brand.is-active) .w-2, .cont__links:has(.right-brand:hover) .w-2, .cont__links:has(.right-brand.is-active) .w-2 { transition-duration: 0.35s; transition-delay: 0.12s; }

.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-1, .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-1 { transition-duration: 1.3s; transition-delay: 0s; }
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-3, .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-3, .cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-4, .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-4 { transition-duration: 1.1s; transition-delay: 0.15s; }
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-5, .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-5 { transition-duration: 1.1s; transition-delay: 0.22s; }
.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .w-2, .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .w-2 { transition-duration: 0.9s; transition-delay: 0.33s; }

.cont__links:has(.left-brand:hover) .f-1, .cont__links:has(.left-brand.is-active) .f-1 { 
    transform: scale(1) rotate(0deg); opacity: 1; transition-property: transform, opacity; transition-duration: 0.55s; transition-delay: 0.1s;
}
.cont__links:has(.right-brand:hover) .m-part, .cont__links:has(.right-brand.is-active) .m-part { 
    transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; 
}
.cont__links:has(.right-brand:hover) .m-1, .cont__links:has(.right-brand.is-active) .m-1 { transition: transform 0.45s var(--warp-curve), opacity 0.45s var(--warp-curve); transition-delay: 0.08s; }
.cont__links:has(.right-brand:hover) .m-2, .cont__links:has(.right-brand.is-active) .m-2 { transition: transform 0.45s var(--warp-curve), opacity 0.45s var(--warp-curve); transition-delay: 0.15s; }
.cont__links:has(.right-brand:hover) .m-3, .cont__links:has(.right-brand.is-active) .m-3 { transition: transform 0.45s var(--warp-curve), opacity 0.45s var(--warp-curve); transition-delay: 0.22s; }

.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .f-1 { 
    transform: scale(1) rotate(0deg); opacity: 1; transition-property: transform, opacity; transition-duration: 1.3s; transition-delay: 0.5s;
}
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .m-part { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .m-1 { transition: transform 1.1s var(--warp-curve), opacity 1.1s var(--warp-curve); transition-delay: 0.4s; }
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .m-2 { transition: transform 1.1s var(--warp-curve), opacity 1.1s var(--warp-curve); transition-delay: 0.55s; }
.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .m-3 { transition: transform 1.1s var(--warp-curve), opacity 1.1s var(--warp-curve); transition-delay: 0.7s; }


/* ========================================= */
/* --- RESPONSIVE MEDIA QUERIES ---          */
/* ========================================= */

@media (max-width: 1024px) {
	
    .main-header {
        height: 10dvh;
    }
    .cont__links { 
	    height: 90dvh; 
        display: flex; 
        flex-direction: column; 
    }
	body:has(.cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active))) .main-header::before {
    transform: scaleX(1);
    transition-duration: 1.8s;
}

body:has(.cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active))) .main-header::after {
    transform: scaleX(1);
    transition-duration: 1.8s;
}
    
    .link,
    .cont__links:has(.left-brand:hover) .left-brand, .cont__links:has(.left-brand.is-active) .left-brand,
    .cont__links:has(.left-brand:hover) .right-brand, .cont__links:has(.left-brand.is-active) .right-brand,
    .cont__links:has(.right-brand:hover) .left-brand, .cont__links:has(.right-brand.is-active) .left-brand,
    .cont__links:has(.right-brand:hover) .right-brand, .cont__links:has(.right-brand.is-active) .right-brand,
    .cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand,
    .cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand,
    .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand,
    .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand {
        position: relative; 
        width: 100%; 
        height: auto;
        clip-path: none; 
        background-position: center; 
        background-size: cover;
    }

    .link { flex: 1 1 50%; }
    .link.is-active { flex: 0 0 70%; }
    
    .cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand { flex: 0 0 58%; }
    .cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand { flex: 0 0 42%; }
    
    .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .right-brand { flex: 0 0 58%; }
    .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .left-brand { flex: 0 0 42%; }
    
    .card__card { 
        left: 50% !important; 
        right: auto !important; 
        transform: translateX(-50%); 
        width: 90%; 
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .left-brand .card__card {
        top: 5vh;
        bottom: auto;
    }

    .right-brand .card__card {
        bottom: 5vh;
        top: auto;
    }
    
    .card__card p { 
        position: relative; 
        bottom: auto; 
        top: auto;
        margin-bottom: 20px; 
        transform: none !important;
    }
    .card__card .c__cta { 
        position: relative; 
        bottom: auto;
        top: auto; 
    }
    
    .header-logo-wrapper { display: none !important; }
    
    .center-tyre { 
        display: block !important; 
        top: 50%;
        transition-property: transform, top;
    }

    .cont__links:has(.left-brand:hover) .center-tyre, .cont__links:has(.left-brand.is-active) .center-tyre { 
        top: 70%;
        transform: translate(-50%, -50%) rotate(-720deg); 
    }
    .cont__links:has(.right-brand:hover) .center-tyre, .cont__links:has(.right-brand.is-active) .center-tyre { 
        top: 30%;
        transform: translate(-50%, -50%) rotate(720deg); 
    }
    
    .cont__links.idle-left:not(:has(.link:hover)):not(:has(.link.is-active)) .center-tyre { 
        top: 58%;
        transform: translate(-50%, -50%) rotate(-360deg); 
    }
    .cont__links.idle-right:not(:has(.link:hover)):not(:has(.link.is-active)) .center-tyre { 
        top: 42%;
        transform: translate(-50%, -50%) rotate(360deg); 
    }
}