/* Rust voor Groei — huisstijl
   Layout: lichte "ochtend"-pagina, horizonlijn met stip-eindjes uit het logo als terugkerend motief,
   zonnegloed (geel) als accent op actiemomenten. Eén bewust licht thema (wens: lichte achtergrond, donkere letters). */

/* Open Sans (variabel lettertype, gewichten 400–800), zelf gehost: geen verbinding met Google = AVG-vriendelijk.
   Licentie: SIL Open Font License, zie fonts/OFL.txt */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/open-sans-variable.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("../fonts/open-sans-italic-variable.woff2") format("woff2"); }

:root {
  /* Huisstijlkleuren */
  --blauw: #003C6E;        /* huisstijlblauw #004B87, iets donkerder voor leesbaarheid */
  --geel: #FFCD00;
  --groen: #133D24;        /* huisstijlgroen #1C5031, iets donkerder voor leesbaarheid */
  --donkergroen: #0D2814;
  /* Afgeleid */
  --papier: #F8FAF6;        /* licht, heel licht naar groen getint */
  --papier-2: #EDF3EC;      /* rustige sectiekleur */
  --wit: #FFFFFF;
  --inkt: #0D2814;          /* donkere letters = (iets donkerder) donkergroen */
  --inkt-zacht: #2B4232;
  --lijn: #C7D5CB;
  --geel-zacht: #FFF4C2;
  --blauw-zacht: #E3EDF6;

  --font: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Typeschaal */
  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.05rem, .98rem + .3vw, 1.2rem);
  --t-xl: clamp(1.25rem, 1.05rem + .7vw, 1.55rem);
  --t-xxl: clamp(1.7rem, 1.25rem + 1.5vw, 2.3rem);

  --radius: 14px;
  --breed: 1160px;
  --tekst: none;      /* smartphone en tablet: tekst over de volle breedte */
  --blok: none;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blauw); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--groen); }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

h1, h2, h3 { color: var(--blauw); line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-xxl); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: var(--t-l); font-weight: 700; }
p { margin: 0; max-width: var(--tekst); }
strong { font-weight: 700; }

.skip { position: absolute; left: -999px; top: 0; background: var(--geel); color: var(--donkergroen); padding: .6rem 1rem; z-index: 100; font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap {
  width: 100%;
  max-width: calc(var(--breed) + 2 * 24px);
  margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
@media (max-width: 480px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: rgba(248, 250, 246, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .4rem; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--blauw); min-width: 0; }
.brand img { width: 42px; height: 42px; flex: none; }
/* Logotekst zoals in het officiële logo: naam met lijntjes en rondjes, daaronder gecentreerd de diensten */
.brand-text { display: grid; justify-items: center; line-height: 1.1; min-width: 0; }
.brand-name { font-weight: 700; font-size: 1.15rem; letter-spacing: -.005em; white-space: nowrap; display: inline-flex; align-items: flex-end; gap: 4px; }
.brand-name::before, .brand-name::after { content: ""; width: 26px; height: 7px; margin-bottom: .2em; flex: none;
  background: radial-gradient(circle at 3.5px 3.5px, transparent 1.6px, currentColor 1.7px, currentColor 2.9px, transparent 3px) left center / 7px 7px no-repeat,
              linear-gradient(currentColor, currentColor) 6px center / calc(100% - 6px) 1.6px no-repeat; }
.brand-name::after { transform: scaleX(-1); }
.brand-sub { font-size: .86rem; letter-spacing: .01em; white-space: nowrap; margin-top: .1rem; }
.brand:hover { color: var(--blauw); }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.nav a { display: block; padding: .5rem .75rem; border-radius: 999px; text-decoration: none; color: var(--inkt); font-weight: 600; font-size: var(--t-s); }
.nav a:hover { background: var(--blauw-zacht); color: var(--blauw); }
.nav a[aria-current="page"] { color: var(--blauw); background: var(--blauw-zacht); }
.nav .nav-cta a { background: var(--blauw); color: var(--wit); margin-left: .35rem; }
.nav .nav-cta a:hover { background: var(--groen); color: var(--wit); }

.nav-toggle { display: none; background: none; border: 2px solid var(--blauw); color: var(--blauw); border-radius: 999px; padding: .45rem .9rem; font: inherit; font-weight: 700; font-size: var(--t-s); cursor: pointer; }
@media (max-width: 1240px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; }
  .nav { position: absolute; inset: 100% 0 auto 0; background: var(--papier); border-bottom: 1px solid var(--lijn); display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; padding: .75rem max(16px, env(safe-area-inset-right, 0px)) 1.25rem max(16px, env(safe-area-inset-left, 0px)); gap: .15rem; }
  .nav a { padding: .8rem 1rem; font-size: var(--t-m); }
  .nav .nav-cta a { margin: .5rem 0 0; text-align: center; }
}
@media (max-width: 420px) { .brand { gap: .5rem; } .brand-sub { font-size: .74rem; } .brand img { width: 38px; height: 38px; } .brand-name { font-size: 1.05rem; gap: 3px; } .brand-name::before, .brand-name::after { width: 16px; } }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem; border-radius: 999px; border: 0;
  font: inherit; font-weight: 700; font-size: var(--t-m); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-cta { background: var(--blauw); color: var(--wit); box-shadow: 0 10px 24px -14px rgba(0, 60, 110, .7); }
.btn-cta:hover { background: #002F57; color: var(--wit); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0, 60, 110, .8); }
.btn-cta:active { transform: translateY(1px); box-shadow: 0 6px 14px -10px rgba(0, 60, 110, .7); }
.btn-cta .arrow { color: var(--geel); }
.btn-cta .arrow { transition: transform .18s ease; }
.btn-cta:hover .arrow { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--blauw); border: 2px solid var(--blauw); padding: .85rem 1.4rem; }
.btn-ghost:hover { background: var(--blauw); color: var(--wit); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---------- Secties ---------- */
main { display: block; }
.section { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
/* Twee secties met dezelfde achtergrond direct na elkaar: geen dubbele witruimte */
.section:not(.section-alt) + .section:not(.section-alt),
.section-alt + .section-alt { padding-top: 0; }
.page-hero + .section:not(.section-alt) { padding-top: clamp(.5rem, 1.5vw, 1.25rem); }
.section-alt { background: var(--papier-2); }
.stack { display: grid; gap: 1.1rem; }
.stack-l { display: grid; gap: 2rem; }
.eyebrow { font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--groen); display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--geel); border-radius: 2px; }
.lead { font-size: var(--t-l); line-height: 1.55; color: var(--inkt); }
.muted { color: var(--inkt-zacht); }

/* Horizonlijn met stip-eindjes (uit het logo) */
.horizon { position: relative; height: 12px; margin-block: 0; }
.horizon::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--blauw); transform: translateY(-50%); }
.horizon::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 6px 50%, var(--papier) 3px, var(--blauw) 3.5px, var(--blauw) 5.5px, transparent 6px),
  radial-gradient(circle at calc(100% - 6px) 50%, var(--papier) 3px, var(--blauw) 3.5px, var(--blauw) 5.5px, transparent 6px); }

/* ---------- Page hero (subpagina's) ---------- */
.page-hero { position: relative; padding-block: clamp(2.5rem, 4.5vw, 3.75rem) clamp(2rem, 3.5vw, 3rem); overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; width: 620px; height: 620px; right: -160px; top: -300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 0, .38), rgba(255, 205, 0, 0) 65%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; display: grid; gap: 1.25rem; }
.page-hero h1 { max-width: 26ch; }
/* Samen-foto: compacte, rechthoekige uitsnede */
.samen { margin: .5rem 0; width: min(100%, 340px); }
.samen img { width: 100%; height: auto; aspect-ratio: 740 / 788; object-fit: cover; border-radius: var(--radius); box-shadow: 0 18px 40px -28px rgba(19, 54, 28, .55); }
@media (max-width: 560px) { .samen { width: min(100%, 280px); } }
/* Tekst links, foto rechts op tablet en pc; op smartphone de foto onder de tekst */
.samen-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; max-width: 1040px; }
.samen-rij .samen { margin: 0; width: 100%; }
@media (max-width: 699px) {
  .samen-rij { grid-template-columns: 1fr; gap: 1.25rem; }
  .samen-rij .samen { width: min(100%, 280px); }
}

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(2.5rem, 4.5vw, 3.75rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { max-width: 22ch; margin-top: 1rem; }
.hero h1 .stil { display: block; }
.hero h1 .eerste { display: block; padding-left: .14em; }
.hero h1 .punt { margin-left: -.07em; }
.begint-j { text-indent: .15em; }
.groei { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; row-gap: .2rem; font-weight: 700; color: var(--inkt); }
.groei li { line-height: 1.4; font-size: var(--t-l); }
.groei li:nth-child(4) { flex-basis: 100%; font-size: var(--t-l); font-weight: 600; margin-top: 1.1rem; color: var(--blauw); }
.hero-in { display: grid; position: relative; }
.hero::before { content: ""; position: absolute; width: 680px; height: 680px; right: -180px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 0, .38), rgba(255, 205, 0, 0) 65%); pointer-events: none; }
.herkenbaar { max-width: var(--blok); }
.hero + .section:not(.section-alt) { padding-top: clamp(.5rem, 1.5vw, 1.25rem); }
.hero-herkenbaar { display: grid; gap: .9rem; margin-top: .6rem; max-width: none; }
.hero-herkenbaar p { max-width: var(--tekst); }
.hero-beeld { margin: 0; justify-self: center; width: 100%; max-width: 500px; }
.hero-beeld img { display: block; width: 100%; height: auto; animation: opkomst 1.2s cubic-bezier(.2, .8, .2, 1) both; }
/* Tablet en pc: afbeelding rechts naast de tekst. Smartphone: te krap, dus verborgen. */
@media (min-width: 700px) and (max-width: 820px) {
  .hero-in.hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.5rem; }
}
@media (max-width: 699px) {
  .hero-beeld { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-beeld img { animation: none; } }

.sun { position: relative; aspect-ratio: 1; width: min(100%, 420px); justify-self: center; }
.sun::before { content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 0, .55) 0%, rgba(255, 205, 0, .18) 42%, rgba(255, 205, 0, 0) 68%); animation: gloed 6s ease-in-out infinite alternate; }
.sun img { position: relative; width: 100%; height: auto; animation: opkomst 1.2s cubic-bezier(.2, .8, .2, 1) both; filter: drop-shadow(0 24px 40px rgba(19, 54, 28, .25)); }
.sun-line { position: absolute; left: -12%; right: -12%; bottom: 8%; }
@keyframes opkomst { from { transform: translateY(18px); } to { transform: translateY(0); } }
@keyframes gloed { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.05); opacity: 1; } }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .sun { width: min(62vw, 300px); order: -1; }
}

/* ---------- Petten-sectie ---------- */
.petten { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.petten li { padding: .55rem 1rem; border-radius: 999px; background: var(--wit); border: 1.5px solid var(--lijn); font-weight: 600; color: var(--inkt); font-size: var(--t-s); }
.petten li.jij { background: var(--blauw); color: var(--wit); border-color: var(--blauw); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

.grote-vraag { font-size: var(--t-xl); font-weight: 800; color: var(--blauw); line-height: 1.2; }

/* ---------- Vier pijlers ---------- */
.pijlers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.pijler { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.6rem 1.4rem 1.5rem; display: grid; gap: .6rem; align-content: start; text-decoration: none; color: var(--inkt); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pijler:hover { transform: translateY(-4px); border-color: var(--blauw); color: var(--inkt); box-shadow: 0 18px 36px -24px rgba(0, 75, 135, .55); }
.pijler .afk { font-size: clamp(1.5rem, 1.1rem + .8vw, 1.9rem); font-weight: 800; color: var(--blauw); line-height: 1; letter-spacing: -.02em; }
.pijler .afk span { color: var(--geel); }
.pijler h3 { font-size: 1.05rem; color: var(--groen); }
.pijler p { font-size: var(--t-s); color: var(--inkt-zacht); }
@media (max-width: 960px) { .pijlers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pijlers { grid-template-columns: 1fr; } }

/* ---------- Review ---------- */
.review { margin: 0; position: relative; background: var(--wit); border-radius: calc(var(--radius) * 1.5); padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid var(--lijn); display: grid; gap: 1.25rem; max-width: 900px; }
.review::before { content: "\201C"; position: absolute; top: -.35em; left: .3em; font-size: 7rem; line-height: 1; font-weight: 800; color: var(--geel); }
.review blockquote { margin: 0; display: grid; gap: 1rem; font-size: var(--t-l); line-height: 1.6; }
.review blockquote p { max-width: none; }
.review figcaption { font-weight: 700; color: var(--blauw); display: flex; align-items: center; gap: .6rem; }
.review figcaption::before { content: ""; width: 24px; height: 2px; background: var(--blauw); }

/* ---------- CTA-band ---------- */
/* Afsluitende CTA: licht, met onderaan het landschap uit het logo ("weer met beide benen op de grond") */
.cta-band { position: relative; overflow: hidden; color: var(--inkt);
  background: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(255, 205, 0, .38), rgba(255, 205, 0, 0) 70%), var(--papier); }
.cta-band::before { display: none; }
/* Het landschap schaalt mee met de schermbreedte (verhouding 1440:300), zodat er nooit boomtoppen wegvallen */
.cta-band { --landschap: calc(100vw * 300 / 1440); }
.cta-band::after { z-index: 0; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--landschap);
  background: url("../img/landschap-zon.svg") center bottom / 100% 100% no-repeat; pointer-events: none;
 }
.cta-band .wrap { position: relative; z-index: 1; padding-block: clamp(2.75rem, 5vw, 4rem) calc(var(--landschap) + 1.5rem); display: grid; gap: 1rem; justify-items: center; text-align: center; }
.cta-band h2 { color: var(--blauw); max-width: 26ch; font-size: var(--t-xxl); line-height: 1.15; }
.cta-band p { color: var(--inkt); max-width: 56ch; font-size: var(--t-l); }
.cta-band .btn { margin-top: .5rem; }
.cta-band.alleen-landschap { height: calc(var(--landschap) + 2rem); }
@media (max-width: 699px) { .cta-band { --landschap: calc(100vw * 230 / 480); } .cta-band::after { background-image: url("../img/landschap-zon-mobiel.svg"); } }
/* CTA-knoppen: niet vet, wel duidelijk (donkere tekst op geel) */
.btn { font-weight: 500; }

/* ---------- Even voorstellen ---------- */
.persoon { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.persoon.omgekeerd { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.persoon + .persoon { margin-top: clamp(4rem, 8vw, 6rem); }
.persoon.omgekeerd .foto { order: 2; }
.persoon.enkel { grid-template-columns: minmax(0, 1fr); max-width: var(--blok); }
.foto.foto-in-tekst { position: static; max-width: 340px; margin: .25rem 0 .5rem; }
.foto { position: sticky; top: 110px; margin: 0; }
.foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
.foto.danielle img { object-position: 64% 30%; }
.foto.alwin img { object-position: 30% 40%; }
.foto figcaption { margin-top: .8rem; font-size: var(--t-s); color: var(--inkt-zacht); display: flex; gap: .5rem; align-items: center; }
.foto figcaption strong { color: var(--blauw); }
.persoon .tekst { display: grid; gap: 1.1rem; min-width: 0; }
.persoon h2 .rol { display: block; font-size: var(--t-m); font-weight: 600; color: var(--groen); letter-spacing: 0; margin-top: .4rem; }
.kernwoorden { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: .25rem 0; }
.kernwoorden li { background: var(--wit); color: var(--blauw); border: 1.5px solid var(--blauw); font-weight: 500; font-size: 1.05rem; padding: .4rem 1.1rem; border-radius: 999px; }
.motto { font-size: var(--t-l); font-weight: 700; color: var(--blauw); border-left: 4px solid var(--geel); padding: .2rem 0 .2rem 1.1rem; margin: .5rem 0; }
@media (max-width: 820px) {
  .persoon, .persoon.omgekeerd { grid-template-columns: 1fr; }
  .foto { max-width: 340px; }
  .persoon.omgekeerd .foto { order: 0; }
  .foto { position: static; }
}

/* ---------- Diensten ---------- */
.diensten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.dienst { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.75rem; display: grid; gap: 1rem; align-content: start; }
.dienst header { display: flex; align-items: center; gap: .9rem; }
.dienst .icoon { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--blauw-zacht); color: var(--blauw); }
.dienst .icoon svg { width: 24px; height: 24px; }
.dienst h2 { font-size: 1.3rem; }
.dienst-sub { font-size: var(--t-s); font-weight: 600; color: var(--groen); margin-top: .15rem; }
.dienst.breed { grid-column: 1 / -1; }
.vinkjes { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.vinkjes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; align-items: start; }
.vinkjes li::before { content: ""; width: 18px; height: 18px; margin-top: .25em; border-radius: 50%; background: var(--geel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.8' fill='none' stroke='%2313361C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.vinkjes ul { grid-column: 2; list-style: none; padding: .4rem 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.vinkjes ul li { display: block; background: var(--papier-2); border-radius: 999px; padding: .2rem .75rem; font-size: var(--t-s); }
.vinkjes ul li::before { display: none; }
.dienst.breed .vinkjes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 820px) { .diensten { grid-template-columns: 1fr; } .dienst.breed .vinkjes { grid-template-columns: 1fr; } }

.twijfel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.5rem 1.75rem; border-radius: var(--radius); background: #F2F2EE; border: 1.5px dashed #E1B800; }
.twijfel-tekst { display: grid; gap: .35rem; min-width: 0; flex: 1 1 28rem; }
.twijfel p { color: var(--donkergroen); }
.twijfel-vraag { font-size: var(--t-l); }

/* ---------- Voor wie ---------- */
.match { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; }
.match .kaart { border-radius: var(--radius); padding: 2rem; display: grid; gap: 1.1rem; align-content: start; }
.kaart.wel { background: var(--wit); border: 2px solid var(--blauw); }
.kaart.niet { background: var(--papier-2); border: 1px solid var(--lijn); }
.kaart h2 { font-size: 1.2rem; }
.kaart.niet h2 { color: var(--groen); }
.kruisjes { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.kruisjes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; }
.kruisjes li::before { content: ""; width: 18px; height: 18px; margin-top: .25em; border-radius: 50%; background: var(--lijn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' stroke='%2313361C' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.groot-getal { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); font-weight: 800; color: var(--blauw); line-height: 1; letter-spacing: -.03em; }
.groot-getal small { font-size: .3em; letter-spacing: 0; font-weight: 700; color: var(--groen); display: block; margin-top: .5rem; }
@media (max-width: 820px) { .match { grid-template-columns: 1fr; } }

/* ---------- Samenwerking ---------- */
.vormen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.vorm { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.75rem; display: grid; gap: .8rem; align-content: start; grid-template-rows: auto auto 1fr auto; }
.vorm .label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--groen); }
.vorm h2 { font-size: 1.25rem; }
.vorm .prijs { font-weight: 700; color: var(--inkt-zacht); font-size: var(--t-s); border-top: 1px solid var(--lijn); padding-top: .9rem; }
.vorm.aanrader { border: 2px solid var(--blauw); position: relative; }
.vorm.aanrader .badge { position: absolute; top: -.85rem; left: 1.5rem; background: var(--geel); color: var(--donkergroen); font-weight: 800; font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; padding: .3rem .75rem; border-radius: 999px; }
@media (max-width: 960px) { .vormen { grid-template-columns: 1fr; } }
.stappen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; counter-reset: stap; }
.stappen li { counter-increment: stap; display: grid; gap: .5rem; align-content: start; position: relative; padding-top: 3.2rem; }
.stappen li::before { content: counter(stap); position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--blauw); color: var(--wit); }
.stappen li::after { content: ""; position: absolute; top: 1.2rem; left: 3rem; right: -.6rem; height: 2px; background: var(--lijn); }
.stappen li:last-child::after { display: none; }
.stappen h3 { font-size: 1.05rem; color: var(--groen); }
.stappen p { font-size: var(--t-s); color: var(--inkt-zacht); }
@media (max-width: 820px) { .stappen { grid-template-columns: 1fr 1fr; } .stappen li::after { display: none; } }
@media (max-width: 480px) { .stappen { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form { background: var(--wit); border: 1px solid var(--lijn); border-radius: calc(var(--radius) * 1.3); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.1rem; }
.veld { display: grid; gap: .4rem; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 560px) { .veld-rij { grid-template-columns: 1fr; } }
.veld label { font-weight: 700; font-size: var(--t-s); color: var(--inkt); }
.veld .opt { font-weight: 400; color: var(--inkt-zacht); }
.veld input, .veld textarea, .veld select {
  width: 100%; font: inherit; color: var(--inkt); background: var(--papier);
  border: 1.5px solid var(--lijn); border-radius: 10px; padding: .8rem .9rem; transition: border-color .15s ease, background .15s ease;
}
.veld textarea { min-height: 150px; resize: vertical; }
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: none; border-color: var(--blauw); background: var(--wit); box-shadow: 0 0 0 3px var(--blauw-zacht); }
.veld [aria-invalid="true"] { border-color: #B3261E; }
.fout { color: #B3261E; font-size: var(--t-s); font-weight: 600; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.akkoord { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; font-size: var(--t-s); align-items: start; }
.akkoord input { width: 18px; height: 18px; margin-top: .2em; accent-color: var(--blauw); }
.form-status { padding: .9rem 1rem; border-radius: 10px; font-weight: 600; }
.form-status.ok { background: #E3F2E6; color: var(--donkergroen); }
.form-status.err { background: #FBE9E7; color: #8C1D16; }
.cf-turnstile { min-height: 65px; }

.gegevens { display: grid; gap: 1.5rem; }
.gegevens .blok { display: grid; gap: .5rem; }
.gegevens h2 { font-size: 1.1rem; }
.beschermd { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; user-select: none; -webkit-user-select: none; }
.beschermd svg { width: 20px; height: 20px; flex: none; color: var(--groen); }
.beschermd canvas { display: block; max-width: 100%; }
.telefoons { display: grid; gap: .6rem; }
.beschermd .land { margin-left: auto; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; color: var(--blauw); background: var(--blauw-zacht); border-radius: 999px; padding: .15rem .55rem; }
.klein { font-size: var(--t-xs); color: var(--inkt-zacht); }

/* ---------- Tekstpagina (privacy) ---------- */
.prose { display: grid; gap: 1rem; max-width: var(--blok); }
.prose h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.prose h3 { font-size: 1.1rem; margin-top: .75rem; color: var(--groen); }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.tabel-wrap { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 10px; background: var(--wit); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-s); min-width: 560px; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { background: var(--papier-2); color: var(--blauw); }
tr:last-child td { border-bottom: 0; }
mark.invullen { background: var(--geel-zacht); color: var(--donkergroen); padding: 0 .25em; border-radius: 4px; outline: 1px dashed #E1B800; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 2.5rem 2rem; }
.footer-nav { margin-bottom: 1.25rem; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-s, .95rem); font-weight: 600; color: var(--blauw); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-nav a[aria-current="page"] { color: var(--inkt); text-decoration: underline; text-decoration-color: var(--geel); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.footer-nav a:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 699px) {
  .footer-nav { margin-bottom: .75rem; }
  .footer-nav ul { flex-wrap: nowrap; justify-content: space-between; gap: 0 1.5vw; }
  .footer-nav a { font-size: min(.8rem, 2.9vw); min-height: 40px; white-space: nowrap; }
  .footer-nav a[aria-current="page"] { text-decoration-thickness: 2px; text-underline-offset: 5px; }
}
/* Menu onderaan alleen op smartphones; op tablet en laptop verborgen */
@media (min-width: 700px) {
  .footer-nav { display: none; }
}
.site-footer .horizon::after { background:
  radial-gradient(circle at 6px 50%, var(--papier) 3px, var(--blauw) 3.5px, var(--blauw) 5.5px, transparent 6px),
  radial-gradient(circle at calc(100% - 6px) 50%, var(--papier) 3px, var(--blauw) 3.5px, var(--blauw) 5.5px, transparent 6px); }
.footer-meta { margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: var(--t-xs); color: var(--inkt-zacht); }
.footer-meta nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.footer-meta a, .footer-meta button { color: var(--inkt-zacht); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.footer-meta a:hover, .footer-meta button:hover { color: var(--blauw); text-decoration: underline; }

/* ---------- Cookiemelding ---------- */
.cookie {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.cookie-kaart {
  pointer-events: auto; max-width: 760px; margin-inline: auto; background: var(--wit); color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(19, 54, 28, .45);
  padding: 1.4rem 1.5rem; display: grid; gap: .9rem; animation: omhoog .35s ease both;
}
@keyframes omhoog { from { transform: translateY(16px); opacity: .4; } to { transform: none; opacity: 1; } }
.cookie h2 { font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.cookie p { font-size: var(--t-s); max-width: none; }
.cookie .btn-row { gap: .6rem; }
.cookie .btn { padding: .7rem 1.15rem; font-size: var(--t-s); }
.btn-keuze { background: var(--blauw); color: var(--wit); }
.btn-keuze:hover { background: var(--groen); color: var(--wit); }
.btn-link { background: none; border: 0; color: var(--blauw); font: inherit; font-weight: 700; font-size: var(--t-s); text-decoration: underline; cursor: pointer; padding: .7rem .4rem; }
.cookie-opties { display: grid; gap: .6rem; border-top: 1px solid var(--lijn); padding-top: .9rem; }
.optie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .75rem .9rem; background: var(--papier); border-radius: 10px; }
.optie strong { display: block; font-size: var(--t-s); }
.optie span { font-size: var(--t-xs); color: var(--inkt-zacht); }
.schakel { position: relative; width: 46px; height: 26px; flex: none; }
.schakel input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.schakel span { position: absolute; inset: 0; border-radius: 999px; background: var(--lijn); transition: background .15s ease; }
.schakel span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--wit); transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.schakel input:checked + span { background: var(--blauw); }
.schakel input:checked + span::after { transform: translateX(20px); }
.schakel input:disabled + span { opacity: .55; }
.schakel input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 2px; }
.prose .btn-link { padding: 0; font-size: inherit; }

/* ---------- 404 ---------- */
.niet-gevonden { text-align: left; }

/* ---------- Veelgestelde vragen ---------- */
.faq { display: grid; gap: .75rem; max-width: 860px; }
.faq details { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.4rem; font-weight: 700; color: var(--blauw); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--groen); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.4rem 1.25rem; color: var(--inkt-zacht); }

/* ---------- Voorbeeldwebsites ---------- */
.voorbeelden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.voorbeeld { display: grid; grid-template-rows: auto 1fr; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--inkt); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.voorbeeld:hover { transform: translateY(-4px); border-color: var(--blauw); color: var(--inkt); box-shadow: 0 22px 40px -26px rgba(0, 75, 135, .6); }
.voorbeeld img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--lijn); }
.voorbeeld-tekst { padding: 1.4rem 1.5rem 1.5rem; display: grid; gap: .5rem; align-content: start; }
.voorbeeld .branche { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--groen); }
.voorbeeld h2 { font-size: 1.25rem; }
.voorbeeld p { color: var(--inkt-zacht); font-size: var(--t-s); }
.voorbeeld .bekijk { font-weight: 700; color: var(--blauw); margin-top: .3rem; }
.voorbeeld:hover .bekijk span { display: inline-block; transform: translateX(4px); transition: transform .2s ease; }
.klein-link { font-weight: 700; }
@media (max-width: 760px) { .voorbeelden { grid-template-columns: 1fr; } }

/* ---------- Dienstpagina's (HR, IT, virtual assistance, copywriting) ---------- */
.kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--t-xs); color: var(--inkt-zacht); }
.kruimel a { color: var(--blauw); text-decoration: none; font-weight: 600; }
.kruimel a:hover { text-decoration: underline; }
.kruimel [aria-current] { color: var(--inkt); font-weight: 600; }
.dienst-kop { display: flex; align-items: center; gap: 1rem; }
.icoon.groot { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--blauw-zacht); color: var(--blauw); box-shadow: 0 0 0 6px rgba(255, 205, 0, .35); }
.icoon.groot svg { width: 32px; height: 32px; }
.dienst-hero .lead { max-width: var(--tekst); }
.onderdelen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.onderdeel { background: var(--wit); border: 1px solid var(--lijn); border-top: 4px solid var(--geel); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: grid; gap: .45rem; align-content: start; }
.onderdeel h3 { font-size: 1.1rem; color: var(--blauw); }
.onderdeel p { color: var(--inkt-zacht); }
.expert { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; max-width: 820px; }
.expert img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; border: 4px solid var(--wit); box-shadow: 0 0 0 3px var(--geel), 0 18px 36px -24px rgba(19, 54, 28, .55); }
.expert h2 { font-size: var(--t-xl); }
.pijlers-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pijler-klein { padding: 1.25rem 1.3rem; }
.dienst h2 a { color: inherit; text-decoration: none; }
.dienst h2 a:hover { color: var(--blauw); text-decoration: underline; text-decoration-color: var(--geel); text-decoration-thickness: 3px; text-underline-offset: 4px; }
@media (max-width: 820px) {
  .onderdelen, .pijlers-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .expert { grid-template-columns: 1fr; justify-items: start; }
  .expert img { width: 120px; height: 120px; }
  .dienst-kop { align-items: flex-start; }
  .icoon.groot { width: 52px; height: 52px; }
  .icoon.groot svg { width: 26px; height: 26px; }
}
.expert img.portret-danielle { object-position: 50% 50%; }
.expert img.portret-alwin { object-position: 50% 50%; }

/* Klikbare blokken: duidelijk maken dat je erop kunt klikken */
.pijlers-hint { font-size: var(--t-s); font-weight: 600; color: var(--groen); margin-bottom: -1rem; }
.pijler { grid-template-rows: auto auto 1fr auto; }
.pijler-meer { margin-top: .4rem; font-size: var(--t-s); font-weight: 700; color: var(--blauw); display: inline-flex; gap: .35rem; align-items: center; }
.pijler-meer span { transition: transform .2s ease; }
.pijler:hover .pijler-meer, .pijler:focus-visible .pijler-meer { text-decoration: underline; text-decoration-color: var(--geel); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.pijler:hover .pijler-meer span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .pijler:hover .pijler-meer span { transform: none; } }

/* Over ons: samen-foto boven de tekst */
.samen.samen-breed { width: min(100%, 640px); margin: .5rem 0 1.25rem; }
.samen.samen-breed img { aspect-ratio: 1200 / 903; }
@media (max-width: 560px) { .samen.samen-breed { width: 100%; } }

/* Nieuwe portretten zijn al vierkant bijgesneden */
.foto img.vierkant { object-position: 50% 50%; }

/* Homepage: foto van ons bovenaan, daarna de tekst */
.home-foto { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.home-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: 0 22px 44px -32px rgba(19, 54, 28, .6); }
@media (min-width: 600px) { .home-foto img { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .home-foto img { aspect-ratio: 1600 / 686; max-height: 460px; } }
@media (max-width: 599px) { .home-foto img { max-height: 380px; aspect-ratio: auto; } }

/* Maximale regellengte per schermformaat:
   smartphone/tablet = volle breedte, laptop = ruim, groot scherm = iets begrensd voor de leesbaarheid */
@media (min-width: 1024px) { :root { --tekst: 80ch; --blok: 860px; } }
@media (min-width: 1440px) { :root { --tekst: 84ch; --blok: 900px; } }

/* Rustiger uitstraling: koppen en teksten in blokken niet vet (lettergrootte blijft gelijk).
   Knoppen, menu, logo-tekst en formulierlabels blijven wel vet voor de duidelijkheid. */
h1, h2, h3, h4,
.eyebrow, .grote-vraag, .groei, .groei li, .groei li:nth-child(4),
.pijler .afk, .pijler-meer, .pijlers-hint,
.persoon h2 .rol, .motto,
.dienst-sub, .review figcaption,
.groot-getal, .groot-getal small,
.vorm .label, .vorm .prijs, .vorm.aanrader .badge,
.faq summary, .klein-link, .onderdeel h3,
.twijfel-vraag strong, .cta-band h2 { font-weight: 400; }

/* Waarmee we helpen: uitleg per vakgebied op dezelfde pagina */
.dienst-sectie, #overzicht, .persoon { scroll-margin-top: 96px; }
.dienst-sectie .dienst-kop h2 { font-size: var(--t-xxl); line-height: 1.15; }
.dienst-sectie .lead { max-width: var(--tekst); }
.onderdelen-kop { font-size: var(--t-xl); color: var(--blauw); }
.onderdeel h4 { font-size: 1.1rem; color: var(--blauw); margin: 0; font-weight: 400; }
.expert-compact { max-width: var(--blok); padding-top: .5rem; }
.expert-naam { font-size: var(--t-l); color: var(--blauw); }
.expert-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.terug-link { color: var(--inkt-zacht); }
.section-alt .onderdeel { background: var(--wit); }

/* Foto bovenaan (Home, Samenwerken): onderkant vervaagt in de achtergrond, tekst loopt er iets overheen */
.home-foto { position: relative; z-index: 0; margin-bottom: calc(-1 * clamp(2.5rem, 7vw, 6rem)); }
.home-foto img { box-shadow: none; border-radius: var(--radius) var(--radius) 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .45) 83%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .45) 83%, transparent 100%); }
.home-foto ~ * { position: relative; z-index: 1; }
/* Over ons: zelfde vervaging onder de foto */
.samen.samen-breed { position: relative; z-index: 0; margin-bottom: calc(-1 * clamp(1.5rem, 4vw, 3rem)); }
.samen.samen-breed img { box-shadow: none; border-radius: var(--radius) var(--radius) 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .45) 83%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .45) 83%, transparent 100%); }
.samen.samen-breed ~ * { position: relative; z-index: 1; }
@media (max-width: 699px) { .samen.samen-breed { margin-bottom: -.75rem; } .home-foto { margin-bottom: -1rem; } }
.home-foto ~ .eyebrow, .home-foto ~ div > .eyebrow:first-child, .home-foto ~ h1, .home-foto ~ div > h1 { text-shadow: 0 0 8px var(--papier), 0 0 2px var(--papier); }


/* Homepage: antwoord + knoppen in de hero, 'waarom' en 'zelf gebouwd' */
.hero-antwoord { font-size: var(--t-l); color: var(--inkt); margin-top: .25rem; }
.hero-herkenbaar .btn-row { margin-top: .5rem; }
.waarom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.waarom .onderdeel h3 { font-size: 1.1rem; color: var(--blauw); }
.zelfgebouwd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center;
  background: var(--wit); border: 1px solid var(--lijn); border-left: 4px solid var(--blauw); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); }
.zelfgebouwd h2 { font-size: var(--t-xl); }
@media (max-width: 820px) { .waarom { grid-template-columns: 1fr; } .zelfgebouwd { grid-template-columns: 1fr; justify-items: start; } }
/* Homepage: tussenkoppen even groot als de hoofdkoppen op de andere pagina's */
.hero ~ .section h2, .zelfgebouwd h2 { font-size: var(--t-xxl); line-height: 1.15; }

/* Over ons: op tablet en laptop staan de eerste twee alinea's naast de foto (foto rechts, tekst links),
   de rest van de tekst daaronder over de volle breedte. Geen losse regels die onder de foto doorlopen. */
@media (min-width: 700px) {
  .persoon.enkel .tekst { display: grid; grid-template-columns: clamp(240px, 36%, 340px) minmax(0, 1fr); column-gap: 2rem; row-gap: 1.1rem; align-items: start; }
  .persoon.enkel .tekst > * { grid-column: 1 / -1; }
  .persoon.enkel .foto.foto-in-tekst { grid-column: 1; grid-row: 2 / span 2; width: 100%; max-width: none; margin: .4rem 0 0; }
  .persoon.enkel .foto.foto-in-tekst figcaption { font-size: .8rem; column-gap: .3rem; }
  .persoon.enkel .tekst > p:nth-of-type(1) { grid-column: 2; grid-row: 2; }
  .persoon.enkel .tekst > p:nth-of-type(2) { grid-column: 2; grid-row: 3; }
  .persoon.enkel .tekst { grid-template-columns: minmax(0, 1fr) clamp(240px, 36%, 340px); }
  .persoon.enkel .foto.foto-in-tekst { grid-column: 2; }
  .persoon.enkel .tekst > p:nth-of-type(1), .persoon.enkel .tekst > p:nth-of-type(2) { grid-column: 1; }
  /* Is de foto hoger dan de twee alinea's, dan komt de extra ruimte onder de tweede alinea
     in plaats van ertussen (de alinea's blijven op normale afstand van elkaar). */
  .persoon.enkel .tekst { grid-template-rows: auto auto 1fr; }
}
.foto figcaption { flex-wrap: wrap; column-gap: .4rem; row-gap: 0; } .foto figcaption strong { white-space: nowrap; }

/* Kenmerken bij Daniëlle en Alwin: geen knopjes, maar woorden met een geel stipje ertussen */
.kernwoorden { gap: .2rem 0; margin: .1rem 0 .25rem; }
.kernwoorden li { background: none; border: 0; border-radius: 0; padding: 0; color: var(--blauw); font-size: var(--t-l); font-weight: 400; display: inline-flex; align-items: center; }
.kernwoorden li + li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--geel); margin: 0 .9rem; flex: none; }
/* "Wat mij kenmerkt?" als klein kopje (zoals de andere kleine kopjes), de kenmerken zelf groter eronder */
.persoon .tekst > h3 { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--groen); display: inline-flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.persoon .tekst > h3::before { content: ""; width: 26px; height: 2px; background: var(--geel); }
.persoon .kernwoorden { margin-top: -.35rem; }
.persoon .kernwoorden li { font-size: var(--t-l); }
/* Smartphone: kenmerken onder elkaar, elk met een geel stipje ervoor (geen losse stip aan het begin van een regel) */
@media (max-width: 599px) {
  .persoon .kernwoorden { flex-direction: column; gap: .35rem; margin-top: -.2rem; }
  .persoon .kernwoorden li { font-size: var(--t-l); }
  .persoon .kernwoorden li::before, .persoon .kernwoorden li + li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--geel); margin: 0 .75rem 0 0; flex: none; }
}

/* ---------- IT-pagina ---------- */
.snel-naar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.snel-naar a { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--blauw); text-decoration: none; background: #E2EDE5; border: 1.5px solid #CCDDD1; border-radius: 999px; padding: .6rem 1.1rem; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.snel-naar a::after { content: "↓"; font-weight: 700; color: #4F8A63; transition: transform .2s ease; }
.snel-naar a:hover, .snel-naar a:focus-visible { background: var(--wit); border-color: #4F8A63; transform: translateY(-2px); }
.snel-naar a:hover::after { transform: translateY(2px); }
@media (max-width: 600px) { .snel-naar { flex-direction: column; align-items: stretch; } .snel-naar a { justify-content: space-between; } }
#voorbeelden, #maatwerk { scroll-margin-top: 96px; }
.vinkjes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 700px) { .vinkjes-2 { grid-template-columns: 1fr; } }
.voorbeeld h3 { font-size: 1.25rem; color: var(--blauw); }
/* Voorbeeldbord (Trello-achtig) */
.bord { margin: 0; background: linear-gradient(135deg, #0B5A97, #004B87 55%, #13603A); border-radius: var(--radius); padding: 1rem; box-shadow: 0 24px 48px -32px rgba(0, 40, 80, .8); }
.bord-balk { color: #fff; font-size: var(--t-s); padding: .1rem .3rem .8rem; letter-spacing: .02em; }
.bord-kolommen { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .25rem; scroll-snap-type: x mandatory; }
.bord-kolom { background: #EEF2F4; border-radius: 12px; padding: .7rem; scroll-snap-align: start; }
.bord-kop { font-size: var(--t-s); color: var(--inkt); margin: 0 .2rem .6rem; display: flex; justify-content: space-between; }
.bord-kop span { color: var(--inkt-zacht); font-size: var(--t-xs); }
.bord-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bord-kaart { background: #fff; border-radius: 8px; padding: .6rem .7rem; font-size: var(--t-s); color: var(--inkt); box-shadow: 0 1px 0 rgba(9, 30, 66, .2); display: grid; gap: .35rem; }
.bord-label { justify-self: start; font-size: .72rem; padding: .05rem .5rem; border-radius: 4px; color: #fff; }
.bord-label.geel { background: #E2B400; color: var(--donkergroen); }
.bord-label.groen { background: #2E7047; }
.bord-label.blauw { background: #0B5A97; }
.bord figcaption { color: #E4EEF7; font-size: var(--t-s); margin: .8rem .3rem .1rem; }
@media (max-width: 820px) { .bord-kolommen { grid-template-columns: repeat(4, minmax(190px, 72%)); } }
.trello-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.trello-extra .onderdeel { gap: .7rem; }
.trello-extra .vinkjes li { font-size: var(--t-s); }
.trello-gratis { background: var(--geel-zacht); border-left: 4px solid var(--geel); border-radius: 8px; padding: 1rem 1.25rem; max-width: none; }
@media (max-width: 820px) { .trello-extra { grid-template-columns: 1fr; } }
.trello-cta h3 { font-size: var(--t-xl); color: var(--blauw); }


/* Vakgebied-kleuren: elk vakgebied een eigen zachte huisstijltint */
.pijler-hr, .tint-hr .onderdeel                   { background: #E3EDF6; border-color: #CFDEEC; } /* HR: blauw */
.pijler-it, .tint-it .onderdeel                   { background: #E2EDE5; border-color: #CCDDD1; } /* IT: groen */
.pijler-va, .tint-va .onderdeel                   { background: #FFF4C7; border-color: #F2E3A0; } /* VA: geel */
.pijler-copywriting, .tint-copywriting .onderdeel { background: #E9EEEA; border-color: #D5DED7; } /* Copywriting: grijsgroen */
.section-alt .tint-it .onderdeel { background: #E2EDE5; }
.onderdelen[class*="tint-"] .onderdeel { border-top-color: var(--geel); }
.pijlers .pijler:hover { border-color: var(--blauw); }

.nav a.actief { color: var(--blauw); background: var(--blauw-zacht); }

/* Dienstpagina's in de kleur van hun vakgebied-blok */
.thema-hr          { --tint: #E3EDF6; --tint-rand: #CFDEEC; --tint-lijn: #5B8DBE; }
.thema-it          { --tint: #E2EDE5; --tint-rand: #CCDDD1; --tint-lijn: #4F8A63; }
.thema-va          { --tint: #FFF4C7; --tint-rand: #F2E3A0; --tint-lijn: #E3B21C; }
.thema-copywriting { --tint: #E9EEEA; --tint-rand: #D5DED7; --tint-lijn: #7F9A88; }
/* alleen de omkaderde blokken krijgen de kleur; de pagina zelf blijft licht */
[class*="thema-"] .onderdeel { background: var(--tint); border-color: var(--tint-rand); }

/* Onderaan dienstpagina's: compacte links naar de andere vakgebieden */
.vak-links-sectie { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.vak-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }
.vak-links .eyebrow { margin-right: .5rem; }
.vak-link { display: inline-flex; align-items: baseline; gap: .5rem; padding: .5rem .9rem; border: 1px solid var(--lijn); border-radius: 999px; text-decoration: none; color: var(--inkt); font-size: var(--t-s); transition: border-color .2s ease; }
.vak-link .afk { color: var(--blauw); font-weight: 600; }
.vak-link .vak-sub { color: var(--inkt-zacht); }
.vak-link .vak-pijl { color: var(--blauw); transition: transform .2s ease; }
.vak-link:hover { border-color: var(--blauw); }
.vak-link:hover .vak-pijl { transform: translateX(3px); }
@media (max-width: 600px) { .vak-links { flex-direction: column; align-items: stretch; } .vak-link { border-radius: 12px; } }

/* Voorbeeldwebsites op de IT-pagina: compact overzicht, vier naast elkaar */
#voorbeelden .voorbeelden { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
#voorbeelden .voorbeeld-tekst { padding: .9rem 1rem 1rem; gap: .3rem; }
#voorbeelden .voorbeeld h3 { font-size: 1.05rem; }
#voorbeelden .voorbeeld p { font-size: .88rem; line-height: 1.5; }
#voorbeelden .voorbeeld .branche { font-size: .7rem; }
#voorbeelden .voorbeeld .bekijk { font-size: .9rem; }
@media (max-width: 1060px) { #voorbeelden .voorbeelden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { #voorbeelden .voorbeelden { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } #voorbeelden .voorbeeld p { display: none; } #voorbeelden .voorbeeld-tekst { padding: .7rem .75rem .8rem; } }

/* Belbare telefoonnummers op de contactpagina */
.beschermd.belbaar { padding: 0; }
.bel-link { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .85rem 1rem; color: inherit; text-decoration: none; border-radius: 10px; transition: background .2s ease; }
.bel-link:hover, .bel-link:focus-visible { background: var(--blauw-zacht); }
.bel-link .land { margin-left: auto; }

/* Lijn aan de bovenkant van de blokken in de kleur van het vakgebied */
[class*="thema-"] .onderdeel, [class*="thema-"] .onderdelen[class*="tint-"] .onderdeel { border-top-color: var(--tint-lijn); }

/* Dienstpagina's met foto bovenaan */
.dienst-hero .kruimel + .home-foto { margin-top: .9rem; }

/* IT-overzicht: drie ingangen naar de onderdelen */
.ingangen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ingang { display: grid; gap: .6rem; align-content: start; padding: 1.6rem 1.5rem; border-radius: var(--radius); background: #E2EDE5; border: 1px solid #CCDDD1; border-top: 3px solid #4F8A63; color: var(--inkt); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.ingang h3 { color: var(--blauw); font-size: 1.2rem; }
.ingang p { color: var(--inkt-zacht); }
.ingang .pijler-meer { color: var(--blauw); font-weight: 600; margin-top: .3rem; }
.ingang:hover, .ingang:focus-visible { transform: translateY(-2px); border-color: #4F8A63; }
@media (max-width: 860px) { .ingangen { grid-template-columns: 1fr; } }
.bord { min-width: 0; max-width: 100%; }

/* Taalkeuze: gewoon menu-item */
.review .vertaald { font-weight: 400; color: var(--inkt-zacht); font-size: .85em; }
html[lang="en"] .hero h1 .eerste { padding-left: 0; }
.telefoons .tel-naam { margin: .4rem 0 -.1rem; font-size: var(--t-s); }
.telefoons .tel-naam:not(:first-child) { margin-top: .9rem; }
.telefoons .tel-naam span { color: var(--inkt-zacht); margin-left: .35rem; }
.zelf-gebouwd { margin: .75rem 0 0; max-width: none; font-size: var(--t-xs); color: var(--inkt-zacht); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; }
.zelf-gebouwd a { color: var(--inkt-zacht); }

/* WhatsApp: links op de contactpagina en zwevende knop rechtsonder */
.wa-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .2rem; color: #128C4A; font-weight: 600; text-decoration: none; font-size: var(--t-s); }
.wa-link svg { width: 20px; height: 20px; }
.wa-link:hover span, .wa-link:focus-visible span { text-decoration: underline; }
.wa-zweef { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.wa-zweef[hidden] { display: none; }
.wa-knop { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #25D366; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(19, 61, 36, .25); transition: transform .2s ease; }
.wa-knop svg { width: 28px; height: 28px; }
.wa-knop:hover, .wa-knop:focus-visible { transform: scale(1.06); }
.wa-knop:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; }
.wa-keuze { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(19, 61, 36, .18); padding: .9rem; min-width: 240px; display: grid; gap: .35rem; }
.wa-keuze[hidden] { display: none; }
.wa-kop { margin: 0 0 .2rem .3rem; font-size: var(--t-xs); color: var(--inkt-zacht); letter-spacing: .04em; }
.wa-optie { display: grid; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; color: var(--inkt); }
.wa-optie strong { color: var(--blauw); font-weight: 600; }
.wa-optie span { font-size: var(--t-xs); color: var(--inkt-zacht); }
.wa-optie:hover, .wa-optie:focus-visible { background: #E7F7EE; }
@media print { .wa-zweef { display: none !important; } }
.heel { white-space: nowrap; }

/* Logo in de kopbalk iets groter op de computer, zonder dat de balk hoger wordt */
@media (min-width: 1241px) { .brand img { width: 48px; height: 48px; } .header-inner { padding-block: .2rem; } }

/* "Herken je dit?" op de dienstpagina's: een gewone opsomming */
.herken-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; max-width: var(--blok, 760px); }
.herken-lijst li { position: relative; padding-left: 1.6rem; color: var(--inkt); }
.herken-lijst li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--geel); }
.herken-slot { margin: 0; }
.herken-slot strong { color: var(--blauw); font-weight: 600; }