/* Ductus-familie: één framework, drie merken.
   Merkverschil zit uitsluitend in de --merk-tokens (zie merken/*.mjs),
   in beeld en in inhoud. Alles hieronder is gedeeld. */

@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/SchibstedGrotesk-var.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/SchibstedGrotesk-Italic-var.ttf") format("truetype"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/HankenGrotesk-var.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  /* Neutralen: gedeeld door de hele familie */
  --c-bg: #f4f7f6;
  --c-surface: #fcfdfd;
  --c-band: #e7edeb;
  --c-ink: #14231f;
  --c-ink-soft: #3e5450;
  --c-ink-mute: #50655f;
  --c-line: #c4d1cd;
  --c-line-hard: #7a908a;
  --c-soft-light: #b4c8c2;

  /* Merk: overschreven per site */
  --merk: #0f7568;
  --merk-diep: #0e5a53;
  --merk-donkerst: #093e39;
  --merk-licht: #8ccfc1;
  --c-deep: #102622;

  --merk-plaat: color-mix(in srgb, var(--merk) 38%, var(--c-bg));
  --merk-zweem: color-mix(in srgb, var(--merk) 12%, transparent);

  --font-display: "Hanken Grotesk", "Schibsted Grotesk", system-ui, sans-serif;
  --font-sans: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Eén typeschaal */
  --t-display: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --t-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.6rem);
  --t-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --t-h3: 1.25rem;
  --t-lead: clamp(1.125rem, 1.04rem + 0.35vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-klein: 0.9375rem;
  --t-label: 0.75rem;

  /* Eén ritme */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4.5rem;
  --sectie: clamp(4rem, 2.6rem + 5vw, 7.5rem);
  --goot: clamp(1rem, 4vw, 2.5rem);
  --breedte: 1240px;
  --plaat: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: normal; color: var(--merk-diep); }
::selection { background: var(--merk-licht); color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--merk); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--breedte) + 2 * var(--goot)); margin-inline: auto; padding-inline: var(--goot); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.direct { position: absolute; left: var(--goot); top: -4rem; z-index: 100; background: var(--c-ink); color: #fff; padding: 0.6rem 1rem; }
.direct:focus { top: 0.5rem; }

/* ---------- Labels ---------- */
.kicker, .label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--merk-diep);
}
.label { color: var(--c-ink-mute); }
.mono { font-family: var(--font-mono); font-size: var(--t-klein); }

/* ---------- Knoppen: één vorm ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.8rem 1.4rem;
  font: 600 0.95rem/1.2 var(--font-sans);
  text-decoration: none;
  border: 1.5px solid var(--merk-diep);
  background: var(--merk-diep); color: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.knop:hover { background: var(--merk-donkerst); border-color: var(--merk-donkerst); }
.knop:active { transform: translateY(1px); }
.knop--rand { background: transparent; color: var(--merk-diep); }
.knop--rand:hover { background: var(--merk-zweem); color: var(--merk-donkerst); }
.knop .pijl { transition: transform 0.2s var(--ease); }
.knop:hover .pijl { transform: translateX(3px); }
.acties { display: flex; flex-wrap: wrap; gap: var(--s2); }
.donker .knop { background: var(--merk-licht); border-color: var(--merk-licht); color: var(--c-deep); }
.donker .knop:hover { background: #fff; border-color: #fff; }
.donker .knop--rand { background: transparent; color: #fff; border-color: color-mix(in srgb, var(--merk-licht) 70%, transparent); }
.donker .knop--rand:hover { background: color-mix(in srgb, var(--merk-licht) 14%, transparent); }

/* ---------- Demobalk (alleen in de voorbeeldomgeving) ---------- */
.demobalk { background: var(--c-ink); color: #d6e1de; font: 400 0.78rem/1 var(--font-mono); letter-spacing: 0.04em; }
.demobalk .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; min-height: 2.25rem; padding-block: 0.4rem; }
.demobalk span { opacity: 0.7; margin-right: auto; }
.demobalk a { text-decoration: none; opacity: 0.75; }
.demobalk a:hover { opacity: 1; text-decoration: underline; }
.demobalk a[aria-current] { opacity: 1; color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Kop ---------- */
.kop { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 3px solid var(--merk); border-bottom: 1px solid var(--c-line); }
.kop .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 4.25rem; }
.merkteken { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.merkteken svg { width: 28px; height: 28px; flex: none; }
.merkteken b { font: 650 1.2rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--merk-diep); }
.merkteken small { font: 400 0.75rem/1 var(--font-mono); color: var(--c-ink-mute); padding-top: 0.2rem; }
.nav ul { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 0.55rem 0.7rem; font-size: 0.95rem; text-decoration: none; color: var(--c-ink-soft); border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.nav a:hover { color: var(--c-ink); }
.nav a[aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--merk); }
.nav .nav-accent a { color: var(--merk-diep); font-weight: 600; }
.menuknop { display: none; }
@media (max-width: 960px) {
  .menuknop { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--c-line); padding: 0.55rem 0.9rem; font: 500 0.9rem/1 var(--font-sans); color: var(--c-ink); cursor: pointer; }
  .menuknop span { display: block; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .nav { position: absolute; inset: 100% 0 auto 0; background: var(--c-surface); border-bottom: 1px solid var(--c-line); box-shadow: 0 18px 30px -18px rgba(20, 35, 31, 0.35); display: none; }
  .kop[data-open] .nav { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; padding: var(--s1) var(--goot) var(--s3); }
  .nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--c-line); font-size: 1.05rem; }
  .nav a[aria-current="page"] { border-bottom-color: var(--c-line); box-shadow: inset 3px 0 0 var(--merk); padding-left: 0.85rem; }
}

/* ---------- Kanaal: het bewegende water/beeld ---------- */
.kanaal { position: relative; overflow: hidden; background: var(--c-deep); height: clamp(14rem, 34vw, 27rem); }
.kanaal--smal { height: clamp(7rem, 13vw, 11rem); }
.kanaal video, .kanaal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kanaal::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.18)); }

/* ---------- Hero (home) ---------- */
.hero { position: relative; padding-bottom: var(--sectie); border-bottom: 1px solid var(--c-line); }
.hero .wrap { position: relative; z-index: 2; margin-top: calc(-1 * clamp(5rem, 11vw, 10rem)); }
.hero-paneel { max-width: 46rem; padding: clamp(1.75rem, 1rem + 3vw, 3.25rem); }
.hero-paneel h1 { font-size: var(--t-display); margin: var(--s2) 0 var(--s3); }
.hero-paneel .lead { max-width: 38em; }
.hero-paneel .acties { margin-top: var(--s4); }
.keurmerk { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--c-line); color: var(--c-ink-mute); }
.keurmerk img { width: 44px; height: auto; flex: none; }
.keurmerk .mono { font-size: 0.8rem; letter-spacing: 0.02em; }

/* ---------- Paneel/kaart met verschoven plaat ---------- */
.paneel {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--merk);
  box-shadow: var(--plaat) var(--plaat) 0 var(--merk-plaat);
}
.kaart { padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); display: flex; flex-direction: column; gap: var(--s2); }
.kaart h3 { margin-top: -0.25rem; }
.kaart p, .kaart li { color: var(--c-ink-soft); }
.kaart ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.kaart li { padding-left: 1.1rem; position: relative; }
.kaart li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; background: var(--merk); }
.kaart li strong, .tekst strong { color: var(--c-ink); }

/* ---------- Secties ---------- */
.sectie { padding-block: var(--sectie); border-bottom: 1px solid var(--c-line); }
.sectie--vlak { background: var(--c-surface); }
.sectie-kop { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s4); row-gap: var(--s3); align-items: end; margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); }
.sectie-kop > .kop-tekst { grid-column: 1 / span 7; }
.sectie-kop > .kop-tekst h1, .sectie-kop > .kop-tekst h2 { margin-top: var(--s2); }
.sectie-kop > .intro { grid-column: 8 / -1; color: var(--c-ink-soft); }
.sectie-kop > .intro p + p { margin-top: var(--s2); }
.sectie-kop > .intro .acties { margin-top: var(--s3); }
.sectie-kop--los { margin-bottom: 0; }
.sectie-kop--alleen > .kop-tekst { grid-column: 1 / span 9; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--c-ink-soft); }
@media (max-width: 900px) {
  .sectie-kop > .kop-tekst, .sectie-kop > .intro, .sectie-kop--alleen > .kop-tekst { grid-column: 1 / -1; }
}

/* Paginakop op subpagina's */
.paginakop { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-bottom: 1px solid var(--c-line); }
.paginakop .sectie-kop { margin-bottom: 0; }
.paginakop h1 { max-width: 16ch; }
.paginakop--media .wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) var(--s4); align-items: center; }
.paginakop--media .sectie-kop { grid-column: 1 / span 7; display: block; }
.paginakop--media .sectie-kop .intro { margin-top: var(--s3); max-width: 40em; }
.paginakop--media .paginakop-beeld { grid-column: 8 / -1; }
@media (max-width: 900px) { .paginakop--media .sectie-kop, .paginakop--media .paginakop-beeld { grid-column: 1 / -1; } }

/* ---------- Beeld ---------- */
.figuur { margin: 0; position: relative; }
.figuur .kader { position: relative; box-shadow: var(--plaat) var(--plaat) 0 var(--merk-plaat); background: var(--c-band); }
.figuur img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio, 4 / 3); }
.figuur figcaption { margin-top: calc(var(--s2) + var(--plaat)); }
.figuur .teller { position: absolute; left: 0; bottom: 0; background: var(--c-deep); color: var(--merk-licht); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; padding: 0.6rem 0.8rem; }
.motief { border: 1px solid var(--c-line); background: var(--c-surface); overflow: hidden; aspect-ratio: var(--ratio, 4 / 3); }
.motief svg { width: 100%; height: 100%; }
.duotoon img { filter: grayscale(1) sepia(0.25) contrast(1.05); }

/* ---------- Treden: genummerde reeks naast beeld ---------- */
.treden-blok { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) var(--s4); align-items: start; }
.treden-blok > .figuur { grid-column: 1 / span 5; position: sticky; top: 7rem; }
.treden-blok > .treden { grid-column: 7 / -1; }
.treden-blok--zonder > .treden { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .treden-blok > .figuur, .treden-blok > .treden { grid-column: 1 / -1; position: static; }
}
.treden { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.trede { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: var(--s2); padding: var(--s3) 0 var(--s3) var(--s2); border-bottom: 1px solid var(--c-line); position: relative; transition: background 0.3s; }
.trede::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--merk); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease); }
.trede.is-actief::before { transform: scaleY(1); }
.trede.is-actief { background: color-mix(in srgb, var(--merk) 5%, transparent); }
.trede-nr { grid-row: span 9; font: 500 0.85rem/1.9 var(--font-mono); color: var(--merk-diep); }
.trede h3 { margin-bottom: var(--s1); }
.trede p, .trede li { color: var(--c-ink-soft); }
.trede p + p, .trede p + ul { margin-top: var(--s2); }
.trede ul { margin: var(--s2) 0 0; padding-left: 1.1rem; display: grid; gap: var(--s1); }
.treden--rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); border-top: 0; gap: 0; }
.treden--rooster .trede { border-top: 1px solid var(--c-line); }

/* ---------- Kaartenrij ---------- */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: calc(var(--s4) + var(--plaat)); }
.kaarten--twee { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* ---------- Band: lichte golfband achter kaarten ---------- */
.sectie--band { position: relative; background: linear-gradient(to bottom, var(--c-bg) 0, var(--c-bg) var(--band-start, 14rem), var(--c-band) var(--band-start, 14rem)); }
.sectie--band .golven { position: absolute; left: 0; right: 0; bottom: 0; top: var(--band-start, 14rem); width: 100%; height: calc(100% - var(--band-start, 14rem)); color: var(--merk); opacity: 0.22; pointer-events: none; }
.sectie--band .wrap { position: relative; }

/* ---------- Donker: kanaalwand ---------- */
.donker { position: relative; isolation: isolate; background: var(--c-deep); color: #e6eeec; padding-block: var(--sectie); overflow: hidden; }
.donker > video, .donker > img.achter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.4; }
.donker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-deep) 82%, transparent), color-mix(in srgb, var(--c-deep) 94%, transparent)); }
.donker h1, .donker h2, .donker h3 { color: #fff; }
.donker h2 em, .donker h1 em { color: var(--merk-licht); }
.donker .kicker { color: var(--merk-licht); }
.donker .sectie-kop > .intro, .donker .lead, .donker p { color: var(--c-soft-light); }
.donker a:not(.knop) { color: var(--merk-licht); }
.feiten { list-style: none; margin: 0; padding: var(--s4) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: var(--s2); position: relative; }
.feiten::before { content: ""; position: absolute; top: 0.45rem; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--merk-licht) 45%, transparent); }
.feit { position: relative; border: 1px solid color-mix(in srgb, var(--merk-licht) 32%, transparent); background: color-mix(in srgb, var(--c-deep) 65%, transparent); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.feit::before { content: ""; position: absolute; top: calc(-1 * var(--s4) + 0.45rem - 4px); left: var(--s3); width: 9px; height: 9px; border-radius: 50%; background: var(--c-deep); border: 1.5px solid var(--merk-licht); }
.feit-getal { font: 600 1.6rem/1.1 var(--font-display); color: var(--merk-licht); letter-spacing: -0.01em; }
.feit .kicker { font-size: 0.7rem; }
.feit p { color: #dfe8e5 !important; font-size: var(--t-klein); line-height: 1.55; }
.feit strong { color: #fff; }
@media (max-width: 700px) { .feiten { padding-top: 0; } .feiten::before, .feit::before { display: none; } }
.donker-voet { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3) var(--s4); align-items: center; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--merk-licht) 25%, transparent); }
.donker-voet > :first-child { grid-column: 1 / span 8; display: flex; gap: var(--s3); align-items: flex-start; }
.donker-voet > :last-child { grid-column: 9 / -1; justify-self: end; }
.donker-voet img { width: 56px; flex: none; background: #fff; padding: 4px; }
.donker-voet p { font-size: var(--t-klein); }
@media (max-width: 900px) { .donker-voet > :first-child, .donker-voet > :last-child { grid-column: 1 / -1; justify-self: start; } }

/* ---------- Uitzicht: foto met kaarten erop ---------- */
.uitzicht { padding-top: var(--sectie); border-bottom: 1px solid var(--c-line); }
.uitzicht-foto { height: clamp(15rem, 34vw, 28rem); overflow: hidden; background: var(--c-deep); }
.uitzicht-foto img { width: 100%; height: 100%; object-fit: cover; }
.uitzicht-kaarten { display: grid; grid-template-columns: repeat(12, 1fr); gap: calc(var(--s4) + var(--plaat)); align-items: start; margin-top: calc(-1 * clamp(5rem, 9vw, 8rem)); padding-bottom: var(--sectie); position: relative; }
.uitzicht-kaarten > :first-child { grid-column: 1 / span 7; }
.uitzicht-kaarten > :last-child { grid-column: 8 / -1; margin-top: clamp(0rem, 6vw, 4rem); }
.contact-blok { display: grid; grid-template-columns: repeat(12, 1fr); gap: calc(var(--s4) + var(--plaat)); align-items: start; }
.contact-blok > :first-child { grid-column: 1 / span 7; }
.contact-blok > :last-child { grid-column: 8 / -1; }
@media (max-width: 900px) {
  .uitzicht-kaarten > *, .contact-blok > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .uitzicht-kaarten { margin-top: -3rem; }
}
.adres { display: grid; gap: var(--s4); }
.adres p { color: var(--c-ink-soft); margin-top: var(--s1); }
.adres a { color: var(--merk-diep); text-underline-offset: 3px; }

/* ---------- Formulier ---------- */
.formulier { display: grid; gap: var(--s3); }
.formulier .rij { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 600px) { .formulier .rij { grid-template-columns: 1fr; } }
.veld { display: grid; gap: 0.45rem; }
.veld label { font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-mute); }
.veld input, .veld textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--c-ink); background: var(--c-bg); border: 1px solid var(--c-line); border-bottom-color: var(--c-line-hard); padding: 0.8rem 0.9rem; border-radius: 0; transition: border-color 0.15s, background 0.15s; }
.veld textarea { min-height: 9rem; resize: vertical; }
.veld input:focus, .veld textarea:focus { outline: none; background: #fff; border-color: var(--merk); box-shadow: inset 0 -2px 0 var(--merk); }
.formulier .knop { justify-self: start; }
.melding { display: none; padding: var(--s2) var(--s3); border-left: 3px solid var(--merk); background: var(--merk-zweem); font-size: var(--t-klein); }
.formulier[data-verstuurd] .melding { display: block; }

/* ---------- Lopende tekst ---------- */
.tekst { max-width: 68ch; }
.tekst > * + * { margin-top: var(--s2); }
.tekst h2 { margin-top: var(--s5); }
.tekst h2:first-child { margin-top: 0; }
.tekst h2 + p { margin-top: var(--s3); }
.tekst h3 { margin-top: var(--s4); }
.tekst p, .tekst li { color: var(--c-ink-soft); }
.tekst ul { padding-left: 1.2rem; display: grid; gap: var(--s1); }
.tekst a { color: var(--merk-diep); text-underline-offset: 3px; }
.tekst .mono { color: var(--c-ink-mute); }
.artikel { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) var(--s4); align-items: start; }
.artikel > .tekst-kolom { grid-column: 1 / span 7; }
.artikel > .zij { grid-column: 8 / -1; position: sticky; top: 7rem; }
.artikel--smal > .tekst-kolom { grid-column: 1 / span 8; }
@media (max-width: 900px) { .artikel > .tekst-kolom, .artikel > .zij { grid-column: 1 / -1; position: static; } }
.anker p strong:first-child { color: var(--merk-diep); }
.citaat { margin: 0; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); font: 500 1.2rem/1.5 var(--font-display); color: var(--c-ink); }
.citaat p::before { content: "“"; } .citaat p::after { content: "”"; }
.voetnoot { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--c-line); font: 400 0.9rem/1.6 var(--font-mono); color: var(--c-ink-mute); max-width: 70ch; }

/* ---------- Componentenblok (donkere tegels in licht vlak) ---------- */
.tegelvlak { margin-block: var(--s5); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.tegelvlak .feiten { padding-top: var(--s3); }
.tegelvlak .feiten::before, .tegelvlak .feit::before { display: none; }

/* ---------- Tabel ---------- */
.tabel-wrap { overflow-x: auto; border: 1px solid var(--c-line); background: var(--c-surface); box-shadow: var(--plaat) var(--plaat) 0 var(--merk-plaat); margin-right: var(--plaat); }
.tabel-wrap table { border-collapse: collapse; min-width: 960px; width: 100%; font-size: var(--t-klein); line-height: 1.5; }
.tabel-wrap th, .tabel-wrap td { text-align: left; vertical-align: top; padding: 1rem 1.1rem; border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); }
.tabel-wrap th:last-child, .tabel-wrap td:last-child { border-right: 0; }
.tabel-wrap thead th { font: 500 var(--t-label)/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-mute); border-bottom: 2px solid var(--c-ink); background: var(--c-bg); }
.tabel-wrap tbody th { font-weight: 600; color: var(--c-ink); width: 14%; }
.tabel-wrap td { color: var(--c-ink-soft); }
.tabel-wrap .uitgelicht { background: var(--merk-zweem); color: var(--c-ink); }
.tabel-wrap thead .uitgelicht { color: var(--merk-diep); background: color-mix(in srgb, var(--merk) 16%, var(--c-bg)); }
.tabel-hint { margin-top: var(--s3); font: 400 0.8rem/1.4 var(--font-mono); color: var(--c-ink-mute); }
@media (min-width: 1100px) { .tabel-hint { display: none; } }

/* ---------- Veelgestelde vragen ---------- */
.vragen { border-top: 1px solid var(--c-line); max-width: 52rem; }
.vraag { border-bottom: 1px solid var(--c-line); }
.vraag summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; font: 600 1.15rem/1.35 var(--font-display); letter-spacing: -0.01em; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: ""; width: 14px; height: 14px; background: linear-gradient(var(--merk-diep), var(--merk-diep)) center / 100% 2px no-repeat, linear-gradient(var(--merk-diep), var(--merk-diep)) center / 2px 100% no-repeat; transition: transform 0.3s var(--ease); }
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag summary:hover { color: var(--merk-diep); }
.vraag .antwoord { padding: 0 0 var(--s4); max-width: 68ch; color: var(--c-ink-soft); }

/* ---------- Route (drie stappen) ---------- */
.route { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0; border-top: 4px solid var(--merk); position: relative; }
.route-stap { padding: var(--s4) var(--s4) var(--s4) 0; position: relative; }
.route-stap + .route-stap { padding-left: var(--s4); border-left: 1px solid var(--c-line); }
.route-stap::before { content: ""; position: absolute; top: calc(-4px - 6px); left: 0; width: 14px; height: 14px; background: var(--c-ink); }
.route-stap + .route-stap::before { left: -7px; }
.route-nr { display: block; font: 600 2.75rem/1 var(--font-mono); color: var(--merk); margin-bottom: var(--s3); }
.route-stap h3 { font-size: 1.4rem; margin-bottom: var(--s2); }
.route-stap p { color: var(--c-ink-soft); }
.route-stap p + p { margin-top: var(--s2); }
@media (max-width: 700px) { .route-stap, .route-stap + .route-stap { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--c-line); } .route-stap::before { display: none; } }

/* ---------- Slot-CTA ---------- */
.slot { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.slot .wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3) var(--s4); align-items: end; }
.slot .slot-tekst { grid-column: 1 / span 7; }
.slot .slot-tekst p { margin-top: var(--s2); color: var(--c-ink-soft); max-width: 40em; }
.slot .acties { grid-column: 8 / -1; justify-content: flex-end; }
@media (max-width: 900px) { .slot .slot-tekst, .slot .acties { grid-column: 1 / -1; justify-content: flex-start; } }

/* Lege staat (blog) */
.leeg { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; max-width: 44rem; }
.leeg svg { width: 44px; height: 44px; color: var(--merk); }
.leeg p { color: var(--c-ink-soft); }
.leeg p + p { margin-top: var(--s1); }

/* ---------- Voet ---------- */
.voet { position: relative; isolation: isolate; background: var(--c-deep); color: #d5e0dd; overflow: hidden; padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.voet > video, .voet > img.achter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; z-index: -2; }
.voet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-deep) 86%, transparent), var(--c-deep)); }
.voet-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) var(--s4); padding-bottom: var(--s5); }
.voet-raster > :nth-child(1) { grid-column: 1 / span 6; }
.voet-raster > :nth-child(2) { grid-column: 8 / span 2; }
.voet-raster > :nth-child(3) { grid-column: 10 / -1; }
@media (max-width: 900px) { .voet-raster > :nth-child(n) { grid-column: 1 / -1; } }
@media (min-width: 560px) and (max-width: 900px) { .voet-raster > :nth-child(2) { grid-column: 1 / span 6; } .voet-raster > :nth-child(3) { grid-column: 7 / -1; } }
.voet .kicker { color: var(--merk-licht); }
.voet-motto { font: 600 clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem)/1.25 var(--font-display); color: #fff; letter-spacing: -0.015em; margin-top: var(--s2); max-width: 22em; }
.voet-sub { margin-top: var(--s2); color: var(--c-soft-light); font-size: var(--t-klein); }
.voet-sub a { color: var(--c-soft-light); }
.voet ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 0.45rem; }
.voet ul a, .voet address a { color: #e6eeec; text-decoration: none; }
.voet ul a:hover, .voet address a:hover { color: var(--merk-licht); text-decoration: underline; text-underline-offset: 3px; }
.voet address { font-style: normal; margin-top: var(--s2); line-height: 1.8; font-size: var(--t-klein); color: #d5e0dd; }
.voet-klein { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); padding-block: var(--s3); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.82rem; color: var(--c-soft-light); }
.voet-klein a { color: inherit; }

/* ---------- Concept-melding (Viaductus) ---------- */
.concept { border: 1px dashed var(--merk); background: var(--merk-zweem); padding: var(--s2) var(--s3); font-size: var(--t-klein); }
.concept .kicker { display: block; margin-bottom: 0.3rem; }

/* ---------- Onthullen: alleen voor wat nog onder de vouw staat ---------- */
.js .onthul { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .onthul.is-zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .onthul { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

@media print {
  .kop, .demobalk, .kanaal, .voet video, .menuknop { display: none !important; }
  .donker, .voet { background: #fff; color: #000; }
}

/* ---------- Dienstenoverzicht ---------- */
.diensten { display: grid; gap: calc(var(--s3) + var(--plaat)); }
.dienst { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3) var(--s4); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); background: var(--c-surface); border: 1px solid var(--c-line); border-top: 3px solid var(--merk); box-shadow: var(--plaat) var(--plaat) 0 var(--merk-plaat); }
.dienst > :first-child { grid-column: 1 / span 7; }
.dienst > :last-child { grid-column: 8 / -1; }
.dienst h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); margin: var(--s2) 0 var(--s2); }
.dienst p { color: var(--c-ink-soft); max-width: 46ch; }
.dienst ul { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.dienst li { padding: 0.6rem 0; border-top: 1px solid var(--c-line); }
.dienst li:last-child { border-bottom: 1px solid var(--c-line); }
@media (max-width: 900px) { .dienst > :first-child, .dienst > :last-child { grid-column: 1 / -1; } }

/* Smalle schermen: twaalf kolommen worden er één, zodat tussenruimtes nooit overlopen */
@media (max-width: 900px) {
  .sectie-kop, .paginakop--media .wrap, .treden-blok, .uitzicht-kaarten, .contact-blok, .artikel, .slot .wrap, .donker-voet, .dienst, .voet-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 560px) and (max-width: 900px) {
  .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-raster > :nth-child(1) { grid-column: 1 / -1; }
  .voet-raster > :nth-child(2), .voet-raster > :nth-child(3) { grid-column: auto; }
}

/* Kop en intro beginnen op dezelfde hoogte: de intro start waar de titel start */
.sectie-kop { align-items: start; }
.sectie-kop > .intro { padding-top: calc(var(--t-label) * 1.6 + var(--s2) + 0.35rem); }
@media (max-width: 900px) { .sectie-kop > .intro { padding-top: 0; } }
.sectie-kop--alleen { margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }

/* Hero: de waterband is achtergrond, geen hoofdrol. Lager, iets gedempt,
   en het tekstvlak ligt er voor het grootste deel overheen. */
.hero .kanaal { height: clamp(10rem, 20vw, 16rem); }
.hero .kanaal::after { inset: 0; height: auto; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), color-mix(in srgb, var(--c-deep) 35%, transparent)); }
.hero .wrap { margin-top: calc(-1 * clamp(6.5rem, 13vw, 11rem)); }

/* Variant "diep": hoge, onscherpe waterband die in de pagina oplost,
   met een groot matglazen vlak en het tekstvlak daaroverheen. */
.hero--diep .kanaal { height: clamp(24rem, 48vw, 40rem); }
.hero--diep .kanaal video { filter: blur(10px) saturate(0.75) brightness(0.92); transform: scale(1.08); }
.hero--diep .kanaal::after { inset: 0; height: auto; background: linear-gradient(to bottom, color-mix(in srgb, var(--c-deep) 25%, transparent) 0%, transparent 35%, color-mix(in srgb, var(--c-bg) 55%, transparent) 75%, var(--c-bg) 100%); }
.hero--diep .wrap { margin-top: calc(-1 * clamp(15rem, 32vw, 27rem)); }
.hero--diep .hero-laag { position: absolute; z-index: 1; right: 0; left: 38%; top: clamp(7rem, 15vw, 13rem); height: clamp(14rem, 26vw, 22rem); background: color-mix(in srgb, var(--c-surface) 42%, transparent); backdrop-filter: blur(18px) saturate(1.1); border-top: 1px solid color-mix(in srgb, #fff 55%, transparent); }
.hero--diep .hero-paneel { max-width: 52rem; box-shadow: var(--plaat) var(--plaat) 0 var(--merk-plaat), 0 40px 80px -40px rgba(10, 30, 26, 0.45); }
@media (max-width: 900px) { .hero--diep .hero-laag { display: none; } .hero--diep .kanaal { height: 20rem; } .hero--diep .wrap { margin-top: -10rem; } }
.hero--diep .hero-laag { top: clamp(5rem, 11vw, 9.5rem); left: 30%; background: color-mix(in srgb, var(--c-surface) 24%, transparent); backdrop-filter: blur(26px) saturate(1.15) brightness(1.06); border-top-color: color-mix(in srgb, #fff 40%, transparent); }

/* Wisselend beeld bij de treden: alle beelden op elkaar, het actieve zichtbaar */
.figuur--wissel .kader { display: grid; aspect-ratio: var(--ratio, 4 / 5); overflow: hidden; }
.figuur--wissel img { grid-area: 1 / 1; aspect-ratio: auto; height: 100%; opacity: 0; transform: scale(1.03); transition: opacity 0.6s var(--ease), transform 1.2s var(--ease); }
.figuur--wissel img.is-actief { opacity: 1; transform: none; }
.figuur--wissel .teller { z-index: 2; }
.dienst-beeld { aspect-ratio: 4 / 3; overflow: hidden; margin: calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.75rem)) 0 0; margin-inline: calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.75rem)); }
.dienst-beeld img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 901px) {
  .dienst { grid-template-columns: repeat(12, 1fr); }
  .dienst > .dienst-beeld { grid-column: 1 / span 3; margin: calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.75rem)) 0 calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.75rem)) calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.75rem)); aspect-ratio: auto; min-height: 100%; }
  .dienst > .dienst-beeld + div { grid-column: 4 / span 5; }
  .dienst > :last-child { grid-column: 9 / -1; }
}

/* ---------- Stroom: de feitenrij in een donkere band ----------
   Kaarten in een golf, een getekende lijn erdoorheen (gedrag.js meet de punten),
   matglas boven de video en een groot spookcijfer als achterste laag. */
.donker > .wrap > .feiten { padding-top: 5.5rem; gap: calc(var(--s3) + 10px); align-items: start; }
.donker > .wrap > .feiten::before { display: none; }
.donker > .wrap > .feiten > .feit { overflow: hidden; background: color-mix(in srgb, var(--c-deep) 55%, transparent); backdrop-filter: blur(8px); border-color: color-mix(in srgb, var(--merk-licht) 28%, transparent); box-shadow: 10px 10px 0 color-mix(in srgb, var(--merk-licht) 14%, transparent); min-height: 11rem; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s; }
.donker > .wrap > .feiten > .feit::after { content: attr(data-n); position: absolute; right: -0.4rem; bottom: -2.2rem; font: 700 7.5rem/1 var(--font-display); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--merk-licht) 30%, transparent); pointer-events: none; }
.donker > .wrap > .feiten > .feit .feit-getal, .donker > .wrap > .feiten > .feit p { position: relative; z-index: 1; }
.donker > .wrap > .feiten > .feit::before { top: -3.25rem; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-width: 2px; box-shadow: 0 0 0 0 color-mix(in srgb, var(--merk-licht) 60%, transparent); }
.donker > .wrap > .feiten.is-zichtbaar > .feit::before { animation: polsslag 2.8s var(--ease) infinite; }
.donker > .wrap > .feiten > .feit:nth-of-type(2n) { transform: translateY(2.75rem); }
.donker > .wrap > .feiten > .feit:nth-of-type(3n) { transform: translateY(1rem); }
.donker > .wrap > .feiten > .feit:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--merk-licht) 60%, transparent); box-shadow: 14px 14px 0 color-mix(in srgb, var(--merk-licht) 22%, transparent); }
.donker > .wrap > .feiten > .feit:nth-of-type(2n):hover { transform: translateY(calc(2.75rem - 4px)); }
.donker > .wrap > .feiten > .feit:nth-of-type(3n):hover { transform: translateY(calc(1rem - 4px)); }
.stroomlijn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.stroomlijn path { fill: none; stroke: var(--merk-licht); stroke-width: 1.5; stroke-linecap: round; opacity: 0.75; }
.stroomlijn path.echo { stroke-width: 7; opacity: 0.08; }
.donker > .wrap > .feiten { margin-bottom: 2.75rem; }
@keyframes polsslag { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--merk-licht) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
@media (max-width: 900px) {
  .donker > .wrap > .feiten { padding-top: 0; margin-bottom: 0; }
  .donker > .wrap > .feiten > .feit, .donker > .wrap > .feiten > .feit:nth-child(n) { transform: none; }
  .donker > .wrap > .feiten > .feit::before, .stroomlijn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feiten .stroomlijn path { transition: none !important; stroke-dashoffset: 0 !important; }
  .donker > .wrap > .feiten.is-zichtbaar > .feit::before { animation: none; }
}
.donker > .wrap > .feiten > .feit { overflow: visible; }
.donker > .wrap > .feiten > .feit::after { bottom: 0.35rem; right: 0.6rem; font-size: 5.5rem; line-height: 0.72; }

/* Treden met beeld: de trede in het midden van het scherm licht op, de rest treedt terug */
@media (min-width: 901px) {
  [data-treden] .trede { opacity: 0.5; transition: opacity 0.4s var(--ease), background 0.3s; }
  [data-treden] .trede.is-actief { opacity: 1; }
  [data-treden] .trede-nr { transition: color 0.3s; }
  [data-treden] .trede:not(.is-actief) .trede-nr { color: var(--c-ink-mute); }
}
.trede .competenties-kop { margin-top: var(--s3); font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.trede ul.competenties { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s1); }
.trede ul.competenties li { font-size: 0.9rem; padding: 0.3rem 0.65rem; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink-soft); }

.kop-onder { margin-top: var(--s4); max-width: 30em; display: grid; gap: var(--s2); padding-left: var(--s3); border-left: 2px solid var(--merk); }
.donker .kop-onder { border-left-color: var(--merk-licht); }
.donker .kop-onder .lead { color: #e6eeec; }

/* Wisselend beeld: even breed als de lijst en zo hoog als het scherm toelaat */
@media (min-width: 901px) {
  .treden-blok:has(.figuur--wissel) { column-gap: clamp(2rem, 4vw, 4.5rem); }
  .treden-blok > .figuur--wissel { grid-column: 1 / span 6; top: 6.5rem; }
  .treden-blok > .figuur--wissel + .treden { grid-column: 7 / -1; }
  .figuur--wissel .kader { aspect-ratio: auto; height: min(calc(100vh - 9rem), 46rem); }
}
/* Altijd staand (4:5), zo groot als het scherm toelaat */
@media (min-width: 901px) {
  .figuur--wissel .kader { height: min(calc(100vh - 8.5rem), 56rem); width: auto; max-width: 100%; aspect-ratio: 4 / 5; }
  .treden-blok:has(.figuur--wissel) { align-items: start; min-height: min(calc(100vh - 8.5rem), 56rem); }
  .treden-blok > .figuur--wissel { top: 6rem; justify-self: start; }
}
@media (min-width: 901px) {
  .treden-blok > .figuur--wissel { width: min(100%, calc(min(100vh - 8.5rem, 56rem) * 0.8)); }
  .figuur--wissel .kader { width: 100%; height: auto; aspect-ratio: 4 / 5; }
}

/* ---------- Hero: rechterzijde met beelden en wegwijzer ---------- */
@media (min-width: 1000px) {
  .hero .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4); align-items: start; }
  .hero .hero-paneel { grid-column: 1 / span 7; position: relative; z-index: 3; }
  .hero-zij { grid-column: 8 / -1; position: relative; min-height: 34rem; margin-top: clamp(1rem, 3vw, 3rem); }
}
.hero-zij { display: none; }
@media (min-width: 1000px) { .hero-zij { display: block; } }
.hero-foto { position: absolute; margin: 0; overflow: hidden; background: var(--c-deep); box-shadow: var(--plaat) var(--plaat) 0 var(--merk-plaat), 0 30px 60px -30px rgba(10, 30, 26, 0.5); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-foto--groot { right: 0; top: 0; width: 78%; aspect-ratio: 4 / 5; }
.hero-foto--klein { left: 0; top: 46%; width: 52%; aspect-ratio: 1 / 1; z-index: 2; border: 6px solid var(--c-surface); }
.hero-wijzer { position: absolute; right: -0.5rem; bottom: -3rem; width: 70%; z-index: 3; background: color-mix(in srgb, var(--c-deep) 92%, transparent); backdrop-filter: blur(10px); color: #e6eeec; padding: var(--s3); border-top: 3px solid var(--merk-licht); }
.hero-wijzer .kicker { color: var(--merk-licht); }
.hero-wijzer ol { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.hero-wijzer a { display: grid; grid-template-columns: 2rem 1fr auto; align-items: baseline; gap: 0.25rem; padding: 0.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); text-decoration: none; font-size: 0.95rem; color: #e6eeec; transition: color 0.2s, padding 0.3s var(--ease); }
.hero-wijzer a .mono { font-size: 0.75rem; color: var(--merk-licht); }
.hero-wijzer a .pijl { opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.3s var(--ease); color: var(--merk-licht); }
.hero-wijzer a:hover { color: #fff; padding-left: 0.35rem; }
.hero-wijzer a:hover .pijl { opacity: 1; transform: none; }
.hero--diep .hero-laag { left: 52%; }
.hero-foto--groot img { object-position: 62% 50%; }
.hero-foto--groot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--c-deep) 35%, transparent)); }

/* ---------- Hero, versoberd: tekstvlak + één staande foto, zelfde boven- en onderkant ---------- */
.hero--diep .hero-laag, .hero-foto, .hero-wijzer { display: none; }
@media (min-width: 1000px) {
  .hero .wrap { align-items: stretch; column-gap: clamp(2rem, 3.5vw, 3.5rem); }
  .hero-zij { display: block; grid-column: 8 / -1; position: relative; margin: 0; min-height: 0; overflow: hidden; background: var(--c-deep); border-top: 3px solid var(--merk); box-shadow: var(--plaat) var(--plaat) 0 var(--merk-plaat), 0 40px 80px -40px rgba(10, 30, 26, 0.45); }
  .hero-zij img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Compacter ritme: kop en eerste inhoud samen in het eerste scherm ---------- */
:root { --sectie: clamp(3.25rem, 2.2rem + 4vw, 6rem); }
.kanaal--smal { height: clamp(4.5rem, 8vw, 7rem); }
.paginakop { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.paginakop + .sectie, .paginakop + .sectie--band { padding-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.paginakop .sectie-kop > .intro { padding-top: 0; align-self: end; }
.paginakop .sectie-kop { align-items: end; }
.sectie-kop { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.hero { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.hero--diep .kanaal { height: clamp(16rem, 30vw, 26rem); }
.hero--diep .wrap { margin-top: calc(-1 * clamp(11rem, 22vw, 19rem)); }
.hero-paneel { padding: clamp(1.5rem, 0.8rem + 2.6vw, 2.75rem); }
.hero-paneel h1 { margin: var(--s2) 0; }
.hero-paneel .acties { margin-top: var(--s3); }
.keurmerk { margin-top: var(--s3); padding-top: var(--s2); }