/*
    Make any css specific to a dealer in here.
 */

#logo {
    max-width: 380px;
}
body[data-view="homepage"] #logo {
    filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 6px #fff) drop-shadow(0px 0px 6px #fff);
}
.is_stuck #logo {
    max-width: 190px;
    min-width: 190px;
}
#headercontainer:before {
    background: linear-gradient(90deg, rgb(0 58 112) -15%, rgb(0 99 190) 35%, rgb(0 99 190) 73%, rgb(0 58 112) 112%);
    box-shadow: inset 0px 13px 8px -8px #61ceff70, 0px 6px 4px -3px #0000008c;
}
.nav-menu-h ul li a {
    font-weight: 500;
    /* filter: drop-shadow(2px 2px 1px rgba(0,0,0,.5)); */
    text-shadow: none;
    font-size: 96%;
}
.nav-menu-h ul li a span {
    filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, .7));
}
.nav-menu-h ul li.active a span,
.nav-menu-h ul li a:hover span {
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 1));
}
.home-page-wrapper .card-list .single-vehicle .card-spacer .section-image {
    overflow: hidden;
}
#mfg-home-block:before {
    opacity: 1;
    /* background-color: #003a70; */
    /* background: linear-gradient(125deg, rgb(0 58 112) 0%, rgb(0 99 190) 50%, rgb(0 58 112) 140%); */
    /* box-shadow: inset 4px 4px 5px -2px #ffffffa3, inset -4px -4px 4px -3px #000; */
    border-radius: var(--border-radius);
    background-color: #000000b3;
}

.site-selector-bar {
    /* background-color: #000000; */
    border-bottom: solid 7px #0063be;
    position: relative;
    z-index: 1;
    margin-bottom: 6px;
    margin-top: 4px;
}
.site-selector-bar .site-selector-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}
.card-list .single-card .image-wrapper.ratio-svg-icon {
    aspect-ratio: unset;
}
.site-selector-bar .site-selector-menu > * {
    padding: 0px 8px;
    color: #6f6f6f;
    font-weight: 500;
    line-height: 1.4;
    font-stretch: 52%;
    font-size: 1.8rem;
    background-color: #ffffff00;
    /* margin-bottom: -4px; */
    /* margin-top: -4px; */
    /* border-radius: 4px; */
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.site-selector-bar .site-selector-menu > *.active {
    /* padding: 8px 10px; */
    color: #ffffff;
    /* margin-bottom: -4px; */
    /* margin-top: -4px; */
    /* font-weight: 700; */
    background-color: #0063be;
    /* background: linear-gradient(110deg, #000 4%, #0063be 4%, #0063be 96%, #000 96%); */
    /* border-top-right-radius: 4px; */
    /* border-top-left-radius: 4px; */
}
body[data-view="results"] .card-list {
    grid-template-columns: repeat(auto-fill, minmax(332px, 1fr));
}
nav.tm_navbar li a {
    font-weight: 600;
    font-stretch: 50%;
    text-transform: none;
}
.featured-large-txt, .h2-featured h2, .full-width-home-section h2 {
    font-size: 3.4rem;
}
.toyota-certified-service-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
.toyota-certified-service-wrapper img {
    width: 400px;
    max-width: 90%;
}
.footer-links .footer-link-inline a {
    font-size: 1.5rem;
    padding-left: 24px;
    margin-left: -10px;
    margin-right: 0;
}
.footer-links .flinkheading a {
    padding: 4px 22px 4px 4px;
    font-stretch: 58%;
    font-size: 2rem;
    font-weight: 550;
}
.footer-links a:before {
    left: 8px;
}
.featured-large-txt, .h2-featured h2, .full-width-home-section p {
    font-size: 1.9rem;
}
.dx-responsive-banner .resp-banner-text-containment .banner-text .resp-banner-heading {
    font-weight: 900;
    font-stretch: 60%;
}
.nav-menu-h ul li a:before {
    background-color: #000000;
}
.full-width-home-section > .card-list {
    max-width: 100%;
    width: 1900px;
}
nav.tm_navbar li .sub-menu > ul li a {
    font-stretch: 90%;
}
#headercontainer.is_stuck .remove-on-fixed {
    margin: 0 0 0 0;
}
.card-list {
    grid-template-columns: repeat(auto-fill,minmax(260px, 1fr));
}
#headercontainer .social-icons-wrapper a[data-brand="youtube"],
#headercontainer .social-icons-wrapper a[data-brand="linkedin"] {
    display: flex;
}
#reserve-van-form .sky-form .form-heading {
    font-size: 2.4rem;
}

.card-list .single-card .flex-icon-row .icon-col {
    max-width: calc(22% - 8px);
}
.card-list .single-card .flex-icon-row .icon-col button {
    display: block;
}
.card-list .single-card .flex-icon-row .icon-col img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
}

@media (max-width: 768px) {
    #logo {
        max-width: 200px;
        /* min-width: 110px; */
        /* min-height: unset; */
    }
    .is_stuck #logo {
        min-width: 100px;
    }


}












/* Aero category selector */

.acs {
    /* Theme hooks */
    --acs-title-color: #fff;
    --acs-title-shadow: 0 0.06em 0.35em rgba(0, 0, 0, 0.55);
    --acs-btn-bg: rgba(16, 24, 40, 0.82);
    --acs-btn-color: #fff;
    --acs-btn-bg-active: #fff;
    --acs-btn-color-active: #101828;
    --acs-fade: 220ms;        /* button hover, and glow fade out */
    --acs-glow-fade-in: 1s;   /* overlay image fade in */
    --acs-shine-peak: rgba(255, 255, 255, 0.85);
    --acs-shine-soft: rgba(255, 255, 255, 0.22);
    --acs-shine-blend: overlay;
    --acs-shine-opacity: 0.43; /* reached halfway through the sweep */
    --acs-shine-time: 600ms;
    --acs-shine-ease: cubic-bezier(0.55, 0, 0.9, 0.45); /* slow in, fast out */
    /* The band tilts from the first angle to the second as it sweeps. */
    --acs-shine-roll-from: 8deg;
    --acs-shine-roll-to: 30deg;

    /* Focus strip, in artwork pixels, and its centre as a fraction of the
     * artwork width (the vehicles sit very slightly left of centre). */
    --acs-focus-width: 1300;
    --acs-focus-center: 0.4965;

    container-type: inline-size;
    position: relative;
    display: block;
    width: 100%;
    font-family: inherit;
}

.acs__stage {
    /* Rendered artwork width, height and horizontal offset. */
    --acs-w: max(100cqw, min(3000px, 100cqw * 3000 / var(--acs-focus-width)));
    --acs-h: calc(var(--acs-w) * 479 / 3000);
    --acs-x: clamp(100cqw - var(--acs-w), 50cqw - var(--acs-focus-center) * var(--acs-w), 0px);
    /* One percent of the artwork width: scales UI with the vehicles. */
    --acs-u: calc(var(--acs-w) / 100);
    position: relative;
}

/* Visible window onto the artwork. */
.acs__art {
    position: relative;
    height: var(--acs-h);
    overflow: hidden;
}

.acs__bg,
.acs__overlay {
    position: absolute;
    top: 0;
    left: var(--acs-x);
    display: block;
    width: var(--acs-w);
    max-width: none;
    height: var(--acs-h);
}

.acs__overlay {
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity var(--acs-fade) ease;
}

/* Shine: a band of light that sweeps across the glowing vehicle.
 * The script adds one .acs__shine element per overlay and sets that
 * overlay image as its mask, so the light only shows on the vehicle.
 * Browsers without CSS mask support simply keep the plain glow. */
.acs__shine {
    display: none;
    position: absolute;
    top: 0;
    left: var(--acs-x);
    width: var(--acs-w);
    height: var(--acs-h);
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: var(--acs-shine-blend);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
    .acs__shine {
        display: block;
    }
}

/* True left edge and width of each vehicle, fraction of artwork width. */
.acs__shine[data-acs-shine="1"] { --sl: 0.2997; --sw: 0.1093; }
.acs__shine[data-acs-shine="2"] { --sl: 0.3873; --sw: 0.1214; }
.acs__shine[data-acs-shine="3"] { --sl: 0.509;  --sw: 0.0913; }
.acs__shine[data-acs-shine="4"] { --sl: 0.5927; --sw: 0.1006; }

/* The band is as wide as the vehicle. Its visible part rests just off the
 * left edge, so the fade-in happens on the vehicle, not before it.
 * It is taller than the artwork so that tilting never exposes its ends.
 * A thin bright core sits inside a wide, faint falloff. */
.acs__shine::before {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: calc(var(--sl) * var(--acs-w));
    width: calc(var(--sw) * var(--acs-w));
    background: linear-gradient(
            90deg,
            transparent 22%,
            var(--acs-shine-soft) 40%,
            var(--acs-shine-peak) 50%,
            var(--acs-shine-soft) 60%,
            transparent 78%
    );
    transform: translateX(-80%) rotate(var(--acs-shine-roll-from));
}

.acs__stage:has([data-acs-item="1"]:is(:hover, :focus-visible)) [data-acs-shine="1"]::before,
.acs__stage:has([data-acs-item="2"]:is(:hover, :focus-visible)) [data-acs-shine="2"]::before,
.acs__stage:has([data-acs-item="3"]:is(:hover, :focus-visible)) [data-acs-shine="3"]::before,
.acs__stage:has([data-acs-item="4"]:is(:hover, :focus-visible)) [data-acs-shine="4"]::before {
    /* Two animations so the easing spans the whole sweep: the move starts
     * slow and ends fast, while the band fades from 0 to full by halfway. */
    animation:
            acs-shine var(--acs-shine-time) var(--acs-shine-ease) 1,
            acs-shine-fade var(--acs-shine-time) var(--acs-shine-ease) 1;
}

@keyframes acs-shine {
    from { transform: translateX(-80%) rotate(var(--acs-shine-roll-from)); }
    to { transform: translateX(80%) rotate(var(--acs-shine-roll-to)); }
}

@keyframes acs-shine-fade {
    0% { opacity: 0; animation-timing-function: linear; }
    50%, 100% { opacity: var(--acs-shine-opacity); }
}

/* Vehicle bounds, measured from the opaque area of each overlay.
 * --l / --w: left edge and width, fraction of artwork width.
 * --t / --b: top and bottom of the vehicle, fraction of artwork height. */
.acs__item[data-acs-item="1"] { --l: 0.2997; --w: 0.0983; --t: 0.42; --b: 0.81; }
.acs__item[data-acs-item="2"] { --l: 0.398;  --w: 0.111;  --t: 0.26; --b: 0.73; }
.acs__item[data-acs-item="3"] { --l: 0.509;  --w: 0.0875; --t: 0.28; --b: 0.76; }
.acs__item[data-acs-item="4"] { --l: 0.5965; --w: 0.0968; --t: 0.39; --b: 0.82; }

/* Glow: show the overlay whose item is hovered or focused. */
.acs__stage:has([data-acs-item="1"]:is(:hover, :focus-visible)) [data-acs-overlay="1"].is-ready,
.acs__stage:has([data-acs-item="2"]:is(:hover, :focus-visible)) [data-acs-overlay="2"].is-ready,
.acs__stage:has([data-acs-item="3"]:is(:hover, :focus-visible)) [data-acs-overlay="3"].is-ready,
.acs__stage:has([data-acs-item="4"]:is(:hover, :focus-visible)) [data-acs-overlay="4"].is-ready {
    opacity: 1;
    transition-duration: var(--acs-glow-fade-in);
}

.acs__item {
    color: var(--acs-btn-color);
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.acs__btn {
    display: block;
    box-sizing: border-box;
    background: var(--acs-btn-bg);
    color: inherit;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-wrap: balance;
    transition: background-color var(--acs-fade) ease, color var(--acs-fade) ease;
    padding: 10px 20px 12px;
    background-color: var(--bg-secondary, #000);
    border-radius: var(--border-radius);
    font-family: var(--text-heading-family);
    background: rgba(0,0,0,.5);
    color: var(--text-primary);
    padding: 12px 14px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    width: fit-content;
    font-weight: 700;
    font-size: 1.7rem;
    display: inline-flex;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
    width: 100%;
    align-items: center;
    justify-content: center;
}

.acs__item:is(:hover, :focus-visible) .acs__btn {
    background: #000000e3;
    color: var(--text-secondary);
}

.acs__item:focus-visible .acs__btn {
    outline: 2px solid var(--acs-btn-bg-active);
    outline-offset: 2px;
}

h2.acs__title {
    margin: 0;
    text-align: center;
    line-height: 1.1;
    /* font-weight: 700; */
    font-family: var(--text-heading-family);
    font-weight: 800;
    font-style: italic;
    font-stretch: 86%;
    color: #fff;
    letter-spacing: 0;
    font-size: 4.7rem;
    text-shadow: 2px 2px 0 #000, 0 0 20px #000, 0 0 12px #000, 0 0 6px #000, 0 0 4px #000;
    line-height: 1.2;
}

@container (max-width: 1000px) {
    .acs__btn {
        font-weight: 700;
        font-size: 1.4rem;
        padding-left: 8px;
        padding-right: 8px;
    }
    h2.acs__title {
        font-size: 36px;
        font-stretch: 98%;
        letter-spacing: unset;
    }
}
/* ---------- Wide layout: everything overlays the artwork ---------- */
@container (min-width: 600px) {
    .acs__title {
        position: absolute;
        z-index: 2;
        top: 8%;
        left: 0;
        right: 0;
        padding: 0 16px;
        font-size: max(clamp(20px, 3cqw, 44px), 1.46cqw);
        color: var(--acs-title-color);
        text-shadow: var(--acs-title-shadow);
        pointer-events: none;

    }

    /* The link itself is the hit area: vehicle top down to the banner edge. */
    .acs__item {
        position: absolute;
        z-index: 1;
        left: calc(var(--acs-x) + var(--l) * var(--acs-w));
        width: calc(var(--w) * var(--acs-w));
        top: calc(var(--t) * var(--acs-h));
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: calc(0.08 * var(--acs-h));

    }

    .acs__btn {
        max-width: calc(8.6 * var(--acs-u));

    }
}

/* ---------- Narrow layout: title above, buttons below ---------- */
@container (max-width: 599.98px) {
    h2.acs__title {
        padding: 0 16px 12px;
        font-size: clamp(20px, 6cqw, 30px);
        color: var(--text-heading);
        text-shadow: none;
        font-style: normal;
        margin-bottom: 14px;
        font-family: var(--text-heading-family);
        font-weight: 800;
        margin-top: 0;
        font-size: 3.4rem;
        line-height: 1.2;
    }

    .acs__nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 8px 8px 0;
    }

    .acs__item {
        display: flex;
    }

    .acs__btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 10px;
        border-radius: 8px;
        font-size: 15px;
        background: rgb(0 0 0 / 88%);
    }

    /* Keep each vehicle hoverable and clickable on the artwork. */
    .acs__item::before {
        content: "";
        position: absolute;
        left: calc(var(--acs-x) + var(--l) * var(--acs-w));
        width: calc(var(--w) * var(--acs-w));
        top: calc(var(--t) * var(--acs-h));
        height: calc((var(--b) - var(--t)) * var(--acs-h));
    }
}

@media (prefers-reduced-motion: reduce) {
    .acs__overlay,
    .acs__btn {
        transition: none;
    }

    .acs__shine {
        display: none;
    }
}