:root{
  --brand-red:#d74e2a;
  --brand-blue:#2c89a6;
  --brand-cream:#f3e0c6;
  --ink:#1b1b1b;
  --shadow:#00000020;
  --radius:18px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--brand-cream);color:var(--ink);font-family:Rubik,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px,92vw);margin-inline:auto}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #00000012;box-shadow:0 2px 10px var(--shadow);z-index:20}
.topbar{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:14px;font-weight:800;letter-spacing:.3px}
.brand img{width:52px;height:52px;object-fit:cover;border-radius:10px;box-shadow:0 3px 0 #00000030}
.brand span{font-family:Oswald,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:1.35rem}
nav{display:flex;gap:18px;flex-wrap:wrap}
nav a{padding:10px 12px;border-radius:10px}
nav a:hover{background:#f1f1f1}
.cta-btn{background:var(--brand-red);color:#fff;padding:12px 16px;border:none;border-radius:12px;font-weight:800;box-shadow:0 4px 0 #00000030;transition:translate .2s ease}
.cta-btn:hover{translate:0 -2px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:40px 0}
.poster{border-radius:var(--radius);overflow:hidden;border:6px solid #e7d3b6;box-shadow:0 12px 0 #00000030}
.hero h1{font-family:Oswald,sans-serif;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;margin:0 0 12px}
.hero p{margin:0 0 18px;font-size:1.1rem}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.badge{background:#fff;border:1px solid #00000016;padding:8px 12px;border-radius:999px;font-weight:600}
.quick-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.ghost{background:#fff;border:2px solid var(--brand-blue);color:var(--brand-blue)}
.card{background:#fff;border-radius:var(--radius);box-shadow:0 10px 20px var(--shadow);border:1px solid #00000012}
.card h3{margin:0 0 14px;font-size:1.2rem}
form{display:grid;gap:12px}
input, textarea, select{width:100%;padding:12px 14px;border:1px solid #d9d9d9;border-radius:12px;font:inherit}
textarea{min-height:120px}
.grid-2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr}
}
section{padding:38px 0}
h2.section{font-family:Oswald,sans-serif;font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 16px}
.lead{font-size:1.05rem;margin:0 0 24px}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:#fff;border:1px solid #00000012;border-radius:16px;padding:18px;box-shadow:0 6px 12px var(--shadow)}
.tile h3{margin:0 0 8px}
.price{font-weight:800;font-size:1.6rem;color:var(--brand-red)}
.muted{color:#555}
.list{padding-left:18px;margin:6px 0 0}
.note{font-size:.95rem;color:#444}
@media (max-width:980px){.pricing{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.pricing{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:#fff;border-radius:16px;border:1px solid #00000012;padding:18px}
.num{display:inline-grid;place-items:center;background:var(--brand-blue);color:#fff;width:36px;height:36px;border-radius:999px;font-weight:800;margin-bottom:8px}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.steps{grid-template-columns:1fr}}
details{background:#fff;border:1px solid #00000012;border-radius:14px;padding:14px 16px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700}
footer{background:#0d0d0d;color:#fff;padding:28px 0;margin-top:28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.hours li{display:flex;justify-content:space-between}
.fine{opacity:.8}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr}}
.float-cta{position:fixed;right:16px;bottom:16px;background:var(--brand-red);color:#fff;border:none;border-radius:999px;padding:14px 18px;font-weight:900;box-shadow:0 14px 24px var(--shadow)}
.subnav{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.subnav a{background:#fff;border:1px solid #00000012;padding:8px 12px;border-radius:999px}
.header-gap{height:8px}

/* Hamburger (mobile only) */
.hamburger{display:none;appearance:none;background:none;border:0;padding:8px;margin-left:auto;cursor:pointer}
.hamburger span{display:block;width:26px;height:3px;background:#111;margin:5px 0;border-radius:2px;transition:transform .2s ease, opacity .2s ease}

/* Mobile behavior */
@media (max-width:720px){
  .hamburger{display:inline-block}
  nav#site-nav{
    display:none;
    position:absolute;
    left:0; right:0; top:64px;
    background:#fff;
    border-top:1px solid #00000012;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    padding:12px 16px;
    z-index:50;
  }
  .topbar{position:relative}
  nav#site-nav a{
    display:block;
    padding:12px 10px;
    margin:2px 0;
    font-size:1rem;
    border-radius:10px;
  }
  nav#site-nav a.cta-btn{
    display:block;
    text-align:center;
    margin-top:6px;
  }
  body.nav-open nav#site-nav{display:block}
  body.nav-open .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.nav-open .hamburger span:nth-child(2){opacity:0}
  body.nav-open .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .topbar{flex-direction:row; align-items:center; gap:12px; padding:10px 0}
  .brand img{width:40px;height:40px}
  .brand span{font-size:1.1rem}
}

/* ——— PRICING PAGE RULES ——— */
/* Match price text size to surrounding text */
#pricing .list .price{font-size:1rem;font-weight:800;color:var(--brand-red)}
/* Stack pricing tiles vertically so each is only as tall as needed */
#pricing .pricing{display:block}
#pricing .tile{margin-bottom:16px}
/* Load-based chart styles */
.loadchart{background:#fff;border:1px solid #00000012;border-radius:16px;padding:18px;box-shadow:0 6px 12px var(--shadow)}
.loadchart h3{margin:0 0 8px}
.loadchart p{margin:0 0 12px}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:16px;height:16px;border-radius:3px;background:var(--brand-blue)}
.swatch.q2{background:#1a6780}
.swatch.q3{background:#0f4a5a}
.swatch.full{background:#08323e}
.chart-wrap{width:100%;max-width:760px;margin:8px auto 0}


/* Pricing list layout: 2 cols on desktop, 1 on mobile */
#pricing .list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 6px;         /* tighter rows */
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
@media (max-width: 860px){
  #pricing .list{ grid-template-columns: 1fr; }
}

/* Each li: price left, text right */
#pricing .list li{
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* Price styling (left-aligned, bold, red) */
#pricing .list .price{
  order: -1;            /* move before text */
  min-width: 60px;      /* keeps them aligned in a neat column */
  text-align: right;    /* align numbers neatly */
  font-weight: 800;
  color: var(--brand-red);
}

/* Optional: bullet removal */
#pricing .list li::before{ content: none; }

/* Make load-based truck image scale nicely on mobile */
.loadchart img {
  width: 100%;        /* always shrink/grow to fit container */
  height: auto;       /* keep aspect ratio */
  max-width: 860px;   /* limit size on large screens */
  display: block;
  margin: 0 auto 16px;
}