@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
/* ============================================================
   IMPCT brand-overlay (brandbook V1). ADDITIEF en VEILIG:
   raakt alleen merk-eigen klassen (isx-*, cc-ico, ipg-*).
   5-aug: globale font-override actief. Poppins (brandbook-bodyfont) nu ook
   voor koppen sitebreed, Montserrat/Open Sans eruit (viel deels terug op
   systeemfont, las als sjabloon). Monument blijft gearchiveerd, niet gebruikt.
   ============================================================ */
:root{
  --impct-green:#2a431d; --impct-green-deep:#1a2912;
  --impct-orange:#e84d0e; --impct-orange-cta:#cf440c;
  --impct-grey:#f1f1f1; --impct-cream:#f4ede1; --impct-white:#ffffff;
}

/* 8-sep: cookiemelding herzien. Wat er mis was, gemeten op de live pagina:
   de balk stond IN de flow boven de hero (136px hoog, duwde de hero omlaag),
   "Accepteren" kreeg zijn oranje nooit omdat `.qs_cookie_popup button` met
   een hogere specificiteit `background:transparent!important` zette (dus geen
   primaire keuze), "Aanpassen" was 72px terwijl de rest 42px was, en het
   dichtgeklapte voorkeurenpaneel stond op display:block en hield 12px bezet.
   Nu: slanke vaste balk onderaan, een duidelijke primaire keuze, gelijke
   knoppen. De pluginstijl zet alles met !important, dus deze regels ook. */
.qs_cookie_popup.impct-cookie-inline{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:9999!important;padding:0!important;background:#2a431d!important;border-top:2px solid #cf440c!important;box-shadow:0 -20px 44px -30px rgba(0,0,0,.75)!important;max-height:none!important;opacity:1!important;border-radius:0!important;font-family:'Poppins',sans-serif!important;box-sizing:border-box!important;}
/* De CMS-stijl geeft elke button margin:15px 0 en de container op alle pagina's
   behalve de homepage margin:15px 0. Samen 60px lucht in een balk die slank
   moet zijn, en de balk werd daardoor 92px op home en 122px elders. */
.qs_cookie_popup .qs_cookie_popup_container{display:flex!important;align-items:center!important;gap:18px!important;flex-wrap:wrap!important;padding-top:10px!important;padding-bottom:10px!important;margin-top:0!important;margin-bottom:0!important;}
/* Kop blijft er voor schermlezers, maar neemt geen ruimte meer in. */
.qs_cookie_popup .qs_cookie_title{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;}
.qs_cookie_popup .qs_cookie_text{color:#cdd6c0!important;font-size:12.5px!important;line-height:1.5!important;margin:0!important;flex:1 1 380px!important;min-width:0!important;}
.qs_cookie_popup .qs_cookie_link{color:#f6b98f!important;text-decoration:underline!important;text-underline-offset:2px!important;}
.qs_cookie_popup .qs_cookie_button_wrap{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;margin:0!important;flex-wrap:nowrap!important;}
.qs_cookie_popup button{font-family:'Poppins',sans-serif!important;font-weight:600!important;font-size:12.5px!important;line-height:1!important;border-radius:0!important;height:40px!important;padding:0 16px!important;cursor:pointer!important;border:0!important;margin:0!important;transition:background .2s,color .2s,box-shadow .2s!important;}
.qs_cookie_popup button.qs_cookie_acceptbtn{background:#cf440c!important;color:#ffffff!important;}
.qs_cookie_popup button.qs_cookie_acceptbtn:hover{background:#ffffff!important;color:#2a431d!important;}
.qs_cookie_popup button.qs_cookie_refusebtn{background:transparent!important;color:#ffffff!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)!important;}
.qs_cookie_popup button.qs_cookie_refusebtn:hover{box-shadow:inset 0 0 0 2px #ffffff!important;}
.qs_cookie_popup button.qs_cookie_linkbtn{background:transparent!important;color:#cdd6c0!important;box-shadow:none!important;padding:0 6px!important;text-decoration:underline!important;text-underline-offset:3px!important;}
.qs_cookie_popup button.qs_cookie_linkbtn:hover{color:#ffffff!important;}
.qs_cookie_popup button:focus-visible{outline:2px solid #f6b98f!important;outline-offset:2px!important;}
/* Voorkeurenpaneel: dicht is dicht, open netjes onder de regel. */
.qs_cookie_popup .qs_cookie_editable_wrap.hideonload{display:none!important;margin:0!important;}
/* De plugin zet height:350px hard op dit paneel, vandaar de lege groene lap
   onder de opties. Terug naar inhoudshoogte. */
.qs_cookie_popup .qs_cookie_editable_wrap{flex-basis:100%!important;width:100%!important;max-width:none!important;height:auto!important;align-content:flex-start!important;color:#cdd6c0!important;margin:12px 0 0!important;padding:14px 0 2px!important;border:0!important;border-top:1px solid rgba(245,239,227,.18)!important;display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:14px 32px!important;box-shadow:none!important;background:transparent!important;}
.qs_cookie_popup .qs_cookie_editable{margin:0!important;flex:0 1 320px!important;}
.qs_cookie_popup .qs_cookie_editable input[type=checkbox]{width:16px!important;height:16px!important;margin:0 8px 0 0!important;vertical-align:-2px!important;accent-color:#cf440c!important;}
.qs_cookie_popup .qs_cookie_editable label{color:#ffffff!important;font-weight:600!important;font-size:13px!important;cursor:pointer!important;}
.qs_cookie_popup .qs_cookie_description{font-size:12px!important;color:#a9b79a!important;margin:3px 0 0 24px!important;line-height:1.45!important;}
.qs_cookie_popup .qs_cookie_acceptbtnsmall{background:#cf440c!important;color:#ffffff!important;height:40px!important;padding:0 18px!important;margin:0!important;align-self:center!important;flex:0 0 auto!important;}
/* De chatknop staat rechtsonder op vw-84. De contentrand van het raster
   (max 1400, marge 56) ligt daar links van zodra het venster breder is dan
   ongeveer 1456px. Daaronder valt de knop over "Weigeren", gemeten op 1440,
   1280, 1100 en 960px. Alleen daar trekken we de knoppenrij in; op grote
   schermen blijft het sitebrede raster onaangeroerd. */
@media(min-width:821px) and (max-width:1499px){
  .qs_cookie_popup .qs_cookie_button_wrap{margin-right:70px!important;}
}
@media(max-width:820px){
  .qs_cookie_popup .qs_cookie_popup_container{flex-wrap:wrap!important;gap:12px!important;padding-top:14px!important;padding-bottom:14px!important;}
  .qs_cookie_popup .qs_cookie_text{flex:1 1 100%!important;font-size:12.5px!important;}
  .qs_cookie_popup .qs_cookie_button_wrap{flex:1 1 100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .qs_cookie_popup button{width:100%!important;height:44px!important;box-sizing:border-box!important;text-align:center!important;}
  .qs_cookie_popup button.qs_cookie_acceptbtn{order:1!important;}
  .qs_cookie_popup button.qs_cookie_refusebtn{order:2!important;}
  .qs_cookie_popup button.qs_cookie_linkbtn{order:3!important;grid-column:1/-1!important;justify-self:start!important;width:auto!important;height:44px!important;display:flex!important;align-items:center!important;}
  .qs_cookie_popup .qs_cookie_editable_wrap{max-height:40vh!important;overflow-y:auto!important;}
  /* Niet over de volle breedte: de chatknop rechtsonder zou er overheen vallen. */
  .qs_cookie_popup button.qs_cookie_acceptbtnsmall{width:auto!important;padding:0 22px!important;height:44px!important;}
}

/* 5-aug: hero-kop homepage (.ihx-h1) had een vaste minimumgrootte (clamp-vloer 2.5rem)
   en geen overflow-wrap; "maatschappelijker"/"maatschappelijke" liepen op smalle
   schermen buiten de kolom. */
.ihx-h1{overflow-wrap:break-word!important; word-break:break-word!important;}
@media (max-width:480px){
  .ihx-h1{font-size:2rem!important; line-height:1.12!important;}
}

/* 5-aug: dienstenpagina's (.impct-pillar), lange samengestelde NL-woorden in
   hoofdletters ("MAATSCHAPPELIJKE") pasten op de bestaande mobiele 30px-regel
   nog net niet -> brak midden in het woord ("MAATSCHAPPELIJ"/"KE"). Zelfde
   fix-patroon als de homepage-hero, iets kleiner + strakker getrokken. */
@media (max-width:480px){
  .impct-pillar .hero h1{font-size:24px!important; line-height:1.16!important; letter-spacing:-.01em!important;}
}

/* 5-aug: zelfde balken-om-de-foto-trope als de homepage-hero (blockbehind),
   nu op de dienstenpagina's (.impct-pillar .hero-r): een effen groen
   "frame"-blok achter de foto + een oranje "strip"-balk op de rand. Sem wees
   erop dat die balk er nog stond. Weg, foto blijft schoon staan zonder decor
   (de "€1 mln+"-badge is echte content en blijft). */
.impct-pillar .hero-r .frame, .impct-pillar .hero-r .strip{display:none!important;}

/* --- Brandbook: geen decoratieve lijn-icoontjes. -------------
   Contact-tegel houdt de merk-"A" (oranje trapezium met gradient
   = het ontbrekende stuk). */
#impct-contact .cc-ico{
  background:transparent !important; border:none !important;
  border-radius:0 !important; position:relative;
}
#impct-contact .cc-ico > svg{ display:none !important; }
#impct-contact .cc-ico::before{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:21px; height:25px;
  background:linear-gradient(158deg,#f2922f 0%, #e84d0e 62%);
  clip-path:polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}
/* Home: icoon-tegels op de diensten- en voor-wie-kaarten weg
   (Sem 13-jul: de 6 A'tjes waren niet mooi). Tekst-kaarten blijven,
   de onderliggende lijn-SVG's blijven mee verborgen. */
.isx-ico, .isx-vw-ico{ display:none !important; }

/* --- Team klikbaar: modal ----------------------------------- */
.ipg-team .ipg-tm{ cursor:pointer; }
.ipg-team .ipg-tm .ph::after{
  content:""; position:absolute; left:12px; top:12px;
  width:16px; height:12px; background:var(--impct-orange);
  clip-path:polygon(0 0,100% 22%,100% 100%,0 78%);
  opacity:0; transform:translateY(-3px); transition:opacity .2s ease,transform .2s ease;
}
.ipg-team .ipg-tm:hover .ph::after{ opacity:1; transform:none; }

.ipg-modal-ov{
  position:fixed; inset:0; background:rgba(18,32,10,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; z-index:99999; opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.ipg-modal-ov.open{ opacity:1; visibility:visible; }
.ipg-modal{
  background:#fff; max-width:520px; width:100%; position:relative;
  border-top:5px solid var(--impct-orange);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  transform:translateY(12px) scale(.985); transition:transform .22s ease;
  max-height:90vh; overflow:auto;
}
.ipg-modal-ov.open .ipg-modal{ transform:none; }
.ipg-modal-top{ display:flex; gap:20px; padding:30px 30px 18px; align-items:center; }
.ipg-modal-ph{
  width:104px; height:104px; flex:0 0 auto; object-fit:cover;
  object-position:top center; background:#eef0ea;
}
.ipg-modal-hd h3{
  font-family:'Poppins',sans-serif; font-weight:700;
  color:var(--impct-green); font-size:1.34rem; margin:0 0 5px; line-height:1.12;
}
.ipg-modal-hd .role{
  color:var(--impct-orange-cta); font-weight:600; font-size:.9rem; margin:0;
  font-family:'Poppins',sans-serif;
}
.ipg-modal-bio{
  padding:4px 30px 6px; color:#3d3d3c; line-height:1.68; font-size:1rem;
  font-family:'Poppins',sans-serif;
}
.ipg-modal-links{
  display:flex; flex-wrap:wrap; gap:10px 14px; padding:18px 30px 28px; align-items:center;
}
.ipg-modal-links a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.86rem;
  padding:10px 16px; transition:background .2s ease,color .2s ease;
}
.ipg-modal-links a.li{ background:var(--impct-green); color:#fff; }
.ipg-modal-links a.li:hover{ background:var(--impct-orange); }
.ipg-modal-links a.c{ background:#f2efe7; color:var(--impct-green); }
.ipg-modal-links a.c:hover{ background:var(--impct-green); color:#fff; }
.ipg-modal-x{
  position:absolute; top:10px; right:12px; width:36px; height:36px;
  border:none; background:transparent; font-size:24px; line-height:1;
  color:var(--impct-green); cursor:pointer; border-radius:0;
}
.ipg-modal-x:hover{ color:var(--impct-orange); }
.ipg-modal :focus-visible, .ipg-team .ipg-tm:focus-visible{ outline:3px solid var(--impct-orange); outline-offset:2px; }
@media(max-width:520px){
  .ipg-modal-top{ flex-direction:column; text-align:center; align-items:center; }
}

/* Merk-signatuur 13-jul: eyebrow-bullets uniform als trapezium-A (i.p.v. mix vierkant/ruit). */
.ipg-eyebrow .sq,.impct-pillar .sq,.impct-pillar .sec-eyebrow .sq,.ix-eyebrow .sq,.isx-eyebrow .isx-sq{clip-path:polygon(28% 0,72% 0,100% 100%,0 100%) !important;transform:none !important;box-shadow:none !important;border-radius:0 !important;}

/* Claire visuele feedback 5-aug: meer rust/witruimte + nieuwe blok-componenten
   voor de 4 dienstenpagina's (Herkenbare uitdagingen, Waarom IMPCT-grid, resultaat-
   kolommen, doelgroep-chips). Kleurregels: oranje=knoppen/accenten/laatste CTA,
   wit/grijs afwisselend, groen=tekst + af en toe een IMPCT-blok (proof/slot-CTA). */
.impct-pillar .sec{padding:46px 56px;}
.impct-pillar .hero{padding:64px 56px 60px;}
.impct-pillar .challenges{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;}
.impct-pillar .challenge{background:#fff;border:1px solid #E4E6E0;padding:24px 26px;}
.impct-pillar .challenge q{display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:16.5px;line-height:1.35;color:#2A431D;font-style:normal;quotes:none;}
.impct-pillar .challenge p{font-size:14.5px;line-height:1.6;color:#3D3D3C;margin-top:10px;}
.impct-pillar .sec.alt .challenge{background:#fff;}
.impct-pillar .why-grid{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E4E6E0;max-width:900px;border:1px solid #E4E6E0;}
.impct-pillar .why-item{background:#fff;padding:22px 24px;}
.impct-pillar .why-item h4{font-family:'Poppins',sans-serif;font-weight:800;text-transform:uppercase;font-size:14px;color:#2A431D;letter-spacing:.4px;}
.impct-pillar .why-item p{font-size:14.5px;line-height:1.6;color:#3D3D3C;margin-top:8px;}
.impct-pillar .why-item.span2{grid-column:1 / -1;background:#F1F1F1;}
.impct-pillar .audience{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;max-width:820px;}
.impct-pillar .audience span{background:#F1F1F1;color:#2A431D;font-weight:700;font-size:13.5px;padding:9px 16px;border-left:3px solid #CF440C;}
.impct-pillar .sec.alt .audience span{background:#fff;}
.impct-pillar .tklist.cols{columns:2;column-gap:34px;max-width:820px;}
.impct-pillar .tklist.cols li{break-inside:avoid;}
.impct-pillar .fasen.c3{grid-template-columns:repeat(3,1fr);max-width:900px;}
@media (max-width:860px){
  .impct-pillar .sec{padding:32px 22px;}
  .impct-pillar .challenges,.impct-pillar .why-grid,.impct-pillar .fasen.c3{grid-template-columns:1fr;}
  .impct-pillar .tklist.cols{columns:1;}
}

html, body{font-family:'Poppins',sans-serif;}

/* 13-aug (feedbackronde 07.08.26, "logo's groter weergeven"): de merkenslider op
   de home zette elk logo op zijn eigen hoogte binnen een slide van 184px breed.
   Gevolg: logo's zweefden op verschillende hoogtes en dunne wordmarks (Nederland
   Ontzorgt Elkaar) hingen bovenaan. Vaste box per slide, verticaal gecentreerd,
   object-fit:contain. De bronbestanden zijn hiervoor bijgesneden naar
   Images/logos-trim/. */
.onzemerken .swiper-slide{display:flex!important;align-items:center!important;justify-content:center!important;min-height:120px;}
.onzemerken .swiper-slide .main-picture-element{display:flex!important;align-items:center;justify-content:center;width:100%;}
.onzemerken .swiper-slide img{width:100%!important;height:84px!important;object-fit:contain!important;min-height:0!important;}

/* 13-aug: QSTool blaast de actieve slide 1,5x op (.swiper-slide-active
   {transform:scale(1.5)}). Met logo's in een vaste box levert dat overlap op met
   de buurlogo's, op mobiel 23px aan weerszijden. Schaal terug naar 1. */
.onzemerken .swiper-slide-active{transform:none!important;}

/* 13-aug: .sec-inner en .proof-inner kregen een bredere max-width maar hadden
   geen auto-marges, waardoor de inhoud links bleef plakken en er rechts ruim
   100px van de sectie ongebruikt bleef. */
.impct-pillar .sec-inner,
.impct-pillar .proof-inner{margin-left:auto!important;margin-right:auto!important;}
.impct-pillar .fcta{margin-left:auto!important;margin-right:auto!important;}

/* ===================================================================== */
/* Feedback 14-8-2026: de hero van Werken bij als vorm voor de hele site. */
/* Sem koos 14-8 voor "overal doorvoeren". Werken bij was in de vorige    */
/* ronde al de benchmark: volle breedte, groene grond met ruis en een     */
/* oranje wig, groot wit display-kopje, onderkop, twee knoppen en een     */
/* kickerregel. Waar de feedback een foto noemt, ligt die als achtergrond */
/* onder een groene laag zodat de witte kop leesbaar blijft. Zonder foto  */
/* (SROI: "alles groen") blijft het puur groen.                           */
/* ===================================================================== */
.fbhero{position:relative;overflow:hidden;background:#2a431d;color:#f4ede1;
  padding:104px 0 96px;margin:0;}
.fbhero-media{position:absolute;inset:0;background-image:var(--fbhero-img);
  background-size:cover;background-position:center 40%;opacity:.30;pointer-events:none;z-index:0;}
/* Donkere laag alleen waar een foto ligt, zodat de witte kop leesbaar blijft. */
.fbhero-media + .fbhero-wedge ~ .fbhero-in{position:relative;}
.fbhero:has(.fbhero-media)::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(26,41,18,.93) 0%,rgba(26,41,18,.80) 48%,rgba(26,41,18,.52) 100%);}
/* Korrel als merktextuur, subtiel: op vol vermogen wast het bosgroen uit. */
.fbhero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.26;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size:150px;}
.fbhero-wedge{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:min(46vw,560px);height:120%;z-index:2;
  background:linear-gradient(200deg,#cf440c,#e84d0e);
  clip-path:polygon(18% 0,100% 8%,100% 92%,0 100%);opacity:.14;pointer-events:none;}
.fbhero-in{position:relative;z-index:3;max-width:1288px;margin:0 auto;padding:0 24px;}
.fbhero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:#f6b98f;margin:0 0 18px;}
.fbhero-eyebrow::before{content:'';width:22px;height:16px;background:#e84d0e;
  clip-path:polygon(0 0,100% 18%,100% 100%,0 82%);display:inline-block;}
.fbhero h1{font-family:'Poppins',sans-serif;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(38px,6.2vw,74px);line-height:.98;color:#fff!important;
  margin:0 0 30px!important;max-width:17ch;text-wrap:balance;}
/* "Mist een enter tussen de titel en onder tekst": vandaar de 30px hierboven. */
.fbhero .fbhero-sub{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.55;
  color:#dfe4d5;max-width:62ch;margin:0 0 34px!important;font-weight:400;}
.fbhero .fbhero-cta{display:flex;flex-wrap:wrap;gap:14px;}
.fbhero-btn{display:inline-flex;align-items:center;gap:9px;font-family:'Poppins',sans-serif;
  font-weight:800;font-size:.95rem;text-decoration:none;padding:16px 32px;
  transition:transform .18s ease,background .2s ease,color .2s ease;}
.fbhero-btn.primary{background:#cf440c;color:#fff;}
.fbhero-btn.primary:hover{background:#fff;color:#2a431d;transform:translateY(-2px);}
.fbhero-btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);}
.fbhero-btn.ghost:hover{box-shadow:inset 0 0 0 2px #fff;transform:translateY(-2px);}
.fbhero-btn:focus-visible{outline:3px solid #e84d0e;outline-offset:3px;}
.fbhero-kicker{display:flex;flex-wrap:wrap;gap:8px 22px;margin:42px 0 0;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:#9fb08e;}
.fbhero-kicker span{display:inline-flex;align-items:center;gap:10px;}
.fbhero-kicker span::before{content:'';width:8px;height:8px;background:#e84d0e;}

/* 15-aug: dezelfde hero-taal op de 27 kennispagina's. Deze pagina's hebben
   bewust een compactere artikelvariant zonder stockbeeld, maar wel dezelfde
   groene grond, korrel, oranje A-wig, typografie en CTA-hiërarchie. */
.impct-pillar.spoke .hero{
  position:relative;isolation:isolate;display:block;overflow:hidden;
  width:100vw;max-width:none;margin-left:calc(50% - 50vw);
  padding:clamp(72px,8vw,104px) max(24px,calc((100vw - 1288px)/2 + 24px)) clamp(68px,7vw,92px);
  background:#2a431d;color:#f4ede1;
}
.impct-pillar.spoke .hero::before{
  content:'';position:absolute;z-index:-1;right:-6vw;top:-28%;width:min(54vw,720px);height:156%;
  background:linear-gradient(202deg,#cf440c,#e84d0e);
  clip-path:polygon(20% 0,100% 8%,100% 92%,0 100%);opacity:.18;pointer-events:none;
}
.impct-pillar.spoke .hero::after{
  content:'';position:absolute;z-index:-1;inset:0;opacity:.20;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size:150px;
}
.impct-pillar.spoke .hero-l{position:relative;z-index:1;width:auto;max-width:900px;}
.impct-pillar.spoke .hero .eyebrow{color:#f6b98f;font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 18px;}
.impct-pillar.spoke .hero .sq{width:22px;height:16px;background:#e84d0e;clip-path:polygon(0 0,100% 18%,100% 100%,0 82%)!important;}
.impct-pillar.spoke .hero h1{
  font-family:'Poppins',sans-serif!important;font-weight:900!important;
  font-size:clamp(38px,5.7vw,70px)!important;line-height:1.01!important;letter-spacing:-.025em!important;
  color:#fff!important;margin:0 0 28px!important;max-width:19ch;text-wrap:balance;
  overflow-wrap:anywhere;
}
.impct-pillar.spoke .hero .lead{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.6;color:#dfe4d5;margin:0;max-width:68ch;}
.impct-pillar.spoke .hero-l>p[style*="font-size:13px"]{color:#9fb08e!important;margin-top:18px!important;}
.impct-pillar.spoke .hero-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px;}
.impct-pillar.spoke .hero .btn,
.impct-pillar.spoke .hero .btn2{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;font-size:.92rem;font-weight:800;text-decoration:none;border:0;box-sizing:border-box;transition:transform .18s ease,background .18s ease,color .18s ease;}
.impct-pillar.spoke .hero .btn{background:#cf440c;color:#fff;}
.impct-pillar.spoke .hero .btn2{color:#fff;border:2px solid rgba(255,255,255,.42);padding-top:12px;padding-bottom:12px;}
.impct-pillar.spoke .hero .btn:hover{background:#fff;color:#2a431d;transform:translateY(-2px);}
.impct-pillar.spoke .hero .btn2:hover{border-color:#fff;transform:translateY(-2px);}
.impct-pillar.spoke .hero .btn:focus-visible,
.impct-pillar.spoke .hero .btn2:focus-visible{outline:3px solid #e84d0e;outline-offset:4px;}
@media(max-width:640px){
  .impct-pillar.spoke .hero{padding-top:62px;padding-bottom:58px;}
  .impct-pillar.spoke .hero::before{right:-36vw;width:96vw;opacity:.16;}
  .impct-pillar.spoke .hero h1{font-size:clamp(30px,10vw,43px)!important;line-height:1.04!important;}
  .impct-pillar.spoke .hero-btns{display:grid;grid-template-columns:1fr;}
  .impct-pillar.spoke .hero .btn,.impct-pillar.spoke .hero .btn2{width:100%;}
}

/* Home: diareeks van klantbeelden achter dezelfde groene laag, zonder JS. */
.fbhero-slides{position:absolute;inset:0;z-index:0;}
.fbhero-slides .fbhero-slide{position:absolute;inset:0;background-size:cover;
  background-position:center 40%;opacity:0;animation:fbhero-fade 24s infinite;}
.fbhero-slides .fbhero-slide:nth-child(1){animation-delay:0s;}
.fbhero-slides .fbhero-slide:nth-child(2){animation-delay:6s;}
.fbhero-slides .fbhero-slide:nth-child(3){animation-delay:12s;}
.fbhero-slides .fbhero-slide:nth-child(4){animation-delay:18s;}
@keyframes fbhero-fade{0%{opacity:0}4%{opacity:.34}25%{opacity:.34}29%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .fbhero-slides .fbhero-slide{animation:none;opacity:0;}
  .fbhero-slides .fbhero-slide:nth-child(1){opacity:.34;}
}

@media (max-width:860px){
  .fbhero{padding:64px 0 58px;}
  .fbhero-in{padding:0 22px;}
  .fbhero h1{margin-bottom:22px;}
  .fbhero-kicker{margin-top:28px;gap:8px 16px;font-size:.74rem;}
  .fbhero-wedge{width:78vw;opacity:.12;}
}

/* ===================================================================== */
/* Herstel na keuring, 14-8-2026                                          */
/* ===================================================================== */

/* De ruislaag van de oude Werken bij-hero stond op .9 en waste het bosgroen
   uit tot grijsgroen; witte tekst haalde daardoor de contrastnorm niet. */
.wb-hero::before{opacity:.26!important;}
.wb-hero{background:#2a431d!important;}

/* Eén ondergrens voor alle hero's, zodat Over IMPCT niet half zo hoog is als
   Werken bij. */
.fbhero{min-height:clamp(430px,50vh,600px);display:flex;align-items:center;}
.fbhero > .fbhero-in{width:100%;}

/* Lange koppen (home) breken in zeven regels op 74px binnen 17ch. */
.fbhero.is-lang h1{font-size:clamp(30px,3.6vw,48px)!important;max-width:26ch;}

/* "Alles groen" op SROI: daar hoort de oranje wig niet. */
.fbhero.is-vlak .fbhero-wedge{display:none;}

/* Ankersprongen verdwenen achter de vaste header. */
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:130px;}

/* Eén contentbreedte: de nieuwe hero's stonden op 1288px en het QSTool-raster
   op 1170px, zichtbaar als een trap van 54px. */
.contentcontainer{max-width:1400px!important;padding:0 56px!important;}
.fbhero-in{max-width:1400px;padding:0 56px;}
@media (max-width:860px){
  .contentcontainer{padding:0 22px!important;}
  .fbhero-in{padding:0 22px;}
  .fbhero{min-height:0;}
}

/* Opdrachtgevers "zoals op de home pagina": grijze band, grote groene kop. */
.ipg-subhead{font-size:1.9rem!important;font-weight:800!important;color:#2a431d!important;}
.fb1408-band{background:#F1F1F1;padding:64px 0 70px;margin:56px 0 0;}
.fb1408-band .fb1408-in{max-width:1400px;margin:0 auto;padding:0 56px;}
.fb1408-band .ipg-subhead{margin:0 0 22px!important;}
@media (max-width:860px){
  .fb1408-band{padding:40px 0 44px;}
  .fb1408-band .fb1408-in{padding:0 22px;}
  .ipg-subhead{font-size:1.35rem!important;}
}

/* Vijf fasen in vier kolommen liet een weesblok achter en gaf een leesmaat van
   19 tekens; bij precies vijf fasen dus drie kolommen (3 plus 2). */
.impct-pillar .fasen:has(.fase:nth-child(5)){grid-template-columns:repeat(3,1fr)!important;}
@media (max-width:1100px){
  .impct-pillar .fasen:has(.fase:nth-child(5)){grid-template-columns:repeat(2,1fr)!important;}
}
@media (max-width:860px){
  .impct-pillar .fasen:has(.fase:nth-child(5)){grid-template-columns:1fr!important;}
}

/* "Meer enters": ook de koppen in het wb-systeem krijgen lucht onder zich. */
.wb h2{margin-bottom:30px!important;}
.impct-pillar .fase-leeg{background:#fff;}
@media (max-width:1100px){ .impct-pillar .fase-leeg{display:none;} }

/* "Vormgeven zoals op de home pagina": daar is de opdrachtgeversbalk één
   lopende rij, geen raster. Als raster werd het blok 1552px hoog met 43 logo's.
   Deze balk is de standalone versie van de .logostrip van de dienstpagina's. */
.fb1408-marquee{position:relative;overflow:hidden;margin-top:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);}
.fb1408-marquee .fb1408-track{display:flex;align-items:center;width:max-content;
  animation:fb1408-scroll 64s linear infinite;}
.fb1408-marquee .fb1408-track img{height:86px;width:200px;margin-right:64px;flex:0 0 auto;object-fit:contain;}
.fb1408-marquee:hover .fb1408-track{animation-play-state:paused;}
@keyframes fb1408-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .fb1408-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
  .fb1408-marquee .fb1408-track{animation:none;}
}
@media (max-width:860px){
  .fb1408-marquee .fb1408-track img{height:64px;width:150px;margin-right:34px;}
}

/* ===================================================================== */
/* Feedback 17-8 (PDF Claire) en 19-8-2026 (mail Claire/Floyd)           */
/* ===================================================================== */

/* Hero's: op elke pagina dezelfde kopgrootte en dezelfde uitlijning als
   Voor wie. Inhoud begint bovenaan op dezelfde hoogte, niet meer verticaal
   gecentreerd (daardoor stond de home-kop lager dan op Voor wie). */
.fbhero{align-items:flex-start;padding:104px 0 96px;box-sizing:border-box;min-height:clamp(480px,56vh,620px);}
.fbhero h1,.fbhero.is-lang h1{font-size:clamp(36px,5vw,64px)!important;line-height:1.02;max-width:17ch;}
.fbhero.is-lang h1{max-width:none;text-wrap:balance;}
.impct-pillar .fbhero h1{font-weight:900!important;}
@media (max-width:860px){.fbhero{padding:64px 0 58px;}}
@media (max-width:480px){.fbhero.is-lang h1{font-size:30px!important;}}

/* Dienstpagina's (.fb1708): hero, grijze en groene vlakken over de volle
   breedte, inhoud op dezelfde 1288px-maat als de rest van de site. */
.impct-pillar.fb1708{max-width:none!important;}
.impct-pillar.fb1708 .sec,.impct-pillar.fb1708 .proof,.impct-pillar.fb1708 .faq{
  padding-inline:max(56px,calc((100% - 1288px) / 2))!important;}
@media (max-width:860px){
  .impct-pillar.fb1708 .sec,.impct-pillar.fb1708 .proof,.impct-pillar.fb1708 .faq{padding-inline:22px!important;}
}

/* Eén vorm voor de praktijkvoorbeelden op de vier dienstpagina's: groen vlak,
   foto met oranje kant links, quote rechts. Impact meten heeft daarnaast het
   landelijke onderzoekscijfer in dezelfde vorm. */
.impct-pillar.fb1708 .proof{padding-top:84px!important;padding-bottom:88px!important;}
.impct-pillar.fb1708 .proof-inner{display:block!important;max-width:none!important;}
.impct-pillar.fb1708 .proof-kicker{display:inline-flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#f6b98f;margin:0 0 38px;}
.impct-pillar.fb1708 .proof-kicker .sq{width:12px;height:13px;background:#e84d0e;flex:0 0 auto;
  clip-path:polygon(28% 0,72% 0,100% 100%,0 100%)!important;}
.impct-pillar.fb1708 .proof-fig{display:grid;grid-template-columns:minmax(240px,400px) minmax(0,1fr);
  gap:60px;align-items:center;margin:0;}
.impct-pillar.fb1708 .proof-fig.is-flip{grid-template-columns:minmax(0,1fr) minmax(240px,400px);}
.impct-pillar.fb1708 .proof-fig.is-flip .pf-img{order:2;}
.impct-pillar.fb1708 .proof-fig + .proof-fig{margin-top:60px;padding-top:60px;border-top:1px solid rgba(244,237,225,.2);}
.impct-pillar.fb1708 .pf-img{position:relative;aspect-ratio:4 / 3;border-left:10px solid #cf440c;background:#1a2912;}
.impct-pillar.fb1708 .pf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.impct-pillar.fb1708 .pf-body{min-width:0;}
.impct-pillar.fb1708 .pf-mark{width:40px;height:auto;fill:#cf440c;display:block;margin:0 0 22px;}
.impct-pillar.fb1708 .pf-quote{margin:0;padding:0;border:0;font-family:'Poppins',sans-serif;font-weight:600;
  font-size:clamp(1.1rem,1.6vw,1.42rem);line-height:1.5;color:#fff;max-width:62ch;quotes:none;}
.impct-pillar.fb1708 .pf-by{margin-top:22px;font-family:'Poppins',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:1.5px;text-transform:uppercase;color:#E8B89A;line-height:1.5;}
.impct-pillar.fb1708 .pf-num{font-family:'Poppins',sans-serif;font-weight:800!important;font-size:clamp(46px,5vw,72px);
  line-height:.95;color:#cf440c;margin:0 0 14px;}
.impct-pillar.fb1708 .pf-lbl{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#E8B89A;font-weight:700;}
.impct-pillar.fb1708 .pf-txt{margin:12px 0 0;font-family:'Poppins',sans-serif;font-weight:600;
  font-size:clamp(1.1rem,1.6vw,1.42rem);line-height:1.4;color:#fff;max-width:56ch;}
.impct-pillar.fb1708 .is-stat .pf-by{margin-top:16px;font-weight:600;letter-spacing:0;text-transform:none;font-size:14.5px;color:#C9D3BE;}
@media (max-width:900px){
  .impct-pillar.fb1708 .proof-fig,.impct-pillar.fb1708 .proof-fig.is-flip{grid-template-columns:1fr;gap:28px;}
  .impct-pillar.fb1708 .proof-fig.is-flip .pf-img{order:0;}
  .impct-pillar.fb1708 .proof-fig + .proof-fig{margin-top:44px;padding-top:44px;}
  .impct-pillar.fb1708 .proof{padding-top:56px!important;padding-bottom:60px!important;}
}

/* Afsluitend CTA-blok op de dienstpagina's: iets compacter, meer lucht eromheen. */
.impct-pillar.fb1708 .fcta{max-width:980px!important;margin:80px auto 88px!important;padding:42px 46px!important;}
.impct-pillar.fb1708 .fcta h2{font-size:24px!important;}
.impct-pillar.fb1708 .fcta p{font-size:15.5px!important;max-width:60ch;}
.impct-pillar.fb1708 .fcta .fbtn{padding:15px 30px!important;font-size:14.5px!important;}
@media (max-width:860px){.impct-pillar.fb1708 .fcta{margin:48px 22px 60px!important;padding:32px 24px!important;}}

/* Opdrachtgevers: overal hetzelfde grijze blok over de volle breedte (zoals op
   de home), met meer witruimte, een rustiger looptempo en logo's op vergelijkbaar
   gewicht (brede woordmerken lager dan compacte beeldmerken). */
.fb1408-band{background:#F1F1F1;padding:92px 0 100px;margin:88px 0 0;}
.fb1408-band .fb1408-in{max-width:1400px;margin:0 auto;padding:0 56px;box-sizing:border-box;}
.fb1408-band .ipg-subhead{margin:0 0 48px!important;}
.fb1408-marquee{margin-top:0;}
.fb1408-marquee .fb1408-track{animation-duration:190s;will-change:transform;}
.fb1408-marquee .fb1408-track img{height:80px;width:190px;margin-right:60px;object-fit:contain;}
.fb1408-marquee .fb1408-track img.lg-mid{height:62px;}
.fb1408-marquee .fb1408-track img.lg-wide{height:46px;}
.fb1408-band + .ipg-in{padding-top:84px;}
.fb1408-band + .ipg-in .ipg-cta{margin-top:0;}
.fb1408-band + .impct-cta-sec{padding-top:84px!important;}
.fb1408-band + .impct-diensten.ds-slot{padding-top:84px!important;}
.impct-pillar.fb1708 .fb1408-band{margin-top:32px;}
@media (max-width:860px){
  .fb1408-band{padding:56px 0 60px;margin:52px 0 0;}
  .fb1408-band .fb1408-in{padding:0 22px;}
  .fb1408-band .ipg-subhead{margin-bottom:30px!important;}
  .fb1408-marquee .fb1408-track{animation-duration:130s;}
  .fb1408-marquee .fb1408-track img{height:60px;width:140px;margin-right:34px;}
  .fb1408-marquee .fb1408-track img.lg-mid{height:48px;}
  .fb1408-marquee .fb1408-track img.lg-wide{height:36px;}
  .fb1408-band + .ipg-in,.fb1408-band + .impct-cta-sec,.fb1408-band + .impct-diensten.ds-slot{padding-top:52px!important;}
}

/* Over IMPCT: Onze naam als groen vlak over de volle breedte met de losse A;
   Ontstaan op een grijs vlak over de volle breedte; lucht onder 'Zo werken wij'. */
.ovr-name{border-radius:0!important;box-shadow:0 0 0 100vmax #2A431D;clip-path:inset(0 -100vmax);
  padding:76px 0!important;margin:0 0 88px!important;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)!important;}
.ovr-name-visual{display:flex;flex-direction:column;align-items:center;text-align:center!important;}
.ovr-logo-a{display:block;width:min(100%,230px);}
.ovr-logo-a img{display:block;width:100%;height:auto;}
.ovr-name .sub{margin-top:26px;}
.ovr-work h2{margin:0 0 36px!important;}
.ovr-story.ovr-ontstaan h2{margin:0 0 22px!important;}
.ovr-story.ovr-ontstaan{background:#F1F1F1;box-shadow:0 0 0 100vmax #F1F1F1;clip-path:inset(0 -100vmax);
  padding:76px 0!important;margin:0 0 84px!important;}
@media (max-width:860px){
  .ovr-name{padding:48px 0!important;margin:0 0 56px!important;grid-template-columns:1fr!important;}
  .ovr-logo-a{width:150px;}
  .ovr-story.ovr-ontstaan{padding:48px 0!important;margin:0 0 56px!important;}
}

/* Teamzinnen (Claire, 21-8): eigen woorden van het teamlid in het teamvenster. */
.ipg-modal-bio.is-quote{position:relative;padding-left:44px;font-size:1.02rem;line-height:1.68;color:#2A431D;}
.ipg-modal-bio.is-quote::before{content:'';position:absolute;left:30px;top:6px;width:6px;height:calc(100% - 12px);background:#CF440C;}

/* == uitlijn-0309 == */
/* ===================================================================== */
/* Uitlijning 3-9-2026: een verticale lijn voor de hele site.            */
/*                                                                       */
/* Claire schreef bij vrijwel elke pagina "graag uitlijnen zo als bij    */
/* voor wie" en trok daar een groene lijn door het logo en de hero.      */
/* Gemeten op 1440px stonden het logo (70), de hero (56 of 76), de       */
/* sectiekoppen (100), de logoband (76) en de footer (192) op vijf       */
/* verschillende linkerranden. Oorzaak: vijf container-maten naast       */
/* elkaar (1240/48, 1288/24, 1280/56, 1400/56, 1480/5%) en .fbhero-in    */
/* dat op de ene pagina content-box en op de andere border-box was.      */
/*                                                                       */
/* Een raster: kolom 1288px, marge 56px (22px onder 860px), altijd       */
/* border-box. Buitenmaat 1400px = 1288 + 2x56. Dat is dezelfde maat     */
/* die de dienstpagina's al hadden via padding-inline max(56px, ...).    */
/* ===================================================================== */
:root{
  --impct-kolom:1288px;
  --impct-marge:56px;
  --impct-marge-mobiel:22px;
  --impct-doos:1400px;
}

/* 1. Elke gecentreerde binnenbak op dezelfde maat en hetzelfde boxmodel.
      .desktopmenu .contentcontainer staat er apart bij omdat QSMain die
      met hogere specificiteit op 1280/1300px zet; zonder die selector
      blijft het menu achter op de rest. */
.contentcontainer,
.desktopmenu .contentcontainer,
.websitemenuwrap .contentcontainer,
.website-row.breakcontainer,
.fbhero-in,
.isx-wrap,
.ipg-in,
.wb .in,
.fb1408-band .fb1408-in,
.lgl .wrap,
.impct-cta-in,
.impct-diensten .ds-in,
.q-in,
.qs_cookie_popup_container{
  max-width:var(--impct-doos)!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--impct-marge)!important;
  padding-right:var(--impct-marge)!important;
  box-sizing:border-box!important;
}

/* 2. Buitenlagen met eigen zijruimte verschuiven de gecentreerde bak
      binnenin; die zijruimte hoort op de bak zelf te zitten, niet eromheen. */
.impct-cta-sec,
.impct-diensten,
#impct-quote,
.ipg{padding-left:0!important;padding-right:0!important;}

/* 3. Footer: de drie kolommen sprongen 25% in (QSTool .contactblok),
      waardoor de eerste kolom 116px rechts van het logo begon. */
footer .contactblok{margin-left:0!important;}

/* 3b. Cookiepagina: QSTool zet daar 10px rondom de tekstkolom, waardoor die
       10px rechts van de rest van de site uitkwam. */
.inner-row-col.tekstpaddingomh{padding-left:0!important;padding-right:0!important;}

/* 3c. Afsluitende CTA op de dienstpagina's stond als 980px-kaart midden op de
       pagina, terwijl dezelfde CTA op home, Voor wie en Over IMPCT de volle
       kolom pakt. Claire vroeg bij de dienstpagina's herhaaldelijk om vlakken
       "over heel de breedte"; de kaartvorm zelf blijft ongewijzigd. */
.impct-pillar.fb1708 .fcta{max-width:var(--impct-kolom)!important;}

/* 3d. Contact: de twee gecentreerde kaarten (assistent en formulier) blijven
       bewust gecentreerd, maar stonden op 980 en 982 px door de rand van de
       formulierkaart. Nu allebei exact 980. */
.cc-wrap{box-sizing:border-box!important;}

/* 4. Mobiel dezelfde marge als de rest van de site. */
@media (max-width:860px){
  .contentcontainer,
  .desktopmenu .contentcontainer,
  .websitemenuwrap .contentcontainer,
  .website-row.breakcontainer,
  .fbhero-in,
  .isx-wrap,
  .ipg-in,
  .wb .in,
  .fb1408-band .fb1408-in,
  .lgl .wrap,
  .impct-cta-in,
  .impct-diensten .ds-in,
  .q-in,
  .qs_cookie_popup_container{
    padding-left:var(--impct-marge-mobiel)!important;
    padding-right:var(--impct-marge-mobiel)!important;
  }
}

/* 8-sep: op /contact plakten twee alinea's tegen hun kop, gemeten 0px terwijl de
   rest van de site minimaal 12px heeft. Oorzaak: de CMS-stijl zet
   h2{margin:35px 0 0 0!important}, en dat wint van de paginastijl omdat die geen
   !important heeft. Zelfde declaratie, maar nu met een hogere specificiteit. */
#impct-ai .ai-hero h2{margin:0 0 12px!important;}
#impct-contact .cc-form h2.cc-title{margin:0 0 18px!important;}