/* ClearHaul Junk Removal demo — Wing Digital. Hand-rolled, no frameworks. */
/* ==========================================================
   BRAND TOKENS — rebrand = change --brand-hue (and --accent-hue).
   Every palette color derives its hue from the three hue tokens
   via oklch(); lightness/chroma stay put, so the whole site
   re-skins from three numbers. The plain hex block below is the
   fallback for browsers without oklch support; the @supports
   block after it overrides with the hue-driven oklch values.
   ========================================================== */
:root{
  --brand-hue:150;   /* green family */
  --neutral-hue:170; /* deep spruce / ink family */
  --accent-hue:55;   /* orange / CTA family */
  /* hex fallbacks (match the oklch values below) */
  --navy:#0a2342; --navy-deep:#061a33; --teal:#16407a; --teal-deep:#0f2d5c; --teal-bright:#4a86e8;
  --cyan:#b9cbe6; --amber:#b22234; --amber-deep:#8a1a28; --amber-hover:#c8102e;
  --cta:#b22234; --cta-deep:#8a1a28;
  --ink:#12233d; --slate:#42506b; --mist:#f3f6fb; --card:#ffffff; --line:#d5deec;
  --radius:4px; --shadow:0 1px 3px rgba(10,35,66,.08);
  --font:"Barlow","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-head:"Barlow Condensed","Barlow","Segoe UI",system-ui,Arial,sans-serif;
}
@supports (color: oklch(50% 0.1 200)){
  :root{
    --navy:oklch(29.6% .072 calc(var(--neutral-hue) + 1));
    --navy-deep:oklch(24.2% .054 calc(var(--neutral-hue) - 1));
    --teal:oklch(52% .094 var(--brand-hue));
    --teal-deep:oklch(45.9% .083 calc(var(--brand-hue) + 1));
    --teal-bright:oklch(65.4% .11 calc(var(--brand-hue) - 29));
    --cyan:oklch(79.7% .134 calc(var(--brand-hue) - 12));
    --amber:oklch(76.9% .165 var(--accent-hue));
    --amber-deep:oklch(66.6% .157 calc(var(--accent-hue) - 12));
    --amber-hover:oklch(83.7% .164 calc(var(--accent-hue) + 14));
    --cta:oklch(55.5% .146 calc(var(--accent-hue) - 21));
    --cta-deep:oklch(47.3% .125 calc(var(--accent-hue) - 24));
    --ink:oklch(27.9% .037 calc(var(--neutral-hue) + 10));
    --slate:oklch(44.6% .037 calc(var(--neutral-hue) + 7));
    --mist:oklch(97.2% .008 calc(var(--brand-hue) + 6));
    --line:oklch(92.1% .016 calc(var(--brand-hue) + 10));
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);line-height:1.65;background:#fff;font-size:17px}
img,svg{max-width:100%;vertical-align:middle}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:10px 18px;font-weight:700}
.skip:focus{left:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.15;color:var(--navy);font-weight:700;font-family:var(--font-head);letter-spacing:.005em}
h1{font-size:clamp(2.2rem,5vw,3.7rem);text-transform:uppercase;letter-spacing:.015em}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
/* Broom-stroke underline on section headings (brand loadout pick) */
main section>.wrap>h2::after,main section .center>h2::after,.split-copy h2::after,.cta-band h2::after,article.post h2::after{content:"";display:block;width:64px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--teal-bright));margin-top:10px}
.center>h2::after,.cta-band h2::after{margin-left:auto;margin-right:auto}
h3{font-size:1.15rem}
p{margin-bottom:1rem}
section{padding:68px 0}
section.band{padding:60px 0}
.kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem}
.lead{font-size:1.15rem;color:var(--slate);max-width:46rem}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* Buttons — work-boot slab style (brand loadout pick) */
.btn{display:inline-block;padding:12px 26px;border-radius:var(--radius);font-weight:700;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;font-size:1.08rem;transition:background-color .15s,border-color .15s,transform .08s;text-decoration:none;border:0;cursor:pointer}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--cta);color:#fff;border-bottom:4px solid var(--cta-deep)}
.btn-primary:hover{background:var(--cta-deep)}
.btn-primary:active{transform:translateY(2px);border-bottom-width:2px}
.btn-ghost{border:2px solid rgba(255,255,255,.7);color:#fff;padding:10px 24px}
.btn-ghost:hover{border-color:#fff}
.btn-teal{background:var(--teal);color:#fff;border-bottom:4px solid var(--teal-deep)}
.btn-teal:hover{background:var(--teal-deep)}
.btn-teal:active{transform:translateY(2px);border-bottom-width:2px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.4rem}

/* Topbar + nav */
.topbar{background:var(--navy-deep);color:#9fc4d8;font-size:.8rem;padding:7px 0;letter-spacing:.01em}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.topbar a{color:#fff;font-weight:700;letter-spacing:.02em}
.topbar a:hover{color:var(--cyan);text-decoration:none}
.topbar .tb-phone{color:var(--amber)}
.topbar .tb-phone:hover{color:var(--amber-hover)}
@media(max-width:700px){.topbar .tb-hide{display:none}}
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:2px solid var(--navy)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand:hover{text-decoration:none}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--ink);font-weight:600;font-size:.97rem}
.nav-links a:hover{color:var(--teal);text-decoration:none}
.nav-links a.active{color:var(--teal-bright)}
.nav-cta{white-space:nowrap;padding:11px 20px;font-size:.92rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;border-bottom:1px solid var(--line);gap:16px;align-items:flex-start}
  .nav-links.open{display:flex}
}

/* Full-screen homepage hero (hard rule: covers the first screen, simple, logo + image + opening motion) */
.home-hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;color:#fff;padding:110px 0 90px;background:var(--navy-deep)}
.home-hero::before{content:"";position:absolute;inset:-4%;background:url("img/real-rig.jpg") center/cover no-repeat;z-index:0}
.home-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.32) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.64) 100%);z-index:1}
.home-hero .wrap{position:relative;z-index:2;text-align:center;max-width:900px}
.home-hero h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.home-hero .lead{color:#e6eefb;margin-left:auto;margin-right:auto}
.home-hero .btn-row{justify-content:center}
.hero-logo{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:1.6rem}
.hero-badges{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:2rem;font-size:.9rem;color:#c5d4ee}
.hero-badges span{display:flex;align-items:center;gap:8px}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;color:#cdd9ee;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.scroll-cue:hover{color:#fff;text-decoration:none}
/* Transparent header over the homepage hero */
body.home .topbar{display:none}
body.home header.site{position:absolute;top:0;left:0;right:0;z-index:6;background:transparent;border-bottom:0}
body.home .nav-links a{color:#fff}
body.home .nav-links a:hover,body.home .nav-links a.active{color:var(--cyan)}
body.home .nav-links .btn-primary{color:#fff}
@media(max-width:860px){
  body.home .nav-links{background:rgba(0,32,21,.97);border-bottom:0}
}

/* Cards / grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:2.4rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:2.4rem}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.card:hover{border-top-color:var(--navy)}
.card .icon{width:52px;height:52px;border-radius:var(--radius);background:var(--mist);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.card h3{margin-bottom:.5rem}
.card p{color:var(--slate);font-size:.97rem;margin-bottom:.6rem}
.card a.more{font-weight:700;font-size:.95rem}

/* How it works steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:2.4rem;text-align:left}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow)}
.step .n{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius);background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.4rem;margin-bottom:1rem}
.step h3{margin-bottom:.5rem}
.step p{color:var(--slate);font-size:.97rem;margin:0}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* Truck-fill pricing */
.price-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:2.2rem;text-align:center}
.price-cell{background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:var(--radius);padding:22px 16px 18px;box-shadow:var(--shadow)}
.price-cell .fill{height:10px;background:var(--mist);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:0 auto 14px;max-width:130px}
.price-cell .fill span{display:block;height:100%;background:var(--teal-bright);width:var(--w,100%)}
.price-cell .sz{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.price-cell .amt{font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:var(--navy);margin:2px 0 4px}
.price-cell .eg{font-size:.85rem;color:var(--slate);margin:0}
@media(max-width:860px){.price-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.price-row{grid-template-columns:1fr}}

/* Alt band */
.band{background:var(--mist)}
.why-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:1.4rem}
.why-item .dot{flex:0 0 42px;height:42px;border-radius:var(--radius);background:var(--teal);display:flex;align-items:center;justify-content:center}
.why-item h3{margin-bottom:.2rem}
.why-item p{color:var(--slate);margin:0;font-size:.96rem}

/* CTA band */
.cta-band{background:linear-gradient(rgba(6,26,51,.90),rgba(6,26,51,.90)),url("img/truck-bed.jpg") center/cover no-repeat;color:#fff;text-align:center;padding:72px 0}
.cta-band h2{color:#fff}
.cta-band p{color:#d7ecf5;max-width:40rem;margin:0 auto 1.2rem}
.phone-big{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:800;color:#fff;letter-spacing:.02em}
.phone-big:hover{color:var(--cyan);text-decoration:none}

/* Testimonials */
.quote-card{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);position:relative}
.q-stamp{position:absolute;top:14px;right:14px;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.82rem;border:2.5px solid var(--teal);color:var(--teal);border-radius:6px;padding:2px 10px;transform:rotate(7deg);opacity:.75}
.q-stamp.o{border-color:var(--amber-deep);color:var(--amber-deep)}
.stars{color:var(--amber);letter-spacing:2px;margin-bottom:.6rem;font-size:1.05rem}
.quote-card p{color:var(--slate);font-style:italic;font-size:.98rem}
.quote-card footer{font-weight:700;color:var(--navy);font-style:normal}
.quote-card footer small{display:block;font-weight:500;color:var(--slate)}

/* Service area */
.cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem}
.cities span{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:7px 16px;font-weight:600;font-size:.9rem;color:var(--navy)}

/* Forms */
form.demo{display:grid;gap:16px;margin-top:1.6rem}
form.demo .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){form.demo .row2{grid-template-columns:1fr}}
form.demo label{font-weight:700;font-size:.9rem;color:var(--navy);display:block;margin-bottom:6px}
form.demo input,form.demo select,form.demo textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius);font-family:inherit;font-size:1rem;background:#fff}
form.demo input:focus,form.demo select:focus,form.demo textarea:focus{outline:2px solid var(--teal-bright);border-color:var(--teal-bright)}
.form-note{font-size:.85rem;color:var(--slate)}
form.demo .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Page hero (interior) */
.page-hero{background:linear-gradient(100deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.34) 100%),url("img/crew-loading.jpg") center 30%/cover no-repeat;color:#fff;padding:64px 0 72px}
.page-hero h1{color:#fff}
.page-hero p{color:#d7ecf5;max-width:44rem}
.breadcrumbs{font-size:.85rem;color:#9fd3e6;margin-bottom:1rem}
.breadcrumbs a{color:#7dd3fc}
/* Per-page hero images (hard rule: no duplicate images across pages) */
.page-hero.ph-about{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/about.jpg") center 35%/cover no-repeat}
.page-hero.ph-contact{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/contact.jpg") center 30%/cover no-repeat}
.page-hero.ph-services{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/svc-hub.jpg") center 45%/cover no-repeat}
.page-hero.ph-blog{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/blog.jpg") center 40%/cover no-repeat}
.page-hero.ph-furniture{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/furniture.jpg") center 30%/cover no-repeat}
.page-hero.ph-appliance{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/appliance.jpg") center 50%/cover no-repeat}
.page-hero.ph-garage{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/garage.jpg") center 50%/cover no-repeat}
.page-hero.ph-estate{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/estate.jpg") center 55%/cover no-repeat}
.page-hero.ph-debris{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/yard.jpg") center 60%/cover no-repeat}
.page-hero.ph-sameday{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/sameday.jpg") center 45%/cover no-repeat}
.page-hero.ph-hottub{background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.48) 50%,rgba(0,0,0,.32) 100%),url("img/hottub.jpg") center 55%/cover no-repeat}

/* Article / blog */
article.post{max-width:760px;margin:0 auto}
article.post h2{margin:2.2rem 0 .8rem}
article.post h3{margin:1.6rem 0 .5rem}
article.post ul,article.post ol{margin:0 0 1rem 1.4rem}
article.post li{margin-bottom:.4rem}
.post-meta{color:var(--slate);font-size:.9rem;margin-bottom:1.6rem}
.callout{background:var(--mist);border-left:4px solid var(--teal-bright);padding:18px 22px;margin:1.6rem 0}
.callout p{margin:0;color:var(--ink)}
table.data{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
table.data th,table.data td{border:1px solid var(--line);padding:10px 14px;text-align:left}
table.data th{background:var(--mist);color:var(--navy)}
.table-scroll{overflow-x:auto}

/* FAQ */
.faq{margin-top:1.6rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:10px}
.faq summary{font-weight:700;color:var(--navy);cursor:pointer;font-size:1.02rem}
.faq details p{margin:.8rem 0 0;color:var(--slate)}

/* Blog cards */
.post-card{display:flex;flex-direction:column}
.post-card .tag{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--teal-bright);margin-bottom:.4rem}

/* Scroll progress load-line (brand loadout pick) */
.load-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:80;pointer-events:none}
.load-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--teal-bright))}

/* Footer truck crossing (brand loadout pick) */
.foot-road{position:relative;height:46px;border-bottom:2px dashed rgba(255,255,255,.18);margin-bottom:30px;overflow:hidden}
.foot-truck{position:absolute;bottom:2px;left:0;transform:translateX(-70px)}
@media (prefers-reduced-motion: no-preference){
  .foot-truck{animation:footDrive 16s linear infinite}
  @keyframes footDrive{from{transform:translateX(-70px)}to{transform:translateX(calc(100vw + 70px))}}
}

/* Footer */
footer.site{background:var(--navy-deep);color:#a8c8d8;padding:56px 0 24px;font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:2.4rem}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
footer.site h3{color:#fff;font-size:1rem;margin-bottom:.9rem}
footer.site ul{list-style:none}
footer.site li{margin-bottom:.5rem}
footer.site a{color:#a8c8d8}
footer.site a:hover{color:var(--cyan)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;color:#7fa3b5}
.emergency-strip{background:var(--amber);color:#fff;text-align:center;font-weight:700;padding:8px 16px;font-size:.9rem;letter-spacing:.01em}
.emergency-strip a{color:#fff;text-decoration:underline}

/* Photo band (image left / text right) */
.split-band{background:var(--navy-deep);color:#cfe4f0}
.split-band .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:0;align-items:stretch;padding:0 24px}
.split-band .split-img{background:url("img/crew-loading.jpg") center/cover no-repeat;min-height:340px}
.split-band .split-copy{padding:56px 0 56px 56px}
.split-band h2{color:#fff}
.split-band p{color:#c2dcea}
@media(max-width:860px){.split-band .wrap{grid-template-columns:1fr}.split-band .split-copy{padding:40px 0}.split-band .split-img{min-height:240px;margin:0 -24px}}

/* Motion: hero opening + limited scroll reveal (hard rule: reveals near the top only; disabled for reduced-motion users) */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}
/* Intro opening: truck drives across, screen splits open behind it (hard rule: every site opens with a branded intro) */
.intro{display:none}
@media (prefers-reduced-motion: no-preference){
  .intro{display:block;position:fixed;inset:0;z-index:100;pointer-events:none}
  .intro-panel{position:absolute;inset:0;background:var(--navy-deep)}
  .ip-top{clip-path:polygon(0 0,100% 0,100% 50.2%,0 50.2%);animation:unzipTop 1.05s cubic-bezier(.68,.05,.6,.9) .52s forwards}
  .ip-bottom{clip-path:polygon(0 49.8%,100% 49.8%,100% 100%,0 100%);animation:unzipBottom 1.05s cubic-bezier(.68,.05,.6,.9) .52s forwards}
  .intro-seam{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--teal-bright);transform-origin:100% 50%;animation:seamWipe 1.05s cubic-bezier(.68,.05,.6,.9) .52s forwards}
  .intro-truck{position:absolute;top:50%;left:0;width:120px;height:120px;transform:translate(-150px,-52%);animation:drive 1.15s cubic-bezier(.7,.05,.9,.35) .1s forwards}
  .intro-truck .sl{position:absolute;right:100%;margin-right:5px;height:3px;border-radius:2px;background:#cdd8ea;opacity:0;animation:slDash .32s linear .25s infinite}
  .intro-truck .sl1{top:42px;width:30px}
  .intro-truck .sl2{top:58px;width:44px;margin-right:14px;animation-delay:.33s}
  .intro-truck .sl3{top:74px;width:24px;animation-delay:.41s}
  @keyframes slDash{0%{transform:translateX(10px);opacity:0}25%{opacity:.85}100%{transform:translateX(-30px);opacity:0}}
  @keyframes unzipTop{55%{clip-path:polygon(0 0,100% 0,100% 50.2%,0 0)}100%{clip-path:polygon(0 0,100% 0,100% 0,0 0)}}
  @keyframes unzipBottom{55%{clip-path:polygon(0 100%,100% 49.8%,100% 100%,0 100%)}100%{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}}
  @keyframes seamWipe{to{transform:scaleX(0)}}
  @keyframes drive{from{transform:translate(-150px,-52%)}to{transform:translate(calc(100vw + 150px),-52%)}}
  .home-hero::before{animation:kenburns 24s ease-in-out infinite alternate}
  .home-hero [data-rise]{opacity:0;animation:rise .85s cubic-bezier(.16,1,.3,1) forwards;animation-delay:1s}
  .home-hero [data-rise="2"]{animation-delay:1.12s}
  .home-hero [data-rise="3"]{animation-delay:1.24s}
  .home-hero [data-rise="4"]{animation-delay:1.36s}
  .home-hero [data-rise="5"]{animation-delay:1.5s}
  .home-hero [data-rise="6"]{animation-delay:1.64s}
  /* Returning visitor this session: skip the intro, play a quick hero rise only */
  .no-intro .intro{display:none}
  .no-intro .home-hero [data-rise]{animation-delay:.05s}
  .no-intro .home-hero [data-rise="2"]{animation-delay:.13s}
  .no-intro .home-hero [data-rise="3"]{animation-delay:.21s}
  .no-intro .home-hero [data-rise="4"]{animation-delay:.29s}
  .no-intro .home-hero [data-rise="5"]{animation-delay:.39s}
  .no-intro .home-hero [data-rise="6"]{animation-delay:.49s}
  .scroll-cue{animation:bob 2.4s ease-in-out infinite}
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .fill-watch .fill span{width:0;transition:width 1s cubic-bezier(.16,1,.3,1) .25s}
  .fill-watch.in .fill span{width:var(--w,100%)}
  .card:hover,.step:hover{box-shadow:0 6px 16px rgba(10,35,66,.14)}
}

/* Sticky mobile call bar */
.call-bar{display:none}
@media(max-width:768px){
  body{padding-bottom:60px}
  .call-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;height:60px;box-shadow:0 -1px 3px rgba(11,46,79,.18)}
  .call-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:1rem;color:#fff;text-decoration:none}
  .call-bar a:hover{text-decoration:none}
  .call-bar .cb-call{background:var(--cta)}
  .call-bar .cb-quote{background:var(--navy)}
}

/* ============================================================
   HEROS REBRAND — American palette retune to the logo
   (deep navy + old-glory red + silver/steel + bright blue accent)
   Appended after the @supports block so these win in all browsers.
   ============================================================ */
:root{
  --navy:#0a2342; --navy-deep:#061a33; --teal:#16407a; --teal-deep:#0f2d5c;
  --teal-bright:#4a86e8; --cyan:#b9cbe6; --mist:#f3f6fb; --line:#d5deec;
  --ink:#12233d; --slate:#42506b;
  --amber:#b22234; --amber-deep:#8a1a28; --amber-hover:#c8102e;
  --cta:#b22234; --cta-deep:#8a1a28;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* Film grain overlay — subtle texture kills the flat "AI" look */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;background-image:var(--grain);background-size:140px 140px;opacity:.05;mix-blend-mode:overlay}

/* Dark brand bar site-wide; solidifies on scroll */
header.site{background:var(--navy);border-bottom:1px solid rgba(185,203,230,.14);transition:background-color .3s,box-shadow .3s,padding .3s}
.nav-links a{color:#e6f2ec}
.nav-links a:hover{color:var(--teal-bright)}
.nav-links a.active{color:var(--teal-bright)}
.nav-toggle svg{stroke:#e6f2ec}
body.home header.site{background:var(--navy);border-bottom:1px solid rgba(185,203,230,.14)}
body.home header.site.scrolled{background:rgba(10,35,66,.96);border-bottom-color:rgba(185,203,230,.14);box-shadow:0 6px 20px rgba(0,0,0,.28)}
header.site.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.22)}
/* Logo image in the nav (blends on the dark teal bar) */
.brand img.logo{height:50px;width:auto;display:block}
@media(max-width:520px){.brand img.logo{height:42px}}

/* Hero logo badge — the real mark shown deliberately in a rounded panel */
.hero-badge{display:inline-block;background:#07090f;border:2px solid rgba(185,203,230,.30);border-radius:14px;padding:12px 18px;box-shadow:0 18px 50px rgba(0,0,0,.55);margin-bottom:1.4rem}
.hero-badge img{display:block;height:170px;width:auto}
@media(max-width:600px){.hero-badge img{height:120px}}

/* Veteran ribbon */
.vet-ribbon{display:inline-flex;align-items:center;gap:10px;background:var(--cta);color:#fff;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.82rem;padding:7px 16px;border-radius:99px;box-shadow:0 6px 16px rgba(178,34,52,.35)}
.vet-ribbon svg{width:16px;height:16px}

/* Marquee — moving strip of what we haul */
.marquee{background:var(--navy-deep);overflow:hidden;padding:16px 0;border-top:1px solid rgba(185,203,230,.12);border-bottom:1px solid rgba(185,203,230,.12)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;color:#dcefe6;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:1.02rem;padding:0 26px;white-space:nowrap}
.marquee-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-bright);margin-left:26px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* Count-up stat band */
.stat-band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.stat-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(74,134,232,.20),transparent 55%)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;text-align:center}
.stat-grid .st{padding:8px}
.stat-grid .st .k{font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,4vw,3rem);color:var(--teal-bright);line-height:1;letter-spacing:.01em}
.stat-grid .st .l{color:#cfe6dc;font-size:.92rem;margin-top:6px}
@media(max-width:700px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

/* Card accent-bar hover motion */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--teal-bright);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.card:hover::before{transform:scaleX(1)}
.card .icon{transition:transform .28s ease,background-color .28s ease}
.card:hover .icon{transform:translateY(-2px) rotate(-4deg);background:var(--mist)}

/* Section angle divider (deliberate, non-generic) */
.angle-top{position:relative}
.angle-top::before{content:"";position:absolute;top:-1px;left:0;right:0;height:44px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%,0 44%);transform:translateY(-43px)}

/* Contrast fixes for retuned palette (WCAG AA) */
.kicker{color:#16407a}
.split-band .kicker,.cta-band .kicker,.stat-band .kicker{color:var(--cyan)}
.post-card .tag{color:#16407a}
.card .post-card .tag,.post-card .tag{color:#16407a}

/* Real rig photo in the "our own crews" band; hide the top scroll-progress line */
.split-band .split-img{background-image:url("img/hero-junk.jpg");background-position:center}
.load-progress{display:none}

/* Trailer spec strip on the pricing section */
.trailer-spec{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 auto 1.8rem;max-width:760px}
.trailer-spec span{background:var(--navy);color:#eaf5ee;border:1px solid rgba(185,203,230,.25);border-radius:99px;padding:8px 16px;font-size:.9rem;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em}
.trailer-spec span strong{color:var(--teal-bright);font-weight:700}

/* ============================================================
   PRICE COMPARISON — Heros vs typical franchise hauler
   ============================================================ */
.cmp{max-width:780px;margin:2.2rem auto 0;text-align:left}
.cmp-legend{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem;font-size:.92rem;font-weight:700;color:var(--slate)}
.cmp-key{display:inline-flex;align-items:center;gap:8px}
.cmp-key i{width:14px;height:14px;border-radius:3px;display:inline-block}
.k-heros{background:linear-gradient(90deg,var(--teal),var(--teal-bright))}
.k-other{background:linear-gradient(90deg,#8a1a28,#b22234)}
.cmp-row{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
.cmp-row:first-of-type{border-top:0}
.cmp-size{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--navy);font-size:1rem}
.cmp-track{display:flex;flex-direction:column;gap:9px;min-width:0}
.cmp-bar{height:34px;border-radius:7px;display:flex;align-items:center;width:var(--w);min-width:96px;box-shadow:0 2px 8px rgba(6,26,51,.16)}
.cmp.in .cmp-bar{animation:cmpGrow .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes cmpGrow{from{width:0}to{width:var(--w)}}
.cmp-bar b{font-size:.82rem;font-weight:800;white-space:nowrap;padding:0 12px;color:#fff}
.cmp-bar.heros{background:linear-gradient(90deg,var(--teal),var(--teal-bright))}
.cmp-bar.other{background:linear-gradient(90deg,#8a1a28,#b22234)}
.cmp-save{text-align:center;margin-top:2rem;font-size:1.2rem;color:var(--navy)}
.cmp-save strong{color:var(--teal)}
.cmp-note{text-align:center;font-size:.82rem;color:var(--slate);margin-top:.6rem;opacity:.85;max-width:44rem;margin-left:auto;margin-right:auto}
@media(max-width:560px){.cmp-row{grid-template-columns:1fr;gap:8px}.cmp-size{font-size:.92rem}.cmp-bar{height:30px;min-width:88px}.cmp-bar b{font-size:.76rem}}

/* About page photos */
.about-photo{float:right;width:42%;max-width:330px;border-radius:12px;box-shadow:0 12px 30px rgba(10,35,66,.28);margin:.2rem 0 1rem 1.8rem}
.about-rig{display:block;width:100%;border-radius:12px;box-shadow:0 12px 30px rgba(10,35,66,.2);margin:1.4rem 0}
@media(max-width:640px){.about-photo{float:none;width:100%;max-width:none;margin:0 0 1.2rem}}

/* Service card photos (real hauls) */
.card-photo{display:block;width:calc(100% + 48px);margin:-28px -24px 18px;height:180px;object-fit:cover;background:var(--mist)}
@media(max-width:600px){.card-photo{height:200px}}

/* Logo sits toward the middle of the header instead of hard left */
.brand{margin-left:auto;margin-right:auto}

/* Recent jobs photo grid */
#recent-jobs .jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.6rem}
#recent-jobs figure{margin:0}
#recent-jobs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
#recent-jobs figcaption{margin-top:.5rem;font-size:.92rem;color:var(--muted,#667)}
@media(max-width:760px){#recent-jobs .jobs-grid{grid-template-columns:1fr}}

/* ============================================================
   MOBILE CHROME
   Phones used to carry a sticky header AND a fixed estimate bar at
   once, covering 111px of an 812px screen the whole time you
   scrolled. Both are now unpinned. The header scrolls away with the
   page, and the floating bar is gone because every page already ends
   with a full "Get a Free Estimate" band, so the button is right
   there when you reach the bottom. Pure CSS, no script involved.
   ============================================================ */
@media(max-width:768px){
  /* Header is no longer pinned. Scroll up to reach the nav. */
  header.site{position:static;top:auto}
  body.home header.site{position:absolute}

  /* Reclaim height on the bar itself */
  header.site .nav{padding:9px 0}
  .brand img.logo{height:38px}

  /* No floating estimate bar. The bottom cta-band does this job. */
  .call-bar{display:none}
  body{padding-bottom:0}

  /* Give the closing CTA more presence now that it is the only one */
  .cta-band{padding-top:44px;padding-bottom:44px}
}

/* Mobile footer was 1047px tall, over a screen and a quarter of dead
   space between the closing estimate band and the end of the page.
   Two columns and tighter padding pull the CTA close to the bottom. */
@media(max-width:768px){
  footer.site{padding:26px 0 14px;font-size:.88rem}
  .foot-grid{gap:16px 18px;margin-bottom:1.1rem}
  footer.site h3{margin-bottom:.45rem;font-size:.9rem}
  footer.site li{margin-bottom:.28rem}
  .foot-bottom{padding-top:14px;font-size:.76rem}
  .cta-band{padding-top:38px;padding-bottom:38px}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr}
}