.grm-home{font-family:var(--grm-font-body,"Inter",Inter,sans-serif);color:var(--grm-ink,#041E42);background:var(--grm-canvas,#F5F7FA)}
.grm-home h1,.grm-home h2,.grm-home h3,.grm-home h4{font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-weight:800;letter-spacing:-.01em;color:var(--grm-ink,#041E42);margin:0 0 .5rem}
.grm-home__h-acc{color:var(--grm-accent,#1668C7)}
.grm-home__eyebrow{display:inline-block;color:var(--grm-accent,#1668C7);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}

.grm-home__section-head{text-align:center;max-width:720px;margin:0 auto 36px;padding:0 20px}
.grm-home__section-head h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1;margin:0 0 10px}
.grm-home__section-head p{margin:0;color:var(--grm-ink-500,#55636E);font-size:16px;line-height:1.6}

/* Iets meer lucht dan voorheen (60/72): met de categorieband eronder was de
   hero een smalle balk waar kop, zoekbalk en band tegen elkaar aan zaten. */
.grm-home__hero{position:relative;padding:76px 24px 88px;overflow:hidden;background:var(--grm-rij-licht)}


/*
  De bewijsregel onder de hero, naar het model van de proof-row op
  gekeurdevakman.

  Wat die daar levendig maakt en hier ontbrak:
    per belofte een EIGEN icoon, niet vijf keer hetzelfde vinkje
    het icoon in de accentkleur en de tekst in gedempt grijs, zodat er
    kleurverschil in de regel zit
    de tekst VET, niet halfvet, want anders zakt hij weg in de rand erboven
    op een telefoon twee kolommen in plaats van vijf items die zich
    doodknijpen op een regel
  Onze iconen staan standaard op FILL 1 en zijn daarmee massief. De regel van
  gekeurdevakman gebruikt lijniconen, en dat scheelt het meest: FILL 0 maakt
  ze open en licht.
*/
.grm-home__trust{background:var(--grm-paper,#fff);border-top:1px solid var(--grm-line,#D7DEE7);border-bottom:1px solid var(--grm-line,#D7DEE7);padding:4px 24px}
.grm-home__trust-in{
  max-width:var(--grm-w,1424px);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 34px;padding:18px 0;
}
.grm-home__trust-item{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:700;color:var(--grm-ink-500,#55636E);
  white-space:nowrap;
}
.grm-home__trust-in .material-symbols-rounded{
  font-size:19px;flex:0 0 auto;
  color:var(--grm-accent,#1668C7);
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}
@media(max-width:900px){
  .grm-home__trust-in{gap:10px 20px;font-size:13.5px}
}
@media(max-width:620px){
  /* Twee bij twee, elk punt gecentreerd in zijn eigen vak. Met start stonden
     ze alle vier tegen de linkerrand geplakt en hing de rij scheef onder een
     hero die zelf gecentreerd is. */
  .grm-home__trust-in{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;justify-items:center;padding:14px 0;
  }
  .grm-home__trust-item{white-space:normal;align-items:center;justify-content:center;text-align:center;font-size:13px}
  .grm-home__trust-in .material-symbols-rounded{margin-top:0}
  /* KvK-gecheckt eruit op een telefoon. Met vijf punten in twee kolommen bleef
     de laatste alleen op een halve regel staan; met vier is het raster vol. Het
     keurmerk zelf staat op elke bedrijfskaart en op elk profiel, dus die
     boodschap gaat hier niet verloren. */
  .grm-home__trust-item--verified_user{display:none}
}

.grm-home__cats{padding:72px 24px;max-width:var(--grm-w,1424px);margin:0 auto}
.grm-home__cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.grm-home__cat{background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:14px;padding:18px;text-decoration:none;color:var(--grm-ink,#041E42);display:flex;flex-direction:column;gap:10px;transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:0 2px 6px rgba(4,30,66,.04)}
.grm-home__cat:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(4,30,66,.12);border-color:transparent}
.grm-home__cat-ic{width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--c,#103A63) 14%,#fff);color:var(--c,#103A63);display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.grm-home__cat:hover .grm-home__cat-ic{background:color-mix(in srgb,var(--c,#103A63) 22%,#fff)}
.grm-home__cat-ic .material-symbols-rounded{font-size:24px}
.grm-home__cat-name{font-family:var(--grm-font-display);font-weight:800;font-size:15px;line-height:1.2;color:var(--grm-ink,#041E42)}
.grm-home__cat-count{font-size:12px;color:var(--grm-ink-500,#55636E);font-weight:500}
.grm-home__cat-count--empty{color:var(--grm-ink-300,#A8B4BC);font-style:italic}

.grm-home__usps{padding:72px 24px;max-width:var(--grm-w,1424px);margin:0 auto}
.grm-home__usp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grm-home__usp{background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:14px;padding:26px;box-shadow:0 2px 6px rgba(4,30,66,.04);transition:transform .15s,box-shadow .15s}
.grm-home__usp:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(4,30,66,.10)}
.grm-home__usp-ic{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.grm-home__usp-ic--brand{background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63)}
.grm-home__usp-ic--accent{background:rgba(22,104,199,.12);color:var(--grm-accent,#1668C7)}
.grm-home__usp-ic--success{background:rgba(16,58,99,.12);color:var(--grm-success,#103A63)}
.grm-home__usp-ic .material-symbols-rounded{font-size:24px}
.grm-home__usp h3{font-size:17px;margin:0 0 6px}
.grm-home__usp p{margin:0;color:var(--grm-ink-500,#55636E);font-size:14px;line-height:1.55}
@media(max-width:960px){.grm-home__usp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.grm-home__usp-grid{grid-template-columns:1fr}}


.grm-home__featured-foot{text-align:center;margin:36px 0 0}
@media(max-width:920px){}
@media(max-width:600px){}

.grm-home__cta{padding:72px 24px}
.grm-home__cta-inner{max-width:920px;margin:0 auto;background:var(--grm-rij-merk);color:#fff;border-radius:24px;padding:54px 36px;text-align:center;box-shadow:0 24px 60px rgba(4,30,66,.22);position:relative;overflow:hidden}
.grm-home__cta-inner::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.grm-home__cta-inner h2{color:#fff;font-size:clamp(24px,3vw,32px);margin:0 0 12px;position:relative}
.grm-home__cta-inner p{color:rgba(255,255,255,.92);margin:0 0 24px;font-size:16px;line-height:1.55;position:relative}
.grm-home__cta-inner .gm-btn{position:relative}
/*
  Hier stond de sobere variant: dertien pixels grijs met een streepje ertussen
  en zonder iconen. Die klasse hangt nergens meer in de markup, dus deze regels
  deden niets meer behalve verwarren over hoe de bewijsregel eruitziet.
*/
.grm-home__mozaiek{display:grid;min-width:0;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px;max-width:var(--grm-w,1424px);margin:0 auto;padding:0 24px}
.grm-home__moz{min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid #D7DEE7;border-radius:16px;overflow:hidden;transition:box-shadow .18s ease,border-color .18s ease}
.grm-home__moz:hover{border-color:var(--grm-ink-300,#a8b4bc);box-shadow:0 10px 28px rgba(4,30,66,.08)}

.grm-home__moz-cel{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;border-radius:10px;background:#F5F7FA;border:1px solid transparent;text-decoration:none;min-height:44px;transition:background .14s,border-color .14s}
.grm-home__moz-cel:hover{background:#EDF2F8;border-color:#D7DEE7}
.grm-home__moz-cel-naam{overflow-wrap:anywhere;font-size:13px;font-weight:600;color:var(--grm-success-text,#0b2a49);line-height:1.25}
.grm-home__moz-cel-count{font-size:11px;font-weight:700;color:#103A63;background:#fff;border:1px solid #D7DEE7;border-radius:999px;padding:1px 7px;flex-shrink:0}
/*
  De knop onderaan een mozaiektegel.

  Deze stond drie keer in dit bestand, en de VORM hing aan de muis: als kale
  tekstlink, dan als knop maar alleen onder
  ".grm-home__moz:hover .grm-home__moz-alle", en verderop nog eens zonder
  achtergrond. Wie de tegel niet aanraakte zag dus een linkje; wie er overheen
  ging kreeg ineens een knop. Dat is geen hover-effect maar een ander element.

  Nu een definitie, en de knop is altijd een knop. De hover verandert alleen
  de tint en schuift het pijltje op; de vorm blijft staan.
*/
.grm-home__moz-alle{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 2px;padding:10px;border-radius:8px;background:var(--grm-brand-50,#EDF2F8);font-size:13px;font-weight:700;color:var(--grm-brand,#103A63);text-decoration:none;transition:background .14s ease}
.grm-home__moz-alle:hover{background:var(--grm-brand-100,#D3E0EF);color:var(--grm-brand,#103A63);text-decoration:none}
.grm-home__moz-alle .material-symbols-rounded{font-size:15px;transition:transform .16s ease}
.grm-home__moz-alle:hover .material-symbols-rounded{transform:translateX(3px)}
.grm-carrousel{position:relative;max-width:var(--grm-w,1424px);margin:0 auto;padding:0 24px}
.grm-carrousel__spoor{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 14px;scrollbar-width:none}
.grm-carrousel__spoor::-webkit-scrollbar{display:none}
.grm-carrousel__spoor>.grm-bk{flex:0 0 300px;scroll-snap-align:start}
.grm-carrousel__pijl{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid #D7DEE7;background:#fff;color:#103A63;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(4,30,66,.12);transition:background .14s,transform .14s}
.grm-carrousel__pijl:hover{background:#EDF2F8;transform:translateY(-50%) scale(1.05)}
.grm-carrousel__pijl--l{left:2px}
.grm-carrousel__pijl--r{right:2px}
.grm-carrousel__pijl[disabled]{opacity:.35;pointer-events:none}
@media(max-width:680px){.grm-carrousel__spoor>.grm-bk{flex-basis:260px}.grm-carrousel__pijl{display:none}}
.grm-home__moz{padding:16px}
/*
  De naam van de branche staat onderaan het kaartje, boven de knop. Bovenaan
  stond hij ook, en op een telefoon staat hij intussen in de balk bij de
  pijlen; drie keer hetzelfde woord in beeld is er twee te veel. Onderaan is
  hij bovendien de afsluiting van wat je net gezien hebt in plaats van een
  aankondiging van iets dat er nog aan komt. Daarom subtieler dan de oude kop:
  kleiner, minder zwaar en in de rustige inkttint.
*/
.grm-home__moz-voet{margin-top:auto;padding-top:4px}
/* De naam staat boven de tegels. Hij stond eronder, waar hij las als een
   onderschrift bij de foto ernaast in plaats van als de kop van het blok.
   Op een telefoon benoemt de balk boven de rij het kaartje al; twee keer
   dezelfde naam boven elkaar leest als een fout. */
.grm-home__moz-kop{margin:0 2px 10px;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--grm-ink,#041E42)}
@media(max-width:760px){.grm-home__moz-kop{display:none}}
.grm-home__moz-naam{display:none;margin:0 2px 8px;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:14px;font-weight:700;line-height:1.25;letter-spacing:-.005em;color:var(--grm-ink-700,#33424F);text-shadow:none}
.grm-home__moz-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.grm-home__moz-cel{display:flex;flex-direction:column;gap:5px;min-width:0;text-decoration:none;border-radius:0;padding:0;background:none;border:0;min-height:0}
.grm-home__moz-cel:hover{background:none}
.grm-home__moz-cel:hover .grm-home__moz-cel-beeld{border-color:var(--c,#103A63)}
.grm-home__moz-cel:hover .grm-home__moz-cel-naam{color:var(--c,#103A63)}
.grm-home__moz-cel-beeld{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--c,#103A63) 9%,#fff);border:1px solid transparent;transition:border-color .16s}
/* De foto vult de cel (cover snijdt bij, rekt nooit uit). Met het element in
   de selector: een tel zwaarder dan de themaregel .main-content img
   {height:auto}, die later laadt en anders wint; op een nog niet geladen
   lazy-foto is auto hoogte nul en dan begint het laden nooit. */
span.grm-home__moz-cel-beeld img{width:100%;height:100%;object-fit:cover;background:#fff}
.grm-home__moz-cel-beeld .material-symbols-rounded{font-size:26px;color:var(--c,#103A63)}
.grm-home__moz-cel-naam{font-size:12.5px;font-weight:600;color:var(--grm-success-text,#0b2a49);line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.grm-home__hero-inner{display:block;max-width:900px;margin:0 auto;text-align:center}
.grm-home__hero-left{max-width:none;width:100%}
.grm-home__h1{font-size:clamp(30px,4.4vw,52px);line-height:1.08}
.grm-home__sub{max-width:640px;margin-left:auto;margin-right:auto}

.grm-zoekbalk{display:flex;align-items:center;width:100%;max-width:720px;margin:26px auto 0;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(4,30,66,.16);overflow:hidden;text-align:left;min-width:0}
.grm-zoekbalk__veld{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;height:58px;padding:0 14px}
.grm-zoekbalk__veld .material-symbols-rounded{flex:0 0 auto;font-size:21px;color:#55636E}
.grm-zoekbalk__veld input{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;font-family:inherit;font-size:15.5px;color:#041E42}
.grm-zoekbalk__veld input::placeholder{color:var(--grm-ink-400,#7A8794)}
.grm-zoekbalk__knop{flex:0 0 auto;height:58px;padding:0 30px;border:0;background:#1668C7;color:#fff;font-family:inherit;font-weight:700;font-size:16px;cursor:pointer;transition:background .16s}
.grm-zoekbalk__knop:hover{background:#103A63}


.grm-home__producten{padding:56px 0 8px}
.grm-home__producten .grm-carrousel__spoor .grm-pk{flex:0 0 236px;max-width:236px}

@media (max-width:760px){
  .grm-zoekbalk{flex-wrap:wrap;border-radius:10px;box-shadow:0 6px 18px rgba(4,30,66,.14)}
  .grm-zoekbalk__veld{flex:1 1 100%;height:50px}
  .grm-zoekbalk__knop{flex:1 1 100%;height:50px}
  .grm-home__producten .grm-carrousel__spoor .grm-pk{flex:0 0 178px;max-width:178px}
}


/*
  Het blok "de groothandelskaart van Nederland".

  Hier stonden vier koppen en zeven alinea's op een rij en verder niets. Wat
  wij doen is nou juist iets wat je kunt laten zien: twaalf punten op de
  werkelijke plek van de provinciehoofdsteden, en vanuit elf ervan een lijn
  naar de provincie die je hebt gekozen. Twee kanten die bij elkaar komen.

  De kaart is opzettelijk rustig gehouden: het merkverloop als vlak, witte
  punten en dunne lijnen. Een kaart met dertien kleuren zou een dashboard zijn
  en geen uitnodiging.
*/
.grm-samen{padding:64px 0 72px;background:var(--grm-bg,#F5F7FA);border-top:1px solid var(--grm-line,#D7DEE7)}
.grm-samen__in{max-width:var(--grm-w,1424px);margin:0 auto;padding:0 24px}
.grm-samen__kop{max-width:66ch;margin:0 0 28px}
.grm-samen__eyebrow{display:inline-block;margin-bottom:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--grm-accent,#1668C7)}
.grm-samen__kop h2{margin:0 0 12px;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.015em;color:var(--grm-ink,#041E42)}
.grm-samen__acc{color:var(--grm-accent,#1668C7)}
.grm-samen__kop p{margin:0;font-size:16px;line-height:1.7;color:var(--grm-ink-700,#33424F)}

.grm-samen__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch;margin:0 0 22px}
/*
  Twee heel verschillende kaarten deelden de naam grm-samen__kaart: het vlak met
  de landkaart hierboven, en de drie uitlegkaarten verderop. De regel voor die
  uitlegkaarten staat later in dit bestand en won dus, ook op de landkaart.

  Gevolg: het kaartvlak kreeg wit in plaats van het merkverloop, terwijl de
  tekening zelf in wit is getekend. Bolletjes wit op wit, lijnen wit op wit,
  provincienamen wit op wit. De kaart stond er compleet en werkte ook, klikken
  wisselde netjes van provincie, maar je zag een leeg vlak.

  Allebei de regels staan nu op hun eigen houder, zodat ze elkaar niet meer
  kunnen overschrijven.
*/
/* Een wit kaartje, zoals de rest van de sectie. Het donkere verloopvlak
   maakte de kaart een eiland: licht kaartmateriaal in een donkere lijst met
   witte pijltjes eronder. Nu vult de kaart het kaartje en staan de
   provincies er als filterknoppen onder. */
.grm-samen__grid .grm-samen__kaart{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:14px;border-radius:20px;background:#fff;border:1px solid var(--grm-line,#D7DEE7);box-shadow:0 14px 38px rgba(4,30,66,.10)}
/* De kaart zelf. Een echte kaart met open kaartmateriaal in plaats van de
   natekening die hier stond; die klopte ongeveer, en ongeveer is bij een
   landkaart niet goed genoeg.

   De bak heeft een vaste verhouding: zonder hoogte tekent Leaflet in nul
   pixels en zie je een leeg vlak zonder dat er iets misgaat. */
.grm-samen__leaflet{
  width:100%;max-width:none;aspect-ratio:4/5;min-height:340px;
  border-radius:14px;overflow:hidden;
  background:#EAEFF5;border:1px solid var(--grm-line-soft,#EAEFF5);
}
@media(max-width:900px){.grm-samen__leaflet{aspect-ratio:1/1;min-height:300px}}
/* Het kaartmateriaal is licht en de sectie is donker; een randje eromheen
   voorkomt dat de kaart in het donker lijkt te zweven. */
.grm-samen__leaflet .leaflet-container{background:#EAEFF5;font-family:var(--grm-font,'Inter',sans-serif)}

/* De bol per provincie. Het getal staat erin, want een bol zonder getal is
   precies het bolletje waar niemand iets aan had. */
.grm-samen__marker{background:none;border:0}
.grm-samen__markerbol{
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;cursor:pointer;
  background:var(--grm-brand,#103A63);color:#fff;
  border:2px solid #fff;box-shadow:0 4px 12px rgba(4,30,66,.45);
  font-size:13px;font-weight:800;line-height:1;
  transition:transform .16s ease,background .16s ease;
}
.grm-samen__marker.is-leeg .grm-samen__markerbol{background:var(--grm-ink-400,#7A8794)}
.grm-samen__marker:hover .grm-samen__markerbol{transform:scale(1.08)}
.grm-samen__marker.is-actief .grm-samen__markerbol{
  background:var(--grm-accent,#1668C7);transform:scale(1.14);
  box-shadow:0 0 0 5px rgba(22,104,199,.28),0 4px 12px rgba(4,30,66,.45);
}
.grm-samen__markernaam{
  position:absolute;left:50%;top:100%;transform:translate(-50%,4px);
  padding:2px 7px;border-radius:6px;white-space:nowrap;
  background:rgba(255,255,255,.94);color:var(--grm-ink,#041E42);
  font-size:11px;font-weight:700;opacity:0;transition:opacity .16s ease;
}
.grm-samen__marker:hover .grm-samen__markernaam,
.grm-samen__marker.is-actief .grm-samen__markernaam{opacity:1}

/* Zonder Leaflet blijft het blok werken: de provincies als knoppen. */
.grm-samen__leaflet.is-zonderkaart{
  display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;
  padding:14px;aspect-ratio:auto;min-height:0;
}
.grm-samen__terugval{
  padding:8px 13px;border-radius:99px;cursor:pointer;
  border:1px solid var(--grm-line,#D7DEE7);background:#fff;color:var(--grm-ink-700,#33424F);
  font:inherit;font-size:13px;font-weight:700;
}
.grm-samen__terugval:hover{border-color:var(--grm-accent,#1668C7);color:var(--grm-brand,#103A63)}

.grm-samen__filter{display:flex;flex-wrap:wrap;gap:7px;width:100%}
.grm-samen__filterknop{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;border:1px solid var(--grm-line,#D7DEE7);background:#fff;color:var(--grm-ink-700,#33424F);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease}
.grm-samen__filterknop:hover{border-color:var(--grm-accent,#1668C7);color:var(--grm-brand,#103A63)}
.grm-samen__filterknop.is-actief{background:var(--grm-brand,#103A63);border-color:var(--grm-brand,#103A63);color:#fff}
.grm-samen__filtertel{font-size:11px;font-weight:800;padding:1px 6px;border-radius:999px;background:var(--grm-bg,#F5F7FA);color:var(--grm-ink-500,#55636E)}
.grm-samen__filterknop.is-actief .grm-samen__filtertel{background:rgba(255,255,255,.18);color:#fff}

.grm-samen__paneel{display:flex;min-width:0}
.grm-samen__kaartje{display:flex;flex-direction:column;gap:10px;width:100%;padding:24px 24px 22px;border-radius:20px;background:#fff;border:1px solid var(--grm-line,#D7DEE7)}
.grm-samen__kaartje[hidden]{display:none}
.grm-samen__provkop{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--grm-accent,#1668C7)}
.grm-samen__cijfer{margin:0;font-size:16px;line-height:1.4;color:var(--grm-ink-700,#33424F)}
.grm-samen__cijfer strong{display:block;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:clamp(34px,5vw,46px);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--grm-ink,#041E42)}
.grm-samen__regel{margin:0;font-size:14.5px;line-height:1.65;color:var(--grm-ink-500,#55636E)}

.grm-samen__zijden{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--grm-line-soft,#EAEFF5);display:flex;flex-direction:column;gap:10px}
.grm-samen__zijden li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.6;color:var(--grm-ink-700,#33424F)}
.grm-samen__zijden .material-symbols-rounded{flex:0 0 auto;font-size:20px;color:var(--grm-accent,#1668C7)}
.grm-samen__zijden b{color:var(--grm-ink,#041E42)}

.grm-samen__knop{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:12px 16px;border-radius:10px;background:var(--grm-brand,#103A63);color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:background .16s ease}
.grm-samen__knop:hover{background:var(--grm-ink,#041E42);color:#fff;text-decoration:none}
.grm-samen__knop .material-symbols-rounded{font-size:18px;transition:transform .16s ease}
.grm-samen__knop:hover .material-symbols-rounded{transform:translateX(3px)}




@media(max-width:900px){
  .grm-samen__grid{grid-template-columns:minmax(0,1fr)}
  .grm-samen__svg{max-width:330px}
}
@media(max-width:600px){
  .grm-samen{padding:44px 0 52px}
  .grm-samen__in{padding:0 16px}
  .grm-samen__grid .grm-samen__kaart{padding:14px 10px 12px;border-radius:16px}
  .grm-samen__kaartje{padding:20px 18px}
  .grm-samen__label{font-size:12px}
  .grm-samen__punt.is-actief .grm-samen__label{font-size:13.5px}
}

.grm-prodtabs{max-width:var(--grm-w,1424px);margin:0 auto;padding:0 24px}
.grm-prodtabs__balk{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 22px}
.grm-prodtabs__tab{padding:10px 20px;background:#fff;border:2px solid var(--grm-line,#D7DEE7);border-radius:var(--grm-r-pill,999px);cursor:pointer;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:14.5px;font-weight:700;color:var(--grm-ink-500,#55636E);transition:border-color .14s ease,background .14s ease,color .14s ease}
.grm-prodtabs__tab:hover{border-color:var(--grm-accent,#1668C7);color:var(--grm-ink,#041E42)}
.grm-prodtabs__tab.is-actief{background:var(--grm-brand,#103A63);border-color:var(--grm-brand,#103A63);color:#fff}
.grm-prodtabs__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.grm-prodtabs__grid[hidden]{display:none}
@media(max-width:1000px){.grm-prodtabs__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:560px){.grm-prodtabs{padding:0 16px}.grm-prodtabs__tab{flex:1 1 auto;padding:9px 12px;font-size:13.5px}}

/* De opmaak van de rij "Nieuw op de kaart" stond hier: .grm-samen__nieuw en
   .grm-samen__kop--sub, plus de regel die de lucht tussen die tussenkop en de
   schuifrij eronder wegnam. Die rij is van de homepage af, en die twee klassen
   werden nergens anders gebruikt, dus deze regels golden voor niets meer. */

/* De opmaak van de beloftenrij stond hier. Die rij is van de homepage af en
   die klassen werden nergens anders gebruikt, dus deze regels golden voor
   niets meer. */

.grm-samen__uitleg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;margin:30px 0 16px}
/* De kolom stond hierboven in de gedeelde regel en die geldt nu alleen nog
   voor het kaartvlak. Hij hoort hier ook, anders zakt de knop onderaan de
   uitlegkaart niet meer naar beneden. */
.grm-samen__uitleg .grm-samen__kaart{display:flex;flex-direction:column;padding:20px;background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:14px}
.grm-samen__kaart h3{margin:0 0 10px;font-family:var(--grm-font-display,'Inter Tight',sans-serif);font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--grm-ink,#041E42)}
.grm-samen__kaart p{margin:0 0 10px;font-size:14px;line-height:1.65;color:var(--grm-ink-500,#55636E)}
.grm-samen__kaart p:last-child{margin-bottom:0}
/* De kaarten zijn al een flexkolom via de regel hierboven in dit bestand, die
   .grm-samen__kaart deelt met het kaartblok. Daar hoeft hier dus niets bij;
   margin-top:auto is genoeg om de knop onderaan te laten hangen, ook als de
   ene kaart twee alinea's heeft en de andere een. align-self houdt hem links,
   want die gedeelde regel centreert zijn kinderen. */
.grm-samen__kaart-cta{
  margin-top:auto;padding-top:14px;
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:14px;font-weight:700;line-height:1.3;
  color:var(--grm-accent,#1668C7);text-decoration:none;
}
.grm-samen__kaart-cta:hover{color:var(--grm-brand,#103A63)}
.grm-samen__kaart-cta:hover span{transform:translateX(2px)}
.grm-samen__kaart-cta span{font-size:18px;transition:transform .14s ease}
.grm-samen__kaart strong{color:var(--grm-ink,#041E42)}
@media(max-width:1000px){.grm-samen__uitleg{grid-template-columns:repeat(2,minmax(0,1fr))}}
/*
  Op een telefoon stonden de drie kaarten onder elkaar. Samen werd dat een half
  scherm aan uitlegtekst die je langs moet scrollen voor je bij de kaartsectie
  bent. Naast elkaar in een schuifrij, net als de stappenrij hierboven: drie
  kolommen van vierentachtig procent, zodat de volgende kaart net over de rand
  komt en meteen te zien is dat er meer staat.

  De uitlijning staat er expliciet bij. De kaarten deelden hun regel eerder met
  het landkaartvlak, en die centreerde zijn inhoud; de koppen stonden daardoor
  in het midden in plaats van links. Die gedeelde regel is inmiddels
  afgebakend, maar links uitlijnen is hier de bedoeling en dat hoort te staan
  waar het geldt.
*/
@media(max-width:680px){
  .grm-samen__uitleg{
    grid-template-columns:repeat(3,84%);
    gap:12px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    padding:0 16px 4px;margin-inline:-16px;
  }
  .grm-samen__uitleg::-webkit-scrollbar{display:none}
  .grm-samen__uitleg .grm-samen__kaart{
    padding:16px;
    scroll-snap-align:center;
    align-items:stretch;text-align:left;
  }
  .grm-samen__uitleg .grm-samen__kaart h3,
  .grm-samen__uitleg .grm-samen__kaart p{text-align:left}
}

/* Het land onder de twaalf punten. Zacht wit op het blauwe vlak: het moet de
   vorm geven waaraan je Nederland herkent, zonder de punten te overstemmen,
   want die dragen de cijfers. */
.grm-samen__land{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.30);stroke-width:1.2;stroke-linejoin:round}