/* ---- ballast (Ballast — Solar & backup 42) — cool graphite, warm bone, one
   citron. THE STRUCTURAL MOVE: the hero H1 is painted with a hard gradient stop
   at exactly one line-height and clipped to the glyphs, so line one reads bone
   and every line after it reads citron — an oversized two-line headline in two
   inks with no markup to do it. `white-space: pre-line` honours the newline in
   the heading string; the stop is in `em` (not 50%) so a wrap on a narrow phone
   still splits after line one instead of through the middle of a word, and the
   whole thing sits inside @supports so a browser without background-clip:text
   gets a plain bone headline rather than an invisible one.
   Citron is rationed to four resting places and no more: that second headline
   line, the nav's Quote pill, the ledger figures and the single closing button.
   That is also why the nav link colour is pinned bone — the shared sheet's
   hover/scroll-spy rule would otherwise put citron in a fifth place. ---- */
body.t-ballast.ws-body { --bg: #14171b; --fg: #a3a9b1; --heading: #eeece6; --text: #a3a9b1; --muted: #79808a; }
body.t-ballast .ws-nav { background: rgba(20, 23, 27, 0.74); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid #2b3138; }
body.t-ballast .ws-nav-links a { color: #eeece6; }
body.t-ballast .ws-nav-links a[href="#cta"] { background: #c8d94b; color: #14171b; border-radius: 999px; border-bottom: 0; padding: 7px 16px; font-weight: 600; opacity: 1; }
/* a graphite scrim rather than neutral black — the roof photograph keeps its colour */
body.t-ballast .ws-hero { min-height: 92vh; --hero-a: rgba(20, 23, 27, 0.34); --hero-b: rgba(20, 23, 27, 0.74); }
body.t-ballast .ws-hero h1 { white-space: pre-line; font-size: clamp(40px, 8.4vw, 96px); line-height: 0.92; letter-spacing: -0.04em; max-width: 15ch; color: #eeece6; text-shadow: none; }
body.t-ballast .ws-hero-cta.btn.brand { background: #eeece6; color: #14171b; border-radius: 0; padding: 15px 30px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: none; }
@supports (-webkit-background-clip: text) {
  body.t-ballast .ws-hero h1 { background-image: linear-gradient(#eeece6 0 0.92em, #c8d94b 0.92em); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  html[data-theme="dark"] body.t-ballast .ws-hero h1 { background-image: linear-gradient(#f4f2ec 0 0.92em, #d4e45c 0.92em); }
}
body.t-ballast .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: #1b1f24; }
body.t-ballast .ws-sub, body.t-ballast .ws-feature p, body.t-ballast .ws-story-copy p, body.t-ballast .ws-cta p { color: #929aa3; }
body.t-ballast .ws-story-media img { border-radius: 0; aspect-ratio: 1; }
/* quotes are ruled entries on the plain ground — no cards, no faces, and no
   brand-coloured quote mark (that would be a fifth citron). The 200px track
   keeps all four across on one row instead of breaking 3 + 1. */
body.t-ballast .ws-testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; }
body.t-ballast .ws-quote { background: transparent; border: 0; border-top: 1px solid #2b3138; border-radius: 0; box-shadow: none; padding: 22px 0 0; }
body.t-ballast .ws-quote blockquote { color: #eeece6; font-size: 15.5px; }
body.t-ballast .ws-quote blockquote::before { content: none; }
/* the ledger — the page's one full-width interruption and its only big numerals */
body.t-ballast .ws-columns { border-top: 1px solid #2b3138; border-bottom: 1px solid #2b3138; padding: 88px 0; }
body.t-ballast .ws-col-h { color: #c8d94b; font-size: clamp(40px, 6.4vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; margin-bottom: 12px; }
body.t-ballast .ws-col p { color: #8b929b; font-size: 11px; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; }
body.t-ballast .ws-listblock .ws-list li { border-bottom: 1px solid #2b3138; padding: 18px 0 18px 8px; }
body.t-ballast .ws-cta { background: #1b1f24; border-top: 1px solid #2b3138; padding: 104px 0 116px; }
body.t-ballast .btn.brand, body.t-ballast.ws-body .ws-cta .btn.brand { background: #c8d94b; color: #14171b; border-radius: 0; padding: 16px 34px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
/* four figures must not break to 3 + 1 on a tablet */
@media (min-width: 721px) and (max-width: 900px) { body.t-ballast .ws-columns .ws-cols-4 { grid-template-columns: repeat(2, 1fr); } }

/* ballast night — it ships dark, so night goes deeper rather than inverting and
   lifts the citron, which is the only ink that has to stay legible after sunset */
html[data-theme="dark"] body.t-ballast.ws-body { --bg: #0c0e10; --fg: #9ba1a9; --heading: #f4f2ec; --text: #9ba1a9; --muted: #727880; }
html[data-theme="dark"] body.t-ballast { background: #0c0e10; }
html[data-theme="dark"] body.t-ballast .ws-nav { background: rgba(12, 14, 16, 0.8); border-bottom-color: #232a30; }
html[data-theme="dark"] body.t-ballast .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink),
html[data-theme="dark"] body.t-ballast .ws-cta { background: #13161a; }
html[data-theme="dark"] body.t-ballast .ws-quote, html[data-theme="dark"] body.t-ballast .ws-columns,
html[data-theme="dark"] body.t-ballast .ws-cta, html[data-theme="dark"] body.t-ballast .ws-listblock .ws-list li { border-color: #232a30; }
html[data-theme="dark"] body.t-ballast .ws-hero { --hero-a: rgba(12, 14, 16, 0.42); --hero-b: rgba(12, 14, 16, 0.8); }
html[data-theme="dark"] body.t-ballast .ws-hero-cta.btn.brand { background: #f4f2ec; color: #0c0e10; }
html[data-theme="dark"] body.t-ballast .ws-col-h { color: #d4e45c; }
html[data-theme="dark"] body.t-ballast .ws-nav-links a[href="#cta"],
html[data-theme="dark"] body.t-ballast .btn.brand,
html[data-theme="dark"] body.t-ballast.ws-body .ws-cta .btn.brand { background: #d4e45c; color: #0c0e10; }