/* ---------- Spelter — Hot-dip galvanising works 129 (website) ----------
   THE STRUCTURAL MOVE: the hero is the ONLY full-bleed block on the page.
   Everything beneath it is a contained rung on one unbroken zinc ground — no
   alternating tint, no second bleed anywhere — and the identical quote band is
   fired twice, at #cta and #cta-2, to bracket the entire middle. Two welds hold
   the ladder shut and share one rule: the icon row is pulled flush onto the
   hero's bottom edge, and the quote form is pulled flush under the second amber
   band so the close reads as a single move. Amber lives in exactly three places
   — those two bands and the submit — so the quote glyph and the feature icons,
   which inherit --brand by default, are taken back to charcoal here. The two
   `columns` rows are told apart by their own anchor ids (#columns, #columns-2),
   never :nth-of-type, which would match the hero. */
body.t-spelter.ws-body {
  --bg: #e9eff0; --fg: #414b4e; --heading: #1b2224; --text: #414b4e; --muted: #78868a;
  --sp-line: #ccd8d9;
  --hero-a: rgba(11, 17, 19, .34); --hero-b: rgba(11, 17, 19, .70);
}
body.t-spelter { background: var(--bg); }

/* a contained wordmark with the menu stacked beneath it on a hairline — static */
body.t-spelter .ws-nav { position: static; background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--sp-line); }
/* header stays one row, brand hard left — house rule; the theme keeps its
   own type, colour and rhythm, it just does not restack or centre the name */
body.t-spelter .ws-nav-inner { gap: 13px; height: auto; padding: 18px 0; }
body.t-spelter .ws-brand { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .36em; }
body.t-spelter .ws-nav-links a { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .17em; opacity: .72; }

/* THE ONE BLEED — a whole viewport, the sub lifted above the headline as an eyebrow */
body.t-spelter .ws-hero { min-height: 100vh; }
body.t-spelter .ws-hero-inner { display: flex; flex-direction: column; align-items: center; }
body.t-spelter .ws-hero-inner p { order: -1; max-width: none; margin: 0 0 20px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; }
body.t-spelter .ws-hero h1 { font-size: clamp(38px, 7.8vw, 92px); font-weight: 800; line-height: .95; letter-spacing: -.035em; max-width: 16ch; }
body.t-spelter.ws-body .ws-hero-cta.btn.brand { background: rgba(233, 239, 240, .93); color: var(--heading); }

/* one zinc ground the whole way down; every rung contained, nothing else painted */
body.t-spelter.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-spelter .ws-section { padding: 86px 0; }
body.t-spelter.ws-body .btn.brand { border-radius: 0; text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 700; padding: 16px 34px; }

/* THE TWO WELDS — the icon row onto the hero, the form onto the second band */
body.t-spelter .ws-features, body.t-spelter .ws-contact { padding-top: 0; }
body.t-spelter .ws-contact .ws-h2 { margin-top: 36px; }

/* every count on the page is four, ranged left off a hard charcoal rule */
body.t-spelter .ws-features-grid, body.t-spelter .ws-team-grid, body.t-spelter .ws-testimonials-grid, body.t-spelter .ws-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
body.t-spelter .ws-feature, body.t-spelter .ws-col, body.t-spelter .ws-quote, body.t-spelter .ws-member { text-align: left; background: transparent; border: 0; border-top: 2px solid var(--heading); border-radius: 0; box-shadow: none; padding: 15px 0 0; }
body.t-spelter .ws-feature-icon { color: var(--heading); }
body.t-spelter .ws-quote blockquote::before { content: none; }
body.t-spelter .ws-gallery-item img, body.t-spelter .ws-member-photo img, body.t-spelter .ws-story-media img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; box-shadow: none; margin: 0 0 13px; }

/* the figures row is the largest type on the page — and charcoal, never amber */
body.t-spelter #columns .ws-col-h { font-size: clamp(40px, 5.6vw, 76px); line-height: .88; letter-spacing: -.04em; margin: 0 0 10px; }

/* the capability lines — ruled rows standing in for the reference's progress bars */
body.t-spelter .ws-list { padding-left: 0; list-style: none; border-top: 1px solid var(--sp-line); }
body.t-spelter .ws-list li { margin: 0; padding: 14px 0; font-size: 15px; line-height: 1.6; border-bottom: 1px solid var(--sp-line); }
body.t-spelter .ws-field input, body.t-spelter .ws-field textarea, body.t-spelter .ws-field select { background: transparent; border: 1px solid var(--sp-line); border-radius: 0; color: var(--heading); }

@media (max-width: 900px) {
  body.t-spelter .ws-features-grid, body.t-spelter .ws-team-grid, body.t-spelter .ws-testimonials-grid, body.t-spelter .ws-gallery-grid, body.t-spelter .ws-columns .ws-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-spelter .ws-hero { min-height: 84vh; }
  body.t-spelter .ws-nav-links a { opacity: 1; }
}

/* spelter by night — the zinc cools to graphite and the amber does not move, so
   the two quote bands stay the only lit things on the page, still bracketing it */
html[data-theme="dark"] body.t-spelter.ws-body {
  --bg: #101617; --fg: #98a6a9; --heading: #e4ecec; --text: #98a6a9; --muted: #6d7b7e;
  --sp-line: #232e30;
  --hero-a: rgba(6, 10, 11, .30); --hero-b: rgba(6, 10, 11, .68);
}
html[data-theme="dark"] body.t-spelter { background: var(--bg); }
html[data-theme="dark"] body.t-spelter .ws-nav { background: var(--bg); }
html[data-theme="dark"] body.t-spelter .ws-feature p, html[data-theme="dark"] body.t-spelter .ws-col p, html[data-theme="dark"] body.t-spelter .ws-member p, html[data-theme="dark"] body.t-spelter .ws-quote blockquote, html[data-theme="dark"] body.t-spelter .ws-sub, html[data-theme="dark"] body.t-spelter .ws-story-copy p, html[data-theme="dark"] body.t-spelter .ws-list li, html[data-theme="dark"] body.t-spelter .ws-gallery-cap span { color: var(--text); }
html[data-theme="dark"] body.t-spelter.ws-body .ws-hero-cta.btn.brand { background: rgba(228, 236, 236, .92); color: #101617; }