/* ---- grootboek (Grootboek — Small-business accountants & SARS returns 263) --
   THE STRUCTURAL MOVE: not one card on the page. No radius, no shadow, no
   tinted band — every section is separated from the next by a single 1px ledger
   rule and nothing else, and the rules stop in exactly one place: the six-up
   client strip, where the photographs are welded edge to edge with no gutter
   and the film band under it opens to the same full width. That strip is the
   hinge — a contained, centred consultation line and a contained explainer pair
   above it, two mirrored article splits below it. Ledger red is spent four
   times only: the 2px rule over each explainer column, the stage slab, the
   consultation slab and the submit. No pricing table exists here; the page
   argues in prose. Nothing below touches the header, the nav or their items. */
body.t-grootboek.ws-body {
  --bg: #f5f1e8; --fg: #3a3f45; --heading: #14171b; --text: #3a3f45; --muted: #7b8188;
  --gb-red: #b23a2c; --gb-line: #d9d2c2; --gb-slate: #191d21;
  --hero-a: rgba(11, 14, 17, .30); --hero-b: rgba(11, 14, 17, .58);
  font-variant-numeric: tabular-nums;
}
body.t-grootboek { background: var(--bg); }

/* one paper ground the whole way down — the platform's zebra wash switched off,
   and a hairline standing in for every card edge this page refuses to draw */
body.t-grootboek.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-grootboek.ws-body .ws-section { padding: 72px 0; border-top: 1px solid var(--gb-line); }

/* tight serif on the headings, the shared grotesk on everything else */
body.t-grootboek .ws-hero h1, body.t-grootboek .ws-h2, body.t-grootboek .ws-story-copy h2, body.t-grootboek .ws-col-h, body.t-grootboek .ws-cta-inner h2 { font-family: "Lora", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.025em; line-height: 1.14; color: var(--heading); }
body.t-grootboek .ws-sub, body.t-grootboek .ws-col p, body.t-grootboek .ws-story-copy p, body.t-grootboek .ws-video-caption, body.t-grootboek .ws-quote blockquote { color: var(--text); font-size: 15.5px; line-height: 1.8; }

/* banner height, never the whole screen — the consultation line shows on load */
body.t-grootboek .ws-hero { min-height: 60vh; }
body.t-grootboek.ws-body .ws-hero h1 { color: #f7f3ea; font-size: clamp(30px, 4.3vw, 52px); text-shadow: none; max-width: 24ch; }

/* red 1 and 2 of 4 — flat square slabs, no border, no lift, on paper or photo */
body.t-grootboek.ws-body .btn.brand, body.t-grootboek.ws-body .ws-hero-cta.btn.brand, body.t-grootboek.ws-body .ws-cta .btn.brand { background: var(--gb-red); color: #f7f3ea; border-radius: 0; box-shadow: none; padding: 14px 30px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
body.t-grootboek.ws-body .btn.brand:hover, body.t-grootboek.ws-body .ws-hero-cta.btn.brand:hover { background: #96301f; color: #f7f3ea; }

/* the free-consultation line: contained, centred, no photograph, no colour */
body.t-grootboek.ws-body .ws-cta { background: transparent; padding: 56px 0; }
body.t-grootboek .ws-cta-inner h2 { font-size: clamp(21px, 2.7vw, 30px); margin: 0 0 12px; }
body.t-grootboek .ws-cta-inner p { color: var(--text); opacity: 1; font-size: 15.5px; line-height: 1.8; }

/* the mirrored explainer pair — red 3 of 4 is the 2px rule over each column */
body.t-grootboek .ws-columns .ws-cols-2 { gap: 0 64px; }
body.t-grootboek .ws-col { border-top: 2px solid var(--gb-red); padding-top: 22px; }
body.t-grootboek .ws-col-h { font-size: clamp(20px, 2.3vw, 26px); margin: 0 0 14px; }

/* THE HINGE — six client trades welded gapless across the full width, and the
   film band straight after it opening to the same width. Photographs, not logos:
   the grayscale and the 34px cap the shared sheet puts on a logo row are undone */
body.t-grootboek.ws-body .ws-logos, body.t-grootboek.ws-body .ws-video { padding: 0; }
body.t-grootboek .ws-logos .ws-container, body.t-grootboek .ws-video .ws-narrow { max-width: 100%; padding: 0; }
body.t-grootboek .ws-logos-heading, body.t-grootboek .ws-video .ws-h2 { padding: 58px 22px 24px; margin: 0; color: var(--muted); }
body.t-grootboek .ws-logos-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; opacity: 1; }
body.t-grootboek .ws-logos-row img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: none; }
body.t-grootboek .ws-video-frame { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; }
body.t-grootboek .ws-video-caption { padding: 18px 22px 56px; margin: 0; }

/* the two guides — square photographs, each heading ruled off from its prose */
body.t-grootboek .ws-story-grid { gap: 56px; align-items: start; }
body.t-grootboek .ws-story-media img { border-radius: 0; aspect-ratio: 4 / 3; }
body.t-grootboek .ws-story-copy h2 { font-size: clamp(22px, 2.7vw, 31px); border-bottom: 1px solid var(--gb-line); padding-bottom: 15px; margin: 0 0 20px; }

/* four clients across, ruled not boxed — auto-fit would strand one on its own */
body.t-grootboek .ws-testimonials-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
body.t-grootboek .ws-quote { background: transparent; border: 0; border-top: 1px solid var(--gb-line); border-radius: 0; box-shadow: none; padding: 18px 0 0; margin: 0; }
body.t-grootboek .ws-quote blockquote::before { content: none; }

/* the page lands on slate: two columns of fields, the note across both, red 4
   of 4 on the submit and it sits hard left. `:last-of-type` is safe here — the
   form's only other child is the <button>, so the last div IS the textarea */
body.t-grootboek.ws-body .ws-contact { background: var(--gb-slate); padding: 76px 0 84px; }
body.t-grootboek .ws-contact .ws-narrow { max-width: 940px; }
body.t-grootboek .ws-contact .ws-h2 { color: #f3efe6; }
body.t-grootboek .ws-contact .ws-sub { color: #9aa1a8; }
body.t-grootboek .ws-contact .ws-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; max-width: none; margin: 0; }
body.t-grootboek .ws-contact .ws-field:last-of-type, body.t-grootboek .ws-contact .ws-form .btn.brand { grid-column: 1 / -1; }
body.t-grootboek .ws-contact .ws-form .btn.brand { justify-self: start; }
body.t-grootboek .ws-contact .ws-field label { color: #cbd1d6; font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
body.t-grootboek .ws-field input, body.t-grootboek .ws-field select, body.t-grootboek .ws-field textarea, body.t-grootboek .ws-select-trigger { background: transparent; border: 0; border-bottom: 1px solid #39414a; border-radius: 0; color: #f3efe6; padding: 9px 2px; }

/* every row still fills as it folds: six to three, four to two, two to one */
@media (max-width: 980px) {
  body.t-grootboek .ws-logos-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-grootboek .ws-testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-grootboek .ws-columns .ws-cols-2 { grid-template-columns: 1fr; gap: 40px; }
  body.t-grootboek .ws-contact .ws-form { grid-template-columns: 1fr; }
  body.t-grootboek .ws-video-frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  body.t-grootboek .ws-logos-row, body.t-grootboek .ws-testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* night — the ledger paper cools to slate, the hairlines survive as the only
   structure, the one red is kept a shade hotter so it still reads, and the
   contact band drops below the page so it stays the darkest thing on it */
html[data-theme="dark"] body.t-grootboek.ws-body {
  --bg: #16191c; --fg: #b3b8bd; --heading: #f2eee5; --text: #a8adb3; --muted: #767c83;
  --gb-red: #d05543; --gb-line: #2b3035; --gb-slate: #0b0d0f;
  --hero-a: rgba(5, 7, 9, .34); --hero-b: rgba(5, 7, 9, .66);
}
html[data-theme="dark"] body.t-grootboek { background: var(--bg); }