/* Family Trash SC — design system */

:root{
  --orange:#F97707;
  --orange-dk:#DD6800;
  /* Two-shade system (local-service-accessibility): --orange is the bright brand
     shade for large display text/accents/graphics only. Neither it (2.74:1) nor
     --orange-dk (3.47:1) clears 4.5:1 with white text, so filled CTAs and any
     small white-on-orange text use these deepened shades instead. */
  --orange-cta:#B35504;    /* 4.96:1 on white — .btn-call and other filled/white-text uses */
  --orange-cta-dk:#A44E04; /* 5.7:1 on white — hover state */
  --purple:#D40AF2;
  --plum:#1d0a2e;        /* deep shade of the brand purple, for dark sections */
  --ink:#1a1a1a;
  --muted:#5f5a63;
  --line:#ece8ee;
  --bg:#ffffff;
  --bg-warm:#fbf6f1;
  --bg-soft:#f7f4f9;
  --wrap:1160px;
  --radius:14px;
  --shadow:0 18px 40px -22px rgba(29,10,46,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Public Sans",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
main{display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;line-height:1.04;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:900}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800}
h3{font-size:1.45rem;font-weight:700;letter-spacing:-.01em}
h4{font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
p{margin:0 0 1rem}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.narrow{max-width:780px}
.center{text-align:center;margin-inline:auto}
.section{padding:clamp(3rem,6vw,5rem) 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.01em;
  text-decoration:none;border-radius:11px;padding:.9rem 1.6rem;
  font-size:1rem;line-height:1;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:1.05rem 1.9rem;font-size:1.08rem}
.btn-call{background:var(--orange-cta);color:#fff;white-space:nowrap}
.btn-call:hover{background:var(--orange-cta-dk)}
.btn-book{background:var(--plum);color:#fff}
.btn-book:hover{background:#2c1247}
.btn-book-light{background:#fff;color:var(--plum)}
.btn-book-light:hover{background:#efe7f3}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* auto icons: phone on call CTAs, arrow on order CTAs */
.btn-call::before{content:"";width:1.05em;height:1.05em;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-book::after,.btn-book-light::after{content:"";width:1em;height:1em;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}

.text-link{
  font-family:"Archivo",sans-serif;font-weight:700;text-decoration:none;color:var(--ink);
  border-bottom:3px solid var(--orange);padding-bottom:2px;display:inline-block;
}
.text-link:hover{color:var(--orange-dk)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.site-header .brand{background:transparent;padding:0;line-height:0;display:inline-flex}
.brand img{height:42px;width:auto}
.nav{display:flex;gap:1.7rem;margin-left:auto}
.nav a{font-family:"Archivo",sans-serif;font-weight:700;text-decoration:none;font-size:1rem;color:var(--ink);opacity:1}
.nav a:hover{color:var(--orange-dk)}
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop-toggle{font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:.32em}
.nav-drop-toggle::after{content:"";width:.4em;height:.4em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55}
.nav-drop-toggle:hover{color:var(--orange-dk)}
.nav-drop-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);min-width:216px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 22px 46px -20px rgba(29,10,46,.45);padding:.45rem;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:70}
.nav-drop-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.nav-open-drop .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{display:block;padding:.52rem .8rem;border-radius:8px;font-family:"Archivo",sans-serif;font-weight:700;font-size:.94rem;white-space:nowrap;color:var(--ink)}
.nav-drop-menu a:hover{background:var(--bg-soft);color:var(--orange-dk)}
.header-call{margin-left:0}
.btn-call-label{font-weight:600;opacity:.85}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;margin-left:.4rem;background:transparent;border:0;cursor:pointer;flex:none}
.nav-toggle span{display:block;width:24px;height:2.5px;margin:0 auto;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:
  linear-gradient(95deg,rgba(20,7,33,.82) 0%,rgba(20,7,33,.5) 38%,rgba(20,7,33,.18) 62%,rgba(20,7,33,.4) 100%),
  linear-gradient(180deg,rgba(20,7,33,.1) 0%,rgba(20,7,33,.1) 40%,rgba(20,7,33,.7) 100%)}
.hero-content{position:relative;padding-bottom:clamp(2.5rem,6vw,4.5rem);padding-top:clamp(4.5rem,9vw,7rem);width:100%}
.hero h1{color:#fff;font-size:clamp(2.3rem,4.7vw,4rem);line-height:1.0;letter-spacing:-.028em;text-wrap:balance;overflow-wrap:normal;hyphens:manual;max-width:15ch;text-shadow:0 2px 28px rgba(0,0,0,.35)}
.hero-accent{color:var(--orange)}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.28rem);max-width:34rem;margin-top:1.2rem;color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(0,0,0,.3)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-note{margin-top:1.2rem;font-size:.95rem;color:rgba(255,255,255,.8)}

/* ---------- intro ---------- */
.intro{padding-block:clamp(2.8rem,5vw,4.5rem)}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.intro-grid .ai-summary{margin-top:0}
.lead{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;font-family:"Archivo",sans-serif;font-weight:500;letter-spacing:-.015em;margin:0}

/* ---------- section heads ---------- */
.section-head{max-width:680px;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head p{color:var(--muted);font-size:1.1rem;margin-top:.6rem}
.head-reassure{margin-top:.7rem;font-size:.95rem;color:var(--muted);font-weight:600}
.head-reassure::before{content:"\2713 ";color:var(--orange-dk);font-weight:900}

/* ---------- sizes ---------- */
.size-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(1.5rem,3vw,2.4rem)}
.size-row.flip .size-photo{order:2}
.size-photo{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.size-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .45s ease}
.size-row:hover .size-photo img{transform:scale(1.04)}
.size-num{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(3.2rem,7vw,5.5rem);line-height:.85;color:var(--orange-dk);letter-spacing:-.04em;display:inline-block}
.size-num-word{font-size:clamp(2.2rem,4.5vw,3.4rem)}
.size-unit{font-size:.34em;color:var(--purple);margin-left:.15em;letter-spacing:0}
.size-copy h3{margin:.55rem 0 .5rem}
.size-copy p{color:var(--muted);margin-bottom:1rem}
.size-actions{display:flex;align-items:stretch;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:1rem}
.size-book{font-family:"Archivo",sans-serif;font-weight:700;font-size:.92rem;text-decoration:none;color:var(--muted);display:inline-flex;align-items:center;gap:.32rem;transition:color .12s}
.size-book::after{content:"";width:.85em;height:.85em;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.size-book:hover{color:var(--orange-dk)}
.size-specs{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 .15rem}
.size-specs span{font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--bg-warm);border:1px solid var(--line);border-radius:999px;padding:.32rem .7rem}
.size-specs span b{color:var(--orange-dk)}

/* trust strip */
.trust-strip{background:var(--bg-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip .wrap{padding-top:1.5rem;padding-bottom:1.5rem}
.trust-strip p{margin:0;text-align:center;font-family:"Archivo",sans-serif;font-weight:600;font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.5;color:var(--ink)}
.trust-strip b{color:var(--orange-dk)}

/* reviews */
.reviews{text-align:center}
.reviews .section-head{margin-inline:auto}
.reviews-note{color:var(--muted)}
.reviews-widget{margin-top:1.5rem;min-height:60px}

.sizes-cta{text-align:center;margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.6rem);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 1rem}
.sizes-cta .btn{white-space:nowrap}
.sizes-cta .cta-reassure{flex-basis:100%;margin:.4rem 0 0}

/* ---------- bands ---------- */
.band-orange{background:var(--plum);color:#fff;position:relative;overflow:hidden}
.band-orange::before{content:"";position:absolute;right:-6%;top:-50%;width:48%;height:200%;background:radial-gradient(ellipse closest-side,rgba(249,119,7,.20),transparent);pointer-events:none}
.band-orange .wrap{position:relative}
.band-orange h2{color:#fff}
.band-orange p{color:rgba(255,255,255,.85);font-size:1.12rem}
.cta-pair{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}
.band-soft{background:var(--bg-soft)}

/* ---------- story ---------- */
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.story-photo{position:relative}
.story-photo::before{content:"";position:absolute;inset:16px -16px -16px 16px;background:var(--orange);border-radius:18px;z-index:0}
.story-photo img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;box-shadow:0 20px 50px rgba(20,10,31,.18)}
.story-copy h2{margin-bottom:1rem}
.story-copy p{color:var(--muted)}
.story-copy .text-link{margin-top:.4rem}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,1.7rem);margin-top:clamp(1.8rem,4vw,2.8rem)}
.value-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:2.4rem 1.6rem 2rem;text-align:center;box-shadow:0 16px 38px -26px rgba(29,10,46,.45);overflow:hidden}
/* The 01/02/03 badges are gone. The section is "Why Charleston Chooses
   Family Trash" -- three parallel reasons, not steps, so numbering them
   asserted an order that does not exist. Each card also already carries an
   icon, so the badge was a second visual anchor competing with the first,
   and the louder of the two: a solid orange tab cutting the card corner on a
   card whose content is one sentence. The icons differentiate them. */

.value-icon{color:var(--orange-dk);width:44px;height:44px;margin:0 auto 1rem}
.value-icon svg{width:100%;height:100%}
.value-card p{font-weight:500;font-size:1rem;line-height:1.55;color:#333b42;margin:0}
@media(max-width:760px){.values-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.value-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.6rem);max-width:900px;margin:0 auto;text-align:center}
.vs-item{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.vs-item .vs-icon{width:38px;height:38px;color:var(--orange-dk)}
.vs-item .vs-icon svg{width:100%;height:100%}
.vs-item p{font-family:"Archivo",sans-serif;font-weight:600;font-size:1rem;line-height:1.35;color:var(--ink);margin:0;max-width:20ch}
@media(max-width:640px){.value-strip{grid-template-columns:1fr;gap:1.4rem}}

/* ---------- service area ---------- */
.town-list{list-style:none;padding:0;margin:0 0 2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.2rem 1.5rem}
.town-list a{display:block;text-decoration:none;font-family:"Archivo",sans-serif;font-weight:600;padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
.town-list a:hover{color:var(--orange-dk)}

/* ---------- final cta ---------- */
.final-cta{background:linear-gradient(125deg,var(--plum) 0%,#2a1240 60%,#160a24 100%);color:#fff;position:relative;overflow:hidden}
.final-cta::before{content:"";position:absolute;left:50%;top:-60%;width:88%;height:220%;transform:translateX(-50%);background:radial-gradient(ellipse closest-side,rgba(249,119,7,.18),transparent);pointer-events:none}
.final-cta .wrap{position:relative}
.final-cta h2{color:#fff}
.final-cta p{color:rgba(255,255,255,.82)}
.final-phone{margin:.6rem 0 .4rem}
.final-phone a{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(2.2rem,6vw,3.6rem);color:var(--orange);text-decoration:none;letter-spacing:-.03em}
.final-cta .btn{margin-top:1.2rem}
.final-cta .btn-book{background:#fff;color:var(--plum)}
.final-cta .btn-book:hover{background:#efe7f3}

/* ---------- footer ---------- */
.site-footer{background:var(--plum);color:rgba(255,255,255,.6);padding-top:clamp(3rem,5vw,4.5rem)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:2rem}
.footer-brand img{height:46px;width:auto;margin-bottom:1.1rem}
.footer-brand p{font-size:.98rem}
.footer-nap{line-height:1.9;font-size:.95rem}
.footer-brand a{color:rgba(255,255,255,.82);text-decoration:none}
.footer-brand a:hover{color:var(--orange)}
.footer-col .footer-h{color:#fff;margin:0 0 1rem;font-family:"Archivo",sans-serif;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.footer-col a{display:block;text-decoration:none;color:rgba(255,255,255,.82);padding:.32rem 0;font-size:.97rem}
.footer-col a:hover{color:var(--orange)}
.footer-areas{display:grid;grid-template-columns:1fr 1fr;column-gap:1.1rem}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.4rem;padding-bottom:2rem;font-size:.88rem}
.footer-bottom a{color:rgba(255,255,255,.78);text-decoration:none}
.footer-bottom a:hover{color:#fff}
.footer-social{display:inline-flex;gap:.55rem;margin-top:.5rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .15s ease,color .15s ease}
.footer-social a:hover{background:var(--orange-cta);color:#fff}
.footer-social svg{width:18px;height:18px}

/* ---------- eyebrow / kicker chip ---------- */
.eyebrow,.kicker{display:inline-block;font-family:"Archivo",sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-dk);background:#fff1e4;padding:.42rem .82rem;border-radius:7px;margin-bottom:1rem}
.band-orange .eyebrow,.band-orange .kicker,.final-cta .eyebrow,.final-cta .kicker{background:rgba(249,119,7,.16);color:#ffb877}

/* ---------- hero grid + floating card ---------- */
.hero-grid{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,3rem);align-items:end;width:100%}
.hero-copy{max-width:660px}
.hero-card{background:#fff;color:var(--ink);border-radius:16px;padding:1.5rem 1.6rem;box-shadow:0 26px 55px -22px rgba(0,0,0,.7);align-self:end}
.hero-card-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.hero-card-logo{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.hero-card-title{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.18rem;margin:0;letter-spacing:-.01em;line-height:1.1}
.hero-card-list{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.7rem}
.hero-card-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.97rem;line-height:1.35;font-weight:500}
.hero-card-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--orange-cta);color:#fff;font-size:.7rem;font-weight:900;flex-shrink:0;margin-top:2px}
.hero-card .btn{display:block;text-align:center}

/* ---------- trust bar (over dark hero) ---------- */
.trust-bar{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem;font-family:"Archivo",sans-serif;font-size:.88rem;font-weight:700}
.trust-bar li{display:inline-flex;align-items:center;gap:.45rem;background:rgba(29,10,46,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 14px 7px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;white-space:nowrap}
.trust-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--orange-cta);color:#fff;font-size:.66rem;font-weight:900;flex-shrink:0}

/* ---------- "in short" summary box ---------- */
.ai-summary{background:var(--bg-warm);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:10px;padding:1.5rem 1.7rem;margin-top:1.9rem}
.ai-summary h3{font-size:1.2rem;margin:0 0 .75rem}
.size-unit{font-size:.6em;color:var(--muted)}
.uses-list{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.7rem}
.uses-list li{position:relative;padding-left:1.7rem;line-height:1.4;color:var(--ink)}
.uses-list li::before{content:"\2713";position:absolute;left:0;color:var(--orange-dk);font-weight:900}
@media(max-width:560px){.uses-list{grid-template-columns:1fr}}
.docket-form{max-width:620px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.docket-form iframe{display:block;width:100%;height:760px;border:0}
@media(max-width:600px){.docket-form iframe{height:830px}}
.breadcrumb{padding:.85rem 0 .1rem}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;font-family:"Archivo",sans-serif;font-size:.82rem;font-weight:600}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li:not(:first-child)::before{content:"\203A";margin:0 .5rem;color:var(--muted);opacity:.55;font-weight:400}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--orange-dk)}
.breadcrumb li[aria-current]{color:var(--ink)}
.ai-summary ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem}
.ai-summary li{font-size:1rem;line-height:1.5;color:var(--ink)}
.ai-summary strong{font-family:"Archivo",sans-serif;font-weight:700}

/* ---------- FAQ accordion ---------- */
.faq{max-width:50rem;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:1.2rem 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.12rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq-q{margin:0;font:inherit;color:inherit;display:inline}
.faq summary::after{content:"+";font-size:1.6rem;font-weight:400;line-height:1;color:var(--orange-dk);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.85rem 0 0;color:var(--muted);line-height:1.62}

/* ---------- town pills ---------- */
.town-pills{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:.6rem}
.town-pills a{display:inline-block;text-decoration:none;font-family:"Archivo",sans-serif;font-weight:700;font-size:.95rem;padding:.55rem 1.05rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);transition:border-color .12s,color .12s}
.town-pills a:hover{border-color:var(--orange-dk);color:var(--orange-dk)}

/* ---------- mobile call bar ---------- */

/* ===== refined wordmark logo ===== */
.brand{display:inline-flex;align-items:center;text-decoration:none;line-height:1}
.brand-mark{display:flex;flex-direction:column;gap:.08em}
.brand-top{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.34rem;letter-spacing:-.005em;color:var(--orange-dk);line-height:.9;text-transform:uppercase}
.brand-bottom{font-family:"Archivo",sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.34em;color:var(--purple);text-transform:uppercase;text-indent:.34em}
.site-footer .brand-bottom{color:#fff}

/* ===== utility top bar ===== */
.topbar{background:var(--plum);color:rgba(255,255,255,.8);font-family:"Archivo",sans-serif;font-size:.82rem;font-weight:600}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.5rem;padding-bottom:.5rem}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:var(--orange)}
.topbar-right{display:flex;gap:1.5rem;align-items:center}
.topbar-item{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.topbar-dot{color:var(--orange-dk)}
@media(min-width:641px){.topbar{display:none}}
@media(max-width:640px){.topbar-hide{display:none}.topbar .wrap{justify-content:center}.topbar-right .topbar-hide{display:inline-flex}.topbar-right a{display:none}.trust-bar li:nth-child(n+3){display:none}}

/* header scroll shadow */
.site-header{transition:box-shadow .2s ease}
.site-header.scrolled{box-shadow:0 6px 26px -14px rgba(29,10,46,.45)}

/* ===== pull quote ===== */
.pull-quote{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.25;letter-spacing:-.01em;color:var(--ink);border-left:4px solid var(--orange);padding-left:1.2rem;margin:1.5rem 0}

/* ===== homepage size comparison (distinct from the hub grid) ===== */
.scompare{display:flex;flex-direction:column;gap:.7rem;max-width:880px;margin:0 auto}
.scompare-row{position:relative;display:grid;grid-template-columns:210px minmax(0,1fr) auto;align-items:stretch;gap:1.5rem;padding:1rem 1.3rem;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none;color:inherit;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.scompare-row:hover{border-color:var(--orange-dk);box-shadow:0 16px 34px -22px rgba(29,10,46,.45)}
/* A roll-off is a WIDE object, so the photo box has to keep a wide, fixed shape.
   Stretching it to the row made its aspect depend on how long that row's text
   happened to be: measured at 375px the box came out 1.05 on two rows and 0.80
   on another, cutting 30% and 47% of the photo width -- half the dumpster gone,
   and a different crop on every row. 2:1 matches the subject, crops only the
   pavement, and is identical on all five. Centred, so the leftover column space
   reads as card padding rather than a gap. */
.scompare-thumb{width:210px;aspect-ratio:2/1;height:auto;align-self:center;border-radius:12px;overflow:hidden;background:var(--bg-warm);flex:none}
/* One real link per row, stretched over the whole card. The thumb and "More info"
   used to be two separate links to the same URL; this is one bigger tap target and
   one destination. The booking button lifts above it so it still gets its own tap. */
.scompare-main{text-decoration:none;color:inherit}
.scompare-main::after{content:"";position:absolute;inset:0;border-radius:16px;z-index:0}
.scompare-row:focus-within{border-color:var(--orange-dk);box-shadow:0 0 0 3px rgba(249,119,7,.28)}
.scompare-actions{position:relative;z-index:1}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.scompare-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .3s ease}
.scompare-row:hover .scompare-thumb img{transform:scale(1.06)}
.scompare-divide{display:flex;align-items:center;gap:1rem;margin:.6rem 0 .15rem}
.scompare-divide::before,.scompare-divide::after{content:"";flex:1;height:1px;background:var(--line)}
.scompare-divide span{font-family:"Archivo",sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.scompare-head{display:flex;align-items:baseline;gap:.5rem .7rem;flex-wrap:wrap;margin:0 0 .35rem;font-size:inherit}
.scompare-yd{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.9rem;line-height:1;color:var(--orange-dk);letter-spacing:-.03em}
.scompare-yd small{font-size:1.05rem;color:var(--muted);font-weight:700;margin-left:.08rem}
.scompare-head h3{font-size:1.12rem;margin:0}
/* Replaced the proportional "size bar" (Ryan, 2026-08-11). A part-filled bar is a
   progress metaphor: it read as a score, so the 7-yard -- the heavy-material can for
   concrete and dirt -- rendered as a 32% product. It also carried no unit or legend
   and restated the "7 yd" sitting beside it. These are the two facts that decide
   whether a size fits, and they already existed on the homepage cards. */
.scompare-specs{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .35rem}
/* Chips, not a dot-separated run: the line wraps on a phone and a separator dot
   then leads the second line instead of sitting between the two facts. Matches
   the .size-specs chips already used on the size pages. */
.scompare-specs span{font-family:"Archivo",sans-serif;font-weight:700;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);background:var(--bg-warm);
  border:1px solid var(--line);border-radius:999px;padding:.22rem .42rem;white-space:nowrap}
.scompare-mid p{color:var(--muted);font-size:.92rem;margin:0}
.scompare-tag{display:inline-block;font-family:"Archivo",sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dk);background:#fff1e4;padding:.3rem .62rem;border-radius:6px;margin-bottom:.5rem}
.scompare-link{font-family:"Archivo",sans-serif;font-weight:800;font-size:.95rem;color:var(--ink);white-space:nowrap}
.scompare-row:hover .scompare-link{color:var(--orange-dk)}
.scompare-actions{display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-width:142px}
.scompare-actions .btn{width:100%}
.btn-sm{padding:.56rem 1.05rem;font-size:.88rem;border-radius:9px}
@media(max-width:640px){
  /* Top-align on a phone: the text column runs 4+ lines against a 62px thumb, so
     centering left the photo floating in the middle of its own white space. */
  /* 120px of thumb left a 176px text column, too narrow for the two spec chips to
     share a row. A 100px thumb buys ~44px and drops a whole line off every row. */
  .scompare-row{grid-template-columns:116px minmax(0,1fr);gap:.7rem .7rem;padding:.75rem;align-items:center}
  .scompare-mid p{font-size:.88rem;line-height:1.42}
  .scompare-actions{gap:.55rem}
  .scompare-thumb{width:116px}
  .scompare-yd{font-size:1.6rem}
  .scompare-actions{grid-column:1 / -1;flex-direction:row;min-width:0}
}

/* ===== size picker (interactive) ===== */
.picker{max-width:800px;margin:0 auto}
.picker-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.picker-opt{font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;text-align:left;line-height:1.25;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .12s ease,transform .12s ease,background .12s ease}
.picker-opt:hover{border-color:var(--orange-dk);transform:translateY(-2px)}
.picker-opt.active{border-color:var(--orange-dk);background:#fff1e4;box-shadow:inset 0 0 0 1px var(--orange)}
.picker-result{margin-top:1.4rem}
.picker-options .picker-result{grid-column:1 / -1;margin-top:.2rem}
.picker-rec{border:1px solid var(--line);border-radius:18px;padding:clamp(1.6rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem);background:var(--bg-warm);text-align:center;box-shadow:var(--shadow);animation:pickerIn .25s ease}
.picker-rec-label{display:block;font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--muted)}
.picker-rec-size{display:block;font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(1.9rem,4.5vw,2.8rem);color:var(--orange-dk);letter-spacing:-.02em;margin:.2rem 0 .55rem;line-height:1}
.picker-rec p{color:var(--ink);max-width:44ch;margin:0 auto 1.3rem;font-size:1.05rem}
.picker-rec-cta{display:flex;gap:1.1rem;justify-content:center;align-items:center;flex-wrap:wrap}
@keyframes pickerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== size-page: hero spec chips ===== */
.hero-specs{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem;font-family:"Archivo",sans-serif;font-size:.9rem;font-weight:700}
.hero-specs li{display:inline-flex;align-items:center;gap:.4rem;background:rgba(29,10,46,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;white-space:nowrap}
.hero-specs b{color:#ffb877;font-weight:800}

/* ===== size-page: what fits ===== */
.fits-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.fits-card{border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.7rem;background:#fff}
.fits-card.warn{background:var(--bg-warm)}
.fits-card h3{font-size:1.15rem;margin:0 0 1rem}
.fits-card ul{list-style:none;padding:0;margin:0}
.fits-card li{padding-left:1.6rem;position:relative;margin-bottom:.55rem;color:var(--ink);line-height:1.45}
.fits-card li:last-child{margin-bottom:0}
.fits-card li::before{content:"\2713";position:absolute;left:0;color:var(--orange-dk);font-weight:900}
.fits-card.warn li::before{content:"\2192";color:var(--purple);font-weight:900}

/* ===== size-page: size ladder (comparison) ===== */
.size-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem}
.size-ladder.ladder-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){.size-ladder.ladder-4{grid-template-columns:repeat(2,1fr)}}
.size-ladder a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:1.15rem .5rem;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);text-align:center;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.size-ladder a:hover{border-color:var(--orange-dk);transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(29,10,46,.4)}
.size-ladder a.current{background:var(--plum);border-color:var(--plum);transform:none;cursor:default}
.size-ladder .ld-yd{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.65rem;line-height:1;color:var(--orange-dk);letter-spacing:-.02em}
.size-ladder a.current .ld-yd{color:#fff}
.size-ladder .ld-label{font-family:"Archivo",sans-serif;font-size:.74rem;font-weight:700;color:var(--muted);letter-spacing:.01em}
.size-ladder a.current .ld-label{color:rgba(255,255,255,.82)}

/* ===== service-area map ===== */
.area-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:stretch}
#area-map{min-height:440px;height:100%;border-radius:var(--radius);box-shadow:var(--shadow);z-index:0;background:#e9eef0}
.leaflet-container{font-family:inherit;border-radius:var(--radius)}
.area-pills .town-pills{margin-bottom:1.1rem}

/* ===== reviews CTA ===== */
.reviews-cta{max-width:34rem;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(1.8rem,4vw,2.6rem);box-shadow:var(--shadow);text-align:center}
.reviews-quote{display:block;font-family:"Archivo",sans-serif;font-weight:900;font-size:3.4rem;line-height:.6;color:var(--orange-dk);height:1.4rem}
.reviews-cta p{margin:0 0 1.4rem;color:var(--ink);font-size:1.12rem;line-height:1.5}

/* ===== scroll reveal ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- hero card offset block ---------- */
.hero-card-wrap{position:relative}
.hero-card-wrap::before{content:"";position:absolute;inset:14px -14px -14px 14px;background:var(--orange);border-radius:18px;z-index:0}
.hero-card-wrap .hero-card{position:relative;z-index:1}

/* ---------- intro stat block ---------- */
.intro-copy{display:flex;flex-direction:column}
.intro-cta{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:1.5rem}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:auto}
.stat{background:#fff;padding:1.25rem 1.4rem}
.stat-n{display:block;font-family:"Archivo",sans-serif;font-weight:900;font-size:2.1rem;line-height:1;color:var(--orange-dk);letter-spacing:-.02em}
.stat-l{display:block;font-size:.88rem;color:var(--muted);margin-top:.3rem;font-weight:600}

/* ---------- size cards (photo-forward grid) ---------- */
.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.size-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:#fff;color:inherit;text-decoration:none;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.size-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,10,31,.10);border-color:var(--orange-dk)}
/* The photo rounds its own top corners now. The card used to do it via
   overflow:hidden, but that also sliced the availability badge, which has to
   straddle the card border like the rest of the fleet. */
.size-card .size-photo{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-warm);border-radius:15px 15px 0 0;box-shadow:none}
.size-card .size-photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transition:transform .3s ease}
.size-card:hover .size-photo img{transform:scale(1.04)}
.size-body{padding:1.25rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.yd{font-family:"Archivo",sans-serif;font-weight:900;font-size:2.6rem;line-height:.9;color:var(--orange-dk);letter-spacing:-.03em;margin:0}
.yd small{font-size:1.45rem;color:var(--muted);margin-left:.18rem;font-weight:700}
.yd.word{font-size:1.9rem;color:var(--plum)}
.size-tag{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.08rem;color:var(--ink);margin:.55rem 0 .7rem}
.size-feats{list-style:none;padding:0;margin:0 0 1rem;font-size:.9rem;color:var(--muted);line-height:1.55}
.size-feats li{padding-left:1.35rem;position:relative;margin-bottom:.15rem}
.size-feats li::before{content:"\2713";position:absolute;left:0;color:var(--orange-dk);font-weight:900}
.size-card .see{margin-top:auto;font-family:"Archivo",sans-serif;font-weight:800;font-size:.95rem;color:var(--ink);align-self:flex-start}
.size-card .see span{border-bottom:3px solid var(--orange);padding-bottom:1px}
.size-card:hover .see{color:var(--orange-dk)}
.size-card-actions{margin-top:auto;padding-top:.3rem;display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center}
/* Size-card actions are BUTTONS, not text links. These were 23px underlined
   words -- below the 44px tap minimum, on the money action of the page. The
   markup already carried .size-act-book on the booking link to mark it as
   primary, but no rule ever read it, so 'Get pricing now' and 'More Info'
   rendered identically and the card offered two equal-weight choices where one
   is the sale. Filled uses --orange-cta (4.96:1), not --orange, which fails AA
   behind white text. */
.size-act{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 1.15rem;border-radius:999px;font-family:"Archivo",sans-serif;font-weight:800;font-size:.95rem;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;flex:1 1 auto;background:transparent;color:var(--ink);border:2px solid var(--line);transition:background .15s ease,border-color .15s ease,color .15s ease}
.size-act:hover,.size-act:focus-visible{border-color:var(--ink);color:var(--ink)}
.size-act-book{background:var(--orange-cta);border-color:var(--orange-cta);color:#fff}
.size-act-book:hover,.size-act-book:focus-visible{background:var(--orange-cta-dk);border-color:var(--orange-cta-dk);color:#fff}
/* flex:1 1 auto above means the pair shares a row where the card is wide
   enough and each fills the row when it wraps -- no ragged half-width
   buttons stacked on top of each other. */

.flatbed-note{text-align:center;color:var(--muted);font-size:1rem;margin:1.6rem 0 0}
.sizes-cta .cta-reassure{margin:1.1rem 0 0;font-size:.92rem;color:var(--muted)}
.sizes-cta .cta-reassure::before{content:"\2713 ";color:var(--orange-dk);font-weight:900}

/* ---------- how it works (connected flow) ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative}
.flow::before{content:"";position:absolute;top:39px;left:16.66%;right:16.66%;height:2px;background:repeating-linear-gradient(90deg,#d6cee2 0 7px,transparent 7px 15px);z-index:0}
.flowcard{text-align:center;padding:0 .8rem;position:relative;z-index:1}
.flow-icon{position:relative;width:78px;height:78px;margin:0 auto 1.3rem;border-radius:50%;background:#fff1e4;display:flex;align-items:center;justify-content:center;color:var(--orange-dk);box-shadow:0 0 0 7px var(--bg)}
.flow-icon svg{width:36px;height:36px}
.band-soft .flow-icon{box-shadow:0 0 0 7px var(--bg-soft)}
.flownum{position:absolute;top:-4px;right:-4px;width:28px;height:28px;border-radius:50%;background:var(--plum);color:#fff;font-family:"Archivo",sans-serif;font-weight:900;font-size:.9rem;display:flex;align-items:center;justify-content:center;border:3px solid var(--bg);margin:0}
.flowcard h3{margin-bottom:.4rem}
.flowcard p{color:var(--muted);font-size:.97rem;margin:0 auto;max-width:30ch}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .header-call{margin-left:auto}
  .header-inner{position:relative}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px -16px rgba(29,10,46,.4);max-height:0;overflow:hidden;transition:max-height .26s ease}
  .site-header.nav-open .nav{max-height:min(84vh,720px);overflow-y:auto}
  .nav a{display:block;padding:1rem clamp(1.1rem,4vw,2rem);border-top:1px solid var(--line);font-size:1.05rem;opacity:1}
  .nav-drop{display:block}
  .nav-drop-toggle{display:block;padding:1rem clamp(1.1rem,4vw,2rem);border-top:1px solid var(--line);font-size:1.05rem}
  .nav-drop-toggle::after{display:none}
  .nav-drop-menu,.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{position:static;transform:none;opacity:1;visibility:visible;display:flex;box-shadow:none;border:0;border-radius:0;padding:0;min-width:0;background:var(--bg-soft)}
  .nav-drop-menu a{padding:.7rem clamp(1.1rem,4vw,2rem) .7rem calc(clamp(1.1rem,4vw,2rem) + 1.1rem);border-top:1px solid var(--line);font-size:.98rem;white-space:normal}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .hero-card{max-width:420px}
  .hero-card-wrap::before{display:none}
  .size-grid{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr;gap:2rem}
  .flow::before{display:none}
}
@media (max-width:760px){
  body{font-size:17px}
  .header-call .btn-call-label{display:none}
  .header-call{padding:.6rem 1rem;font-size:.95rem}
  .intro-grid{grid-template-columns:1fr;gap:1.5rem}
  .area-layout{grid-template-columns:1fr;gap:1.4rem}
  #area-map{min-height:300px}
  .size-row,.story-grid,.fits-grid{grid-template-columns:1fr;gap:1.2rem}
  .size-ladder{grid-template-columns:repeat(3,1fr)}
  .picker-options{grid-template-columns:1fr 1fr}
  .size-row.flip .size-photo{order:0}
  .story-photo img{aspect-ratio:4/3}
  .story-photo::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .hero-cta .btn{width:100%;text-align:center}
  .size-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .picker-options{grid-template-columns:1fr}
  .size-ladder{grid-template-columns:repeat(2,1fr)}
  .cta-pair .btn{width:100%}
}


/* ===== Size page: inline CTA under "what fits" ===== */
.size-inline-cta{margin-top:clamp(2rem,4vw,2.8rem);text-align:center}
.size-inline-cta p{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.12rem;max-width:40rem;margin:0 auto}

/* ===== Reviews: badge (live, synced by scripts/fetch-reviews.mjs on every build) ===== */
/* fit-content + auto margins so it centres as a compact pill regardless of the
   parent's text-align. An inline style:display:flex once overrode this and
   stretched it to a full-width bar with dead space. */
.reviews-badge{display:flex;width:fit-content;max-width:100%;align-items:center;gap:1.2rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem 1.4rem;box-shadow:var(--shadow);margin:0 auto 1.9rem}
.rb-stars{color:#fbbc04;font-size:1.35rem;letter-spacing:.1em;line-height:1}
.rb-meta{display:inline-flex;align-items:center;gap:.55rem;padding-left:1.2rem;border-left:1px solid var(--line)}
.rb-google{flex:none}
.rb-text{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.rb-text strong{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.2rem;color:var(--ink)}
.rb-text span{font-size:.78rem;color:var(--muted);white-space:nowrap}

/* Real review cards inside the on-page .reviews section (scripts/build-review-strips.mjs).
   reviews.html carries its own copy of the card rules inline because it is generated
   standalone; these are the sitewide ones. Mobile is a swipe strip, not a stack: three
   stacked cards run most of a phone screen on a page that already has its own content. */
.rev-strip{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:1rem;margin:0 0 1.6rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.25rem .25rem .9rem;
  /* The native bar is hidden and .rev-scroll (drawn by main.js) is shown instead.
     Not a style preference: the native one is an OVERLAY scrollbar on iOS and
     macOS, so it fades out a second after the swipe and cannot be the thing that
     tells a visitor two more reviews sit to the right. */
  scrollbar-width:none}
.rev-strip::-webkit-scrollbar{display:none}
.rev-strip>.rev-card{scroll-snap-align:center}
.rev-scroll{position:relative;height:4px;border-radius:99px;background:rgba(0,0,0,.09);
  max-width:180px;margin:0 auto 1.7rem;overflow:hidden}
.rev-scroll>span{display:block;height:100%;border-radius:99px;background:var(--orange-cta);
  transition:transform .12s linear}
.rev-scroll.is-off{display:none}
@media(prefers-reduced-motion:reduce){.rev-scroll>span{transition:none}}
/* One row that scrolls at EVERY width, not a grid that wraps (Ryan, 2026-08-11).
   A 3-across grid of six cards wrapped to two rows, and because grid rows take
   the height of their tallest card, the short ones opened up a block of dead
   white space. A real review widget is one row: three cards on desktop, one and
   a bit on a phone, and more of them to the right. */
@media(min-width:760px){
  .rev-strip{grid-auto-columns:calc((100% - 2.5rem) / 3);gap:1.25rem;
    padding:.25rem .25rem .9rem;margin-bottom:1.4rem}
}
.rev-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;text-align:left}
.rev-google{position:absolute;top:1.2rem;right:1.2rem}
.rev-stars{color:#fbbc04;font-size:1.05rem;letter-spacing:2px;line-height:1;margin:0}
.rev-body{margin:.8rem 1.9rem 1.1rem 0;color:var(--ink);line-height:1.55;font-size:.96rem}
.rev-who{margin-top:auto;display:flex;align-items:center;gap:.6rem}
.rev-avatar{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Archivo",sans-serif;font-weight:800;color:#fff;font-size:.88rem;background:var(--ink)}
.rev-strip>.rev-card:nth-child(2) .rev-avatar{background:var(--plum)}
.rev-strip>.rev-card:nth-child(3) .rev-avatar{background:var(--orange-cta)}
.rev-meta{font-family:"Archivo",sans-serif;font-weight:700;color:var(--ink)}
.rev-date{display:block;font-family:"Public Sans",sans-serif;font-weight:400;font-size:.88rem;color:var(--muted);margin-top:.15rem}

@media(max-width:400px){
  .reviews-badge{gap:.7rem;padding:.6rem .8rem;max-width:100%}
  .rb-stars{font-size:1.1rem;letter-spacing:.04em}
  .rb-meta{padding-left:.7rem;gap:.4rem}
  .rb-google{width:20px;height:20px}
  .rb-text strong{font-size:1.05rem}
  .rb-text span{font-size:.72rem}
}

/* ===== Reviews: curated homepage strip (frozen, undated — mined for accolade
   language, never touched by the weekly review refresh). Real flexbox row with
   flex-shrink:0 on the cards, NOT grid-auto-flow:column inside overflow-x:auto,
   which collapses to a single column in iOS Safari. ===== */
@media(min-width:800px){.rs-card{flex:0 0 calc((100% - 2.2rem)/3)}}
.rs-platform{display:block;font-size:.78rem;color:var(--muted);font-weight:500}
.reviews-seeall-wrap{text-align:center}

/* tighten mobile hero so it's less towering */
@media(max-width:640px){
  .hero-content{padding-top:1.9rem;padding-bottom:1.9rem}
  .hero-grid{gap:1.15rem}
  .hero-sub{margin-top:.85rem}
  .hero-cta{margin-top:1.25rem}
  .trust-bar{margin-top:1.05rem}
  .hero-card{padding:1.25rem 1.3rem}
}

/* a11y: visible keyboard focus, works on any background */
:where(a,button,summary,input,textarea,select,[tabindex="0"],.nav-drop-toggle):focus-visible{
  outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--plum);border-radius:5px}
/* a11y: minimum touch targets on mobile */
@media(max-width:760px){
  .header-call{min-height:44px}
  .faq summary{min-height:44px;align-items:center}
}

/* ===== Shared CTA-row mobile stacking (house rule, fixed once at the system
   layer): every primary phone/book button row goes full-width, stacked, with a
   real gap — not sibling margins, which vanish on wrap — and every button clears
   the 48px tap-target floor. Covers hero-cta, sizes-cta, intro-cta and cta-pair,
   the four button-row classes in use across the site, so a new page inherits it
   automatically instead of needing its own override. ===== */
@media(max-width:640px){
  .hero-cta,.sizes-cta,.intro-cta,.cta-pair{flex-direction:column;align-items:stretch;gap:12px 16px}
  .hero-cta .btn,.sizes-cta .btn,.intro-cta .btn,.cta-pair .btn{width:100%}
  .btn{min-height:48px}
}

/* Availability badge on the dumpster cards. "Available today" is a STOCK
   statement (this size is in the yard), not a delivery promise, so it carries
   no turnaround wording and does not conflict with the no-same-day guardrail.
   Colours from this site's own tokens: plum chip, brand-orange status dot --
   never an imported green.

   Straddles the card's top border, matching the rest of the fleet. That needed
   the card to stop clipping its overflow -- the clip was what rounded the
   photo's top corners, so the radius moved onto .size-photo itself. */
/* The photo link stretches over the whole card, so the card is one big tap target
   with ONE destination. It previously carried a separate "More Info" button pointing
   at the same URL -- two of the card's three links went to one place. The booking
   button lifts above the stretched link so it still gets its own tap. */
.size-card{position:relative}
.size-card .size-photo::after{content:"";position:absolute;inset:0;border-radius:16px;z-index:0}
.size-card .size-card-actions{position:relative;z-index:1}
.size-card:focus-within{border-color:var(--orange-dk);box-shadow:0 0 0 3px rgba(249,119,7,.28)}
.avail-badge{
  position:absolute;top:-.75rem;right:.9rem;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .72rem;border-radius:999px;
  background:var(--plum);color:#fff;
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 2px 8px rgba(20,10,31,.28)
}
.avail-badge::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--orange)}
@media (max-width:640px){.avail-badge{font-size:.65rem;right:.7rem}}

/* Chat bubble hidden at every width (Ryan, 2026-08-11). It anchors bottom-right,
   the same corner as the floating call pill, so on a phone the two sat on top of
   each other -- and this business converts on calls, not on chat threads that
   need somebody at the other end. The pill is the one persistent ask.
   LeadConnector injects a custom <chat-widget> element; the rest are fallbacks
   for if their loader changes. The LeadConnector embed has now been REMOVED from
   every page and generator as well, so these rules are belt-and-braces against
   a stray widget. To restore chat: script src https://widgets.leadconnectorhq.com/loader.js with
   data-widget-id="6a45d664615aff07b162fe84". */
chat-widget,
#chat-widget,
[id^="lc_chat"],
[class*="chat-widget"],
iframe[src*="chat-widget"],
iframe[src*="leadconnectorhq.com"] {
  display: none !important;
}

/* ===== Floating call pill (mobile) =====
   The header's own call button was the only persistent phone CTA, and on a
   phone it sits at the top of the screen -- the far end of the thumb's reach,
   and gone from view the moment the page scrolls if the header is not sticky.
   Below 1000px the header drops it and this pill carries the call instead:
   bottom-right, in the thumb zone, on screen at every scroll position.
   House doctrine (see local-service-design): a floating PILL, never a
   full-width bar, and CALL ONLY -- one floating element, one ask. Shadow is
   vertical-offset only; the house diagonal stamp makes a pill's label look
   off-centre because it is the only thing making the two edges differ. */
.mobile-cta { display: none; }
@media (max-width: 999px) {
  .header-call { display: none; }
  /* .header-call carried margin-left:auto, and that auto margin is what pushed
     the whole right-hand group over. The hamburger is injected as the LAST
     child of .header-inner and only has margin-left:.4rem of its own, so
     hiding the call button left it sitting against the logo instead of on the
     right edge. The toggle takes the auto margin now. */
  .nav-toggle { margin-left: auto; }
  .mobile-cta {
    position: fixed;
    right: 1.1rem;
    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    left: auto;
    width: auto;
    z-index: 60;
    display: flex;
    background: transparent;
    padding: 0;
    border-top: 0;
  }
  .mobile-cta a.call {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.35rem;
    border-radius: 999px;
    background: var(--orange-cta);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
    transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  }
  .mobile-cta a.call:hover,
  .mobile-cta a.call:focus-visible {
    background: var(--orange-cta-dk);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
  }
  /* Text/book is not a second pill: one floating element, one ask. */
  .mobile-cta a.book,
  .mobile-cta a.text { display: none; }
}

/* ---- Mobile hero trim (Ryan, 2026-08-11) --------------------------------
   The homepage hero measured 861px at 375x812 -- 106% of the screen, so the
   page opened with no hint that anything followed it. The single biggest cause
   was pure duplication: .hero-card repeated the phone (same tel:) and the
   pricing button (same URL) that .hero-cta already shows about 20px above it.
   The card's "includes" list is real content and stays; its duplicate CTA row
   does not. Everything else here is tightening, not removal.

   object-position matters as much as the height. These heroes are 4:3 photos
   cropped to a tall narrow box, and the default 50% 50% pushes the subject
   behind the text overlay while showing empty asphalt. The subject sits in the
   upper-middle of every one of these photos, so bias the crop up and slightly
   right toward the branded container. */
@media (max-width: 640px) {
  .hero { min-height: clamp(460px, 66vh, 620px); }
  .hero-bg { object-position: 78% 42%; }
  .hero-content { padding-top: 1.35rem; padding-bottom: 1.5rem; }
  .hero h1 { font-size: clamp(1.95rem, 7.4vw, 2.25rem); }
  .hero .eyebrow { margin-bottom: .6rem; }
  .hero-sub { font-size: .98rem; margin-top: .65rem; margin-bottom: .5rem; }
  .hero-reviews { margin-bottom: .9rem; }
  .hero-cta { margin-top: 1rem; }
  .hero-grid { gap: .9rem; }
  /* Ryan 2026-10-01: the card is gone on mobile entirely, not just its head */
  .hero-card-wrap { display: none; }
}

/* ---- Homepage size cards: mobile footprint (Ryan, 2026-08-11) --------------
   At 375px these stacked one-up at 526px each -- 0.65 of a screen per card, so
   the product section ran 3.5 screens and you could only ever see one dumpster
   at a time. A 4:3 photo is the wrong shape for a truck anyway: the subject
   band sits at 22-65% of frame with ~37% dead pavement underneath it, so a 2:1
   crop loses nothing but asphalt and buys back 84px a card. */
@media (max-width: 480px) {
  .size-card .size-photo { aspect-ratio: 2 / 1; }
  .size-card .size-photo img { object-position: 50% 32%; }
  .size-body { padding: 1rem 1.1rem 1.15rem; }
  .yd { font-size: 2.2rem; }
  .yd small { font-size: 1.2rem; }
  .size-tag { font-size: 1rem; margin: .4rem 0 .5rem; }
  .size-feats { margin-bottom: .85rem; line-height: 1.5; }
  .size-grid { gap: .9rem; }
}