/* Gegenereerd door stijl.py. Niet met de hand bewerken. */
/* De letter is de variabele Anek Telugu, geladen via een link in de head van elke
   pagina. Eén bestand met een gewichts- en een breedte-as, in plaats van de vijf
   losse gewichten die de huidige site laadt. Bij het uitrollen wordt dit bestand
   zelf gehost, want de CSP van de site laat geen vreemde herkomst toe. */

/* Anek Telugu, variabel in breedte (75 tot 125) en gewicht (100 tot 800).
   Zelf gehost, want de CSP laat geen stylesheet en geen lettertype van een
   ander domein toe. Twee bestanden: latin voor het gewone werk en latin-ext
   voor de accenten die daarbuiten vallen. Het variabele bestand is de reden
   dat de breedte-as op deze site gebruikt kan worden. */
@font-face{
  font-family:'Anek Telugu';
  src:url('assets/fonts/AnekTelugu-variabel-latin.woff2') format('woff2-variations');
  font-weight:100 800;font-stretch:75% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Anek Telugu';
  src:url('assets/fonts/AnekTelugu-variabel-latin-ext.woff2') format('woff2-variations');
  font-weight:100 800;font-stretch:75% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --teal:#01544E; --teal-diep:#013a35; --teal-dieper:#012a26;
  --teal-tint:#e6f0ef; --bleek:#DBEDEE; --bleek-diep:#c2dfe1;
  --lime:#ABCD71; --lime-diep:#8aaa4e; --lime-tint:#f2f9e7;
  --canvas:#f7fafa; --inkt:#000000; --zacht:#5a6663;
  --rand:0.5px solid rgba(0,0,0,.12);
  --schaduw-s:0 1px 3px rgba(1,84,78,.08);
  --schaduw-m:0 4px 16px rgba(1,84,78,.12);
  --schaduw-l:0 8px 32px rgba(1,84,78,.16);
  --breed:1140px;

  /* Typografische schaal. Zeven maten met een vast ritme, in plaats van de twaalf
     losse waarden die er eerst stonden (11 tot en met 19 lag allemaal door elkaar).
     De breedte-as van Anek Telugu doet het werk dat anders een tweede letter zou
     kosten: labels smal, koppen en cijfers breed. */
  --t-label:12px;   --w-label:85;
  --t-klein:14px;
  --t-body:16px;
  --t-lead:19px;
  --t-h3:22px;
  --t-h2:clamp(27px,3.0vw,37px);  --w-h2:103;
  --t-h1:clamp(36px,4.6vw,56px);  --w-h1:104;
  --t-cijfer:clamp(30px,3.6vw,44px); --w-cijfer:115;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--inkt);
  font:400 16px/1.6 'Anek Telugu',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--lime);color:var(--teal)}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:96px}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 28px}
.smal{max-width:660px}

/* ---------- typografie ---------- */
h1,h2,h3{margin:0}
h1{
  font-size:var(--t-h1);font-weight:800;line-height:1.02;letter-spacing:-.03em;
  font-variation-settings:'wdth' var(--w-h1);
}
h2{
  font-size:var(--t-h2);font-weight:700;line-height:1.12;letter-spacing:-.02em;
  color:var(--teal);font-variation-settings:'wdth' var(--w-h2);
}
h3{font-size:var(--t-h3);font-weight:600;line-height:1.3;letter-spacing:-.012em}
p{margin:0 0 16px}

/* Labels staan smal en in kapitaal. Dat is wat de breedte-as hier oplevert:
   een label dat compact blijft zonder kleiner te worden dan 12px. */
.eyebrow{
  font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wdth' var(--w-label);
  color:var(--lime-diep);margin:0 0 14px;display:block;
}
.op-donker .eyebrow{color:var(--lime)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--zacht);max-width:58ch}
.op-donker .lead{color:rgba(255,255,255,.84)}
.klein{font-size:var(--t-klein);line-height:1.5;color:var(--zacht)}

/* Cijfers krijgen vaste breedte, zodat kolommen onder elkaar uitlijnen en een
   getal niet verspringt als het verandert. */
.cijfer,.bewijs-cijfers b,.belkaart-nummer,.belpaneel-kop{font-size:var(--t-h3);font-weight:700;color:var(--teal);margin:6px 0 18px;letter-spacing:-.015em}
.belpaneel-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.belpaneel-nummer{
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--t-klein);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 30px;border-radius:100px;text-decoration:none;border:2px solid transparent;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.knop:hover{transform:translateY(-1px)}
.knop-primair{background:var(--lime);color:var(--teal)}
.knop-primair:hover{background:#bcd98a}
.knop-ghost{border-color:var(--lime);color:var(--lime)}
.knop-ghost:hover{background:rgba(171,205,113,.14)}
.knop-teal{background:var(--teal);color:#fff}
.knop-teal:hover{background:var(--teal-diep)}
.knop-lijn{border-color:var(--teal);color:var(--teal)}
.knop-lijn:hover{background:var(--teal-tint)}
.knop svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  /* hoofdletters hebben geen staartletters, dus hun visuele midden ligt
     hoger dan het midden van de regel. Een icoon dat precies in het midden
     staat, lijkt daardoor te laag. */
  transform:translateY(-1px)}

/* ---------- kop van de pagina ---------- */
.kopbalk{position:fixed;top:12px;left:0;right:0;z-index:50;padding:0 28px}
.kopbalk-binnen{
  max-width:var(--breed);margin:0 auto;background:transparent;border-radius:14px;
  display:flex;align-items:center;gap:28px;padding:11px 14px 11px 22px;
  transition:background .2s,box-shadow .2s;
}
/* Bovenaan staat de balk doorzichtig op de teal hero. Zodra je scrolt krijgt hij
   een eigen vlak, want daaronder is de pagina licht. */
.kopbalk.vast .kopbalk-binnen{background:var(--teal);box-shadow:var(--schaduw-l)}
.kopbalk img{height:42px;width:auto}
.hoofdmenu{display:flex;gap:22px;margin-left:auto;align-items:center}
.hoofdmenu a:not(.knop){
  color:rgba(255,255,255,.8);text-decoration:none;font-size:var(--t-klein);font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.hoofdmenu a:not(.knop):hover{color:#fff;border-bottom-color:var(--lime)}
.kopbalk .knop{padding:11px 20px;font-size:var(--t-label);font-weight:700}
.menuknop{
  display:none;margin-left:auto;background:none;border:2px solid rgba(255,255,255,.35);
  color:#fff;border-radius:100px;padding:8px 16px;font-weight:700;font-size:var(--t-label);line-height:1;font-family:'Anek Telugu',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
/* De logo-regel met het kruisje en de linkhouder bestaan alleen in het
   beeldvullende menu op een smal scherm. Op een breed scherm is .menu-links
   display:contents, zodat de links gewoon naast elkaar in de flexrij staan. */
.menu-kop{display:none}
.menu-links{display:contents}
.menusluit{
  width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:border-color .15s,background .15s;
}
.menusluit:hover{border-color:var(--lime);background:rgba(171,205,113,.12)}
.menusluit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:940px){
  /* De balk volgt de kantlijn van de inhoud (28px): 16px buiten plus 12px binnen. */
  .kopbalk{padding:0 16px}
  .kopbalk-binnen{gap:12px;padding:8px 8px 8px 12px}
  .hoofdmenu{display:none}
  .menuknop{display:block}
  /* Beeldvullend menu (Paul, 9 september 2026): het hele scherm, kruisje
     rechtsboven, grote links, de hoofdknop onderaan. */
  .kopbalk.open .hoofdmenu{
    display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;
    position:fixed;inset:0;z-index:60;background:var(--teal-diep);
    padding:calc(20px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
  }
  .kopbalk.open .menu-kop{display:flex;align-items:center;justify-content:space-between;margin:0 0 36px}
  /* De logolink erft anders de menustijl (padding, onderlijn); hier terugzetten. */
  .kopbalk.open .menu-kop a{padding:0;border:0;width:auto;display:flex}
  .kopbalk.open .menu-kop img{height:42px}
  .kopbalk.open .menu-links{display:flex;flex-direction:column;gap:0}
  .kopbalk.open .menu-links a{
    width:100%;padding:16px 0;font-size:var(--t-h2);font-weight:700;line-height:1.15;
    letter-spacing:-.02em;font-variation-settings:'wdth' var(--w-h2);
    color:#fff;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .kopbalk.open .menu-links a[aria-current='page']{color:var(--lime)}
  .kopbalk.open .menu-links a:hover{border-bottom-color:rgba(255,255,255,.14)}
  .kopbalk.open .hoofdmenu .knop{
    margin-top:auto;justify-content:center;padding:16px 24px;font-size:var(--t-klein);
  }
  .kopbalk.open .menusluit{margin-right:-8px}
  body.menu-open{overflow:hidden}
  /* De kopbalk is een eigen stapelcontext (z-index 50), dus de chatknop (70)
     zou door het menu heen steken. Zolang het menu openstaat gaat hij weg. */
  body.menu-open .chat-knop{display:none}
}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--teal);color:#fff;overflow:hidden;
  padding:140px 0 104px;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 82% 8%,rgba(171,205,113,.20),transparent 62%),
    radial-gradient(620px 520px at 4% 96%,rgba(219,237,238,.14),transparent 60%);
}
.hero::after{
  content:'';position:absolute;left:-140px;bottom:-260px;width:620px;height:620px;
  border-radius:50%;pointer-events:none;
  border:1px solid rgba(171,205,113,.16);
  box-shadow:0 0 0 60px rgba(171,205,113,.05),0 0 0 140px rgba(171,205,113,.035);
}
.hero .wrap{position:relative;z-index:1}
.hero-raster{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.hero h1{max-width:17ch}
.hero .accent{color:var(--lime)}
.hero .lead{font-size:var(--t-lead);margin:20px 0 30px;max-width:600px}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-onder{margin:22px 0 0;font-size:var(--t-klein);color:rgba(255,255,255,.68);max-width:480px}

/* ---------- belkaart in de hero ---------- */
.belkaart{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:26px 26px 22px;
}
.belkaart-label{
  font-size:var(--t-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);display:block;margin-bottom:10px;
}
.belkaart-kop{font-size:var(--t-h3);font-weight:700;color:#fff;letter-spacing:-.015em;margin:0 0 10px}
.belkaart-nummer{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--lime);
  font-size:clamp(22px,2.3vw,28px);font-weight:800;letter-spacing:-.02em;
  padding:14px 18px;border-radius:14px;background:rgba(171,205,113,.10);
  border:1px solid rgba(171,205,113,.28);transition:background .15s;
}
.belkaart-nummer:hover{background:rgba(171,205,113,.18)}
.belkaart-nummer svg{width:20px;height:20px;flex:none;stroke:var(--lime);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.belkaart-lijst{list-style:none;margin:20px 0 0;padding:0}
.belkaart-lijst li{
  position:relative;padding-left:24px;margin-bottom:10px;
  font-size:var(--t-body);color:rgba(255,255,255,.82);line-height:1.5;
}
.belkaart-lijst li::before{
  content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;
  background:var(--lime);
}
@media(max-width:900px){
  .hero-raster{grid-template-columns:1fr;gap:36px}
  .belkaart{padding:24px 22px 20px}
}

/* ---------- kanaalkeuze in de hero ---------- */
/* Eerst drie losse pilknoppen (bellen, WhatsApp, chatten). Sinds 9 september
   2026 één uitklaplijst: de bezoeker kiest eerst het kanaal en ziet per kanaal
   in één regel wat er gebeurt. Een details-element, dus hij werkt ook zonder
   script; de lijst klapt in de flow uit en de kaart groeit mee. */
.belkaart-lead{color:rgba(255,255,255,.8);font-size:var(--t-klein);margin:0 0 18px;max-width:42ch}
.kanaalkeuze{position:relative}
.kanaalkeuze-knop{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 14px 22px;border-radius:100px;border:2px solid var(--lime);color:var(--lime);
  font-size:var(--t-klein);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  transition:background .15s,border-radius .15s;
}
.kanaalkeuze-knop::-webkit-details-marker{display:none}
.kanaalkeuze-knop:hover{background:rgba(171,205,113,.14)}
.kanaalkeuze-knop svg{
  width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;
}
.kanaalkeuze[open] .kanaalkeuze-knop{background:var(--lime);color:var(--teal)}
.kanaalkeuze[open] .kanaalkeuze-knop svg{transform:rotate(180deg)}
.kanaalkeuze-lijst{
  margin:10px 0 0;padding:6px;border-radius:18px;
  background:rgba(1,42,38,.55);border:1px solid rgba(255,255,255,.14);
}
.kanaal{
  display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:12px;
  text-decoration:none;color:#fff;transition:background .15s;
}
.kanaal:hover{background:rgba(255,255,255,.08)}
.kanaal + .kanaal{border-top:1px solid rgba(255,255,255,.08)}
.kanaal-icoon{
  width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(171,205,113,.14);color:var(--lime);
}
.kanaal-icoon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kanaal-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.kanaal-tekst b{font-size:var(--t-body);font-weight:700;line-height:1.2}
.kanaal-tekst small{font-size:var(--t-klein);line-height:1.35;color:rgba(255,255,255,.7)}
/* Op de smalste telefoons (360px) past het label anders niet op één regel. */
@media(max-width:400px){
  .kanaalkeuze-knop{font-size:13px;letter-spacing:.04em;padding:14px 16px 14px 18px}
}
/* Kleine kanaalknoppen, nog in gebruik op het belpaneel van de contactpagina. */
.knop-kanaal{padding:11px 20px;font-size:var(--t-label);gap:8px}
.knop-kanaal svg{width:15px;height:15px}

/* ---------- Cloudflare Turnstile ---------- */
.cf-turnstile{margin:0 0 22px;min-height:65px}

/* ---------- bewijsbalk ---------- */
.bewijsbalk{margin-top:-120px;position:relative;z-index:2}
.bewijsbalk-kaart{
  background:#fff;border-radius:20px;box-shadow:var(--schaduw-l);
  padding:34px 34px 26px;border:var(--rand);
}
.bewijs-cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bewijs-cijfers div{border-left:2px solid var(--bleek);padding-left:18px}
.bewijs-cijfers b{
  display:block;font-size:var(--t-cijfer);font-weight:800;color:var(--teal);
  letter-spacing:-.025em;line-height:1.02;
  font-variation-settings:'wdth' var(--w-cijfer);
}
.bewijs-cijfers span{display:block;font-size:var(--t-klein);color:var(--zacht);margin-top:6px}
.bewijs-bron{
  margin:26px 0 0;padding-top:16px;border-top:var(--rand);
  font-size:var(--t-klein);color:var(--zacht);
}
@media(max-width:820px){.bewijs-cijfers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.bewijs-cijfers{grid-template-columns:1fr}}

/* ---------- belpaneel op de contactpagina ---------- */
.belpaneel{
  background:#fff;border:var(--rand);border-radius:20px;box-shadow:var(--schaduw-l);
  padding:34px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
}
.belpaneel-kop{font-size:var(--t-h3);font-weight:700;color:var(--teal);margin:6px 0 18px;letter-spacing:-.015em}
.belpaneel-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.belpaneel-nummer{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--teal);
  font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.025em;
  padding:16px 24px;border-radius:16px;background:var(--lime-tint);
  border:1px solid rgba(138,170,78,.4);transition:background .15s;margin-top:4px;
}
.belpaneel-nummer:hover{background:#e9f4d6}
.belpaneel-nummer svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--lime-diep);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.belpaneel-anders{border-left:var(--rand);padding-left:34px}
.belpaneel-anders h2{font-size:var(--t-lead);font-weight:600;color:var(--teal);margin-bottom:8px}
.belpaneel-anders p{color:var(--zacht);font-size:var(--t-body);margin:0 0 12px}
.belpaneel-lijst a{color:var(--teal);font-weight:600;text-decoration:none;
  border-bottom:2px solid rgba(1,84,78,.2)}
.belpaneel-lijst a:hover{border-bottom-color:var(--lime)}
@media(max-width:860px){
  .belpaneel{grid-template-columns:1fr;gap:26px;padding:26px 22px}
  .belpaneel-anders{border-left:0;border-top:var(--rand);padding:22px 0 0}
}

/* ---------- secties ---------- */
section{padding:88px 0}
.sectiekop{max-width:660px;margin-bottom:40px}
.sectiekop .lead{margin-top:14px}
.donker{background:var(--teal);color:#fff}
.donker h2{color:#fff}
.dieper{background:var(--teal-diep);color:#fff}
.dieper h2{color:#fff}

/* ---------- kaarten ---------- */
.kaarten{display:grid;gap:20px}
.kaarten-3{grid-template-columns:repeat(3,1fr)}
.kaarten-2{grid-template-columns:repeat(2,1fr)}
.kaart{
  background:#fff;border:var(--rand);border-radius:14px;padding:24px;
  box-shadow:var(--schaduw-s);
}
.kaart h3{margin-bottom:8px;color:var(--teal)}
.kaart p{margin:0;color:var(--zacht);font-size:var(--t-body)}
/* Het icoon staat op de eerste regel van de kop, niet in het midden: bij een
   kop van twee regels (op mobiel) zweefde hij anders tussen de regels in. */
.kaart-kop{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.kaart-kop h3{margin:0}
.kaart-icoon{width:22px;height:22px;flex:none;stroke:var(--lime-diep);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.kaart-breed{grid-column:span 2}

/* Doorkliklink onder een sectie naar de pagina die er dieper op ingaat. */
.sectielink{margin:28px 0 0}
.sectielink a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--teal);font-size:var(--t-body);font-weight:700;
  border-bottom:2px solid rgba(1,84,78,.22);padding-bottom:2px;
  transition:border-color .15s,gap .15s;
}
.sectielink a:hover{border-bottom-color:var(--lime);gap:12px}
.sectielink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:940px){
  .kaarten-3{grid-template-columns:repeat(2,1fr)}
  .kaart-breed{grid-column:span 2}
}
@media(max-width:640px){
  .kaarten-3,.kaarten-2{grid-template-columns:1fr}
  .kaart-breed{grid-column:span 1}
}

/* ---------- kop van een onderliggende pagina ---------- */
.paginakop{
  background:var(--teal);color:#fff;padding:150px 0 72px;position:relative;overflow:hidden;
}
.paginakop::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 340px at 84% 0%,rgba(171,205,113,.18),transparent 60%);
}
.paginakop .wrap{position:relative;z-index:1}
.paginakop h1{max-width:18ch}
.paginakop .lead{margin-top:18px;max-width:640px;font-size:var(--t-lead);color:rgba(255,255,255,.82)}
.paginakop-diep{padding-bottom:160px}
.overlap{margin-top:-104px;position:relative;z-index:2}

/* ---------- blokken op de oplossingenpagina ---------- */
.blok{padding:68px 0}
.blok-tint{background:#fff;border-top:var(--rand);border-bottom:var(--rand)}
.blok-raster{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.blok-nr{
  display:block;font-size:var(--t-label);font-weight:800;letter-spacing:.14em;
  color:var(--lime-diep);margin-bottom:10px;
}
.blok-tekst h2{font-size:clamp(24px,3vw,32px);margin-bottom:14px}
.blok-tekst p{color:var(--zacht);font-size:var(--t-lead);margin:0;max-width:46ch}
.blok-tekst p+p{margin-top:14px}
.blok-lijsten{display:grid;gap:26px}
.blok-lijsten h3{
  font-size:var(--t-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);margin:0 0 12px;
}
.vinklijst,.puntlijst{list-style:none;margin:0;padding:0}
.vinklijst li{position:relative;padding-left:30px;margin-bottom:11px;font-size:var(--t-body);line-height:1.5}
.vinklijst li::before{
  content:'';position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;
  background:var(--lime);
}
.vinklijst li::after{
  content:'';position:absolute;left:5px;top:9px;width:6px;height:3px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}
.puntlijst li{
  position:relative;padding-left:30px;margin-bottom:11px;font-size:var(--t-body);line-height:1.5;
  color:var(--zacht);
}
.puntlijst li::before{
  content:'';position:absolute;left:2px;top:12px;width:12px;height:2px;border-radius:2px;
  background:var(--bleek-diep);
}
@media(max-width:900px){.blok-raster{grid-template-columns:1fr;gap:30px}}
/* De diepe variant houdt zijn ruimte onderin, anders schuift het overlappende
   paneel op de contactpagina over de lead heen (gezien op 9 september 2026). */
@media(max-width:640px){
  .paginakop{padding:130px 0 56px}
  .paginakop-diep{padding-bottom:140px}
  .blok{padding:52px 0}
}

/* ---------- Hello Mindy ---------- */
.mindy-raster{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.mindy-lijst{list-style:none;margin:26px 0 0;padding:0}
.mindy-lijst li{
  position:relative;padding:0 0 0 32px;margin-bottom:14px;
  color:rgba(255,255,255,.86);font-size:var(--t-body);
}
.mindy-lijst li::before{
  content:'';position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--lime);
}
.mindy-lijst li::after{
  content:'';position:absolute;left:5px;top:11px;width:6px;height:3px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}
/* Onder elkaar: de tekstkolom lost op in het raster (display:contents), zodat de
   doorkliklink ónder de lijst komt in plaats van ertussen, en de lijst dichter
   op de lead staat. */
@media(max-width:900px){
  .mindy-raster{grid-template-columns:1fr;gap:20px}
  .mindy-raster>div:first-child{display:contents}
  .mindy-raster .lead{margin-bottom:0}
  .mindy-raster .sectielink{order:1;margin:4px 0 0}
  .mindy-lijst{margin-top:4px}
}

/* Twee hulpklassen, zodat er nergens een style-attribuut in de HTML hoeft. */
.op-bleek{background:var(--bleek)}
.ruimte-boven{margin-top:26px}
.ruimte-boven-klein{margin:16px 0 0}

/* ---------- Hello Mindy: één rustige strook, geen eigen wereld ---------- */
.mindy-strook{padding:64px 0;background:var(--lime-tint);border-top:var(--rand);border-bottom:var(--rand)}
.mindy-strook-binnen{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:center}
.mindy-strook h2{margin-bottom:12px}
.mindy-strook p{color:var(--zacht);max-width:56ch}
.mindy-strook .klein{margin:0}
.mindy-tekst .knop{margin-top:26px}
.mindy-tekst .knop svg{width:14px;height:14px}
/* Het portret staat in een witte lijst, zodat de foto op de lime tint een eigen
   vlak krijgt in plaats van er los in te zweven. */
.mindy-portret{margin:0;background:#fff;border:1px solid rgba(1,84,78,.14);border-radius:20px;
  padding:12px 12px 4px;box-shadow:var(--schaduw-s);justify-self:end;max-width:340px}
.mindy-portret img{display:block;width:100%;height:auto;border-radius:12px}
.mindy-portret figcaption{
  font-size:var(--t-klein);line-height:1.45;color:var(--zacht);padding:14px 6px 12px;
}
@media(max-width:820px){
  .mindy-strook-binnen{grid-template-columns:1fr;gap:32px}
  .mindy-portret{justify-self:start;max-width:300px}
}

/* ---------- team op de over-onspagina ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.lid{text-align:left}
.lid-foto{
  width:120px;height:120px;border-radius:50%;object-fit:cover;display:block;
  margin:0 0 18px;background:var(--bleek);
}
.lid h3{margin:0 0 2px;color:var(--teal)}
/* Geen hoofdletters hier: een functietitel als "Oprichter, strategie en
   marketing" is 33 tekens, en dat lees je in kapitaal niet meer, dan ontcijfer
   je het. Bovendien heeft "Head of Sales & Growth" zijn eigen hoofdletters. */
.lid-rol{
  font-size:var(--t-klein);font-weight:700;color:var(--lime-diep);margin:0 0 12px;
}
.lid p{color:var(--zacht);font-size:var(--t-klein);line-height:1.55}
@media(max-width:940px){.team{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:520px){.team{grid-template-columns:1fr}}

/* ---------- cases ---------- */
.case-kop{margin-bottom:26px}
.case-kop h2{margin-bottom:6px}
.case-cijfers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 34px;
  padding:22px 0;border-top:var(--rand);border-bottom:var(--rand);
}
.case-cijfers b{
  display:block;font-size:var(--t-cijfer);font-weight:800;color:var(--teal);
  letter-spacing:-.025em;line-height:1.02;font-variation-settings:'wdth' var(--w-cijfer);
  font-variant-numeric:tabular-nums;
}
.case-cijfers span{display:block;font-size:var(--t-klein);color:var(--zacht);margin-top:6px}
.case-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.case-raster h3{
  font-size:var(--t-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);margin:0 0 10px;font-variation-settings:'wdth' var(--w-label);
}
.case-raster p{margin:0;color:var(--zacht)}
.case-citaat{
  margin:34px 0 0;padding:26px 30px;background:var(--bleek);border-radius:20px;
  font-size:var(--t-lead);line-height:1.5;color:var(--inkt);
}
.case-citaat cite{
  display:block;margin-top:14px;font-style:normal;font-size:var(--t-klein);
  font-weight:700;color:var(--teal);
}
@media(max-width:900px){
  .case-cijfers{grid-template-columns:repeat(2,1fr)}
  .case-raster{grid-template-columns:1fr;gap:22px}
}

/* ---------- melding ---------- */
.melding{
  background:var(--lime-tint);border:1px solid rgba(138,170,78,.45);
  padding:20px 24px;border-radius:14px;color:var(--inkt);margin:0 0 30px;
}

/* ---------- werkwijze ---------- */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:stap}
.stap{position:relative;padding-top:30px}
.stap::before{
  counter-increment:stap;content:counter(stap);
  position:absolute;top:0;left:0;font-size:var(--t-klein);font-weight:800;color:var(--teal);
  background:var(--lime);width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.stap::after{
  content:'';position:absolute;top:13px;left:34px;right:-24px;height:1px;
  background:rgba(1,84,78,.18);
}
.stap:last-child::after{display:none}
.stap h3{font-size:var(--t-lead);color:var(--teal);margin-bottom:6px}
.stap p{font-size:var(--t-body);color:var(--zacht);margin:0}
@media(max-width:900px){
  .stappen{grid-template-columns:repeat(2,1fr);gap:28px}
  .stap::after{display:none}
}
@media(max-width:520px){.stappen{grid-template-columns:1fr}}

/* ---------- citaten ---------- */
.citaat{
  background:#fff;border:var(--rand);border-radius:20px;padding:30px;
  box-shadow:var(--schaduw-m);display:flex;flex-direction:column;
}
.citaat blockquote{
  margin:0 0 20px;font-size:var(--t-lead);line-height:1.55;color:var(--inkt);
  position:relative;padding-top:34px;
}
.citaat blockquote::before{
  content:'\201C';position:absolute;top:-6px;left:-2px;font-size:64px;line-height:1;
  color:var(--lime);font-weight:800;
}
.citaat footer{margin-top:auto;border-top:var(--rand);padding-top:16px}
.citaat b{display:block;font-size:var(--t-body);font-weight:700;color:var(--teal)}
.citaat span{display:block;font-size:var(--t-klein);color:var(--zacht)}
.citaat em{display:block;font-style:normal;font-size:var(--t-klein);color:var(--zacht);margin-top:8px}

/* ---------- workshops ---------- */
.workshop{
  background:var(--bleek);border-radius:20px;padding:32px;
  display:flex;flex-direction:column;
}
.workshop:last-child{background:var(--lime-tint)}
.workshop h3{color:var(--teal);margin-bottom:10px;font-size:var(--t-h3)}
.workshop p{color:var(--zacht);font-size:var(--t-body)}
.workshop .knop{margin-top:auto;align-self:flex-start}

/* ---------- afsluiter ---------- */
.afsluiter-raster{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.afsluiter-lijst{list-style:none;margin:0;padding:0}
.afsluiter-lijst li{
  position:relative;padding:0 0 0 26px;margin-bottom:12px;
  color:rgba(255,255,255,.86);font-size:var(--t-body);
}
.afsluiter-lijst li::before{
  content:'';position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%;
  background:var(--lime);
}
.afsluiter-knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
@media(max-width:860px){.afsluiter-raster{grid-template-columns:1fr;gap:30px}}

/* ---------- voettekst ---------- */
.voet{background:var(--teal-dieper);color:rgba(255,255,255,.72);padding:64px 0 28px}
.voet-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:36px}
.voet img{height:44px;width:auto;margin-bottom:20px}
.voet h3{
  margin:0 0 14px;font-size:var(--t-label);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime);
}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:9px;font-size:var(--t-body)}
.voet a{text-decoration:none}
.voet a:hover{color:#fff;text-decoration:underline}
.voet p{font-size:var(--t-body);max-width:34ch}
.voet-slot{
  margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--t-klein);color:rgba(255,255,255,.55);
}
@media(max-width:900px){.voet-raster{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.voet-raster{grid-template-columns:1fr}}

/* ---------- de chat ---------- */
/* Overgenomen van hellomindy.ai en omgezet naar de tokens van deze site. */
.chat-knop{
  position:fixed;right:26px;bottom:26px;z-index:70;height:56px;border:none;cursor:pointer;
  border-radius:100px;background:var(--lime);box-shadow:var(--schaduw-l);
  display:flex;align-items:center;gap:10px;padding:0 22px 0 8px;
  transition:background .15s,transform .15s;
}
.chat-knop .lbl{font-size:var(--t-klein);font-weight:700;color:var(--teal)}
.chat-knop:hover{background:#bcd98a;transform:translateY(-2px)}
.chat-knop.open{width:56px;padding:0;justify-content:center;background:var(--teal)}
.chat-knop.open .lbl{display:none}
.chat-gezicht{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.chat-paneel .chat-gezicht{width:36px;height:36px;box-shadow:none}
/* Het paneel start dicht. Dat stond eerst als style="display:none" in de HTML,
   maar dan heb je 'unsafe-inline' in de CSP nodig. Nu doet de klasse .open het
   werk: het script zet die erop en eraf. Zet dit nooit terug naar
   style.display, want de knop leest de stand uit de klasse. */
.chat-paneel{
  position:fixed;right:26px;bottom:94px;z-index:70;width:372px;background:#fff;
  border-radius:20px;overflow:hidden;box-shadow:var(--schaduw-l);border:var(--rand);
  display:none;flex-direction:column;
}
.chat-paneel.open{display:flex}
.chat-paneel .kop{background:var(--teal);padding:15px 16px;display:flex;align-items:center;gap:11px}
.chat-paneel .kop>div{flex:1}
.chat-paneel .nm{color:#fff;font-weight:600;font-size:var(--t-klein)}
.chat-paneel .st{color:rgba(255,255,255,.72);font-size:var(--t-label);display:flex;
  align-items:center;gap:6px;margin-top:2px}
.chat-paneel .stip{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.chat-paneel .kop button{background:transparent;border:none;cursor:pointer;padding:4px;display:flex}
.chat-berichten{
  padding:16px;display:flex;flex-direction:column;gap:10px;height:290px;overflow-y:auto;
  background:var(--canvas);
}
.msg{max-width:84%;font-size:var(--t-klein);line-height:1.5;padding:10px 13px}
.msg.in{align-self:flex-start;background:#fff;color:var(--teal-diep);border:var(--rand);
  border-radius:2px 14px 14px 14px}
.msg.uit{align-self:flex-end;background:var(--teal);color:#fff;border-radius:14px 2px 14px 14px}
.msg a{color:var(--teal);font-weight:700}
.msg.tikt span{display:inline-block;font-size:20px;line-height:1;color:var(--teal);
  animation:tikken 1.2s infinite}
.msg.tikt span:nth-child(2){animation-delay:.2s}
.msg.tikt span:nth-child(3){animation-delay:.4s}
@keyframes tikken{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chat-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px;background:var(--canvas)}
.chip{
  background:#fff;border:var(--rand);color:var(--teal);font:inherit;font-size:var(--t-label);
  font-weight:600;padding:7px 13px;border-radius:100px;cursor:pointer;transition:background .15s;
}
.chip:hover{background:var(--bleek)}
.chat-voet{border-top:var(--rand);padding:12px;display:flex;gap:8px;background:#fff}
.chat-voet input{
  flex:1;border:1px solid rgba(0,0,0,.2);border-radius:100px;padding:10px 15px;
  font:inherit;font-size:var(--t-klein);outline:none;color:var(--inkt);
}
.chat-voet input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(1,84,78,.14)}
.chat-voet button{
  width:40px;height:40px;border-radius:50%;background:var(--lime);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:none;transition:background .15s;
}
.chat-voet button:hover{background:#bcd98a}
/* Op een telefoon en op een tablet vult het gesprek het hele scherm. Reden: een
   invoerveld kleiner dan 16px laat iOS bij het typen inzoomen, en dan staat de
   pagina eronder scheef en is er niets meer bedienbaar. Volledig beeld plus een
   veld van 16px haalt dat weg. Sluiten kan dan alleen nog met het kruisje in de
   kop; de zwevende knop verdwijnt zolang het gesprek openstaat.
   De tweede voorwaarde vangt tablets die breder zijn dan 900px maar wel met een
   vinger bediend worden, zoals een iPad in liggende stand. */
@media(max-width:900px),(pointer:coarse) and (max-width:1200px){
  .chat-paneel{left:0;right:0;bottom:auto;top:var(--chat-top,0px);width:100%;max-height:none;
    border-radius:0;border:none;z-index:9999;
    height:100vh;height:100dvh;height:var(--chat-hoog,100dvh)}
  .chat-berichten{height:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
  .chat-voet input{font-size:16px}  /* onder de 16px zoomt iOS bij het typen in */
  .chat-knop.open{display:none}
  /* De pagina eronder mag niet meescrollen terwijl het gesprek openstaat. */
  body.chat-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  .chat-knop{transition:none}
  .msg.tikt span{animation:none}
}

/* ---------- juridische pagina's ----------
   Voorwaarden en privacyverklaring. Iets breder dan .smal, want er staan
   tabellen in; leden krijgen het nummer in een eigen kolom zodat de tekst
   recht onder elkaar begint. Tabellen scrollen in hun eigen houder, de pagina
   zelf nooit opzij. */
.juridisch{max-width:780px}
.juridisch p{line-height:1.65}
.juridisch .versie{
  font-size:var(--t-klein);color:var(--zacht);margin:-6px 0 28px;
  font-variation-settings:'wdth' var(--w-label);letter-spacing:.02em;
}
.juridisch .jur-inhoud{
  background:#fff;border:var(--rand);border-radius:14px;padding:22px 26px;margin:0 0 40px;
}
.juridisch .jur-inhoud p{margin:0 0 10px}
.juridisch .jur-inhoud ol{margin:0;padding-left:22px}
.juridisch .jur-inhoud li{margin-bottom:8px;line-height:1.55}
.juridisch .jur-inhoud li:last-child{margin-bottom:0}
.juridisch .jur-inhoud a{color:var(--teal)}
.juridisch .deel-label{
  display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-variation-settings:'wdth' var(--w-label);
  color:var(--lime-diep);margin:56px 0 10px;padding-top:36px;border-top:var(--rand);
}
.juridisch .deel-label:first-of-type{margin-top:0;padding-top:0;border-top:0}
.juridisch .deel-titel{margin-bottom:16px}
.juridisch .deel-titel + .lead{margin-bottom:12px}
.juridisch .jur-blok{padding:30px 0 6px;border-top:var(--rand)}
.juridisch .jur-blok:first-of-type,.juridisch .jur-eerste{border-top:0;padding-top:0}
.juridisch .jur-blok h2{
  font-size:var(--t-h3);font-weight:700;letter-spacing:-.012em;line-height:1.3;
  font-variation-settings:'wdth' 100;margin:0 0 16px;
}
.juridisch .jur-blok h3{font-size:17px;font-weight:700;margin:22px 0 8px;color:var(--teal)}
.juridisch .jur-blok h3:first-child{margin-top:0}
.juridisch .lid{display:grid;grid-template-columns:3.4em 1fr;column-gap:4px}
.juridisch .lid-nr{color:var(--zacht);font-variant-numeric:tabular-nums}
.juridisch .puntlijst{margin:0 0 18px}
.juridisch .puntlijst li{color:var(--inkt)}
.juridisch .melding{margin:0 0 22px}
.juridisch .melding strong{display:block;color:var(--teal);margin-bottom:6px}
.juridisch .melding p{margin:0}
.juridisch .bedrijfsblok{
  background:#fff;border:var(--rand);border-radius:14px;padding:18px 22px;
  line-height:1.75;margin:4px 0 18px;
}
.juridisch .bedrijfsblok a{color:var(--teal)}
.juridisch .tabel-wrap{overflow-x:auto;margin:0 0 20px;border:var(--rand);border-radius:12px;background:#fff}
.juridisch .jur-tabel{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.juridisch .jur-tabel th{
  text-align:left;font-size:var(--t-label);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-variation-settings:'wdth' var(--w-label);
  color:var(--teal);background:var(--teal-tint);padding:12px 16px;
}
.juridisch .jur-tabel td{padding:12px 16px;border-top:var(--rand);vertical-align:top}
.juridisch .jur-tabel td:first-child{width:46%}
.juridisch .scheiding{border:0;border-top:var(--rand);margin:32px 0}
@media(max-width:640px){
  .juridisch .lid{grid-template-columns:3em 1fr}
  .juridisch .jur-tabel{font-size:14px}
  .juridisch .jur-tabel th,.juridisch .jur-tabel td{padding:10px 12px}
}

/* ---------- kleine schermen ---------- */
@media(max-width:640px){
  section{padding:64px 0}
  .hero{padding:130px 0 76px}
  .bewijsbalk-kaart{padding:26px 22px 20px}
}

/* Onthullen bij scrollen. Alleen actief als beweging.js de klasse js-anim zet,
   zodat de pagina zichtbaar blijft als het script niet laadt. */
.js-anim .onthul{opacity:0;transform:translateY(14px)}
.js-anim .onthul.zichtbaar{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.16,.84,.44,1),transform .55s cubic-bezier(.16,.84,.44,1)}
/* Kaarten en tegels komen iets verder van onderen en na elkaar in beeld. Zes
   kaarten die tegelijk verschijnen lees je als een sprong; na elkaar lees je
   het als beweging. De vertraging zet beweging.js per kaart. */
.js-anim .kaart.onthul,
.js-anim .stap.onthul,
.js-anim .lid.onthul{transform:translateY(26px)}
@media(prefers-reduced-motion:reduce){
  .js-anim .onthul{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}