/* American Dirt Delivery — site.css
   Palette and type are the client's own, lifted from the live Elementor kit.
   Mobile-first. Nothing here may overflow at 390px. */

:root{
  --red:#FD0200;
  --brick:#9B2B2A;
  --yellow:#FEFD05;
  --ink:#141414;
  --ink-2:#1F1F1F;
  --ink-3:#2B2B2B;
  /* The client's --e-global-color-text is #757575. Kept as a reference below,
     but body copy uses a two-shade-darker value: #757575 on the #F4F4F4 tint
     sections is 4.19:1, under WCAG AA. #6C6C6C clears it on both surfaces. */
  --grey:#6C6C6C;
  --grey-brand:#757575;
  --line:#C5C5C5;
  --bg:#F4F4F4;
  --white:#FFFFFF;
  --near:#333333;

  --display:"Josefin Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --pad:16px;
  --r:4px;
  --shadow:0 2px 14px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  color:var(--near);
  background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brick);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;
  text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:0 0 .6em}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--ink);
  padding:12px 18px;font-weight:700;z-index:999}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:820px}
.narrow-p{max-width:68ch}

/* ---------------- type scale ---------------- */
.h-lg{font-size:clamp(1.6rem,5.4vw,2.6rem);margin-bottom:.5em}
.h-md{font-size:clamp(1.35rem,4vw,1.9rem)}
.eyebrow{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;color:var(--brick);margin:0 0 .5rem}
.lede{font-size:clamp(1rem,2.4vw,1.1rem);color:var(--near);margin-bottom:1.2em}
.hl{color:var(--yellow)}
.hl-r{color:var(--red)}
.sub{color:var(--grey);font-size:.92rem;margin:0 0 1rem}
.fine{font-size:.78rem;color:var(--grey);margin:.7rem 0 0;line-height:1.5}
.fine.warn{color:var(--brick);font-weight:700}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.86rem;line-height:1;
  padding:14px 20px;border:2px solid transparent;border-radius:var(--r);
  cursor:pointer;text-align:center;transition:.16s ease;text-decoration:none;
  min-height:48px;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn svg{width:17px;height:17px;flex:0 0 17px}
.btn-red{background:var(--brick);color:#fff;border-color:var(--brick)}
.btn-red:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn-yellow:hover{background:#fff;border-color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-ghost-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.65)}
.btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.wide-btn{width:100%}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 1em}

/* ---------------- TBC placeholder token ---------------- */
.tbc{
  display:inline-flex;align-items:center;gap:.35rem;vertical-align:middle;
  background:var(--yellow);color:var(--ink);
  border:1px solid rgba(0,0,0,.35);border-radius:3px;
  padding:2px 7px;font-family:var(--body);font-size:.74rem;font-weight:700;
  letter-spacing:0;text-transform:none;line-height:1.35;white-space:nowrap;
}
.tbc svg{width:13px;height:13px;flex:0 0 13px;stroke-width:2.4}
/* The token is dropped into headers, footers, buttons and cards, each of which
   styles <b> for its own purposes. Pin it here so context can never hide it. */
.tbc b{display:inline!important;font-family:var(--body)!important;font-weight:800;
  font-size:inherit!important;color:var(--ink)!important;letter-spacing:0!important;
  text-transform:none!important;margin:0!important}
.tbc i{font-style:normal;font-weight:600;opacity:.66}
.btn .tbc{margin:-2px 0}
.tbc-note{
  display:flex;gap:.6rem;align-items:flex-start;
  background:#FFFCE3;border-left:4px solid var(--yellow);
  padding:14px 16px;font-size:.85rem;color:var(--near);line-height:1.6;
  margin:1.2rem 0;border-radius:0 var(--r) var(--r) 0;
}
.tbc-note svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;color:var(--brick)}
.dark .tbc-note{background:rgba(254,253,5,.10);color:#E6E6E6}
.callout{
  display:flex;gap:.6rem;align-items:flex-start;
  background:var(--bg);border-left:4px solid var(--red);
  padding:14px 16px;font-size:.9rem;margin:0 0 1.8rem;border-radius:0 var(--r) var(--r) 0;
}
.callout svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;color:var(--red)}

/* ---------------- top bar ---------------- */
.ubar{background:var(--ink);color:#DADADA;font-size:.76rem}
.ubar .wrap{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  min-height:38px;padding-top:6px;padding-bottom:6px}
.ubar-t,.ubar-c{display:inline-flex;align-items:center;gap:.4rem}
.ubar svg{width:14px;height:14px;flex:0 0 14px;color:var(--yellow)}
.ubar a{color:#DADADA}
.ubar-t{display:none}
@media(min-width:760px){.ubar-t{display:inline-flex}}

/* ---------------- header ---------------- */
.hdr{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 1px 0 var(--line)}
.hdr > .wrap{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{flex:0 0 auto;display:block;line-height:0}
.brand img{width:158px;height:auto}
@media(min-width:1000px){.brand img{width:200px}}
.hdr-cta{display:none;margin-left:auto}
@media(min-width:1000px){.hdr-cta{display:inline-flex}}

.nav{display:none}
@media(min-width:1000px){
  .nav{display:flex;align-items:center;gap:.25rem;margin-left:auto}
  .nav > a,.has-sub > button{
    font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:.8rem;letter-spacing:.04em;color:var(--ink);
    background:none;border:0;padding:10px 11px;cursor:pointer;
    display:inline-flex;align-items:center;gap:.28rem;font-family:var(--display);
  }
  .nav > a:hover,.has-sub > button:hover{color:var(--brick);text-decoration:none}
  .nav > a[aria-current]{color:var(--brick);box-shadow:inset 0 -3px 0 var(--red)}
  .chev{width:12px;height:12px;transform:rotate(90deg);opacity:.5}
  .has-sub{position:relative}
  :where(.has-sub) > .sub{
    position:absolute;top:100%;left:0;min-width:240px;background:#fff;
    border:1px solid var(--line);box-shadow:var(--shadow-lg);
    padding:6px;display:none;
  }
  .has-sub:hover .sub,.has-sub.open .sub{display:block}
  :where(.has-sub) > .sub a{display:block;padding:10px 12px;color:var(--ink);font-size:.88rem;font-weight:600}
  :where(.has-sub) > .sub a:hover{background:var(--bg);color:var(--brick);text-decoration:none}
}
.burger{margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r);
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink);flex:0 0 46px}
.burger svg{width:22px;height:22px}
@media(min-width:1000px){.burger{display:none}}

.mnav{display:none;background:var(--ink);padding:10px var(--pad) 22px}
.mnav.open{display:block}
@media(min-width:1000px){.mnav,.mnav.open{display:none}}
.mnav a{display:block;color:#F1F1F1;padding:12px 4px;font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.10)}
.mnav a:hover{color:var(--yellow);text-decoration:none}
.mnav .grp{font-family:var(--display);font-weight:700;text-transform:uppercase;
  color:var(--yellow);font-size:.72rem;letter-spacing:.14em;padding:16px 4px 6px}
.mnav-cta{margin-top:18px;width:100%;border-bottom:0}
.mnav .mnav-cta{color:#fff}

/* ---------------- hero ---------------- */
/* Content sits on the site grid (same left edge as the logo), and width is
   limited per element rather than by narrowing the wrap, which is what used
   to push every hero 100px right of the logo. The overlay keeps the left
   side dark for the copy and lets the job photo read on the right. */
.hero{
  position:relative;color:#fff;
  background:
    linear-gradient(100deg, rgba(20,20,20,.95) 0%, rgba(20,20,20,.86) 44%, rgba(42,20,19,.62) 72%, rgba(155,43,42,.48) 100%),
    var(--img) center/cover no-repeat, var(--ink);
  padding:36px 0 40px;border-bottom:5px solid var(--red);
}
.hero.tall{padding:44px 0 48px}
@media(min-width:900px){
  .hero{padding:52px 0 58px}
  .hero.tall{padding:72px 0 76px}
}
.hero h1{color:#fff;font-size:clamp(1.8rem,4.4vw,2.8rem);line-height:1.1;max-width:22ch;
  margin:0 0 .5em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero.tall h1{font-size:clamp(2rem,4.8vw,3.1rem);max-width:27ch}
.hero .eyebrow{color:var(--yellow);margin-bottom:.7rem}
.hero .lede{color:#E9E9E9;max-width:60ch;font-size:clamp(1rem,2.2vw,1.1rem);line-height:1.65}
.hero .row{margin-top:1.4rem}
.hero-points{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.6rem 2.2rem}
@media(min-width:640px){.hero-points{grid-template-columns:repeat(2,max-content)}}
.hero-points li{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:#F0F0F0}
.hero-points svg{width:18px;height:18px;flex:0 0 18px;color:var(--yellow)}
/* breadcrumb and accent bar, shared by every dark hero */
:is(.hero,.bhero) .crumb{padding:0;margin:0 0 1rem;font-size:.8rem;color:#E0E0E0;white-space:normal}
:is(.hero,.bhero) .crumb ol{flex-wrap:wrap;row-gap:.2rem}
:is(.hero,.bhero) .crumb a{color:var(--yellow);font-weight:700}
:is(.hero,.bhero) .crumb a:hover{color:#fff}
:is(.hero,.bhero) .crumb span{color:#fff}
:is(.hero,.bhero) .crumb li+li::before{content:"\00BB";color:#E0E0E0}
:is(.hero,.bhero) .bar{display:block;width:64px;height:5px;background:var(--red);margin:0 0 1.1rem}

/* ---------------- strip ---------------- */
.strip{background:var(--yellow);color:var(--ink)}
.strip .grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(0,0,0,.14);margin:0 calc(var(--pad) * -1)}
@media(min-width:860px){.strip .grid{grid-template-columns:repeat(4,1fr);margin:0}}
.strip .cell{background:var(--yellow);display:flex;align-items:center;gap:.5rem;
  padding:16px 14px;font-weight:700;font-size:.82rem;line-height:1.3}
.strip svg{width:20px;height:20px;flex:0 0 20px}

/* ---------------- sections ---------------- */
.sec{padding:44px 0}
@media(min-width:900px){.sec{padding:70px 0}}
.sec.tint{background:var(--bg)}
.sec.dark{background:var(--ink);color:#DEDEDE}
.sec.dark h1,.sec.dark h2,.sec.dark h3{color:#fff}
.sec.dark .lede{color:#C6C6C6}
.sec.dark .eyebrow{color:var(--yellow)}

.split{display:grid;gap:2.2rem}
.split > *{min-width:0}
@media(min-width:1000px){.split{grid-template-columns:1fr 440px;gap:3rem;align-items:start}}
.split-a{display:grid;gap:2.2rem}
.split-a > *{min-width:0}
@media(min-width:1000px){.split-a{grid-template-columns:minmax(0,1fr) 380px;gap:3rem;align-items:start}}
.rail{min-width:0}
@media(min-width:1000px){.rail{position:sticky;top:88px}}

.prose{min-width:0}
.blk{margin:0 0 2.4rem}
.blk:last-child{margin-bottom:0}
.blk h2{font-size:clamp(1.25rem,3.6vw,1.75rem);padding-bottom:.4rem;
  border-bottom:3px solid var(--yellow);display:inline-block}

/* ---------------- lead form ---------------- */
.lead{background:#fff;border:1px solid var(--line);border-top:5px solid var(--red);
  border-radius:var(--r);padding:22px 18px;box-shadow:var(--shadow)}
@media(min-width:520px){.lead{padding:26px 24px}}
.tint .lead,.dark .lead{box-shadow:var(--shadow-lg)}
.lead h2{font-size:1.2rem;margin-bottom:.35em;color:var(--ink)}
.fgrid{display:grid;gap:.85rem}
@media(min-width:520px){.fgrid{grid-template-columns:1fr 1fr}}
.field{display:block;min-width:0}
.field.wide{grid-column:1/-1}
.field > span{display:block;font-size:.76rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--near);margin-bottom:.3rem}
.field > span i{font-style:normal;font-weight:400;text-transform:none;color:var(--grey);
  letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;max-width:100%;padding:11px 12px;font-family:var(--body);font-size:16px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--red);outline:2px solid rgba(253,2,0,.18);outline-offset:0}
.lead .btn{margin-top:1rem}
/* Required-field marker. */
.req{color:var(--red);font-weight:700}
/* Honeypot, Turnstile slot and the send states of the quote form. */
.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-ts:not(:empty){margin-top:1rem}
.lead-msg{display:none;border-radius:var(--r);padding:14px 16px;margin-top:1rem;color:var(--ink)}
.lead-msg b{display:block;margin-bottom:.25em}
.lead-msg p{margin:0}
.lead-done{background:#EAF6EC;border:1px solid #2E7D32}
.lead-failed{background:#FDECEC;border:1px solid var(--red)}
.lead[data-state="done"] form{display:none}
.lead[data-state="done"] .lead-done,.lead[data-state="failed"] .lead-failed{display:block}
.lead[data-state="sending"] [type=submit]{opacity:.6;cursor:progress}

/* ---------------- quick facts list ---------------- */
.facts{display:grid;gap:0;margin:1.8rem 0 0;border-top:1px solid var(--line)}
@media(min-width:560px){.facts{grid-template-columns:1fr 1fr;column-gap:2rem}}
.facts > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:11px 0;border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.74rem;letter-spacing:.08em;color:var(--brick);flex:0 0 auto}
.facts dd{margin:0;font-size:.85rem;color:var(--near);text-align:right}

/* ---------------- cards ---------------- */
.cards{display:grid;gap:1.2rem;margin-top:1.6rem}
@media(min-width:680px){.cards.c2,.cards.c3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards.c3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.card .ph{display:block;aspect-ratio:3/2;background:var(--bg);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:.3s ease}
.card:hover .ph img{transform:scale(1.04)}
.card .bd{padding:18px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.05rem;margin-bottom:.45em}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--brick);text-decoration:none}
.card p{font-size:.9rem;color:var(--grey);flex:1}
.more{min-height:34px;align-items:center;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.76rem;
  letter-spacing:.06em;color:var(--brick);display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.6rem}
.more svg{width:15px;height:15px}

/* ---------------- tiers ---------------- */
.tiers{display:grid;gap:1.1rem;margin-top:1.8rem}
@media(min-width:620px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:22px 16px;text-align:center}
.sec:not(.dark) .tier{background:#fff;border-color:var(--line)}
.tier img{width:112px;height:112px;margin:0 auto .9rem;object-fit:contain}
.tier h3{font-size:1.05rem;margin-bottom:.2em}
.tier .win{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.8rem;color:var(--yellow);margin:0 0 .8rem}
.sec:not(.dark) .tier .win{color:var(--brick)}
.tier .px{margin:0;font-size:.82rem;display:flex;flex-direction:column;gap:.2rem;
  color:#BDBDBD}
.sec:not(.dark) .tier .px{color:var(--grey)}
.tier .px i{font-style:normal;font-size:.72rem;opacity:.8}

/* ---------------- why / item grid ---------------- */
.why{display:grid;gap:1.1rem;margin-top:1.4rem}
@media(min-width:700px){.why{grid-template-columns:1fr 1fr}}
.blk .why{margin-bottom:1.4rem}
.it{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:0 var(--r) var(--r) 0;padding:16px 18px}
.tint .it{background:#fff}
.dark .it{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);
  border-left-color:var(--yellow)}
/* Direct child only. `.it b` would also capture <b> used for emphasis inside
   the paragraph and break the sentence onto its own line. */
.it > b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.02em;color:var(--ink);margin-bottom:.4rem}
.dark .it > b{color:#fff}
.it p b{font-weight:700;color:var(--ink)}
.dark .it p b{color:#fff}
.it p{margin:0;font-size:.9rem;color:var(--grey);line-height:1.6}
.dark .it p{color:#C4C4C4}

/* ---------------- metro grid ---------------- */
.mgrid{display:grid;gap:.9rem;margin-top:1.6rem}
@media(min-width:620px){.mgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.mgrid{grid-template-columns:repeat(4,1fr)}}
.mcard{background:var(--ink);color:#fff;padding:22px 18px;border-radius:var(--r);
  display:flex;flex-direction:column;gap:.15rem;transition:.18s ease}
.mcard:hover{background:var(--brick);text-decoration:none;transform:translateY(-2px)}
.mn{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.1rem}
.ms{font-size:.78rem;color:var(--yellow);text-transform:uppercase;letter-spacing:.1em}
.mx{margin-top:.8rem}
.mx svg{width:20px;height:20px}

/* ---------------- gallery ---------------- */
.gal{display:grid;gap:.7rem;margin-top:1.6rem}
@media(min-width:560px){.gal{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal figure{margin:0;aspect-ratio:7/4;overflow:hidden;border-radius:var(--r);background:var(--bg)}
.gal img{width:100%;height:100%;object-fit:cover}

/* ---------------- steps ---------------- */
.steps{display:grid;gap:1.1rem;margin-top:1.6rem}
@media(min-width:700px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--bg);border-radius:var(--r);padding:20px 18px;position:relative}
.step .n{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--brick);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:.7rem}
.step > b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.95rem;color:var(--ink);margin-bottom:.35rem}
.step p{margin:0;font-size:.89rem;color:var(--grey);line-height:1.6}
.step p b{font-weight:700;color:var(--ink)}

/* ---------------- calculator ---------------- */
.calc{background:var(--ink);color:#fff;border-radius:var(--r);padding:22px 18px;
  border-top:5px solid var(--yellow)}
@media(min-width:520px){.calc{padding:26px 24px}}
.calc h2{color:#fff;font-size:1.15rem;display:flex;align-items:center;gap:.5rem}
.calc h2 svg{width:20px;height:20px;color:var(--yellow)}
.calc .sub{color:#B9B9B9}
.calc .field > span{color:#D8D8D8}
.cgrid{display:grid;gap:.85rem}
@media(min-width:560px){.cgrid{grid-template-columns:repeat(3,1fr)}}
.cmode{margin-top:.85rem}
.cmode > span{color:#D8D8D8}
.cout{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.16);
  border-radius:var(--r);overflow:hidden;margin-top:1.2rem}
@media(min-width:420px){.cout{grid-template-columns:repeat(3,1fr)}}
.cout > div{background:var(--ink-3);padding:16px 12px;text-align:center;min-width:0}
.cout b{display:block;font-family:var(--display);font-size:clamp(1.3rem,5vw,1.8rem);color:var(--yellow);
  line-height:1.1}
.cout span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#B9B9B9;line-height:1.3}
.calc .fine{color:#B9B9B9}
.calc .fine.warn{color:var(--yellow)}

/* ---------------- direct answer ---------------- */
.answer{background:var(--bg);border-left:4px solid var(--red);border-radius:var(--r);
  padding:18px 20px;margin:0 0 1.6rem}
.answer p{margin:0;font-size:1rem;line-height:1.7;color:var(--near)}
.answer p b{color:var(--ink)}

/* ---------------- table ---------------- */
.tbl-wrap{margin:2.2rem 0}
.tbl-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r)}
.tbl-scroll table{min-width:520px;font-size:.86rem}
.tbl-scroll th,.tbl-scroll td{white-space:normal}
.tbl-scroll td:first-child{font-weight:600;color:var(--ink)}
@media(min-width:760px){.tbl-scroll table{min-width:0}}
.tbl-wrap h3{font-size:1.05rem;margin-bottom:.3em}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
th{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.76rem;
  letter-spacing:.06em;background:var(--ink);color:#fff;border-bottom:0}
tbody tr:nth-child(odd){background:var(--bg)}

/* ---------------- faq ---------------- */
.faq{margin-top:1.4rem;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  list-style:none;cursor:pointer;padding:16px 38px 16px 0;position:relative;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.92rem;line-height:1.35;color:var(--ink);
}
summary::-webkit-details-marker{display:none}
.pm{position:absolute;right:2px;top:19px;width:16px;height:16px}
.pm::before,.pm::after{content:"";position:absolute;background:var(--red);
  left:0;top:7px;width:16px;height:2px;transition:.2s}
.pm::after{transform:rotate(90deg)}
details[open] .pm::after{transform:rotate(0)}
details[open] summary{color:var(--brick)}
.faq .a{padding:0 0 18px}
.faq .a p{margin:0;font-size:.93rem;color:var(--grey);line-height:1.7}

/* ---------------- areas ---------------- */
.areas{display:grid;gap:1.6rem}
@media(min-width:760px){.areas{grid-template-columns:repeat(3,1fr)}}
.acol h3{font-size:1.15rem;padding-bottom:.35rem;border-bottom:3px solid var(--red);
  display:inline-block}
.acol ul{list-style:none;padding:0;margin:.9rem 0 0;columns:2;column-gap:1rem}
@media(min-width:760px){.acol ul{columns:1}}
.acol li{font-size:.9rem;padding:5px 0;border-bottom:1px dotted var(--line);
  break-inside:avoid}
.mlink{display:inline-flex;align-items:center;min-height:34px;gap:.4rem;font-family:var(--display);
  font-weight:700;text-transform:uppercase;font-size:.74rem;letter-spacing:.06em;
  color:var(--brick);margin-top:.6rem}
.mlink svg{width:14px;height:14px}
.citylist{list-style:none;padding:0;display:grid;gap:.3rem;
  grid-template-columns:1fr 1fr;margin-bottom:1.2rem}
@media(min-width:620px){.citylist{grid-template-columns:repeat(3,1fr)}}
.citylist li{font-size:.88rem;padding:6px 0 6px 16px;position:relative;color:var(--near)}
.citylist li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;
  background:var(--red);border-radius:50%}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;min-height:40px;gap:.35rem;background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.74rem;
  letter-spacing:.05em;color:var(--ink)}
.chip:hover{background:var(--ink);color:#fff;text-decoration:none;border-color:var(--ink)}
.chip svg{width:13px;height:13px}

/* ---------------- contact cards ---------------- */
.contact-cards{display:grid;gap:.8rem;margin:1.2rem 0}
@media(min-width:600px){.contact-cards{grid-template-columns:1fr 1fr}}
.cc{background:var(--bg);border-radius:var(--r);padding:16px 18px;min-width:0}
.cl{display:flex;align-items:center;gap:.4rem;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;color:var(--brick);
  margin-bottom:.45rem}
.cl svg{width:15px;height:15px}
.cv{font-size:.95rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}

/* ---------------- band ---------------- */
.band{
  background:linear-gradient(103deg,var(--red) 0%,var(--brick) 58%,var(--ink) 100%);
  color:#fff;padding:40px 0;
}
@media(min-width:900px){.band{padding:58px 0}}
.band h2{color:#fff;font-size:clamp(1.4rem,4.4vw,2.1rem);max-width:22ch}
.band p{color:#F4E7E7;max-width:62ch;margin-bottom:1.4em}
.band .row{margin:0}

/* ---------------- breadcrumb ---------------- */
.crumb{font-size:.78rem;color:var(--grey);padding:14px 0 0;overflow-x:auto;
  white-space:nowrap;-webkit-overflow-scrolling:touch}
.crumb a{color:var(--grey)}
.crumb a:hover{color:var(--brick)}
.crumb span{color:var(--ink);font-weight:700}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.crumb li{display:flex;align-items:center}
.crumb li+li::before{content:"/";margin:0 .4em;color:var(--grey)}

/* ---------------- footer ---------------- */
.ftr{background:var(--ink);color:#B8B8B8;padding:44px 0 0;font-size:.9rem}
@media(min-width:900px){.ftr{padding-top:62px}}
.ftr-grid{display:grid;gap:1.8rem}
@media(min-width:700px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ftr-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.ftr-brand img{width:210px;margin-bottom:1rem}
.ftr-brand p{font-size:.86rem;line-height:1.7;max-width:46ch}
.ftr .ftr-h{color:#fff;font-size:.82rem;letter-spacing:.1em;margin-bottom:.9em}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{padding:5px 0}
.ftr a{color:#B8B8B8}
.ftr a:hover{color:var(--yellow);text-decoration:none}
.soc{display:flex;gap:.5rem;margin-top:1rem}
.soc a{width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:#fff}
.soc a:hover{background:var(--red);border-color:var(--red)}
.soc svg{width:17px;height:17px}
.meta{font-style:normal;display:grid;gap:1rem;margin-top:2.4rem;padding:1.6rem 0;
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
@media(min-width:700px){.meta{grid-template-columns:repeat(4,1fr)}}
.meta > div{min-width:0;overflow-wrap:anywhere}
/* Direct child only — otherwise this swallows the <b> inside a .tbc token and
   renders it yellow-on-yellow, i.e. invisible. */
.meta > div > b{display:block;color:var(--yellow);font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:.7rem;letter-spacing:.12em;margin-bottom:.3rem}
.meta a{color:#fff}
.meta .tbc b{display:inline;color:var(--ink);font-family:var(--body);font-size:.74rem;
  letter-spacing:0;margin:0}
.ftr-btm{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  padding:1.3rem 0 96px;font-size:.78rem;color:#8C8C8C}
@media(min-width:1000px){.ftr-btm{padding-bottom:1.6rem}}
.ftr-note{color:var(--yellow);font-weight:700}

/* ---------------- sticky call bar (mobile) ---------------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;
  grid-template-columns:1fr 1fr;gap:1px;background:rgba(0,0,0,.25);
  box-shadow:0 -4px 18px rgba(0,0,0,.24);
}
@media(min-width:1000px){.callbar{display:none}}
.callbar .btn{border-radius:0;border:0;min-height:56px;font-size:.8rem;padding:10px 8px}
.cb-call{background:var(--ink);color:#fff}
.cb-quote{background:var(--brick);color:#fff}
.cb-quote:hover{background:var(--ink);color:#fff}
.callbar .btn:hover{transform:none}
.callbar .tbc{font-size:.68rem;padding:2px 5px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* Web Interface Guidelines: faster taps + honor reduced motion */
a,button,summary,label,input,select,textarea,.btn{touch-action:manipulation}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---- Tier groups on the hub and home, mega metro menu, wide city list ---- */
.tier{margin-top:1.8rem;text-align:left}
.tier:first-of-type{margin-top:1.4rem}
.tier-h{margin-bottom:.9rem;text-align:left}
.tier-h h3{justify-content:flex-start}
.tier-h p{margin-left:0;margin-right:0}
.tier-h h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.05rem;margin:0;color:var(--ink);
  display:inline-flex;align-items:center;gap:.55rem}
.tier-h h3::before{content:"";width:22px;height:4px;background:var(--red);border-radius:2px}
.tier-h p{margin:.35rem 0 0;color:var(--grey);font-size:.9rem;max-width:64ch}
.tier .mgrid{margin-top:.9rem}

.areas-wide{grid-template-columns:1fr}
@media(min-width:640px){.areas-wide{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.areas-wide{grid-template-columns:repeat(4,1fr)}}
.areas-wide .acol .mlink{margin-top:1rem}
.areas-wide .acol .mlink:first-of-type{margin-top:.4rem}
.areas-wide .acol ul{columns:1;margin:.4rem 0 0}

@media(min-width:1000px){
  .sub-mega{
    min-width:min(680px,90vw);left:auto;right:0;
    display:none;grid-template-columns:repeat(3,1fr);gap:2px 14px;padding:16px;
  }
  .has-sub:hover .sub-mega,.has-sub.open .sub-mega{display:grid}
  .sub-mega .mega-col{display:flex;flex-direction:column}
  .sub-mega .mega-h{font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:.66rem;letter-spacing:.12em;color:var(--brick);padding:6px 12px 4px}
  .sub-mega a{padding:7px 12px;font-size:.85rem}
  .sub-mega .mega-all{grid-column:1/-1;margin-top:6px;border-top:1px solid var(--line);
    padding-top:12px;display:inline-flex;align-items:center;gap:.4rem;
    font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:.74rem;letter-spacing:.06em;color:var(--ink)}
  .sub-mega .mega-all svg{width:14px;height:14px}
}
.mnav-all{font-weight:700}

/* blog */
.post figure{margin:0 0 1.8rem}
.post figure img{display:block;width:100%;height:auto;border-radius:var(--r)}
.post figcaption{font-size:.84rem;color:var(--grey);margin-top:.5rem}
.post .intro{margin-bottom:2.4rem}
.post h3{font-size:1.08rem;margin:1.5rem 0 .5rem}
.post ul{padding-left:1.25rem;margin:0 0 1.1rem}
.post li{margin:.4rem 0}
.post .tbl-wrap{margin-bottom:1.2rem}
/* a 2 column table fits a phone, only wider tables need the side scroll */
.tbl-scroll table:has(th:nth-child(2):last-child){min-width:0}
.tbl-scroll table:has(th:nth-child(2):last-child) td:last-child{white-space:nowrap}

/* blog archive, laid out after the live WordPress blog the client knows */
h1,h2,h3{text-wrap:balance}
.card .ph img{transition:transform .3s ease}
.bhero{background:linear-gradient(100deg,var(--ink) 0%,#2A1413 55%,var(--brick) 100%);color:#fff;
  padding:clamp(40px,7vw,76px) 0 clamp(40px,6.5vw,72px)}
.bhero h1{color:#fff;font-size:clamp(1.9rem,5.6vw,3.1rem);margin:0 0 .45em}
.bhero .lede{color:#E6E6E6;max-width:60ch;margin:0}
.sec-head{text-align:center;max-width:62ch;margin:0 auto clamp(1.6rem,4vw,2.6rem)}
.sec-head .eyebrow{color:var(--red)}
.sec-head h2{font-size:clamp(1.6rem,4.6vw,2.4rem);margin:0 0 .4em}
.sec-head p{color:var(--grey);margin:0}
.agrid{display:grid;gap:1.4rem;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),372px))}
.acard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.acard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.acard .ph{aspect-ratio:5/3;background:var(--bg);overflow:hidden}
.acard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.acard:hover .ph img{transform:scale(1.04)}
.acard .bd{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.acard time{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--red);margin-bottom:.6rem;font-variant-numeric:tabular-nums}
.acard h3{font-size:1.2rem;line-height:1.2;margin:0 0 .6em}
.acard h3 a{color:var(--ink)}
.acard h3 a::after{content:"";position:absolute;inset:0}
.acard h3 a:focus-visible{outline:none}
.acard:has(h3 a:focus-visible){outline:3px solid var(--red);outline-offset:3px}
.acard p{font-size:.92rem;color:var(--near);line-height:1.65;margin:0 0 1rem;flex:1}
.acard .go,.tcard .go{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;color:var(--red)}
.acard .go svg,.tcard .go svg{width:15px;height:15px;transition:transform .2s ease}
.acard:hover .go svg,.tcard:hover .go svg{transform:translateX(3px)}
.tgrid{display:grid;gap:1.4rem}
@media(min-width:640px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.tcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:24px;color:var(--near);transition:box-shadow .2s ease,border-color .2s ease}
.tcard:hover{text-decoration:none;box-shadow:var(--shadow);border-color:#C9C9C9}
.tcard .ic{width:46px;height:46px;border-radius:8px;background:#FFE9E8;color:var(--red);
  display:grid;place-items:center;margin-bottom:1.1rem}
.tcard .ic svg{width:22px;height:22px}
.tcard b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.15rem;
  color:var(--ink);margin-bottom:.45rem;line-height:1.2}
.tcard span.d{font-size:.92rem;line-height:1.6;margin-bottom:1.1rem;flex:1}
.standard{max-width:1000px;margin:0 auto}
@media(min-width:860px){.standard{columns:2;column-gap:3rem}}
.standard p{margin:0 0 1.1rem;color:var(--near);break-inside:avoid}
/* single post hero */
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 0 .9rem;
  font-size:.82rem;color:#D0D0D0}
.ptag{background:var(--yellow);color:var(--ink);font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;padding:5px 9px;border-radius:2px}
.phero h1{font-size:clamp(1.75rem,4.4vw,2.7rem);line-height:1.12;max-width:24ch;margin:0 0 .6em}
.phero .lede{font-size:clamp(1rem,2.2vw,1.12rem);line-height:1.65;max-width:64ch}
.byline{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin:1.5rem 0 0;max-width:41rem;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.16);font-size:.86rem;color:#CFCFCF}
.byline a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.byline time{font-variant-numeric:tabular-nums}

/* ---------------- layout fixes ---------------- */
/* Delivery tier cards share the .tier class with the metro groups, whose
   margin and text-align rules were leaking in: the first card sat 7px higher
   than the second and the text ran left under a centred icon. Scope them
   back, and let the grid fit however many tiers there are. */
.tiers .tier,.tiers .tier:first-of-type{margin-top:0;text-align:center}
@media(min-width:620px){.tiers{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
/* Buttons directly under a card grid were touching the cards. */
.cards + .row,.why + .row,.tier + .row{margin-top:1.4rem}
/* A plain ghost button is ink on ink inside a dark section. */
.dark .btn-ghost{color:#fff;border-color:#fff}
.dark .btn-ghost:hover{background:#fff;color:var(--ink)}
/* The notice box was a flex row, so any inline markup in its text (a <b>,
   a link) became its own column. Keep the icon in the gutter and let the
   text flow as one paragraph. */
.tbc-note{display:block;position:relative;padding-left:44px}
.tbc-note svg{position:absolute;left:16px;top:16px;margin:0}
/* On phones, stacked buttons in a row were each their own width. Give every
   button in a row the full width so they line up as one column. */
@media(max-width:559px){.row > .btn{flex:1 1 100%}}

/* ---- Service area hub: city finder and metro city cards ---- */
.mc{margin-top:.5rem;font-size:.78rem;color:#C9C9C9}
/* Hub page: two metro cards per row on phones instead of 15 stacked. */
@media(max-width:619px){
  .tier-counts .mgrid{grid-template-columns:1fr 1fr;gap:.6rem}
  .tier-counts .mcard{padding:16px 12px}
  .tier-counts .mn{font-size:.95rem}
}
@media(min-width:900px){.cjump a{min-width:44px;padding:0 10px}}
.cfind{display:grid;gap:.9rem;margin:1.6rem 0 1.4rem;align-items:end}
@media(min-width:900px){.cfind{grid-template-columns:minmax(0,420px) 1fr}}
.cfind-in input{background:#fff}
.cjump{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.3rem}
@media(min-width:900px){.cjump{display:flex;gap:.4rem}}
.cjump a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 4px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.06em}
.cjump a:hover{background:var(--ink);border-color:var(--ink);color:#fff;text-decoration:none}
.cfind-none{grid-column:1/-1;margin:0;padding:12px 14px;border-left:4px solid var(--red);background:#fff}
.cgrid{columns:1;column-gap:1rem}
@media(min-width:640px){.cgrid{columns:2}}
@media(min-width:1000px){.cgrid{columns:3}}
.ccard{break-inside:avoid;margin:0 0 1rem;background:#fff;border:1px solid var(--line);
  border-top:4px solid var(--red);border-radius:var(--r);padding:18px 18px 12px;scroll-margin-top:100px}
.ccard header{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 .6rem}
.ccard-st{grid-column:1/-1;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--brick)}
.ccard h3{font-size:1.15rem;margin:0}
.ccard h3 a{color:var(--ink)}
.ccard h3 a:hover{color:var(--brick);text-decoration:none}
.ccard-n{font-size:.78rem;color:var(--grey);white-space:nowrap}
.ccard ul{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.ccard li{font-size:.84rem;padding:4px 10px;border-radius:999px;background:var(--bg);color:var(--near)}
.ccard li.hit{background:var(--yellow);color:var(--ink);font-weight:700}
.ccard .more{margin-top:.8rem}