*{box-sizing:border-box}html{background:#0c0d0c}body{margin:0;background:linear-gradient(#17130f,#080b0a);color:#f3e8d1;font:16px/1.6 system-ui,Arial,sans-serif}a{color:#d8f78c}a:focus-visible,button:focus-visible{outline:3px solid #c7ff39;outline-offset:3px}.hero{position:relative;width:100%;max-width:1800px;margin:auto}.hero img{display:block;width:100%;height:auto}.hero .hero-night{position:absolute;inset:0;opacity:0;transition:opacity 1.15s ease-in-out;pointer-events:none}.hero.night .hero-night{opacity:1}.hero .hero-day{transition:filter 1.15s ease-in-out}.hero.night .hero-day{filter:saturate(.88)}.hotspot{position:absolute;top:88.1%;height:9.7%;display:block;z-index:2;border-radius:7px}.hotspot:hover,.hotspot:focus-visible{box-shadow:inset 0 0 0 3px #d8ff46;background:#d9ff4622}.night-button{position:absolute;right:2.2%;top:81.8%;width:14.3%;height:5%;z-index:3;cursor:pointer;background:transparent;border:0;border-radius:10px}.night-button:hover,.night-button:focus-visible{box-shadow:0 0 0 3px #d8ff46}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.mobile-nav{display:none}.content{max-width:1080px;margin:35px auto 80px;padding:0 24px}.content h1{color:#e4ff91;font-size:clamp(1.8rem,4vw,3rem);margin-bottom:.2em}.content h2{color:#f4c982}.panel{background:#201b15;border:1px solid #66543a;border-radius:12px;padding:22px;margin:20px 0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.cards a{display:block;padding:22px;background:#252119;border:1px solid #6e5e42;border-radius:12px;text-decoration:none}.cards a:hover{border-color:#c7ff39}.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}.gallery img{width:100%;border-radius:9px;display:block}footer{text-align:center;padding:30px;color:#baa88b;border-top:1px solid #40372d}.site-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px;background:#191611}.site-nav a{color:#f0e6cc;text-decoration:none;padding:8px 12px;border:1px solid #65583e;border-radius:5px}.site-nav a[aria-current=page]{color:#d9ff54;border-color:#d9ff54}button.toggle{cursor:pointer;padding:9px 16px;border:1px solid #b4d652;background:#26311d;color:#f6ffd8;border-radius:6px}@media(max-width:720px){.hotspot,.night-button{display:none}.mobile-nav{display:flex;flex-wrap:wrap;gap:7px;padding:12px;justify-content:center;background:#1a1612}.mobile-nav a,.mobile-nav button{padding:10px 12px;background:#343021;color:#f9e6c5;border:1px solid #766a4b;border-radius:5px;text-decoration:none}.mobile-nav a[aria-current=page]{border-color:#c7ff39;color:#c7ff39}.content{margin-top:15px}}
/* Enhanced day/night atmosphere and accessible toggle */
body{transition:background 1s ease,color .6s ease}
body.night-mode{background:linear-gradient(#050b16,#080b10);color:#e2e9f0}
body.night-mode .panel,body.night-mode .cards a{background:#141c29;border-color:#42516a}
body.night-mode .site-nav,body.night-mode .mobile-nav{background:#111927}
.night-button{touch-action:manipulation;transition:box-shadow .25s ease}
.night-button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #c4eaff66}
.mobile-nav button[aria-pressed="true"]{background:#223b5a;color:#e8f3ff;border-color:#7ca9ed}
@media(prefers-reduced-motion:reduce){.hero .hero-night,.hero .hero-day,body{transition:none}}

/* 2026 visual refresh */
.hero-stage{max-width:1920px;isolation:isolate;overflow:hidden;background:#080b12;aspect-ratio:1672/941}
.hero-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.1s ease,filter 1.1s ease}
.hero-stage .hero-compare{opacity:1}.hero-stage .hero-day,.hero-stage .hero-night{opacity:0}
.hero-stage[data-view="day"] .hero-day{opacity:1}.hero-stage[data-view="night"] .hero-night{opacity:1}
.hero-stage[data-view="day"] .hero-compare,.hero-stage[data-view="night"] .hero-compare{opacity:0}
.hero-brand{position:absolute;top:1.5%;left:1.3%;width:19%;z-index:4;display:block}
.hero-brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 8px #000a)}
.hero-links{position:absolute;z-index:5;top:2.2%;left:21%;right:3%;display:flex;gap:.45%;justify-content:space-between}
.hero-links a{flex:1;text-align:center;text-decoration:none;text-transform:uppercase;font-size:clamp(10px,1.15vw,20px);font-weight:850;letter-spacing:.03em;color:#f7e6c8;background:linear-gradient(#42372f,#1b1817);border:2px solid #8b7662;border-radius:4px;padding:clamp(7px,1.15vw,19px) 2px;box-shadow:0 3px 9px #000a;text-shadow:0 2px 2px #000}
.hero-links a:hover,.hero-links a[aria-current=page]{color:#d4ff56;border-color:#d4ff56;background:linear-gradient(#364526,#151e14)}
.view-toolbar{position:absolute;z-index:6;top:17%;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:5px;border:1px solid #b3a18a;background:#15171ce8;border-radius:40px;box-shadow:0 5px 20px #0008;white-space:nowrap}
.view-toolbar button{border:0;border-radius:35px;padding:9px 16px;background:transparent;color:#eee;font-weight:750;cursor:pointer}
.view-toolbar button[aria-pressed=true]{background:#d7ff68;color:#17200c}
.subpage-header{min-height:180px;background:radial-gradient(ellipse at 65% 20%,#403222,#12100f 70%);display:flex;align-items:center;justify-content:space-between;gap:30px;padding:14px max(3vw,20px);border-bottom:2px solid #86744d}
.subpage-logo{width:min(390px,55%)}.subpage-logo img{display:block;width:100%;height:auto}.garage-logo{width:min(260px,33%);height:auto;mix-blend-mode:screen}
.subpage-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:15px;background:#191611}
.subpage-nav a,.subpage-nav button{font:inherit;font-size:14px;color:#f0e6cc;text-decoration:none;padding:9px 12px;border:1px solid #65583e;border-radius:5px;background:#29251e;cursor:pointer}
.subpage-nav a[aria-current=page],.subpage-nav a:hover{color:#d9ff54;border-color:#d9ff54}
body.night-mode .subpage-header{background:radial-gradient(ellipse at 65% 20%,#24334b,#080c17 70%)}
body.night-mode .subpage-nav{background:#101827}
@media(max-width:760px){.hero-stage{aspect-ratio:4/5}.hero-stage>img{object-fit:cover;object-position:center}.hero-brand{top:2%;width:34%}.hero-links{top:auto;left:2%;right:2%;bottom:2%;flex-wrap:wrap;gap:5px}.hero-links a{flex:1 0 22%;font-size:12px;padding:8px 2px}.view-toolbar{top:17%;max-width:98%;}.view-toolbar button{font-size:12px;padding:8px}.subpage-header{min-height:115px}.garage-logo{max-width:28%}}
@media(prefers-reduced-motion:reduce){.hero-stage>img{transition:none}}

/* Final edition: the illustrated navigation is the sole hero navigation. */
.hero-stage{position:relative;aspect-ratio:1648/464;overflow:hidden;isolation:isolate;background:#0b121a}
.hero-stage>.hero-day,.hero-stage>.hero-night{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transition:opacity 1.25s ease,filter 1.25s ease}
.hero-stage>.hero-day{opacity:1}.hero-stage>.hero-night{opacity:0}
.hero-stage[data-view="night"]>.hero-day{opacity:0}.hero-stage[data-view="night"]>.hero-night{opacity:1}
.art-navigation{position:absolute;top:0;left:0;width:100%;z-index:4}
.navigation-image{display:block;width:100%;height:auto;pointer-events:none}
.art-hotspots{position:absolute;inset:0;display:block!important;background:none!important;padding:0!important;border:0!important}
.art-hotspots .hotspot{position:absolute;top:25%;height:54%;font-size:0;color:transparent;background:transparent!important;border:0!important;padding:0!important;display:block!important;box-shadow:none!important;border-radius:0!important}
.art-hotspots .hotspot:focus-visible{outline:3px solid #c9ff3a;outline-offset:-4px;background:rgba(191,255,65,.15)!important}
.view-toolbar{position:absolute;z-index:6;top:27%;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:6px;border-radius:30px;background:rgba(12,15,17,.78);box-shadow:0 4px 16px #0008;white-space:nowrap}
.view-toolbar button{cursor:pointer;border:1px solid #777;border-radius:24px;padding:8px 16px;background:#24282a;color:#f7f3eb;font-weight:700;font-size:clamp(10px,1.1vw,16px)}
.view-toolbar button[aria-pressed="true"]{background:#b4ee40;color:#162000;border-color:#b4ee40}
@media(max-width:700px){.hero-stage{aspect-ratio:1648/680}.hero-stage>.hero-day,.hero-stage>.hero-night{object-fit:cover;object-position:center}.view-toolbar{top:29%;}.view-toolbar button{padding:6px 9px;font-size:11px}.art-navigation{width:100%}}
@media(prefers-reduced-motion:reduce){.hero-stage>.hero-day,.hero-stage>.hero-night{transition:none}}

/* Final two-image day/night stage and artwork navigation */
.hero-stage{aspect-ratio:1672/941;position:relative;max-width:1920px;overflow:hidden}
.hero-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.15s ease}
.hero-stage .hero-day{opacity:1}.hero-stage .hero-night{opacity:0}
.hero-stage[data-view="night"] .hero-day{opacity:0}
.hero-stage[data-view="night"] .hero-night{opacity:1}
.art-navigation{position:absolute;z-index:10;top:0;left:0;width:100%;height:auto}
.art-navigation .navigation-image{display:block;width:100%;height:auto}
.art-hotspots{position:absolute;inset:0}
.art-hotspots .hotspot{position:absolute;top:20%;height:60%;z-index:11;color:transparent;font-size:0;text-decoration:none}
.art-hotspots .hotspot:hover,.art-hotspots .hotspot:focus-visible{background:#d8ff4628;box-shadow:inset 0 0 0 2px #d8ff46}
.view-toolbar{position:absolute;z-index:12;top:18%;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:5px;background:#141414d9;border:1px solid #8a7c59;border-radius:30px}
.view-toolbar button{cursor:pointer;border:0;border-radius:20px;background:transparent;color:#f6ead7;padding:8px 17px;font-weight:700}
.view-toolbar button[aria-pressed="true"]{background:#b9e65a;color:#18210b}
.subpage-header{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1080px;margin:auto;padding:16px 22px}
.subpage-logo{display:block;max-width:310px;width:45%}.subpage-logo img{display:block;width:100%;height:auto}
.garage-logo{display:block;max-width:245px;width:37%;height:auto}
.subpage-nav{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:12px;background:#191611}
.subpage-nav a,.subpage-nav button{color:#f0e6cc;text-decoration:none;padding:8px 12px;border:1px solid #65583e;border-radius:5px;background:#242017;font:inherit;cursor:pointer}
.subpage-nav a[aria-current="page"]{color:#d9ff54;border-color:#d9ff54}
@media(max-width:720px){.art-navigation{position:relative;background:#17130f}.hero-stage{overflow:visible}.art-hotspots .hotspot{top:10%;height:75%}.view-toolbar{top:auto;bottom:3%;left:50%}.subpage-header{padding:12px}}
@media(prefers-reduced-motion:reduce){.hero-stage>img{transition:none}}

/* Seamless illustrated navigation: transparent, accessible hotspots over artwork */
.hero.hero-stage{aspect-ratio:1672/470;max-width:2000px;overflow:hidden;position:relative}
.hero-stage>img{width:100%;height:100%;object-fit:fill;position:absolute;inset:0}
.hero-stage[data-view="day"] .hero-day,.hero-stage[data-view="night"] .hero-night{opacity:1}
.hero-stage[data-view="day"] .hero-night,.hero-stage[data-view="night"] .hero-day{opacity:0}
.seamless-hotspots{position:absolute;inset:0;z-index:10;pointer-events:none}
.seamless-hotspots a{position:absolute;top:4.8%;height:17.4%;z-index:11;pointer-events:auto;color:transparent;font-size:0;border-radius:5px;text-decoration:none}
.seamless-hotspots a:hover{box-shadow:inset 0 0 0 2px #d8ff65;background:#c9ff3920}
.seamless-hotspots a:focus-visible{outline:3px solid #d8ff65;outline-offset:1px}
.hero-stage .view-toolbar{position:absolute;top:auto;bottom:3%;left:50%;transform:translateX(-50%);z-index:12;display:flex;gap:6px;padding:5px;background:#090e12c9;border:1px solid #b5a17a;border-radius:100px;backdrop-filter:blur(6px)}
.hero-stage .view-toolbar button{font-size:clamp(12px,1.1vw,16px);padding:6px 16px;border-radius:99px;cursor:pointer;border:1px solid #9a906c;background:#1a2027;color:#fff}
.hero-stage .view-toolbar button[aria-pressed="true"]{background:#c5f044;color:#12190a;border-color:#c5f044}
@media(max-width:720px){.seamless-hotspots{display:none}.mobile-nav{display:flex}.hero-stage .view-toolbar{bottom:2%;padding:3px}.hero-stage .view-toolbar button{padding:4px 9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.hero-stage>img{transition:none!important}}


/* ========================================
   HOBO'S JUNKYARD - OFF ROAD PAGE
   ======================================== */

.offroad-intro {
    padding: 55px 38px;
    margin: 28px 0 45px;
    border: 1px solid #65543a;
    border-radius: 14px;
    background:
        linear-gradient(120deg, #161d16, #343025);
    color: #f3ecdc;
}

.offroad-eyebrow,
.offroad-section-heading > span {
    color: #a5cf54;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 3px;
}

.offroad-intro h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.12;
    margin: 15px 0 20px;
    color: #fff4df;
}

.offroad-intro p {
    max-width: 730px;
    line-height: 1.8;
    color: #e1d6c5;
}

.offroad-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.offroad-tags span {
    padding: 9px 15px;
    border: 1px solid #79834e;
    border-radius: 30px;
    font-size: .8rem;
    color: #d9efb4;
}

.offroad-section {
    margin: 55px 0;
}

.offroad-section-heading {
    margin-bottom: 25px;
}

.offroad-section-heading h2 {
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    margin: 9px 0;
}

.offroad-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.offroad-card {
    --machine-color: #a98b63;
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 12px;
    border: 1px solid #766b58;
    border-top: 5px solid var(--machine-color);
    background: linear-gradient(145deg, #282b26, #171916);
    color: #e9e3d8;
    transition: transform .2s, box-shadow .2s;
}

.offroad-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px #0004;
}

.offroad-card.pink {
    --machine-color: #ef79b0;
}

.offroad-card.lime {
    --machine-color: #a6ed30;
}

.offroad-card.burgundy {
    --machine-color: #963f54;
}

.offroad-card-top {
    display: flex;
    justify-content: space-between;
    color: var(--machine-color);
    font-weight: 800;
}

.offroad-number {
    opacity: .55;
}

.offroad-vehicle-icon {
    font-size: 3rem;
    color: var(--machine-color);
    margin: 24px 0;
}

.offroad-card h3 {
    font-size: 1.45rem;
    margin-bottom: 8px;
    color: #fff3dd;
}

.offroad-subtitle {
    color: var(--machine-color);
    font-weight: 700;
}

.offroad-card p {
    line-height: 1.7;
}

.offroad-chip {
    display: inline-block;
    margin-top: 15px;
    padding: 6px 12px;
    border: 1px solid var(--machine-color);
    border-radius: 5px;
    color: var(--machine-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.offroad-parks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.offroad-park {
    display: block;
    padding: 26px;
    background: #252820;
    color: #eee5d5;
    border: 1px solid #62684b;
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .2s, transform .2s;
}

.offroad-park:hover {
    border-color: #a5cf54;
    transform: translateY(-3px);
}

.offroad-park-state {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #a5cf54;
}

.offroad-park h3 {
    margin: 12px 0;
    color: #fff0d3;
}

.offroad-park p {
    line-height: 1.6;
    color: #c9c5b7;
}

.offroad-park-link {
    display: inline-block;
    margin-top: 12px;
    color: #b8ed75;
    font-weight: 700;
}

.offroad-camping {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 35px;
    align-items: center;
    padding: 40px;
    border-radius: 14px;
    background: linear-gradient(125deg, #3a2a20, #181e18);
    color: #f3e7d5;
}

.offroad-camping h2 {
    font-size: 2rem;
    color: #fff0d8;
}

.offroad-camping p {
    line-height: 1.8;
}

.offroad-camp-stamp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 230px;
    border: 3px dashed #a5cf54;
    border-radius: 50%;
    text-align: center;
    transform: rotate(-7deg);
    color: #bce77e;
}

.offroad-camp-stamp strong {
    font-size: 2rem;
    line-height: 1.15;
}

.offroad-camp-stamp span {
    font-size: .7rem;
    letter-spacing: 2px;
    font-weight: 800;
}

.offroad-signoff {
    margin: 55px 0 20px;
    text-align: center;
    padding: 40px 15px;
    border-top: 1px solid #827458;
}

.offroad-signoff span {
    color: #91b85b;
    font-weight: 800;
    letter-spacing: 3px;
}

.offroad-signoff h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 700px) {
    .offroad-grid,
    .offroad-parks,
    .offroad-camping {
        grid-template-columns: 1fr;
    }

    .offroad-intro,
    .offroad-camping {
        padding: 26px 20px;
    }

    .offroad-camp-stamp {
        width: 220px;
        min-height: 220px;
        margin: 15px auto;
    }
}