/* home-v5-r7 · alle stijl onder de hero (gebouwd door _bouw.py, niet met de hand wijzigen) */
/* home-v3 · beweging niveau A (uit keuze-r2/varianten/k5-lagen/beweging-a.css), met de aanpassingen van Ilyass:
   geen rand om de logo's, logo-rij stopt niet bij aanwijzen, geen oplopende tellers (cijfers slaan in).
   Alleen transform en opacity. Bij "minder beweging" in het systeem doet deze laag niets.
   avoid-ai-design-ignore-file: C1, C2 · huiskleuren */
#s-werkwijze .dw-balk{position:relative}
.bw-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;outline:3px solid var(--blauw);opacity:0}
.bw-vonk{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--blauw);pointer-events:none;z-index:3}
.bw-vonk.bw-v2{background:var(--blauw-licht);width:8px;height:8px;margin:-4px 0 0 -4px}
#s-resultaten .ra-getal,#s-woord .kd-getal{position:relative;transform-origin:0 80%}
#s-pakketten .r2a-garantie{transform-origin:50% 50%}
#s-pakketten .r2a-g-ic{position:relative}
/* wat in- of uitschuift mag nooit een zijwaartse scroll geven */
.pagina>.sectie{overflow-x:clip}


/* 01 · direct onder de hero: één rij klantlogo's die heel langzaam van rechts naar links schuift (keuzeronde 1, optie A).
   Ilyass 19-10: de logo's in hun eigen kleuren, niet grijs. Elk logo staat in een even groot vlak, zodat de rij rustig blijft:
   een wit vlak voor logo's in kleur, een vlak in de merkkleur voor logo's die zelf wit zijn (PurePanelen, Nefis Kebap, HBC, AI Building).
   avoid-ai-design-ignore-file: C1, C2, T1 · T1/tickerstrook: uitdrukkelijk gevraagd door Ilyass; C1/C2: huiskleuren.
   Alleen transform beweegt; stopt alleen buiten beeld (home-v3: niet meer bij aanwijzen). Geen rand om de logo's. */
#s-klanten{padding:clamp(44px,4.6vw,68px) 0 clamp(40px,4.4vw,64px);background:#fff;overflow:hidden}
#s-klanten .kl-kop{text-align:center}
#s-klanten .kl-t{font:700 clamp(24px,2.4vw,34px)/1.2 var(--f);color:var(--navy);letter-spacing:-.03em}
#s-klanten .kl-band{position:relative;margin-top:clamp(28px,3vw,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
#s-klanten .kl-spoor{display:flex;width:max-content;will-change:transform;animation:kl-schuif var(--kl-duur,90s) linear infinite}
/* home-v3 (Ilyass 19-10): de rij stopt niet als je er met de muis op staat; alleen buiten beeld staat hij stil */
#s-klanten.kl-stil .kl-spoor{animation-play-state:paused}
/* I-2 (rechter r5): de pauzeknop staat in elke sectie op dezelfde plek: rechtsonder binnen de inhoudsbreedte, 24 px onder het blok erboven */
@keyframes kl-schuif{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
#s-klanten .kl-rij{display:flex;align-items:center;gap:var(--kl-gap);padding-right:var(--kl-gap);list-style:none;flex:none;--kl-gap:clamp(8px,1vw,20px)}
#s-klanten .kl-m{--w:clamp(170px,12.4vw,200px);flex:none;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:var(--w);height:calc(var(--w)*.5);background:transparent}
#s-klanten .kl-m img{display:block;height:var(--h);width:auto;max-width:86%;object-fit:contain}
#s-klanten .kl-foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
#s-klanten .kl-hbc{--w:clamp(230px,16vw,250px)!important}
#s-klanten .kl-plaats{font:500 var(--fs-meta)/1 var(--f);letter-spacing:.01em;color:var(--inkt-2);white-space:nowrap}
#s-klanten .kl-uit{position:relative;margin-top:24px;text-align:center;font-size:var(--fs-klein);color:var(--inkt-2)}
#s-klanten .kl-uit .link{margin-left:4px;color:var(--navy);display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){
  #s-klanten{padding:32px 0 34px}
  #s-klanten .kl-m{--w:160px;gap:4px}
  #s-klanten .kl-t{font-size:22px}
  #s-klanten .kl-m img{height:calc(var(--h)*.76)}
  #s-klanten .kl-hbc{--w:220px!important}
  #s-klanten .kl-band{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
  #s-klanten .kl-uit{font-size:var(--fs-meta)}
  }
@media (prefers-reduced-motion:reduce){
  #s-klanten .kl-spoor{animation:none;width:auto}
  #s-klanten .kl-rij{flex-wrap:wrap;justify-content:center;row-gap:12px;padding:0 var(--pad)}
  #s-klanten .kl-band{-webkit-mask-image:none;mask-image:none}
}


/* home-v5 03 · Ilyass vroeg op de pagina = mix van keuze-r4 04-ilyass-B (kaart met profielfoto, naam, "App Ilyass") en -C (beelden van de set),
   met drie staande video's van hemzelf (9:16, Ilyass 19-10: geen liggende of vierkante uitsnede). Clips nagekeken op beeld:
   c02 (filmt in de meubelzaak), c06 (filmt met koptelefoon in de sportschool), c04 (regisseert buiten). c01 en c07 tonen hem
   maar kort of van achteren, c03 vooral van ver; daarom deze drie. Geen apparatuurlijst.
   avoid-ai-design-ignore-file: C1, C2 · huiskleuren */
#s-ilyass.sectie{padding:clamp(56px,6vw,104px) 0 16px}
/* home-v5-r3 (rechter C-3): geen lavendel kaart meer; profiel links, drie staande video's rechts op wit (±55% van de breedte) */
#s-ilyass .il-kaart{position:relative;display:grid;grid-template-columns:minmax(0,33fr) minmax(0,67fr);align-items:stretch;gap:clamp(28px,3vw,56px)}
/* Ilyass 20-10: bovenkant foto = bovenkant video's, onderkant tekst = onderkant video's */
#s-ilyass .il-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:20px;padding:0}
#s-ilyass .il-tekst{display:flex;flex-direction:column;align-items:flex-start}
#s-ilyass .il-klein{margin-bottom:-.3em}
#s-ilyass .il-foto{width:clamp(132px,10vw,160px);height:clamp(132px,10vw,160px);border-radius:var(--r-groot);object-fit:cover}
#s-ilyass .il-t{margin-top:0;font:700 var(--fs-h3)/1.1 var(--f);letter-spacing:-.04em;color:var(--navy)}
#s-ilyass .il-rol{margin-top:10px;font-size:var(--fs-klein);font-weight:600;color:var(--blauw-2)}
#s-ilyass .il-zin{margin-top:22px;font-size:var(--fs-tekst);line-height:1.6;color:var(--inkt-2);max-width:28em;text-wrap:pretty}
#s-ilyass .il-knop{margin-top:32px}
#s-ilyass .il-klein{margin-top:14px;font-size:var(--fs-meta);color:var(--inkt-2)}
/* drie staande video's, altijd 9:16 */
#s-ilyass .il-band{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.1vw,16px);max-width:min(100%,calc((100svh - 120px) * 9 / 16 * 3 + 32px));justify-self:end;align-self:center;width:100%}
/* Ilyass 20-10: de schaduw viel achter de volgende sectie en werd afgesneden; deze sectie ligt er nu boven */
#s-ilyass{position:relative;z-index:2}
#s-ilyass .il-tegel{position:relative;aspect-ratio:9/16;border-radius:var(--r-groot);overflow:hidden;background:#15173A;box-shadow:var(--sch-tel)}
#s-ilyass .il-tegel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  #s-ilyass .il-kaart{grid-template-columns:1fr}
  #s-ilyass .il-band{max-width:none}
}
@media (max-width:760px){
  #s-ilyass{padding:44px 0 56px}
  #s-ilyass .il-info{padding:4px 4px 0}
  #s-ilyass .il-foto{width:112px;height:112px;border-radius:var(--r-groot)}
  #s-ilyass .il-t{margin-top:14px}
  #s-ilyass .il-knop{width:100%}
  #s-ilyass .il-band{gap:8px}
  #s-ilyass .il-tegel{border-radius:var(--r-klein)}
  }


/* Keuze 02 A · verfijnde versie van D (goedgekeurd 19-10): compacter (minder scrollen per stap), een voortgangslijn langs de stappen
   die meeloopt met de video, rustiger grijs voor de stappen die nog komen. Origineel: sites-v1/D/secties/04-werkwijze.html.
   D · 04 werkwijze: de vraag die Ilyass zelf wilde ("Hoe krijg ik meer klanten voor mijn zaak?") als zoekbalk,
   daaronder zes stappen die gewoon scrollen, met één telefoon die naast de stappen blijft staan (position: sticky, niets vastgezet,
   het scrollen gaat altijd door). Verzorgd moment: bij elke stap swipet de video omhoog naar de volgende, zoals in een feed.
   avoid-ai-design-ignore-file: C1, C2 */
#s-werkwijze{padding:0;height:calc(100svh + 7 * 360px);--th:min(500px,calc(100svh - 360px));--tw:calc(var(--th)/1.7258);background:linear-gradient(180deg,#fff 0,#F5F6FD 260px,#F5F6FD calc(100% - 200px),#fff 100%)}
/* Ilyass 20-10: de pagina blijft staan terwijl je scrolt; het scrollen loopt de stappen door tot Klanten, dan pas verder */
#s-werkwijze.sectie{padding:0}
/* Ilyass 20-10: de vastgezette laag precies in het midden van het scherm onder de topbalk */
#s-werkwijze .dw-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav-h,96px);padding-bottom:0;overflow:hidden}
#s-werkwijze .dw-kop{text-align:center;margin-bottom:clamp(18px,3.4svh,40px)}
/* de zoekbalk (h2) */
#s-werkwijze .dw-vraag{display:flex;justify-content:center}
#s-werkwijze .dw-balk{display:inline-flex;align-items:center;gap:clamp(12px,1.2vw,18px);max-width:100%;padding:clamp(12px,1.1vw,16px) clamp(12px,1.1vw,16px) clamp(12px,1.1vw,16px) clamp(20px,1.8vw,28px);border-radius:var(--r-rond);background:#fff;
  border:1.5px solid #E1E3F2;box-shadow:0 18px 50px -18px rgba(32,35,79,.28),0 2px 6px rgba(32,35,79,.06);min-width:min(100%,760px)}
#s-werkwijze .dw-ic{flex:none;height:clamp(24px,2vw,32px);width:auto;fill:var(--blauw)}
/* de zoekbalk is een invoerveld: tekst op h3-maat, zodat de vraag op één regel past */
#s-werkwijze .dw-typ{font-weight:600;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.03em;color:var(--navy);text-align:left;min-width:0;flex:1}
#s-werkwijze .dw-typ .dw-l{visibility:hidden}
#s-werkwijze .dw-typ .dw-l.dw-z{visibility:visible}
#s-werkwijze .dw-caret{display:inline-block;width:2px;height:1.05em;margin:0 1px -.16em;background:var(--blauw);animation:dw-knipper 1s steps(1) infinite}
@keyframes dw-knipper{50%{opacity:0}}
#s-werkwijze .dw-zoek{flex:none;width:clamp(42px,3.6vw,56px);height:clamp(42px,3.6vw,56px);border-radius:50%;display:grid;place-items:center;background:var(--blauw);color:#fff;transition:transform .35s var(--ease)}
#s-werkwijze .dw-zoek svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
#s-werkwijze .dw-zoek.dw-druk{transform:scale(.88)}
#s-werkwijze .dw-kop .lead{margin:20px auto 0;max-width:30em}

/* telefoon links (sticky), stappen rechts */
#s-werkwijze .dw-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start}
#s-werkwijze .dw-links{position:relative;height:100%}
#s-werkwijze .dw-plak{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;margin-left:auto;width:max-content}
#s-werkwijze .dw-plak .tel{width:var(--tw);transition:transform .7s var(--ease)}

#s-werkwijze .dw-scherm{isolation:isolate}
#s-werkwijze .dw-clip{position:absolute;inset:0;will-change:transform}
#s-werkwijze .dw-clip:not(.dw-aan){visibility:hidden}
#s-werkwijze .dw-clip.dw-zien{visibility:visible}
#s-werkwijze .dw-clip .chip{bottom:5%;padding:8px 12px}
#s-werkwijze .dw-clip .chip small{font-size:var(--fs-meta)}
#s-werkwijze .dw-clip .chip b{font-size:var(--fs-klein)}
#s-werkwijze .dw-plak:hover .dw-pauze,#s-werkwijze .dw-mini{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:calc(var(--tw) + 200px)}
#s-werkwijze .dw-mini button{height:32px;padding:0 10px;border-radius:var(--r-rond);font-size:var(--fs-meta);font-weight:500;color:var(--inkt-2);transition:background-color .25s,color .25s}
#s-werkwijze .dw-mini button:hover{background:rgba(88,99,248,.1);color:var(--navy)}
#s-werkwijze .dw-mini button[aria-current="step"]{background:var(--navy);color:#fff}

#s-werkwijze .dw-stappen{list-style:none;max-width:780px;position:relative;padding-left:44px;padding-top:clamp(8px,2vh,24px)}
#s-werkwijze .dw-rail{position:absolute;left:9px;top:clamp(46px,13svh,128px);bottom:clamp(120px,24svh,220px);width:2px;border-radius:2px;background:#E3E5F4;overflow:hidden}
#s-werkwijze .dw-vul{position:absolute;inset:0;background:var(--blauw);transform-origin:50% 0;transform:scaleY(0);transition:transform .7s var(--ease)}
#s-werkwijze .dw-h3{position:relative}
#s-werkwijze .dw-h3::before{content:"";position:absolute;left:-44px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:#fff;border:2px solid #C4C8E6;transition:border-width .3s,border-color .3s}
#s-werkwijze .dw-klaar .dw-h3::before{border:6px solid var(--blauw)}
#s-werkwijze .dw-actief .dw-h3::before{border:6px solid var(--blauw);outline:6px solid rgba(88,99,248,.16)}
/* home-v5-r3 (rechter r2, werkwijze halveren): elke stap kop + één zin, dicht op elkaar; het scrollen loopt gewoon door */
#s-werkwijze .dw-stap{display:flex;flex-direction:column;padding:clamp(6px,1.1svh,12px) 0;transition:transform .5s var(--ease)}
#s-werkwijze .dw-actief{transform:translateX(10px)}
#s-werkwijze .dw-klein{display:none}
#s-werkwijze .dw-h3{font-weight:700;font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.045em;color:#A3A6BF;transition:color .45s,font-size .45s}
#s-werkwijze .dw-klaar .dw-h3{color:#6B6E88}
#s-werkwijze .dw-zin{margin-top:0;max-height:0;opacity:0;transform:translateY(8px);overflow:hidden;font-size:var(--fs-tekst);line-height:1.55;color:var(--inkt-2);transition:max-height .5s var(--ease),opacity .45s,transform .5s var(--ease),margin .5s var(--ease);text-wrap:pretty}
#s-werkwijze .dw-actief .dw-zin{max-height:6em;opacity:1;transform:none;margin-top:8px}
#s-werkwijze .dw-actief .dw-h3,#s-werkwijze .dw-actief .dw-zin{color:var(--navy)}
/* home-v5: de "afzender" uit keuze-r4 04-ilyass-D: het Tuuned-icoon schuift langs de stappen mee naar de actieve stap (alleen transform) */
#s-werkwijze .dw-afz{position:absolute;left:-12px;top:0;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;
  ;transition:transform .6s var(--ease);will-change:transform;pointer-events:none}
#s-werkwijze .dw-afz svg{width:21px;height:auto;fill:var(--blauw)}
#s-werkwijze .dw-stap:not(.dw-actief) .dw-acties{display:none!important}
#s-werkwijze .dw-acties{margin-top:18px!important;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}

@media (max-width:1100px) and (min-width:761px){
  #s-werkwijze{--th:min(480px,calc(100svh - 310px))}
}
@media (max-width:760px){
  #s-werkwijze{--th:min(calc(100svh - 480px),420px);--tw:calc(var(--th)/1.7258)}
  #s-werkwijze .dw-pin{padding-top:100px;justify-content:flex-start}
  #s-werkwijze .dw-stap:not(.dw-actief){display:none}
  #s-werkwijze .dw-rail,#s-werkwijze .dw-afz{display:none}
  #s-werkwijze .dw-stap{padding:10px 0 0}
  #s-werkwijze .dw-actief{transform:none}
  #s-werkwijze .dw-stap .dw-h3::before{display:none}
  #s-werkwijze .dw-balk{min-width:0}
  #s-werkwijze .dw-kop{text-align:left;margin-bottom:8px}
  #s-werkwijze .dw-vraag{justify-content:flex-start}
  #s-werkwijze .dw-balk{gap:10px;padding:10px 10px 10px 16px;width:100%}
  #s-werkwijze .dw-ic{height:22px}
  #s-werkwijze .dw-typ{font-size:var(--fs-tekst);flex:1}
  #s-werkwijze .dw-zoek{width:40px;height:40px}
  #s-werkwijze .dw-kop .lead{margin-left:0}
  #s-werkwijze .dw-grid{grid-template-columns:minmax(0,1fr);gap:0}
  /* rechter r3, O-04: één staande telefoon bovenaan (niets vastgezet), daaronder de stappenbalk en de stappen als kop + zin */
  #s-werkwijze .dw-links{display:block;height:auto}
  #s-werkwijze .dw-plak{position:static;margin:12px auto 0;width:auto;gap:10px}
  #s-werkwijze .dw-plak .tel{width:var(--tw)}
  #s-werkwijze .dw-klein{display:none}
  #s-werkwijze .dw-mini{display:flex;flex-wrap:nowrap;justify-content:flex-start;max-width:calc(100vw - 2*var(--pad));overflow-x:auto;scrollbar-width:none;gap:4px;padding:2px 0 4px}
  #s-werkwijze .dw-mini::-webkit-scrollbar{display:none}
  #s-werkwijze .dw-mini button{flex:none;height:44px;padding:0 14px}
  #s-werkwijze .dw-clip .chip{left:5%;right:5%;bottom:3.5%}
  #s-werkwijze .dw-clip .chip b{white-space:normal}
    #s-werkwijze .dw-stappen{padding:0;text-align:center}
  #s-werkwijze .dw-rail{left:6px;top:46px;bottom:150px}
  #s-werkwijze .dw-h3::before{left:-28px;width:14px;height:14px;margin-top:-7px}
  #s-werkwijze .dw-klaar .dw-h3::before{border-width:4px}
  #s-werkwijze .dw-actief .dw-h3::before{border-width:4px;outline-width:4px}
  #s-werkwijze .dw-h3{font-size:var(--fs-h3)}
  #s-werkwijze .dw-zin{font-size:var(--fs-klein)}
  #s-werkwijze .dw-actief .dw-zin{margin-top:6px}
  #s-werkwijze .dw-acties{flex-direction:column;align-items:center;gap:14px}
  #s-werkwijze .dw-afz{left:-9px;width:32px;height:32px}
  #s-werkwijze .dw-afz svg{width:15px}
}
@media (prefers-reduced-motion:reduce){
  #s-werkwijze .dw-caret{animation:none}
  #s-werkwijze .dw-stap,#s-werkwijze .dw-plak .tel{transition:none}
  #s-werkwijze .dw-h3,#s-werkwijze .dw-zin,#s-werkwijze .dw-vul,#s-werkwijze .dw-afz{transition:none}
}


/* Ilyass 20-10: de "Ook: HBC…"-regel is weg; een knop naar de resultatenpagina met al het werk */
#s-resultaten .ra-acties{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center} /* zelfde opbouw als de hero: WhatsApp-knop + link met streep */
/* 03 A · resultaten zoals C (goedgekeurd 19-10): per klant links naam, views en aantal video's, rechts drie video's ernaast.
   Zonder chat-bubbels en zonder "geen beloftes"-zin. Twee rijen passen samen in een laptopscherm (telefoonmaat rekent mee met de schermhoogte).
   avoid-ai-design-ignore-file: C1, C2, L4 · huiskleuren; L4: echte, bevestigde cijfers die Ilyass groot wil zien. */
#s-resultaten{padding:clamp(96px,12vh,160px) 0 var(--ritme);--th:clamp(320px,calc(100svh - 340px),450px);--tw:calc(var(--th)/1.7258)}
#s-resultaten .ra-t{margin-bottom:4px}
#s-resultaten .ra-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-content:space-between;gap:clamp(24px,3vw,56px);margin-top:clamp(20px,2.2vw,32px);padding-top:clamp(20px,2.2vw,32px);border-top:1px solid #ECEEF7}
#s-resultaten .ra-t+.ra-rij{border-top:0;padding-top:0}
#s-resultaten .ra-tekst{min-width:0}
#s-resultaten .ra-klant{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
#s-resultaten .ra-logo{display:inline-flex;align-items:center;height:40px}
#s-resultaten .ra-logo img{height:40px;width:auto;filter:brightness(0)}
#s-resultaten .ra-logo-breed img{height:20px}
#s-resultaten .ra-w{font:700 var(--fs-h3)/1 var(--f);letter-spacing:-.035em;color:var(--navy)}
#s-resultaten .ra-soort{font-size:var(--fs-meta);color:var(--inkt-2)}
#s-resultaten .ra-getal{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:clamp(10px,1.2vw,18px);color:var(--navy)}
#s-resultaten .ra-m{display:block;overflow:hidden;padding:0 .18em .06em 0}
/* Ilyass 20-10: beide rijen exact gelijk; het cijfer schaalt mee zodat het altijd in zijn kolom past */
#s-resultaten .ra-g{display:block;font:800 min(var(--fs-display),5.6vw)/.92 var(--f);letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
#s-resultaten .ra-e{font:600 var(--fs-h3)/1.2 var(--f);letter-spacing:-.02em}
#s-resultaten .ra-uitleg{margin-top:12px;font-size:var(--fs-tekst);line-height:1.6;color:var(--inkt-2);max-width:26em;text-wrap:pretty}
#s-resultaten .ra-tels{display:flex;gap:clamp(14px,1.4vw,24px)}
#s-resultaten .ra-tels .tel{width:var(--tw)}
/* rechter r2 J-02: alle drie telefoons op één lijn */
/* I-2 (rechter r5): de pauzeknop staat in elke sectie op dezelfde plek: rechtsonder binnen de inhoudsbreedte, 24 px onder het blok erboven */

/* home-v3: de binnenkomst doet de bewegingslaag (kit/beweging.js): het cijfer slaat in, geen teller */

@media (max-width:1100px) and (min-width:761px){#s-resultaten{--th:340px}#s-resultaten .ra-rij{grid-template-columns:1fr}}
@media (max-width:760px){
  #s-resultaten{--tw:calc((100vw - 2*var(--pad) - 20px)/3);--th:calc(var(--tw)*1.7258)}
  #s-resultaten .ra-tekst{min-width:0}
  #s-resultaten .ra-rij{grid-template-columns:1fr;gap:18px;margin-top:28px;padding-top:28px}
  #s-resultaten .ra-logo{height:32px}
  #s-resultaten .ra-logo img{height:32px}
  #s-resultaten .ra-logo-breed img{height:17px}
  #s-resultaten .ra-g{font-size:var(--fs-display)}
  #s-resultaten .ra-tels{gap:10px}

      }


/* mix 5 · Sterrenbeeld (Ilyass 20-10, groot): schermvullend wit. De klantlogo's zweven verspreid over het hele vlak (zoals in B,
   met licht parallax bij scrollen), de cijfers vallen er als zware blokken doorheen (E) en laten de logo's in de buurt even meeveren;
   de klap van de blauwe "+" stuwt alle logo's naar buiten, daarna drijven ze terug naar hun plek en blijven zweven.
   Lagen per logo: li = plek, .m5-stoot = knal/meeveren, .m5-par = parallax, .m5-dob = het zweven van B. Alleen transform en opacity.
   avoid-ai-design-ignore-file: C1, C2, L4 · huiskleuren; L4: het grote getal is uitdrukkelijk gevraagd. */
#s-totaal{--m5-s:clamp(48px,4.1vw,72px)}
#s-totaal .m5-podium{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(600px,calc(100svh - 2 * var(--ritme)),860px);padding:clamp(40px,4vw,72px) 0;text-align:center;color:var(--navy);
  /* Ilyass 20-10: geen harde rand waar het vlak ophoudt; alles loopt zacht uit naar wit aan alle kanten */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%),linear-gradient(to right,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%),linear-gradient(to right,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);mask-composite:intersect}
#s-totaal .m5-gloed{position:absolute;left:50%;top:50%;width:min(1300px,96%);aspect-ratio:2.3;translate:-50% -50%;z-index:-2;border-radius:50%;
  background:radial-gradient(closest-side,#EEF0FF 0%,rgba(238,240,255,.6) 48%,rgba(238,240,255,0) 100%);pointer-events:none}
#s-totaal .m5-kern{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
#s-totaal .m5-boven{display:flex;justify-content:center}
/* Ilyass 20-10: geen pil met puntje (oogt als AI); gewone blauwe regel zoals in B */
#s-totaal .m5-pil{display:inline-block;font:600 var(--fs-klein)/1.4 var(--f);letter-spacing:.02em;color:var(--blauw)}
/* het getal: containerbreedte; 5.86 = breedte van "20.000.000+" in em (uit E). Op breed laat het ruimte voor de logo's ernaast */
#s-totaal .m5-t{position:relative;width:min(1040px,60vw);container-type:inline-size;margin-top:clamp(18px,2.2vw,32px)}
#s-totaal .m5-rij{display:flex;justify-content:center;font:800 calc(100cqw / 5.86)/1 var(--f);letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
#s-totaal .m5-c{display:block;transform-origin:50% 92%;will-change:transform}
#s-totaal .m5-plus{color:var(--navy);margin-right:-.045em} /* Ilyass 20-10: de + zwart */
#s-totaal .m5-vloer{display:block;width:min(1040px,60vw);height:3px;margin-top:clamp(6px,.8vw,12px);border-radius:3px;background:linear-gradient(90deg,rgba(11,12,30,0),#DADCEB 12%,#DADCEB 88%,rgba(11,12,30,0))}
#s-totaal .m5-stof{position:absolute;left:0;right:0;bottom:4%;height:0;pointer-events:none}
#s-totaal .m5-stof i{position:absolute;left:0;top:-8px;width:16px;height:16px;border-radius:50%;background:#D6D9EC;opacity:0}
#s-totaal .m5-vonken{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
#s-totaal .m5-vonken i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:3px;background:var(--blauw);opacity:0}
#s-totaal .m5-vonken i:nth-child(3n){background:var(--blauw-licht);width:12px;height:12px;border-radius:50%}
#s-totaal .m5-vonken i:nth-child(4n){background:var(--navy);width:9px;height:9px}
#s-totaal .m5-na{display:flex;flex-direction:column;align-items:center}
#s-totaal .m5-e{margin-top:clamp(18px,2.2vw,30px);font:600 var(--fs-h3)/1.25 var(--f);letter-spacing:-.02em}
#s-totaal .m5-onder{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:clamp(22px,2.4vw,34px)}
/* het sterrenbeeld */
#s-totaal .m5-logos,#s-totaal .m5-sterren{list-style:none;position:absolute;left:0;top:0;width:0;height:0;z-index:1;pointer-events:none}
#s-totaal .m5-logos li{position:absolute;left:0;top:0;width:var(--m5-s);height:var(--m5-s)}
#s-totaal .m5-logos li[data-k="l"]{width:calc(var(--m5-s) * 1.28);height:calc(var(--m5-s) * 1.28)}
#s-totaal .m5-logos li[data-k="s"]{width:calc(var(--m5-s) * .76);height:calc(var(--m5-s) * .76)}
#s-totaal .m5-logos span{display:block;width:100%;height:100%}
#s-totaal .m5-logos img{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 3px #fff,0 14px 26px -12px rgba(11,12,30,.45)}
#s-totaal .m5-logos li[data-k="s"] img{box-shadow:0 0 0 2px #fff,0 10px 20px -12px rgba(11,12,30,.4)}
#s-totaal .m5-sterren i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--blauw-licht);opacity:.55}
#s-totaal .m5-sterren i:nth-child(3n){width:4px;height:4px;left:-2px;top:-2px;background:var(--blauw);opacity:.4}
/* de klap */
#s-totaal .m5-flits{position:absolute;left:50%;top:50%;width:min(1400px,110%);aspect-ratio:1.9;translate:-50% -50%;z-index:-1;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,#fff 0%,#C9CDFF 22%,rgba(88,99,248,.42) 48%,rgba(88,99,248,0) 100%)}
#s-totaal .m5-ring{position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;border:3px solid var(--blauw);opacity:0;pointer-events:none;z-index:0}
@media (max-width:760px){
  #s-totaal{--m5-s:46px}
  #s-totaal .m5-podium{min-height:600px;padding:16px 0}
  #s-totaal .m5-t,#s-totaal .m5-vloer{width:100%}
  #s-totaal .m5-pil{font-size:14px}
  #s-totaal .m5-e{font-size:20px;max-width:14em}
  #s-totaal .m5-gloed{width:150%;aspect-ratio:1}
  #s-totaal .m5-ring{width:150px;height:150px;margin:-75px 0 0 -75px}
}
#s-totaal.m5-plak{height:calc(100svh + 75svh)}
#s-totaal.m5-plak .m5-podium{position:sticky;top:76px}



#s-woord [hidden]{display:none!important}
#s-woord .m3-chat{background-color:#EFEAE2;background-image:radial-gradient(rgba(84,101,111,.075) 1px,transparent 1.3px),radial-gradient(rgba(84,101,111,.05) 1px,transparent 1.3px);background-size:22px 22px,22px 22px;background-position:0 0,11px 11px}
#s-woord .m3-berichten{display:flex;flex-direction:column;gap:6px}
#s-woord .m3-dag{align-self:center;margin:2px 0;padding:5px 12px;border-radius:8px;background:#fff;font-size:12.5px;font-weight:500;line-height:1.3;color:#54656F;box-shadow:0 1px .5px rgba(11,20,26,.13)}
#s-woord .m3-later{background:#FFF3C4;color:#54501F}
#s-woord .m3-r{display:flex;align-items:flex-start;gap:8px}
#s-woord .m3-r.m3-uit{flex-direction:row-reverse}
#s-woord .m3-av{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 1px rgba(11,12,30,.08)}
#s-woord .m3-r.m3-vervolg .m3-av{visibility:hidden}
#s-woord .m3-bel{position:relative;max-width:min(82%,380px);padding:6px 9px 8px 10px;border-radius:9px;background:#fff;color:#111B21;font-size:14.2px;line-height:1.42;text-align:left;box-shadow:0 1px .5px rgba(11,20,26,.13);overflow-wrap:break-word}
#s-woord .m3-r:not(.m3-vervolg) .m3-bel{border-top-left-radius:0}
#s-woord .m3-r:not(.m3-vervolg) .m3-bel::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%)}
#s-woord .m3-uit .m3-bel{background:#D9FDD3}
#s-woord .m3-uit:not(.m3-vervolg) .m3-bel{border-top-left-radius:9px;border-top-right-radius:0}
#s-woord .m3-uit:not(.m3-vervolg) .m3-bel::before{left:auto;right:-8px;clip-path:polygon(0 0,100% 0,0 100%)}
#s-woord .m3-meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:9px 0 -5px 12px;font-size:11px;line-height:1;color:#667781;font-weight:400}
#s-woord .m3-meta svg{width:16px;height:11px;fill:none;stroke:#53BDEB;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#s-woord .m3-stip{display:flex;gap:4px;padding:13px 14px}
#s-woord .m3-stip i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:m3-stip 1s ease-in-out infinite}
#s-woord .m3-stip i:nth-child(2){animation-delay:.15s}
#s-woord .m3-stip i:nth-child(3){animation-delay:.3s}
@keyframes m3-stip{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
#s-woord .m3-slot .m3-bel{font-weight:500}
#s-woord .m3-quote{display:block;margin:2px -4px 6px -5px;padding:6px 10px 7px;border-left:4px solid #06CF9C;border-radius:6px;background:rgba(11,20,26,.05);font-weight:400}
#s-woord .m3-quote b{display:block;font-size:12.5px;font-weight:600;color:#06A57E;line-height:1.3}
#s-woord .m3-quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.38;color:#54656F}
#s-woord .m3-nieuw{animation:m3-in .45s var(--ease) both}
@keyframes m3-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
#s-woord .m3-typend{color:#1DAA61!important;font-weight:500}
/* het cijfer slaat in (geen teller) */
#s-woord .m3-res>*{transition:opacity .3s ease}
#s-woord .m3-res.m3-wacht>*{opacity:0}
#s-woord .m3-klap .m3-g{animation:m3-klap .62s cubic-bezier(.2,.9,.25,1) both}
#s-woord .m3-klap .m3-rl{animation:m3-op .5s .05s cubic-bezier(.22,1,.36,1) both}
#s-woord .m3-klap .m3-e,#s-woord .m3-klap .m3-d{animation:m3-op .5s .28s cubic-bezier(.22,1,.36,1) both}
@keyframes m3-klap{0%{opacity:0;transform:scale(1.8)}52%{opacity:1;transform:scale(.95)}74%{transform:scale(1.025)}100%{transform:none}}
@keyframes m3-op{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#s-woord .m3-rl{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 12px 24px -12px rgba(11,12,30,.45)}
#s-woord .m3-g{font-weight:800;line-height:.95;letter-spacing:-.055em;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
#s-woord .m3-e{margin-top:8px;font:600 var(--fs-h3)/1.2 var(--f);letter-spacing:-.02em;color:var(--navy)}
#s-woord .m3-d{margin-top:4px;font-size:var(--fs-tekst);line-height:1.5;color:var(--inkt-2)}
/* de kaart "+20 meer" (van W10) */
#s-woord .m3-meer{display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:var(--r-groot);background:var(--ijs)}
#s-woord .m3-mlogos{flex:none;display:flex;justify-content:center}
#s-woord .m3-mlogos img{width:46px;height:46px;border-radius:50%;object-fit:cover;margin-left:-9px;box-shadow:0 0 0 3px var(--ijs),0 8px 16px -10px rgba(11,12,30,.5)}
#s-woord .m3-mlogos img:first-child{margin-left:0}
#s-woord .m3-plus{font:800 clamp(34px,2.8vw,46px)/1 var(--f);letter-spacing:-.05em;color:var(--navy)}
#s-woord .m3-msub{margin-top:6px;font-size:var(--fs-klein);line-height:1.4;color:var(--inkt-2)}
/* klanttabjes: gedeelde basis (knoppen die er als knoppen uitzien) */
#s-woord .m3-tab{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;height:auto;min-width:0;margin:0;border:0;cursor:pointer;font:inherit;color:var(--navy);text-align:left;white-space:nowrap;touch-action:manipulation;
  transition:background-color .25s ease,box-shadow .25s ease,transform .3s var(--ease),color .25s ease}
#s-woord .m3-tab img{flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(11,12,30,.08)}
#s-woord .m3-tt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#s-woord .m3-tt b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
#s-woord .m3-tt small{font-size:12.5px;font-weight:500;color:var(--inkt-2)}
#s-woord .m3-tab:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px}
#s-woord .m3-balk{position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;overflow:hidden}
#s-woord .m3-balk::after{content:"";position:absolute;inset:0;background:var(--blauw);transform:scaleX(0);transform-origin:0 50%}
#s-woord.m3-loopt .m3-tab[aria-selected="true"] .m3-balk::after{animation:m3-voort var(--m3-duur,10s) linear forwards}
@keyframes m3-voort{to{transform:none}}
#s-woord .m3-hint{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-meta);font-weight:500;color:var(--inkt-2)}
#s-woord .m3-hint svg{width:18px;height:18px;fill:none;stroke:var(--blauw);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){#s-woord .m3-stip i,#s-woord .m3-nieuw,#s-woord .m3-klap .m3-g,#s-woord .m3-klap .m3-rl,#s-woord .m3-klap .m3-e,#s-woord .m3-klap .m3-d{animation:none}#s-woord .m3-balk{display:none}}

#s-woord .m3-tel{position:relative;width:var(--m3-tw,290px);aspect-ratio:9/19.2;padding:9px;border-radius:15%/7%;flex:none;
  background:linear-gradient(150deg,#2B2E4A 0%,#0E1024 34%,#07081A 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.2),0 46px 70px -44px rgba(14,18,70,.6),0 18px 30px -24px rgba(14,18,70,.38)}
#s-woord .m3-scherm{position:relative;height:100%;border-radius:12.5%/5.9%;overflow:hidden;display:flex;flex-direction:column;background:#EFEAE2;isolation:isolate}
#s-woord .m3-scherm::before{content:"";position:absolute;z-index:5;top:9px;left:50%;width:26%;height:21px;translate:-50% 0;border-radius:99px;background:#000}
#s-woord .m3-sb{flex:none;display:flex;align-items:center;justify-content:space-between;height:38px;padding:4px 18px 0 24px;background:#fff;color:#111B21;font-size:13.5px}
#s-woord .m3-sb b{font-weight:600}
#s-woord .m3-sbi{display:flex;align-items:center;gap:5px}
#s-woord .m3-sbi svg{height:11px;fill:currentColor}
#s-woord .m3-sbi svg:first-child{width:16px}#s-woord .m3-sbi svg:nth-child(2){width:15px}#s-woord .m3-sbi svg:last-child{width:24px}
#s-woord .m3-kop{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px 9px 6px;background:#fff;border-bottom:1px solid #ECEDEE}
#s-woord .m3-kop>svg{flex:none;width:22px;height:22px;fill:none;stroke:#111B21;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#s-woord .m3-kl{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover}
#s-woord .m3-kn{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1;text-align:left}
#s-woord .m3-kn b{font-size:15px;font-weight:600;color:#111B21;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-woord .m3-kn small{font-size:12px;color:#667781;white-space:nowrap}
#s-woord .m3-ik{display:flex;gap:14px;color:#111B21}
#s-woord .m3-ik svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-woord .m3-lijf{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:10px 9px}
#s-woord .m3-lijf .m3-bel{font-size:13.4px;line-height:1.4;max-width:82%}
#s-woord .m3-lijf .m3-av{width:24px;height:24px}
#s-woord .m3-lijf .m3-r{gap:6px}
#s-woord .m3-in-balk{flex:none;display:flex;align-items:center;gap:7px;padding:7px 8px 16px;background:#F6F5F3}
#s-woord .m3-in-balk>svg{flex:none;width:22px;height:22px;fill:none;stroke:#54656F;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#s-woord .m3-veld{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 10px 0 14px;border-radius:99px;background:#fff;color:#8696A0;font-size:14px;box-shadow:0 1px .5px rgba(11,20,26,.08)}
#s-woord .m3-veld svg{flex:none;width:19px;height:19px;fill:none;stroke:#54656F;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-woord .m3-mic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#1DAA61}
#s-woord .m3-mic svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#s-woord .m3-schok{animation:m3-schok .4s ease-out}
@keyframes m3-schok{0%,100%{transform:none}30%{transform:translateX(5px) rotate(.6deg)}60%{transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){#s-woord .m3-schok{animation:none}}

/* mix 3 · basis W2 (één telefoon in het midden). Klantkeuze: echte knoppen met logo + naam onder de telefoon,
   pijlen links en rechts van de telefoon, balk die meeloopt. "+20 meer" (W10) onder het cijfer.
   avoid-ai-design-ignore-file: C1, C2, L4 · huiskleuren; WhatsApp-kleuren alleen in de telefoon; echte cijfers. */
#s-woord{isolation:isolate}
#s-woord::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-40px;left:50%;translate:-50% 0;width:min(980px,96vw);height:min(560px,70vh);background:radial-gradient(closest-side,rgba(210,215,255,.55) 0%,rgba(220,224,255,.38) 40%,rgba(244,245,255,0) 100%)}
#s-woord .m3-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(28px,3.4vw,64px)}
#s-woord .m3-links{justify-self:end;max-width:400px}
#s-woord .m3-t{margin:0}
#s-woord .m3-sub{margin-top:16px;font-size:var(--fs-tekst);line-height:1.6;color:var(--inkt-2)}
#s-woord .m3-actie{margin-top:clamp(24px,3vw,34px)}
#s-woord .m3-midden{display:flex;align-items:center;gap:clamp(14px,1.4vw,22px);--m3-tw:clamp(284px,17vw,300px)}
#s-woord .m3-pijl{flex:none;width:52px;height:52px;padding:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy);
  box-shadow:0 0 0 1px rgba(11,12,30,.08),0 14px 26px -16px rgba(14,18,70,.5)}
#s-woord .m3-pijl svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#s-woord .m3-pijl:hover{background:var(--blauw);color:#fff;transform:scale(1.06)}
#s-woord .m3-pijl{transition:background-color .2s,color .2s,transform .25s var(--ease)}
#s-woord .m3-pijl:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px}
#s-woord .m3-rechts{justify-self:start;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
#s-woord .m3-res{display:flex;flex-direction:column;align-items:flex-start}
#s-woord .m3-g{margin-top:14px;font-size:clamp(64px,6.4vw,108px);transform-origin:15% 70%}
#s-woord .m3-meer{margin-top:clamp(22px,3svh,32px);padding:16px 22px 16px 14px;flex-direction:row;gap:14px;text-align:left;border-radius:20px}
#s-woord .m3-mlogos img{width:34px;height:34px;margin-left:-8px;box-shadow:0 0 0 2.5px var(--ijs)}
#s-woord .m3-plus{font-size:24px}
#s-woord .m3-msub{margin-top:2px;font-size:13px;max-width:13em}

#s-woord .m3-tabs{grid-column:1/-1;justify-self:center;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(20px,2.8svh,28px)}
#s-woord .m3-tab{height:52px;padding:0 20px 0 7px;border-radius:999px;background:#fff;gap:10px;box-shadow:0 0 0 1.5px rgba(11,12,30,.09),0 10px 20px -16px rgba(14,18,70,.45)}
#s-woord .m3-tab img{width:38px;height:38px}
#s-woord .m3-tt b{font-size:15px}
#s-woord .m3-tab:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--blauw-licht),0 14px 24px -16px rgba(14,18,70,.5)}
#s-woord .m3-tab[aria-selected="true"]{background:var(--navy);color:#fff;box-shadow:0 0 0 1.5px var(--navy),0 16px 28px -16px rgba(11,12,30,.6)}
#s-woord .m3-tab[aria-selected="true"] img{box-shadow:0 0 0 2px #fff}
#s-woord .m3-balk{left:22px;right:22px;bottom:6px;height:2.5px;border-radius:3px;background:rgba(255,255,255,.18);opacity:0}
#s-woord .m3-balk::after{background:#fff;border-radius:3px}
#s-woord.m3-loopt .m3-tab[aria-selected="true"] .m3-balk{opacity:1}

@media (max-width:1100px) and (min-width:901px){#s-woord .m3-pijl{width:44px;height:44px}#s-woord .m3-g{font-size:clamp(48px,6vw,76px)}#s-woord .m3-meer{flex-direction:column;text-align:center}}
@media (max-width:900px){
  #s-woord .m3-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  #s-woord .m3-links{display:contents}
  #s-woord .m3-t{order:1}#s-woord .m3-sub{order:2;margin-top:10px}
  #s-woord .m3-midden{order:3;position:relative;margin-top:24px;justify-content:center;--m3-tw:min(300px,calc(100vw - 2*var(--pad) - 56px))}
  #s-woord .m3-pijl{position:absolute;z-index:2;top:50%;width:42px;height:42px;margin-top:-21px}
  #s-woord .m3-vorige{left:0}#s-woord .m3-volgende{right:0}
  #s-woord .m3-tabs{order:4;gap:8px;margin-top:20px;width:100%}
  #s-woord .m3-tab{flex:0 0 calc((100% - 16px)/3);height:auto;flex-direction:column;gap:5px;padding:9px 4px 12px;border-radius:16px;text-align:center}
  #s-woord .m3-tab img{width:34px;height:34px}
  #s-woord .m3-tt{align-items:center;width:100%}
  #s-woord .m3-tt b{font-size:13px;max-width:100%}
  #s-woord .m3-balk{left:14px;right:14px;bottom:5px}
  #s-woord .m3-rechts{order:5;justify-self:stretch;align-items:center;text-align:center;margin-top:28px}
  #s-woord .m3-res{align-items:center}
  #s-woord .m3-rl{margin:0 auto}
  #s-woord .m3-g{font-size:72px}
  #s-woord .m3-actie{order:6;justify-self:center;margin-top:24px}
  #s-woord .m3-meer{align-self:stretch;justify-content:center}
}


/* klap op het cijfer (zoals de hero) */
#s-woord .m3-res{position:relative}
#s-woord .m3-hit{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:-1}
#s-woord .m3-flits{position:absolute;left:-220px;top:-160px;width:440px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(88,99,248,.35),rgba(88,99,248,.12) 55%,rgba(88,99,248,0));opacity:0}
#s-woord .m3-ring{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:3px solid var(--blauw);opacity:0}
#s-woord .m3-vonk{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--blauw);opacity:0}
#s-woord .m3-vonk:nth-child(3n){background:var(--blauw-licht);width:7px;height:7px}
#s-woord .m3-tab[aria-selected="true"] .m3-balk{display:none}


#s-pakketten{isolation:isolate;color:var(--navy)}
#s-pakketten::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-40px;left:50%;translate:-50% 0;width:min(1000px,96vw);height:min(560px,70vh);
  background:radial-gradient(closest-side,rgba(210,215,255,.5) 0%,rgba(220,224,255,.32) 40%,rgba(244,245,255,0) 100%)}
#s-pakketten .z1-defs{position:absolute;width:0;height:0;overflow:hidden}
#s-pakketten .z1-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#s-pakketten .z1-kop{text-align:center}
#s-pakketten .z1-kop .h2{font-size:clamp(34px,min(3.9vw,6vh),62px)}
#s-pakketten .z1-tip{margin-top:4px;font:500 13.5px/1.3 var(--f);color:var(--inkt-2)}
#s-pakketten .z1-tip-t{display:none}
/* dienst: naam + (i). Uitleg alleen na klikken (of Enter/spatie); nooit bij aanwijzen */
#s-pakketten .z1-d{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;white-space:nowrap;cursor:pointer;touch-action:manipulation}
#s-pakketten .z1-dn{min-width:0}
#s-pakketten .z1-ic{width:16px;height:16px;flex:none;color:var(--blauw-2);opacity:.5;transition:opacity .2s,scale .2s}
#s-pakketten .z1-d:hover .z1-ic,#s-pakketten .z1-d:focus-visible .z1-ic{opacity:1}
#s-pakketten .z1-open .z1-ic{opacity:1;scale:1.12}
#s-pakketten .z1-d:focus-visible{outline:3px solid var(--blauw-licht);outline-offset:3px;border-radius:6px}
#s-pakketten .z1-u{position:absolute;z-index:40;left:var(--ux,0px);top:calc(100% + 4px);width:min(340px,calc(100vw - 32px));padding:12px 15px 13px;border-radius:14px;background:#fff;color:var(--navy);
  font:400 14px/1.55 var(--f);font-weight:400;text-align:left;white-space:normal;letter-spacing:0;box-shadow:0 22px 44px -18px rgba(11,12,30,.42),0 0 0 1px rgba(11,12,30,.08);translate:var(--dx,0px) 0;animation:z1-in .18s var(--ease)}
#s-pakketten .z1-u[hidden]{display:none}
#s-pakketten .z1-u::before{content:"";position:absolute;left:var(--pijl,18px);top:-6px;width:12px;height:12px;background:#fff;rotate:45deg;box-shadow:-1px -1px 0 rgba(11,12,30,.08)}
#s-pakketten .z1-u.z1-boven{top:auto;bottom:calc(100% + 4px)}
#s-pakketten .z1-u.z1-boven::before{top:auto;bottom:-6px;box-shadow:1px 1px 0 rgba(11,12,30,.08)}
#s-pakketten .z1-u em{display:block;margin-top:6px;font-style:normal;font-weight:600;color:var(--blauw-2)}
#s-pakketten .z1-open{z-index:41}
@keyframes z1-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#s-pakketten .z1-u{animation:none}}
#s-pakketten a:focus-visible,#s-pakketten button:focus-visible{outline:3px solid var(--blauw-licht);outline-offset:3px}
#s-pakketten .z1-noot{max-width:1040px;margin:clamp(10px,1.8vh,16px) auto 0;font-size:13.5px;line-height:1.5;color:var(--inkt-2);text-align:center;text-wrap:balance}
#s-pakketten .z1-noot b{color:var(--navy);font-weight:600}
@media (min-width:821px){
  #s-pakketten{padding-top:clamp(16px,4vh,60px)!important;padding-bottom:clamp(16px,4vh,60px)!important}
}
@media (max-width:820px){
  #s-pakketten .z1-tip-m{display:none}
  #s-pakketten .z1-tip-t{display:inline}
  #s-pakketten .z1-d{display:block;flex:1 1 0;width:100%;min-height:44px;padding:11px 0;white-space:normal}
  #s-pakketten .z1-ic{display:inline-block;vertical-align:-3px;margin-left:6px}
  #s-pakketten .z1-u{position:static;flex:0 0 100%;width:auto;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--ijs);box-shadow:none;translate:none}
  #s-pakketten .z1-u::before{display:none}
  #s-pakketten .z1-noot{text-align:left}
}

/* Z1 · twee kaarten met dezelfde lijst. Bij Social Media Content zijn de vijf extra's ingeklapt tot één grijze regel
   (openklapbaar); in de Klantenmachine staan ze uitgelicht in een eigen vlak. avoid-ai-design-ignore-file: C1, C2 · huiskleuren */
#s-pakketten{--rij:clamp(24px,3.3vh,34px);--ux:34px}
#s-pakketten .z1-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px;margin:clamp(12px,2.2vh,26px) auto 0;align-items:start}
#s-pakketten .z1-pk{position:relative;display:flex;flex-direction:column;padding:clamp(16px,2.4vh,26px) clamp(20px,2vw,28px) clamp(12px,2vh,20px);border-radius:var(--r-groot)}
#s-pakketten .z1-smc{background:#fff;box-shadow:0 30px 60px -42px rgba(11,12,30,.4),0 0 0 1px rgba(11,12,30,.07)}
#s-pakketten .z1-km{background:var(--blauw);color:#fff;box-shadow:0 30px 60px -32px rgba(40,46,160,.75)}
#s-pakketten .z1-lint{position:absolute;top:clamp(16px,2.4vh,26px);right:clamp(20px,2vw,28px);padding:5px 11px;border-radius:var(--r-rond);background:#fff;color:var(--blauw-2);font:700 12.5px/1 var(--f)}
#s-pakketten .z1-hd{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:12px}
#s-pakketten .z1-aan{grid-column:1 / -1;font:600 13px/1.3 var(--f);color:var(--blauw-2)}
#s-pakketten .z1-km .z1-aan{color:rgba(255,255,255,.86)}
#s-pakketten .z1-naam{margin-top:1px;font-size:clamp(20px,3vh,24px);font-weight:700;letter-spacing:-.025em;line-height:1.15}
#s-pakketten .z1-tel{font:500 13.5px/1.3 var(--f);color:var(--inkt-2);white-space:nowrap;padding-bottom:3px}
#s-pakketten .z1-tel b{font-weight:700;color:var(--navy)}
#s-pakketten .z1-km .z1-tel{color:rgba(255,255,255,.86)}
#s-pakketten .z1-km .z1-tel b{color:#fff}
#s-pakketten .z1-lijst{margin-top:clamp(8px,1.3vh,14px);border-top:1px solid #E6E8F3}
#s-pakketten .z1-km .z1-lijst{border-top-color:rgba(255,255,255,.26)}
#s-pakketten .z1-r{position:relative;display:flex;align-items:center;gap:12px;height:var(--rij);border-bottom:1px solid #EDEFF7;font:400 var(--fs-klein)/1.25 var(--f);white-space:nowrap}
#s-pakketten .z1-km .z1-r{border-bottom-color:rgba(255,255,255,.17)}
#s-pakketten .z1-r .z1-d{height:100%}
#s-pakketten .z1-ja{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--navy);color:#fff}
#s-pakketten .z1-ja svg{width:13px;height:13px}
#s-pakketten .z1-km .z1-ja{background:#fff;color:var(--blauw-2)}
#s-pakketten .z1-km .z1-ic{color:#fff;opacity:.6}
#s-pakketten .z1-km .z1-open .z1-ic,#s-pakketten .z1-km .z1-d:hover .z1-ic{opacity:1}
#s-pakketten .z1-nee{display:grid;place-items:center;width:22px;height:22px;flex:none}
#s-pakketten .z1-nee::after{content:"";width:12px;height:2px;border-radius:2px;background:rgba(11,12,30,.25)}
/* de ingeklapte regel bij Social Media Content en het uitgelichte vlak bij de Klantenmachine staan op dezelfde hoogte */
#s-pakketten .z1-dicht,#s-pakketten .z1-extra{margin:8px -12px 0;border-radius:14px}
#s-pakketten .z1-dicht{background:#F3F4F9}
#s-pakketten .z1-extra{background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
#s-pakketten .z1-klap,#s-pakketten .z1-xk{display:flex;align-items:center;gap:10px;width:100%;height:calc(var(--rij) + 8px);padding:0 12px;font:600 13.5px/1 var(--f)}
#s-pakketten .z1-klap{border:0;background:none;color:rgba(11,12,30,.55);cursor:pointer;text-align:left;border-radius:14px;transition:color .2s}
#s-pakketten .z1-klap:hover{color:var(--navy)}
#s-pakketten .z1-klap span{flex:1}
#s-pakketten .z1-klap-s{width:16px;height:16px;flex:none;margin:0 3px}
#s-pakketten .z1-klap-p{width:18px;height:18px;flex:none;transition:rotate .25s var(--ease)}
#s-pakketten .z1-klap[aria-expanded="true"] .z1-klap-p{rotate:180deg}
#s-pakketten .z1-xk{color:#fff;font-weight:700}
#s-pakketten .z1-xk svg{width:15px;height:15px;flex:none;margin:0 4px 0 3px}
#s-pakketten .z1-weg,#s-pakketten .z1-xl{margin:0;padding:0 12px 4px}
#s-pakketten .z1-weg{border-top:0}
#s-pakketten .z1-xl{border-top:0}
#s-pakketten .z1-weg .z1-r:last-child,#s-pakketten .z1-xl .z1-r:last-child{border-bottom:0}
#s-pakketten .z1-uit{color:rgba(11,12,30,.45)}
#s-pakketten .z1-uit .z1-ic{color:rgba(11,12,30,.55)}
#s-pakketten .z1-weg .z1-r{border-bottom-color:#E4E6F0}
#s-pakketten .z1-x{font-weight:600}
#s-pakketten .z1-pl svg{width:12px;height:12px}
#s-pakketten .z1-x{--ux:34px}
#s-pakketten .z1-voet{padding-top:clamp(10px,1.7vh,16px);display:flex;align-items:center}
#s-pakketten .z1-smc .z1-voet{min-height:calc(46px + clamp(10px,1.7vh,16px))}
#s-pakketten .z1-btn{width:100%;justify-content:center;height:46px;font-size:14.5px}
#s-pakketten .z1-btn .wa{width:36px;height:36px}
#s-pakketten .z1-link{display:inline-flex;align-items:center;min-height:44px;color:var(--navy)}
#s-pakketten .z1-km a:focus-visible{outline-color:#fff}
@media (max-width:820px){
  #s-pakketten{--ux:0px}
  #s-pakketten .z1-twee{grid-template-columns:minmax(0,1fr);margin-top:20px}
  #s-pakketten .z1-km{order:-1}
  #s-pakketten .z1-pk{padding:22px 18px 18px}
  #s-pakketten .z1-lint{top:20px;right:18px}
  #s-pakketten .z1-hd{grid-template-columns:1fr}
  #s-pakketten .z1-tel{margin-top:2px}
  #s-pakketten .z1-r{flex-wrap:wrap;height:auto;min-height:44px;column-gap:12px;white-space:normal}
  #s-pakketten .z1-r .z1-d{height:auto}
  #s-pakketten .z1-u{margin-left:34px}
  #s-pakketten .z1-km .z1-u{background:rgba(255,255,255,.96)}
  #s-pakketten .z1-klap,#s-pakketten .z1-xk{height:48px}
  #s-pakketten .z1-dicht,#s-pakketten .z1-extra{margin:8px -8px 0}
  #s-pakketten .z1-weg,#s-pakketten .z1-xl{padding:0 8px 4px}
}


/* avoid-ai-design-ignore-file: C2 · merkblauw als vorm voor het antwoordvlak */
/* home-v3 07 · vragen herschreven op de twijfels van ondernemers (kosten, rendement, werkt social media, kunnen jullie het, echte klanten, 4 maanden, zelf in beeld). Geen prijzen.
   07 vragen A: lijst met vragen links, één groot antwoordvlak rechts (geen accordeon, geen chat). Verzorgd moment: het antwoord schuift in. */
#s-vragen{padding:var(--ritme) 0}
#s-vragen .va-kop{max-width:760px}
#s-vragen .va-kop .lead{margin-top:12px}
#s-vragen .va-raam{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,2.4vw,40px);margin-top:clamp(24px,2.8vw,40px);align-items:stretch}
#s-vragen .va-lijst{display:flex;flex-direction:column;border-top:1px solid rgba(11,12,30,.1)}
#s-vragen .va-lijst button{position:relative;display:flex;align-items:center;min-height:62px;padding:12px 16px 12px 22px;border:0;border-bottom:1px solid rgba(11,12,30,.1);background:transparent;text-align:left;
  font:500 var(--fs-tekst)/1.3 var(--f);letter-spacing:-.01em;color:var(--inkt-2);cursor:pointer;touch-action:manipulation;transition:color .2s ease,background-color .2s ease}
#s-vragen .va-lijst button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:4px;background:var(--blauw);transform:scaleY(0);transition:transform .3s var(--ease)}
#s-vragen .va-lijst button:hover{color:var(--navy);background:#F7F8FC}
#s-vragen .va-lijst button[aria-selected="true"]{color:var(--navy);font-weight:700}
#s-vragen .va-lijst button[aria-selected="true"]::before{transform:none}
#s-vragen .va-paneel{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow:hidden;border-radius:var(--r-groot);padding:clamp(28px,3.2vw,48px);background:var(--blauw);color:#fff;
  } /* avoid-ai-design-ignore: C2 */
#s-vragen .va-paneel:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
#s-vragen .va-v{font-size:var(--fs-klein);font-weight:600;opacity:.9}
#s-vragen .va-a{margin-top:14px;font-weight:400;font-size:var(--fs-tekst);line-height:1.6;letter-spacing:-.005em;text-wrap:pretty;max-width:32em}
#s-vragen .va-v{font-size:var(--fs-h3)!important;font-weight:700!important;line-height:1.25;letter-spacing:-.025em;opacity:1!important}
#s-vragen .va-in.va-nieuw{animation:va-in .45s var(--ease) both}
@keyframes va-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
#s-vragen .va-deel{display:inline-flex;align-items:center;gap:10px;margin-top:22px;height:50px;padding:0 22px;border:0;border-radius:var(--r-rond);background:#fff;color:var(--navy);font:600 var(--fs-klein)/1 var(--f);cursor:pointer;touch-action:manipulation}
#s-vragen .va-deel svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#s-vragen .va-deel[hidden]{display:none}
/* G-2: bewijs bij het bezwaar, een cijfer dat al op de pagina staat; springt naar het klantblok in Resultaten */
#s-vragen .va-bewijs{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:6px 16px 6px 12px;border-radius:var(--r-rond);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);color:#fff;font-size:var(--fs-meta);font-weight:600;line-height:1.3;text-decoration:none}
#s-vragen .va-bewijs[hidden]{display:none}
#s-vragen .va-bewijs:hover{background:rgba(255,255,255,.24)}
#s-vragen .va-bewijs svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#s-vragen .va-status{margin-top:10px;font-size:var(--fs-klein)}
#s-vragen .va-status:empty{display:none}
#s-vragen .va-anders{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;padding-top:22px;border-top:1px solid rgba(255,255,255,.3);font-size:var(--fs-klein)}
#s-vragen .va-paneel :focus-visible{outline-color:#fff}
@media (max-width:860px){
  #s-vragen .va-kop{grid-template-columns:1fr}
  #s-vragen .va-raam{grid-template-columns:1fr}
  #s-vragen .va-lijst{gap:6px;border:0}
  #s-vragen .va-lijst button{min-height:48px;padding:10px 16px;border:1px solid rgba(11,12,30,.14);border-radius:var(--r-groot);font-size:var(--fs-klein)}
  #s-vragen .va-lijst button::before{display:none}
  #s-vragen .va-lijst button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
  #s-vragen .va-paneel{border-radius:var(--r-groot);padding:24px 20px}
  #s-vragen .va-a{font-size:var(--fs-tekst)}
  #s-vragen .va-v{font-size:var(--fs-tekst)!important}
  /* G-4 (rechter r4): op de telefoon volgt Contact met de grote appknop direct hierna; hier daarom een rustige tekstlink, zodat er nooit twee appknoppen tegelijk in beeld staan */
  #s-vragen .va-anders .btn{height:auto;min-height:44px;padding:0;gap:8px;background:none;color:#fff;text-decoration:underline;text-underline-offset:3px}
  #s-vragen .va-anders .btn .wa{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){
  #s-vragen .va-in.va-nieuw{animation:none}
  #s-vragen .va-lijst button::before{transition:none}
}


/* onder-T4 (ronde 6, Ilyass 20-10): de T2-kaart op wit, het Tuuned-icoon groot en zacht als watermerk erachter en een lila gloed zonder rand.
   Kopbalk van WhatsApp (foto, online), velden groot in twee kolommen, onderaan de invoerbalk met de groene knop. Geen pakketkeuze.
   Maten: kop 22px, uitleg 15px, labels 15px semibold, velden 17px tekst en 50px hoog, toestemming 13px, bericht en bubbels 16px.
   Alles geldt ook in #wa-pop: daar staat dezelfde kaart tijdelijk als pop-up (kit/wa-knoppen.js).
   avoid-ai-design-ignore-file: C1, C2 · navy en merkblauw #5863F8 zijn de huiskleuren; WhatsApp-kleuren alleen in het telefoonscherm */

#s-contact{position:relative;isolation:isolate}
:is(#s-contact,#wa-pop) [hidden]{display:none!important}
#s-contact .t4-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,5vw,112px);align-items:center}
#s-contact .t4-l{max-width:600px;justify-self:end;width:100%}

/* links: kop en de drie stappen */
#s-contact .t4-h2{font:700 var(--fs-h2)/1.02 var(--f);letter-spacing:-.045em;color:var(--navy);text-wrap:balance}
#s-contact .t4-lead{margin-top:14px;font-size:var(--fs-tekst);line-height:1.6;color:var(--inkt-2)}
#s-contact .t4-stappen{list-style:none;position:relative;display:flex;flex-direction:column;gap:clamp(18px,3svh,32px);margin-top:clamp(24px,4svh,44px)}
#s-contact .t4-stappen::before{content:"";position:absolute;left:21.5px;top:22px;bottom:22px;width:1px;background:linear-gradient(var(--blauw) 0%,#C9CCF5 40%,#DADCEB 100%)}
#s-contact .t4-stappen li{position:relative;display:flex;align-items:flex-start;gap:20px}
#s-contact .t4-nr{flex:none;position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #DADCEB;color:var(--navy);font:600 16px/1 var(--f);transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease}
#s-contact .t4-nr svg{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#s-contact .t4-nu .t4-nr{background:var(--blauw);border-color:var(--blauw);color:#fff;box-shadow:0 0 0 6px var(--ijs)}
#s-contact .t4-af .t4-nr{background:var(--navy);border-color:var(--navy);color:#fff}
#s-contact .t4-af .t4-nr span{display:none}
#s-contact .t4-af .t4-nr svg{display:block}
#s-contact .t4-stappen b{display:block;padding-top:7px;font:700 var(--fs-h3)/1.15 var(--f);letter-spacing:-.03em;color:var(--navy)}
#s-contact .t4-stappen li:not(.t4-nu) b{font-weight:600}
#s-contact .t4-stappen p{margin-top:6px;font-size:var(--fs-klein);line-height:1.6;color:var(--inkt-2);max-width:27em}
#s-contact .t4-slot{display:flex;align-items:flex-start;gap:10px;margin-top:clamp(22px,3.6svh,40px);max-width:30em;font-size:var(--fs-meta);line-height:1.55;color:var(--inkt-2)}
#s-contact .t4-slot svg{flex:none;width:19px;height:19px;margin-top:1px;fill:none;stroke:var(--blauw);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* rechts: de kaart op wit. Geen vlak met hoeken (Ilyass 20-10: het vragenblok erboven is al paars),
   wel het Tuuned-icoon heel groot en zacht erachter en een lila gloed die nergens een rand heeft. */
#s-contact .t4-r{position:relative;isolation:isolate;display:flex;justify-content:center;padding:clamp(28px,4.4svh,44px) clamp(32px,3.4vw,56px)}
#s-contact .t4-sfeer{position:absolute;z-index:-1;inset:-7% -16%;pointer-events:none}
#s-contact .t4-gloed{position:absolute;inset:0;
  background:radial-gradient(46% 50% at 50% 52%,rgba(139,147,255,.30) 0%,rgba(139,147,255,.14) 42%,rgba(139,147,255,0) 72%),
             radial-gradient(30% 34% at 78% 22%,rgba(198,168,255,.24) 0%,rgba(198,168,255,0) 70%),
             radial-gradient(28% 30% at 22% 86%,rgba(150,214,255,.20) 0%,rgba(150,214,255,0) 70%)}
#s-contact .t4-water{position:absolute;left:50%;top:50%;width:auto;height:92%;translate:-50% -50%;fill:var(--blauw);opacity:.07}
/* ===== de kaart: geen toestelrand, wel de kleuren en vormen van WhatsApp ===== */
:is(#s-contact,#wa-pop) .t4-kaart{position:relative;flex:none;width:600px;max-width:100%;border-radius:24px;overflow:hidden;background:#EFEAE2;color:#111B21;text-align:left;container-type:inline-size;
  box-shadow:0 0 0 1px rgba(64,73,230,.10),0 44px 80px -38px rgba(40,46,160,.45),0 16px 30px -20px rgba(14,18,70,.25)}
:is(#s-contact,#wa-pop) .t4-kop{display:flex;align-items:center;gap:14px;padding:14px 18px 14px 20px;background:#fff;border-bottom:1px solid #ECEDEE}
:is(#s-contact,#wa-pop) .t4-avw{flex:none;position:relative}
:is(#s-contact,#wa-pop) .t4-av{display:block;width:50px;height:50px;border-radius:50%;object-fit:cover}
:is(#s-contact,#wa-pop) .t4-kn{display:flex;flex-direction:column;gap:1px;line-height:1.25;min-width:0;flex:1}
:is(#s-contact,#wa-pop) .t4-kn b{font-size:19px;font-weight:600;letter-spacing:-.01em;color:#111B21;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#s-contact,#wa-pop) .t4-kn small{display:flex;align-items:center;gap:6px;font-size:14.5px;color:#54656F;white-space:nowrap}
:is(#s-contact,#wa-pop) .t4-kn i{width:8px;height:8px;border-radius:50%;background:#25D366}
:is(#s-contact,#wa-pop) .t4-merk{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 13px 8px 10px;border-radius:99px;background:#E7FCE3;color:#0B6B3A;font-size:14px;font-weight:600;line-height:1}
:is(#s-contact,#wa-pop) .t4-merk svg{width:19px;height:19px;fill:#1DAA61}
@container (max-width:420px){:is(#s-contact,#wa-pop) .t4-merk{padding:9px;font-size:0;gap:0}}

/* het gesprek: welkomstbericht van Ilyass, daaronder het paneel met je gegevens */
:is(#s-contact,#wa-pop) .t4-form{display:flex;flex-direction:column}
:is(#s-contact,#wa-pop) .t4-chat{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;
  background-color:#EFEAE2;background-image:radial-gradient(rgba(84,101,111,.075) 1px,transparent 1.3px),radial-gradient(rgba(84,101,111,.05) 1px,transparent 1.3px);background-size:22px 22px,22px 22px;background-position:0 0,11px 11px}
:is(#s-contact,#wa-pop) .t4-in{position:relative;align-self:flex-start;max-width:82%;margin-left:8px;padding:9px 12px 10px 14px;border-radius:12px;border-top-left-radius:0;background:#fff;color:#111B21;font-size:16px;line-height:1.45;box-shadow:0 1px .5px rgba(11,20,26,.13)}
:is(#s-contact,#wa-pop) .t4-in::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%)}
:is(#s-contact,#wa-pop) .t4-meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:11px 0 -5px 14px;font-size:12.5px;line-height:1;color:#667781}
:is(#s-contact,#wa-pop) .t4-meta svg{width:17px;height:12px;fill:none;stroke:#8696A0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
:is(#s-contact,#wa-pop) .t4-meta .t4-v2{opacity:0;transition:opacity .3s ease}
:is(#s-contact,#wa-pop) .t4-binnen .t4-meta svg{stroke:#53BDEB}
:is(#s-contact,#wa-pop) .t4-binnen .t4-meta .t4-v2{opacity:1}

:is(#s-contact,#wa-pop) .t4-paneel{max-height:640px;padding:20px 20px 17px;border-radius:18px;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.1),0 10px 24px -16px rgba(11,20,26,.25);overflow:hidden;
  transition:max-height .6s var(--ease),padding .6s var(--ease),margin .6s var(--ease),opacity .35s ease}
:is(#s-contact,#wa-pop) .t4-paneel-kop{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
:is(#s-contact,#wa-pop) .t4-paneel-kop b{font:700 22px/1.15 var(--f);letter-spacing:-.035em;color:var(--navy)}
:is(#s-contact,#wa-pop) .t4-paneel-kop small{font-size:15px;line-height:1.45;color:var(--inkt-2)}
:is(#s-contact,#wa-pop) .t4-velden{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@container (max-width:500px){:is(#s-contact,#wa-pop) .t4-velden{grid-template-columns:minmax(0,1fr);gap:12px}}
:is(#s-contact,#wa-pop) .t4-veld{display:flex;flex-direction:column;gap:6px;min-width:0}
:is(#s-contact,#wa-pop) .t4-veld label{font-size:15px;font-weight:600;line-height:1.2;color:var(--navy);cursor:pointer}
:is(#s-contact,#wa-pop) .t4-veld input{width:100%;min-width:0;height:50px;padding:0 15px;border-radius:12px;border:1px solid rgba(11,12,30,.18);background:#F7F8FC;font:400 17px/1 var(--f);color:var(--navy);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
:is(#s-contact,#wa-pop) .t4-veld input::placeholder{color:#868AA6;opacity:1}
:is(#s-contact,#wa-pop) .t4-veld input:hover{border-color:rgba(11,12,30,.32)}
:is(#s-contact,#wa-pop) .t4-veld input:focus{outline:none;border-color:var(--blauw);background:#fff;box-shadow:0 0 0 3px rgba(88,99,248,.22)}
:is(#s-contact,#wa-pop) .t4-veld:focus-within label{color:var(--blauw-2)}
:is(#s-contact,#wa-pop) .t4-veld input[aria-invalid="true"]{border-color:#B4233B;background:#FFF6F7}
:is(#s-contact,#wa-pop) .t4-veld input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(180,35,59,.18)}
:is(#s-contact,#wa-pop) .t4-veld.t4-ongeldig label{color:#B4233B}
:is(#s-contact,#wa-pop) .t4-pot{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:is(#s-contact,#wa-pop) .t4-fout{margin:12px 1px 0;font-size:14.5px;line-height:1.4;font-weight:600;color:#B4233B}
:is(#s-contact,#wa-pop) .t4-fout:empty{display:none}
:is(#s-contact,#wa-pop) .t4-fout.t4-zacht{color:#54656F}
:is(#s-contact,#wa-pop) .t4-eerlijk{margin:14px 1px 0;font-size:13px;line-height:1.45;color:#5B6B75}

/* de verzonden bubbel en de bevestiging */
:is(#s-contact,#wa-pop) .t4-uit{display:flex;flex-direction:row-reverse;margin-right:8px;animation:t4-in .45s var(--ease) both}
:is(#s-contact,#wa-pop) .t4-bel{position:relative;max-width:82%;padding:9px 11px 10px 14px;border-radius:12px;border-top-right-radius:0;background:#D9FDD3;color:#111B21;font-size:16px;line-height:1.45;box-shadow:0 1px .5px rgba(11,20,26,.13);overflow-wrap:break-word}
:is(#s-contact,#wa-pop) .t4-bel::before{content:"";position:absolute;top:0;right:-8px;width:8px;height:13px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}
:is(#s-contact,#wa-pop) .t4-bel b{font-weight:600}
:is(#s-contact,#wa-pop) .t4-bevestig{align-self:center;display:flex;flex-direction:column;align-items:center;gap:2px;max-width:92%;padding:10px 16px 9px;border-radius:12px;background:#FFF3C4;color:#54501F;text-align:center;box-shadow:0 1px .5px rgba(11,20,26,.1);animation:t4-in .45s .15s var(--ease) both}
:is(#s-contact,#wa-pop) .t4-bevestig-t{font-size:15px;line-height:1.42;font-weight:600}
:is(#s-contact,#wa-pop) .t4-bevestig.t4-mis{background:#FDE2E2;color:#7A1C1C}
:is(#s-contact,#wa-pop) .t4-opnieuw{display:inline-flex;align-items:center;min-height:38px;font-size:14.5px;font-weight:600;color:#0B5E2C;text-decoration:underline;text-underline-offset:3px}
@keyframes t4-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* de invoerbalk van WhatsApp: jouw bericht als concept dat meegroeit, en de groene verzendknop */
:is(#s-contact,#wa-pop) .t4-balk{display:flex;align-items:flex-end;gap:10px;padding:12px 18px 14px 16px;background:#F6F5F3;border-top:1px solid #ECEAE6}
:is(#s-contact,#wa-pop) .t4-invoer{flex:1;min-width:0;min-height:52px;display:flex;align-items:center;padding:11px 18px;border-radius:26px;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.08)}
:is(#s-contact,#wa-pop) .t4-concept{font-size:16px;line-height:1.42;color:#111B21;max-height:calc(1.42em * 5);overflow:hidden}
:is(#s-contact,#wa-pop) .t4-concept b{font-weight:600;color:var(--navy);background:linear-gradient(transparent 62%,rgba(88,99,248,.18) 62%)}
:is(#s-contact,#wa-pop) .t4-leeg{display:none;color:#8696A0;font-size:16px}
:is(#s-contact,#wa-pop) .t4-cursor{display:none;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-2px;background:#1DAA61;animation:t4-knipper 1s steps(1) infinite}
:is(#s-contact,#wa-pop) .t4-typend .t4-cursor{display:inline-block}
@keyframes t4-knipper{50%{opacity:0}}
:is(#s-contact,#wa-pop) .t4-zend{position:relative;flex:none;width:52px;height:52px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#1DAA61;color:#fff;cursor:pointer;touch-action:manipulation;transition:transform .25s var(--ease),background-color .2s}
:is(#s-contact,#wa-pop) .t4-zend svg{grid-area:1/1;width:24px;height:24px}
:is(#s-contact,#wa-pop) .t4-pijl{fill:currentColor;translate:1px 0}
:is(#s-contact,#wa-pop) .t4-mic{display:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:is(#s-contact,#wa-pop) .t4-zend:hover{transform:scale(1.07);background:#17984F}
:is(#s-contact,#wa-pop) .t4-zend:focus-visible{outline:3px solid var(--blauw);outline-offset:3px}
:is(#s-contact,#wa-pop) .t4-zend::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(29,170,97,.5);pointer-events:none}
:is(#s-contact,#wa-pop) .t4-gereed .t4-zend::after{animation:t4-puls 1.8s ease-out infinite}
@keyframes t4-puls{0%{box-shadow:0 0 0 0 rgba(29,170,97,.5)}70%,100%{box-shadow:0 0 0 10px rgba(29,170,97,0)}}

/* na verzenden: het paneel klapt dicht, jouw bericht staat als verzonden in het gesprek, de invoerbalk is weer leeg */
:is(#s-contact,#wa-pop) .t4-klaar .t4-paneel{max-height:0;padding-top:0;padding-bottom:0;margin-top:-12px;opacity:0;pointer-events:none}
:is(#s-contact,#wa-pop) .t4-klaar .t4-concept{display:none}
:is(#s-contact,#wa-pop) .t4-klaar .t4-leeg{display:block}
:is(#s-contact,#wa-pop) .t4-klaar .t4-pijl{display:none}
:is(#s-contact,#wa-pop) .t4-klaar .t4-mic{display:block}
:is(#s-contact,#wa-pop) .t4-klaar .t4-zend{pointer-events:none}
:is(#s-contact,#wa-pop) .t4-klaar .t4-zend::after{animation:none}

/* de pop-up (kit/wa-knoppen.js, modus 2): dezelfde kaart, groot in het midden */
#wa-pop .wa-doos .t4-kaart{width:min(680px,calc(100vw - 150px));box-shadow:0 50px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
#wa-pop.wa-k3 .wa-doos .t4-kaart{width:min(548px,100%)}
#s-contact .t4-kaart.wa-gloed{animation:wa-gloed 1.5s cubic-bezier(.2,.7,.3,1) 2}

/* één keer rustig in beeld schuiven */
#s-contact [data-t4-kom]{transition:opacity .8s var(--ease),translate .9s var(--ease);transition-delay:var(--d,0s)}
#s-contact [data-t4-kom].t4-wacht{opacity:0;translate:0 28px}
#s-contact .t4-r[data-t4-kom].t4-wacht{translate:none}
@media (prefers-reduced-motion:reduce){#s-contact [data-t4-kom],:is(#s-contact,#wa-pop) .t4-paneel{transition:none}:is(#s-contact,#wa-pop) :is(.t4-cursor,.t4-uit,.t4-bevestig),:is(#s-contact,#wa-pop) .t4-gereed .t4-zend::after{animation:none}#s-contact .t4-kaart.wa-gloed{animation:none}}

/* de vaste appbalk op de telefoon wijkt zolang het contactblok in beeld is */
.vb-balk.t4-weg{transform:translateY(110%)!important;opacity:0!important;pointer-events:none!important}

@media (max-width:1640px){
  #s-contact .t4-grid{gap:clamp(40px,3.6vw,64px)}
  #s-contact .t4-r{padding:36px 40px}
  :is(#s-contact,#wa-pop) .t4-kaart{width:560px}
}
@media (max-width:1240px){
  #s-contact .t4-grid{gap:40px}
  #s-contact .t4-r{padding:32px 32px}
  :is(#s-contact,#wa-pop) .t4-kaart{width:520px}
}
@media (max-width:1060px){
  #s-contact .t4-grid{grid-template-columns:1fr;gap:0}
  /* smaller scherm: kop, de kaart met het formulier, daarna hoe het verder gaat */
  #s-contact .t4-l{display:contents}
  #s-contact .t4-h2{order:1}
  #s-contact .t4-lead{order:2}
  #s-contact .t4-r{order:3;margin-top:40px;padding:clamp(20px,5vw,48px)}
  :is(#s-contact,#wa-pop) .t4-kaart{width:100%;max-width:640px}
  #s-contact .t4-r{min-width:0}
  #s-contact .t4-stappen{order:4;margin-top:44px}
  #s-contact .t4-slot{order:5}
  #s-contact .t4-sfeer{inset:-4% -10%}
  #s-contact .t4-water{display:none}
}
@media (max-width:760px){
  #s-contact .t4-lead{font-size:var(--fs-klein)}
  #s-contact .t4-r{padding:20px 12px}
  :is(#s-contact,#wa-pop) .t4-kaart{border-radius:22px}
  :is(#s-contact,#wa-pop) .t4-kop{padding:10px 14px;gap:12px}
  :is(#s-contact,#wa-pop) .t4-av{width:44px;height:44px}
  :is(#s-contact,#wa-pop) .t4-chat{padding:12px 12px 12px;gap:10px}
  :is(#s-contact,#wa-pop) .t4-paneel{padding:17px 16px 15px}
  :is(#s-contact,#wa-pop) .t4-paneel-kop{margin-bottom:12px}
  :is(#s-contact,#wa-pop) .t4-velden{gap:10px}
  :is(#s-contact,#wa-pop) .t4-eerlijk{margin-top:12px}
  :is(#s-contact,#wa-pop) .t4-balk{padding:10px 14px 12px 10px;gap:8px}
  #wa-pop .wa-doos .t4-kaart{width:calc(100vw - 32px)}
  /* de sluitknop staat op de telefoon vast rechtsboven: de kaart begint eronder */
  #wa-pop .wa-doos:has(.t4-kaart){padding-top:46px}
  #s-contact .t4-nr{width:40px;height:40px;font-size:15px}
  #s-contact .t4-stappen::before{left:19.5px}
  #s-contact .t4-stappen li{gap:16px}
  #s-contact .t4-stappen b{padding-top:6px}
}

/* footer: licht en rustig (ongewijzigd uit O13) */
#s-footer.sectie{background:transparent}
#s-footer .o13-voet{color:var(--inkt-2);font-size:var(--fs-klein)}
#s-footer .o13-fgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding:clamp(40px,4vw,60px) 0 0;border-top:1px solid rgba(11,12,30,.08);margin-top:8px}
#s-footer .o13-logo{display:inline-block}
#s-footer .o13-logo svg{height:42px;width:auto;fill:var(--blauw)}
#s-footer .o13-zin{margin-top:14px;max-width:24em;line-height:1.6}
#s-footer .o13-kol{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
#s-footer .o13-kol b{color:var(--navy);font-weight:600;margin-bottom:4px}
#s-footer .o13-kol a,#s-footer .o13-top{transition:color .2s ease}
#s-footer .o13-kol a:hover,#s-footer .o13-top:hover{color:var(--blauw-2)}
#s-footer .o13-top{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--navy);font-weight:600}
#s-footer .o13-top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#s-footer .o13-voet-onder{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding:14px 0 22px;border-top:1px solid rgba(11,12,30,.08);font-size:var(--fs-meta)}
@media (max-width:760px){
  #s-footer .o13-fgrid{grid-template-columns:1fr 1fr;gap:28px 20px}
  #s-footer .o13-merkkol{grid-column:1/-1}
  #s-footer .o13-kol{gap:0}
  #s-footer .o13-kol a{display:flex;align-items:center;min-height:44px}
  #s-footer .o13-voet-onder{flex-direction:column;align-items:flex-start;gap:4px;padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}