/* 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; }

/* Inline list of page links, used on the 404. Centred to match the column it
   sits in, and wraps to one per line on a phone. */
.plain-links { list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.plain-links a { font-weight: 700; }
.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; }

/* Two headshots side by side. They stay side by side all the way down —
   stacking them would push the copy a screen and a half away on a phone. */
.founders { display: flex; gap: 14px; width: 100%; justify-content: center; }
.founder { flex: 1 1 0; min-width: 0; margin: 0; }
.founder img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: 50% 18%;              /* keep faces in frame on the crop */
  border-radius: 14px; display: block; background: #2A2A2A;
}
.founder figcaption {
  font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: 23px;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  margin-top: 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; }

/* ---------- before and after ---------- */
/* Two per row, not three. Three across left each shot about 170px wide, which
   is too small to read the "before" at a glance — and being read at a glance
   is the only job these have. auto-fit keeps a lone third card the same width
   as the two above it instead of letting it stretch across the row. */
.ba-grid {
  display: grid;
  /* min() or the 380px floor wins on a narrow phone and the grid pushes the
     page sideways. Below 380 the column collapses to the full width instead. */
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 34px 28px; margin-top: 34px;
}
.ba { min-width: 0; margin: 0; }

/* Side by side always. A before stacked on top of its after is just two
   photos; next to each other it is the argument for hiring us. */
.ba-pair { display: flex; gap: 8px; }
.ba-shot { position: relative; flex: 1 1 0; min-width: 0; }
.ba-shot img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 14px; display: block; background: var(--band);
}
.ba-tag {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(20,20,20,.86); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.ba-tag.is-after { background: var(--red-deep); }
.ba figcaption { margin-top: 14px; font-size: 16px; color: var(--ink-soft); }

/* ---------- 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; }

/* Attached photos. The remove button sits on the corner of each thumbnail at
   34px, which is a thumb-sized target: this form gets filled in on a phone,
   standing in a garage, often by someone who is not looking closely. */
.shots { list-style: none; padding: 0; margin: 15px 0 0;
  display: flex; flex-wrap: wrap; gap: 14px; }
.shots li { position: relative; width: 94px; height: 94px; }
.shots img { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 13px; border: 2px solid var(--line); background: var(--band); }
.shot-x { position: absolute; top: -10px; right: -10px; width: 34px; height: 34px;
  padding: 0; border-radius: 50%; border: 2px solid var(--white);
  background: var(--ink); color: var(--white); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.shot-x:hover { background: var(--red-text); }
.shot-x:focus-visible { outline: 3px solid var(--red-text); outline-offset: 2px; }
.shots-msg { font-size: 15px; color: var(--ink-soft); margin-top: 11px; }
.shots-msg:empty { margin-top: 0; }
.shots-msg.warn { color: #8E0D16; font-weight: 700; }
.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; }

/* ---------- 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; }
}

/* ---------- 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; }
}