/* ---- spruit (Spruit — Catchment work 41) — river-stone grey, wet slate, burnt
   sienna. THE MOVE: the four-square photogrid and the four-column stage row are
   welded into one near-full-bleed unit, so tile one reads with column one. The
   zebra tint is killed so the page is a single flat centre axis, ticked off by
   hairline rules like a printed programme — no offset, no split, anywhere. ---- */
body.t-spruit.ws-body { --bg: #eceff0; --fg: #3f4d51; --heading: #1d2b2f; --text: #3f4d51; --muted: #7d888b; }
body.t-spruit .ws-nav { background: #eceff0; border-bottom: 1px solid #c8cfd1; }
body.t-spruit .ws-nav-links a { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 600; }
/* wordmark alone on line one, the menu centred on a second line beneath it */
@media (min-width: 761px) {
  body.t-spruit .ws-nav-inner { gap: 11px 26px; height: auto; padding: 20px 0 15px; flex-wrap: wrap; }
}
body.t-spruit .ws-hero { min-height: 74vh; }
body.t-spruit .ws-hero h1 { font-weight: 700; letter-spacing: -0.035em; }
/* one flat ground: bands would break the weld and the single axis */
body.t-spruit .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
/* the section title is a ruled box, not a headline */
body.t-spruit .ws-titleblock { border-top: 1px solid #c8cfd1; border-bottom: 1px solid #c8cfd1; padding: 30px 0; }
body.t-spruit .ws-title-h { font-size: clamp(14px, 1.8vw, 19px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.24em; }
/* the weld — squares near edge to edge, stages sat straight underneath, same gutters */
body.t-spruit .ws-photogrid { padding: 58px 0 0; }
body.t-spruit .ws-photogrid-grid { grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 0 1.6%; }
body.t-spruit .ws-columns { padding: 22px 0 64px; }
body.t-spruit .ws-columns .ws-container { max-width: 100%; padding: 0 1.6%; }
body.t-spruit .ws-columns .ws-cols { gap: 26px; }
body.t-spruit .ws-col { text-align: center; }
body.t-spruit .ws-col-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: #b4552d; }
/* both pull-statements, matched: hairline above, 105px of air, heading floating high */
body.t-spruit .ws-quoteblock { border-top: 1px solid #c8cfd1; padding: 105px 0 42px; }
body.t-spruit .ws-quote-t { font-style: normal; font-weight: 500; max-width: 30ch; margin: 0 auto 18px; color: #1d2b2f; }
body.t-spruit .ws-quote-a { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: #b4552d; }
body.t-spruit .ws-gallery-item img { border-radius: 0; aspect-ratio: 4 / 3; }
/* the roll-call is plain text on the axis, not bullets hanging off to the left */
body.t-spruit .ws-listblock { text-align: center; }
body.t-spruit .ws-list { list-style: none; padding: 0; }
body.t-spruit .ws-contact { border-top: 1px solid #c8cfd1; }
body.t-spruit .btn.brand { background: #b4552d; color: #ffffff; }
body.t-spruit .btn.brand:hover { background: #9b4724; }
/* phones: two-up both times, so a tile still reads with its own column */
@media (max-width: 720px) {
  body.t-spruit .ws-photogrid-grid, body.t-spruit .ws-columns .ws-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

html[data-theme="dark"] body.t-spruit.ws-body { --bg: #141d20; --fg: #b3bfc2; --heading: #eceff0; --text: #b3bfc2; --muted: #7b878a; }
html[data-theme="dark"] body.t-spruit { background: #141d20; }
html[data-theme="dark"] body.t-spruit .ws-nav { background: #141d20; border-bottom-color: #2a373b; }
html[data-theme="dark"] body.t-spruit .ws-titleblock { border-top-color: #2a373b; border-bottom-color: #2a373b; }
html[data-theme="dark"] body.t-spruit .ws-quoteblock, html[data-theme="dark"] body.t-spruit .ws-contact { border-top-color: #2a373b; }
html[data-theme="dark"] body.t-spruit .ws-quote-t { color: #eceff0; }
html[data-theme="dark"] body.t-spruit .ws-quote-a, html[data-theme="dark"] body.t-spruit .ws-col-h { color: #d4794c; }
html[data-theme="dark"] body.t-spruit .btn.brand { background: #b4552d; color: #ffffff; }
html[data-theme="dark"] body.t-spruit .btn.brand:hover { background: #c76135; }