/* Stichting Kara, concept richting A "Het Vangnet", ronde 2 (Studio Ripple, 6-10-2026)
   Merklaag 100% Studio Lauda: Hanken Grotesk, magenta #BC004C, zand, kant (vangnet), hexagon, ruwe randen.
   Layoutlaag = Refero-lock "Transform" (stage poster on warm paper): 8px-basis, één container van 1200px,
   full-bleed banden, vaste sectie-ritmiek, plat, 0-2px radius. Alleen spacing/ritme/maten komen uit de lock. */

:root{
  /* ---- merk (Lauda) ---- */
  --magenta:#BC004C;
  --magenta-donker:#A30041;
  --zand:#EDE4DC;
  --zand-donker:#DCCBBB;
  --zand-hover:#D2BCA6;
  --tekst:#3C3937;
  --tekst-zacht:#5A5450;   /* 11-10: secundaire tekst als kleur, nooit via opacity (7,45:1 op wit, 5,94 op zand) */
  --wit:#FFFFFF;
  --groen:#4DA169;
  --groen-donker:#478F5F;
  --blauw:#21569D;
  --blauw-donker:#1D4C8B;
  --font:'Hanken Grotesk',system-ui,sans-serif;

  /* ---- spacing-schaal (8px-basis, Transform: 8/16/24/32/40/48/56/80/120) ---- */
  --s-half:4px;
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:56px; --s8:80px; --s9:120px;

  /* ---- vaste afstanden (rollen) ---- */
  --label-kop:var(--s2);   /* label -> kop */
  --kop-tekst:var(--s3);   /* kop -> tekst */
  --tekst-tekst:var(--s2); /* alinea -> alinea */
  --tekst-knop:var(--s4);  /* tekst -> knop(rij) */
  --knop-sub:var(--s2);    /* knop -> subregel */
  --blok:var(--s5);        /* kopblok -> inhoudsblok binnen een sectie */
  --kolom:var(--s3);       /* grid column-gap */
  --rij:var(--s6);         /* grid row-gap */
  --sectie:var(--s7);      /* verticale sectie-padding: 56 mobiel / 80 tablet / 120 desktop */
  --gutter:var(--s3);      /* 24 mobiel / 40 tablet / 56 desktop */

  /* ---- containers ---- */
  --container:1200px;      /* één contentbreedte */
  --smal:600px;            /* één smalle tekstbreedte (~62 tekens) */

  /* ---- type ---- */
  --display:clamp(40px,11vw,52px);
  --h2:clamp(32px,8vw,40px);
  --h3:24px;
  --stat:48px;
  --lead:20px;
  --body:17px;
  --label:14px;            /* 11-10: labels en bronnen minimaal 14px */

  --header-h:64px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (min-width:700px){
  :root{--sectie:var(--s8);--gutter:var(--s5);--blok:var(--s6);--h2:clamp(40px,5vw,56px);--stat:56px;--lead:22px;--body:18px;--display:clamp(56px,8vw,80px)}
}
@media (min-width:1024px){
  /* 11-10: h2 van 63 naar 48px (2,5x de body), body 19px. De pay-off blijft het enige element van ~95px. */
  :root{--sectie:var(--s9);--gutter:var(--s7);--blok:var(--s7);--kolom:var(--s4);--h2:clamp(40px,3.4vw,48px);--stat:clamp(56px,5vw,72px);--lead:23px;--body:19px;--header-h:80px;--display:clamp(80px,6.6vw,100px)}
}
/* 11-10: smalle telefoons (320-374): minder zijmarge zodat logo, Doneer nu en menuknop passen */
@media (max-width:374px){
  :root{--gutter:var(--s2)}
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
/* 12-10: ankermarge op de doelen (scroll-margin) i.p.v. scroll-padding op html. scroll-padding liet de browser bij Tab naar de vaste kop denken dat
   die knoppen verstopt zaten, en de pagina sprong dan ~500px omhoog. */
[id]{scroll-margin-top:calc(var(--header-h) + var(--s2))}
body{margin:0;background:var(--wit);color:var(--tekst);font-family:var(--font);font-weight:500;font-size:var(--body);line-height:1.6;overflow-x:clip;position:relative}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,figure,blockquote,ol,ul,dl,dd{margin:0}
ol,ul{padding:0}
h1,h2,h3{font-weight:900;text-wrap:balance}
p,li,dd{text-wrap:pretty}
a{color:inherit}
a,button,summary{touch-action:manipulation}
strong{font-weight:700}
button,input,select,textarea{font-family:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blauw);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.op-magenta :focus-visible{outline-color:var(--wit)}
.sr-only{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- typografie ---------- */
.display{font-size:var(--display);font-weight:900;line-height:.88;letter-spacing:-.04em}
.h2{font-size:var(--h2);font-weight:900;line-height:1.04;letter-spacing:-.025em}
.stat{font-size:var(--stat);font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lead{font-size:var(--lead);font-weight:500;line-height:1.45}
.label{display:flex;align-items:center;gap:var(--s1);font-size:var(--label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;color:var(--magenta)}
.label--wit{color:var(--wit)}
.bullet{width:22px;height:auto;flex:0 0 auto}
.bullet--wit{filter:brightness(0) invert(1)}
p,li{max-width:28em}       /* 11-10: regelbreedte in em, ~62 tekens bij elke lettergrootte */
.display,.stat,.stelling{max-width:none}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kolom);row-gap:var(--blok)}
.grid > *{grid-column:1/-1;min-width:0}
@media (min-width:1024px){
  .c-kop{grid-column:1/6}
  .c-tekst{grid-column:7/13}
  .c-half:first-child{grid-column:1/7}
  .c-half + .c-half{grid-column:7/13}
}
.sectie{position:relative;padding-block:var(--sectie);z-index:1}
.sectie--zand{background:var(--zand)}
.sectie--magenta{background:var(--magenta);color:var(--wit);z-index:2}

/* tekstblok: één vaste verticale ritmiek voor label/kop/tekst/knop */
.tb{display:flex;flex-direction:column;align-items:flex-start}
.tb > *{margin:0}
.tb > * + *{margin-top:var(--kop-tekst)}
.tb > .label + *{margin-top:var(--label-kop)}
.tb > p + p:not(.acties):not(.inlog){margin-top:var(--tekst-tekst)}
.tb > .acties{margin-top:var(--tekst-knop)}
.tb > .acties + *{margin-top:var(--knop-sub)}

/* ruwe randen (afbeeldingen van Lauda, buiten het vlak, 1px overlap tegen naden) */
.rand{position:absolute;left:0;width:100%;height:auto;pointer-events:none;z-index:3;user-select:none}
.rand--boven{bottom:calc(100% - 1px)}
.rand--onder{top:calc(100% - 1px)}

/* ---------- knoppen (één maat: 56px hoog, 16/24 padding) ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:56px;padding:var(--s2) var(--s3);border-radius:2px;border:0;font-size:19px;font-weight:700;line-height:24px;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background-color .2s,color .2s,box-shadow .2s}
.knop:hover{transform:translateY(-2px)}
.knop--groen{background:var(--groen);color:var(--wit)}
.knop--groen:hover{background:var(--groen-donker)}
.knop--blauw{background:var(--blauw);color:var(--wit)}
.knop--blauw:hover{background:var(--blauw-donker)}
.knop--wit{background:var(--wit);color:var(--magenta)}
.knop--wit:hover{background:var(--zand)}
.knop--omlijnd{background:transparent;color:var(--tekst);box-shadow:inset 0 0 0 2px var(--tekst)}
.knop--omlijnd:hover{background:var(--tekst);color:var(--wit)}
.knop--omlijnd-wit{background:transparent;color:var(--wit);box-shadow:inset 0 0 0 2px var(--wit)}
.knop--omlijnd-wit:hover{background:var(--wit);color:var(--magenta)}
.knop--blok{width:100%}
.knop--klein{min-height:40px;padding:var(--s1) var(--s2);font-size:16px}

/* ---------- header ---------- */
.skip{position:absolute;left:var(--s2);top:-100px;z-index:200;background:var(--tekst);color:var(--wit);padding:var(--s2) var(--s3);border-radius:2px;font-weight:700;text-decoration:none}
.skip:focus{top:var(--s2)}
.kop{position:sticky;top:0;z-index:100;background:var(--zand);border-bottom:1px solid transparent;transition:border-color .25s}
.kop.is-klein{border-bottom-color:var(--zand-donker)}
.kop__in{display:flex;align-items:center;gap:var(--s2);height:var(--header-h);max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);transition:height .25s var(--ease)}
.kop__logo{display:block;color:var(--magenta);margin-right:auto;flex:0 1 auto;min-width:0;border-radius:2px;padding-block:6px}  /* 12-10: tapdoel 44px */  /* 11-10: mag krimpen op smalle schermen */
.kop__logo .logo{height:36px;width:auto;max-width:100%;transition:height .25s var(--ease)}
.kop__nav{display:none;align-items:center;gap:var(--s3)}
.kop__nav a{position:relative;font-size:17px;font-weight:700;text-decoration:none;padding:var(--s1) 0;line-height:24px}
.kop__nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.kop__nav a:hover::after,.kop__nav a:focus-visible::after{transform:scaleX(1)}
/* 11-10: 44px hoog en 19px bold, dan haalt wit op groen (3,17:1) de eis voor grote tekst (3:1) */
.kop__doneer{min-height:44px;padding:var(--s1) var(--s2);font-size:19px;white-space:nowrap;flex:0 0 auto;transition:transform .2s var(--ease),background-color .2s,opacity .25s,visibility .25s}
@media (max-width:399px){
  .kop__in{gap:var(--s1)}
  .kop__doneer{padding:var(--s1) 12px}
}
.kop__doneer.is-weg{opacity:0;visibility:hidden}
.kop__menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:2px solid var(--tekst);border-radius:2px;cursor:pointer;flex:0 0 auto}
.kop__menu-icoon{display:flex;flex-direction:column;gap:4px;width:20px}
.kop__menu-icoon i{display:block;height:2px;background:var(--tekst);transition:transform .25s var(--ease),opacity .2s}
.kop__menu[aria-expanded="true"] .kop__menu-icoon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.kop__menu[aria-expanded="true"] .kop__menu-icoon i:nth-child(2){opacity:0}
.kop__menu[aria-expanded="true"] .kop__menu-icoon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (min-width:700px){ .kop__logo .logo{height:52px} }
@media (min-width:1024px){
  .kop__in{gap:var(--s4)}
  .kop__logo .logo{height:56px}
  .kop.is-klein .kop__in{height:64px}
  .kop.is-klein .kop__logo .logo{height:44px}
  .kop__nav{display:flex}
  .kop__doneer{min-height:48px;padding:var(--s1) var(--s3);font-size:19px}
  .kop__menu{display:none}
}
@media (min-width:1024px) and (max-width:1199px){ .kop__nav{gap:var(--s2)} .kop__nav a{font-size:16px} .kop__in{gap:var(--s3)} }

/* menu-overlay (mobiel) */
.menu{position:fixed;inset:0;top:var(--header-h);z-index:90;background:var(--magenta);color:var(--wit);overflow:auto;overscroll-behavior:contain}
.menu[hidden]{display:none}
/* 12-10: menu rolt open vanaf de kopbalk (clip-path), links komen kort na elkaar; sluiten sneller. hidden volgt na de animatie (JS). */
.menu{clip-path:inset(0 0 100% 0);transition:clip-path .26s cubic-bezier(.4,0,1,1)}
.menu.is-open{clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.22,1,.36,1)}
.menu:not(.is-open){pointer-events:none}
.menu .menu__stuk{opacity:0;transform:translateY(14px);transition:opacity .14s ease,transform .2s ease}
.menu.is-open .menu__stuk{opacity:1;transform:none;transition:opacity .32s ease calc(.1s + var(--i,0) * .035s),transform .5s cubic-bezier(.22,1,.36,1) calc(.1s + var(--i,0) * .035s)}
.menu__in{padding:var(--s4) var(--gutter) var(--s6);display:flex;flex-direction:column;gap:var(--s4);min-height:100%}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{font-size:32px;font-weight:900;line-height:1.25;letter-spacing:-.02em;text-decoration:none;padding:var(--s1) 0}
.menu__routes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1)}
.menu__routes a{display:flex;align-items:center;min-height:64px;padding:var(--s2);border:2px solid var(--wit);border-radius:2px;font-size:17px;font-weight:800;line-height:1.2;text-decoration:none}
.menu__routes a[hidden]{display:none}
/* 11-10: scroll-lock op html, niet op body. overflow:hidden op body maakte body (door html{overflow-x:clip}) een eigen
   scrollcontainer: de sticky kopbalk plakte dan aan body en scrollde op iOS weg, met de sluitknop erin. */
html.menu-open{overflow:hidden}
html.menu-open .kop{position:fixed;top:0;left:0;right:0}
html.menu-open body{padding-top:var(--header-h)}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;display:flex;flex-direction:column;min-height:calc(100svh - var(--header-h));background:var(--zand);padding-top:var(--s5)}
.hero__display{grid-column:1/-1;grid-row:1;position:relative;z-index:2}
.hero__display .regel{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em} /* 13-10: .2em zodat de staart van de j in "Wij" niet wordt afgeknipt */
.regel__in{display:block}
.regel__in--1{color:var(--tekst)}
.regel__in--2{color:var(--magenta)}
.hero__boven{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kolom);align-items:start}
.hero__lead{grid-column:1/-1;grid-row:2;margin-top:var(--s5);max-width:520px} /* 13-10 Nick: mobiel knop->kop = kop->lead (optisch gemeten, ~53 px allebei) */
.hero__blok{grid-column:1/-1;grid-row:3;position:relative;z-index:4;margin-top:var(--s3);margin-bottom:calc(-1 * var(--s8));padding:var(--s4) var(--s3) var(--s5);background:url(../assets/blok-rood.png?v=20261011h) center/100% 100% no-repeat;color:var(--wit)}
.stelling{font-size:26px;font-weight:900;line-height:1.1;letter-spacing:-.015em;color:var(--wit);max-width:none}
.hero__net{position:relative;z-index:1;height:160px;width:100%;margin-top:var(--s3)}
.net{position:absolute;inset:0;width:100%;height:100%}
.strook{position:relative;z-index:5;background:var(--wit);margin-top:calc(-1 * var(--s7));padding:var(--s3) 0}
.scheur{position:absolute;left:0;right:0;bottom:calc(100% - 1px);width:100%;height:18px;pointer-events:none}
.strook__label{margin-bottom:var(--s2)}
.routes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--zand-donker);border-left:1px solid var(--zand-donker)}
.route{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;align-content:space-between;row-gap:var(--s1);min-height:88px;padding:var(--s2);text-decoration:none;font-size:17px;font-weight:900;line-height:1.15;letter-spacing:-.01em;border-right:1px solid var(--zand-donker);border-bottom:1px solid var(--zand-donker);transition:color .2s,background-color .2s}
.route .bullet{grid-column:1;grid-row:1}
.route__pijl{grid-column:2;grid-row:1;width:24px;height:24px;color:var(--magenta);transition:transform .25s var(--ease)}
.route__tekst{grid-column:1/-1;grid-row:2}
.route[hidden]{display:none}
.route:hover,.route:focus-visible{color:var(--magenta);background:var(--zand)}
.route:hover .route__pijl,.route:focus-visible .route__pijl{transform:translateX(6px)}
@media (min-width:700px){
  .hero{padding-top:var(--s6)}
  .hero__display{font-size:calc(var(--display) * .85)} /* 13-10 Nick: kop 15% kleiner vanaf tablet (mobiel houdt de volle maat, 2012 blijft) */
  .hero__lead{grid-column:1/7;margin-top:var(--s6)}
  .hero__blok{grid-column:7/13;grid-row:1/3;align-self:center;margin-top:0;margin-bottom:0;padding:var(--s5) var(--s5) var(--s6);min-height:240px;display:flex;align-items:center}
  .hero__blok .stelling{font-size:30px}
  .hero__net{height:240px}
  .strook{margin-top:calc(-1 * var(--s8))}
  .routes{grid-template-columns:repeat(4,minmax(0,1fr));border-left:0;border-bottom:1px solid var(--zand-donker)}
  .route{display:flex;align-items:center;gap:var(--s2);min-height:80px;border-bottom:0;padding:var(--s2) var(--s3)}
  .route__tekst{flex:1 1 auto}
  .route__pijl{flex:0 0 auto}
  .route:last-of-type{border-right:0}
}
@media (min-width:700px) and (max-width:1023px){
  .route{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--s1);font-size:17px;padding:var(--s2)}
  .route__pijl{align-self:flex-end;order:3;margin-top:calc(-1 * var(--s3))}
}
@media (min-width:1024px){
  .hero__lead{max-width:640px} /* 12-10: langere ondertitel van Lindsay, ingangen blijven op 1440x900 boven de vouw */
  .hero__blok{grid-column:8/13;padding:var(--s6) var(--s7);min-height:264px}
  .hero__blok .stelling{font-size:36px}
  .route{font-size:21px;padding:var(--s2) var(--s3)}
}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:3;background:var(--magenta);color:var(--wit);height:56px;overflow:hidden}
.ticker__track{display:flex;height:100%;width:max-content;will-change:transform}
.ticker__blok{display:flex;align-items:center;height:56px;gap:var(--s3);padding-right:var(--s3);white-space:nowrap;font-size:20px;font-weight:900;letter-spacing:-.01em}
/* 11-10: Lauda-bullet als scheiding in plaats van 10 beeldmerken (beeldmerk minder dominant) */
.ticker__bullet{width:24px;height:auto;flex:0 0 auto;filter:brightness(0) invert(1)}
@media (min-width:1024px){
  .ticker{height:72px}
  .ticker__blok{height:72px;font-size:28px;gap:var(--s4);padding-right:var(--s4)}
  .ticker__bullet{width:30px}
}

/* ---------- feiten ---------- */
.feiten{overflow:hidden}
.feiten::before,.feiten::after{content:"";position:absolute;left:0;right:0;height:var(--s5);background:url(../assets/kant-zanddonker.webp) 0 0/293px 170px repeat;opacity:.75;pointer-events:none}
.feiten::before{top:0}
.feiten::after{bottom:var(--s5)}
.feiten__kop{text-align:center;margin-inline:auto;position:relative;z-index:1}
/* 11-10: 3 kaarten (32% eruit). Mobiel 1 kolom, tablet 2+1, desktop 3 naast elkaar. */
.feiten__lijst{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);max-width:26rem;margin:var(--blok) auto 0;position:relative;z-index:1}
.kaart{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--wit);padding:var(--s5) var(--s3) var(--s3);transform:rotate(var(--rot,0deg));text-align:center;max-width:none}
.kaart .stat{color:var(--magenta);font-size:var(--stat);white-space:nowrap}
.kaart__tekst{font-size:17px;font-weight:600;line-height:1.4;margin-top:var(--s2);max-width:none}
.kaart__bron{margin-top:auto;padding-top:var(--s2);font-size:14px;font-weight:600;line-height:1.3;color:var(--tekst-zacht);max-width:none}
/* tape: 1 hele tegel van de 2-rijen-vector (hele draden, even aantal rijen), geen snede uit een rastertegel */
.tape{position:absolute;top:-22px;left:50%;width:138.27px;height:44px;margin-left:-69.135px;background:url(../assets/kant-zanddonker-2.svg) 0 0/auto 100% repeat-x;transform:rotate(var(--tape,0deg));z-index:2;pointer-events:none}
@media (min-width:700px){
  .feiten::before,.feiten::after{height:var(--s8)}
  .feiten__lijst{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s4);max-width:44rem}
  .kaart:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - var(--s2))}
}
@media (min-width:1024px){
  .feiten__lijst{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);max-width:66rem}
  .kaart:last-child{grid-column:auto;width:auto}
  .kaart__tekst{font-size:18px}
}

/* ---------- cliënten ---------- */
.clienten__tekst{padding-top:var(--s1)}

/* ---------- werkwijze (B-ervaring, in A-stijl: full-bleed band) ---------- */
.werk{position:relative;z-index:2;background:var(--magenta);color:var(--wit)}
.werk__binnen{padding-block:var(--sectie)}
.werk__kop{color:var(--wit);max-width:14ch}
.werk__lijst{position:relative;padding-left:var(--s3)}
.werk__lijn{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--wit);transform-origin:top}
.werk__stappen{list-style:none}
.stap{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s2);align-items:center;padding:var(--s3) 0;border-top:1px solid rgba(255,255,255,.25);max-width:none}
.stap:first-child{border-top:0;padding-top:0}
.stap:last-child{padding-bottom:0}
.stap__badge{width:56px;height:56px;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.stap__tekst{font-size:18px;font-weight:700;line-height:1.35;color:var(--wit);max-width:none;transition:opacity .3s var(--ease)}
/* 11-10: tijdens de korte pin dimt alleen de badge van een niet-actieve stap; de tekst blijft op .85 (4,7:1).
   Buiten de pin (geen .is-gepind) staat alles op volle sterkte. */
.werk.is-gepind .stap:not(.is-actief) .stap__badge{opacity:.45;transform:scale(.82)}
.werk.is-gepind .stap:not(.is-actief) .stap__tekst{opacity:.85}
.werk__slot{margin-top:var(--s4);padding-left:var(--s3);font-size:var(--body);color:var(--wit)}
@media (min-width:1024px){
  .werk__links{grid-column:1/6}
  .werk__rechts{grid-column:6/13}
  .werk__in{align-items:center}
  .werk__lijst,.werk__slot{padding-left:var(--s4)}
  .stap__tekst{font-size:clamp(19px,1.6vw,22px)}
  .werk--pin .werk__binnen{min-height:calc(100svh - 64px);display:flex;align-items:center;padding-block:var(--s8)}
  .werk--pin .werk__binnen > .wrap{width:100%}
}

/* ---------- netwerk ---------- */
.netlijst{list-style:none;display:grid;grid-template-columns:1fr;gap:var(--s2)}
.netlijst li{display:flex;align-items:flex-start;gap:var(--s2);max-width:none}
.netlijst .bullet{margin-top:6px}
.netlijst strong{display:block;font-size:19px;font-weight:800;line-height:1.3;color:var(--magenta)}
.netlijst span{font-size:16px;line-height:1.45}
.netwerk__noot{font-size:16px}
.netwerk__kaart{display:flex;justify-content:center;align-items:center}
.netkaart{width:100%;max-width:600px;height:auto;aspect-ratio:619/512;overflow:visible}
.netkaart .regio{fill:var(--zand-donker);stroke:var(--wit);stroke-width:1.2;stroke-linejoin:round;transition:fill .25s;cursor:pointer}
.netkaart .regio.is-actief{fill:var(--zand-hover)}
.netkaart .punt{transition:opacity .25s}
.netkaart.heeft-actief .punt:not(.is-actief),.netkaart.heeft-actief #netlijnen line:not(.is-actief){opacity:.35}
.netkaart #netlijnen line{stroke:var(--magenta);stroke-width:1.2;stroke-linecap:round;opacity:.55;transition:opacity .25s}
@media (min-width:700px) and (max-width:1023px){ .netlijst{grid-template-columns:1fr 1fr;gap:var(--s3)} }

/* ---------- papier ---------- */
.papier{background:url(../assets/papier-zand.webp?v=2) center/100% 100% no-repeat}

/* ---------- professionals ---------- */
.prof__beeld{position:relative;display:flex;flex-direction:column;align-items:center}
.polaroid{width:76%;max-width:400px;transform:rotate(-3deg)}
.polaroid img{width:100%;height:auto}
/* 11-10 middag: de praatwolk is eruit (keuze Nick), de quote staat als gewone tekst onder de foto.
   lindsay.webp heeft onder ~12% van de fotobreedte lege (transparante) rand: de negatieve marge trekt de quote daarom omhoog. */
.citaat{width:min(400px,76%);margin:calc(20px - min(9.3%,49px)) auto 0}
/* 2-11: gewone rechthoekige foto via WhatsApp: vaste 4:5-uitsnede met witte fotorand, quote zonder negatieve marge. */
.polaroid--foto img{aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;background:#fff;border:10px solid #fff}
.polaroid--foto + .citaat{margin-top:28px}
.citaat__tekst{color:var(--tekst);font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;text-wrap:balance;max-width:none}
.citaat__naam{display:block;margin-top:12px;color:var(--magenta);font-weight:500;font-size:15px;line-height:1.4}
@media (min-width:1024px){
  .prof__beeld{grid-column:1/7}
  .polaroid{width:min(440px,78%);max-width:none}
  .citaat{width:min(440px,78%);margin:calc(24px - min(9.5%,54px)) 0 0}
  .polaroid--foto + .citaat{margin-top:32px}
  .citaat__tekst{font-size:22px}
  .prof__tekst{grid-column:7/13;align-self:center}
}

/* ---------- wij zijn kara (11-10: opbouw uit B, 1 H2 boven 3 rijen, per rij een H3 + tekst) ---------- */
.wzk__kop{color:var(--magenta)}
.wzk__rijen{margin-top:var(--blok);border-bottom:1px solid var(--zand-donker)}
.wzk__rij{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);padding-block:var(--s5);border-top:1px solid var(--zand-donker)}
.wzk__icoon{width:72px;height:auto}
.wzk__h3{font-size:21px;font-weight:900;line-height:1.25;letter-spacing:-.01em;max-width:30em;color:var(--tekst)}
.wzk__tekst{margin-top:var(--s1)}
@media (min-width:1024px){
  .wzk__rij{grid-template-columns:120px minmax(0,1fr);column-gap:var(--s6);padding-block:var(--s6);align-items:center}
  .wzk__icoon{width:120px}
  /* binnen de inhoudskolom: uitspraak (H3) links, toelichting rechts, zoals A's oorspronkelijke rijritme */
  .wzk__inhoud{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--s5);align-items:start}
  .wzk__h3{font-size:var(--h3)}
  .wzk__tekst{margin-top:0}
}

/* ---------- ambitie ---------- */
.ambitie__papier{position:relative;background:url(../assets/papier-zand.webp?v=2) center/100% 100% no-repeat;padding:var(--s6) var(--s3)}
.ambitie__boven{display:grid;grid-template-columns:1fr;gap:var(--s3);align-items:start}
.ambitie__logo{width:96px;height:auto}
.ambitie__kop{font-weight:900;letter-spacing:-.01em}
.ambitie__tekst > .lead + .lead{margin-top:var(--s1)}
.tijdlijn{position:relative;margin-top:var(--s7);padding-top:var(--s5)}
.tijdlijn__lijn{position:absolute;left:0;right:0;top:0;height:3px;background:var(--magenta);transform-origin:left center}
.tijdlijn__lijst{list-style:none;display:flex;justify-content:space-between}
.tijdlijn__punt{position:relative;display:flex;flex-direction:column;gap:var(--s1);max-width:none}
.tijdlijn__punt:last-child{align-items:flex-end;text-align:right}
.tijdlijn__bullet{position:absolute;top:calc(-1 * var(--s5) - 4px);left:0}
.tijdlijn__punt:last-child .tijdlijn__bullet{left:auto;right:0}
.tijdlijn__jaar{color:var(--magenta)}
.tijdlijn__sub{font-size:17px;font-weight:700}
@media (min-width:700px){
  .ambitie__papier{padding:var(--s8) var(--s7)}
  .ambitie__boven{grid-template-columns:120px minmax(0,1fr);column-gap:var(--s6)}
  .ambitie__logo{width:120px}
}

/* ---------- gevers ---------- */
.gevers .grid{row-gap:var(--blok)}
.gevers__tekst .hex{margin-top:var(--s5)}
.hex{position:relative;width:240px;aspect-ratio:1000/935;flex:0 0 auto;transform:rotate(-5deg)}
.hex__vorm{position:absolute;inset:0;width:100%;height:100%}
.hex__in{position:absolute;inset:20% 12%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--s-half);color:var(--magenta)}
.hex__bedrag{font-size:38px;font-weight:900;line-height:1;letter-spacing:-.03em;white-space:nowrap;max-width:none;color:var(--magenta)}
.hex__bedrag small{font-size:18px;font-weight:700;letter-spacing:0}
.hex__sub{font-size:14px;font-weight:700;line-height:1.25;max-width:16ch;color:var(--magenta)}
/* 11-10: eerlijk steunblok. Geen nep-betaalformulier meer: kop, 2 zinnen uit de kennisbank, een knop die zegt wat hij doet. */
.widget{position:relative;width:100%;max-width:520px;background:var(--wit);color:var(--tekst);padding:var(--s5) var(--s3) var(--s4);display:grid;gap:var(--s3);transform:rotate(1deg)}
.widget .tape{top:-22px}
.widget__kop{font-size:clamp(28px,3vw,36px);font-weight:900;line-height:1.05;letter-spacing:-.02em;color:var(--magenta)}
.widget__intro{font-size:var(--body);line-height:1.55;max-width:none}
/* 11-10 middag: frequentie en bedrag terug (keuze Nick, zoals bij Make-A-Wish). De knop opent nog een mail met de keuze.
   Gekozen = magenta met wit (5,9:1); groen met wit haalt maar 3,2:1, te weinig voor 16-17px. */
.keuzes{display:grid;gap:var(--s1);border:0;padding:0;margin:0;min-width:0}
.keuzes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.keuzes--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.keuze{position:relative;display:block}
.keuze input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.keuze span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:var(--s1) 4px;background:var(--zand);color:var(--tekst);font-size:16px;font-weight:700;line-height:1.2;text-align:center;border-radius:2px;cursor:pointer;transition:background-color .2s,color .2s;user-select:none}
.keuze span:hover{background:var(--zand-donker)}
.keuze input:checked + span{background:var(--magenta);color:var(--wit)}
.keuze input:focus-visible + span{outline:3px solid var(--blauw);outline-offset:2px}
.widget__anders{display:none}
.widget__anders.is-open,.widget:has(input[value="anders"]:checked) .widget__anders{display:block}
.widget__anders label{display:block;font-size:14px;font-weight:700;margin-bottom:var(--s1)}
.widget__anders input{width:100%;min-height:48px;padding:var(--s1) var(--s2);font:700 19px/1.2 var(--font);color:var(--tekst);background:var(--wit);border:2px solid var(--zand-donker);border-radius:2px}
.widget__anders input:focus-visible{outline:3px solid var(--blauw);outline-offset:2px}
.widget__noot{font-size:14px;font-weight:500;line-height:1.4;text-wrap:balance;color:var(--tekst-zacht);text-align:center;max-width:none;margin-top:calc(-1 * var(--s1))}
@media (max-width:359px){ .keuzes--3{grid-template-columns:1fr} }
@media (min-width:480px){ .keuzes--4{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:700px){ .keuze span{font-size:17px} }
@media (min-width:1024px) and (max-width:1279px){ .gevers__widget .widget{padding-inline:var(--s3)} }  /* smalle kolom: "Maandelijks" past dan in zijn knopje */
/* partners: de 3 vormen van steun uit Kara's eigen "ask" (SOLVE/DON-PPT slide 9) */
.gevers__partners{border-top:1px solid rgba(255,255,255,.4);padding-top:var(--blok)}
.partners__kop{font-size:var(--h3);font-weight:900;line-height:1.2;color:var(--wit)}
.partners__intro{margin-top:var(--s2);font-size:var(--lead);line-height:1.45;color:var(--wit)}
.partners__lijst{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s4)}
.partners__lijst li{display:flex;align-items:flex-start;gap:var(--s2);max-width:none;color:var(--wit)}
.partners__lijst .bullet{margin-top:6px}
.partners__lijst strong{display:block;font-size:19px;font-weight:800;line-height:1.3}
.partners__lijst span{font-size:17px;line-height:1.5}
.gevers__partners .acties{margin-top:var(--s4)}
@media (min-width:700px){
  .widget{padding:var(--s6) var(--s5) var(--s5)}
}
@media (min-width:1024px){
  .partners__lijst{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s5)}
}
@media (min-width:1024px){
  .gevers__tekst{grid-column:1/7}
  .gevers__widget{grid-column:8/13;align-self:center}
  .widget{max-width:none}
  .hex{width:280px}
  .hex__bedrag{font-size:46px}
  .hex__bedrag small{font-size:22px}
  .hex__sub{font-size:15px}
}

/* ---------- vragen (FAQ, uit B) ---------- */
.faq{border-top:1px solid var(--zand-donker)}
.faq__item{border-bottom:1px solid var(--zand-donker)}
.faq__vraag{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:var(--s3) 0;font-size:19px;font-weight:900;line-height:1.3;cursor:pointer;list-style:none;border-radius:2px}
.faq__vraag::-webkit-details-marker{display:none}
.faq__vraag:hover{color:var(--magenta)}
.chevron{width:24px;height:24px;flex:0 0 auto;color:var(--magenta);transition:transform .3s var(--ease)}
.faq__item[open] .chevron{transform:rotate(180deg)}
.faq__antwoord{padding:0 0 var(--s3)}
.faq__item[open] .faq__antwoord{animation:faq-in .38s cubic-bezier(.22,1,.36,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (min-width:1024px){ .faq__vraag{font-size:21px} }

/* ---------- footer (opbouw uit B, A-randen) ---------- */
.voet{position:relative;z-index:1;background:var(--magenta);color:var(--wit);margin-bottom:var(--s7);padding-block:var(--s8) var(--s5);font-size:16px;line-height:1.6}
.voet__logo{width:auto;height:48px}
.voet__kolommen{display:grid;grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s6)}
.voet__kolom{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.voet__kolom .label{margin-bottom:var(--s1)}
.voet p,.voet a:not(.knop),.voet dd,.voet dt{color:var(--wit)}
.voet__gegevens{display:grid;gap:0}
.voet__gegevens div{display:flex;gap:var(--s1)}
.voet__gegevens dt::after{content:":"}
.voet__docs{list-style:none;margin:var(--s1) 0 0;padding:0}
.voet__docs a{display:inline-block;padding-block:10px;margin-block:-10px;text-underline-offset:3px}
.voet__kolom--acties{gap:var(--s2)}
.voet__kolom--acties .label{margin-bottom:0}
.voet__onder{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.3);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:14px}
@media (min-width:700px){
  .voet__logo{height:56px}
  .voet__kolommen{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
}
@media (min-width:700px) and (max-width:1023px){
  /* 11-10: knoppen op tablet op een eigen rij, zodat geen knoptekst over 2 regels breekt */
  .voet__kolommen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voet__kolom--acties{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center}
  .voet__kolom--acties .label{flex-basis:100%}
}
@media (min-width:1024px){
  .voet__kolommen{grid-template-columns:minmax(0,5fr) minmax(0,4fr) auto}
}
.voet .knop{white-space:nowrap}

/* ---------- reduced motion: alles direct in eindstand ---------- */
@media (prefers-reduced-motion:reduce){
  /* 12-10: transition:none i.p.v. .01ms; die .01ms gaf elk element een transitie op "all", waardoor body-padding bij het sluiten van het menu nog even 64px was */
  *,*::before,*::after{transition:none !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .knop:hover{transform:none}
  .menu,.menu .menu__stuk,.menu.is-open .menu__stuk{transition:none !important}
}

/* 6-10: kleinere display-kop (Nick: "veel te groot") -> vaste afstand kop-lead (13-10: margin-top op .hero__lead) */
.hero{min-height:0}

/* 6-10 kant = ECHTE vector (Lauda's draden uit KARA-website_V2_LR.pdf, _qa/kant_svg.py). Een band is altijd een EVEN
   aantal hele draadrijen: boven en onder complete hoofdjes, nooit een snede of scheur door het kant. */
.hero__net{height:calc(102.15px + var(--s6))} /* 13-10 Nick: kant 20% kleiner (was 127.69 / 278.44) */
.net__kant--4{display:none} /* 13-10: brede strook i.p.v. <pattern>, zie _qa/kant_breed.py (geen tegelnaden) */
.strook{margin-top:0}
@media (min-width:700px){
  .hero__net{height:calc(222.75px + var(--s6))}
  .net__kant--2{display:none}
  .net__kant--4{display:inline}
}
/* 11-10: op desktopschermen tot 1000px hoog 2 hele rijen kant i.p.v. 4 (nog steeds even), zodat de 4 "Voor wie?"-tegels
   met marge boven de vouw staan (1440x900). Op hogere schermen blijven de 4 rijen staan. */
@media (min-width:1024px) and (max-height:1000px){
  .hero__net{height:calc(102.15px + var(--s6))}
  .net__kant--2{display:inline}
  .net__kant--4{display:none}
}
.feiten::before,.feiten::after{height:80px;background:url(../assets/kant-zanddonker-2-breed.svg?v=20261013a) 0 0/auto 80px repeat-x;opacity:.75} /* 13-10: brede strook, geen tegelnaden */
.feiten::before{top:0}
.feiten::after{bottom:var(--s5)}

/* 6-10: 2012-blok in Lauda's slide-7-stijl (V1, Nick): kantband van hele draden + magenta hexagon met kernzin.
   Vervangt het eigen "gat"-concept (stond niet in Henry's ontwerp). Wit vlak omdat feiten en cliënten al zand zijn. */
.twaalf__in{align-items:center}
.twaalf__jaar{color:var(--magenta)}
.twaalf__beeld{position:relative;aspect-ratio:590/225;order:-1;margin:var(--s6) 0 var(--s6)}
.twaalf__kant{position:absolute;inset:0;width:100%;height:100%}
.twaalf__hex{position:absolute;left:19%;top:-30%;width:62%;aspect-ratio:1000/935;color:var(--magenta)}
.twaalf__hex svg{position:absolute;inset:0;width:100%;height:100%}
.twaalf__hex p{position:absolute;inset:24% 19% 22% 19%;display:flex;align-items:center;justify-content:center;text-align:center;
  max-width:none;color:var(--wit);font-weight:900;font-size:clamp(14px,4.15vw,20px);line-height:1.1;letter-spacing:-.015em} /* 12-10: 7 regels sinds Lindsays tekst, kleiner zodat alles binnen de vorm valt */
@media (min-width:700px){
  .twaalf__hex{left:27%;top:-22%;width:46%}
  .twaalf__hex p{font-size:clamp(20px,2.9vw,27px)}
}
@media (min-width:1024px){ .twaalf__hex p{font-size:clamp(17px,1.75vw,27px)} }
@media (min-width:1024px){
  .twaalf__jaar{font-size:clamp(64px,5vw,72px)}  /* 11-10: de pay-off blijft het enige element van ~95px */
  .twaalf__tekst{grid-column:1/6}
  .twaalf__beeld{grid-column:6/13;order:0;margin:var(--s7) 0 0}
}

/* 15-10 (Daan): logo groter, op brede schermen naar Henry's verhouding; kopbalk 88px */
@media (min-width:1200px){
  :root{--header-h:88px}
  .kop__logo .logo{height:64px}
}
/* 15-10 (Daan): "Voor wie" in het desktopmenu, uitklapper met de 4 doelgroepen */
.kop__wie{position:relative}
.kop__wie-knop{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:17px;font-weight:700;line-height:24px;color:inherit;background:none;border:0;padding:var(--s1) 0;cursor:pointer}
.kop__wie-pijl{width:18px;height:18px;transition:transform .25s var(--ease)}
.kop__wie-knop[aria-expanded="true"] .kop__wie-pijl{transform:rotate(180deg)}
.kop__wie-lijst{position:absolute;top:calc(100% + 8px);left:-16px;min-width:240px;display:flex;flex-direction:column;padding:8px 0;background:var(--wit);border:1px solid var(--zand-donker);border-radius:2px;box-shadow:0 12px 32px rgba(60,57,55,.14);z-index:110}
.kop__wie-lijst[hidden]{display:none}
.kop__nav .kop__wie-lijst a{padding:10px 16px;font-size:17px;line-height:24px}
.kop__nav .kop__wie-lijst a::after{display:none}
.kop__nav .kop__wie-lijst a:hover,.kop__nav .kop__wie-lijst a:focus-visible{background:var(--zand);color:var(--magenta)}
@media (min-width:1024px) and (max-width:1199px){ .kop__wie-knop{font-size:16px} }
/* 15-10: menu-items nooit over 2 regels; op 1024-1199 logo iets kleiner zodat alles op 1 regel past */
.kop__nav > a,.kop__wie-knop{white-space:nowrap}
@media (min-width:1024px) and (max-width:1199px){ .kop__logo .logo{height:48px} .kop__in{gap:var(--s2)} }

/* ===== ronde 2 (voorstel 15-10): feiten in het rode vak, h1 als kopregel, doneerstrook ===== */
.hero__h1{grid-column:1/-1;grid-row:1;margin:0 0 var(--s2);font-size:15px;font-weight:900;line-height:1.25;letter-spacing:0;color:var(--magenta);max-width:34ch}
.hero__display{grid-row:2}
.hero__lead{grid-row:3}
.hero__blok{grid-row:4;margin-bottom:0;display:block}
.hero__feiten-kop{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-bottom:var(--s2)}
.hero__feiten{list-style:none;margin:0;padding:0}
.hero__feiten li{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:var(--s2);align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.35)}
.hero__feiten li:first-child{border-top:0;padding-top:0}
.hero__feiten li:last-child{padding-bottom:0}
.hero__feiten p{margin:0;font-size:14px;line-height:1.3;color:var(--wit);max-width:none}
.hero__feiten .hero__stat{font-size:24px;font-weight:900;line-height:1;letter-spacing:-.02em;white-space:nowrap}
@media (min-width:700px){
  .hero__blok{grid-column:7/13;grid-row:1/4;display:block;min-height:0;padding:var(--s4) var(--s4) var(--s5)}
  .hero__lead{grid-column:1/7}
}
@media (min-width:1024px){
  .hero__h1{font-size:17px}
  .hero__blok{grid-column:8/13;padding:var(--s5) var(--s5) var(--s6)}
  .hero__feiten p{font-size:15px}
  .hero__feiten .hero__stat{font-size:30px}
  .hero__feiten li{grid-template-columns:132px minmax(0,1fr)}
}
.doneerstrook{background:var(--magenta);color:var(--wit);padding:var(--s4) 0}
.doneerstrook__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4)}
.doneerstrook__tekst{margin:0;font-size:20px;font-weight:700;line-height:1.25;color:var(--wit);max-width:none}
.doneerstrook__tekst strong{font-weight:900}
@media (min-width:1024px){.doneerstrook__tekst{font-size:26px}}