/* ===================================================
   Load & Go Hauling — styles.css
   Mobile-first, fast, no external font/icon requests
   =================================================== */

:root{
  --navy: #0e2a47;
  --navy-dark: #081a2e;
  --orange: #f4a621;
  --orange-dark: #d98b0f;
  --ink: #1c2733;
  --gray-700: #45525f;
  --gray-500: #6b7885;
  --gray-200: #e4e9ee;
  --gray-100: #f4f6f8;
  --white: #ffffff;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(14,42,71,0.10);
  --shadow-lg: 0 16px 40px rgba(14,42,71,0.16);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ line-height:1.15; margin:0 0 .5em; font-weight:800; }
p{ margin:0 0 1em; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--navy); color:#fff; padding:10px 16px; z-index:200;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight:700;
  font-size:1rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{
  background: var(--orange);
  color: var(--navy-dark);
  box-shadow: 0 6px 18px rgba(244,166,33,0.35);
}
.btn-primary:hover{ background: var(--orange-dark); }
.btn-secondary{
  background: transparent;
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
}
.hero .btn-secondary, .final-cta .btn-secondary{ color:#fff; }
.btn-secondary:hover{ background: rgba(255,255,255,0.12); }
.btn-outline{
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline:hover{ background: rgba(14,42,71,0.06); }
.pricing .btn-primary{ margin-top:8px; }
.btn-lg{ padding:16px 30px; font-size:1.05rem; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index:100;
  background: var(--navy);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:68px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}
.brand-mark{
  background: var(--orange);
  color: var(--navy-dark);
  font-weight:900;
  font-size:.85rem;
  padding:6px 8px;
  border-radius:8px;
  letter-spacing:.5px;
}
.brand-mark-img{
  width:44px;
  height:44px;
  border-radius:9px;
  object-fit:cover;
  display:block;
  flex-shrink:0;
}
.brand-name{ font-weight:800; font-size:1.05rem; }

.main-nav{
  display:none;
}
.main-nav a{
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  padding:10px 12px;
  opacity:.9;
}
.main-nav a:hover{ opacity:1; }
.main-nav .nav-cta{
  background: var(--orange);
  color: var(--navy-dark);
  border-radius:999px;
  padding:10px 18px;
  opacity:1;
}

.menu-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;
  height:38px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
}
.menu-toggle span{
  display:block;
  height:2px;
  width:100%;
  background:#fff;
  border-radius:2px;
}

/* Mobile nav drawer */
@media (max-width: 899px){
  .main-nav{
    position:fixed;
    inset: 68px 0 0 0;
    background: var(--navy);
    display:flex;
    flex-direction:column;
    padding: 10px 20px 24px;
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav.open{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
  .main-nav a{
    padding:14px 4px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    font-size:1.05rem;
  }
  .main-nav .nav-cta{
    text-align:center;
    margin-top:14px;
    border-bottom:none;
  }
}
@media (min-width: 900px){
  .menu-toggle{ display:none; }
  .main-nav{
    display:flex;
    align-items:center;
    gap:4px;
  }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff;
  overflow:hidden;
  padding: 56px 0 64px;
}
.hero-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(244,166,33,0.14) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(244,166,33,0.10) 0, transparent 40%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:36px;
  align-items:center;
  text-align:center;
}
.eyebrow{
  color: var(--orange);
  font-weight:700;
  letter-spacing:.4px;
  font-size:.85rem;
  text-transform:uppercase;
  margin-bottom:14px;
}
.hero h1{
  font-size: clamp(2rem, 7vw, 3.4rem);
  margin-bottom:.45em;
}
.hero-sub{
  font-size: 1.15rem;
  color: rgba(255,255,255,0.9);
  max-width: 560px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:.4em;
}
.hero-line{
  font-size:.98rem;
  color: rgba(255,255,255,0.7);
  max-width: 560px;
  margin: 0 auto .6em;
}
.hero-price-line{
  font-size:1.2rem;
  color: var(--orange);
  max-width: 560px;
  margin: 0 auto 0;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin: 22px 0 6px;
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  justify-content:center;
  margin-top: 22px;
  font-size:.9rem;
  color: rgba(255,255,255,0.75);
  font-weight:600;
}
.hero-badges li::before{
  content:"✓ ";
  color: var(--orange);
}

.hero-visual{ width:100%; max-width:300px; }
.hero-stat-card{
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1.5px solid rgba(244,166,33,0.35);
  padding: 28px 26px;
  text-align:center;
}
.hero-stat-label{
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:.78rem;
  font-weight:700;
  color: rgba(255,255,255,0.65);
  margin-bottom:4px;
}
.hero-stat-price{
  font-size: 2.6rem;
  font-weight:900;
  color: var(--orange);
  margin-bottom:0;
  line-height:1;
}
.hero-stat-price span{ font-size:1.1rem; font-weight:700; color: rgba(255,255,255,0.75); }
.hero-stat-sub{ font-weight:700; color:#fff; margin-bottom:18px; }
.hero-stat-list{ text-align:left; display:inline-flex; flex-direction:column; gap:8px; font-size:.92rem; color: rgba(255,255,255,0.85); font-weight:600; }
.hero-stat-list li::before{ content:"✓ "; color: var(--orange); }

@media (min-width: 900px){
  .hero{ padding: 90px 0 100px; }
  .hero-inner{
    flex-direction:row;
    text-align:left;
    justify-content:space-between;
  }
  .hero-copy{ max-width: 600px; }
  .hero-sub{ margin-left:0; }
  .hero-line, .hero-price-line{ margin-left:0; }
  .hero-actions{ justify-content:flex-start; }
  .hero-badges{ justify-content:flex-start; }
  .hero-visual{ max-width:320px; flex-shrink:0; }
}

/* ---------- Trust strip ---------- */
.trust-strip{
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}
.trust-strip-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 12px 28px;
  padding: 16px 20px;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:.88rem;
  color: var(--navy);
  white-space:nowrap;
}

/* ---------- Business model ---------- */
.model-copy{
  text-align:center;
  max-width:640px;
  margin: 0 auto 32px;
  font-size:1.08rem;
  color: var(--gray-700);
}
.model-points{
  display:grid;
  gap:22px;
  grid-template-columns: 1fr;
}
.model-point{ text-align:center; }
.model-icon{ font-size:1.8rem; display:block; margin-bottom:10px; }
.model-point h3{ font-size:1.05rem; }
.model-point p{ color: var(--gray-700); font-size:.94rem; margin:0; }
@media (min-width:760px){
  .model-points{ grid-template-columns: repeat(3,1fr); }
}

/* ---------- Sections (generic) ---------- */
.section{ padding: 56px 0; }
.section-title{
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  text-align:center;
}
.section-sub{
  text-align:center;
  color: var(--gray-700);
  max-width:620px;
  margin: 0 auto 32px;
}
.how-it-works{ background: var(--gray-100); }

/* ---------- Steps ---------- */
.steps{
  display:grid;
  gap:22px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
.step{
  background:#fff;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  text-align:center;
}
.step-num{
  width:40px; height:40px;
  border-radius:50%;
  background: var(--navy);
  color: var(--orange);
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 14px;
}
.step h3{ font-size:1.1rem; }
.step p{ color: var(--gray-700); margin:0; font-size:.96rem; }
@media (min-width:760px){
  .steps{ grid-template-columns: repeat(3,1fr); }
}

/* ---------- Services ---------- */
.service-grid{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
}
.service-card{
  background:#fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 24px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.service-card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }
.service-icon{ font-size:1.8rem; margin-bottom:10px; }
.service-card h3{ font-size:1.05rem; }
.service-card p{ color: var(--gray-700); margin:0; font-size:.95rem; }
@media (min-width:640px){
  .service-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width:960px){
  .service-grid{ grid-template-columns: repeat(3,1fr); }
}

/* ---------- Pricing ---------- */
.pricing{ background: var(--gray-100); }
.price-card{
  max-width: 560px;
  margin: 0 auto;
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 40px 28px;
  text-align:center;
  border-top: 5px solid var(--orange);
}
.price-label{
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:.8rem;
  font-weight:700;
  color: var(--gray-500);
  margin-bottom:6px;
}
.price-value{
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight:800;
  color: var(--navy);
  margin-bottom:14px;
}
.price-value span{ color: var(--orange-dark); }
.price-note{ color: var(--gray-700); font-size:.95rem; margin-bottom:18px; }
.price-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

/* ---------- Service Area ---------- */
.area-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  max-width:640px;
  margin: 0 auto 22px;
}
.area-list li{
  background: var(--navy);
  color:#fff;
  font-weight:700;
  font-size:.92rem;
  padding:10px 18px;
  border-radius:999px;
}
.area-note{ text-align:center; color: var(--gray-700); }
.area-note a{ color: var(--orange-dark); font-weight:700; }

/* ---------- Reviews ---------- */
.review-group{ margin-top: 34px; }
.review-group:first-of-type{ margin-top: 8px; }
.review-group-title{
  text-align:center;
  font-size:1.15rem;
  margin-bottom:4px;
}
.review-group-note{
  text-align:center;
  color: var(--gray-700);
  font-size:.9rem;
  max-width:520px;
  margin: 0 auto 20px;
}
.review-grid{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}
.review-card{
  background:#fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.review-card.placeholder{
  border-style:dashed;
  background: var(--gray-100);
}
.review-stars{ color: var(--orange); letter-spacing:3px; margin-bottom:8px; font-size:1rem; }
.review-text{ color: var(--gray-700); font-style:italic; margin-bottom:8px; }
.review-source{ color: var(--gray-500); font-weight:700; font-size:.85rem; margin:0; }
@media (min-width:640px){
  .review-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ---------- FAQ ---------- */
.faq-list{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  background:#fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 6px 20px;
}
.faq-item summary{
  cursor:pointer;
  font-weight:700;
  color: var(--navy);
  padding: 14px 0;
  list-style:none;
  position:relative;
  padding-right:28px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:0; top:14px;
  font-size:1.3rem;
  font-weight:700;
  color: var(--orange-dark);
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ color: var(--gray-700); padding-bottom:16px; margin:0; }

/* ---------- Quote Form ---------- */
.quote{ background: var(--gray-100); }
.quote .section-sub a{ color: var(--orange-dark); font-weight:700; }
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin: 0 0 32px;
}
.quote-form{
  max-width: 760px;
  margin: 0 auto;
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 22px;
}
.hidden-field{ position:absolute; left:-9999px; }
.form-grid{
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.88rem; font-weight:700; color: var(--navy); }
.field input, .field select, .field textarea{
  font-family:inherit;
  font-size:1rem;
  padding: 12px 14px;
  border:1.5px solid var(--gray-200);
  border-radius:8px;
  background:#fff;
  color: var(--ink);
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color: var(--orange);
}
.field-full{ margin-top:16px; }
.quote-form .btn-block{ margin-top:22px; }
.quote-form-note{ text-align:center; margin: 12px 0 0; font-weight:700; color: var(--navy); min-height:1.2em; }
@media (min-width:640px){
  .form-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ---------- Final CTA ---------- */
.final-cta{
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: var(--navy-dark);
  text-align:center;
}
.final-cta h2{ font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--navy-dark); }
.final-cta p{ font-size:1.1rem; font-weight:600; margin-bottom:20px; }
.final-cta .btn-secondary{ border-color: var(--navy-dark); color: var(--navy-dark); }
.final-cta .btn-secondary:hover{ background: rgba(14,42,71,0.08); }
.final-cta .btn-primary{ background: var(--navy); color:#fff; box-shadow:0 6px 18px rgba(14,42,71,0.3); }
.final-cta .btn-primary:hover{ background: var(--navy-dark); }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--navy-dark);
  color: rgba(255,255,255,0.8);
  padding: 44px 0 90px;
  font-size:.92rem;
}
.footer-inner{
  display:grid;
  gap:28px;
  grid-template-columns: 1fr;
}
.footer-brand{ color:#fff; font-size:1.15rem; margin-bottom:0; }
.footer-brand-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.footer-logo-img{ width:40px; height:40px; border-radius:9px; object-fit:cover; display:block; flex-shrink:0; }
.footer-nav{ display:flex; flex-direction:column; gap:10px; }
.footer-nav a:hover{ color:#fff; }
.footer-contact{ display:flex; flex-direction:column; gap:10px; }
.footer-phone{ color: var(--orange); font-weight:800; font-size:1.15rem; }
.footer-email{ color: rgba(255,255,255,0.8); font-weight:600; font-size:.95rem; }
.footer-email:hover{ color:#fff; }
.footer-copy{ margin:0; opacity:.7; }
@media (min-width:760px){
  .footer-inner{ grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer{ padding-bottom:44px; }
}

/* ---------- Sticky mobile CTA ---------- */
.mobile-sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index: 90;
  display:flex;
  gap:1px;
  background: var(--gray-200);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-cta-btn{
  flex:1;
  text-align:center;
  padding: 15px 10px;
  font-weight:800;
  font-size:.98rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.mobile-cta-btn.call{ background: var(--navy); color:#fff; }
.mobile-cta-btn.text{ background: var(--orange); color: var(--navy-dark); }
@media (min-width:900px){
  .mobile-sticky-cta{ display:none; }
}

/* extra bottom padding on mobile so sticky bar doesn't cover content */
@media (max-width:899px){
  body{ padding-bottom: 62px; }
}