:root{
    --red:#d5092f;
    --red-bright:#ff174d;
    --gold:#ffbd00;
    --gold-bright:#ffd34e;
    --black:#090909;
    --charcoal:#171717;
    --gray:#f3f4f6;
    --line:#dddddd;
    --white:#ffffff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:#171717;
    background:#fff;
}


/* =========================================================
   HEADER
   ========================================================= */

header{
    background:#0b0b0b;
    color:#fff;
    padding:20px 4%;
}

.site-header{
    border-bottom:1px solid #292929;
}

.brand-wrap{
    display:flex;
    align-items:center;
    position:relative;
    width:max-content;
}

.brand{
    position:relative;
    z-index:2;
    font-size:32px;
    font-weight:900;
    font-style:italic;
    letter-spacing:-1px;
}

.brand-sunday{
    color:#fff;
}

.brand-motors{
    color:var(--red);
    margin-left:7px;
}

.speed-arc{
    position:absolute;
    width:175px;
    height:55px;
    left:-5px;
    top:-10px;
    border-top:7px solid var(--gold);
    border-radius:100% 100% 0 0;
    transform:rotate(-2deg);
    opacity:.95;
}

.speed-arc::after{
    content:"";
    position:absolute;
    width:110px;
    border-top:7px solid var(--red);
    right:-15px;
    top:-7px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:18px;
}

nav a{
    color:#fff;
    text-decoration:none;
    padding:10px 15px;
    border-radius:7px;
    font-weight:700;
    transition:.18s ease;
}

nav a:hover,
nav a.active{
    background:var(--red);
}


/* =========================================================
   GENERAL SITE PAGES
   ========================================================= */

.wrap{
    width:min(1180px,92%);
    margin:28px auto;
}

.hero{
    background:linear-gradient(120deg,#111,#333);
    color:#fff;
    border-radius:16px;
    padding:42px;
}

.hero h1{
    font-size:42px;
    margin:0 0 12px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
    display:inline-block;
    border:0;
    border-radius:8px;
    padding:12px 18px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    background:var(--red);
    color:#fff;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 7px 18px rgba(0,0,0,.18);
}

.btn.secondary{
    background:#222;
    color:#fff;
}

.btn.light{
    background:#fff;
    color:#111;
    border:1px solid #ccc;
}

.btn.gold{
    background:var(--gold);
    color:#111;
}


/* =========================================================
   CARDS / GRIDS
   ========================================================= */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
    gap:18px;
}

.card{
    border:1px solid var(--line);
    border-radius:13px;
    padding:18px;
    background:#fff;
    box-shadow:0 3px 12px rgba(0,0,0,.05);
}

/*
   Normal card images elsewhere on the site.
   Car of the Week overrides this below.
*/

.card img{
    width:100%;
    height:185px;
    object-fit:cover;
    border-radius:9px;
    background:#eee;
}

.muted{
    color:#666;
}

.small{
    font-size:13px;
}


/* =========================================================
   SEARCH / FORMS
   ========================================================= */

.searchbox{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    background:var(--gray);
    padding:18px;
    border-radius:12px;
}

input,
select,
textarea{
    width:100%;
    padding:11px;
    border:1px solid #bbb;
    border-radius:7px;
    font:inherit;
}

label{
    display:block;
    margin-bottom:6px;
    font-weight:700;
}

.notice{
    padding:14px;
    border-radius:9px;
    background:#fff8dc;
    border:1px solid #ead27a;
}

.paid{
    border-top:5px solid var(--gold);
}

.special-banner{
    display:block;
    text-align:center;
    background:var(--gold);
    color:#111;
    padding:13px;
    border-radius:9px;
    text-decoration:none;
    font-weight:900;
    margin:12px 0;
}

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.section-title{
    margin-top:38px;
    border-bottom:3px solid var(--red);
    padding-bottom:8px;
}

.progress{
    background:#eee;
    height:10px;
    border-radius:20px;
    overflow:hidden;
}

.progress span{
    display:block;
    height:100%;
    background:var(--red);
}

.vehicle-slot{
    border:1px dashed #aaa;
    border-radius:10px;
    padding:14px;
}

.dealer-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:start;
    flex-wrap:wrap;
}

.adminbar{
    background:#fff3cd;
    border:1px solid #e5ca70;
    padding:12px;
    border-radius:8px;
}


/* =========================================================
   HOME PAGE HERO
   ========================================================= */

.home-main{
    background:#fff;
}

.home-hero{
    min-height:470px;
    position:relative;
    overflow:hidden;
    isolation:isolate;

    color:#fff;
    padding:65px 6%;

    display:flex;
    align-items:center;

    background:
        radial-gradient(
            ellipse at 82% 37%,
            rgba(255,189,0,.26) 0%,
            rgba(255,119,0,.13) 9%,
            rgba(213,9,47,.10) 19%,
            transparent 38%
        ),
        radial-gradient(
            ellipse at 76% 82%,
            rgba(213,9,47,.16),
            transparent 34%
        ),
        linear-gradient(
            112deg,
            #050505 0%,
            #080808 42%,
            #160307 70%,
            #070707 100%
        );
}

.home-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        radial-gradient(
            ellipse at 88% 80%,
            rgba(255,189,0,.13),
            transparent 29%
        ),
        radial-gradient(
            ellipse at 65% 86%,
            rgba(213,9,47,.18),
            transparent 35%
        ),
        linear-gradient(
            100deg,
            transparent 0%,
            transparent 50%,
            rgba(213,9,47,.055) 67%,
            rgba(255,189,0,.045) 86%,
            transparent 100%
        );
}


/* =========================================================
   HERO TEXT
   ========================================================= */

.hero-content{
    width:56%;
    max-width:800px;
    position:relative;
    z-index:20;
}

.home-hero h1{
    font-size:clamp(54px,6vw,88px);
    line-height:.95;
    letter-spacing:-3px;
    font-style:italic;
    margin:0 0 24px;
    text-transform:uppercase;
    font-weight:900;
}

.home-hero h1 span{
    display:block;
    color:var(--red);
}

.hero-copy{
    font-size:20px;
    line-height:1.45;
    max-width:780px;
    margin:0 0 27px;
    color:#f5f5f5;
}

.hero-red{
    padding-left:25px;
    padding-right:25px;
}


/* =========================================================
   SWEEPING NIGHT HIGHWAY
   ========================================================= */

.road-glow{
    display:block;
    position:absolute;

    width:72%;
    height:110%;

    right:-13%;
    bottom:-58%;

    z-index:3;

    clip-path:polygon(
        1% 100%,
        100% 100%,
        82% 72%,
        70% 48%,
        66% 30%,
        68% 17%,
        73% 7%,
        77% 0%,
        70% 1%,
        60% 9%,
        50% 21%,
        41% 36%,
        33% 53%,
        28% 70%,
        28% 85%
    );

    border-radius:
        62% 15% 0 0 /
        31% 11% 0 0;

    background:
        radial-gradient(
            ellipse at 70% 10%,
            rgba(255,200,60,.25),
            transparent 15%
        ),
        linear-gradient(
            102deg,
            #030303 0%,
            #101010 18%,
            #292929 42%,
            #191919 63%,
            #090909 82%,
            #030303 100%
        );

    transform:
        perspective(800px)
        rotateZ(-8deg)
        skewX(-6deg);

    transform-origin:72% 8%;

    box-shadow:
        -25px -8px 38px rgba(213,9,47,.30),
        22px -5px 38px rgba(255,189,0,.23),
        inset 35px 0 48px rgba(0,0,0,.65),
        inset -24px 0 42px rgba(0,0,0,.58);

    opacity:1;
}

.road-glow::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        repeating-linear-gradient(
            166deg,
            rgba(255,255,255,.04) 0px,
            rgba(255,255,255,.04) 1px,
            transparent 1px,
            transparent 8px
        ),
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.025) 28%,
            rgba(255,255,255,.09) 48%,
            rgba(255,255,255,.025) 65%,
            transparent 100%
        );

    opacity:.65;
}

.road-glow::after{
    content:"";
    position:absolute;

    width:7px;
    height:95%;

    left:57%;
    bottom:-2%;

    background:
        repeating-linear-gradient(
            to top,
            rgba(255,246,215,.92) 0px,
            rgba(255,246,215,.92) 30px,
            transparent 30px,
            transparent 73px
        );

    transform:rotate(4deg);
    transform-origin:bottom center;

    box-shadow:
        0 0 7px rgba(255,225,145,.38);

    opacity:.72;
}


/* =========================================================
   ROAD LIGHT TRAILS
   ========================================================= */

.light-trail{
    position:absolute;
    pointer-events:none;
}

.trail-red{
    display:block;

    width:61%;
    height:10px;

    right:22%;
    bottom:29px;

    z-index:6;

    border-radius:100%;

    background:
        linear-gradient(
            90deg,
            rgba(255,10,48,0) 0%,
            rgba(255,10,48,.18) 10%,
            rgba(255,10,48,.68) 30%,
            #ff0b3d 55%,
            #ff174d 82%,
            #ff3b64 100%
        );

    transform:
        rotate(-20deg)
        skewX(-17deg);

    transform-origin:right center;

    box-shadow:
        0 0 7px #ff174d,
        0 0 18px rgba(255,0,52,.92),
        0 0 38px rgba(213,9,47,.70),
        0 0 70px rgba(213,9,47,.32);
}

.trail-gold{
    display:block;

    width:52%;
    height:9px;

    right:-4%;
    bottom:53px;

    z-index:6;

    border-radius:100%;

    background:
        linear-gradient(
            90deg,
            rgba(255,189,0,.05) 0%,
            rgba(255,189,0,.35) 19%,
            rgba(255,189,0,.76) 42%,
            #ffbd00 65%,
            #ffd34e 100%
        );

    transform:
        rotate(23deg)
        skewX(15deg);

    transform-origin:left center;

    box-shadow:
        0 0 7px #ffbd00,
        0 0 18px rgba(255,189,0,.88),
        0 0 39px rgba(255,189,0,.57),
        0 0 72px rgba(255,189,0,.27);
}


/* =========================================================
   DISTANT HORIZON
   ========================================================= */

.home-hero::after{
    content:"";

    position:absolute;

    width:330px;
    height:140px;

    right:7%;
    top:22%;

    z-index:2;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,245,205,.90) 0%,
            rgba(255,210,85,.68) 7%,
            rgba(255,189,0,.43) 16%,
            rgba(255,95,0,.25) 28%,
            rgba(213,9,47,.18) 42%,
            rgba(213,9,47,.05) 60%,
            transparent 75%
        );

    filter:blur(13px);

    transform:rotate(-8deg);
}


/* =========================================================
   REMOVE CSS CAR
   ========================================================= */

.automotive-art,
.car-glow,
.generic-car,
.car-roof,
.car-body-line,
.car-rear-light,
.wheel{
    display:none !important;
}


/* =========================================================
   TWO WAYS TO EXPLORE
   ========================================================= */

.explore-section{
    width:min(1500px,92%);
    margin:0 auto;
    padding:32px 0 48px;
}

.explore-heading{
    display:flex;
    align-items:center;
    gap:22px;
    margin-bottom:24px;
}

.explore-heading h2{
    margin:0;
    font-size:31px;
    white-space:nowrap;
}

.heading-line{
    height:4px;
    background:var(--red);
    flex:1;
}

.home-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.home-card{
    border:1px solid #ddd;
    border-radius:15px;
    padding:25px;

    display:flex;
    gap:24px;
    align-items:flex-start;

    background:#fff;

    box-shadow:
        0 7px 24px rgba(0,0,0,.05);
}

.feature-icon{
    min-width:75px;
    height:75px;

    display:grid;
    place-items:center;

    font-size:43px;

    border-right:1px solid #ddd;

    padding-right:20px;
}

.car-icon{
    color:var(--red);
}

.trophy-icon{
    color:var(--gold);
    font-size:55px;
}

.feature-content h3{
    margin:0 0 8px;
    font-size:24px;
}

.feature-content p{
    margin:0 0 17px;
    line-height:1.5;
    color:#333;
}


/* =========================================================
   CAR OF THE WEEK
   YELLOW FEATURE PHOTO DISPLAY
   ========================================================= */

/*
   This yellow panel applies automatically to EVERY
   Car of the Week ride because every ride uses
   .ride-photo-wrap.
*/

.ride-photo-wrap{
    width:100%;
    max-width:1050px;
    min-height:360px;

    margin:26px auto;
    padding:26px;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #ffd900 0%,
            #ffbd00 55%,
            #ffd428 100%
        );

    border:3px solid #111;

    border-radius:18px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.12),
        0 0 18px rgba(255,189,0,.30);
}


/*
   IMPORTANT:
   These !important rules override the normal
   .card img styling above so the vehicle is
   NOT stretched or cropped.
*/

.ride-photo-wrap .ride-photo{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:100% !important;
    max-height:540px !important;

    object-fit:contain !important;

    border:3px solid #111;
    border-radius:13px;

    background:#fff;

    box-shadow:
        0 6px 16px rgba(0,0,0,.20);
}


/* Missing-photo message */

.ride-photo-placeholder{
    min-height:280px;
    width:100%;

    display:none;

    place-items:center;
    text-align:center;

    padding:24px;

    color:#111;
    font-weight:800;
}


/* Trivia area */

.trivia-section{
    margin-top:30px;
}

.trivia-section h3{
    font-size:25px;
    margin-bottom:15px;
}

.trivia-question{
    font-size:18px;
    line-height:1.5;
}

.trivia-choices{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin:18px 0;
}

.trivia-choice{
    min-width:280px;
    text-align:left;
}

.trivia-answer{
    background:#fff8dc;
    border:1px solid var(--gold);
    border-radius:10px;
    padding:16px;
}

.ride-story{
    margin-top:24px;
    padding:18px 20px;
    background:#f5f5f5;
    border-radius:12px;
    border:1px solid #ddd;
}

.ride-story h3{
    margin-top:0;
}

.ride-story li{
    margin-bottom:8px;
    line-height:1.45;
}

.ride-owner{
    font-size:17px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    margin-top:50px;
    background:#0b0b0b;
    color:#ddd;
    padding:25px 4%;
    text-align:center;
}

.home-page footer{
    margin-top:0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .hero-content{
        width:72%;
    }

    .road-glow{
        width:79%;
        right:-25%;
        opacity:.80;
    }

    .trail-red,
    .trail-gold{
        opacity:.72;
    }

    .home-hero::after{
        right:0;
        opacity:.76;
    }

    .home-cards{
        grid-template-columns:1fr;
    }

    .ride-photo-wrap{
        min-height:320px;
        padding:20px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

    .brand{
        font-size:26px;
    }

    .speed-arc{
        width:140px;
    }

    .hero{
        padding:28px;
    }

    .hero h1{
        font-size:31px;
    }

    .home-hero{
        min-height:500px;
        padding:55px 7%;
    }

    .hero-content{
        width:100%;
    }

    .home-hero h1{
        font-size:52px;
    }

    .hero-copy{
        font-size:17px;
    }

    .road-glow{
        width:110%;
        right:-62%;
        bottom:-49%;
        opacity:.46;
    }

    .trail-red,
    .trail-gold{
        opacity:.38;
    }

    .home-hero::after{
        right:-17%;
        top:34%;
        opacity:.48;
    }

    .explore-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .heading-line{
        width:100%;
        flex:none;
    }

    .home-card{
        flex-direction:column;
    }

    .feature-icon{
        border-right:0;
        border-bottom:1px solid #ddd;
        width:100%;
        padding:0 0 15px;
    }

    .ride-photo-wrap{
        min-height:220px;
        padding:12px;
        border-width:2px;
    }

    .ride-photo-wrap .ride-photo{
        max-height:420px !important;
        border-width:2px;
    }

    .trivia-choice{
        width:100%;
        min-width:0;
    }
}
/* =========================================================
   YOUR CAR GAME
   ========================================================= */
.game-wrap{max-width:900px}.game-hero{text-align:center;padding:22px 12px 12px}.game-hero h1{font-size:46px;margin:4px 0 8px}.game-kicker{font-size:13px;font-weight:900;letter-spacing:2.5px;color:var(--red);margin:0 0 8px}.game-card{padding:34px;margin:12px auto 44px;min-height:360px}.game-card h2{font-size:30px;margin:22px 0}.game-progress{font-size:13px;font-weight:800;color:#666}.game-progress span{display:block;height:8px;background:#eee;border-radius:99px;overflow:hidden;margin-top:10px}.game-progress i{display:block;height:100%;background:var(--gold);border-radius:99px}.game-answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}.game-answer{border:2px solid #e0e0e0;background:#fff;border-radius:12px;padding:18px;text-align:left;font-size:17px;font-weight:800;cursor:pointer;transition:.18s}.game-answer:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.08)}.game-wait,.game-result{text-align:center}.game-wait{max-width:690px;margin:auto}.game-wait p{font-size:18px;line-height:1.55}.game-result h2{font-size:38px;margin-bottom:5px}.game-result h3{font-size:24px;color:var(--red);margin-top:0}.game-result-photo{display:block;width:100%;max-width:100%;height:auto;min-height:0;object-fit:initial;object-position:initial;border-radius:14px;background:#f3f3f3;margin:22px auto 18px;padding:18px;box-sizing:border-box}.game-why{max-width:680px;margin:0 auto 10px;font-size:19px;line-height:1.55}.game-credit{margin-bottom:22px}.game-result .actions,.game-wait .actions{justify-content:center;margin-top:24px}@media(max-width:650px){.game-hero h1{font-size:38px}.game-card{padding:22px 16px}.game-card h2{font-size:25px}.game-answers{grid-template-columns:1fr}.game-result h2{font-size:30px}}

/* Your Car Game result photos: override the site's generic .card img rule.
   Keep each source image at its true aspect ratio with no CSS cropping. */
.card img.game-result-photo,
.game-card img.game-result-photo,
.game-result img.game-result-photo {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    overflow:visible !important;
    border-radius:14px;
    background:#f3f3f3;
    margin:22px auto 18px;
    padding:18px;
    box-sizing:border-box;
}