/* ==========================================================================
   /junk-removal  ·  page CSS (page-prefixed .jr-*; tokens only)
   Sections: hero · how · item list + picker · request form · fees · diversion · faq
   ========================================================================== */

/* Icon sprite for this page (symbols only, never rendered) */
.jr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Without JS the steppers and "tap Add" copy make no sense: hide them, the list still reads as a price list. */
html:not(.js) .jr-js-only,
html:not(.js) .jr-step,
html:not(.js) .jr-quote,
html:not(.js) .jr-picked { display: none; }

/* ---- Hero ---------------------------------------------------------------- */
/* Crew photo on the right with the three key facts pinned across its foot. */
@media (min-width: 960px) {
  .jr-hero .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; }
}
.jr-hero__visual { position: relative; display: grid; min-width: 0; }
.jr-hero__photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--c-ink-800); box-shadow: var(--sh-3); }
.jr-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.jr-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 11 12 / .55) 0%, rgb(11 11 12 / 0) 34%); pointer-events: none; }
.jr-hero__tag {
  position: absolute; z-index: 1; top: var(--sp-4); left: var(--sp-4); right: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3); width: fit-content; max-width: calc(100% - 2rem);
  padding: .6rem var(--sp-4) .6rem .6rem; background: var(--c-black); color: #EDEBE6; border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.35; box-shadow: var(--sh-2);
}
.jr-hero__tag .icon { flex: none; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: var(--r-xs); background: var(--c-yellow); color: var(--c-black); }
.jr-hero__tag strong { color: var(--c-white); font-weight: 750; }

/* Fact card, compact: three facts side by side, overlapping the photo's foot */
.jr-hero .jr-facts { position: relative; z-index: 2; margin: -2.25rem var(--sp-4) 0; padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.jr-facts .fact-card__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jr-facts ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.jr-facts li { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: .35rem; padding: var(--sp-2) var(--sp-4) var(--sp-3); border-bottom: 0; border-left: 1px solid #2E2E33; }
.jr-facts li:first-child { border-left: 0; padding-left: 0; }
.jr-facts li > span { font-size: var(--fs-sm); line-height: 1.3; }
.jr-facts li > span small { margin-top: .15rem; font-size: .8125rem; line-height: 1.4; color: #B9B7B1; }
.jr-facts li > strong { font-size: var(--fs-xl); }
.jr-facts li > strong small { font-size: .55em; letter-spacing: .06em; text-transform: uppercase; margin-right: .2em; color: #B9B7B1; }
.jr-facts .link-arrow { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid #2E2E33; width: 100%; }

@media (max-width: 959px) {
  /* Phones/tablets: photo first (real people, above the fold), then the pitch, the facts and the proof. */
  .jr-hero__visual { display: contents; }
  .jr-hero__photo { order: -1; aspect-ratio: 16 / 9; max-height: 22rem; }
  .jr-hero .hero__grid > .breadcrumbs { order: -2; }
  .jr-hero .jr-facts { order: 2; margin: 0; }
}
@media (max-width: 599px) {
  .jr-hero .hero__grid { gap: var(--sp-5); }
  .jr-hero__photo { aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--gutter, 1rem)); border-radius: 0; box-shadow: none; }
  .jr-hero__tag { top: auto; bottom: var(--sp-3); left: var(--sp-3); font-size: var(--fs-xs); padding: .45rem var(--sp-3) .45rem .45rem; }
  .jr-hero__tag .icon { width: 1.9rem; height: 1.9rem; padding: .35rem; }
  .jr-hero__photo::after { background: linear-gradient(0deg, rgb(11 11 12 / .5) 0%, rgb(11 11 12 / 0) 40%); }
  .jr-hero .jr-facts { padding: var(--sp-3) var(--sp-4); }
  .jr-facts li { padding: var(--sp-2) var(--sp-3); }
  .jr-facts li > span { font-size: var(--fs-xs); }
  .jr-facts li > span small { display: none; }
  .jr-facts li > strong { font-size: var(--fs-lg); }
}

/* ---- Who it's for ------------------------------------------------------- */
.jr-who__grid { list-style: none; padding: 0; }
.jr-who__grid .card { display: grid; align-content: start; gap: var(--sp-2); }
.jr-who__grid .card .icon { color: var(--fg); margin-bottom: var(--sp-1); }
.jr-who__grid .card p { margin: 0; color: var(--text); }

/* ---- Load size guide ---------------------------------------------------- */
.jr-loads { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
@media (min-width: 1100px) { .jr-loads { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.jr-load { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r); border-top: 4px solid var(--c-black); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.jr-load:hover { box-shadow: var(--sh-2); }
.jr-load__vis { background: var(--c-concrete); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-2) 0; }
.jr-tr { display: block; width: 100%; height: auto; }
.jr-tr__body { fill: none; stroke: var(--c-black); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.jr-tr__fill { fill: var(--c-black); }
.jr-tr__seam { fill: none; stroke: var(--c-ink-600); stroke-width: 1.5; }
.jr-tr__lvl { stroke: var(--c-muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.jr-tr__hitch { fill: none; stroke: var(--c-black); stroke-width: 3; stroke-linecap: round; }
.jr-tr__cab { fill: var(--c-ink-800); }
.jr-tr__win { fill: var(--c-concrete); }
.jr-tr__wheel { fill: var(--c-black); stroke: var(--c-concrete); stroke-width: 3; }
.jr-load__frac { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-2) 0 0; flex-wrap: wrap; }
.jr-load__frac span { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); line-height: 1; color: var(--fg); }
.jr-load__frac small { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.jr-load__tag { margin: 0; font-weight: 700; color: var(--fg); line-height: 1.3; }
.jr-load__desc { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); flex: 1; }
.jr-load__pick { align-self: flex-start; margin-top: var(--sp-2); }
.jr-sizes__note { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-5); }
.jr-sizes__note .icon { flex: none; margin-top: .2em; }

/* ---- Accepted items ------------------------------------------------------ */
.jr-items__grid { list-style: none; padding: 0; margin: 0 0 var(--sp-7); display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.jr-items__grid li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-height: 3.5rem; background: var(--c-paper); border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 600; color: var(--fg); line-height: 1.3; }
.jr-ico { flex: none; width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jr-limits { display: grid; gap: var(--sp-4); }
@media (min-width: 800px) { .jr-limits { grid-template-columns: 1fr 1fr; } }
.jr-limits__card { display: grid; align-content: start; gap: var(--sp-3); }
.jr-limits__card > * { margin: 0; }

/* ---- How it works (dark) ------------------------------------------------- */
.jr-how .steps { margin-top: var(--sp-6); }

/* ---- Fast + donation ----------------------------------------------------- */
.jr-extra { display: grid; align-content: start; gap: var(--sp-3); }
.jr-extra > * { margin: 0; }
.jr-extra .media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Pricing explained --------------------------------------------------- */
.jr-pricing__grid { list-style: none; padding: 0; }
.jr-pricing__grid .card { display: grid; align-content: start; gap: var(--sp-3); }
.jr-pricing__grid .card > * { margin: 0; }

/* ---- Request form -------------------------------------------------------- */
.jr-request__grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 960px) { .jr-request__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-8, 4rem); } .jr-request__intro { position: sticky; top: calc(var(--header-h) + var(--sp-5)); } }
.jr-request__intro > * + * { margin-top: var(--sp-4); }
.jr-request__panel { background: var(--c-white); border: 1px solid var(--line); border-top: 5px solid var(--c-yellow); border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--sh-2); }
@media (min-width: 600px) { .jr-request__panel { padding: var(--sp-6); } }
.jr-form { display: grid; gap: var(--sp-4); }
.jr-form__submit { display: grid; gap: var(--sp-2); }
.jr-form__submit .fine { margin: 0; text-align: center; }
.jr-success { display: grid; justify-items: start; gap: var(--sp-3); padding: var(--sp-4) 0; }
.jr-success[hidden] { display: none; }
.jr-success > * { margin: 0; }
.jr-success:focus { outline: none; }

/* ---- Bins cross-link ----------------------------------------------------- */
.jr-bins .media img { width: 100%; height: 100%; object-fit: cover; }

.jr-limits__card.card--paper { border-top: 5px solid var(--c-black); }
.jr-facts li > strong { font-size: var(--fs-md); }