/* ---------- Stapel — spaza stock counts & wholesale ordering (WEBSITE) -------
   THE STRUCTURAL MOVE: an oversized step numeral — 01 through 05 — stamped in
   cardboard amber directly above the heading of every band below the hero,
   riding a strict full-bleed / contained alternation so no two numerals sit on
   the same ground: white four-across feature band, contained story, ink-black
   six-frame showcase, contained quotes, white closing band. Amber is spent on
   three things only — those numerals, the four metric bars ruled under the
   story, and the button fills. Everything else is ink on warm paper, with a
   hairline wherever a full-bleed band meets a contained one.
   Nothing here touches .sf-header / .ws-nav / .ws-nav-inner / .ws-brand or any
   item inside them — no order, no absolute positioning, no nth-of-type. */
body.t-stapel.ws-body {
  --bg: #f7f6f3; --fg: #4c4a44; --heading: #141414; --text: #4c4a44; --muted: #8a867d;
  --st-amber: #d98a1f; --st-line: #e3dfd8; --st-ink: #141414; --st-card: #ffffff;
  --hero-a: rgba(14, 12, 8, .34); --hero-b: rgba(14, 12, 8, .62);
}

/* the shared zebra wash off — the rhythm here is full-bleed against contained,
   marked by a hairline and a change of ground, never by a tint of the brand */
body.t-stapel.ws-body .ws-section:nth-child(even) { background: transparent; }
body.t-stapel.ws-body .ws-section { padding: 96px 0; }
body.t-stapel .ws-sub, body.t-stapel .ws-feature p, body.t-stapel .ws-story-copy p, body.t-stapel .ws-quote blockquote { color: var(--text); }

/* a whole screen of shop interior, three slides cross-fading, copy middled */
body.t-stapel .ws-hero { min-height: 100vh; }
body.t-stapel .ws-hero h1 { font-size: clamp(38px, 6.6vw, 82px); font-weight: 300; letter-spacing: -.032em; line-height: 1.02; max-width: 17ch; text-shadow: none; }

/* THE SIGNATURE — the step numeral above the heading. Only five bands set a
   `content`, so the metric list and the closing form carry no numeral at all */
body.t-stapel .ws-h2, body.t-stapel .ws-story-copy h2, body.t-stapel .ws-cta-inner h2 { color: var(--heading); font-weight: 600; letter-spacing: -.03em; }
body.t-stapel .ws-h2::before, body.t-stapel .ws-story-copy h2::before, body.t-stapel .ws-cta-inner h2::before { display: block; margin-bottom: 14px; color: var(--st-amber); font-size: clamp(44px, 6vw, 78px); font-weight: 700; line-height: .82; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
body.t-stapel .ws-features .ws-h2::before { content: '01'; }
body.t-stapel .ws-story-copy h2::before { content: '02'; }
body.t-stapel .ws-gallery .ws-h2::before { content: '03'; }
body.t-stapel .ws-testimonials .ws-h2::before { content: '04'; }
body.t-stapel .ws-cta-inner h2::before { content: '05'; }
body.t-stapel .ws-features .ws-h2, body.t-stapel .ws-gallery .ws-h2, body.t-stapel .ws-testimonials .ws-h2 { text-align: left; margin-bottom: 30px; }

/* amber as a fill and nothing else — flat slab, square, no border */
body.t-stapel.ws-body .btn.brand { background: var(--st-amber); color: #17120a; border-radius: 0; box-shadow: none; padding: 16px 32px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }

/* 01 — full-bleed white, four icon-led items across, no images anywhere in it */
body.t-stapel.ws-body .ws-section.ws-features { background: var(--st-card); border-top: 1px solid var(--st-line); border-bottom: 1px solid var(--st-line); }
body.t-stapel .ws-features > .ws-container { max-width: 1240px; }
body.t-stapel .ws-features .ws-sub { text-align: left; max-width: 62ch; margin: -18px 0 46px; }
body.t-stapel .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 34px; }
body.t-stapel .ws-feature { text-align: left; padding: 0; }
body.t-stapel .ws-feature-icon { color: var(--st-amber); margin-bottom: 14px; }
body.t-stapel .ws-feature h3 { color: var(--heading); font-size: 16.5px; font-weight: 700; letter-spacing: -.012em; margin: 0 0 8px; }

/* 02 — contained split, the weekly rhythm left, one tall photograph right */
body.t-stapel .ws-story-grid { grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: start; }
body.t-stapel .ws-story-media img { border-radius: 0; aspect-ratio: 3 / 4; }

/* the metric bars, hung straight under the story at the same contained width
   so the two bands read as one; the ladder is the claim, drawn in amber */
body.t-stapel.ws-body .ws-section.ws-listblock { padding-top: 0; }
body.t-stapel .ws-listblock .ws-narrow { max-width: 1120px; }
body.t-stapel .ws-listblock .ws-h2 { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 26px; }
body.t-stapel .ws-list { list-style: none; padding-left: 0; }
body.t-stapel .ws-list li { border-top: 1px solid var(--st-line); margin: 0; padding: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--heading); }
body.t-stapel .ws-list li::after { content: ''; display: block; height: 7px; margin: 12px 0 18px; background: var(--st-amber); }
body.t-stapel .ws-list li:nth-child(1)::after { width: 94%; }
body.t-stapel .ws-list li:nth-child(2)::after { width: 88%; }
body.t-stapel .ws-list li:nth-child(3)::after { width: 76%; }
body.t-stapel .ws-list li:nth-child(4)::after { width: 61%; }

/* 03 — full-bleed ink, six frames, the heading and the numeral the only text */
body.t-stapel.ws-body .ws-section.ws-gallery { background: var(--st-ink); }
body.t-stapel .ws-gallery > .ws-container { max-width: 1400px; }
body.t-stapel .ws-gallery .ws-h2 { color: #f6f4ef; }
body.t-stapel .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.t-stapel .ws-gallery-item img { border-radius: 0; aspect-ratio: 4 / 3; }

/* 04 — four quotes back on the paper, flat, hung off an amber rule not a card */
body.t-stapel .ws-testimonials-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
body.t-stapel .ws-quote { background: transparent; border: 0; border-top: 2px solid var(--st-amber); border-radius: 0; box-shadow: none; padding: 18px 0 0; }
body.t-stapel .ws-quote blockquote { font-size: 14.5px; line-height: 1.7; margin-bottom: 14px; }
body.t-stapel .ws-quote blockquote::before { content: none; }

/* 05 — full-bleed white close: copy and button left, the loaded bakkie right */
body.t-stapel.ws-body .ws-section.ws-cta { background: var(--st-card); color: var(--heading); border-top: 1px solid var(--st-line); border-bottom: 1px solid var(--st-line); }
body.t-stapel .ws-cta-inner { max-width: 1240px; text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: center; }
body.t-stapel .ws-cta-inner > * { grid-column: 1; }
body.t-stapel .ws-cta-inner h2 { color: var(--heading); font-size: clamp(26px, 3.4vw, 40px); }
body.t-stapel .ws-cta-inner p { color: var(--text); opacity: 1; max-width: 46ch; }
body.t-stapel .ws-cta-inner::after { content: ''; grid-column: 2; grid-row: 1 / span 3; align-self: stretch; min-height: 360px; background: url("/media/samples/stp_cta_bakkie.jpg") center / cover; }
body.t-stapel.ws-body .ws-cta .btn.brand { background: var(--st-amber); color: #17120a; justify-self: start; }

/* the page closes symmetrically — one centred column, square fields */
body.t-stapel .ws-contact > .ws-container { max-width: 620px; }
body.t-stapel .ws-contact .ws-sub { white-space: pre-line; color: var(--text); }
body.t-stapel .ws-field input, body.t-stapel .ws-field select, body.t-stapel .ws-field textarea { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 0; color: var(--heading); }

/* every count still fills its rows as the bands fold — 4→2→1, 6→2 rows→3 rows */
@media (max-width: 980px) {
  body.t-stapel .ws-features-grid, body.t-stapel .ws-testimonials-grid, body.t-stapel .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-stapel .ws-story-grid, body.t-stapel .ws-cta-inner { grid-template-columns: 1fr; }
  body.t-stapel .ws-cta-inner::after { grid-column: 1; grid-row: auto; min-height: 240px; margin-top: 30px; }
}
@media (max-width: 620px) {
  body.t-stapel .ws-features-grid, body.t-stapel .ws-testimonials-grid { grid-template-columns: 1fr; }
}

/* night — the paper cools to warm dark, the showcase drops below the page
   ground so it stays the darkest surface, and the amber lifts a shade so the
   numerals and the bars hold their weight against it */
html[data-theme="dark"] body.t-stapel.ws-body {
  --bg: #14130f; --fg: #a29e94; --heading: #f5f3ee; --text: #a29e94; --muted: #7d7970;
  --st-amber: #e9a03a; --st-line: #2c2926; --st-ink: #080806; --st-card: #1c1a16;
  --hero-a: rgba(6, 5, 3, .38); --hero-b: rgba(6, 5, 3, .68);
}