/* Haul Heroes — one stylesheet, hashed and inlined-adjacent by build.py.
   Order: tokens, base, layout, nav, hero + scene, blocks, forms, footer, prose,
   responsive, reduced-motion. */

:root {
  --ink: #141414;
  --ink-soft: #4A4A4A;
  --ink-faint: #6B6B6B;
  --red: #E8192C;          /* cape, logo, large headings only: 4.0:1 on white */
  --red-text: #C4121F;     /* small text and UI: 5.9:1 on white, passes AA */
  --red-deep: #A80E1D;
  --band: #F4F4F2;
  --line: #E2E2DE;
  --sky: #E9F3F8;
  --white: #FFFFFF;
  --radius: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

h1, h2, h3, h4 { line-height: 1.12; margin: 0; font-weight: 900; letter-spacing: -0.01em; }
p { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--red-text); }
a:hover { color: #8E0D16; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #fff; padding: 14px 20px; border-radius: 0 0 10px 0;
  font-weight: 800; text-decoration: none;
}
.skip:focus { left: 0; color: #fff; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: 24px; }
.band { background: var(--band); }
.sec { padding-block: 72px; }
.sec-head { max-width: 40rem; }
.sec h2 { font-size: clamp(31px, 3.6vw, 42px); }
.sec-lead { font-size: 19px; color: var(--ink-soft); margin-top: 14px; }
.sec-lead + .sec-lead { margin-top: 16px; }

/* ---------- nav ---------- */
.nav { border-bottom: 1px solid var(--line); background: #fff; }
.nav-in { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; padding-block: 14px; }
.lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.lockup-text { font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: 25px; line-height: 0.93; letter-spacing: 0.01em; text-transform: uppercase; }
.nav-links { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px; padding: 8px 2px; display: inline-block; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--red-text); }
.nav-phone {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px;
  color: var(--ink); text-decoration: none; padding: 10px 18px; border-radius: 999px;
  background: var(--band); min-height: 48px;
}
.nav-phone:hover { background: #E8E8E4; color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding-block: 56px 64px; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 48px 40px; align-items: center; }
.hero-copy { flex: 1 1 420px; min-width: 0; }
.hero-art { flex: 1 1 440px; min-width: 0; }
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); margin-top: 20px; }
.hero h1 em { font-style: normal; color: var(--red-text); }
.hero-sub { font-size: 21px; color: var(--ink-soft); margin-top: 20px; max-width: 30em; }

.pill {
  display: inline-flex; align-items: center; gap: 9px; background: var(--red); color: #fff;
  font-weight: 800; font-size: 16px; padding: 8px 17px; border-radius: 999px;
  letter-spacing: 0.02em; text-transform: uppercase;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; align-items: center; }
.btn {
  font-family: inherit; font-size: 20px; font-weight: 900; border: 0; border-radius: 14px;
  padding: 17px 30px; min-height: 60px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-deep); }
.btn-primary:hover { background: #D4121F; color: #fff; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--red-deep); }
.btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-sm { font-size: 16px; padding: 12px 20px; min-height: 48px; border-radius: 11px; }

.reassure { margin-top: 18px; font-size: 16px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.reassure span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- the animated scene ---------- */
.scene { width: 100%; height: auto; display: block; border-radius: 22px; }

.bin, .lid, .cape, .junk, .sparkle, .dust, .nav-mark { transform-box: view-box; }

.bin { transform-origin: 300px 244px; animation: bin-fly 3s cubic-bezier(.34,.1,.3,1) both; }
@keyframes bin-fly {
  0%   { transform: translate(-560px, -40px) rotate(-12deg); }
  22%  { transform: translate(-150px, -112px) rotate(7deg); }
  36%  { transform: translate(0px, -104px) rotate(0deg); }
  70%  { transform: translate(0px, -100px) rotate(0deg); }
  85%  { transform: translate(0px, 10px) rotate(0deg); }
  93%  { transform: translate(0px, -7px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

.lid { transform-origin: 248px 182px; animation: lid-open 3s ease-in-out both; }
@keyframes lid-open {
  0%, 30%   { transform: rotate(0deg); }
  38%, 68%  { transform: rotate(-42deg); }
  78%, 100% { transform: rotate(0deg); }
}

.cape { transform-origin: 262px 206px; animation: cape-flap 1.1s ease-in-out infinite alternate; }
@keyframes cape-flap {
  from { transform: rotate(-4deg) scaleY(1); }
  to   { transform: rotate(5deg) scaleY(1.06); }
}

.junk { transform-origin: 300px 112px; animation: eat 0.62s cubic-bezier(.55,-0.2,.85,.4) both; }
@keyframes eat {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: scale(0.03) rotate(115deg); opacity: 0; }
}
.j1 { animation-delay: 1.22s; }
.j2 { animation-delay: 1.40s; }
.j3 { animation-delay: 1.58s; }
.j4 { animation-delay: 1.76s; }

.sparkle { transform-origin: center; opacity: 0; animation: pop 0.75s ease-out both; }
@keyframes pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-25deg); }
  45%  { opacity: 1; transform: scale(1.15) rotate(8deg); }
  100% { opacity: 0.95; transform: scale(1) rotate(0deg); }
}
.s1 { animation-delay: 2.62s; }
.s2 { animation-delay: 2.76s; }
.s3 { animation-delay: 2.90s; }

.dust { opacity: 0; transform-origin: 300px 300px; animation: puff 0.5s ease-out 2.52s both; }
@keyframes puff {
  0%   { opacity: 0; transform: scale(0.3); }
  40%  { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.nav-mark { transform-origin: center; animation: mark-pop 0.6s ease-out 3.15s both; }
@keyframes mark-pop {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.18) rotate(-6deg); }
}

/* The name lands after the bin does. Slight overshoot so it arrives with
   some weight instead of just fading up. */
.wordmark { transform-box: view-box; transform-origin: 300px 118px;
            animation: brand-in 0.72s cubic-bezier(.18,.9,.3,1.25) 2.82s both; }
@keyframes brand-in {
  0%   { opacity: 0; transform: translateY(16px) scale(.82); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.wordmark rect { transform-box: view-box; transform-origin: 300px 139px;
                 animation: bar-in 0.44s ease-out 3.3s both; }
@keyframes bar-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- the bin that eats the quote button ----------
   Two versions of the same fly-by.

   .teasing runs by itself every few seconds while the button is on screen.
   The bin swoops through and the button squashes and springs back, but it
   never leaves: the CTA is the most valuable thing on the page and nothing
   that runs unprompted is allowed to take it away.

   .eating is the real one, on click. There the button does get swallowed,
   which is fine, because the form is opening in its place. */
.eat-stage { position: relative; display: inline-flex; }

.eat-stage.eating .btn-primary { animation: crunch 0.5s cubic-bezier(.5,-0.4,.7,.3) both; pointer-events: none; }
@keyframes crunch {
  0%   { transform: scale(1); opacity: 1; }
  35%  { transform: scale(1.06, 0.9); }
  100% { transform: scale(0.1, 0.18) translateX(26px); opacity: 0; }
}

.eat-stage.teasing .btn-primary { animation: crunch-tease 0.82s cubic-bezier(.4,.05,.5,1) both; }
@keyframes crunch-tease {
  0%   { transform: none; }
  30%  { transform: scale(1.05, 0.93); }
  46%  { transform: scale(0.74, 0.80) translateX(15px); }
  60%  { transform: scale(0.82, 0.86) translateX(27px); }
  76%  { transform: scale(1.06, 0.96) translateX(-3px); }
  100% { transform: none; }
}

/* Lives in the page the whole time at opacity 0; the keyframes are the only
   thing that ever makes it visible, so it can be replayed by restarting the
   animation instead of being added and removed from the DOM. */
.swooper {
  position: absolute; left: 0; top: 50%; width: 62px; height: 62px; margin-top: -31px;
  pointer-events: none; opacity: 0; animation: none;
}
.eat-stage.eating  .swooper { animation: swoop 0.52s ease-in both; }
.eat-stage.teasing .swooper { animation: swoop 0.82s cubic-bezier(.4,.05,.5,1) both; }
@keyframes swoop {
  0%   { transform: translate(-150px, -34px) rotate(-16deg); opacity: 0; }
  25%  { opacity: 1; }
  60%  { transform: translate(60px, 0) rotate(5deg); opacity: 1; }
  100% { transform: translate(230px, -16px) rotate(-8deg); opacity: 0; }
}

/* The idle fly-by is decoration, so it is the first thing to go. The click
   animation is handled in JS, which falls straight through to the form. */
@media (prefers-reduced-motion: reduce) {
  .eat-stage.teasing .btn-primary,
  .eat-stage.teasing .swooper { animation: none; }
}

/* ---------- seasonal logo ----------
   Every hat ships on every page, hidden. The Worker puts data-season on <html>
   at request time and one rule below reveals the matching one, so the logo
   changes by itself with no rebuild. No attribute means no hat, which is the
   right thing to fall back to. */
.hh-season { display: none; }

[data-season="christmas"]    .hh-s-christmas,
[data-season="halloween"]    .hh-s-halloween,
[data-season="thanksgiving"] .hh-s-thanksgiving,
[data-season="newyear"]      .hh-s-newyear,
[data-season="stpatricks"]   .hh-s-stpatricks,
[data-season="july4"]        .hh-s-july4 { display: inline; }

/* Hats that cover the top of the bin hide the handle, or it pokes through the
   brim as two black spurs. The pumpkin and the leaves sit around it, so those
   two keep it. */
[data-season="christmas"]  .hh-handle,
[data-season="newyear"]    .hh-handle,
[data-season="stpatricks"] .hh-handle,
[data-season="july4"]      .hh-handle { display: none; }

/* The cape changes with the hat. Two rules per season, nothing per element. */
[data-season="christmas"]    .hh-cape { fill: #2E7D4F; }
[data-season="christmas"]    .hh-cape-fold { fill: #1F5C39; }
[data-season="halloween"]    .hh-cape { fill: #E8761A; }
[data-season="halloween"]    .hh-cape-fold { fill: #B8560F; }
[data-season="thanksgiving"] .hh-cape { fill: #B45309; }
[data-season="thanksgiving"] .hh-cape-fold { fill: #8A3D06; }
[data-season="newyear"]      .hh-cape { fill: #F2B705; }
[data-season="newyear"]      .hh-cape-fold { fill: #C28F03; }
[data-season="stpatricks"]   .hh-cape { fill: #2FA85E; }
[data-season="stpatricks"]   .hh-cape-fold { fill: #1F7A43; }
[data-season="july4"]        .hh-cape { fill: #1D3F8F; }
[data-season="july4"]        .hh-cape-fold { fill: #152E69; }

/* ---------- trust strip ---------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-block: 34px; }
.trust-item { display: flex; gap: 13px; align-items: flex-start; }
.trust-item h3 { font-size: 18px; font-weight: 800; }
.trust-item p { font-size: 15px; color: var(--ink-soft); line-height: 1.45; margin-top: 3px; }
.trust-item svg { flex: 0 0 auto; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 42px; }
.step { background: #fff; border: 2px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.step-n { font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: 40px; color: var(--red); line-height: 1; }
.step h3 { font-size: 22px; margin-top: 12px; }
.step p { margin-top: 9px; color: var(--ink-soft); font-size: 17px; }

/* ---------- pricing ---------- */
.price-wrap { margin-top: 38px; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: #fff; }
table.price { width: 100%; border-collapse: collapse; }
table.price caption { text-align: left; padding: 20px 24px 4px; font-weight: 800; font-size: 17px; }
table.price th, table.price td { text-align: left; padding: 16px 24px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 400; }
table.price thead th { border-top: 0; background: var(--ink); color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
table.price thead th:last-child { text-align: right; }
table.price tbody th { font-weight: 700; }
table.price td.amt { text-align: right; font-weight: 900; font-size: 21px; white-space: nowrap; }
table.price tbody tr:nth-child(odd) th, table.price tbody tr:nth-child(odd) td { background: #FAFAF8; }
.price-note { margin-top: 20px; font-size: 16px; color: var(--ink-soft); display: flex; gap: 11px; align-items: flex-start; max-width: 46rem; }
.price-note svg { flex: 0 0 auto; margin-top: 3px; }

/* ---------- cards / lists ---------- */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.card { border-radius: var(--radius); padding: 30px 28px; border: 2px solid var(--line); background: #fff; }
.card.no { background: #FFF6F6; border-color: #F3D2D5; }
.card h3 { font-size: 23px; display: flex; align-items: center; gap: 11px; }
.card h3 svg { flex: 0 0 auto; }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 17px; }
.ticks li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--red); margin-top: 9px; }
.card.no .ticks li::before { background: #C99; }
.card-note { margin-top: 20px; font-size: 16px; color: var(--ink-soft); }

/* ---------- service / city grids ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 38px; }
.tile {
  display: block; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; text-decoration: none; color: var(--ink); background: #fff;
}
.tile:hover { border-color: var(--ink); color: var(--ink); }
.tile h3 { font-size: 20px; }
.tile p { margin-top: 7px; font-size: 16px; color: var(--ink-soft); }
.tile .go { margin-top: 13px; font-size: 16px; font-weight: 800; color: var(--red-text); }

.chips { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.chip {
  background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 11px 21px;
  font-weight: 700; font-size: 17px; text-decoration: none; color: var(--ink);
  min-height: 48px; display: inline-flex; align-items: center;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- about ---------- */
.about-grid { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; margin-top: 10px; }
.about-copy { flex: 999 1 420px; min-width: 0; }
.about-badge {
  flex: 1 1 290px; min-width: 0; border-radius: var(--radius); padding: 36px 28px;
  background: var(--ink); color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.about-badge svg { margin-bottom: 10px; }

/* The bin is #141414 and so is this panel, so on a dark ground the mark has to
   invert or it disappears and leaves a floating cape. Body goes white, slots
   are punched back to the panel colour. */
.about-badge .hh-body { fill: #fff; }
.about-badge .hh-handle { stroke: #fff; }
.about-badge .hh-slot { fill: var(--ink); }
.badge-names {
  font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: 32px;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1;
}
.badge-rule { display: block; width: 68px; height: 5px; border-radius: 3px; background: var(--red); margin: 14px 0 12px; }
.badge-sub { font-size: 15px; color: #B9B9B4; max-width: 22ch; }

/* ---------- FAQ ---------- */
.faq { margin-top: 36px; max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 40px 20px 0; font-weight: 800; font-size: 19px;
  list-style: none; position: relative; min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 3px solid var(--red); border-bottom: 3px solid var(--red);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .a { padding: 0 0 22px; color: var(--ink-soft); font-size: 17px; }
.faq .a p + p { margin-top: 12px; }

/* ---------- breadcrumbs ---------- */
.crumbs { padding-block: 18px 0; font-size: 15px; color: var(--ink-faint); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li::after { content: "›"; margin-left: 8px; color: var(--line); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--ink-faint); }

/* ---------- forms ---------- */
.form-card { background: #fff; border: 2px solid var(--ink); border-radius: 22px; padding: 34px 30px; margin-top: 36px; max-width: 760px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 800; font-size: 16px; }
.field .hint { font-weight: 400; color: var(--ink-soft); font-size: 14px; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 18px; padding: 14px 15px; border: 2px solid var(--line);
  border-radius: 12px; min-height: 54px; background: #fff; color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--ink); }
.field textarea { min-height: 112px; resize: vertical; }
.drop { border: 2px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center; background: #FAFAF8; }
.drop p { font-size: 15px; color: var(--ink-soft); margin-top: 7px; }
.consent { display: flex; gap: 13px; align-items: flex-start; margin-top: 22px; }
.consent input { width: 26px; height: 26px; min-height: 26px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--red); }
.consent label { font-size: 14px; line-height: 1.5; color: var(--ink-soft); font-weight: 400; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: 18px; padding: 15px 17px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.form-msg.err { background: #FFF1F1; color: #8E0D16; border: 2px solid #F3D2D5; }
.form-msg.ok { background: #F0F8F2; color: #156B35; border: 2px solid #CBE6D4; }
.cf-turnstile { margin-top: 20px; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #DADAD6; padding-block: 48px 36px; }
.foot a { color: #fff; }
.foot a:hover { color: #FFD7DB; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; }
.foot h4 { color: #fff; font-size: 16px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.07em; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 16px; }
.legal { border-top: 1px solid #333; margin-top: 36px; padding-top: 22px; font-size: 14px; color: #9C9C98; }

/* ---------- call bar (mobile only) ---------- */
.callbar { display: none; }

/* ---------- cookie banner ---------- */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 2px solid var(--ink); padding: 16px 0; box-shadow: 0 -6px 24px rgba(0,0,0,.09); }
.cookie[hidden] { display: none; }
.cookie-in { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.cookie p { font-size: 15px; color: var(--ink-soft); max-width: 52ch; }
.cookie .btns { display: flex; gap: 11px; flex-wrap: wrap; }

/* ---------- prose (privacy, terms) ---------- */
.prose { max-width: 44rem; }
.prose h2 { font-size: 27px; margin-top: 42px; }
.prose h3 { font-size: 20px; margin-top: 28px; }
.prose p, .prose li { color: var(--ink-soft); font-size: 17px; }
.prose p { margin-top: 14px; }
.prose ul { margin-top: 14px; padding-left: 22px; display: grid; gap: 9px; }
.prose .updated { font-size: 15px; color: var(--ink-faint); margin-top: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .cols2 { grid-template-columns: 1fr; }
  .nav-links { width: 100%; order: 3; gap: 4px 18px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .trust { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .sec { padding-block: 52px; }
  .hero { padding-block: 32px 40px; }
  .nav-in { justify-content: space-between; }
  .btn { width: 100%; }
  .eat-stage { display: flex; width: 100%; }
  .form-card { padding: 26px 20px; }

  /* A thumb-reachable call button. Junk removal is a phone business. */
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--red); box-shadow: 0 -4px 18px rgba(0,0,0,.18);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 60px; color: #fff; text-decoration: none; font-weight: 900; font-size: 20px;
  }
  body { padding-bottom: 60px; }
  .cookie { bottom: 60px; }
}

/* ---------- reduced motion: render the final frame, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .junk { opacity: 0; }
  .sparkle { opacity: .95; }
  .dust { opacity: 0; }
}