/* De stijl van de homepage op de hele site (verzoek Koen, 13 oktober 2026: "trek deze stijl door"). De homepage kreeg
   die dag de opbouw van implementconsulting.io in onze crèmestijl (opbouw.css). Deze laag legt hetzelfde over de
   gedeelde bouwstenen van de andere pagina's, zonder hun inhoud te veranderen:
   - labels boven een kop (.eyebrow) als pil;
   - koppen vet en groter, met dezelfde letterafstand;
   - het kopblok van een pagina (.hero-enkel) gecentreerd, met dezelfde zachte gloed;
   - secties (.block) met een dunne lijn over de volle breedte ertussen;
   - de slotblokken met de knop (.slot, .cta, .slotscene) licht, zoals Plan je groeigesprek op de homepage;
   - de drie startpagina's met de gecentreerde hero van de homepage.
   Deze laag laadt na de stylesheets van de pagina zelf (bouw.mjs). De tekstpagina's (.doc) blijven links uitgelijnd,
   omdat lange tekst zo het best leest. */

/* ---- Labels en koppen ---- */
body .eyebrow {
  display: inline-block; width: auto; margin-bottom: 20px; padding: 5px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); background: var(--surface); font-size: 0.85rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink-2);
}
body .grond-groen .eyebrow, body .paneel-groen .eyebrow { background: transparent; border-color: color-mix(in srgb, var(--champagne) 55%, transparent); color: var(--champagne); }
main h1 { font-weight: 700; letter-spacing: -0.03em; }
main section.block h2, main .block-head h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.028em; }
main .block-head { max-width: 46rem; }
main .block-head p { font-size: 1.1rem; line-height: 1.6; }

/* ---- Het kopblok van een pagina ---- */
.hero.hero-enkel { position: relative; isolation: isolate; padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(40px, 6vw, 72px); text-align: center; }
.hero.hero-enkel::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--green-tint) 90%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}
.hero.hero-enkel .hero-copy { align-items: center; margin: 0 auto; max-width: 56rem; }
.hero.hero-enkel h1 { max-width: 20ch; margin-left: auto; margin-right: auto; font-size: clamp(2.5rem, 5.8vw, 4.4rem); line-height: 1.04; }
.hero.hero-enkel .lede { margin-left: auto; margin-right: auto; max-width: 50ch; font-size: clamp(1.08rem, 1.6vw, 1.24rem); }
.hero.hero-enkel .hero-cta, .hero.hero-enkel .groei-actie { justify-content: center; align-items: center; }
.hero.hero-enkel .groei-actie { display: flex; flex-direction: column; }
.hero.hero-enkel .groei-micro, .hero.hero-enkel .eigendom-regel { text-align: center; margin-left: auto; margin-right: auto; }
.hero.hero-enkel nav, .hero.hero-enkel .om-sprong, .hero.hero-enkel .br-keuze { justify-content: center; }
main { overflow-x: clip; }

/* ---- Secties met een lijn ertussen ---- */
section.block { position: relative; }
section.block:not(.grond-wit):not(.grond-groen)::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-top: 1px solid var(--line);
}
.hero + section.block::before { display: none; }
@media (min-width: 701px) { section.block { padding-top: clamp(88px, 9vw, 120px); } }

/* ---- Slotblokken: licht, zoals Plan je groeigesprek op de homepage ---- */
main .slot, main .cta {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-float);
}
main .slot h2, main .cta h2 { color: var(--ink); }
main .slot p, main .cta p { color: var(--ink-2); }
main .slot .btn-gold, main .cta .btn-gold, main .slotscene .btn-gold { background: var(--green); color: var(--green-ink) !important; }
main .slot .btn-gold:hover, main .cta .btn-gold:hover, main .slotscene .btn-gold:hover { background: var(--green-hover); }
main .slot .op-donker .groei-micro, main .cta .op-donker .groei-micro, main .slotscene .op-donker .groei-micro { color: var(--ink-3); }
main .slot .btn-secondary, main .cta .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
main .slot { background: var(--surface-2); box-shadow: none; }
main .slot h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.028em; }
main .slot .knoppen, main .slot .groei-actie { justify-content: flex-end; }

/* De slotscène van de startpagina's (dinsdag.css): licht, gecentreerd, met een kaart. */
main .slotscene-binnen { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
main .slotscene h2 { color: var(--ink); font-weight: 700; letter-spacing: -0.028em; }
main .slotscene h2 span:first-child { color: var(--ink-2); }
main .slotscene .slot-groot { color: var(--ink); }
main .slotscene .slot-eigendom { color: var(--ink-3); }

/* ---- De startpagina's: de gecentreerde hero van de homepage ---- */
.start-held { position: relative; isolation: isolate; }
.start-held::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--green-tint) 90%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.start-held .held-inhoud { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(64px, 9vw, 112px); }
.start-held .held-tekst { display: flex; flex-direction: column; align-items: center; }
.start-held .held-eyebrow {
  display: inline-block; padding: 5px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface);
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.start-held h1 { font-weight: 700; letter-spacing: -0.03em; }
.start-held .held-groot { margin: 0 auto; max-width: 14ch; font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1.02; }
.start-held .held-sub { margin-left: auto; margin-right: auto; text-align: center; }
.start-held .groei-actie { display: flex; flex-direction: column; align-items: center; }
.start-held .groei-micro { text-align: center; }
.start-held .held-beeld { width: 100%; max-width: 580px; margin: 48px auto 0; text-align: left; }
.start-held .held-onder { text-align: center; }
main .start-herken h2, main .hoe h2, main .oprichters h2 { font-weight: 700; letter-spacing: -0.028em; }

/* ---- Tekstpagina's: dezelfde koppen, links uitgelijnd ---- */
.doc h1 { font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.2rem, 5.4vw, 3.4rem); line-height: 1.06; }
.doc h2 { font-weight: 700; letter-spacing: -0.02em; }

/* Een slotblok dat zelf een sectie opent, krijgt zijn lucht al van de sectie. */
section.block > .slot:first-child { margin-top: 0; }