:root{
  color-scheme: light;
  --ink:#10303F; --ink-2:#17475E; --blue:#2E6E8E; --blue-lt:#8FBCD4;
  --ice:#EDF3F6; --ice-2:#F7FAFB; --paper:#FCFBF9; --sand:#B9855E;
  --text:#3D5460; --muted:#6E8592; --line:rgba(16,48,63,.13); --line-soft:rgba(16,48,63,.08);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(20px,4.5vw,56px); --gap:clamp(32px,4.5vw,60px);
  --sec:clamp(52px,6.5vw,92px);
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.72;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; color:var(--ink); font-family:var(--serif); letter-spacing:-.012em;
  text-wrap:balance}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
::selection{background:var(--ink); color:#fff}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:2px}
.op-donker :focus-visible,.hero :focus-visible,.nu :focus-visible,.pro :focus-visible,footer :focus-visible{outline-color:var(--blue-lt)}

.wrap{max-width:1240px; margin:0 auto; padding-inline:var(--pad)}
.narrow{max-width:820px}

/* ---------- woordmerk ---------- */
.merk{position:relative; display:block; line-height:0; text-decoration:none}
.merk img{display:block; height:46px; width:auto; transition:opacity .35s}
.merk .donker{position:absolute; left:0; top:0; opacity:0}
header.vast .merk .donker{opacity:1}
header.vast .merk .wit{opacity:0}
.merk-voet{display:inline-block; line-height:0; text-decoration:none}
.merk-voet img{height:104px; width:auto}
.merkblok{display:flex; align-items:center; gap:16px}
.merkblok .merk{transition:opacity .25s}
.merkblok .merk:hover{opacity:.72}
.paginalabel{font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:rgba(255,255,255,.72);
  border-left:1px solid rgba(255,255,255,.28); padding-left:16px; white-space:nowrap}
header.vast .paginalabel{color:var(--blue); border-left-color:var(--line)}

/* ---------- header ---------- */
header{position:fixed; inset:0 0 auto; z-index:60; transition:background .35s, box-shadow .35s, border-color .35s;
  border-bottom:1px solid transparent}
/* boven een hero staat de kopbalk op de foto; een zachte sluier houdt logo,
   navigatie en menuknop leesbaar, ook als de foto daar licht is */
header.op-donker::before{content:""; position:absolute; inset:0 0 auto; height:150px; z-index:-1;
  pointer-events:none; background:linear-gradient(rgba(6,20,28,.52), rgba(6,20,28,0))}
header.vast::before{opacity:0}
header .bar{display:flex; align-items:center; justify-content:space-between; gap:24px; height:86px}
header.vast{background:rgba(252,251,249,.94); backdrop-filter:blur(14px); border-bottom-color:var(--line-soft)}
nav{display:flex; align-items:center; gap:26px}
nav a{font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  color:rgba(255,255,255,.86); padding:6px 0; position:relative; transition:color .25s; white-space:nowrap}
nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .3s ease}
nav a:hover::after,nav a.actief::after{right:0}
header.vast nav a{color:var(--ink-2)}
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:2px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; font-weight:500;
  padding:15px 26px; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .28s, color .28s, border-color .28s, transform .28s;
}
.knop-vol{background:var(--ink); color:#fff}
.knop-vol:hover{background:var(--ink-2); transform:translateY(-1px)}
.knop-lijn{border-color:rgba(255,255,255,.42); color:#fff}
.knop-lijn:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.knop-lijn-d{border-color:var(--line); color:var(--ink)}
.knop-lijn-d:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.knop-licht{background:#fff; color:var(--ink)}
.knop-licht:hover{background:var(--ice); transform:translateY(-1px)}
header .knop{padding:13px 22px}
header.vast .knop-lijn{border-color:var(--line); color:var(--ink)}
header.vast .knop-lijn:hover{background:var(--ink); color:#fff; border-color:var(--ink)}

.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; padding:0; margin-right:-10px}
.burger i{display:block; width:22px; height:1px; background:#fff; position:relative; transition:background .3s}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:22px; height:1px; background:inherit; transition:transform .3s}
.burger i::before{top:-7px} .burger i::after{top:7px}
header.vast .burger i{background:var(--ink)}
body.menu-open .burger i{background:transparent!important}
body.menu-open .burger i::before{background:var(--ink); transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i::after{background:var(--ink); transform:translateY(-7px) rotate(-45deg)}

.paneel{position:fixed; inset:86px 0 0; z-index:55; background:var(--paper); padding:22px var(--pad) 40px;
  display:none; flex-direction:column; gap:2px; overflow-y:auto}
.paneel a{font-family:var(--serif); font-size:26px; text-decoration:none; color:var(--ink);
  padding:15px 0; border-bottom:1px solid var(--line-soft)}
.paneel .knop{margin-top:24px; align-self:flex-start; font-size:11px}
body.menu-open .paneel{display:flex}
body.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(92svh,900px); display:flex; align-items:flex-end;
  padding:150px 0 clamp(56px,8vw,104px); overflow:hidden; background:var(--ink)}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(103deg,rgba(8,26,35,.92) 0%,rgba(8,26,35,.74) 38%,rgba(8,26,35,.30) 68%,rgba(8,26,35,.42) 100%)}
.hero .wrap{position:relative; z-index:2; width:100%}
.hero-in{max-width:790px}
.hero h1{color:#fff; font-weight:200; font-size:clamp(37px,6.1vw,74px); line-height:1.06; letter-spacing:-.021em}
.hero p{color:rgba(255,255,255,.82); font-size:clamp(16px,1.55vw,19.5px); max-width:560px; margin-top:26px; line-height:1.68}
.hero .acties{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px}
.oog{display:inline-flex; align-items:center; gap:14px; font-size:10.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--blue); font-weight:500; margin-bottom:26px}
.oog::before{content:""; width:26px; height:1px; background:currentColor; flex:none}
.hero .oog{color:var(--blue-lt)}
.scrol{position:absolute; left:50%; bottom:26px; z-index:3; transform:translateX(-50%);
  width:1px; height:52px; background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.55))}

/* ---------- secties ---------- */
section{position:relative}
.vak{padding-block:var(--sec)}
.vak-ice{background:var(--ice-2)}
.vak-lijn{border-top:1px solid var(--line-soft)}
h2{font-weight:200; font-size:clamp(29px,4.1vw,52px); line-height:1.13}
h3{font-weight:300; font-size:clamp(21px,2.3vw,27px); line-height:1.25}
.lead{font-size:clamp(17px,1.5vw,19.5px); line-height:1.7; color:var(--ink-2)}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center}
.duo-40{grid-template-columns:.86fr 1.14fr}
.duo-top{align-items:start}

/* erkenning */
.erk h2{max-width:16ch}
.erk .tekst{margin-top:30px; max-width:52ch}
.knal{font-family:var(--serif); font-weight:200; font-size:clamp(30px,4.4vw,54px);
  line-height:1.15; color:var(--ink); margin-top:40px; letter-spacing:-.02em}
.knal em{font-style:italic; color:var(--blue)}
.beeld{position:relative; border-radius:3px; overflow:hidden}
.beeld img{width:100%; height:100%; object-fit:cover}
.beeld-hoog{aspect-ratio:4/5}
.merkje{position:absolute; left:0; bottom:0; background:var(--paper); padding:20px 26px 0 0;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}

/* keuzekaarten */
.kaarten{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:56px}
.kaart{background:var(--paper); padding:clamp(28px,3.2vw,42px); display:flex; flex-direction:column;
  gap:16px; text-decoration:none; transition:background .3s}
.kaart:hover{background:#fff}
.kaart h3{font-size:clamp(19px,1.9vw,23px); line-height:1.3}
.kaart p{font-size:15.5px; line-height:1.65; color:var(--muted)}
.kaart .heen{margin-top:auto; padding-top:12px; font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:9px; font-weight:500}
.kaart .heen svg{transition:transform .3s}
.kaart:hover .heen svg{transform:translateX(5px)}

/* traject */
.fase{display:grid; grid-template-columns:110px 1fr 1.15fr; gap:clamp(20px,3.5vw,56px);
  padding:clamp(30px,3.4vw,44px) 0; border-top:1px solid var(--line-soft); align-items:start}
.fase:last-of-type{border-bottom:1px solid var(--line-soft)}
.fase .cijfer{font-family:var(--serif); font-weight:200; font-size:clamp(34px,3.6vw,46px);
  color:var(--blue-lt); line-height:1; letter-spacing:0}
.fase h3{margin-bottom:12px}
.fase .meta{display:flex; flex-wrap:wrap; gap:8px}
.fase .meta span{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:2px; padding:6px 11px; white-space:nowrap}
.fase p{font-size:16px; color:var(--muted); line-height:1.7}
.fase .sub{color:var(--blue); font-family:var(--serif); font-size:17px; font-style:italic; margin-bottom:14px}

/* accordeon */
.acc{border-top:1px solid var(--line-soft)}
.acc-item{border-bottom:1px solid var(--line-soft)}
.acc-kop{width:100%; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit;
  display:flex; align-items:baseline; gap:clamp(16px,2.4vw,34px); padding:24px 0; color:var(--ink)}
.acc-kop .n{font-family:var(--serif); font-size:13px; color:var(--blue-lt); letter-spacing:.16em; flex:none; width:26px}
.acc-kop .t{font-family:var(--serif); font-size:clamp(19px,2vw,25px); font-weight:300; line-height:1.3; flex:1;
  transition:color .25s}
.acc-kop:hover .t{color:var(--blue)}
.acc-kop .pm{flex:none; width:15px; height:15px; position:relative; margin-top:6px}
.acc-kop .pm::before,.acc-kop .pm::after{content:""; position:absolute; background:var(--blue); transition:transform .35s}
.acc-kop .pm::before{top:7px; left:0; width:15px; height:1px}
.acc-kop .pm::after{left:7px; top:0; width:1px; height:15px}
.acc-kop[aria-expanded="true"] .pm::after{transform:rotate(90deg)}
.acc-body{overflow:hidden; max-height:0; transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.acc-body>div{padding:0 0 28px clamp(42px,4.4vw,60px); max-width:70ch}
.acc-body p{font-size:16px; color:var(--muted)}
.acc-body .cit{font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-2); margin-top:14px}

/* lijst met vinkjes */
.inbeg{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.inbeg li{display:flex; gap:13px; font-size:15.5px; color:var(--muted); line-height:1.6}
.inbeg li::before{content:""; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--blue-lt); margin-top:9px}

/* NU band */
.nu{position:relative; min-height:min(76svh,660px); display:flex; align-items:center;
  text-align:center; padding-block:clamp(80px,10vw,130px); background:var(--ink); overflow:hidden}
.nu img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%}
.nu::after{content:""; position:absolute; inset:0;
  background:radial-gradient(76% 86% at 50% 50%, rgba(8,28,37,.68) 0%, rgba(8,28,37,.44) 100%)}
.nu h2,.nu p{text-shadow:0 1px 26px rgba(6,20,28,.55)}
.nu .wrap{position:relative; z-index:2}
.nu .oog{color:rgba(255,255,255,.88); justify-content:center; margin-inline:auto;
  text-shadow:0 1px 18px rgba(6,20,28,.6)}
.nu h2{color:#fff; font-weight:200; max-width:19ch; margin-inline:auto; font-size:clamp(30px,4.6vw,56px)}
.nu p{color:rgba(255,255,255,.78); max-width:56ch; margin:26px auto 0; font-size:17px}
.nu .regels{margin-top:34px; font-family:var(--serif); font-style:italic; color:var(--blue-lt); font-size:19px; line-height:2}

/* natuur */
.nat-beeld{display:grid; grid-template-columns:repeat(12,1fr); margin-bottom:56px}
.nat-beeld .a{grid-column:1/11; grid-row:1; aspect-ratio:5/4}
.nat-beeld .b{grid-column:8/13; grid-row:1; align-self:end; aspect-ratio:1/1;
  transform:translateY(56px); border:9px solid var(--paper)}

/* waarom */
.raster{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); margin-top:56px}
.cel{background:var(--ice-2); padding:clamp(26px,3vw,40px)}
.cel h3{font-family:var(--serif); font-weight:300; font-size:20px; margin-bottom:11px; line-height:1.3}
.cel p{font-size:15px; color:var(--muted); line-height:1.65}

/* over */
.over-feiten{list-style:none; margin:34px 0 0; padding:26px 0 0; border-top:1px solid var(--line);
  display:grid; gap:14px}
.over-feiten li{display:grid; grid-template-columns:88px 1fr; gap:20px; font-size:15.5px; line-height:1.6}
.over-feiten b{font-weight:400; font-family:var(--serif); color:var(--blue); font-size:15px; letter-spacing:.02em}
.over-feiten span{color:var(--muted)}
blockquote{margin:0; padding-left:26px; border-left:1px solid var(--blue-lt);
  font-family:var(--serif); font-style:italic; font-size:clamp(19px,2vw,24px); line-height:1.5; color:var(--ink)}

/* vakgebieden */
.vakken{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); margin-top:52px}
.vk{background:var(--paper); padding:clamp(24px,2.6vw,34px); transition:background .3s}
.vk:hover{background:var(--ice-2)}
.vk h3{font-family:var(--serif); font-weight:300; font-size:19px; margin-bottom:8px; color:var(--ink)}
.vk p{font-size:14.5px; color:var(--muted); line-height:1.6}

/* professionals */
.pro{background:var(--ink); color:rgba(255,255,255,.78)}
.pro h2{color:#fff}
.pro .oog{color:var(--blue-lt)}
.pro .lead{color:rgba(255,255,255,.8)}
.pro .inbeg li{color:rgba(255,255,255,.72)}
.pro .inbeg li::before{background:var(--blue-lt)}
.pro-kader{border:1px solid rgba(255,255,255,.16); padding:clamp(26px,3vw,38px); border-radius:3px}
.pro-kader h3{font-family:var(--serif); font-weight:300; color:#fff; font-size:20px; margin-bottom:14px}

/* formulier */
.privnoot{font-size:13px; color:var(--muted); line-height:1.6; border-left:1px solid var(--line); padding-left:18px}

/* contactblok */
.contactgeg{display:grid; gap:22px}
.contactgeg .g{border-top:1px solid var(--line); padding-top:16px}
.contactgeg .g b{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:7px}
.contactgeg .g a,.contactgeg .g span{font-family:var(--serif); font-size:19px; color:var(--ink); text-decoration:none}
.contactgeg .g a:hover{color:var(--blue)}

/* footer */
footer{background:var(--ink); color:rgba(255,255,255,.62); padding-block:clamp(56px,7vw,88px) 30px; font-size:14.5px}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--gap); padding-bottom:52px;
  border-bottom:1px solid rgba(255,255,255,.13)}
footer h5{margin:0 0 16px; font-family:var(--sans); font-weight:500; font-size:10.5px;
  letter-spacing:.17em; text-transform:uppercase; color:rgba(255,255,255,.5)}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
footer a{color:rgba(255,255,255,.72); text-decoration:none; transition:color .25s}
footer a:hover{color:#fff}
.foot-p{max-width:38ch; margin-top:22px; line-height:1.7; color:rgba(255,255,255,.58)}
.foot-onder{display:flex; flex-wrap:wrap; gap:16px 34px; justify-content:space-between;
  padding-top:26px; font-size:12.5px; color:rgba(255,255,255,.42)}

/* reveal */
.op{opacity:0; transform:translateY(22px); transition:opacity .85s cubic-bezier(.2,.6,.2,1), transform .85s cubic-bezier(.2,.6,.2,1)}
.op.zichtbaar{opacity:1; transform:none}

@media (max-width:1000px){
  .duo,.duo-40{grid-template-columns:1fr; gap:44px}
  .kaarten,.raster,.vakken{grid-template-columns:1fr}
  .fase{grid-template-columns:66px 1fr; row-gap:16px}
  .fase .beschrijving{grid-column:2}
  .foot-top{grid-template-columns:1fr 1fr}
  .nat-beeld{margin-bottom:44px}
  .nat-beeld .a{grid-column:1/13} .nat-beeld .b{grid-column:8/13; transform:translateY(44px)}
}
@media (max-width:1180px){
  nav,header .knop{display:none}
  .burger{display:flex}
}
@media (max-width:760px){
  body{font-size:16px}
  .merk img{height:38px}
  .merk-voet img{height:88px}
  .rij{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr; gap:34px}
  .over-feiten li{grid-template-columns:1fr; gap:2px}
  .hero{min-height:auto; padding-top:132px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .op{opacity:1; transform:none}
}
html{scroll-behavior:smooth; scroll-padding-top:96px}

/* ============================================================
   Onderdelen van de homepage
   ============================================================ */

/* opsomming onder de hero: korte regels onder elkaar */
.regelblok{font-family:var(--serif); font-weight:300; font-size:clamp(19px,2.1vw,25px);
  line-height:1.62; color:var(--ink); letter-spacing:-.01em}
.regelblok span{display:block}
.regelblok span+span{margin-top:2px}

/* kaartraster in twee kolommen */
.kaarten-2{grid-template-columns:1fr 1fr}

/* uitgelicht blok, voor het vrouwenhart op de homepage */
.uitgelicht{display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  border:1px solid var(--line); margin-top:1px; background:var(--paper)}
.uitgelicht .beeldzij{position:relative; min-height:340px; overflow:hidden}
.uitgelicht .beeldzij img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.uitgelicht .tekstzij{padding:clamp(30px,3.6vw,52px)}
.uitgelicht h3{font-size:clamp(23px,2.5vw,31px); margin-bottom:14px}
.uitgelicht .sub{font-family:var(--serif); font-style:italic; color:var(--blue); font-size:18px; margin-bottom:18px}
.uitgelicht p{font-size:16px; color:var(--muted)}
.fasekralen{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.fasekralen span{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--blue);
  border:1px solid var(--line); border-radius:2px; padding:7px 13px; white-space:nowrap}

/* losse etiketten, bijvoorbeeld de ervaringsgebieden */
.etiketten{display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; padding:0; list-style:none}
.etiketten li{font-size:12.5px; letter-spacing:.03em; color:var(--ink-2);
  background:var(--ice); border-radius:2px; padding:8px 14px}

/* het ritme van de werkwijze: Luisteren, Ervaren, Begrijpen ... */
.ritme{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; margin-top:4px;
  font-family:var(--serif); font-size:clamp(19px,2.2vw,26px);
  font-weight:300; color:var(--ink); line-height:1.55}
.ritme span{white-space:nowrap}
/* het bolletje hoort bij het woord ervoor, zo begint een nieuwe regel nooit met een bolletje */
.ritme span:not(:last-child)::after{content:"\00b7"; color:var(--blue-lt); margin-left:14px}

/* het blok Samen, met het beeldmerk erboven */
.samen{text-align:center}
.samen img{width:clamp(96px,11vw,132px); height:auto; margin:0 auto 30px}
.samen h2{max-width:19ch; margin-inline:auto}
.samen .tekst{max-width:56ch; margin:26px auto 0}
.samen .slot{font-family:var(--serif); font-style:italic; font-size:clamp(21px,2.4vw,30px);
  color:var(--blue); margin-top:32px}

/* wegwijzers: waar wil je beginnen */
.routes{margin-top:48px; border-top:1px solid var(--line-soft)}
.route{display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px;
  padding:24px 0; border-bottom:1px solid var(--line-soft); text-decoration:none;
  transition:padding-left .3s, background .3s}
.route:hover{padding-left:14px; background:linear-gradient(90deg,var(--ice-2),transparent 60%)}
.route .vraag{font-family:var(--serif); font-size:clamp(18px,1.9vw,22px); font-weight:300; color:var(--ink); line-height:1.35}
.route .heen{font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:10px; font-weight:500; white-space:nowrap}
.route .heen svg{transition:transform .3s}
.route:hover .heen svg{transform:translateX(5px)}

/* eenvoudige koppagina voor de losse vakgebieden */
.paginakop{padding:calc(86px + clamp(56px,7vw,96px)) 0 clamp(40px,5vw,64px); background:var(--ice-2);
  border-bottom:1px solid var(--line-soft)}
.paginakop h1{font-weight:200; font-size:clamp(32px,4.6vw,56px); line-height:1.1; max-width:18ch}
.paginakop .lead{margin-top:24px; max-width:60ch}
.kruimel{display:inline-flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted); text-decoration:none; margin-bottom:24px}
.kruimel:hover{color:var(--blue)}
.kruimel svg{transform:rotate(180deg)}

/* tekstpagina */
.artikel{max-width:68ch}
.artikel h2{font-weight:300; font-size:clamp(21px,2.3vw,27px); line-height:1.25; margin:44px 0 14px}
.artikel h2:first-child{margin-top:0}
.artikel ul{list-style:none; margin:18px 0; padding:0; display:grid; gap:10px}
.artikel ul li{display:flex; gap:13px; color:var(--muted); line-height:1.65}
.artikel ul li::before{content:""; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--blue-lt); margin-top:10px}
.artikel .vraagreeks{font-family:var(--serif); font-size:19px; line-height:1.75; color:var(--ink-2);
  border-left:1px solid var(--blue-lt); padding-left:24px; margin:26px 0}

@media (max-width:1000px){
  .kaarten-2{grid-template-columns:1fr}
  .uitgelicht{grid-template-columns:1fr}
  /* zonder dit houdt een lange knop de kolom breder dan het scherm */
  .uitgelicht>*{min-width:0}
  .uitgelicht .beeldzij{min-height:260px}
}
@media (max-width:760px){
  .route{grid-template-columns:1fr; gap:10px}
  .route .heen{justify-self:start}
  /* op een smal scherm mogen lange labels over twee regels, anders duwen ze
     de pagina breder dan het scherm */
  .knop{white-space:normal; text-align:center; line-height:1.45}
  .route>*{min-width:0}
  .route .heen{white-space:normal; line-height:1.6}
  .fase .meta span,.fasekralen span{white-space:normal}
}

/* schema van de vicieuze cirkel: staat op wit, dus een eigen kader */
.schema{background:#fff; border:1px solid var(--line-soft); border-radius:3px; padding:clamp(14px,2vw,26px)}
.schema img{width:100%; height:auto}

/* ---------- lichte hero, tekst naast het beeld ----------
   De vorige hero legde een donker verloop over de foto, waardoor het logo
   linksboven in een donkere hoek stond. Nu staat de tekst op papier en het
   beeld ernaast, zodat de kopbalk altijd op een lichte ondergrond valt. */
.hero-licht{display:grid; grid-template-columns:1.02fr .98fr; align-items:stretch;
  min-height:min(84svh,760px); background:var(--paper); padding-top:86px}
.hero-licht .tekstzij{display:flex; flex-direction:column; justify-content:center;
  padding:clamp(44px,6vw,86px) clamp(28px,4vw,64px) clamp(44px,6vw,86px)
          max(var(--pad), calc((100vw - 1240px) / 2 + var(--pad)))}
.hero-licht .beeldzij{position:relative; overflow:hidden; min-height:320px}
.hero-licht .beeldzij img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-licht h1{font-weight:200; font-size:clamp(33px,4.3vw,58px); line-height:1.08; letter-spacing:-.02em}
.hero-licht .lead{margin-top:24px; max-width:46ch}
.hero-licht .acties{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}

/* het bronzen beeld in het blok Samen */
.samen .beeldmerk-groot{width:clamp(186px,23vw,300px)}

/* vijfde kaart in een raster van twee kolommen loopt over de volle breedte */
.kaarten-2 .kaart:last-child:nth-child(odd){grid-column:1 / -1}

@media (max-width:900px){
  .hero-licht{grid-template-columns:1fr; min-height:0; padding-top:86px}
  .hero-licht .tekstzij{padding:clamp(40px,7vw,64px) var(--pad)}
  .hero-licht .beeldzij{min-height:clamp(260px,52vw,420px); position:relative}
  .kaarten-2 .kaart:last-child:nth-child(odd){grid-column:auto}
}

/* kleinere knop, voor binnen een tekstblok */
.knop-klein{padding:11px 18px; font-size:10px}

/* rode draad met de tekst links en het beeld rechts in zicht */
.nu-links{text-align:left}
.nu-links img{object-position:72% 46%}
.nu-links::after{background:linear-gradient(100deg,
  rgba(8,28,37,.88) 0%, rgba(8,28,37,.74) 38%, rgba(8,28,37,.34) 66%, rgba(8,28,37,.30) 100%)}
.nu-links .wrap{max-width:1240px}
.nu-links .oog{justify-content:flex-start; margin-inline:0}
.nu-links h2{margin-inline:0; max-width:16ch}
.nu-links p{margin-inline:0; max-width:46ch}
.nu-links .regels{margin-inline:0}
@media (max-width:760px){
  .nu-links img{object-position:64% 46%}
  .nu-links::after{background:linear-gradient(rgba(8,28,37,.80), rgba(8,28,37,.86))}
}

/* opsomming met een label ervoor, netjes in twee kolommen uitgelijnd */
.artikel ul.kolommen li{display:grid; grid-template-columns:132px 1fr; gap:6px 18px; align-items:baseline}
.artikel ul.kolommen li::before{display:none}
.artikel ul.kolommen li b{font-weight:400; font-family:var(--serif); color:var(--blue);
  font-size:16px; letter-spacing:.01em}
.artikel ul.kolommen li span{color:var(--muted)}
@media (max-width:620px){
  .artikel ul.kolommen li{grid-template-columns:1fr; gap:2px}
}

/* contact: geen formulier, alleen een maillink */
.mailblok{display:grid; gap:24px; margin-top:44px; align-content:start}
.mailblok .knop{justify-self:start; padding:17px 34px}
.mailblok .privnoot a{color:inherit}

/* strakker ritme (okt 2026): minder lucht tussen blokken */
.oog{margin-bottom:18px}
.kaarten,.raster{margin-top:40px}
.vakken{margin-top:38px}
.routes{margin-top:34px}
.nat-beeld{margin-bottom:40px}
.paginakop{padding:calc(86px + clamp(40px,5vw,68px)) 0 clamp(30px,3.5vw,48px)}
.paginakop .lead{margin-top:18px}
.erk .tekst{margin-top:22px}
.hero p{margin-top:20px} .hero .acties{margin-top:30px}
.nu{padding-block:clamp(60px,7.5vw,100px)}
.nu p{margin-top:20px} .nu .regels{margin-top:26px}
.samen .tekst{margin-top:20px}
.over-feiten{margin-top:26px; padding-top:20px}
.fase{padding:clamp(22px,2.6vw,34px) 0}
.acc-kop{padding:19px 0}
.mailblok{margin-top:30px; gap:20px}
.contactgeg{gap:16px}
footer{padding-block:clamp(44px,5.5vw,68px) 26px}
.foot-top{padding-bottom:40px}
@media (max-width:1000px){ .duo,.duo-40{gap:32px} .nat-beeld{margin-bottom:34px} }