/* Spring Junk Removal Pros - stylesheet
   Static file: no web fonts, no framework, nothing to build.

   Palette: cobalt chrome, a brighter cobalt for actions, a small aqua beacon.
     --dolly        #153a80  chrome: header, hero base, closing band, call bar
     --skid         #4f7fd0  mid: rules, stop markers, tints (never behind text)
     --ratchet      #1f55b3  accent: buttons, labels, body links
     --ratchet-deep #18428b  accent hover; footer ground
     --aquaflag       #7ee8fa  highlight, small areas only, dark ink on it

   Contrast, computed (WCAG 2.x; small text 4.5:1, brand span 3:1):
     white on --dolly ................. 10.78
     white on --ratchet (buttons) ...... 6.98
     white on --ratchet-deep ........... 9.58
     nav link #d3e0f7 on --dolly ....... 8.09
     hero lead #dde7f8 on --dolly ...... 8.65
     subnote / band #c0d3f2 on --dolly . 7.10
     subnote #c0d3f2 on --ratchet ...... 4.60 (gradient end, worst case)
     brand span --aquaflag on --dolly .... 7.60
     footer text #b6c9ec on deep ....... 5.73
     footer links #d8e3f7 on deep ...... 7.42
     --dolly (h2, h3) on --vale-base-c .......... 10.05
     --ratchet (labels, links) on --vale-base-c . 6.51
     --ratchet (links) on white ........ 6.98
     --myrtle-faint on --vale-base-c / white ........... 6.68 / 7.16
     --rust-type on --aquaflag ................. 12.66
     success --dolly on #e4ecf9 ........ 9.06
     error #b3261e on #fdecea .......... 5.72
     stop chip --ratchet on #e4ecf9 .... 5.87
   White measures 3.98 on --skid, so the hero gradient ends on --ratchet
   and --skid never sits behind text. */

:root {
  --dolly: #153a80;
  --skid: #4f7fd0;
  --ratchet: #1f55b3;
  --ratchet-deep: #18428b;
  --aquaflag: #7ee8fa;
  --vale-base-c: #f6f7f9;
  --tarp: #ffffff;
  --rust-type: #121721;
  --myrtle-faint: #4f5869;
  --crane-rule: #d6deeb;
  --cobalt-mist: #e4ecf9;
  --node-round: 5px;
  --indigo-reach-c: 1120px;
  /* RGB channels of --dolly, for the photo scrim. */
  --bramble-film: 21, 58, 128;
  /* Fixed call bar: 10px padding top and bottom, a 0.95rem line inside
     12px link padding, plus slack. Measured, then set. */
  --level-batten-h: 71px;
}
@media (min-width: 721px) { :root { --level-batten-h: 72px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--rust-type);
  background: var(--vale-base-c);
  line-height: 1.62;
  padding-bottom: var(--level-batten-h);
}
img { max-width: 100%; display: block; }
a { color: var(--ratchet); text-underline-offset: 3px; }
a:hover { color: var(--ratchet-deep); }
.ruby-shell { max-width: var(--indigo-reach-c); margin: 0 auto; padding: 0 18px; }
h1, h2, h3 { line-height: 1.22; letter-spacing: -0.005em; }
h2 { font-size: 1.6rem; margin: 0 0 16px; color: var(--dolly); }
h3 { font-size: 1.1rem; margin: 0 0 6px; color: var(--dolly); }

/* ---------- Header ---------- */
header.beam-headrail { background: var(--dolly); color: var(--tarp); position: sticky; top: 0; z-index: 50; border-bottom: 3px solid var(--ratchet); }
header.beam-headrail .tide-bar {
  max-width: var(--indigo-reach-c); margin: 0 auto; padding: 11px 18px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
}
header.beam-headrail .rust-insignia { display: inline-flex; align-items: center; gap: 9px; color: var(--tarp); font-weight: 800; font-size: 1.1rem; text-decoration: none; }
header.beam-headrail .rust-insignia span { color: var(--aquaflag); }
.bell-glyph-logo { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: block; }
header.beam-headrail nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
header.beam-headrail nav a { color: #d3e0f7; font-size: 0.92rem; text-decoration: none; }
header.beam-headrail nav a:hover { color: var(--tarp); text-decoration: underline; }
header.beam-headrail .poppy-speak {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--ratchet); color: var(--tarp); padding: 8px 15px;
  border-radius: var(--node-round); font-weight: 700; text-decoration: none;
}
header.beam-headrail .poppy-speak:hover { background: var(--ratchet-deep); color: var(--tarp); }
@media (max-width: 820px) { header.beam-headrail .tide-bar { justify-content: center; text-align: center; } }
@media (min-width: 821px) and (max-width: 1060px) {
  header.beam-headrail nav { order: 3; flex: 1 0 100%; justify-content: center; }
}

/* ---------- Hero ---------- */
.khaki-prologue {
  background: linear-gradient(160deg, var(--dolly) 0%, var(--dolly) 55%, var(--ratchet) 100%);
  color: var(--tarp); padding: 50px 18px 44px;
}
.khaki-prologue .ruby-shell { display: flex; flex-direction: column; gap: 14px; padding: 0; }
.khaki-prologue .tempo-strapline {
  display: inline-block; width: fit-content; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--rust-type);
  background: var(--aquaflag); padding: 3px 10px; border-radius: 3px;
}
.khaki-prologue h1 { font-size: 2.1rem; margin: 0; max-width: 780px; }
.khaki-prologue .even-lede-copy { font-size: 1.08rem; color: #dde7f8; max-width: 640px; margin: 0; }
.khaki-prologue .neat-codicil { font-size: 0.9rem; color: #c0d3f2; margin: 0; max-width: 640px; }
.scout-call-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.khaki-prologue.hollow-scenic {
  background-image:
    linear-gradient(90deg, rgba(var(--bramble-film), 0.92) 0%, rgba(var(--bramble-film), 0.78) 42%, rgba(var(--bramble-film), 0.30) 72%, rgba(var(--bramble-film), 0.06) 100%),
    url('/images/hero-junk-photo.jpg');
  background-size: cover; background-position: center;
  min-height: 520px; display: flex; align-items: center;
}
@media (max-width: 820px) {
  .khaki-prologue.hollow-scenic {
    background-image:
      linear-gradient(180deg, rgba(var(--bramble-film), 0.90) 0%, rgba(var(--bramble-film), 0.82) 60%, rgba(var(--bramble-film), 0.70) 100%),
      url('/images/hero-junk-photo-mobile.jpg');
    min-height: 440px;
  }
  .khaki-prologue h1 { font-size: 1.68rem; }
}

/* ---------- Buttons ---------- */
.copper-button-el { display: inline-block; padding: 12px 20px; border-radius: var(--node-round); font-weight: 700; font-size: 1rem; text-decoration: none; }
.copper-button-el.opal-solid { background: var(--ratchet); color: var(--tarp); }
.copper-button-el.opal-solid:hover { background: var(--ratchet-deep); color: var(--tarp); }
.copper-button-el.subtle-shell-btn { background: transparent; color: var(--tarp); border: 1px solid rgba(255,255,255,0.55); }
.copper-button-el.subtle-shell-btn:hover { background: rgba(255,255,255,0.12); color: var(--tarp); }

/* ---------- Sections ---------- */
section { padding: 44px 18px; }
section.prairie-secondary-band { background: var(--tarp); border-top: 1px solid var(--crane-rule); border-bottom: 1px solid var(--crane-rule); }
section .ruby-shell { padding: 0; }
.mesa-band-name { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ratchet); margin-bottom: 4px; }
.walk-copy { max-width: 760px; }
.walk-copy p { margin: 0 0 14px; }
.walk-copy ul, .walk-copy ol { margin: 0 0 14px; padding-left: 22px; }
.walk-copy li { margin-bottom: 6px; }

/* ---------- The five stops (homepage) ---------- */
.stops { list-style: none; margin: 0; padding: 0; counter-reset: stop; }
.stop {
  display: grid; grid-template-columns: 64px 1fr; gap: 4px 18px;
  padding: 22px 0; border-top: 1px solid var(--crane-rule);
}
.stop:last-child { border-bottom: 1px solid var(--crane-rule); }
.stop-mark {
  grid-row: span 3; width: 52px; height: 52px; border-radius: 50%;
  background: var(--cobalt-mist); color: var(--ratchet); border: 2px solid var(--skid);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem;
}
.stop h3 { margin: 0; font-size: 1.2rem; }
.stop p { margin: 0; color: var(--myrtle-faint); max-width: 720px; }
.stop .stop-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.95rem; margin-top: 4px; }
@media (max-width: 560px) { .stop { grid-template-columns: 1fr; } .stop-mark { grid-row: auto; width: 42px; height: 42px; font-size: 1.05rem; } }

/* ---------- Cards and grids ---------- */
.nimble-weave { display: grid; gap: 16px; }
.nimble-weave.wood-doubleton { grid-template-columns: repeat(2, 1fr); }
.nimble-weave.oak-third { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .nimble-weave.wood-doubleton, .nimble-weave.oak-third { grid-template-columns: 1fr; } }
.cove-box { background: var(--tarp); border: 1px solid var(--crane-rule); border-left: 4px solid var(--skid); border-radius: var(--node-round); padding: 18px 20px; }
section.prairie-secondary-band .cove-box { background: var(--vale-base-c); }
.cove-box p { margin: 6px 0 0; color: var(--myrtle-faint); font-size: 0.96rem; }
.cove-box .onward { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 0.94rem; }

/* ---------- Checked facts and scope lines ---------- */
.checked-note { background: var(--tarp); border: 1px solid var(--crane-rule); border-top: 3px solid var(--ratchet); border-radius: var(--node-round); padding: 16px 20px; max-width: 760px; margin: 0 0 16px; }
section.prairie-secondary-band .checked-note { background: var(--vale-base-c); }
.checked-note p { margin: 0 0 10px; }
.checked-note p:last-child { margin-bottom: 0; }
.checked-note .fact-source { font-size: 0.84rem; color: var(--myrtle-faint); }
.boundary-note { border-left: 4px solid var(--aquaflag); background: var(--cobalt-mist); padding: 14px 18px; border-radius: 0 var(--node-round) var(--node-round) 0; max-width: 760px; margin: 0 0 16px; }
.boundary-note h3 { margin-bottom: 4px; }
.boundary-note p { margin: 0 0 8px; }
.boundary-note p:last-child { margin: 0; }

/* ---------- Before / after storm note ---------- */
.storm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--crane-rule); border-radius: var(--node-round); overflow: hidden; }
.storm-split > div { padding: 20px 22px; background: var(--tarp); }
.storm-split > div + div { border-left: 1px solid var(--crane-rule); background: var(--cobalt-mist); }
.storm-split p { margin: 0 0 10px; }
@media (max-width: 720px) { .storm-split { grid-template-columns: 1fr; } .storm-split > div + div { border-left: 0; border-top: 1px solid var(--crane-rule); } }

/* ---------- Steps ---------- */
.quiet-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.verse-step-card { display: flex; gap: 14px; background: var(--tarp); border: 1px solid var(--crane-rule); border-radius: var(--node-round); padding: 16px 18px; }
section.prairie-secondary-band .verse-step-card { background: var(--vale-base-c); }
.hinge-rung-index { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cobalt-mist); color: var(--ratchet); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.verse-step-card p { margin: 0; color: var(--myrtle-faint); font-size: 0.95rem; }
@media (max-width: 720px) { .quiet-ladder { grid-template-columns: 1fr; } }

/* ---------- Tables ---------- */
.plain-wide-scroll { overflow-x: auto; max-width: 100%; margin: 0 0 16px; }
table.compare { border-collapse: collapse; width: 100%; min-width: 520px; background: var(--tarp); font-size: 0.95rem; }
table.compare th, table.compare td { border: 1px solid var(--crane-rule); padding: 10px 12px; text-align: left; vertical-align: top; }
table.compare th { background: var(--cobalt-mist); color: var(--dolly); }

/* ---------- FAQ ---------- */
.rivet-queried { border-bottom: 1px solid var(--crane-rule); padding: 13px 0; max-width: 820px; }
.rivet-queried summary { cursor: pointer; font-weight: 700; color: var(--dolly); font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.rivet-queried summary::-webkit-details-marker { display: none; }
.rivet-queried summary::after { content: "+"; color: var(--ratchet); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.rivet-queried[open] summary::after { content: "\2212"; }
.rivet-queried p { margin: 8px 0 0; color: var(--myrtle-faint); }
ol.query-list { margin: 0; padding-left: 26px; max-width: 820px; }
ol.query-list li { margin: 0 0 18px; padding-left: 4px; }
ol.query-list li::marker { color: var(--ratchet); font-weight: 800; }
ol.query-list h3 { margin: 0 0 4px; }
ol.query-list p { margin: 0; color: var(--myrtle-faint); }

/* ---------- Photos ---------- */
.quartz-jobshot { max-width: var(--indigo-reach-c); margin: 0 auto; padding: 30px 18px; }
.quartz-jobshot img { width: 100%; max-width: 800px; height: auto; margin: 0 auto; border-radius: var(--node-round); border: 1px solid var(--crane-rule); }
.sigma-photo-row .marble-minis { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sigma-photo-row .marble-minis img {
  width: calc((100% - 50px) / 6); height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--node-round); border: 1px solid var(--crane-rule); background: var(--tarp);
}
@media (max-width: 900px) { .sigma-photo-row .marble-minis img { width: calc((100% - 20px) / 3); } }
@media (max-width: 520px) { .sigma-photo-row .marble-minis img { width: calc((100% - 10px) / 2); } }

/* ---------- Area links ---------- */
.knoll-coverage { display: flex; flex-wrap: wrap; gap: 8px; }
.knoll-coverage a { background: var(--tarp); border: 1px solid var(--crane-rule); border-radius: 3px; padding: 8px 13px; font-size: 0.93rem; color: var(--dolly); text-decoration: none; }
.knoll-coverage a:hover { border-color: var(--ratchet); color: var(--ratchet); }

/* ---------- Closing band ---------- */
.fore-signoff { background: var(--dolly); color: var(--tarp); text-align: center; padding: 42px 18px; }
.fore-signoff h2 { color: var(--tarp); }
.fore-signoff p { color: #c0d3f2; max-width: 640px; margin: 0 auto 18px; }
.fore-signoff .copper-button-el { margin: 4px; }

/* ---------- Form ---------- */
form.oak-request-form { display: grid; gap: 12px; max-width: 520px; }
form.oak-request-form label { display: block; font-size: 0.88rem; font-weight: 700; color: var(--dolly); margin-bottom: 3px; }
form.oak-request-form input, form.oak-request-form select, form.oak-request-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #b9c6da; border-radius: var(--node-round);
  font: inherit; font-size: 0.96rem; background: var(--tarp); color: var(--rust-type);
}
form.oak-request-form input:focus, form.oak-request-form select:focus, form.oak-request-form textarea:focus { outline: 2px solid var(--ratchet); outline-offset: 1px; }
form.oak-request-form .sextant-caveat { font-size: 0.8rem; color: var(--myrtle-faint); margin: 0; }
form.oak-request-form .orbit-ref-code { position: absolute; left: -9999px; top: -9999px; }
form.oak-request-form button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
form.oak-request-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
.fern-confirm-line { display: none; margin-top: 10px; padding: 11px 14px; border-radius: var(--node-round); font-size: 0.92rem; }
.fern-confirm-line.visible { display: block; }
.fern-confirm-line.success { background: var(--cobalt-mist); color: var(--dolly); }
.fern-confirm-line.error { background: #fdecea; color: #b3261e; }

/* ---------- Breadcrumb ---------- */
.copper-crumb { max-width: var(--indigo-reach-c); margin: 0 auto; padding: 12px 18px 0; font-size: 0.85rem; color: var(--myrtle-faint); }
.copper-crumb a { color: var(--myrtle-faint); }

/* ---------- Footer ---------- */
footer.beam-headrail { background: var(--ratchet-deep); color: #b6c9ec; padding: 38px 18px 22px; font-size: 0.9rem; }
footer.beam-headrail .ruby-shell { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding: 0; }
footer.beam-headrail h2 { color: var(--tarp); font-size: 0.95rem; margin: 0 0 8px; }
footer.beam-headrail p { margin: 0; }
footer.beam-headrail ul { list-style: none; margin: 0; padding: 0; }
footer.beam-headrail li { margin-bottom: 5px; }
footer.beam-headrail a { color: #d8e3f7; text-decoration: none; }
footer.beam-headrail a:hover { text-decoration: underline; }
footer.beam-headrail .high-base-row {
  max-width: var(--indigo-reach-c); margin: 22px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.8rem;
}
@media (max-width: 720px) { footer.beam-headrail .ruby-shell { grid-template-columns: 1fr 1fr; } }

/* ---------- Fixed call bar ---------- */
.keen-moorbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; justify-content: center;
  background: var(--dolly); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.18);
}
.keen-moorbar-inner { display: flex; gap: 10px; width: 100%; max-width: var(--indigo-reach-c); margin: 0 auto; }
.keen-moorbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  padding: 12px 10px; border-radius: var(--node-round); font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.keen-moorbar .vivid-dial-mark { flex: none; }
.keen-moorbar-call { flex: 3; background: var(--ratchet); color: var(--tarp); }
.keen-moorbar-call:hover { background: var(--ratchet-deep); color: var(--tarp); }
.keen-moorbar-quote { flex: 2; color: var(--tarp); border: 1px solid rgba(255,255,255,0.45); }
.keen-moorbar-quote:hover { background: rgba(255,255,255,0.12); color: var(--tarp); }
.keen-moorbar .whistle-endorsement-line { display: none; }
@media (min-width: 600px) { .keen-moorbar .whistle-endorsement-line { display: inline; } }
@media (min-width: 721px) {
  .keen-moorbar-inner { justify-content: center; }
  .keen-moorbar a { flex: 0 0 auto; padding: 12px 22px; font-size: 1rem; }
}

/* ---------- Shared partial (reviews stay off until real ones exist) ---------- */
.outer-hearsay .valley-account p { color: var(--rust-type); }
.stencil-grade-marks { color: var(--ratchet); letter-spacing: 2px; }
.oak-said-by { font-weight: 700; color: var(--dolly); }
.marsh-pending-value { background: #fff3cd; color: #6b4f00; padding: 1px 5px; border-radius: 3px; font-size: 0.85em; }