:root{--orange:#ff6a00;--blue:#007bff;--dark:#111;--light:#f5f5f5;--text:#202020}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.55}a{color:inherit}
.container{width:min(1180px,92%);margin:auto}.topbar{background:#111;color:#fff;position:sticky;top:0;z-index:20}.nav{min-height:76px;display:flex;align-items:center;gap:24px}.brand{font-weight:900;font-size:23px;line-height:1;text-decoration:none;white-space:nowrap}.brand span{display:block;color:var(--orange);font-size:11px;margin-top:5px}.navlinks{margin-left:auto;display:flex;gap:20px;align-items:center}.navlinks a{text-decoration:none;font-weight:700;font-size:13px}.navlinks a:hover,.navlinks .active{color:var(--orange)}.navcta{background:var(--orange);padding:11px 17px;border-radius:5px}.menu{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:28px}
.hero{position:relative;min-height:610px;display:flex;align-items:center;overflow:hidden;background:#111}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.55) 42%,rgba(0,0,0,.05) 75%)}.hero-content{position:relative;z-index:2;color:#fff;max-width:620px;padding:70px 0}.eyebrow{color:var(--orange);font-weight:900;text-transform:uppercase;letter-spacing:1.2px}.hero h1{font-size:clamp(42px,6vw,74px);line-height:.98;text-transform:uppercase;margin:10px 0 18px}.hero h1 em{font-style:normal;color:var(--orange)}.hero p{font-size:19px}.btn{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;border:0;border-radius:5px;padding:13px 22px;font-weight:900;text-transform:uppercase;cursor:pointer}
.section{padding:70px 0}.light{background:var(--light)}.dark{background:#111;color:#fff}.section h2,.page-hero h1{line-height:1.05;text-transform:uppercase}.section h2{font-size:38px;margin:0 0 14px}.intro{font-size:18px;color:#666;max-width:780px}.dark .intro{color:#ddd}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr)}.feature{text-align:center;padding:32px 24px;border-right:1px solid #ddd}.feature:last-child{border:0}.icon{font-size:38px;color:var(--orange);font-weight:900}.feature h3{font-size:16px;text-transform:uppercase}.feature strong{font-size:23px;color:var(--orange);text-transform:uppercase}
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.market-box{background:#fff;border-left:6px solid var(--orange);padding:24px;box-shadow:0 7px 25px rgba(0,0,0,.09)}.market-box h3{color:var(--orange);font-size:29px;margin:0;text-transform:uppercase}.checklist{list-style:none;padding:0}.checklist li{margin:12px 0;padding-left:27px}.checklist li:before{content:"✓";color:var(--orange);font-weight:900;margin-left:-27px;margin-right:12px}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.card{background:#fff;color:#111;border-radius:5px;overflow:hidden}.card img{width:100%;height:130px;object-fit:cover}.card div{text-align:center;padding:13px;font-weight:900;font-size:13px;text-transform:uppercase}.quote{background:#07518d;color:#fff;padding:30px;border-radius:6px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{grid-column:1/-1}input,textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:4px;font:inherit}textarea{min-height:120px}.page-hero{background:#111;color:#fff;padding:70px 0}.page-hero h1{font-size:52px;margin:0 0 10px}.footer{background:#111;color:#fff;padding:32px 0}.footer-inner{display:flex;justify-content:space-between;gap:20px}.footer a{text-decoration:none}.footer-links{display:flex;flex-wrap:wrap;gap:15px;justify-content:flex-end}.copyright{text-align:center;color:#aaa;font-size:13px;margin-top:20px}.notice{background:#fff4ec;border-left:5px solid var(--orange);padding:17px;margin-top:25px}
@media(max-width:950px){.navlinks{display:none}.menu{display:block}.nav.open .navlinks{display:flex;position:absolute;top:76px;left:0;right:0;background:#111;padding:18px;flex-direction:column;align-items:flex-start}.feature-grid{grid-template-columns:1fr 1fr}.cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.hero{min-height:650px}.hero h1{font-size:43px}.split,.feature-grid,.form-grid{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid #ddd}.cards{grid-template-columns:1fr 1fr}.page-hero h1{font-size:40px}.footer-inner{flex-direction:column}.footer-links{justify-content:flex-start}}

/* Homepage hero: left-aligned copy to preserve visibility of the van */
@media (min-width: 951px) {
  .hero-content.container {width: min(1180px, 96%); max-width: none; margin-left: 2%; margin-right: auto;}
  .hero-content h1 {max-width: 455px; font-size: clamp(42px, 4.2vw, 58px); line-height: 1.04;}
  .hero-content p {max-width: 415px;}
  .hero:after {background: linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.55) 31%,rgba(0,0,0,.02) 65%);}
}

/* Keep the entire homepage hero copy together on the left on desktop. */
@media (min-width: 951px) {
  .hero .hero-content.container {
    width: min(1180px, 96%);
    max-width: none;
    margin-left: 2%;
    margin-right: auto;
    text-align: left;
  }
  .hero .hero-content .eyebrow,
  .hero .hero-content h1,
  .hero .hero-content p {
    max-width: 410px;
    margin-left: 0;
    margin-right: auto;
  }
  .hero .hero-content .btn {
    margin-left: 0;
  }
}

/* Homepage refinement: show the entire van roof and keep the vehicle to the right. */
@media (min-width: 951px) {
  .hero > img {
    inset: auto 0 auto auto;
    top: 0;
    right: 0;
    left: auto;
    width: 78%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
  }
  .hero .hero-content.container {
    margin-left: 2%;
    margin-right: auto;
  }
  .feature-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 651px) and (max-width: 950px) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* October homepage corrections: keep the van entirely in the right-hand region. */
@media (min-width: 951px) {
  .hero { min-height: 610px; }
  .hero > img {
    inset: auto 0 auto auto !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 57% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right center !important;
  }
  .hero .hero-content.container { width: min(1180px,96%); margin-left:2%; }
  .hero .hero-content h1, .hero .hero-content p { max-width: 410px; }
}
/* Center the three homepage benefits as a single group. */
.feature-grid {
  width: min(1180px, 92%);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: stretch;
}
.feature-grid > .feature { text-align: center; padding: 32px 26px; }
.feature-grid > .feature .icon, .feature-grid > .feature h3, .feature-grid > .feature p { text-align:center; }
@media (max-width:650px) {
  .feature-grid { grid-template-columns: 1fr; }
}


/* Final centered desktop layout: one original photo, no duplicate background. */
@media (min-width: 951px) {
  .hero {
    background: #111 !important;
    min-height: 610px;
  }
  .hero .hero-content.container {
    width: min(1180px, 92%) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 70px;
    padding-bottom: 70px;
    text-align: left;
  }
  .hero .hero-content h1,
  .hero .hero-content p,
  .hero .hero-content .eyebrow {
    max-width: 410px;
  }
  .hero > img {
    inset: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: max(4%, calc((100% - 1180px) / 2)) !important;
    width: min(780px, 67%) !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right center !important;
    transform: none !important;
  }
  .hero::after {
    background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.65) 26%, rgba(0,0,0,.15) 48%, rgba(0,0,0,0) 70%) !important;
  }
}

/* Sitewide wide-screen layout: shared across all pages. */
@media (min-width: 951px) {
  .container, .feature-grid {
    width: min(1500px, 96%) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero .hero-content.container {
    width: min(1500px, 96%) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero .hero-content h1, .hero .hero-content p,
  .hero .hero-content .eyebrow { max-width: 500px !important; }
  .hero > img {
    right: max(2%, calc((100% - 1500px) / 2)) !important;
    width: min(1000px, 65%) !important;
    object-fit: contain !important;
    object-position: right center !important;
  }
  .hero::after {
    background: linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.68) 25%,rgba(0,0,0,.18) 50%,rgba(0,0,0,0) 75%) !important;
  }
}


/* Homepage: single original photo spanning the full hero; no duplicate photo layer. */
@media (min-width: 951px) {
  .hero {
    min-height: 610px !important;
    background: #111 !important;
  }
  .hero > img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 54% !important;
    transform: none !important;
  }
  .hero::after {
    background: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.90) 24%, rgba(0,0,0,.62) 39%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 80%) !important;
  }
  .hero .hero-content.container {
    width: min(1500px, 96%) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 70px 0 !important;
    text-align: left !important;
  }
  .hero .hero-content h1 {
    max-width: 520px !important;
    font-size: clamp(42px, 4.8vw, 70px) !important;
    line-height: 1.02 !important;
  }
  .hero .hero-content p { max-width: 460px !important; }
  .hero .hero-content .eyebrow { max-width: 520px !important; }
}
/* Keep a single continuous original image behind copy on smaller screens too. */
@media (max-width: 950px) {
  .hero { background-image: none !important; }
  .hero > img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% center; }
  .hero::after { background: linear-gradient(90deg,rgba(0,0,0,.89),rgba(0,0,0,.45)) !important; }
}

/* Full original 1536 x 1024 photograph: desktop banner matches its 3:2 ratio.
   This makes the hero taller and prevents cropping the roof or tires. */
@media (min-width: 951px) {
  .hero {
    height: 66.666667vw !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .hero > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* October 21 adjustment: anchor all hero copy to the upper-left of the photograph. */
@media (min-width: 951px) {
  .hero { align-items: flex-start !important; }
  .hero .hero-content.container {
    width: 96% !important;
    max-width: none !important;
    margin-left: 2% !important;
    margin-right: 2% !important;
    padding: clamp(34px, 4vw, 65px) 0 0 !important;
    align-self: flex-start !important;
  }
  .hero .hero-content h1 { margin-top: 8px !important; }
  .hero .hero-content p { margin-top: 12px !important; }
}

/* Desktop hero: pin copy 50px below navigation, independent of banner height. */
@media (min-width: 951px) {
  .hero { position: relative !important; align-items: flex-start !important; }
  .hero .hero-content.container {
    position: absolute !important;
    z-index: 3 !important;
    top: 50px !important;
    left: 2% !important;
    right: auto !important;
    bottom: auto !important;
    width: 440px !important;
    max-width: 440px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
  }
  .hero .hero-content .eyebrow { font-size: 14px !important; margin: 0 0 8px !important; }
  .hero .hero-content h1 {
    font-size: clamp(38px, 3.1vw, 52px) !important;
    line-height: 1.02 !important;
    max-width: 440px !important;
    margin: 0 0 14px !important;
  }
  .hero .hero-content p {
    max-width: 410px !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    margin: 0 0 18px !important;
  }
}