/* rvdm designs v3. Gebouwd op het template "inkode" van MikiBuilder
   (https://github.com/MikiBuilder/inkode, MIT-licentie, zie
   LICENSE-inkode.txt). Editorial basis van het template, omgezet naar
   het lichte, warme rvdm-palet (v2-fable/stijl.css): het logovlak is
   het enige donkere element. Alles leesbaar zonder JavaScript: de
   beginstanden van animaties bestaan alleen onder html.anim. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:   #f0efec;
  --paneel:  #ffffff;
  --tekst:     #2b2420;
  --gedempt:   #6e665c;
  --accent:  #e2731c;   /* alleen nog voor .invullen (bouwmarkering) */
  --accent-2:#3b82c4;
  --tint-groen: #dce1d3;
  /* donker vlak voor de voet: geen zwart, maar de beige tegeltint
     helemaal donker doorgetrokken (keuze Rutger, 16-08). Sinds 19-08
     heeft het logovlak dezelfde warme bruintint (#2b2420); er staat
     nergens op de site nog echt zwart. */
  --voet-vlak:  #2b2420;
  --voet-tekst: #fffdfa;   /* wit met een warme zweem, tegen het bruin */
  --voet-zacht: rgba(255, 253, 250, .76);
  --voet-lijn:  rgba(255, 253, 250, .22);
  --tint-blauw: #d9e3ef;   /* actieve kaart, uit het blauwe logostipje */
  --tint-beige: #e9e2d3;
  --tint-grijs: #e6e5e1;
  --lijn:    rgba(43,36,32,.14);
  --logo-vlak: #2b2420;   /* zelfde warm donkerbruin als de footer */
  --f-display: 'Bebas Neue', 'Poppins', sans-serif;
  --f-serif:   'DM Serif Display', Georgia, serif;
  --f-body:    'Poppins', system-ui, sans-serif;
  --radius: 20px;
  --wrap: 1400px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
::selection { background: var(--tekst); color: #fff; }

/* Placeholders vallen bewust op: invullen voor livegang. */
.invullen {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent);
  font-style: normal;
}

/* ─── cursor (alleen met JS en een fijne pointer) ─────── */
#cursor { display: none; }
@media (pointer: fine) {
  html.anim #cursor {
    display: block;
    width: 12px; height: 12px;
    background: var(--gedempt);
    border-radius: 50%;
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    transition: transform .15s ease, background .2s;
    mix-blend-mode: multiply;
  }
  html.anim #cursor.big { transform: scale(5); background: var(--tekst); }
}

/* ─── korrel ──────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9998;
  opacity: .5;
}

/* ─── nav ─────────────────────────────────────────────── */
nav.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: .9rem 2.5rem;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lijn);
}
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gedempt);
  text-decoration: none;
  position: relative;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.actief { color: var(--tekst); }
/* de knop in de topbar houdt zijn eigen kleuren en onderstreept niet */
.nav-links a.knop {
  color: #fff;
  text-transform: none;
  letter-spacing: .02em;
  font-size: .78rem;
}
.nav-links a.knop:hover { color: #fff; }
.nav-links a.knop::after { display: none; }
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--tekst);
  transition: width .3s ease;
}
.nav-links a:hover::after, .nav-links a.actief::after { width: 100%; }

/* logo: vet rvdm, dun designs, palet als punt. Wit op een eigen donker
   vlak, het enige donkere element van de site. */
.logo {
  font-family: var(--f-body);
  font-size: 1.1rem;
  color: #f1efe9;
  background: var(--logo-vlak);
  padding: .5rem .9rem .55rem;
  border-radius: 12px;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  white-space: nowrap;
  line-height: 1.3;
}
.logo b { font-weight: 700; }
.logo span { font-weight: 300; }
.logo svg { width: .62em; height: .62em; flex: none; align-self: flex-end; margin-bottom: .1em; }

/* ─── knop ────────────────────────────────────────────── */
.knop {
  display: inline-block;
  background: var(--voet-vlak);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .02em;
  padding: .85rem 1.8rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .25s, background .25s;
}
.knop:hover { transform: translateY(-2px); background: #3a3a37; }
.knop-klein { padding: .5rem 1.2rem; font-size: .78rem; }

.stille-regel { font-size: .9rem; color: var(--gedempt); margin-top: 1.1rem; }
.stille-regel a { color: var(--tekst); }
.status-regel {
  font-size: .78rem;
  color: var(--gedempt);
  margin-top: .4rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-regel::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #58c470;
}

/* ─── caps-label ──────────────────────────────────────── */
.caps-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin-bottom: 1.2rem;
}
.caps-label b { color: var(--gedempt); font-weight: 500; }
.caps-label-ruim { margin-top: 2.6rem; }

/* ─── hero ────────────────────────────────────────────── */
.hero {
  min-height: 76vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 6.5rem 2.5rem 3rem;
  position: relative;
  overflow: hidden;
}
.hero-kort { min-height: 40vh; }

.hero-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 1.4rem;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 8.4vw, 8.4rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--tekst);
}
/* Het masker waar de kopregels uit omhoog schuiven. De regelafstand
   staat op .92 en de cursieve DM Serif steekt links en onder buiten
   zijn regel (de staart van de J, de onderkant van de k), dus zonder
   de padding hieronder knipt overflow:hidden die stukken eraf. De
   negatieve marge haalt diezelfde ruimte er in de layout weer af, dus
   de regels staan nog precies waar ze stonden. */
.hero-title .regel {
  display: block;
  overflow: hidden;
  padding: .1em .12em .18em;
  margin: -.1em -.12em -.18em;
}
.hero-title .regel > i { display: block; font-style: normal; }
/* 135% in plaats van 110%: het masker is nu hoger, dus de regel moet
   verder zakken om er echt buiten te vallen voor de animatie start */
html.anim .hero-title .regel > i { transform: translateY(135%); }

.hero-title em {
  font-family: inherit;
  font-style: normal;
}

.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  border-top: 1px solid var(--lijn);
  padding-top: 1.6rem;
  position: relative;
  z-index: 1;
}
.hero-desc { max-width: 400px; }
.hero-desc .lead { font-size: 1.02rem; line-height: 1.65; color: var(--tekst); margin-bottom: .5rem; }
.hero-desc .platformregel { font-size: .82rem; color: var(--gedempt); }

.hero-acties { text-align: right; }

/* uitgesneden portret in de hero: staat in de rechterkolom die
   anders leeg blijft, met de onderrand op de scheidingslijn van
   .hero-bottom. z-index 0 houdt hem boven het contourwoord en onder
   de kop, zodat zwarte letters nooit op het donkere colbert vallen;
   de kop krijgt hieronder een breedtelimiet zodat die twee elkaar
   ook echt niet raken. */
.hero-portret {
  /* Op een breed maar laag venster mag het hoofd niet onder de
     navigatie verdwijnen. Dat begrenzen via max-height perst de foto
     plat (breedte blijft dan staan), dus de hoogtelimiet gaat hier via
     de breedte: .907 is de verhouding van de foto zelf (721/795). */
  --portret-breedte: min(clamp(200px, 25vw, 660px), calc((100vh - 22rem) * .907));
  position: absolute;
  bottom: 0;
  width: var(--portret-breedte);
  height: auto;
  /* De kop stopt met groeien zodra hij op 8.4rem zit (rond 1600px
     breed) en beslaat dan ongeveer 1240px. Alles wat een scherm
     daarna nog breder wordt is vrije ruimte: daarin gaat het portret
     naar het midden staan. Op smallere schermen is die uitkomst
     negatief en blijft hij gewoon rechts, tegen de kop aan. */
  right: max(0px, (100vw - 1240px - var(--portret-breedte)) / 2);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

/* Onder de 1000px is er naast de kop geen ruimte meer: gemeten loopt de
   laatste kopregel daar tot in het colbert. Vanaf hier staat het portret
   daarom boven de kop in plaats van ernaast, rechts uitgelijnd. */
@media (max-width: 1000px) {
  .hero-portret {
    position: static;
    z-index: auto;
    width: clamp(200px, 46vw, 260px);
    align-self: flex-end;
    margin-bottom: .4rem;
  }
}

/* badge aan de linkerrand: gevestigd in Nederland */
.badge-nl {
  position: absolute;
  left: 0;
  top: 12%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--logo-vlak);
  color: #f1efe9;
  border-radius: 0 999px 999px 0;
  padding: .8rem 1.5rem .8rem 1.6rem;
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .04em;
}
.badge-nl svg { width: 30px; height: 30px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .badge-nl svg { animation: draai 18s linear infinite; }
}
@keyframes draai { to { transform: rotate(360deg); } }

/* groot achtergrondwoord in contour */
.bg-woord {
  position: absolute;
  right: -2vw;
  top: 46%;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-size: clamp(14rem, 30vw, 34rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--tekst) 7%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ─── secties ─────────────────────────────────────────── */
.sectie {
  padding: clamp(4.5rem, 9vh, 6rem) 2.5rem;
  max-width: var(--wrap);
  margin: 0 auto;
}
.band-lijn { border-top: 1px solid var(--lijn); }

.sectie-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  border-bottom: 1px solid var(--lijn);
  padding-bottom: 1.1rem;
  margin-bottom: 3.5rem;
}
.sectie-titel {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}
.sectie-count {
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gedempt);
  white-space: nowrap;
}

/* ─── kaarten (wat ik doe) ────────────────────────────── */
.kaarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}
.kaart {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 2.1rem 1.9rem;
  transition: transform .3s, border-color .35s, background-color .35s;
  box-shadow: 0 1px 2px rgba(28,27,24,.04);
}
.kaart:hover { transform: translateY(-4px); }
.kaart .nr {
  font-family: var(--f-display);
  font-size: .95rem;
  color: var(--gedempt);
  letter-spacing: .18em;
  display: block;
  margin-bottom: .8rem;
}
.kaart h3 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.55rem;
  margin-bottom: .6rem;
}
.kaart p { font-size: .9rem; color: var(--gedempt); }
/* Eén gekleurde kaart tegelijk. Standaard staat hij op 01; zodra je
   02 of 03 aanwijst verhuist de blauwe tint mee en valt 01 terug naar
   wit. Alleen kleur beweegt, geen maat: de kop van 01 blijft groot,
   dus er verspringt niets in de rij. Zonder muis (mobiel, toetsenbord
   via :focus-within) blijft 01 gewoon de actieve kaart. */
.kaart-zwaar,
.kaarten .kaart:hover,
.kaarten .kaart:focus-within {
  border-color: color-mix(in srgb, var(--accent-2) 55%, transparent);
  background: var(--tint-blauw);
}
.kaart-zwaar { border-width: 2px; }
.kaarten:hover .kaart-zwaar:not(:hover) {
  border-color: var(--lijn);
  background: var(--paneel);
}
.kaart-zwaar h3 { font-size: 1.9rem; }

/* ─── prijsband ───────────────────────────────────────── */
.prijsband { border-block: 1px solid var(--lijn); }
.prijsband-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 3.4rem 2.5rem;
}
.prijsband p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.45;
  max-width: 34ch;
}

/* ─── stappen (werkwijze) ─────────────────────────────── */
.stappen { display: flex; flex-direction: column; }
.stap {
  display: grid;
  grid-template-columns: 110px 260px 1fr;
  align-items: baseline;
  gap: 2rem;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--lijn);
}
.stap:first-child { border-top: 1px solid var(--lijn); }
.stap .nr {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: .18em;
  color: var(--gedempt);
}
.stap h3 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
}
.stap p { font-size: .92rem; color: var(--gedempt); max-width: 58ch; }

/* ─── vragen (bezwaren en eerlijke antwoorden) ────────── */
.vragen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.vraag {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.9rem 1.8rem;
  box-shadow: 0 1px 2px rgba(20,20,19,.04);
}
.vraag h3 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.3;
  margin-bottom: .6rem;
}
.vraag p { font-size: .92rem; color: var(--gedempt); }
.vraag:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ─── driftband ────────────────────────────────────────────
   Twee rijen beeldvlakken, breder dan het scherm, die bij het
   scrollen tegengesteld horizontaal schuiven (naar het patroon
   van de horizontale rijen op dennissnellenberg.com; eigen
   uitvoering met GSAP scrub, geen overgenomen code of assets).
   De vlakken zijn [BEELD]-placeholders tot Rutger eigen beelden
   levert. Zonder JS staan de rijen gewoon stil en zichtbaar. */
.drift-band {
  overflow: hidden;
  padding: clamp(3rem, 7vh, 5rem) 0;
  border-block: 1px solid var(--lijn);
}
.drift-rij {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  margin-left: -14vw;
}
.drift-rij + .drift-rij { margin-top: 1.2rem; }
.drift-item {
  width: 30vw;
  aspect-ratio: 4 / 3;
  flex: none;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--tekst) 25%, transparent);
  display: grid;
  place-items: center;
  color: var(--gedempt);
  font-size: .8rem;
  text-align: center;
  padding: 1rem;
}
.drift-item:nth-child(3n+1) { background: var(--tint-groen); }
.drift-item:nth-child(3n+2) { background: var(--tint-beige); }
.drift-item:nth-child(3n+3) { background: var(--tint-grijs); }

/* items met echt beeld: het beeld zweeft op een getint vlak,
   naar het voorbeeld van de portfolio-tegels van Snellenberg */
.drift-item--media {
  padding: 2.4rem;
  border: 0;
  position: relative;
  overflow: hidden;
}
.drift-item--media > img,
.drift-item--media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(20, 20, 19, .12);
}
/* ─── projectrijen ────────────────────────────────────────
   Voorbereid-maar-inactief: dit is de opmaak voor blok 5
   "uitgelicht werk" op index.html, dat per COPY.md NIET LIVE
   mag zonder echte inhoud. De sectie staat daar als comment
   klaar; zodra Rutger echte projecten bevestigt gaat de markup
   terug en gebruikt hij deze klassen. Niet verwijderen. */
.projecten { display: flex; flex-direction: column; }
.project-rij {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--lijn);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: padding-left .3s ease;
}
.project-rij:first-child { border-top: 1px solid var(--lijn); }
.project-rij::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: color-mix(in srgb, var(--tekst) 7%, transparent);
  z-index: -1;
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.project-rij:hover::before { width: 100%; }
.project-rij:hover { padding-left: 1.4rem; }
.project-rij .nr {
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--gedempt);
  transition: color .3s;
}
.project-rij:hover .nr { color: var(--tekst); }
.project-rij h3 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  margin-bottom: .2rem;
}
.project-rij .meta {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gedempt);
}
.project-rij .pijl {
  font-size: 1.4rem;
  color: var(--tekst);
  transform: rotate(-45deg);
  transition: transform .3s ease, opacity .3s;
  opacity: .45;
}
.project-rij:hover .pijl { transform: rotate(0deg); opacity: 1; }

/* ─── werk-cases ──────────────────────────────────────── */
.case {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 2.4rem 2.2rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 1px 2px rgba(28,27,24,.04);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2.2rem;
  align-items: center;
}
/* om en om: beeld links, beeld rechts, voor ritme in de lijst */
.case:nth-child(even) .case-beeld { order: -1; }
.case-beeld {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 6px);
  border: 1px dashed color-mix(in srgb, var(--tekst) 25%, transparent);
  background: var(--tint-beige);
  display: grid;
  place-items: center;
  color: var(--gedempt);
  font-size: .82rem;
  text-align: center;
  padding: 1rem;
}
.case .nr {
  font-family: var(--f-display);
  font-size: .9rem;
  letter-spacing: .18em;
  color: var(--gedempt);
}
.case h2 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: .5rem 0 .8rem;
}
.case p { font-size: .92rem; color: var(--gedempt); max-width: 70ch; }
.case .meta-regel { font-size: .8rem; margin-top: 1rem; opacity: .85; }

/* casekaart-uitbreidingen: aanvulling op het .case-patroon hierboven.
   Verhuisd uit v3/werk-cases.html bij livegang van de casekaarten. */

/* kopregel: projectnummer links, platform-badge rechts */
.case-koplijn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.case-badge {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gedempt);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: .3rem .85rem;
  white-space: nowrap;
}

/* meta direct onder de naam: rol, jaar, doorlooptijd */
.case-meta {
  font-size: .8rem;
  color: var(--gedempt);
  margin-top: -.3rem;
}

/* kleine kapitalenkopjes binnen de kaart, naar .caps-label/.voet-kop */
.case-kopje {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin: 1.3rem 0 .3rem;
}

/* puntenlijst "wat er gebouwd is" */
.case-lijst {
  list-style: none;
  font-size: .92rem;
  color: var(--gedempt);
  max-width: 70ch;
}
.case-lijst li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: .25rem;
}
.case-lijst li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: color-mix(in srgb, var(--tekst) 40%, transparent);
}

/* zodra er echt beeld in de tegel staat: stippellijn weg, beeld vult
   de tegel (zelfde afronding, 4:3 blijft via aspect-ratio) */
.case-beeld.heeft-beeld {
  border: 1px solid var(--lijn);
  padding: 0;
  overflow: hidden;
}
.case-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* tegel zonder beeld (case in uitwerking): rustige lege tint,
   geen stippellijn-placeholder live */
.case-beeld.leeg {
  border: 1px solid var(--lijn);
}

/* mobiel: iets minder lucht tussen de kopjes, kaarten blijven kort */
@media (max-width: 860px) {
  .case-kopje { margin-top: 1.1rem; }
}


/* ─── over ────────────────────────────────────────────── */
.over-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4rem;
  align-items: start;
}
.over-grid .lead { font-size: 1.05rem; line-height: 1.65; margin-bottom: 1rem; }
.over-grid p { color: var(--gedempt); font-size: .95rem; margin-bottom: 1rem; max-width: 62ch; }
.over-grid p.lead { color: var(--tekst); }
.portret {
  /* zelfde verhouding als de foto (721x795), dus geen loze lucht erboven;
     geen padding onderin zodat de uitsnede op de rand van de kaart staat */
  aspect-ratio: 721 / 795;
  border-radius: var(--radius);
  background: var(--tint-groen);
  display: grid;
  place-items: end center;
  overflow: hidden;
  color: var(--gedempt);
  font-size: .85rem;
  padding: 1rem 1rem 0;
  text-align: center;
}
.portret img { width: 100%; height: auto; display: block; }
.feiten { list-style: none; margin-top: .6rem; }
.feiten li {
  display: flex;
  justify-content: space-between;
  gap: 1.4rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--lijn);
  font-size: .9rem;
}
.feiten li:first-child { border-top: 1px solid var(--lijn); }
.feiten .k { color: var(--gedempt); }

/* ─── contact ─────────────────────────────────────────── */
.contact-kaarten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
/* de contactkaarten doen niet mee aan de blauwe tint: daar blijft
   hover gewoon een iets steviger lijn */
.contact-kaarten .kaart:hover { border-color: rgba(28,27,24,.28); }
.contact-kaarten .kaart p { margin-bottom: .5rem; color: var(--tekst); }
.contact-kaarten .kaart p a { color: var(--tekst); }

/* ─── berichtformulier ────────────────────────────────── */
.vorm { max-width: 900px; }
.vorm-rij {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: .3rem 1.6rem;
  padding: 1.7rem 0 1.5rem;
  border-bottom: 1px solid var(--lijn);
}
.vorm-rij:first-child { border-top: 1px solid var(--lijn); }
.vorm-nr {
  font-family: var(--f-display);
  font-size: .95rem;
  letter-spacing: .12em;
  color: var(--gedempt);
  padding-top: .2rem;
}
.vorm-rij label {
  font-weight: 500;
  font-size: 1.05rem;
  grid-column: 2;
}
.vorm-rij input,
.vorm-rij textarea {
  grid-column: 2;
  border: 0;
  background: transparent;
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--tekst);
  padding: .35rem 0 .1rem;
  resize: vertical;
}
.vorm-rij input::placeholder,
.vorm-rij textarea::placeholder { color: color-mix(in srgb, var(--gedempt) 70%, transparent); }
.vorm-rij input:focus,
.vorm-rij textarea:focus { outline: none; }
.vorm-rij:focus-within { border-bottom-color: var(--tekst); }
.vorm-actie { margin-top: 2rem; }
.vorm-actie .knop { border: 0; cursor: pointer; font-family: var(--f-body); }
.vorm-actie .stille-regel { margin-top: .9rem; }

/* ─── footer-cta ──────────────────────────────────────── */
.footer-cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--lijn);
}
.footer-cta-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 7rem 2.5rem 6rem;
  position: relative;
}
.footer-cta h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.footer-cta h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tekst);
  font-size: .9em;
}
.footer-cta .zin { color: var(--gedempt); max-width: 52ch; margin-bottom: 1.8rem; }

/* Rond portretje in de kop, naar de voet van dennissnellenberg.com.
   De foto is een uitsnede zonder achtergrond, dus de cirkel krijgt zelf
   een tint; object-position houdt het gezicht in beeld. */
.voet-portret {
  width: .74em;
  height: .74em;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 6%;
  background: var(--tint-groen);
  margin-right: .2em;
  transform: translateY(.02em);
}

/* lijn met de ronde knop erin, zoals het "Get in touch"-element van de
   referentie, maar in het zwart van de gewone knoppen */
.voet-actie {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 3rem 0 2.4rem;
}
.voet-actie .streep { height: 1px; background: var(--lijn); }
.voet-actie .streep-lang { flex: 1; }
.voet-actie .streep-kort { flex: 0 0 clamp(1.5rem, 6vw, 6rem); }
.rondknop {
  flex: none;
  width: clamp(132px, 14vw, 186px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tekst);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 1rem;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), background-color .3s;
}
.rondknop:hover { transform: scale(1.07); background: #2b2b27; }

/* contactpillen */
.voet-pillen { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.pil {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: .85rem 1.7rem;
  font-size: .9rem;
  color: var(--tekst);
  text-decoration: none;
  transition: border-color .3s, transform .3s;
}
.pil:hover { border-color: rgba(28,27,24,.32); transform: translateY(-2px); }

/* ─── colofon ─────────────────────────────────────────────
   Onderbalk naar het patroon van de referentievoet: kolommen met een
   klein kapitalenkopje boven de waarde, socials rechts, en daaronder
   een dunne regel met de paginalinks. */
footer.site-voet { border-top: 1px solid var(--lijn); }
footer.voet-ruim { margin-top: 4rem; }
.colofon {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.8rem 2.5rem 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.4rem 2.5rem;
}
.voet-kolom { font-size: .82rem; color: var(--tekst); }
.voet-kolom:last-child { text-align: right; }
.voet-kop {
  display: block;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin-bottom: .4rem;
}
.voet-kolom a { color: var(--tekst); text-decoration: none; border-bottom: 1px solid var(--lijn); }
.voet-kolom a:hover { border-bottom-color: var(--tekst); }
.voet-onder {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 2.5rem 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  font-size: .75rem;
  color: var(--gedempt);
}
.voet-onder a { color: var(--gedempt); }

/* ─── de voet als donker eindblok ─────────────────────────
   Alles vanaf .footer-cta staat op het donkere vlak, dus de kleuren
   die daarbinnen normaal uit --tekst en --gedempt komen worden hier
   omgedraaid. De ronde knop wordt licht op donker in plaats van
   andersom. */
.footer-cta,
footer.site-voet {
  background: var(--voet-vlak);
  color: var(--voet-tekst);
  border-top: 0;
}
.footer-cta h2 em { color: inherit; }
.footer-cta .zin { color: var(--voet-zacht); }
.footer-cta .status-regel { color: var(--voet-zacht); }
.footer-bg { -webkit-text-stroke-color: rgba(240, 239, 236, .09); }
.voet-actie .streep { background: var(--voet-lijn); }

.rondknop {
  background: var(--voet-tekst);
  color: var(--voet-vlak);
}
.rondknop:hover { background: #fff; }

.pil {
  background: transparent;
  border-color: var(--voet-lijn);
  color: var(--voet-tekst);
}
.pil:hover { border-color: rgba(240, 239, 236, .5); }

.colofon { border-top: 1px solid var(--voet-lijn); }
/* op contact en privacy staat de onderbalk niet onder een CTA-blok maar
   is hij zelf de bovenkant van het donkere vlak: dan geen streep, wel
   wat meer lucht */
.voet-alleen .colofon { border-top: 0; padding-top: 2.8rem; }
.voet-kolom { color: var(--voet-tekst); }
.voet-kop { color: var(--voet-zacht); }
.voet-kolom a { color: var(--voet-tekst); border-bottom-color: var(--voet-lijn); }
.voet-kolom a:hover { border-bottom-color: var(--voet-tekst); }
.voet-onder, .voet-onder a { color: var(--voet-zacht); }
.voet-onder a:hover { color: var(--voet-tekst); }

/* de bouwmarkeringen moeten ook op het donkere vlak leesbaar blijven */
.footer-cta .invullen,
footer.site-voet .invullen { color: #f0a35a; border-bottom-color: #f0a35a; }
.footer-bg {
  position: absolute;
  bottom: -5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: clamp(8rem, 22vw, 22rem);
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--tekst) 5%, transparent);
  pointer-events: none;
  user-select: none;
}


/* ─── privacy ─────────────────────────────────────────── */
.privacy-inhoud { max-width: 900px; margin: 0; padding-top: 2rem; }
.privacy-inhoud h2 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  margin: 2.6rem 0 .7rem;
}
.privacy-inhoud p, .privacy-inhoud li { color: var(--gedempt); font-size: .95rem; margin-bottom: .9rem; }
.privacy-inhoud ul { padding-left: 1.3rem; }
.privacy-inhoud li { margin-bottom: .3rem; }
.versie-regel { margin-top: 2.4rem; font-size: .85rem; }
.uitgelicht {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--tekst);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.8rem;
  color: var(--gedempt);
  font-size: .95rem;
}

/* ─── reveal-beginstanden, alleen met JS ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  html.anim .reveal { opacity: 0; transform: translateY(28px); }
}

/* ─── mobiel ──────────────────────────────────────────── */
@media (max-width: 860px) {
  /* topbar in twee rijen: logo boven, daaronder de vier navlinks met
     de knop "Plan een gesprek" ernaast; zo blijft de CTA op elke
     pagina bereikbaar, ook op mobiel */
  nav.topbar { flex-wrap: wrap; padding: .6rem 1.2rem .55rem; gap: .45rem 10px; }
  .nav-links {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: .7rem;
  }
  .nav-links a { font-size: .6rem; letter-spacing: .1em; }
  .nav-links a.knop { font-size: .7rem; padding: .45rem .95rem; }
  .logo { font-size: .95rem; }

  /* compacte hero: geen leeg viewport boven de kop, grotere kop die
     gecontroleerd mag afbreken */
  .hero { min-height: auto; padding: 6.2rem 1.2rem 2.4rem; }
  .badge-nl { display: none; }
  .hero-kort { min-height: auto; }
  .hero-title { font-size: clamp(2.7rem, 11vw, 3.6rem); }
  .hero-title .regel > i { white-space: normal; text-wrap: balance; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .hero-acties { text-align: left; }
  .bg-woord { font-size: clamp(9rem, 40vw, 16rem); opacity: .4; }

  .sectie { padding: 3.8rem 1.2rem; }
  .sectie-kop { flex-direction: column; gap: .4rem; }

  .kaarten, .contact-kaarten, .vragen { grid-template-columns: 1fr; }
  .stap { grid-template-columns: 70px 1fr; }
  .stap p { grid-column: 2; }
  .over-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .project-rij { grid-template-columns: 44px 1fr auto; gap: .9rem; }
  .project-rij .meta { letter-spacing: .08em; }
  .case { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.8rem 1.4rem; }

  .drift-item { width: 56vw; font-size: .72rem; }
  .drift-item--media { padding: 1.5rem; }
  .drift-rij { margin-left: -30vw; }

  .prijsband-in { padding: 2.6rem 1.2rem; }
  .footer-cta-in { padding: 4rem 1.2rem 3.5rem; }
  /* op mobiel staat de ronde knop onder de lijn in plaats van erin */
  .voet-actie { flex-wrap: wrap; gap: 1.2rem; margin: 2.2rem 0 1.8rem; }
  .voet-actie .streep-lang { flex: 1 0 100%; }
  .voet-actie .streep-kort { display: none; }
  .colofon {
    padding: 1.4rem 1.2rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 1.4rem;
  }
  .voet-kolom:last-child { text-align: left; }
  .voet-onder { padding: 0 1.2rem 1.4rem; }
}

/* ─── logo in de footer (toegevoegd 19-08) ───────────────── */
.voet-logo {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.3rem 2.5rem 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--voet-tekst);
}
.voet-logo span { font-weight: 300; color: var(--voet-zacht); }
.voet-logo svg { width: 20px; height: 20px; margin-left: .25rem; align-self: flex-end; margin-bottom: .15em; }


/* echt portret in de over-tegel (19-08) */
.portret img { width: 88%; height: auto; display: block; }