/* Path buttons, wider nav, and form section helpers for v4 */
.hero-actions{flex-direction:column;align-items:flex-start;gap:.85rem;width:min(100%,42rem)}
.hero-paths{display:grid;gap:.7rem;width:100%}
@media (min-width:700px){
  .hero-paths{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.btn-path{background:var(--inverse);color:var(--ink);border:1px solid var(--inverse);min-height:52px;font-size:1.05rem;font-weight:600;justify-content:center;text-align:center;width:100%}
.btn-path:hover{background:transparent;color:var(--inverse)}
@media (width>=860px){
  .site-nav,.site-nav.is-open{max-width:48rem}
}
#drive .form-actions,#brokers .form-actions,#quote .form-actions{margin-bottom:.25rem}

/* v5 photos, hero logo, gallery */
.site-header .brand-logo{
  width:auto;
  max-width:148px;
  height:auto;
  max-height:80px;
  display:block;
}
@media (min-width:860px){
  .site-header .brand-logo{
    max-width:180px;
    max-height:96px;
  }
}
.footer-logo.brand-logo,
.site-footer .brand-logo{
  width:auto;
  max-width:128px;
  max-height:96px;
  height:auto;
}
.hero{
  position:relative;
  background-color:#120f0d;
  background-image:
    linear-gradient(90deg, rgba(8,6,4,.62) 0%, rgba(8,6,4,.40) 42%, rgba(8,6,4,.22) 100%),
    linear-gradient(180deg, rgba(8,6,4,.42) 0%, rgba(8,6,4,.20) 45%, rgba(8,6,4,.58) 100%),
    url("/media/fleet/approved-blue-sunset-1600.webp");
  background-size:cover;
  background-position: 72% 42%;
  color:var(--inverse);
}
.hero h1,
.hero .lede,
.hero .usdot,
.hero .stats strong,
.hero .eyebrow{
  text-shadow:0 2px 16px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.75);
}
.hero-logo{
  width:clamp(168px, 36vw, 320px);
  height:auto;
  display:block;
  margin:0 0 1rem;
  padding:.35rem .4rem .4rem;
  background:#fff;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.hero-grid{
  grid-template-columns:minmax(0,1fr);
  max-width:46rem;
}
@media (width>=860px){
  .hero{padding:3.5rem 0 4.25rem}
  .hero-grid{grid-template-columns:minmax(0,1fr);max-width:46rem}
}
.haul-photos{
  display:grid;
  gap:1rem;
  margin:1.35rem 0 1.6rem;
}
.haul-photos figure,
.about-photo,
.trucks-gallery figure{
  margin:0;
  background:var(--sheet);
  border:1px solid var(--line);
  padding:.45rem .45rem .7rem;
}
.haul-photos img,
.about-photo img,
.trucks-gallery img{
  width:100%;
  height:auto;
  display:block;
}
.haul-photos figcaption,
.about-photo figcaption,
.trucks-gallery figcaption{
  color:var(--muted);
  margin:.55rem .15rem .1rem;
  font-size:.95rem;
}
@media (min-width:700px){
  .haul-photos{grid-template-columns:1.15fr .85fr;align-items:start}
}
.about-photo{width:100%;max-width:none}
.about-photo img{width:100%;max-width:none}
.trucks-gallery{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
.trucks-gallery img{
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center 45%;
}
@media (min-width:640px){
  .trucks-gallery{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .trucks-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* slightly tighter sticky offset now that the header logo is medium, not 128px */
:root{--header-offset:8.25rem}
@media (min-width:860px){
  :root{--header-offset:7.25rem}
}

/* Logo orange accent — matches the VONA in the site logo */
:root{
  --accent:#C1440C;
  --signal:#C1440C;
  --accent-hover:#9E380A;
}
.header-call:hover,
.call-sticky:hover{
  background:var(--accent-hover);
}


/* Official logo 3 + self-hosted Rye + big path buttons + merch/rentals */
@font-face{
  font-family:"Rye";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/rye-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Rye";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/rye-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
h1,h2,h3,h4,
.site-nav a,
.btn,
.btn-path-title,
.header-call,
.call-sticky,
.brand-name,
.footer-name,
.service-toggle{
  font-family:"Rye","Source Sans 3",Georgia,serif;
  font-weight:400;
  letter-spacing:.02em;
}
.site-nav a{
  font-size:.92rem;
}
@media (width>=860px){
  .site-nav,.site-nav.is-open{max-width:62rem}
}

/* White-on-dark official wordmark: drop the old white card */
.hero-logo{
  width:clamp(200px, 58vw, 380px);
  height:auto;
  display:block;
  margin:0 0 .75rem;
  padding:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.7));
}

/* Unit 22 red-dirt hero — darker overlay so the logo and buttons stay readable */
.hero{
  background-color:#120f0d;
  background-image:
    linear-gradient(90deg, rgba(8,6,4,.78) 0%, rgba(8,6,4,.52) 42%, rgba(8,6,4,.28) 100%),
    linear-gradient(180deg, rgba(8,6,4,.42) 0%, rgba(8,6,4,.18) 42%, rgba(8,6,4,.68) 100%),
    url("/media/fleet/approved-unit22-reddirt-1600.webp");
  background-size:cover;
  background-position:58% 40%;
  color:var(--inverse);
}

/* Big orange path buttons — first thing people see */
.hero-actions{
  flex-direction:column;
  align-items:stretch;
  gap:.7rem;
  width:min(100%,44rem);
  margin-top:.85rem;
}
.hero-paths{
  display:grid;
  gap:.65rem;
  width:100%;
}
.btn-path{
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  min-height:4.15rem;
  width:100%;
  padding:.85rem 1rem;
  font-size:1.2rem;
  font-weight:400;
  justify-content:center;
  align-items:center;
  text-align:center;
  flex-direction:column;
  gap:.15rem;
  line-height:1.15;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.btn-path:hover,
.btn-path:focus-visible{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  color:#fff;
}
.btn-path-title{
  display:block;
  font-family:"Rye","Source Sans 3",Georgia,serif;
  font-size:clamp(1.15rem, 3.6vw, 1.45rem);
  letter-spacing:.03em;
}
.btn-path-sub{
  display:block;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:0;
  opacity:.95;
}
.hero-rent-link{
  display:inline-block;
  color:#fff;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:1rem;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:.18em;
  padding:.15rem 0 .25rem;
}
.hero a.hero-rent-link,
.hero-rent-link{
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8);
}
.hero-rent-link:hover{color:#ffd7c2}
@media (min-width:700px){
  .hero-paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn-path{min-height:4.6rem}
}
@media (max-width:699px){
  .hero{padding:.7rem 0 1.15rem}
  .hero-logo{width:clamp(132px, 48vw, 200px);margin-bottom:.35rem}
  .hero h1{margin-bottom:.2rem;font-size:clamp(1.65rem, 8vw, 2.15rem);line-height:1.05}
  .hero .lede{margin-bottom:.25rem;font-size:.95rem}
  .hero .eyebrow{margin-bottom:.2rem}
  .hero .usdot{margin-bottom:.15rem}
  .hero-paths{gap:.4rem}
  .btn-path{min-height:3.15rem;padding:.55rem .7rem}
  .btn-path-title{font-size:1.05rem}
  .btn-path-sub{font-size:.78rem}
}

/* Merch */
.merch-grid{
  display:grid;
  gap:1.25rem;
  margin:1.5rem 0 2rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .merch-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .merch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.merch-card{
  background:var(--sheet);
  border:1px solid var(--line);
  padding:.55rem .55rem 1rem;
  margin:0;
}
.merch-card img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  background:#e8e4dc;
}
.merch-card h3{
  margin:.75rem .35rem .25rem;
  font-size:1.15rem;
}
.merch-card p{
  margin:.2rem .35rem;
}
.merch-price{
  font-weight:700;
  color:var(--accent);
}
.merch-ship{
  color:var(--muted);
  font-size:.95rem;
}
#rentals .form-actions,
#merch .form-actions{margin-bottom:.25rem}
#merch form,#rentals form{margin-top:1.25rem}

#owner-operator .form-actions{margin-bottom:.25rem}


/* v8: 2x2 path buttons + nav with Owner-Operators */
@media (width>=860px){
  .site-nav,.site-nav.is-open{max-width:78rem}
  .site-nav a{font-size:.84rem;padding-inline:.35rem}
  .hero{padding:1.5rem 0 2rem}
  .hero-logo{width:clamp(200px, 26vw, 300px);margin-bottom:.5rem}
  .hero h1{margin-bottom:.35rem}
  .hero .lede{margin-bottom:.35rem}
}
.hero-actions{width:min(100%,54rem)}
.haul-photos{grid-template-columns:1fr !important;max-width:900px;margin-inline:auto}