/* The home hero: the list becomes the load. A printed plant list beside the empty Arboras flatbed;
   scrolling checks each line off and sets its plants on the bed, B&B first, then the truck pulls
   away to the right. The markup is the finished frame (every line checked, the truck loaded),
   which is what reduced motion and no script show. load.js arms the sequence and pins the hero. */

#v3-load { padding-top: 0; }
.ld-pin { padding-block: clamp(1rem, 2.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem); overflow: hidden; overflow: clip; }
.ld-stage { display: grid; gap: 1.5rem; margin-top: clamp(1.75rem, 4vw, 3.25rem); }

/* ---------- the plant list, printed: rules, tabular figures, a box per line ---------- */
.ld-sheet { position: relative; }
.ld-list { --pad: .58rem; position: relative; width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ld-list caption { padding-bottom: .6rem; text-align: left; color: var(--ink-2); }
.ld-list caption b { font-weight: 600; color: var(--pine); }
.ld-list th { padding: 0 .4rem .4rem 0; border-bottom: 2px solid var(--pine); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--forest-2); }
.ld-list td { padding: var(--pad) .5rem var(--pad) 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.ld-list td:first-child { padding-right: .4rem; font-weight: 600; }
.ld-list td:first-child, .ld-list th:first-child { width: 1.9rem; }
.ld-list td:nth-child(3) { padding-right: .2rem; color: var(--ink-2); white-space: nowrap; }
.ld-list tfoot td { padding-block: .6rem 0; border: 0; font-weight: 600; }
.ld-list .ld-ck { position: relative; width: 30px; padding: 0; }
.ld-list thead .ld-ck { border-bottom: 2px solid var(--pine); }
tbody .ld-ck::before { content: ""; position: absolute; right: 8px; top: calc(var(--pad) + .65em); width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid var(--pine); border-radius: 2px; }
.ld-wipe { position: absolute; right: 0; top: calc(var(--pad) + .65em); width: 30px; height: 30px; margin-top: -17px; overflow: hidden; }
.ld-ink { display: block; width: 30px; height: 30px; color: var(--pine); }
.ld-bar { position: absolute; left: -.5rem; right: -.5rem; top: 0; height: 2.5rem; background: var(--sage-2); opacity: 0; pointer-events: none; }

/* ---------- the flatbed on its road; individual plant cutouts stand behind the original truck's rails ---------- */
.ld-load { position: relative; }
.ld-load::after { content: ""; position: absolute; left: -2rem; right: -100vw; bottom: 0; height: 2px; background: var(--pine); }
.ld-rig { position: relative; aspect-ratio: 1000 / 470; transform-origin: 50% 100%; }
.ld-defs { position: absolute; }
.ld-truck { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: 4; pointer-events: none; transform: scaleX(-1); }
.ld-pl { position: absolute; z-index: 2; transform-origin: 50% 100%; }
.ld-pl img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.ld-pl .ld-mirror { transform: scaleX(-1); }
/* The sign-off: once the truck pulls away, the tagline is left standing on the empty road. Only the
   scroll-driven hero shows it; the played hero, reduced motion and no script keep the loaded truck. */
.ld-sign { position: absolute; left: 0; bottom: .3em; z-index: 1; margin: 0; font-size: clamp(1.75rem, 1.2rem + 3vw, 3.25rem); font-weight: 650; line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: var(--pine); opacity: 0; pointer-events: none; }

@media (max-width: 389px) { .ld-list { font-size: .90625rem; } .ld-list td:nth-child(2) { padding-right: .4rem; } }
@media (min-width: 640px) {
  .ld-list { --pad: .68rem; font-size: 1rem; }
  .ld-list th { font-size: .75rem; letter-spacing: .1em; }
  .ld-list td, .ld-list td:first-child { padding-right: .75rem; }
  .ld-list td:first-child, .ld-list th:first-child { width: 2.75rem; }
  .ld-list td:nth-child(3) { padding-right: .5rem; }
  .ld-list .ld-ck { width: 34px; }
  tbody .ld-ck::before { right: 10px; }
  .ld-wipe { right: 2px; }
}
@media (min-width: 640px) and (max-width: 999px) { .ld-sheet { max-width: 36rem; } }
@media (min-width: 1000px) {
  /* The hero fills the first screen under the header: copy at the top, the list and the truck on the road at the bottom. */
  .ld-pin { display: flex; flex-direction: column; min-height: min(calc(100vh - 92px), 49rem); min-height: min(calc(100svh - 92px), 49rem); }
  .ld-stage { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); gap: clamp(2.5rem, 4.5vw, 4rem); align-items: end; margin-top: auto; padding-top: clamp(1.75rem, 3.5vw, 3rem); }
  .ld-list { --pad: .62rem; font-size: .9375rem; }
  .ld-sheet { padding-bottom: .25rem; }
  .ld-load { margin-right: calc(-1 * clamp(0px, (100vw - var(--max)) / 2 - 1.5rem, 3rem)); }
}
@media (min-width: 1200px) { .ld-stage { grid-template-columns: minmax(0, 4.8fr) minmax(0, 7.2fr); } .ld-list { --pad: .68rem; font-size: 1rem; } }
@media (min-width: 1340px) { .ld-stage { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); } .ld-list { font-size: 1.0625rem; } }

/* ---------- live: load.js draws every frame; until it runs, the armed page holds the empty truck ---------- */
.ld-armed:not(.ld-live) .ld-pl, .ld-armed:not(.ld-live) .ld-wipe { opacity: 0; }
.ld-frozen .hero-intro, .ld-frozen .hero-intro * { animation: none; }   /* ?progress= frames are stills: no arrival */
.ld-live .ld-pl, .ld-live .ld-rig { will-change: transform; }
.ld-run { display: none; }
.ld-scroll .ld-pin { position: sticky; top: var(--ld-top, 0px); }
.ld-scroll .ld-run { display: block; height: 140vh; height: 140svh; }
@media (max-width: 699px) { .ld-scroll .ld-run { height: 95vh; height: 95svh; } }