/* ==================================================================
   KENZAI DIGITAL — Homepage variants
   Two scoped re-themes loaded on top of tokens.css + site.css.

   .theme-cream  → "Cream Editorial"   warm, gold-led, refined
   .theme-bold   → "Bold Operator"     ink-dark, mono labels, tech-startup
   ================================================================== */


/* ╔════════════════════════════════════════════════════════════════╗
   ║  VARIANT 1 — CREAM EDITORIAL                                  ║
   ║  Crème surface, goud is structuur-accent, groen alleen op     ║
   ║  CTA-banner + footer.                                         ║
   ╚════════════════════════════════════════════════════════════════╝ */

body.theme-cream {
  background: var(--kz-cream-50);
  color: var(--kz-green-900);
}

/* — NAV — */
.theme-cream .nav {
  background: var(--kz-cream-50);
  border-bottom: 1px solid rgba(15, 54, 46, 0.08);
}
.theme-cream .nav__logo { color: var(--kz-green-900); }
.theme-cream .nav__wm-ai { color: var(--kz-gold-700); }
.theme-cream .nav__link { color: var(--kz-green-900); }
.theme-cream .nav__link:hover { color: var(--kz-gold-700); }
.theme-cream .nav__link.is-active::after { background: var(--kz-gold-600); }

/* — HERO — */
.theme-cream .hero { background: var(--kz-cream-50); padding: 56px 0 80px; }
.theme-cream .hero__watermark { opacity: 0.04; }
.theme-cream .hero__watermark span { color: var(--kz-green-900); }
.theme-cream .hero__watermark span em { color: var(--kz-gold-600); }
.theme-cream .hero__title { color: var(--kz-green-900); }
.theme-cream .hero__title em { color: var(--kz-gold-700); }
.theme-cream .hero__lead { color: var(--kz-ink-500); }
.theme-cream .hero__availability {
  background: rgba(47, 158, 111, 0.08);
  border-color: rgba(47, 158, 111, 0.32);
  color: var(--kz-green-900);
}
.theme-cream .eyebrow { color: var(--kz-gold-700); }

/* — Pillars (replacement for the stack visual in the hero right) — */
.pillars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pillar {
  position: relative;
  background: var(--kz-white);
  border: 1px solid rgba(15, 54, 46, 0.08);
  border-radius: 16px;
  padding: 22px 24px 22px 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  box-shadow: 0 1px 0 rgba(15, 54, 46, 0.04);
}
.pillar::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 22px;
  width: 28px;
  height: 3px;
  background: var(--kz-gold-600);
  border-radius: 2px;
}
.pillar__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--kz-gold-700);
  letter-spacing: 0.08em;
  margin: 14px 0 6px;
  display: block;
}
.pillar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--kz-green-900);
  letter-spacing: -0.005em;
}
.pillar__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kz-ink-500);
  max-width: 36ch;
}
.pillar__kanji {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--kz-gold-600);
  align-self: start;
  margin-top: 4px;
}
.pillars__caption {
  margin-top: 18px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kz-ink-300);
}

/* — SECTIONS —
   Cream-50 is the base canvas. The alternating sections (`section--cream`)
   used to be pure white, which felt washed-out next to the warm cream.
   We now lift them with a soft gold-tinted wash so they read as warmer
   and clearly distinct from the base. */
.theme-cream .section {
  background: var(--kz-cream-50);
  color: var(--kz-green-900);
}
.theme-cream .section--cream { background: #F7EDD4; }
.theme-cream .section__title { color: var(--kz-green-900); }
.theme-cream .section__title em { color: var(--kz-gold-700); }
.theme-cream .section__lead { color: var(--kz-ink-500); }

/* — SERVICES (already-light cards stay; only tints change) — */
/* Service cards sit on the warmer section--cream wash, so flip them to
   pure white for the cleanest contrast. */
.theme-cream .service { background: var(--kz-white); border-color: rgba(15, 54, 46, 0.06); }
.theme-cream .service__icon--green { background: var(--kz-gold-100); color: var(--kz-gold-900); }
.theme-cream .service__icon--gold { background: var(--kz-gold-200); color: var(--kz-green-900); }
.theme-cream .service__icon--ink { background: var(--kz-cream-200); color: var(--kz-green-900); }

/* — PROCESS — */
.theme-cream .process-grid {
  border-top-color: rgba(15, 54, 46, 0.12);
  border-bottom-color: rgba(15, 54, 46, 0.12);
}
.theme-cream .process-step { border-right-color: rgba(15, 54, 46, 0.12); }
.theme-cream .process-step__num { color: var(--kz-gold-700); }
.theme-cream .process-step__title { color: var(--kz-green-900); }
.theme-cream .process-step__desc { color: var(--kz-ink-500); }
.theme-cream .process-step__time { color: var(--kz-ink-300); }

/* — FOUNDER STRIP — */
.theme-cream .home-bio__photo {
  background:
    repeating-linear-gradient(135deg, rgba(214, 160, 36, 0.18) 0 14px, rgba(214, 160, 36, 0.08) 14px 28px),
    var(--kz-cream-200);
  color: var(--kz-ink-500);
}
.theme-cream .home-bio__photo-label {
  background: rgba(244, 239, 227, 0.85);
  color: var(--kz-ink-500);
  backdrop-filter: none;
}
.theme-cream .home-bio p { color: var(--kz-ink-500); }

/* — BUTTONS — */
.theme-cream .btn--ghost {
  color: var(--kz-green-900);
  border-color: rgba(15, 54, 46, 0.24);
}
.theme-cream .btn--ghost:hover {
  background: var(--kz-green-800);
  border-color: var(--kz-green-800);
  color: var(--kz-white, #fff);
}
.theme-cream .btn--ghost-light {
  background: var(--kz-green-900);
  color: var(--kz-cream-100);
}
.theme-cream .btn--ghost-light:hover { background: var(--kz-gold-600); color: var(--kz-white, #fff); }

/* — GROEISCAN CTA on cream — */
.theme-cream .scan-cta {
  background: rgba(214, 160, 36, 0.08);
  border-color: rgba(214, 160, 36, 0.4);
}
.theme-cream .scan-cta__title { color: var(--kz-green-900); }
.theme-cream .scan-cta__title em { color: var(--kz-gold-700); }
.theme-cream .scan-cta__lead { color: var(--kz-ink-500); }
.theme-cream .scan-cta__list li { color: var(--kz-green-900); }
.theme-cream .scan-cta__list li svg { color: var(--kz-gold-700); }

/* CTA banner + footer keep their deep green — that's the intentional contrast */


/* ── INTERIOR PAGES on cream (aanpak · over-mij · contact) ──────────
   De .theme-cream regels hierboven dekken alleen homepage-modules.
   Onderstaande trekt de Cream Editorial-look door naar de binnen-
   pagina's: page-header, principes, timeline, bio, tools, contact
   en formulier. CTA-banner + footer blijven bewust diep-groen. */

/* — Page header — */
.theme-cream .page-header {
  background: var(--kz-cream-50);
  border-bottom: 1px solid rgba(15, 54, 46, 0.10);
}
.theme-cream .page-header__watermark img { opacity: 0.5; }
.theme-cream .crumbs,
.theme-cream .crumbs a { color: var(--kz-ink-300); }
.theme-cream .crumbs a:hover { color: var(--kz-gold-700); }
.theme-cream .page-header__title { color: var(--kz-green-900); }
.theme-cream .page-header__title em { color: var(--kz-gold-700); }
.theme-cream .page-header__lead { color: var(--kz-ink-700); }

/* — Generieke bodytekst op crème — */
.theme-cream .bio-grid__body p,
.theme-cream .about__body p { color: var(--kz-ink-500); }

/* — Principes (aanpak) — */
.theme-cream .principle {
  background: var(--kz-white);
  border: 1px solid rgba(15, 54, 46, 0.08);
}
.theme-cream .principle__num { color: var(--kz-gold-700); }
.theme-cream .principle__title { color: var(--kz-green-900); }
.theme-cream .principle__desc { color: var(--kz-ink-500); }

/* — Timeline (aanpak) — */
.theme-cream .timeline__step { border-bottom-color: rgba(15, 54, 46, 0.12); }
.theme-cream .timeline__num { color: var(--kz-gold-600); }
.theme-cream .timeline__when { color: var(--kz-ink-300); }
.theme-cream .timeline__title { color: var(--kz-green-900); }
.theme-cream .timeline__desc { color: var(--kz-ink-500); }

/* — Proces-TOC (aanpak) — */
.theme-cream .proc-toc__label { color: var(--kz-ink-300); }
.theme-cream .proc-toc__list { border-left-color: rgba(15, 54, 46, 0.14); }
.theme-cream .proc-toc__item { color: var(--kz-ink-300); }
.theme-cream .proc-toc__item:hover { color: var(--kz-green-900); }
.theme-cream .proc-toc__item.is-active {
  color: var(--kz-green-900);
  border-left-color: var(--kz-gold-600);
}
.theme-cream .proc-toc__no { color: var(--kz-gold-700); }

/* — Chips (deliverables) — */
.theme-cream .chip {
  background: var(--kz-white);
  border-color: rgba(15, 54, 46, 0.14);
  color: var(--kz-ink-500);
}
.theme-cream .chip--gold {
  background: var(--kz-gold-100);
  border-color: rgba(214, 160, 36, 0.35);
  color: var(--kz-gold-800);
}
/* Timeline: gouden hoofd-deliverable krijgt een stevigere highlight,
   de witte chips eronder lezen als ondersteunende vervolgstappen. */
.theme-cream .timeline__deliverables .chip--gold {
  background: var(--kz-gold-200);
  border-color: var(--kz-gold-500);
  color: var(--kz-green-900);
  font-weight: 600;
  box-shadow: 0 1px 7px rgba(214, 160, 36, 0.30);
}

/* — Bio / over-mij — */
.theme-cream .bio-grid__pull { color: var(--kz-green-900); }
.theme-cream .about__photo {
  background:
    repeating-linear-gradient(135deg, rgba(214, 160, 36, 0.18) 0 14px, rgba(214, 160, 36, 0.08) 14px 28px),
    var(--kz-cream-200);
  color: var(--kz-ink-500);
}
.theme-cream .about__photo-label {
  background: rgba(244, 239, 227, 0.85);
  color: var(--kz-ink-500);
}
.theme-cream .about__stats { border-top-color: rgba(15, 54, 46, 0.14); }
.theme-cream .about__stat-num { color: var(--kz-green-900); }
.theme-cream .about__stat-label { color: var(--kz-ink-300); }
.theme-cream .about__sig-name { color: var(--kz-green-900); }
.theme-cream .about__sig-role { color: var(--kz-ink-300); }

/* — Kanji-kaarten (al goud-getint, alleen tekst flipt) — */
.theme-cream .kanji__char { color: var(--kz-gold-700); }
.theme-cream .kanji__romaji { color: var(--kz-ink-300); }
.theme-cream .kanji__meaning { color: var(--kz-green-900); }

/* — Tools-grid (over-mij) — */
.theme-cream .tool {
  background: var(--kz-white);
  border: 1px solid rgba(15, 54, 46, 0.08);
}
.theme-cream .tool__name { color: var(--kz-green-900); }
.theme-cream .tool__cat { color: var(--kz-ink-300); }

/* — Contactgegevens — */
.theme-cream .contact-item__label { color: var(--kz-ink-300); }
.theme-cream .contact-item__value,
.theme-cream .contact-item__value a { color: var(--kz-green-900); }
.theme-cream .contact-item__value a:hover { color: var(--kz-gold-700); }

/* — Formulier — */
.theme-cream .form {
  background: var(--kz-white);
  border: 1px solid rgba(15, 54, 46, 0.10);
}
.theme-cream .field label { color: var(--kz-green-900); }
.theme-cream .field input,
.theme-cream .field select,
.theme-cream .field textarea {
  background-color: var(--kz-cream-50);
  border-color: rgba(15, 54, 46, 0.16);
  color: var(--kz-green-900);
}
.theme-cream .field input::placeholder,
.theme-cream .field textarea::placeholder { color: var(--kz-ink-300); }
.theme-cream .field input:focus,
.theme-cream .field select:focus,
.theme-cream .field textarea:focus {
  border-color: var(--kz-gold-600);
  background-color: var(--kz-white);
}
.theme-cream .field select {
  background-image: none;
}
.theme-cream .select-wrap::after { border-color: var(--kz-green-900); }
.theme-cream .form__hint { color: var(--kz-ink-500); }

/* — FAQ staat in section--cream (al licht) — niets te flippen — */

/* — Knop op de diep-groene CTA-banner leesbaar houden — */
.theme-cream .cta-banner .btn--ghost-light {
  background: transparent;
  color: var(--kz-cream-100);
  border: 1px solid rgba(244, 239, 227, 0.32);
}
.theme-cream .cta-banner .btn--ghost-light:hover {
  background: var(--kz-gold-600);
  border-color: var(--kz-gold-600);
  color: var(--kz-white, #fff);
}

/* — Responsive: proces-TOC wordt horizontale balk onder 960px — */
@media (max-width: 960px) {
  .theme-cream .proc-toc__list { border-top-color: rgba(15, 54, 46, 0.14); }
  .theme-cream .proc-toc__item.is-active { border-left-color: transparent; }
}


/* ══════════════════════════════════════════════════════════════════
   NACHTMODUS  ·  html[data-theme="dark"]
   De cream-pagina's (home, aanpak, over-mij, contact) gebruiken
   .theme-cream als lichte laag. Hieronder draaien we die terug naar
   de donkergroene merk-signatuur. `html[data-theme="dark"] .x` wint
   qua specificiteit van `.theme-cream .x`.
   Tokens: tekst = cream-100, gedempt = cream@72%, kaarten = green-700,
   vlak = green-800, donkere band = green-900.
   ══════════════════════════════════════════════════════════════════ */

/* — Basis — */
html[data-theme="dark"] body.theme-cream { background: var(--kz-green-800); color: var(--kz-cream-100); }

/* — Nav — */
html[data-theme="dark"] .theme-cream .nav { background: var(--kz-green-800); border-bottom-color: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .theme-cream .nav__logo,
html[data-theme="dark"] .theme-cream .nav__link { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .nav__link:hover { color: var(--kz-gold-500); }
html[data-theme="dark"] .theme-cream .nav__wm { color: #F4EFE3 !important; }
html[data-theme="dark"] .theme-cream .nav__sub { color: rgba(244, 239, 227, 0.6) !important; }
/* Volledig-logo swap in nachtmodus op cream-pagina's → cream wordmark */
html[data-theme="dark"] .theme-cream .nav__logo-img--light { display: none; }
html[data-theme="dark"] .theme-cream .nav__logo-img--dark { display: block; }

/* — Hero — */
html[data-theme="dark"] .theme-cream .hero { background: var(--kz-green-800); }
html[data-theme="dark"] .theme-cream .hero__watermark { opacity: 0.06; }
html[data-theme="dark"] .theme-cream .hero__watermark span { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .hero__title { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .hero__title em { color: var(--kz-gold-500); }
html[data-theme="dark"] .theme-cream .hero__lead { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .theme-cream .hero__availability {
  background: rgba(47, 158, 111, 0.12);
  border-color: rgba(47, 158, 111, 0.4);
  color: var(--kz-cream-100);
}
html[data-theme="dark"] .theme-cream .stack { border-color: rgba(214, 160, 36, 0.6); box-shadow: 0 0 0 4px rgba(214, 160, 36, 0.08), inset 0 0 40px rgba(214, 160, 36, 0.04); }
html[data-theme="dark"] .theme-cream .stack__layer--dark { background: var(--kz-green-700); border-color: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .theme-cream .stack__layer--dark .stack__title { color: var(--kz-cream-100) !important; }
html[data-theme="dark"] .theme-cream .stack__layer--dark .stack__sub { color: rgba(244, 239, 227, 0.6); }
html[data-theme="dark"] .theme-cream .stack__group-label { color: rgba(244, 239, 227, 0.55); }
html[data-theme="dark"] .theme-cream .stack__caption { color: rgba(244, 239, 227, 0.5); }

/* Light (cream) hero: labels en caption in inkt i.p.v. cream */
.theme-cream .stack__group-label { color: rgba(15, 54, 46, 0.5); }
.theme-cream .stack__caption { color: var(--kz-ink-300); }
html[data-theme="dark"] .theme-cream .stack__group-label { color: rgba(244, 239, 227, 0.55); }

/* — Secties — */
html[data-theme="dark"] .theme-cream .section { background: var(--kz-green-800); color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .section--cream { background: var(--kz-green-900); }
html[data-theme="dark"] .theme-cream .section__title { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .section__lead { color: rgba(244, 239, 227, 0.72); }
/* Nachtmodus-leesbaarheid: teksten met een hardcoded donkergroene kleur op
   donkere achtergrond lichter zetten (bridge-note + cursieve vraag in dienst-kaarten). */
html[data-theme="dark"] .theme-cream .bridge-note { color: rgba(244, 239, 227, 0.82) !important; }
html[data-theme="dark"] .theme-cream .service__desc em { color: var(--kz-gold-200) !important; }
html[data-theme="dark"] .theme-cream .home-bio p { color: rgba(244, 239, 227, 0.78) !important; }
html[data-theme="dark"] .theme-cream .bio-grid__body h3 { color: var(--kz-cream-100) !important; }
html[data-theme="dark"] .theme-cream .availability-card > div strong { color: var(--kz-cream-100) !important; }
html[data-theme="dark"] .theme-cream .availability-card > p { color: rgba(244, 239, 227, 0.82) !important; }

/* — Diensten-kaarten — */
html[data-theme="dark"] .theme-cream .service { background: var(--kz-green-700); border-color: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .theme-cream .service__name { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .service__desc { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .theme-cream .service__tag { background: rgba(244, 239, 227, 0.06); color: rgba(244, 239, 227, 0.8); }

/* — Proces — */
html[data-theme="dark"] .theme-cream .process-grid { border-top-color: rgba(244, 239, 227, 0.12); border-bottom-color: rgba(244, 239, 227, 0.12); }
html[data-theme="dark"] .theme-cream .process-step { border-right-color: rgba(244, 239, 227, 0.12); }
html[data-theme="dark"] .theme-cream .process-step__title { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .process-step__desc { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .theme-cream .process-step__time { color: rgba(244, 239, 227, 0.5); }

/* — Founder strip / testimonials — */
html[data-theme="dark"] .theme-cream .home-bio p { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .theme-cream .testimonial { background: var(--kz-green-700); border-color: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .theme-cream .testimonial__quote { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .testimonial__name { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .testimonial__role { color: rgba(244, 239, 227, 0.55); }

/* — Knoppen — */
/* `transition: all` op .btn doet deze engine de var()-kleur fout resolven in
   nachtmodus; sluit color uit de transitie zodat de cream-kleur direct pakt. */
html[data-theme="dark"] .theme-cream .btn--ghost {
  color: #F4EFE3 !important;
  border-color: rgba(244, 239, 227, 0.28);
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out) !important;
}
html[data-theme="dark"] .theme-cream .btn--ghost:hover { background: rgba(244, 239, 227, 0.06); border-color: rgba(244, 239, 227, 0.45); }
/* Nachtmodus-fixes (ronde 2) */
html[data-theme="dark"] .theme-cream .recog strong { color: var(--kz-gold-500, #E2B447) !important; }
html[data-theme="dark"] .theme-cream .btn--primary:hover { filter: brightness(1.08); }
html[data-theme="dark"] .theme-cream .cta-banner .btn--primary:hover,
html[data-theme="dark"] .theme-cream .scan-cta .btn--primary:hover { filter: brightness(1.08); }
html[data-theme="dark"] .theme-cream .proof-strip__quote { color: var(--kz-cream-100, #F4EFE3); }

/* — Groeiscan-CTA — */
html[data-theme="dark"] .theme-cream .scan-cta__title { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .scan-cta__lead { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .theme-cream .scan-cta__list li { color: var(--kz-cream-100); }

/* — Page header (binnenpagina's) — */
html[data-theme="dark"] .theme-cream .page-header { background: var(--kz-green-800); border-bottom-color: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .theme-cream .page-header__title { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .page-header__lead { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .theme-cream .crumbs,
html[data-theme="dark"] .theme-cream .crumbs a { color: rgba(244, 239, 227, 0.5); }

/* — Algemene bodytekst — */
html[data-theme="dark"] .theme-cream .bio-grid__body p,
html[data-theme="dark"] .theme-cream .about__body p { color: rgba(244, 239, 227, 0.72); }

/* — Principes (aanpak) — */
html[data-theme="dark"] .theme-cream .principle { background: var(--kz-green-700); border-color: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .theme-cream .principle__title { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .principle__desc { color: rgba(244, 239, 227, 0.72); }

/* — Timeline (aanpak) — */
html[data-theme="dark"] .theme-cream .timeline__step { border-bottom-color: rgba(244, 239, 227, 0.12); }
html[data-theme="dark"] .theme-cream .timeline__when { color: rgba(244, 239, 227, 0.5); }
html[data-theme="dark"] .theme-cream .timeline__title { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .timeline__desc { color: rgba(244, 239, 227, 0.72); }

/* — Proces-TOC — */
html[data-theme="dark"] .theme-cream .proc-toc__list { border-left-color: rgba(244, 239, 227, 0.18); }
html[data-theme="dark"] .theme-cream .proc-toc__item { color: rgba(244, 239, 227, 0.5); }
html[data-theme="dark"] .theme-cream .proc-toc__item:hover,
html[data-theme="dark"] .theme-cream .proc-toc__item.is-active { color: var(--kz-cream-100); }

/* — Sectie-ankers (jump-nav) — */
.theme-cream .page-jump__link { color: var(--kz-ink-300); }
.theme-cream .page-jump__link.is-active { color: var(--kz-green-900); }
html[data-theme="dark"] .page-jump { border-color: rgba(244, 239, 227, 0.12); background: var(--kz-green-900); }
html[data-theme="dark"] .page-jump__link { color: rgba(244, 239, 227, 0.5); }
html[data-theme="dark"] .page-jump__link.is-active { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .page-jump__link:hover { color: var(--kz-cream-100); }
html[data-theme="dark"] .page-jump__sep { background: rgba(244, 239, 227, 0.2); }
html[data-theme="dark"] .market-note__title { color: var(--kz-cream-100); }
html[data-theme="dark"] .market-note__text { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .theme-cream .diff-item__t { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .diff-item__d { color: rgba(244, 239, 227, 0.7); }
html[data-theme="dark"] .theme-cream .anders-cue { color: rgba(244, 239, 227, 0.66); }
html[data-theme="dark"] .theme-cream .diff-band__note { color: rgba(244, 239, 227, 0.66); }

/* — Chips — */
html[data-theme="dark"] .theme-cream .chip { background: rgba(244, 239, 227, 0.06); border-color: rgba(244, 239, 227, 0.16); color: rgba(244, 239, 227, 0.82); }

/* — Bio / over-mij — */
html[data-theme="dark"] .theme-cream .bio-grid__pull { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .about__photo-label { background: rgba(11, 42, 35, 0.7); color: rgba(244, 239, 227, 0.85); }
html[data-theme="dark"] .theme-cream .about__stats { border-top-color: rgba(244, 239, 227, 0.16); }
html[data-theme="dark"] .theme-cream .about__stat-num { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .about__sig-name { color: var(--kz-cream-100); }

/* — Kanji — */
html[data-theme="dark"] .theme-cream .kanji__meaning { color: var(--kz-cream-100); }

/* — Tools — */
html[data-theme="dark"] .theme-cream .tool { background: var(--kz-green-700); border-color: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .theme-cream .tool__name { color: var(--kz-cream-100); }

/* — Contactgegevens — */
html[data-theme="dark"] .theme-cream .contact-item__value,
html[data-theme="dark"] .theme-cream .contact-item__value a { color: var(--kz-cream-100); }

/* — Formulier — */
html[data-theme="dark"] .theme-cream .form { background: var(--kz-green-700); border-color: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .theme-cream .field label { color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .field input,
html[data-theme="dark"] .theme-cream .field select,
html[data-theme="dark"] .theme-cream .field textarea {
  background-color: var(--kz-green-800);
  border-color: rgba(244, 239, 227, 0.16);
  color: var(--kz-cream-100);
}
html[data-theme="dark"] .theme-cream .field input::placeholder,
html[data-theme="dark"] .theme-cream .field textarea::placeholder { color: rgba(244, 239, 227, 0.45); }
html[data-theme="dark"] .theme-cream .field input:focus,
html[data-theme="dark"] .theme-cream .field select:focus,
html[data-theme="dark"] .theme-cream .field textarea:focus {
  border-color: var(--kz-gold-600);
  background-color: var(--kz-green-900);
}
html[data-theme="dark"] .theme-cream .field select {
  background-image: none;
}
html[data-theme="dark"] .theme-cream .select-wrap::after { border-color: var(--kz-cream-100); }
html[data-theme="dark"] .theme-cream .form__hint { color: rgba(244, 239, 227, 0.72); }

/* — section--cream darken ook op niet-cream pagina's (diensten, groeiscan) — */
html[data-theme="dark"] .section--cream { background: var(--kz-green-900); }
html[data-theme="dark"] .section--cream .section__title { color: var(--kz-cream-100); }
html[data-theme="dark"] .section--cream .section__lead { color: rgba(244, 239, 227, 0.72); }

/* ── BALANSPAGINA'S (diensten · groeiscan) in nachtmodus ──────────────
   Deze pagina's gebruiken geen .theme-cream; hun cream-content flipt hier.
   ─────────────────────────────────────────────────────────────────── */

/* witte service-kaarten → donkere kaart */
html[data-theme="dark"] .service { background: var(--kz-green-700); border-color: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .service__name { color: var(--kz-cream-100); }
html[data-theme="dark"] .service__desc { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .service__tag { background: rgba(244, 239, 227, 0.06); color: rgba(244, 239, 227, 0.8); }
html[data-theme="dark"] .service__icon--ink { background: rgba(244, 239, 227, 0.08); color: var(--kz-cream-100); }

/* FAQ */
html[data-theme="dark"] .faq__item { border-color: rgba(244, 239, 227, 0.14); }
html[data-theme="dark"] .faq__item:last-child { border-bottom-color: rgba(244, 239, 227, 0.14); }
html[data-theme="dark"] .faq__summary { color: var(--kz-cream-100); }
html[data-theme="dark"] .faq__body { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .faq__icon { border-color: rgba(244, 239, 227, 0.2); color: var(--kz-cream-100); }

/* sticky service-index (diensten) */
html[data-theme="dark"] .svc-index { background: var(--kz-green-800); border-bottom-color: rgba(244, 239, 227, 0.1); }
html[data-theme="dark"] .svc-index__chip { background: rgba(244, 239, 227, 0.06); border-color: rgba(244, 239, 227, 0.16); color: var(--kz-cream-100); }
html[data-theme="dark"] .svc-index__chip b { color: var(--kz-gold-500); }
html[data-theme="dark"] .svc-index__chip:hover { background: rgba(244, 239, 227, 0.12); }
html[data-theme="dark"] .svc-index__chip.is-active { background: var(--kz-gold-600); border-color: var(--kz-gold-600); color: var(--kz-green-900); }
html[data-theme="dark"] .svc-index__chip.is-active b { color: var(--kz-green-900); }

/* service-blocks + detail-cards (diensten) */
html[data-theme="dark"] .service-block { border-bottom-color: rgba(244, 239, 227, 0.12); }
/* Doorlopende kleurbanden in nachtmodus */
html[data-theme="dark"] .service-block:nth-of-type(odd)::before  { background: rgba(214, 160, 36, 0.10); }
html[data-theme="dark"] .service-block:nth-of-type(even)::before { background: rgba(244, 239, 227, 0.04); }
html[data-theme="dark"] .service-block:nth-of-type(odd) .service-block__icon--gold { background: rgba(244, 239, 227, 0.10); }
html[data-theme="dark"] .service-block:nth-of-type(odd) .recog { background: rgba(11, 42, 35, 0.55); border-color: rgba(214, 160, 36, 0.45); }
html[data-theme="dark"] .service-block:nth-of-type(even) .recog { background: rgba(11, 42, 35, 0.55); border-color: rgba(214, 160, 36, 0.45); }
html[data-theme="dark"] .service-block:nth-of-type(even) .detail-card { background: var(--kz-green-800); }
html[data-theme="dark"] .service-block__name { color: var(--kz-cream-100); }
html[data-theme="dark"] .service-block__tagline,
html[data-theme="dark"] .service-block__intro { color: rgba(244, 239, 227, 0.72); }
html[data-theme="dark"] .detail-card { background: var(--kz-green-700); border-color: rgba(244, 239, 227, 0.1); }
html[data-theme="dark"] .detail-card h4 { color: var(--kz-cream-100); }
html[data-theme="dark"] .detail-list li { color: rgba(244, 239, 227, 0.78); }


/* ╔════════════════════════════════════════════════════════════════╗
   ║  VARIANT 2 — BOLD OPERATOR (gold canvas)                      ║
   ║  Warm mustard-gold canvas, Poppins Black titles, JetBrains    ║
   ║  Mono labels. Deep brand-green typography, en deep-green slabs║
   ║  als knal-accent voor CTA's.                                  ║
   ╚════════════════════════════════════════════════════════════════╝

   Palette inside this theme:
     --t2-canvas      #E2B447  gold-500   primary surface
     --t2-canvas-alt  #FBF8F1  cream-50   alternating section / paper
     --t2-ink         #0B2A23  green-900  primary text
     --t2-ink-muted   rgba(11,42,35,0.66)
     --t2-line        rgba(11,42,35,0.12)  hairline borders
     --t2-accent      #0F362E  green-800  CTA slab background
*/

body.theme-bold {
  background: var(--kz-gold-500);
  color: var(--kz-green-900);
}
.theme-bold .container { max-width: 1320px; padding-inline: 40px; }

/* — NAV — */
.theme-bold .nav {
  background: var(--kz-gold-500);
  border-bottom: 1px solid rgba(11, 42, 35, 0.18);
}
.theme-bold .nav__inner { padding: 14px 40px; }
.theme-bold .nav__logo { color: var(--kz-green-900); }
.theme-bold .nav__wm { font-weight: 900; letter-spacing: -0.02em; color: var(--kz-green-900); }
.theme-bold .nav__sub { letter-spacing: 0.28em; color: rgba(11, 42, 35, 0.55); }
.theme-bold .nav__wm-ai { color: var(--kz-green-800); }
.theme-bold .nav__link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(11, 42, 35, 0.72);
}
.theme-bold .nav__link:hover { color: var(--kz-green-900); }
.theme-bold .nav__link.is-active { color: var(--kz-green-900); }
.theme-bold .nav__link.is-active::after {
  width: 100%;
  left: 0;
  transform: none;
  bottom: -16px;
  background: var(--kz-green-900);
  height: 1px;
  border-radius: 0;
}
.theme-bold .nav__cta {
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 14px;
  background: var(--kz-green-900);
  color: var(--kz-cream-100);
}
.theme-bold .nav__cta:hover { background: var(--kz-green-800); }

/* — Universele knoppen — */
.theme-bold .btn {
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 20px;
}
.theme-bold .btn--primary {
  background: var(--kz-green-900);
  color: var(--kz-cream-100);
  box-shadow: none;
}
.theme-bold .btn--primary:hover { background: var(--kz-green-800); }
.theme-bold .btn--ghost {
  border-radius: 6px;
  border-color: rgba(11, 42, 35, 0.30);
  color: var(--kz-green-900);
}
.theme-bold .btn--ghost:hover {
  background: rgba(11, 42, 35, 0.06);
  border-color: rgba(11, 42, 35, 0.48);
}
.theme-bold .btn--ghost-light {
  background: var(--kz-green-900);
  color: var(--kz-cream-100);
  border-radius: 6px;
}
.theme-bold .btn--ghost-light:hover { background: var(--kz-green-800); }

/* — Eyebrow / availability — */
.theme-bold .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--kz-green-800);
}
.theme-bold .eyebrow::before { background: var(--kz-green-800); }
.theme-bold .hero__availability {
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(11, 42, 35, 0.08);
  border-color: rgba(11, 42, 35, 0.28);
  color: var(--kz-green-900);
}

/* — HERO — */
.theme-bold .hero {
  background: var(--kz-gold-500);
  padding: 72px 0 96px;
  border-bottom: 1px solid rgba(11, 42, 35, 0.14);
}
.theme-bold .hero__watermark { display: none; }
.theme-bold .hero__inner { grid-template-columns: 1.15fr 1fr; gap: 64px; }
.theme-bold .hero__title {
  font-weight: 900;
  font-size: clamp(48px, 6.6vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 22px 0 22px;
  color: var(--kz-green-900);
}
.theme-bold .hero__title em {
  color: var(--kz-green-900);
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-thickness: 5px;
  text-decoration-color: var(--kz-green-800);
}
.theme-bold .hero__lead { color: rgba(11, 42, 35, 0.72); max-width: 460px; }

/* "Perf card" — light paper card on the gold canvas */
.perf {
  background: var(--kz-cream-50);
  border: 1px solid rgba(11, 42, 35, 0.12);
  border-radius: 10px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-mono);
  color: var(--kz-green-900);
}
.perf__hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(11, 42, 35, 0.62);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(11, 42, 35, 0.10);
}
.perf__hdr .perf__live { display: inline-flex; align-items: center; gap: 8px; color: var(--kz-success); }
.perf__hdr .perf__dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--kz-success);
  box-shadow: 0 0 0 4px rgba(47, 158, 111, 0.18);
  animation: pulse 2.4s var(--ease-out) infinite;
}
.perf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.perf__cell {
  padding: 14px 16px;
  background: rgba(11, 42, 35, 0.04);
  border: 1px solid rgba(11, 42, 35, 0.08);
  border-radius: 6px;
}
.perf__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(11, 42, 35, 0.55);
  text-transform: uppercase;
}
.perf__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--kz-green-900);
  margin-top: 6px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.perf__delta {
  font-size: 11px;
  color: var(--kz-success);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.perf__delta--down { color: var(--kz-danger); }
.perf__bar { display: flex; gap: 3px; height: 28px; align-items: end; margin-top: 10px; }
.perf__bar i { display: block; flex: 1; background: var(--kz-green-800); opacity: 0.28; border-radius: 1px; }
.perf__bar i:nth-last-child(-n+4) { opacity: 0.95; }
.perf__foot {
  font-size: 10px;
  color: rgba(11, 42, 35, 0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 6px;
  display: flex;
  justify-content: space-between;
}

/* — STATS strip directly below hero — */
.theme-bold .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(11, 42, 35, 0.14);
  border-bottom: 1px solid rgba(11, 42, 35, 0.14);
}
.theme-bold .stat {
  padding: 32px 28px;
  border-right: 1px solid rgba(11, 42, 35, 0.14);
}
.theme-bold .stat:last-child { border-right: none; }
.theme-bold .stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 4.4vw, 56px);
  color: var(--kz-green-900);
  letter-spacing: -0.03em;
  line-height: 1;
}
.theme-bold .stat__num em { font-style: normal; color: var(--kz-green-800); }
.theme-bold .stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(11, 42, 35, 0.6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 12px;
}

/* — SECTIONS — */
.theme-bold .section {
  background: var(--kz-gold-500);
  color: var(--kz-green-900);
  padding: 96px 0;
  border-bottom: 1px solid rgba(11, 42, 35, 0.10);
}
/* Alternating sections: paper-cream against the gold canvas. */
.theme-bold .section--cream { background: var(--kz-cream-50); }
.theme-bold .section__title {
  color: var(--kz-green-900);
  font-weight: 900;
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.theme-bold .section__title em {
  color: var(--kz-green-900);
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--kz-green-800);
}
.theme-bold .section__lead { color: rgba(11, 42, 35, 0.72); }

/* — SERVICES — flat tiles on cream alt, no icons, mono numbering — */
.theme-bold .services-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(11, 42, 35, 0.14);
}
.theme-bold .service {
  background: transparent;
  box-shadow: none;
  border: none;
  border-right: 1px solid rgba(11, 42, 35, 0.14);
  border-bottom: 1px solid rgba(11, 42, 35, 0.14);
  border-radius: 0;
  padding: 36px 32px;
}
.theme-bold .service:nth-child(3n) { border-right: none; }
.theme-bold .service:hover {
  transform: none;
  box-shadow: none;
  background: rgba(11, 42, 35, 0.03);
}
.theme-bold .service__icon { display: none; }
.theme-bold .service::before {
  content: attr(data-num);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--kz-green-800);
  margin-bottom: 22px;
}
.theme-bold .service__name {
  color: var(--kz-green-900);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
}
.theme-bold .service__desc { color: rgba(11, 42, 35, 0.70); }
.theme-bold .service__tag {
  background: transparent;
  border: 1px solid rgba(11, 42, 35, 0.22);
  color: rgba(11, 42, 35, 0.78);
}

/* — PROCESS — large faded number — */
.theme-bold .process-grid { border-top: none; border-bottom: none; }
.theme-bold .process-step {
  border-right: 1px solid rgba(11, 42, 35, 0.18);
  padding: 28px 28px 32px;
}
.theme-bold .process-step__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 96px;
  line-height: 1;
  color: rgba(11, 42, 35, 0.14);
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}
.theme-bold .process-step__title { color: var(--kz-green-900); }
.theme-bold .process-step__desc { color: rgba(11, 42, 35, 0.70); }
.theme-bold .process-step__time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kz-green-800);
}

/* — FOUNDER STRIP — */
.theme-bold .home-bio__photo {
  background:
    repeating-linear-gradient(135deg, rgba(11, 42, 35, 0.10) 0 14px, rgba(11, 42, 35, 0.03) 14px 28px),
    rgba(251, 248, 241, 0.55);
  border: 1px solid rgba(11, 42, 35, 0.16);
  border-radius: 8px;
  color: rgba(11, 42, 35, 0.55);
}
.theme-bold .home-bio__photo-label {
  background: rgba(251, 248, 241, 0.85);
  color: rgba(11, 42, 35, 0.65);
  border-radius: 4px;
}
.theme-bold .home-bio p { color: rgba(11, 42, 35, 0.72); }

/* — TESTIMONIALS — editorial, no card chrome — */
.theme-bold .testimonials {
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}
.theme-bold .testimonial {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 28px;
}
.theme-bold .testimonial__quote {
  color: var(--kz-green-900);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
}
.theme-bold .testimonial__quote::before { color: var(--kz-green-800); font-size: 80px; }
.theme-bold .testimonial__person { border-top-color: rgba(11, 42, 35, 0.16); }
.theme-bold .testimonial__name {
  color: var(--kz-green-900);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
.theme-bold .testimonial__role {
  color: rgba(11, 42, 35, 0.6);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.theme-bold .testimonial__avatar {
  background: rgba(11, 42, 35, 0.10);
  color: var(--kz-green-900);
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: 6px;
}
.theme-bold .testimonial__placeholder {
  color: var(--kz-green-800);
  background: rgba(11, 42, 35, 0.08);
  border-radius: 4px;
}

/* — GROEISCAN CTA — deep-green slab as contrast against gold canvas — */
.theme-bold .scan-cta {
  background: var(--kz-green-900);
  border: none;
  border-radius: 8px;
  color: var(--kz-cream-100);
}
.theme-bold .scan-cta__title { color: var(--kz-cream-100); }
.theme-bold .scan-cta__title em {
  color: var(--kz-gold-500);
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 4px;
}
.theme-bold .scan-cta__lead { color: rgba(244, 239, 227, 0.78); }
.theme-bold .scan-cta__list li { color: var(--kz-cream-100); }
.theme-bold .scan-cta__list li svg { color: var(--kz-gold-500); }
.theme-bold .scan-cta .eyebrow { color: var(--kz-gold-500); }
.theme-bold .scan-cta .eyebrow::before { background: var(--kz-gold-500); }
.theme-bold .scan-cta .btn--primary {
  background: var(--kz-gold-500);
  color: var(--kz-green-900);
}
.theme-bold .scan-cta .btn--primary:hover { background: var(--kz-gold-600); }

/* — CTA banner — same deep-green slab treatment — */
.theme-bold .cta-banner {
  background: var(--kz-green-900);
  color: var(--kz-cream-100);
  border-radius: 8px;
}
.theme-bold .cta-banner__k { display: block; opacity: 0.6; }
.theme-bold .cta-banner__title { color: var(--kz-cream-100); }
.theme-bold .cta-banner__title em {
  color: var(--kz-gold-500);
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-thickness: 5px;
}
.theme-bold .cta-banner__lead { color: rgba(244, 239, 227, 0.78); }
.theme-bold .cta-banner .eyebrow { color: var(--kz-gold-500); }
.theme-bold .cta-banner .eyebrow::before { background: var(--kz-gold-500); }
.theme-bold .cta-banner .btn--primary {
  background: var(--kz-gold-500);
  color: var(--kz-green-900);
}
.theme-bold .cta-banner .btn--primary:hover { background: var(--kz-gold-600); }
.theme-bold .cta-banner .btn--ghost-light {
  background: transparent;
  color: var(--kz-cream-100);
  border: 1px solid rgba(244, 239, 227, 0.32);
}
.theme-bold .cta-banner .btn--ghost-light:hover {
  background: rgba(244, 239, 227, 0.08);
  border-color: rgba(244, 239, 227, 0.5);
}

/* — FOOTER — deep-green block to anchor the gold canvas — */
.theme-bold .footer {
  background: var(--kz-green-900);
  color: var(--kz-cream-100);
  border-top: 1px solid rgba(11, 42, 35, 0.18);
  padding-top: 64px;
}
.theme-bold .footer__logo { color: var(--kz-cream-100); }
.theme-bold .footer__wm { color: var(--kz-cream-100); }
.theme-bold .footer__wm span { color: var(--kz-gold-500); }
.theme-bold .footer__sub { color: rgba(244, 239, 227, 0.55); }
.theme-bold .footer__tagline { color: rgba(244, 239, 227, 0.72); }
.theme-bold .footer__contact a { color: rgba(244, 239, 227, 0.78); }
.theme-bold .footer__contact a:hover { color: var(--kz-gold-500); }
.theme-bold .footer__col h4 { font-family: var(--font-mono); color: var(--kz-cream-100); }
.theme-bold .footer__col a { color: rgba(244, 239, 227, 0.7); }
.theme-bold .footer__col a:hover { color: var(--kz-gold-500); }
.theme-bold .footer__bottom {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 239, 227, 0.55);
  border-top-color: rgba(244, 239, 227, 0.12);
}

/* — Responsive tidy-ups — */
@media (max-width: 960px) {
  .theme-bold .services-grid { grid-template-columns: repeat(2, 1fr); }
  .theme-bold .service:nth-child(3n) { border-right: 1px solid rgba(11, 42, 35, 0.14); }
  .theme-bold .service:nth-child(2n) { border-right: none; }
  .theme-bold .stats { grid-template-columns: repeat(2, 1fr); }
  .theme-bold .stat:nth-child(2n) { border-right: none; }
  .theme-bold .stat:nth-child(1), .theme-bold .stat:nth-child(2) { border-bottom: 1px solid rgba(11, 42, 35, 0.14); }
}
@media (max-width: 600px) {
  .theme-bold .container { padding-inline: 24px; }
  .theme-bold .services-grid { grid-template-columns: 1fr; }
  .theme-bold .service { border-right: none; }
  .theme-bold .stats { grid-template-columns: 1fr; }
  .theme-bold .stat { border-right: none; border-bottom: 1px solid rgba(11, 42, 35, 0.14); }
  .theme-bold .stat:last-child { border-bottom: none; }
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║  VARIANT 3 — GREENROOM (deep-green editorial)                 ║
   ║  Signature kenzai-green als canvas, crème typografie, goud    ║
   ║  als zeldzaam accent. Editorial krant-grid met hairline rules ║
   ║  in plaats van cards. Boutique-studio toon.                   ║
   ╚════════════════════════════════════════════════════════════════╝

   Palette inside this theme:
     --t3-canvas      #0F362E  green-800   primary surface
     --t3-canvas-alt  #0B2A23  green-900   alternating darker section
     --t3-paper       #F4EFE3  cream-100   contrast slab (CTA / roster)
     --t3-ink         #F4EFE3  cream-100   primary text
     --t3-ink-muted   rgba(244, 239, 227, 0.66)
     --t3-line        rgba(244, 239, 227, 0.14)  hairline rules
     --t3-accent      #D6A024  gold-600    eyebrow / hairline ticker
*/

body.theme-greenroom {
  background: var(--kz-green-800);
  color: var(--kz-cream-100);
}
.theme-greenroom .container { max-width: 1280px; padding-inline: 36px; }

/* — NAV — */
.theme-greenroom .nav {
  background: var(--kz-green-800);
  border-bottom: 1px solid rgba(244, 239, 227, 0.10);
}
.theme-greenroom .nav__inner {
  padding-top: 18px; padding-bottom: 18px;
}
.theme-greenroom .nav__link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 239, 227, 0.62);
}
.theme-greenroom .nav__link:hover { color: var(--kz-cream-100); }
.theme-greenroom .nav__link.is-active { color: var(--kz-cream-100); }
.theme-greenroom .nav__link.is-active::after {
  background: var(--kz-gold-600);
  width: 6px; height: 6px; border-radius: 999px;
  bottom: -10px;
  left: 50%; transform: translateX(-50%);
}
.theme-greenroom .nav__cta {
  background: transparent;
  color: var(--kz-cream-100);
  border: 1px solid rgba(244, 239, 227, 0.30);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
}
.theme-greenroom .nav__cta:hover {
  background: var(--kz-cream-100);
  color: var(--kz-green-900);
  border-color: var(--kz-cream-100);
}

/* — Universele knoppen — */
.theme-greenroom .btn {
  border-radius: 999px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.theme-greenroom .btn--primary {
  background: var(--kz-cream-100);
  color: var(--kz-green-900);
  box-shadow: none;
}
.theme-greenroom .btn--primary:hover { background: var(--kz-white); }
.theme-greenroom .btn--ghost {
  border-color: rgba(244, 239, 227, 0.26);
  color: var(--kz-cream-100);
}
.theme-greenroom .btn--ghost:hover {
  background: rgba(244, 239, 227, 0.06);
  border-color: rgba(244, 239, 227, 0.44);
}

/* — Eyebrow als tiny mono ticker — */
.theme-greenroom .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--kz-gold-500);
}
.theme-greenroom .eyebrow::before {
  background: var(--kz-gold-500);
}

/* — HERO — */
.theme-greenroom .hero {
  padding: 72px 0 0;
  border-bottom: none;
  background: var(--kz-green-800);
}
.theme-greenroom .hero__watermark { display: none; }
.theme-greenroom .hero__inner {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(244, 239, 227, 0.16);
}
.theme-greenroom .hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 5.6vw, 88px);
  line-height: 1.00;
  letter-spacing: -0.035em;
  margin: 22px 0 28px;
  color: var(--kz-cream-100);
  text-wrap: balance;
}
.theme-greenroom .hero__title em {
  font-style: italic;
  font-weight: 700;
  color: var(--kz-gold-500);
}
.theme-greenroom .hero__lead {
  color: rgba(244, 239, 227, 0.72);
  max-width: 480px;
  font-size: 18px;
  line-height: 1.6;
}
.theme-greenroom .hero__ctas { margin-top: 36px; }
.theme-greenroom .hero__availability {
  margin-top: 44px;
  background: transparent;
  border: 1px solid rgba(244, 239, 227, 0.24);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244, 239, 227, 0.82);
  padding: 10px 18px;
}

/* — HERO RIGHT — Open Roster bulletin (paper card on green) — */
.roster {
  background: var(--kz-cream-100);
  color: var(--kz-green-900);
  border-radius: 4px;
  padding: 0;
  font-family: var(--font-mono);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
}
.roster__hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(15, 54, 46, 0.16);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kz-green-900);
}
.roster__hdr-label { font-weight: 700; }
.roster__hdr-meta { color: rgba(15, 54, 46, 0.55); font-weight: 500; }
.roster__stamp {
  position: absolute;
  top: 18px;
  right: 22px;
  display: none; /* used below as overlay variant; keep simple for now */
}
.roster__list { padding: 8px 0; }
.roster__row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px dashed rgba(15, 54, 46, 0.14);
}
.roster__row:last-child { border-bottom: none; }
.roster__no {
  font-size: 11px;
  font-weight: 700;
  color: rgba(15, 54, 46, 0.55);
}
.roster__row--open .roster__no { color: var(--kz-gold-700); }
.roster__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--kz-green-900);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.roster__meta {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 54, 46, 0.55);
}
.roster__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kz-green-800);
}
.roster__status .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--kz-green-800);
}
.roster__row--open .roster__status { color: var(--kz-gold-700); }
.roster__row--open .roster__status .dot {
  background: transparent;
  border: 1.5px solid var(--kz-gold-700);
}
.roster__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid rgba(15, 54, 46, 0.16);
  background: rgba(15, 54, 46, 0.04);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 54, 46, 0.55);
}
.roster__foot strong {
  font-weight: 700;
  color: var(--kz-green-900);
}

/* — Section banner: hairline rule with § marker + timestamp — */
.banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 239, 227, 0.55);
}
.banner__label {
  color: var(--kz-cream-100);
  font-weight: 700;
}
.banner__label em {
  font-style: normal;
  color: var(--kz-gold-500);
  margin-right: 6px;
}
.banner__rule {
  height: 1px;
  background: rgba(244, 239, 227, 0.18);
  width: 100%;
}
.banner__meta { color: rgba(244, 239, 227, 0.45); }

/* — Stats strip (3 large numerals onder hero) — */
.theme-greenroom .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(244, 239, 227, 0.16);
  border-bottom: 1px solid rgba(244, 239, 227, 0.16);
}
.theme-greenroom .stat {
  padding: 36px 32px;
  border-right: 1px solid rgba(244, 239, 227, 0.16);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.theme-greenroom .stat:last-child { border-right: none; }
.theme-greenroom .stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 80px);
  color: var(--kz-cream-100);
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.theme-greenroom .stat__num em {
  font-style: italic;
  font-weight: 700;
  color: var(--kz-gold-500);
}
.theme-greenroom .stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(244, 239, 227, 0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0;
}

/* — SECTIONS — */
.theme-greenroom .section {
  background: var(--kz-green-800);
  color: var(--kz-cream-100);
  padding: 96px 0;
}
.theme-greenroom .section--cream {
  background: var(--kz-green-900); /* alternating = darker shade, NOT cream */
}
.theme-greenroom .section--cream .section__title,
.theme-greenroom .section--cream .section__lead,
.theme-greenroom .section--cream .eyebrow { color: inherit; }
.theme-greenroom .section--cream .section__title { color: var(--kz-cream-100); }
.theme-greenroom .section--cream .section__lead { color: rgba(244, 239, 227, 0.66); }
.theme-greenroom .section--cream .eyebrow { color: var(--kz-gold-500); }
.theme-greenroom .section--cream .eyebrow::before { background: var(--kz-gold-500); }

.theme-greenroom .section__head {
  align-items: end;
  gap: 56px;
  margin-bottom: 56px;
}
.theme-greenroom .section__title {
  color: var(--kz-cream-100);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.04;
}
.theme-greenroom .section__title em {
  font-style: italic;
  font-weight: 700;
  color: var(--kz-gold-500);
}
.theme-greenroom .section__lead {
  color: rgba(244, 239, 227, 0.66);
  font-size: 16px;
  line-height: 1.6;
  max-width: 460px;
}

/* — SERVICES — editorial numbered list, hairlines, no cards — */
.theme-greenroom .services-grid {
  display: block;
  grid-template-columns: none;
  border-top: 1px solid rgba(244, 239, 227, 0.16);
  gap: 0;
}
.theme-greenroom .service {
  background: transparent;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid rgba(244, 239, 227, 0.16);
  border-radius: 0;
  padding: 36px 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.2fr) auto;
  gap: 28px;
  align-items: baseline;
}
.theme-greenroom .service:hover {
  transform: none;
  box-shadow: none;
  background: rgba(244, 239, 227, 0.025);
}
.theme-greenroom .service__icon { display: none; }
.theme-greenroom .service::before {
  content: attr(data-num);
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--kz-gold-500);
  align-self: baseline;
  padding-top: 6px;
}
.theme-greenroom .service__name {
  color: var(--kz-cream-100);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 0;
}
.theme-greenroom .service__desc {
  color: rgba(244, 239, 227, 0.68);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.theme-greenroom .service__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.theme-greenroom .service__tag {
  background: transparent;
  border: 1px solid rgba(244, 239, 227, 0.22);
  color: rgba(244, 239, 227, 0.7);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  text-transform: uppercase;
}

/* — PROCESS — horizontal tracker with markers — */
.theme-greenroom .process-grid {
  border-top: 1px solid rgba(244, 239, 227, 0.16);
  border-bottom: 1px solid rgba(244, 239, 227, 0.16);
  padding: 0;
  position: relative;
}
.theme-greenroom .process-step {
  border-right: 1px solid rgba(244, 239, 227, 0.16);
  padding: 36px 28px 32px;
  position: relative;
}
.theme-greenroom .process-step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 28px;
  width: 9px; height: 9px;
  background: var(--kz-gold-500);
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--kz-green-800);
}
.theme-greenroom .process-step__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--kz-gold-500);
  margin-bottom: 16px;
}
.theme-greenroom .process-step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--kz-cream-100);
  letter-spacing: -0.01em;
}
.theme-greenroom .process-step__desc {
  color: rgba(244, 239, 227, 0.66);
  font-size: 14px;
  line-height: 1.55;
}
.theme-greenroom .process-step__time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 227, 0.45);
  margin-top: auto;
}

/* — FOUNDER STRIP — */
.theme-greenroom .home-bio {
  align-items: center;
  gap: 56px;
}
.theme-greenroom .home-bio__photo {
  background:
    repeating-linear-gradient(135deg, rgba(244, 239, 227, 0.10) 0 14px, rgba(244, 239, 227, 0.03) 14px 28px),
    var(--kz-green-900);
  border: 1px solid rgba(244, 239, 227, 0.10);
  border-radius: 4px;
  color: rgba(244, 239, 227, 0.45);
}
.theme-greenroom .home-bio__photo-label {
  background: rgba(11, 42, 35, 0.65);
  color: rgba(244, 239, 227, 0.7);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 3px;
}
.theme-greenroom .home-bio p { color: rgba(244, 239, 227, 0.74); }

/* — TESTIMONIALS — editorial pull-quotes, one column wide stacked — */
.theme-greenroom .testimonials {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(244, 239, 227, 0.16);
}
.theme-greenroom .testimonial {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(244, 239, 227, 0.16);
  border-radius: 0;
  padding: 48px 0;
  gap: 28px;
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: center;
  position: relative;
}
.theme-greenroom .testimonial__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.32;
  color: var(--kz-cream-100);
  letter-spacing: -0.01em;
  margin: 0;
}
.theme-greenroom .testimonial__quote::before {
  content: "“";
  position: absolute;
  top: 18px;
  left: -28px;
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1;
  color: var(--kz-gold-500);
  margin: 0;
}
.theme-greenroom .testimonial__person {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  grid-template-columns: 1fr;
  gap: 4px;
  text-align: right;
  justify-self: end;
}
.theme-greenroom .testimonial__avatar { display: none; }
.theme-greenroom .testimonial__name {
  color: var(--kz-cream-100);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}
.theme-greenroom .testimonial__role {
  color: rgba(244, 239, 227, 0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.theme-greenroom .testimonial__placeholder {
  position: static;
  display: inline-block;
  color: var(--kz-gold-500);
  background: rgba(214, 160, 36, 0.10);
  border: 1px solid rgba(214, 160, 36, 0.30);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  border-radius: 2px;
  padding: 4px 8px;
  margin-bottom: 16px;
  grid-column: 1 / -1;
  justify-self: start;
}

/* — GROEISCAN CTA — paper slab on dark green — */
.theme-greenroom .scan-cta {
  background: var(--kz-cream-100);
  color: var(--kz-green-900);
  border: none;
  border-radius: 4px;
}
.theme-greenroom .scan-cta__title { color: var(--kz-green-900); }
.theme-greenroom .scan-cta__title em {
  color: var(--kz-gold-700);
  font-style: italic;
}
.theme-greenroom .scan-cta__lead { color: var(--kz-ink-500); }
.theme-greenroom .scan-cta__list li { color: var(--kz-green-900); }
.theme-greenroom .scan-cta__list li svg { color: var(--kz-gold-700); }
.theme-greenroom .scan-cta .eyebrow { color: var(--kz-gold-700); }
.theme-greenroom .scan-cta .eyebrow::before { background: var(--kz-gold-700); }
.theme-greenroom .scan-cta .btn--primary {
  background: var(--kz-green-900);
  color: var(--kz-cream-100);
}
.theme-greenroom .scan-cta .btn--primary:hover { background: var(--kz-green-800); }

/* — CTA banner — gold slab with green type (inverse of v2) — */
.theme-greenroom .cta-banner {
  background: var(--kz-gold-500);
  color: var(--kz-green-900);
  border-radius: 4px;
}
.theme-greenroom .cta-banner__k { display: block; opacity: 0.85; }
.theme-greenroom .cta-banner__title { color: var(--kz-green-900); }
.theme-greenroom .cta-banner__title em {
  color: var(--kz-green-900);
  font-style: italic;
  font-weight: 700;
}
.theme-greenroom .cta-banner__lead { color: rgba(11, 42, 35, 0.74); }
.theme-greenroom .cta-banner .eyebrow { color: var(--kz-green-900); }
.theme-greenroom .cta-banner .eyebrow::before { background: var(--kz-green-900); }
.theme-greenroom .cta-banner .btn--primary {
  background: var(--kz-green-900);
  color: var(--kz-cream-100);
}
.theme-greenroom .cta-banner .btn--primary:hover { background: var(--kz-green-700); }
.theme-greenroom .cta-banner .btn--ghost-light {
  background: transparent;
  color: var(--kz-green-900);
  border: 1px solid rgba(11, 42, 35, 0.32);
}
.theme-greenroom .cta-banner .btn--ghost-light:hover {
  background: rgba(11, 42, 35, 0.08);
  border-color: rgba(11, 42, 35, 0.5);
}

/* — FOOTER — slightly darker green, hairline top — */
.theme-greenroom .footer {
  background: var(--kz-green-900);
  border-top: 1px solid rgba(244, 239, 227, 0.10);
}

/* — Responsive — */
@media (max-width: 960px) {
  .theme-greenroom .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .theme-greenroom .service {
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px 20px;
  }
  .theme-greenroom .service::before { grid-column: 1; grid-row: 1 / span 3; }
  .theme-greenroom .service__name { grid-column: 2; }
  .theme-greenroom .service__desc { grid-column: 2; }
  .theme-greenroom .service__tags { grid-column: 2; justify-content: flex-start; }
  .theme-greenroom .stats { grid-template-columns: 1fr; }
  .theme-greenroom .stat { border-right: none; border-bottom: 1px solid rgba(244, 239, 227, 0.16); }
  .theme-greenroom .stat:last-child { border-bottom: none; }
  .theme-greenroom .testimonial { grid-template-columns: 1fr; gap: 20px; }
  .theme-greenroom .testimonial__person { text-align: left; justify-self: start; }
}
@media (max-width: 600px) {
  .theme-greenroom .container { padding-inline: 24px; }
  .theme-greenroom .banner { font-size: 10px; gap: 12px; }
}