.grm-f{background:#041E42;color:#A8B4BC;padding:60px 0 0;font-size:14px;font-family:"Inter",Inter,sans-serif}
.grm-f a{color:#A8B4BC;text-decoration:none;transition:color .14s}
.grm-f a:hover{color:#fff}
.grm-f__in{max-width:var(--grm-w,1424px);margin:0 auto;padding:0 24px}

.grm-f__trust{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:18px 24px;background:rgba(255,255,255,.04);border-radius:14px;margin-bottom:48px;border:1px solid rgba(255,255,255,.07)}
.grm-f__trust-i{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--grm-line-soft,#eaeff5)}
.grm-f__trust-i .material-symbols-rounded{color:var(--grm-accent,#1668C7);font-size:18px}

/* Merkblok plus precies vier linkkolommen die samen de breedte vullen. De
   vijfde strook was de mailinglijst; die is weg, en een leeg vijfde spoor zou
   de vier kolommen smaller maken dan nodig. */
.grm-f__grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px 32px;margin-bottom:48px}

.grm-f__brand{}
.grm-f__brand-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:"Inter Tight",sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:14px;text-decoration:none}
.grm-f__brand-logo:hover{color:#fff}
.grm-f__brand-logo svg{width:auto;height:36px;flex-shrink:0}
.grm-f__brand-logo b{color:#fff}
.grm-f__brand-logo .dot{color:#1668C7}
.grm-f__brand-p{margin:0 0 18px;color:var(--grm-ink-300,#a8b4bc);line-height:1.6;max-width:280px;font-size:13.5px}
.grm-f__brand-trust{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);color:var(--grm-line-soft,#eaeff5);padding:8px 14px;border-radius:99px;font-size:12px;font-weight:700;margin-bottom:18px;border:1px solid rgba(255,255,255,.2)}
.grm-f__brand-trust .material-symbols-rounded{font-size:14px;color:var(--grm-accent,#1668C7)}
.grm-f__social{display:flex;gap:8px}
.grm-f__social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.07);color:#fff !important;display:flex;align-items:center;justify-content:center;transition:background .14s,transform .14s}
.grm-f__social a:hover{background:#103A63;transform:translateY(-2px);color:#fff}
.grm-f__social svg{width:18px;height:18px;display:block}

/* Even groot als het branchekopje verderop: op 14px vielen de vier
   kolomtitels weg tussen hun eigen links. */
.grm-f__col h4{color:#fff;font-family:"Inter Tight",sans-serif;font-size:17px;font-weight:800;margin:0 0 14px;letter-spacing:-.01em}
.grm-f__col a{display:block;padding:5px 0;font-size:13.5px;font-weight:500}
.grm-f__col a:hover{transform:translateX(2px);transition:transform .14s,color .14s}

.grm-f__branches{padding:28px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:24px}
/*
  Het kopje boven de chips stond in kapitalen van 13px op 65 procent dekking.
  Dat is de opmaak van een systeemlabel, en samen met het woord "hoofdgroep"
  las het blok als beheerscherm in plaats van als navigatie. Gewone zin,
  gewone letters, volle dekking.
*/
.grm-f__branches h4{color:#fff;font-family:"Inter Tight",sans-serif;font-size:17px;font-weight:700;margin:0 0 14px;letter-spacing:-.01em}
/*
  Hier stond een tweede opmaak voor dezelfde chips: kleine pillen van 12px in
  een flexrij. Die werd verderop in dit bestand volledig overschreven door de
  rasterversie, dus hij deed niets en hield alleen twee gedaanten van hetzelfde
  element in leven. Weggehaald; de rasterversie staat onder het kopje
  "De branchekaartjes in de voet".
*/

/* Provincies en de kleine lettertjes zijn uitklappers geworden. Op een laptop
   staan ze open en is het driehoekje weg, zodat er niets verandert aan wat je
   daar gewend bent; op een telefoon staan ze dicht en kosten ze een regel in
   plaats van een half scherm. */
.grm-f__regio > summary,
.grm-f__bottom > summary{list-style:none;cursor:default}
.grm-f__regio > summary::-webkit-details-marker,
.grm-f__bottom > summary::-webkit-details-marker{display:none}
.grm-f__regio > summary strong,
.grm-f__bottom > summary strong{display:block;color:#fff;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:800;margin-bottom:8px;opacity:.65;font-family:"Inter Tight",sans-serif}
@media(max-width:680px){
  .grm-f__regio > summary,
  .grm-f__bottom > summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0}
  .grm-f__regio > summary strong,
  .grm-f__bottom > summary strong{margin:0}
  .grm-f__regio > summary::after,
  .grm-f__bottom > summary::after{content:"expand_more";font-family:"Material Symbols Rounded";font-size:20px;color:var(--grm-ink-300,#a8b4bc);transition:transform .18s}
  .grm-f__regio[open] > summary::after,
  .grm-f__bottom[open] > summary::after{transform:rotate(180deg)}
  .grm-f__regio,
  .grm-f__bottom{border-top:1px solid rgba(255,255,255,.08)}
  /* De branchesectie sluit al af met een lijn onderaan. Samen met de lijn
     boven de provincies stonden er twee streepjes pal onder elkaar met een
     paar pixels ertussen, en dat leest als een fout in plaats van als een
     scheiding. Eén lijn tussen twee blokken is genoeg. */
  .grm-f__branches{border-bottom:0}
}

.grm-f__regio{padding:0 0 24px;font-size:12.5px;color:var(--grm-ink-300,#a8b4bc);line-height:1.9}
.grm-f__regio strong{display:block;color:#fff;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:800;margin-bottom:8px;opacity:.65;font-family:"Inter Tight",sans-serif}
.grm-f__regio a{margin-right:4px;color:var(--grm-ink-300,#a8b4bc)}
.grm-f__regio a:hover{color:#fff}
.grm-f__regio a:not(:last-child)::after{content:" · ";color:var(--grm-ink-500,#55636e);margin-left:4px}

.grm-f__bottom{padding:22px 0;border-top:1px solid rgba(255,255,255,.08)}
.grm-f__bottom-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.grm-f__bottom-left{font-size:12px;color:var(--grm-ink-300,#a8b4bc)}
.grm-f__bottom-left strong{color:var(--grm-line,#d7dee7);font-weight:700}
.grm-f__bottom-links{display:flex;gap:18px;font-size:12px;flex-wrap:wrap}
.grm-f__bottom-links a{color:var(--grm-ink-300,#a8b4bc)}
.grm-f__bottom-links a:hover{color:#fff}

@media(max-width:1100px){
  .grm-f__grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .grm-f__brand{grid-column:1/-1}
}
@media(max-width:680px){
  .grm-f{padding:40px 0 0}
  .grm-f__trust{padding:14px 16px;gap:14px;margin-bottom:36px}
  .grm-f__grid{grid-template-columns:1fr;gap:28px;margin-bottom:32px}
  .grm-f__brand-p{max-width:none}
  .grm-f__bottom-in{flex-direction:column;align-items:flex-start;gap:10px}
}

/*
  De branchekaartjes in de voet.

  Ze lazen als een systeemlijst: grijsblauwe tekst van 13,5px op een donker
  vlak, een teller in een grijs blokje er direct achteraan, en tegels met
  weinig lucht. Dat is af te lezen, maar je LEEST het niet.

  Wat er is veranderd en waarom:
    de tekst is bijna wit in plaats van grijsblauw, want op een donkere voet
    verdwijnt #eaeff5 half
    15px in plaats van 13,5px, en gewicht 600 in plaats van dik, zodat het
    een woord is en geen label
    de teller staat RECHTS uitgelijnd en in de accenttint, zodat de dertien
    rijen onder elkaar uitlijnen en het getal een cijfer is en geen badge
    meer lucht: 13px verticaal en een zachtere ronding
*/
.grm-f__branche-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px}
.grm-f__branche-chips a{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#F2F6FA;font-size:15px;font-weight:600;line-height:1.3;min-width:0;transition:background .16s,border-color .16s,color .16s,transform .16s}
.grm-f__branche-chips a:hover{background:rgba(255,255,255,.12);border-color:rgba(156,196,238,.45);color:#fff;transform:translateY(-1px)}
.grm-f__branche-chips a>.material-symbols-rounded{font-size:21px;color:var(--grm-accent-200,#9CC4EE);flex:0 0 auto}
.grm-f__branche-chips .grm-tel{margin-left:auto;min-width:26px;height:22px;padding:0 8px;border-radius:11px;background:rgba(156,196,238,.18);color:var(--grm-accent-200,#9CC4EE);font-size:12.5px;font-weight:700}
.grm-f__branche-chips a:hover .grm-tel{background:rgba(156,196,238,.28);color:#fff}
.grm-f__branche-alle{justify-content:space-between;background:rgba(156,196,238,.16)!important;border-color:rgba(156,196,238,.38)!important;color:#fff!important;font-weight:700!important}
.grm-f__branche-alle .material-symbols-rounded{font-size:19px;color:#fff}

@media (max-width:760px){
  /*
    Op een telefoon stonden er twee kolommen van 12,5px naast elkaar. Een
    naam als "Zakelijk & Verpakking" past daar niet in en brak af of liep
    achter de teller. Een kolom, volle breedte, en dezelfde leesbare maat als
    op een laptop.
  */
  .grm-f__branche-chips{grid-template-columns:1fr;gap:8px}
  .grm-f__branche-chips a{padding:13px 14px;font-size:15px;gap:11px}
  .grm-f__col h4[role=tab],.grm-f__branches h4[role=tab]{cursor:pointer;display:flex;align-items:center;justify-content:space-between}
  .grm-f__col h4[role=tab]::after,.grm-f__branches h4[role=tab]::after{content:"expand_more";font-family:"Material Symbols Rounded";font-size:20px;transition:transform .2s}
  .grm-f__col h4[aria-expanded=true]::after,.grm-f__branches h4[aria-expanded=true]::after{transform:rotate(180deg)}
  .grm-f__col [role=tabpanel][hidden],.grm-f__branches [role=tabpanel][hidden]{display:none}
}