/* Pandhof.nl v2 — stijl voor alle pagina's
   Industrieel en helder: wit, zwart, kapitalen vet, grote beelden; één bordeaux vlak per pagina
   met de drie woorden in de letter van het logo. Zie v2/00 Uitgangspunten/ontwerpplan-v2.md. */

/* ---------- letters (zelf gehost) ---------- */
@font-face{font-family:"Switzer";src:url(../fonts/switzer-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url(../fonts/switzer-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url(../fonts/switzer-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fonts/montserrat-latin-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}

/* ---------- kleuren en maten ---------- */
:root{
  --wit:#ffffff;
  --inkt:#111111;
  --gedempt:#5a5a5a;
  --petrol:#083634;        /* logo, tekstlinks, aanwijzen */
  --bordeaux:#8d303f;      /* één groot vlak per pagina, de knop, het slot */
  --bordeaux-inkt:#562025; /* de grote letters, toon-op-toon */
  --m:28px;                /* zijmarge */
  --sectie:130px;          /* ruimte tussen secties */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--wit);color:var(--inkt);font-family:"Switzer",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.0;text-wrap:balance}
p{max-width:60ch}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
.op-bordeaux :focus-visible,.veld :focus-visible,.slot :focus-visible{outline-color:var(--wit)}

/* ---------- toegankelijkheid ---------- */
.skip{position:absolute;left:var(--m);top:-100px;background:var(--inkt);color:var(--wit);padding:10px 16px;z-index:100;text-decoration:none;font-weight:500}
.skip:focus{top:12px}
.visueel-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- menubalk ---------- */
.balk{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--m);background:var(--wit);position:sticky;top:0;z-index:10;transition:background-color .25s}
/* na scrollen licht doorschijnend, met dezelfde doorzichtigheid en vervaging als de panelen bij Ervaring */
.balk.gescrold{background:rgba(255,255,255,.80);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} /* taste-skill-ignore */
.balk.menu-open{background:var(--wit);-webkit-backdrop-filter:none;backdrop-filter:none}   /* met het uitklapmenu open is de balk dicht wit */
.merk{display:block;line-height:0}
.merk img{width:270px;height:auto}   /* 30 px hoog, als in v1 */
.menu{display:flex;gap:26px;align-items:center}
.menu a{color:var(--inkt);text-decoration:none;font-size:14px;font-weight:500;line-height:44px}
.menu a:hover{color:var(--petrol)}
.menu a[aria-current="page"]{color:var(--petrol)}
/* menuknop: twee streepjes (naar bb&b); alleen op telefoon en tablet, alleen met script */
.menuknop{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:0}
.menuknop span{display:block;width:24px;height:2px;background:var(--inkt);transition:transform .22s ease}
.menuknop[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menuknop[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- knoppen en links ---------- */
.knop{display:inline-block;background:var(--bordeaux);color:var(--wit);text-decoration:none;border-radius:999px;padding:12px 22px;font-size:15px;font-weight:500;line-height:1.3;min-height:44px;transition:background-color .2s}
.knop:hover{background:#7a2836}
.knop.wit{background:var(--wit);color:var(--bordeaux)}
.knop.wit:hover{background:#f3e9eb}
.menu .knop,.menu .knop:hover{color:var(--wit);font-size:14px;padding:11px 20px;line-height:1.3}
.link{color:var(--petrol);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover{color:var(--bordeaux);text-decoration-thickness:2px}

/* ---------- de grote woorden in de letter van het logo ---------- */
.letters{font-family:"Montserrat",sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:0.3em;color:var(--bordeaux-inkt);white-space:nowrap;user-select:none;line-height:1.3;pointer-events:none}
.letters .w{display:block;font:inherit;letter-spacing:inherit;color:inherit;white-space:nowrap;text-wrap:nowrap;max-width:none;margin:0}
.letters .l{display:inline-block;will-change:transform,opacity}

/* ---------- A: het rode veld bovenaan ---------- */
.veld{position:relative;background:var(--bordeaux);color:var(--wit);overflow:hidden;min-height:74svh;display:flex;align-items:flex-start;padding-bottom:96px}
/* de drie woorden staan volledig in het veld (langste woord 8,5 em) en vallen één voor één in, zie site.js */
.veld .letters{position:absolute;left:47vw;right:var(--m);top:50%;transform:translateY(-50%);font-size:calc((53vw - 28px) / 8.6);line-height:1.25;overflow:visible}
.veld .kopij{position:relative;padding:88px var(--m) 0;width:46vw}
.veld h1{font-size:min(calc((46vw - 56px) / 15.4),42px)}   /* twee regels in de kolom (46vw minus de marges) */
.veld .knop{margin-top:30px}

/* de regel onder de hoofdkop: klein, vet, kapitalen (naar bb&b) */
.onderkop{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;line-height:1.4;margin-top:22px;max-width:none}
.veld .onderkop{white-space:nowrap;font-size:clamp(13px,calc((46vw - 56px) / 35.4),15px)}   /* één regel in de kolom (gemeten: 35,0 em) */

/* ---------- B: de witte kop bovenaan ---------- */
.kop{padding:44px var(--m) 60px}
.kop h1{font-size:clamp(30px,3.7vw,56px);max-width:16em}

/* ---------- B: de rode band met wisselende woorden ---------- */
.band-rood{position:relative;background:var(--bordeaux);min-height:58svh;overflow:hidden;display:flex;align-items:center;padding:40px var(--m)}
.band-rood .letters{position:relative;font-size:10vw;line-height:1.08}

/* ---------- filmband ---------- */
.film{position:relative;height:70svh;background:#2b2d2b;overflow:hidden;color:var(--wit)}
.film video,.film .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film .poster img{width:100%;height:100%;object-fit:cover}
.film .scrim{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 100%);pointer-events:none} /* neutrale scrim onder de tekst op de film; taste-skill-ignore */
.film .txt{position:absolute;left:var(--m);bottom:40px;font-weight:700;text-transform:uppercase;line-height:0.95;font-size:clamp(30px,4vw,60px);letter-spacing:-0.01em}
.film .pauze{position:absolute;right:var(--m);bottom:40px;width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:var(--inkt);cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.film .pauze svg{width:18px;height:18px;fill:currentColor}
.film .pauze .ico-afspelen{display:none}
.film .pauze[aria-pressed="true"] .ico-afspelen{display:block}
.film .pauze[aria-pressed="true"] .ico-pauze{display:none}
.film.met-film .pauze{display:flex}
.film .pauze:focus-visible{outline-color:var(--wit)}

/* ---------- beeld ---------- */
.beeld{position:relative;overflow:hidden;background:#d9d5cd}
.beeld img{width:100%;height:100%;object-fit:cover}

/* ---------- voor wie: twee kolommen ---------- */
.voorwie{padding:var(--sectie) var(--m);display:grid;grid-template-columns:5fr 1fr 6fr;align-items:start}
.voorwie h2{font-size:clamp(24px,calc((100vw - 56px) / 37.4),40px)} /* past in twee regels in de linkerkolom (gemeten: 15,4 em per regel) */
.voorwie .tekst{grid-column:3}
.voorwie .tekst p+p{margin-top:14px}

/* ---------- drie pijlers ---------- */
.pijlers{padding:0 var(--m) var(--sectie);display:grid;grid-template-columns:repeat(3,1fr);gap:40px;list-style:none}
.pijlers .beeld{aspect-ratio:4/3;margin-bottom:22px}
.pijlers h2{font-size:clamp(22px,2vw,30px);margin-bottom:12px}
.pijlers p{max-width:32ch}
/* zolang er geen foto's zijn: gekleurd vlak met de eerste letter in de logoletter; kleuren gemeten uit de Implement-schermen van Sander */
.pijlers .vlak{aspect-ratio:4/3;margin-bottom:22px;display:flex;align-items:center;padding:0 0 0 9%;background:var(--vlak);color:var(--vlak-letter);
  font-family:"Montserrat",sans-serif;font-weight:300;font-size:15vw;line-height:1;text-transform:uppercase;letter-spacing:0;user-select:none}
.pijlers .vlak-1{--vlak:#705831;--vlak-letter:#433833}   /* bruin, letter donker (Leadership) */
.pijlers .vlak-2{--vlak:#2f323d;--vlak-letter:#67513a}   /* donkerblauw, letter goudbruin (Strategy) */
.pijlers .vlak-3{--vlak:#2c2431;--vlak-letter:#585061}   /* paars, letter grijspaars (Transformation) */

/* ---------- ervaring: beeld met half doorschijnend, vervagend paneel (maten uit bb&b)
   beeld 61,5% van de inhoudsbreedte in 1025:750; paneel begint op 48,3%, 51,3% breed,
   72% van de beeldhoogte, verticaal gecentreerd; tekst begint op 11,7% van de paneelbreedte ---------- */
.ervaring{padding:0 var(--m) var(--sectie)}
.ervaring h2{font-size:clamp(26px,2.6vw,40px);margin-bottom:12px}
.ervaring .lead{max-width:52ch;margin-bottom:72px}
.blok{position:relative;margin-bottom:96px}
.blok:last-child{margin-bottom:0}
.blok .beeld{width:61.5%;aspect-ratio:1025/750}
.blok .paneel{position:absolute;left:48.3%;width:51.3%;top:14%;bottom:14%;padding:0 9% 0 11.7%;
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg,rgba(228,231,232,.86) 0%,rgba(236,238,239,.66) 24%,rgba(247,248,248,.32) 42%,rgba(255,255,255,0) 56%); /* uitvloeiend paneel, bewust (bb&b: aan de rand #e2e5e6, wit op ±40%); taste-skill-ignore */
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} /* matglas, bewust (bb&b); taste-skill-ignore */
.blok .label{display:block;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;max-width:none}
.blok h3{font-size:clamp(26px,2.85vw,42px);margin-bottom:18px}
.blok p{font-size:18px;line-height:1.6;max-width:46ch}
.blok .pijl{display:inline-block;margin-top:26px;font-weight:600;text-decoration:none;font-size:17px;line-height:1.3;padding:6px 0}
.blok .pijl::before{content:"\2198\00a0\00a0"}
.blok .pijl:hover{color:var(--bordeaux)}
.blok.rechts .beeld{margin-left:auto}
.blok.rechts .paneel{left:0.4%;padding:0 11.7% 0 9%;
  background:linear-gradient(270deg,rgba(228,231,232,.86) 0%,rgba(236,238,239,.66) 24%,rgba(247,248,248,.32) 42%,rgba(255,255,255,0) 56%)} /* taste-skill-ignore */

/* ---------- boutique: de regel en de tekst links, de foto van Sander rechts (4:5) ---------- */
.boutique{position:relative;isolation:isolate;padding:72px var(--m) var(--sectie);display:grid;grid-template-columns:7fr 1fr 4fr;align-items:center}
/* de band bindt tekst en foto: hij loopt tot 72 px boven de onderrand van de foto, de foto steekt eronderuit */
.boutique::before{content:"";position:absolute;left:0;right:0;top:0;bottom:calc(var(--sectie) + 72px);background:#e8eaeb;z-index:-1}   /* = de buitenste rand van de ervaringspanelen (rgba(228,231,232,.86) op wit) */
/* de boutique-regel is een uitspraak, geen kop: gezet als grote alinea (max. 36 px, mag drie regels) */
.boutique .statement{font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.05;font-size:clamp(24px,2.3vw,34px);text-wrap:balance;max-width:none;margin-bottom:24px}
.boutique .tekst{grid-column:1;padding-bottom:72px}   /* gecentreerd op de band, niet op de foto */
.boutique .tekst .link{display:inline-block;margin-top:16px}
.boutique .beeld{grid-column:3;aspect-ratio:4/5}

/* ---------- slot ---------- */
.slot{background:var(--bordeaux);color:var(--wit);padding:120px var(--m)}
.slot h2{font-size:clamp(34px,4.6vw,72px);margin-bottom:20px}
.slot p{font-size:18px;max-width:46ch;margin-bottom:28px}
.slot .acties{display:flex;gap:14px;flex-wrap:wrap}
.slot .acties .knop{display:inline-flex;align-items:center;gap:10px}
.slot .acties .ico{flex:none}

/* ---------- voet: zwarte band, wit logo links, drie kolommen met kopjes (naar bb&b) ---------- */
.voet{background:#1f1f23;color:var(--wit);padding:80px var(--m) 32px}   /* donkergrijs uit het voorbeeld van Sander, niet het harde zwart */
.voet .rij{display:grid;grid-template-columns:5fr 1fr 2fr 2fr 2fr;gap:32px;align-items:start;margin-bottom:72px}
.voet .naam{grid-column:1}
.voet .naam img{width:300px;max-width:100%;height:auto;margin-top:6px}
.voet .kolom{font-size:16px;line-height:1.5}
.voet .kolom:nth-child(2){grid-column:3}
.voet .kolom h2{font-size:15px;letter-spacing:0.06em;line-height:1.4;margin-bottom:14px}
.voet .kolom p{max-width:none;margin:0}
.voet .kolom a{display:block;color:var(--wit);text-decoration:none;padding:6px 0;line-height:1.5}
.voet .kolom a.ico-link{display:flex;align-items:center;gap:10px}
.voet .kolom a.ico-link .ico{flex:none}
.voet .kolom a:hover{text-decoration:underline;text-underline-offset:4px}
.voet .kolom span{display:block;padding:6px 0}
.voet .legal{font-size:14px;color:#b5b5b5}
.voet :focus-visible{outline-color:var(--wit)}

/* ---------- hulpklasse: extra ruimte boven een sectie die op een band volgt (staat na de sectieregels, wint dus) ---------- */
.ruimte-boven{padding-top:var(--sectie)}

/* ---------- zacht inkomen bij scrollen (alleen met script; zonder script staat alles gewoon) ---------- */
html.js .in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0) * 80ms)}
html.js .in.zichtbaar{opacity:1;transform:none}

/* ---------- A: tot 1100 px de woorden onder de tekst in plaats van ernaast ---------- */
@media (max-width:1100px){
  .veld{min-height:auto;display:flex;flex-direction:column;align-items:stretch}
  .veld .kopij{width:auto;padding:40px var(--m) 0}
  .veld .onderkop{white-space:normal;font-size:15px}
  /* H1 altijd twee regels: de langste regel ("omdat ze gedragen worden.") meet 15,1 em */
  .veld h1{font-size:min(calc((100vw - 2 * var(--m)) / 15.4),42px)}
  /* de woorden onder de tekst, in de stroom, volledig zichtbaar (langste woord 8,5 em) */
  .veld .letters{position:relative;inset:auto;transform:none;order:2;width:auto;margin:36px 0 0 var(--m);padding-bottom:0;font-size:calc((100vw - 2 * var(--m)) / 8.6);line-height:1.15;overflow:visible}
  .veld{padding-bottom:40px}
}

/* ---------- telefoon en smal ---------- */
@media (max-width:820px){
  :root{--m:16px;--sectie:80px}
  body{font-size:16px}
  .balk{height:60px}
  .menu{gap:14px}
  .menu a{font-size:13px}
  .balk .knop{display:none}
  .merk img{width:160px}
  /* uitklapmenu: de knop toont de links onder de balk; zonder script staan de links gewoon in de balk */
  html.js .menuknop{display:flex}
  html.js .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--wit);flex-direction:column;align-items:stretch;gap:0;padding:4px var(--m) 20px}
  html.js .menu.open{display:flex}
  html.js .menu a{font-size:18px;line-height:52px}
  .onderkop{font-size:14px;margin-top:18px}
  .kop{padding:28px var(--m) 40px}
  .kop h1{font-size:min(calc((100vw - 32px) / 15.4),56px)}
  .pijlers .vlak{font-size:45vw}
  .band-rood{min-height:46svh;padding:32px var(--m)}
  .band-rood .letters{font-size:calc((100vw - 32px) / 8.6);line-height:1.15}   /* het langste woord (Resultaat, 8,5 em) past; een los woord mag niet afgesneden zijn */
  .film{height:60svh}
  .film .txt{bottom:24px;font-size:8vw;max-width:70%}
  .film .pauze{bottom:24px}
  .voorwie{grid-template-columns:1fr;gap:20px}
  .voorwie h2{font-size:min(calc((100vw - 32px) / 15.6),40px)}
  .voorwie .tekst{grid-column:1}
  .pijlers{grid-template-columns:1fr;gap:40px}
  .blok{margin-bottom:56px}
  .blok .beeld,.blok.rechts .beeld{width:100%;margin:0}
  .blok .paneel,.blok.rechts .paneel{position:relative;top:auto;bottom:auto;left:auto;width:auto;margin:-44px 12px 0;padding:24px 20px 28px;
    background:linear-gradient(180deg,rgba(228,231,232,.88) 0%,rgba(240,241,242,.55) 55%,rgba(255,255,255,0) 85%)} /* taste-skill-ignore */
  .blok h3{font-size:7vw}
  .blok p{font-size:17px}
  .boutique{grid-template-columns:1fr;gap:28px;padding-top:48px}
  .boutique .statement{font-size:clamp(22px,4.2vw,32px)}
  .boutique .tekst{grid-column:1;padding-bottom:0}
  .boutique .beeld{grid-column:1}
  .voet{padding:56px var(--m) 28px}
  .voet .rij{grid-template-columns:1fr;gap:36px;margin-bottom:48px}
  .voet .kolom:nth-child(2){grid-column:1}
  .voet .naam img{width:220px}
  .slot{padding:72px var(--m)}
  .slot h2{font-size:10vw}
}
@media (min-width:821px) and (max-width:1100px){
  .pijlers{gap:28px}
  .blok .paneel{padding:0 6% 0 8%}
  .blok.rechts .paneel{padding:0 8% 0 6%}
  .blok p{font-size:16px}
}

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .letters .l{transform:none !important;opacity:1 !important;transition:none !important}
  html.js .in{opacity:1;transform:none;transition:none}
  .knop{transition:none}
  .menuknop span{transition:none}
}

/* =====================================================================
   Huisstijlbesluiten 2026-10-16 (Sander), getoetst in kleurproef/a-2-grijsviolet-montserrat.html
   - bannerkleur violet-aubergine #3d3444, woorden in lichte aubergine #585061
   - koppen Montserrat Light (de letter van het logo), gewone hoofd- en kleine letters
   - lopende tekst Switzer Light; menu, knoppen en labels Switzer Medium
   - logo aubergine #2c2431, voet wit
   - woorden in de banner: Overzicht van boven, Grip van links, Resultaat van onder (site.js, modus richting)
   ===================================================================== */
@font-face{font-family:"Switzer";src:url(../fonts/switzer-latin-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
:root{--bordeaux:#3d3444;--bordeaux-inkt:#585061;--kop:"Montserrat",sans-serif;--kopg:300;--kopb:14.3}

body{font-weight:300;font-size:18px;line-height:1.6}
h1,h2,h3,.boutique .statement{font-family:var(--kop);font-weight:var(--kopg);text-transform:none;letter-spacing:0;line-height:1.15}
strong,b{font-weight:500}
.menu a{font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.knop,.onderkop,.blok .label,.blok .pijl,.link{font-weight:500}

/* maten: elke kop blijft twee regels */
.veld h1{font-size:min(calc((46vw - 56px) / var(--kopb)),56px)}
.kop h1{font-size:clamp(34px,3.9vw,60px)}
.voorwie h2{font-size:clamp(26px,2.9vw,40px)}
.pijlers h2{font-size:clamp(24px,2.1vw,32px)}
.ervaring h2{font-size:clamp(32px,3vw,46px)}
.blok h3{font-size:clamp(28px,2.9vw,44px)}
.boutique .statement{font-size:clamp(26px,2.5vw,36px);line-height:1.2}
.slot h2{font-size:clamp(40px,4.6vw,72px)}

/* voet wit zoals de rest van de site, dunne lijn als scheiding */
.voet{background:var(--wit);color:var(--inkt)}
.voet .kolom a{color:var(--inkt)}
.voet .kolom h2{font-family:"Switzer",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.voet .legal{color:#5f5a66}
.voet :focus-visible{outline-color:var(--inkt)}

/* banner A iets minder hoog; woorden rechts, iets boven de onderrand, met lucht rond kop en knop */
@media (min-width:1101px){.veld{min-height:62svh;padding-bottom:64px}}
@media (min-width:821px){.veld .letters{top:auto;bottom:clamp(56px,9svh,96px);transform:none}}

@media (max-width:1100px){
  .veld h1{font-size:min(calc((100vw - 2 * var(--m)) / var(--kopb)),56px)}
}
@media (max-width:820px){
  body{font-size:17px}
  .kop h1{font-size:min(calc((100vw - 32px) / var(--kopb)),52px)}
  .voorwie h2{font-size:min(calc((100vw - 32px) / 13.6),36px)}   /* langste regel 13,3 em in Montserrat Light: twee regels */
  .blok h3{font-size:8vw}
  .boutique .statement{font-size:24px}
  .slot h2{font-size:11vw}
  html.js .menu a{font-size:16px}
  .veld .letters{margin-top:56px;margin-bottom:16px}
}
.film .txt{font-family:var(--kop);font-weight:var(--kopg);text-transform:none;letter-spacing:0;line-height:1.1}

/* 2026-10-16: groen (petrol) wordt aubergine, passend bij het logo: actief menu-item, links, focusrand */
:root{--petrol:#2c2431}
.knop:hover{background:#2c2431}
.knop.wit:hover{background:#eeebf0}
/* pijl bij "Meer over mijn ervaring" als lijntekening: het teken ↘ werd op de telefoon als emoji getoond */
.blok .pijl::before{content:"";display:inline-block;width:.75em;height:.75em;margin-right:.6em;vertical-align:-.02em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l10 10M5.5 13H13V5.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l10 10M5.5 13H13V5.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* actief menu-item: aubergine ligt dicht bij de tekstkleur, dus een dunne onderstreping maakt de huidige pagina zichtbaar */
.menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* =====================================================================
   Besluit 2026-10-21 (Sander en partner): banner met de handdrukfoto, "tussenin" (foto op 72,5 %), warm bordeaux.
   De foto staat vooraf in grijs (beeld/banner-handdruk-1717), wordt met multiply in het veld opgenomen; menubalk blijft wit.
   ===================================================================== */
:root{--bordeaux:#86363b;--bordeaux-inkt:#4f1f22}
.knop:hover{background:#6e2b30}
.knop.wit:hover{background:#f3eaeb}
.veld{min-height:72svh}
.veld > *{position:relative;z-index:1}
.veld::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.725;
  background:url("../beeld/banner-handdruk-1717.jpg") center 66%/cover no-repeat;
  background-image:image-set(url("../beeld/banner-handdruk-1717.webp") type("image/webp"),url("../beeld/banner-handdruk-1717.jpg") type("image/jpeg"))}
.veld .letters{color:rgba(255,255,255,.5)}
.veld .onderkop{text-transform:none;letter-spacing:0;font-weight:400;font-size:20px;line-height:1.45;white-space:normal;max-width:34ch;margin-top:20px;color:rgba(255,255,255,.9)}
@media (max-width:820px){
  .veld::before{background-position:center 60%}
  .veld .onderkop{font-size:18px}
}

/* =====================================================================
   Besluit 2026-10-21 (Sander): één zichtbaar bordeaux. De hoofdbanner (#86363b met de foto in multiply) leest op het scherm als #63282c;
   alles wat vlak in bordeaux staat (contactband, knoppen, knoptekst, link- en pijl-hover) krijgt die zichtbare toon.
   #86363b blijft alleen de basis onder de foto. Kiezer: kleurproef/slot-kiezer.html, optie 1 "gemeten".
   ===================================================================== */
:root{--bordeaux-vlak:#63282c}
.slot{background:var(--bordeaux-vlak)}
.knop{background:var(--bordeaux-vlak)}
.knop:hover{background:var(--bordeaux-inkt)}
.knop.wit{background:var(--wit);color:var(--bordeaux-vlak)}
.knop.wit:hover{background:#f3eaeb}
.link:hover,.blok .pijl:hover{color:var(--bordeaux-vlak)}

/* =====================================================================
   Besluit 2026-10-21 (Sander), detailronde deel 1: voetkoppen in gewone hoofd- en kleine letters; rust in de beweging.
   De opkomende beweging blijft alleen op de foto's (Ervaring, boutique) en in het slot "Kennismaken?"; alle andere tekst staat stil.
   De woorden in de banner houden hun eigen animatie (site.js). Nog open: tekst in Regular, minder lettermaten, zoom op foto's.
   ===================================================================== */
.voet .kolom h2{text-transform:none;letter-spacing:0;font-weight:500}
html.js .in{opacity:1;transform:none;transition:none}
html.js .blok.in .beeld,html.js .boutique .beeld.in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
html.js .blok.in.zichtbaar .beeld,html.js .boutique .beeld.in.zichtbaar{opacity:1;transform:none}
html.js .slot .in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0) * 80ms)}
html.js .slot .in.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .blok.in .beeld,html.js .boutique .beeld.in,html.js .slot .in{opacity:1;transform:none;transition:none}
}

/* Besluit 2026-10-21 (Sander), afwerking na kritiek ronde 2: de lijn boven de voet vervalt (de bordeaux contactband scheidt al).
   "U weet" in de boutique-regel staat als U weet in de HTML. Nog te beslissen met partner: beweging in beeld (drift banner, zoom foto's). */
.voet{border-top:0}

/* =====================================================================
   SUBPAGINA'S (v2-sessie 3, 2026-10-21): Werkwijze, Over, Contact, Privacy in het systeem van Home A.
   Regels van Home A: menubalk wit, één zichtbaar bordeaux (--bordeaux-vlak) alleen in het slot en de knoppen, koppen Montserrat Light,
   tekst Switzer Light, rust (alleen foto's en het slot komen op). Randen: 47/50 vw en de marge, zoals Voor wie op Home.
   ===================================================================== */

/* paginakop: titel, regel en inleiding links, foto rechts op de lijn van de derde kolom */
.paginakop{padding:72px var(--m) var(--sectie);display:grid;grid-template-columns:5fr 1fr 6fr;align-items:start}
.paginakop .tekst{grid-column:1}
.paginakop h1{font-size:clamp(26px,2.9vw,40px);line-height:1.15;margin-bottom:22px}   /* = "Voor organisaties…" op Home (40 px) */
.paginakop .regel{font-weight:400;font-size:20px;line-height:1.45;margin-bottom:22px;max-width:34ch;text-wrap:balance}   /* = onderkop op Home */
.paginakop .tekst p:not(.regel){max-width:46ch}
.paginakop .beeld{grid-column:3;aspect-ratio:4/5}   /* Werkwijze en Over: zelfde formaat (besluit 2026-10-26) */
.paginakop .beeld img{object-position:center 58%}
html.js .paginakop .beeld.in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
html.js .paginakop .beeld.in.zichtbaar{opacity:1;transform:none}

/* sectiekoppen op subpagina's: zelfde maat als "Voor organisaties…" op Home */
.werk h2,.stappen h2,.rekenen h2{font-size:clamp(26px,2.9vw,40px)}

/* wat ik doe: werkrichting links (kop), uitleg rechts */
.werk{padding:0 var(--m) var(--sectie)}
.werk h2{margin-bottom:56px}
.rij-werk{display:grid;grid-template-columns:5fr 1fr 6fr;align-items:start;margin-bottom:64px}
.rij-werk:last-child{margin-bottom:0}
.rij-werk h3{grid-column:1;font-size:clamp(24px,2.1vw,32px);max-width:14em}   /* = de drie pijlers op Home (30 px) */
.rij-werk p{grid-column:3;max-width:56ch;text-wrap:pretty}

/* vier stappen: een echte volgorde, dus genummerd; op de lichtgrijze band van Home */
.stappen{background:#e8eaeb;padding:var(--sectie) var(--m)}
.stappen h2{margin-bottom:64px}
.stappen ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.stappen .nr{display:block;font-family:var(--kop);font-weight:var(--kopg);font-size:clamp(56px,6vw,88px);line-height:1;color:var(--petrol);margin-bottom:24px}
.stappen h3{font-size:clamp(22px,1.9vw,28px);margin-bottom:14px}
.stappen p{font-size:17px;line-height:1.55;max-width:30ch;text-wrap:pretty}

/* waar u op kunt rekenen */
.rekenen{padding:var(--sectie) var(--m);display:grid;grid-template-columns:5fr 1fr 6fr;align-items:start}
.rekenen ul{grid-column:3;list-style:none;display:grid;gap:22px}
.rekenen li{font-size:clamp(19px,1.6vw,22px);line-height:1.5;max-width:42ch}

/* slot met een langere kop dan "Kennismaken?" blijft op twee regels */
.slot h2.lang{font-size:clamp(28px,3.4vw,52px);max-width:16em}

@media (max-width:1100px){
  .stappen ol{grid-template-columns:repeat(2,1fr);gap:48px 32px}
}
@media (max-width:820px){
  .paginakop{grid-template-columns:1fr;gap:36px;padding-top:40px}
  .paginakop .tekst,.paginakop .beeld{grid-column:1}
  .paginakop .beeld{aspect-ratio:4/5}
  .paginakop h1,.werk h2,.stappen h2,.rekenen h2{font-size:min(calc((100vw - 32px) / 13.6),36px)}   /* = "Voor organisaties…" op Home, telefoon en tablet */
  .paginakop h1{margin-bottom:18px}
  .werk h2{margin-bottom:36px}
  .rij-werk{grid-template-columns:1fr;gap:12px;margin-bottom:44px}
  .rij-werk h3,.rij-werk p{grid-column:1}
  .stappen ol{grid-template-columns:1fr;gap:40px}
  .stappen h2{margin-bottom:40px}
  .rekenen{grid-template-columns:1fr;gap:28px}
  .rekenen ul{grid-column:1}
  .slot h2.lang{font-size:8vw}
}
@media (prefers-reduced-motion:reduce){
  html.js .paginakop .beeld.in{opacity:1;transform:none;transition:none}
}

/* ---------- Over (v2-sessie 3) ---------- */
/* paginakop met portret: foto van Sander 4:5 zoals op Home */
.paginakop.portret .beeld{aspect-ratio:4/5}
.paginakop.portret .beeld img{object-position:center top}
.paginakop .statement{font-family:var(--kop);font-weight:var(--kopg);font-size:clamp(24px,2.5vw,36px);line-height:1.2;margin-bottom:28px;max-width:16em;text-wrap:balance}   /* = de boutique-regel op Home */
/* loopbaan: drie alinea's op de lichtgrijze band, drie kolommen op de lijnen van Home */
.loopbaan{background:#e8eaeb;padding:var(--sectie) var(--m)}
.loopbaan .kolommen{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.loopbaan p{max-width:38ch;text-wrap:pretty}
/* voorbeelden: sector als kop (maat van de pijlers op Home), twee kolommen op de lijnen 1 en 3 */
.voorbeelden{padding:var(--sectie) var(--m)}
.voorbeelden h2{font-size:clamp(26px,2.9vw,40px);margin-bottom:20px}
.voorbeelden .lead{max-width:52ch;margin-bottom:64px}
.voorbeelden ul{list-style:none;display:grid;grid-template-columns:5fr 1fr 6fr;row-gap:56px}
.voorbeelden li:nth-child(odd){grid-column:1}
.voorbeelden li:nth-child(even){grid-column:3}
.voorbeelden h3{font-size:clamp(24px,2.1vw,32px);margin-bottom:12px}   /* = de drie pijlers op Home (30 px) */
.voorbeelden li p{max-width:46ch;text-wrap:pretty}
@media (max-width:1100px){
  .loopbaan .kolommen{grid-template-columns:1fr;gap:28px}
  .loopbaan p{max-width:60ch}
}
@media (max-width:820px){
  .paginakop .statement{font-size:24px;margin-bottom:22px}
  .voorbeelden h2{font-size:min(calc((100vw - 32px) / 13.6),36px)}
  .voorbeelden ul{grid-template-columns:1fr;row-gap:36px}
  .voorbeelden li:nth-child(odd),.voorbeelden li:nth-child(even){grid-column:1}
  .voorbeelden .lead{margin-bottom:40px}
}

/* ---------- Contact (26-10-2026): kop links, gegevens rechts, achtergrond = de lichtgrijze band van Home ---------- */
.contact{background:#e8eaeb;display:grid;grid-template-columns:5fr 1fr 6fr;align-items:start;padding:120px var(--m) var(--sectie);min-height:calc(100vh - 160px)}
.contact .tekst{grid-column:1}
.contact h1{font-size:clamp(26px,2.9vw,40px);margin-bottom:28px}
.contact .regel{max-width:30ch}
.contact .noot{margin-top:28px;color:var(--gedempt)}
.contact .gegevens{grid-column:3;display:grid;gap:36px;list-style:none;margin:0;padding:0}
.contact .gegevens li{font-family:var(--kop);font-weight:var(--kopg);font-size:clamp(22px,2.1vw,32px);line-height:1.25;overflow-wrap:anywhere}
.contact .gegevens a{display:inline-flex;align-items:center;gap:18px;text-decoration:none}
.contact .gegevens a:hover{color:var(--bordeaux)}
.contact .gegevens .ico{flex:none}
.contact .gegevens a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
@media (max-width:820px){
  .contact{grid-template-columns:1fr;gap:56px;padding-top:56px;min-height:0}
  .contact .tekst,.contact .gegevens{grid-column:1}
  .contact h1{font-size:min(calc((100vw - 32px) / 13.6),36px)}
  .contact .gegevens{gap:28px}
}

/* Over (voorstel 26-10): loopbaan in twee kolommen op de lijnen van Home (kolom 1 en 3), ruimer gezet; de eerste alinea staat nu in de kop */
.loopbaan .kolommen{grid-template-columns:5fr 1fr 6fr;gap:0}
.loopbaan .kolommen p:nth-child(1){grid-column:1}
.loopbaan .kolommen p:nth-child(2){grid-column:3}
.loopbaan p{max-width:44ch;font-size:19px;line-height:1.6}
.paginakop.portret .tekst p+p{margin-top:18px}
@media (max-width:1100px){.loopbaan .kolommen{grid-template-columns:1fr;gap:28px}.loopbaan .kolommen p:nth-child(1),.loopbaan .kolommen p:nth-child(2){grid-column:1}.loopbaan p{max-width:60ch}}

/* Over: de loopbaan als één lopende tekst (Sander, 26-10) */
.loopbaan .kolommen{display:block}
.loopbaan p{max-width:66ch;font-size:20px;line-height:1.65}

/* Over: loopbaanband zoals "Waar u op kunt rekenen": één zin links (kolom 1), de tekst rechts (kolom 3) */
.loopbaan{display:grid;grid-template-columns:5fr 1fr 6fr;align-items:start}
.loopbaan h2{grid-column:1;font-size:clamp(26px,2.9vw,40px);max-width:12em}
.loopbaan .kolommen{grid-column:3;display:block}
.loopbaan p{max-width:52ch;font-size:clamp(19px,1.6vw,22px);line-height:1.55}
@media (max-width:820px){
  .loopbaan{grid-template-columns:1fr;gap:28px}
  .loopbaan h2{grid-column:1;font-size:min(calc((100vw - 32px) / 13.6),36px)}
  .loopbaan .kolommen{grid-column:1}
}

/* Over: zonder inleidende zin bij de voorbeelden */
.voorbeelden h2{margin-bottom:64px}
@media (max-width:820px){.voorbeelden h2{margin-bottom:40px}}

/* ---------- Privacyverklaring: kop links, tekst rechts op de lijnen van Home; stille tekstpagina op wit ---------- */
.privacy{display:grid;grid-template-columns:5fr 1fr 6fr;align-items:start;padding:120px var(--m) var(--sectie)}
.privacy .tekst{grid-column:1}
.privacy h1{font-size:clamp(26px,2.9vw,40px);margin-bottom:28px}
.privacy .regel{max-width:30ch}
.privacy .uitleg{grid-column:3;display:grid;gap:40px;max-width:60ch}
.privacy h2{font-size:clamp(20px,1.7vw,24px);line-height:1.25;margin-bottom:10px}
.privacy .uitleg p{max-width:none}
.privacy a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.privacy .bijgewerkt{color:var(--gedempt);font-size:15px}
@media (max-width:820px){
  .privacy{grid-template-columns:1fr;gap:48px;padding-top:56px}
  .privacy .tekst,.privacy .uitleg{grid-column:1}
  .privacy h1{font-size:min(calc((100vw - 32px) / 13.6),36px)}
}