/* =========================================================
   Spete.nl ICT Diensten - stylesheet
   Eén stylesheet voor de hele site.

   HUISSTIJL
   De kleuren en lettertypes hieronder komen uit het brandbook:
   Datastroom (#004587) en Bitblauw (#162c6b) als de twee dragende
   blauwen, wit als derde hoofdkleur, Oswald als hoofdlettertype en
   Roboto als secundair lettertype. Wie hier iets verandert, wijkt
   af van het brandbook; doe dat alleen in overleg.
   ========================================================= */

:root{
  /* --- Merkkleuren uit het brandbook --- */
  --brand:#004587;          /* Datastroom, de primaire merkkleur */
  --brand-dark:#162c6b;     /* Bitblauw, de hover en de diepe stop */
  --brand-mid:#36618c;      /* het lichtere blauw uit het brandbook */
  --brand-darker:#0f2a5c;   /* tussenstop in de heroverlopen */
  --brand-rgb:0,69,135;     /* Datastroom als losse kanalen, voor rgba() */
  /* Accentkleur. Op lichte secties is dit Datastroom, op donkere
     secties wordt dezelfde variabele verderop overschreven naar wit.
     Zo blijft de site binnen de huisstijl, zonder extra kleur. */
  --accent:#004587;
  --accent-soft:#e7eef7;

  /* --- Donkere secties --- */
  --navy:#162c6b;           /* Bitblauw is het donkere fundament */
  --navy-2:#1d3a82;         /* kaarten binnen een donkere sectie */

  /* --- Tekst --- */
  --ink:#10203a;            /* koppen */
  --body:#4d5a68;           /* bodytekst */
  --body-light:#a8bcd8;     /* bodytekst op donker */

  /* --- Vlakken en lijnen --- */
  --bg:#ffffff;
  --bg-soft:#f4f7fb;
  --line:#e2e9f2;
  --line-hover:#b7cfe8;     /* rand van een kaart bij hover */
  --line-dark:rgba(255,255,255,.14);

  /* --- Signaalkleuren: meldingen, nooit een palet --- */
  --sterren-goud:#f5b400;
  --sterren-leeg:#d7dee7;

  /* --- Vorm --- */
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --r-pil:99px;
  --shadow-sm:0 2px 8px rgba(16,32,58,.06);
  --shadow:0 10px 30px rgba(16,32,58,.09);
  --shadow-lg:0 24px 60px rgba(16,32,58,.14);
  --container:1200px;

  /* =======================================================
     DESIGNTOKENS
     Eén bron voor maat, ritme en beweging. Losse waarden in de
     componenten hieronder horen naar een van deze tokens te wijzen.
     ======================================================= */

  /* --- Semantische kleuren (verwijzen naar de merkkleuren) --- */
  --color-primary:var(--brand);
  --color-secondary:var(--brand-dark);
  --color-background:var(--bg);
  --color-surface:var(--bg-soft);
  --color-surface-elevated:#ffffff;
  --color-text:var(--ink);
  --color-text-secondary:var(--body);
  --color-muted:#6b7785;          /* bijschriften; 4,6:1 op wit */
  --color-border:var(--line);
  --color-border-strong:#c9d5e3;  /* invoervelden: zichtbaar genoeg om te vinden */
  --color-success:#1f7a4d;
  --color-warning:#9a5b00;
  --color-error:#b3261e;
  --color-info:var(--brand);

  /* --- Spacing: stappen van 4px --- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-24:96px;
  /* Sectieritme: de verticale maat tussen blokken, op één plek. */
  --section-y:clamp(var(--space-16),7vw,var(--space-24));
  --section-y-tight:clamp(var(--space-10),4vw,var(--space-16));
  --gutter:var(--space-6);

  /* --- Typografie: vaste schaal --- */
  --text-xs:.8125rem;    /* 13px: labels in kapitalen, meta */
  --text-sm:.875rem;     /* 14px: bijschrift, hulptekst */
  --text-md:.9375rem;    /* 15px: tekst in kaarten */
  --text-base:1rem;      /* 16px: lopende tekst */
  --text-lg:1.125rem;    /* 18px: kleine kop, inleiding in kaart */
  --text-xl:1.25rem;     /* 20px: h3 */
  --text-2xl:1.5rem;     /* 24px */
  --text-lead:clamp(1.0625rem,1.4vw,1.1875rem);
  --text-h3:clamp(var(--text-lg),1.6vw,var(--text-xl));
  --text-h2:clamp(1.75rem,3.4vw,2.5rem);
  --text-h1:clamp(2.125rem,5vw,3.5rem);
  --text-stat:clamp(2rem,3.4vw,2.75rem);
  --leading-tight:1.15;
  --leading-snug:1.4;
  --leading-body:1.7;
  --tracking-caps:.12em;
  --tracking-label:.06em;

  /* --- Elevation: drie niveaus plus de knop --- */
  --shadow-knop:0 6px 18px rgba(var(--brand-rgb),.24);
  --shadow-knop-hover:0 10px 24px rgba(var(--brand-rgb),.3);
  --shadow-op-donker:0 8px 22px rgba(0,0,0,.22);

  /* --- Beweging --- */
  --duration-fast:.15s;
  --duration:.2s;
  --duration-slow:.4s;
  --ease:cubic-bezier(.2,.6,.2,1);
  --lift:-3px;           /* kaarten bij hover */
  --lift-knop:-1px;      /* knoppen bij hover */

  /* --- Focus --- */
  --focus-ring:3px solid var(--accent);
  --focus-offset:2px;

  /* --- Aanraakdoelen --- */
  --touch:48px;
  --touch-sm:40px;

  /* --- Kaarten: één binnenmaat voor elk kaarttype --- */
  --card-padding:var(--space-8);

  /* --- Typografie uit het brandbook --- */
  --font-display:"Oswald","Roboto Condensed","Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Roboto","Open Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

@media (max-width:640px){:root{--card-padding:var(--space-6)}}

/* =========================================================
   BASIS
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
/* Basis voor alle inline iconen. Elke specifiekere regel overschrijft de
   maat. Zonder dit vangnet rekt een svg zonder afmeting zich beeldvullend
   uit en wordt die zwart gevuld. */
svg{width:1em;height:1em;fill:none;stroke:currentColor}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
/* Een link in lopende tekst is onderstreept: alleen kleur is niet genoeg
   (WCAG 1.4.1). Knoppen, navigatie en kaarten hebben een eigen vorm. */
:where(main) :is(p,li,td,dd,figcaption) > a:not([class]){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
:where(main) :is(p,li,td,dd,figcaption) > a:not([class]):hover{text-decoration-thickness:2px}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.15;
  letter-spacing:.005em;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:var(--text-h1)}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3)}
/* Een kop die semantisch een h2 is maar in de schaal op h3-niveau hoort,
   zoals kolomkoppen direct onder de paginatitel. */
.kop-h3{font-size:var(--text-h3)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin-bottom:.4em}
strong,b{color:var(--ink);font-weight:600}
/* Verticaal ritme. De marges hierboven (p, h1-h5, ul) zijn de enige bron
   van ruimte tussen tekstblokken; WordPress genereert zelf geen blokafstand
   meer (theme.json: blockGap null). Het laatste element in een blok neemt
   zijn ondermarge niet mee, anders krijgt elke kaart en sectie onderaan
   extra lucht. :where houdt dit op de laagste specificiteit, zodat een
   component met een eigen marge altijd wint. */
:where(.wp-block-group,.wp-block-column,.wp-block-post-content,.wp-block-details,.wp-block-quote,.container) > :last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-10) 0}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:4px}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
/* Smalle leeskolom. De container zelf blijft even breed als elke andere,
   zodat de linkerkant van de tekst gelijk ligt met de paginakop erboven;
   alleen de inhoud wordt smaller. Gecentreerde blokken blijven gecentreerd. */
.container--narrow{max-width:var(--container)}
:where(.container--narrow) > *{max-width:812px}
:where(.container--narrow) > :is(.center,.section-head.center,.faq){margin-left:auto;margin-right:auto}
:where(.container--narrow.center) > *{margin-left:auto;margin-right:auto}
/* Opent een smalle kolom met een gecentreerde sectiekop, dan is het een
   gecentreerde compositie: alle blokken eronder staan als geheel in het
   midden (de tekst ín die blokken houdt zijn eigen uitlijning). */
.container--narrow:has(> .section-head.center:first-child) > *{margin-left:auto;margin-right:auto}

/* Op alle donkere vlakken wordt het accent wit. Alles wat var(--accent)
   gebruikt volgt automatisch, dus streepjes, vinkjes en iconen. */
.topbar,.hero,.page-hero,.section--dark,.cta,.footer{--accent:#ffffff}

.section{padding:var(--section-y) 0}
.section--soft{background:var(--bg-soft)}
.section--tight{padding:var(--section-y-tight) 0}
.section--dark{background:var(--navy);color:var(--body-light)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark strong,.section--dark b{color:#fff}
/* Een link in lopende tekst op een donkere sectie is anders onleesbaar
   (Spete-blauw op navy, ~2,6:1). Geldt voor elke sectie die op --accent:#fff
   overschakelt, niet alleen .section--dark. */
.section--dark p a,.hero p a,.page-hero p a,.cta p a{color:var(--accent);text-decoration:underline}

.center{text-align:center}
.lead{font-size:var(--text-lead);line-height:1.75;max-width:64ch}
.center .lead{margin-left:auto;margin-right:auto}
.section-head{max-width:720px;margin-bottom:clamp(var(--space-10),4vw,var(--space-16))}
.section-head.center{margin-left:auto;margin-right:auto}
.section-head p:last-child{margin-bottom:0}

/* =========================================================
   VORMTAAL: DE PRINTPLAAT
   -----------------------------------------------------------------
   Het brandbook leidt de vormtaal af van een printplaat. Drie
   toepassingen daaruit staan hier: de baan met soldeereiland als
   opsommingsteken, de scheidingslijn tussen een titel en de tekst
   eronder, en het patroon als zeer licht achtergrondvlak.

   De svg's staan in assets/brand en worden als masker gebruikt, niet
   als achtergrondafbeelding. Een svg die als afbeelding wordt geladen
   erft currentColor niet, dus zou het patroon altijd zwart zijn. Met
   een masker bepaalt background-color de kleur en volgt het patroon
   vanzelf de omslag van het accent op donkere secties.
   ========================================================= */

/* De scheidingslijn onder een sectiekop: een baan die in een
   soldeereiland eindigt. Staat standaard onder elke sectiekop en is
   met .section-head--vlak uit te zetten. */
.section-head > h1 + .lead,
.section-head > h2 + .lead,
.section-head > h3 + .lead{position:relative;padding-top:var(--space-6)}
.section-head > h1 + .lead::before,
.section-head > h2 + .lead::before,
.section-head > h3 + .lead::before{
  content:"";position:absolute;top:8px;left:0;width:64px;height:12px;
  background-color:var(--accent);
  mask-image:url(../brand/baan.svg);-webkit-mask-image:url(../brand/baan.svg);
  mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;
  mask-size:64px 12px;-webkit-mask-size:64px 12px;
}
.section-head.center > h1 + .lead::before,
.section-head.center > h2 + .lead::before,
.section-head.center > h3 + .lead::before{left:50%;transform:translateX(-50%)}
.section-head--vlak > h1 + .lead,
.section-head--vlak > h2 + .lead,
.section-head--vlak > h3 + .lead{padding-top:0}
.section-head--vlak > h1 + .lead::before,
.section-head--vlak > h2 + .lead::before,
.section-head--vlak > h3 + .lead::before{display:none}

/* Opsomming met printplaatbanen in plaats van bolletjes. */
.banen{list-style:none;padding:0;margin:0 0 1.4em}
.banen li{position:relative;padding-left:var(--space-8);margin-bottom:.7em}
.banen li::before{
  content:"";position:absolute;left:0;top:.62em;width:24px;height:12px;
  background-color:var(--accent);
  mask-image:url(../brand/baan.svg);-webkit-mask-image:url(../brand/baan.svg);
  mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;
  mask-size:24px 12px;-webkit-mask-size:24px 12px;
}

/* Het patroon als achtergrondvlak. Hoort op een donkere sectie en
   blijft bewust ver onder de tekst: het is een textuur, geen vlak. */
.printplaat{position:relative;isolation:isolate}
.printplaat::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.1;
  background-color:var(--accent);
  mask-image:url(../brand/printplaat.svg);-webkit-mask-image:url(../brand/printplaat.svg);
  mask-size:200px 200px;-webkit-mask-size:200px 200px;
  mask-repeat:repeat;-webkit-mask-repeat:repeat;
}
.printplaat > *{position:relative;z-index:1}
/* Naar de randen uitdovend, zodat het patroon nergens abrupt stopt. */
.printplaat--uitdovend::before{
  mask-image:url(../brand/printplaat.svg),radial-gradient(ellipse at 50% 50%,#000 20%,transparent 78%);
  -webkit-mask-image:url(../brand/printplaat.svg),radial-gradient(ellipse at 50% 50%,#000 20%,transparent 78%);
  mask-size:200px 200px,cover;-webkit-mask-size:200px 200px,cover;
  mask-repeat:repeat,no-repeat;-webkit-mask-repeat:repeat,no-repeat;
  mask-composite:intersect;-webkit-mask-composite:source-in;
}

/* =========================================================
   BUTTONS
   ========================================================= */
/* Eén knopcomponent voor zowel .btn als het knopblok van WordPress
   (.wp-block-button__link). Maat, typografie, vorm en states liggen hier
   vast; een variant zet alleen zijn kleuren via de --knop-variabelen.

   Varianten, en wanneer:
   primair  (.btn--primary, .is-style-primair)  hoofdactie op een licht vlak
   accent   (.btn--accent,  .is-style-accent)   hoofdactie op een donker vlak
   lijn     (.btn--line,    .is-style-lijn)     tweede actie op een licht vlak
   ghost    (.btn--ghost,   .is-style-ghost)    tweede actie op een donker vlak
   meer     (.is-style-meer, .more)             tekstlink met pijl, derde niveau
   klein    (.btn--sm)                           in compacte contexten           */
.btn,
.wp-block-button > .wp-block-button__link{
  --knop-bg:transparent;--knop-kleur:var(--brand);--knop-rand:transparent;--knop-schaduw:none;
  --knop-bg-hover:var(--knop-bg);--knop-kleur-hover:var(--knop-kleur);
  --knop-rand-hover:var(--knop-rand);--knop-schaduw-hover:var(--knop-schaduw);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--touch);padding:var(--space-3) var(--space-6);
  font-family:var(--font-display);font-weight:500;font-size:var(--text-base);line-height:1.2;
  letter-spacing:.01em;text-align:center;text-decoration:none;white-space:normal;
  background:var(--knop-bg);color:var(--knop-kleur);
  border:1.5px solid var(--knop-rand);border-radius:var(--r-sm);box-shadow:var(--knop-schaduw);
  cursor:pointer;
  transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease),transform var(--duration) var(--ease);
}
.btn:hover,
.wp-block-button > .wp-block-button__link:hover{
  background:var(--knop-bg-hover);color:var(--knop-kleur-hover);border-color:var(--knop-rand-hover);
  box-shadow:var(--knop-schaduw-hover);transform:translateY(var(--lift-knop));text-decoration:none;
}
.btn:active,
.wp-block-button > .wp-block-button__link:active{transform:none;box-shadow:var(--knop-schaduw)}
.btn:focus-visible,
.wp-block-button > .wp-block-button__link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.btn:disabled,.btn[aria-disabled="true"],
.wp-block-button > .wp-block-button__link[aria-disabled="true"]{opacity:.5;pointer-events:none;box-shadow:none}
.btn.is-bezig{pointer-events:none;opacity:.75}
.btn svg,
.wp-block-button__link svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.btn--primary,
.wp-block-button.is-style-primair > .wp-block-button__link{
  --knop-bg:var(--brand);--knop-kleur:#fff;--knop-schaduw:var(--shadow-knop);
  --knop-bg-hover:var(--brand-dark);--knop-schaduw-hover:var(--shadow-knop-hover);
}
.btn--accent,.btn--white,
.wp-block-button.is-style-accent > .wp-block-button__link{
  --knop-bg:#fff;--knop-kleur:var(--brand-dark);--knop-schaduw:var(--shadow-op-donker);
  --knop-bg-hover:var(--accent-soft);
}
.btn--line,
.wp-block-button.is-style-lijn > .wp-block-button__link{
  --knop-kleur:var(--brand);--knop-rand:var(--color-border-strong);
  --knop-rand-hover:var(--brand);--knop-bg-hover:var(--accent-soft);
}
.btn--ghost,
.wp-block-button.is-style-ghost > .wp-block-button__link{
  --knop-kleur:#fff;--knop-rand:rgba(255,255,255,.4);
  --knop-bg-hover:rgba(255,255,255,.1);--knop-rand-hover:rgba(255,255,255,.7);
}
/* Een witte knop op een licht vlak is onzichtbaar, een ghostknop ook. Staat
   er toch een buiten een donker vlak, dan valt hij terug op de variant
   voor licht: accent wordt primair, ghost wordt lijn. */
.wp-block-button.is-style-accent:not(:is(.hero,.page-hero,.section--dark,.cta,.footer,.card--dark,.map-voorbeeld,.is-style-sectie-donker,.is-style-kaart-donker) *) > .wp-block-button__link{
  --knop-bg:var(--brand);--knop-kleur:#fff;--knop-schaduw:var(--shadow-knop);
  --knop-bg-hover:var(--brand-dark);--knop-schaduw-hover:var(--shadow-knop-hover);
}
.wp-block-button.is-style-ghost:not(:is(.hero,.page-hero,.section--dark,.cta,.footer,.card--dark,.map-voorbeeld,.is-style-sectie-donker,.is-style-kaart-donker) *) > .wp-block-button__link{
  --knop-kleur:var(--brand);--knop-rand:var(--color-border-strong);
  --knop-rand-hover:var(--brand);--knop-bg-hover:var(--accent-soft);
}
.btn--sm,
.wp-block-button.btn--sm > .wp-block-button__link{
  min-height:var(--touch-sm);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);
}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.center .btn-row{justify-content:center}

/* De twee hero-knoppen blijven standaard naast elkaar staan, ook op iets
   smallere schermen. Pas op echt kleine telefoonschermen mogen ze afbreken. */
.hero .btn-row{flex-wrap:nowrap}
@media (max-width:620px){.hero .btn-row{flex-wrap:wrap}}
/* Op een telefoon staan de knoppen in een kop of oproepblok onder elkaar,
   allemaal even breed: één rij aanraakdoelen in plaats van rafelige randen. */
@media (max-width:600px){
  :is(.hero,.page-hero,.cta) .btn-row{flex-direction:column;align-items:stretch}
  :is(.hero,.page-hero,.cta) .btn-row > .wp-block-button,
  :is(.hero,.page-hero,.cta) .btn-row > .wp-block-button > .wp-block-button__link,
  :is(.hero,.page-hero,.cta) .btn-row > .btn{width:100%}
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{background:var(--navy);color:var(--body-light);font-size:var(--text-sm)}
.topbar .container{
  display:flex;align-items:center;gap:var(--space-2) var(--space-6);
  min-height:42px;flex-wrap:wrap;justify-content:flex-end;
}
.topbar-note{margin-right:auto;display:inline-flex;align-items:center;gap:.5em}
/* Grijs = standaard/onbekend (ook de no-JS situatie, dan liegt de stip niet).
   JS zet .is-open pas als het echt binnen openingstijd is. */
.topbar-note .dot{width:8px;height:8px;border-radius:50%;background:#8fa6bd;flex:0 0 auto}
.topbar-note .dot.is-open{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.22)}
.topbar a{color:#fff;display:inline-flex;align-items:center;gap:.45em}
.topbar a:hover{color:#cfe0f5;text-decoration:none}
.topbar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
@media (max-width:820px){
  .topbar-note{display:none}
  .topbar .container{justify-content:center;min-height:38px}
  .topbar a{padding:var(--space-3) 2px;min-height:44px}
}

/* =========================================================
   MOBIELE BELBALK
   ========================================================= */
.mobile-callbar{display:none}
@media (max-width:820px){
  .mobile-callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    gap:1px;background:var(--line);box-shadow:0 -4px 16px rgba(15,28,40,.12);
  }
  .mobile-callbar a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;
    background:var(--navy);color:#fff;font-family:var(--font-display);
    font-weight:600;font-size:var(--text-md);padding:var(--space-4) var(--space-3);
  }
  .mobile-callbar a:last-child{background:var(--brand)}
  .mobile-callbar svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  body{padding-bottom:var(--space-16)}
}
@media (max-width:400px){
  .mobile-callbar a{font-size:var(--text-sm);gap:.4em;padding:var(--space-4) var(--space-2);white-space:nowrap}
}

/* =========================================================
   HEADER + NAVIGATIE
   ========================================================= */
.header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);transition:box-shadow var(--duration) var(--ease);
}
.header.is-scrolled{box-shadow:var(--shadow-sm)}
/* De header staat in de wrapper van het template-part, die direct na de
   header eindigt. Sticky werkt alleen binnen de ouder, dus zonder dit
   scrolde de header gewoon mee weg. */
.wp-site-blocks > .wp-block-template-part:first-child{display:contents}
.nav{display:flex;align-items:center;gap:var(--space-5);min-height:78px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}
.nav-links > li{list-style:none;margin:0;position:relative}
.nav-links{padding:0;margin-bottom:0;margin-left:auto}
.nav-links a{
  display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--font-display);font-weight:500;font-size:var(--text-md);
  color:var(--ink);padding:.6em .85em;border-radius:var(--r-sm);
  white-space:nowrap;transition:var(--duration-fast) var(--ease);
}
.nav-links a:hover{color:var(--brand);background:var(--bg-soft);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--brand)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:.85em;right:.85em;bottom:.15em;height:2px;
  background:var(--accent);border-radius:2px;
}
.nav-links .caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duration) var(--ease);opacity:.6}

/* dropdown */
.has-drop > a{position:relative}
.drop{
  position:absolute;top:calc(100% + 10px);left:0;min-width:560px;padding:var(--space-4);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:var(--duration-fast) var(--ease);
  list-style:none;margin:0;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.has-drop:hover > a .caret{transform:rotate(180deg)}
.drop li{margin:0}
.drop a{
  display:flex;flex-direction:column;gap:.1em;align-items:flex-start;
  padding:.7em .85em;border-radius:var(--r-sm);width:100%;white-space:normal;
}
.drop a span{font-family:var(--font-body);font-weight:400;font-size:var(--text-xs);color:var(--body);line-height:1.45}
.drop a:hover span{color:var(--body)}
.drop-all{grid-column:1/-1;margin-top:var(--space-2);border-top:1px solid var(--line);padding-top:var(--space-3)}
.drop-all a{flex-direction:row;align-items:center;color:var(--brand);font-size:var(--text-sm)}

.nav-cta{display:flex;align-items:center;gap:var(--space-3);flex:0 0 auto}
.nav-cta .btn:hover{transform:none}
.menu-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--space-2);margin-left:auto;cursor:pointer;
}
.menu-toggle svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}

@media (max-width:1100px){
  .nav-links a{font-size:var(--text-sm);padding:.6em .6em}
  .drop{min-width:460px}
}
@media (max-width:980px){
  .menu-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    padding:var(--space-4) var(--space-6) var(--space-6);max-height:calc(100vh - 78px);overflow-y:auto;
  }
  .nav.is-open .nav-links{display:flex}
  .nav-links a{padding:.8em .6em;font-size:var(--text-base)}
  .nav-links a[aria-current="page"]::after{display:none}
  .drop{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--line);border-radius:0;
    grid-template-columns:1fr;min-width:0;padding:0 0 var(--space-2) var(--space-3);margin:0 0 var(--space-2) var(--space-3);
    display:none;
  }
  .has-drop.is-open .drop{display:grid}
  .has-drop > a .caret{margin-left:auto}
  .drop a span{display:none}
  /* .wp-block-buttons.is-layout-flex van WordPress wint anders op
     specificiteit, waardoor de knop op mobiel toch zichtbaar bleef en
     buiten beeld liep. De knop staat dan al in het menu en de belbalk. */
  .nav .wp-block-buttons.nav-cta{display:none}
  .nav-links .nav-cta-mobile{display:block;margin-top:var(--space-3)}
  .nav-links .nav-cta-mobile .btn{width:100%}
  /* .nav-links a wint anders van .btn--primary op specificiteit, waardoor
     de knop hier donkere tekst op blauw kreeg in plaats van wit. */
  .nav-links .nav-cta-mobile .btn--primary{color:#fff}
}
.nav-cta-mobile{display:none}

/* =========================================================
   HERO (homepage)
   ========================================================= */
.hero{
  position:relative;overflow:hidden;color:var(--body-light);
  background-color:var(--navy);
  min-height:min(500px,70vh);
}
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  z-index:0;
}
/* Sluier over de foto: donker genoeg voor witte tekst, en links (waar de
   tekst staat) dieper dan rechts, zodat de foto zelf zichtbaar blijft. */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,22,54,.94) 0%,rgba(9,22,54,.84) 32%,rgba(9,22,54,.58) 60%,rgba(9,22,54,.4) 100%),
    linear-gradient(0deg,rgba(9,22,54,.92) 0%,rgba(9,22,54,.1) 32%,transparent 62%);
}
.hero>.container{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;min-height:inherit}
.hero-content{max-width:620px;padding:clamp(var(--space-10),3.6vw,var(--space-12)) 0 clamp(var(--space-8),3vw,var(--space-10))}
.hero .review-badge{margin-bottom:var(--space-6)}
.hero h1{color:#fff;margin-bottom:.35em}
/* Nadruk zonder extra kleur: dezelfde witte tekst met een fijne onderlijn. */
.hero h1 em,.page-hero h1 em{
  font-style:normal;color:#fff;
  border-bottom:3px solid rgba(255,255,255,.38);
  padding-bottom:.04em;
}
.hero-sub{font-size:var(--text-lead);line-height:1.7;max-width:56ch;margin-bottom:1.8em}
.hero .btn-row{margin-bottom:var(--space-8)}
.hero-badges{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);font-size:var(--text-sm)}
.hero-badges span{display:inline-flex;align-items:center;gap:.5em}
.hero-badges svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Google-reviewbadge: 4,8 uit 108 reviews. Lichte variant voor op wit,
   --dark variant voor op de navy hero- en paginakoppen. */
.review-badge{
  display:inline-flex;align-items:center;gap:var(--space-3);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pil);
  padding:.5em 1.15em .5em .8em;box-shadow:var(--shadow-sm);
}
.review-badge .stars{display:flex;gap:1px;flex:0 0 auto}
.review-badge .stars svg{width:15px;height:15px;fill:var(--sterren-goud);stroke:none}
.review-badge b{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:var(--text-base)}
.review-badge span.txt{font-size:var(--text-sm);color:var(--body)}
.review-badge--dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);box-shadow:none}
.review-badge--dark b{color:#fff}
.review-badge--dark span.txt{color:var(--body-light)}

/* Volle breedte, bijvoorbeeld boven een afbeelding, in plaats van een pil. */
.review-badge--full{
  display:flex;width:100%;box-sizing:border-box;
  justify-content:center;border-radius:var(--r);padding:.75em 1em;
}

/* Zwevende statuskaart over de hero-foto. */
.hero-card{
  position:absolute;right:24px;bottom:28px;z-index:3;
  background:#fff;color:var(--ink);
  border-radius:var(--r);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:var(--space-4);max-width:250px;
}
.hero-card .hc-icon{
  width:42px;height:42px;border-radius:var(--r);background:var(--accent-soft);
  display:grid;place-items:center;flex:0 0 auto;
}
.hero-card svg{width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.hero-card b{display:block;font-family:var(--font-display);font-size:var(--text-xl);line-height:1.1}
.hero-card span{font-size:var(--text-xs);color:var(--body);line-height:1.4;display:block}

@media (max-width:760px){
  .hero{min-height:0}
  .hero-card{display:none}
}

/* --- logostrook onder hero --- */
.trustbar{background:rgba(255,255,255,.04);border-top:1px solid var(--line-dark);position:relative;z-index:3}
.trustbar .container{
  display:flex;align-items:center;justify-content:center;gap:var(--space-4) var(--space-12);
  flex-wrap:wrap;padding-top:var(--space-6);padding-bottom:var(--space-6);
}
.trustbar p{
  margin:0;font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--body-light);opacity:.8;
}
.trustbar img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.55;transition:var(--duration) var(--ease)}
.trustbar a:hover img{opacity:1}

/* =========================================================
   PAGINA-HERO (subpagina's)
   ========================================================= */
.page-hero{
  background:radial-gradient(700px 380px at 88% 0%,rgba(var(--brand-rgb),.55),transparent 60%),
    linear-gradient(160deg,var(--navy) 0%,var(--brand-darker) 100%);
  background-color:var(--navy);
  color:var(--body-light);padding:clamp(var(--space-10),5vw,var(--space-16)) 0 clamp(var(--space-12),6vw,var(--space-16));
}
.page-hero h1{color:#fff}
.page-hero .lead{color:var(--body-light);font-size:var(--text-lg);margin-bottom:0}
.page-hero .btn-row{margin-top:var(--space-8)}
.page-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(var(--space-8),4vw,var(--space-16));align-items:center}
.page-hero-grid img{border-radius:var(--r);border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-op-donker)}
@media (max-width:860px){.page-hero-grid{grid-template-columns:1fr}.page-hero-grid img{display:none}}

/* breadcrumbs */
.crumbs{font-size:var(--text-sm);margin-bottom:var(--space-6);color:var(--body-light)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;padding:0;margin:0}
.crumbs li{margin:0;display:inline-flex;align-items:center;gap:.5em}
.crumbs li+li::before{content:"/";opacity:.45}
.crumbs a{color:#fff;opacity:.8}
.crumbs a:hover{opacity:1;color:var(--accent);text-decoration:none}
.crumbs [aria-current]{opacity:.65}

/* =========================================================
   KAARTEN / GRIDS
   ========================================================= */
.grid{display:grid;gap:var(--space-5)}
/* Een raster is een nieuw blok: zelfde afstand tot de tekst erboven als
   elders in het systeem. Verticale marges vallen samen, dus onder een
   sectiekop (die zelf al ruimte geeft) telt dit niet dubbel. */
.grid{margin-top:var(--space-8)}
:where(.wp-block-group,.container,.wp-block-column) > .grid:first-child{margin-top:0}
/* Staat .grid op een query-blok, dan hoort het raster op de lijst met
   berichten erin. Anders werd die hele lijst één cel van het buitenste
   raster en kwamen de kaarten in een kolom van een paar pixels breed. */
.wp-block-query.grid{display:block}
.wp-block-query.grid > .wp-block-post-template{display:grid;gap:var(--space-5);grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}
.wp-block-query.grid--2 > .wp-block-post-template{grid-template-columns:repeat(2,minmax(0,1fr))}
.wp-block-query.grid--4 > .wp-block-post-template{grid-template-columns:repeat(4,minmax(0,1fr))}
.wp-block-query.grid > .wp-block-post-template > li{margin:0;display:flex}
.wp-block-query.grid > .wp-block-post-template > li > *{flex:1}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){
  .grid--3,.grid--4,
  .wp-block-query:is(.grid--3,.grid--4) > .wp-block-post-template{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4,
  .wp-block-query.grid > .wp-block-post-template{grid-template-columns:1fr}
}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--card-padding);display:flex;flex-direction:column;transition:var(--duration) var(--ease);position:relative;
}
a.card:hover{
  text-decoration:none;transform:translateY(var(--lift));
  box-shadow:var(--shadow);border-color:var(--line-hover);
}
.card-icon{
  width:48px;height:48px;border-radius:var(--r);background:var(--accent-soft);
  display:grid;place-items:center;margin-bottom:var(--space-5);flex:0 0 auto;transition:var(--duration) var(--ease);
}
.card-icon svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
a.card:hover .card-icon{background:var(--brand)}
a.card:hover .card-icon svg{stroke:#fff}
.card h3{margin-bottom:.4em}
.card p{color:var(--body);font-size:var(--text-md);margin-bottom:1em}
.card p:last-of-type{margin-bottom:0}
/* De "lees verder" link onderaan een kaart. Staat los van .card zodat
   ook .post en andere blokken dezelfde opmaak krijgen. */
.more{
  margin-top:auto;padding-top:var(--space-4);font-family:var(--font-display);font-weight:500;
  font-size:var(--text-sm);color:var(--brand);display:inline-flex;align-items:center;gap:.45em;transition:gap var(--duration-fast) var(--ease);
}
.more svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
a.card:hover .more,a.post:hover .more{gap:.8em}
.section--dark .more,.card--dark .more{color:#fff}
.card--dark{background:var(--navy-2);border-color:var(--line-dark);color:var(--body-light)}
.card--dark h3{color:#fff}
.card--dark p{color:var(--body-light)}

/* =========================================================
   CHECKLISTS
   ========================================================= */
.checklist{list-style:none;padding:0;margin:0 0 1.4em}
.checklist li{position:relative;padding-left:var(--space-8);margin-bottom:.7em}
.checklist svg{
  position:absolute;left:0;top:.28em;width:20px;height:20px;
  fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.checklist--brand svg{stroke:var(--brand)}

/* =========================================================
   SPLIT (tekst naast beeld)
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
.split--wide-left{grid-template-columns:1.15fr .85fr}
.split img{border-radius:var(--r);box-shadow:var(--shadow)}
.split h2{margin-bottom:.6em}
.split p:last-child{margin-bottom:0}
@media (max-width:860px){
  .split,.split--wide-left{grid-template-columns:1fr}
  .split .split-media{order:-1}
}

/* =========================================================
   STAPPEN / AANPAK
   ========================================================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);counter-reset:step}
/* Vijf stappen (Van kennismaking naar zorgeloos beheer) op één rij. In
   een media query, anders wint deze selector op specificiteit van de
   smallere indelingen hieronder. */
@media (min-width:981px){.steps:has(> .step:nth-child(5)){grid-template-columns:repeat(5,1fr)}}
.step{position:relative;padding-top:var(--space-6)}
.step::before{
  counter-increment:step;content:counter(step);
  font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;margin-bottom:var(--space-4);
}
.step::after{
  content:"";position:absolute;top:43px;left:44px;right:-10px;height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}
.step:last-child::after{display:none}
.step h3{font-size:var(--text-lg);margin-bottom:.35em}
.step p{font-size:var(--text-md);margin-bottom:0}
.section--dark .step::before{background:var(--accent);color:var(--brand-dark)}
.section--dark .step::after{background:linear-gradient(90deg,var(--line-dark),transparent)}
@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* =========================================================
   STATS
   ========================================================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);text-align:center}
.stat{padding:var(--space-6) var(--space-5);border-radius:var(--r);background:rgba(255,255,255,.05);
  border:1px solid var(--line-dark);text-align:center}
.stat b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--text-stat);line-height:1;color:#fff;letter-spacing:0;
}
.stat span{display:block;margin-top:.5em;font-size:var(--text-sm);color:var(--body-light)}
.stats--light .stat{background:#fff;border-color:var(--line)}
.stats--light .stat b{color:var(--brand)}
.stats--light .stat span{color:var(--body)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   QUOTES / REFERENTIES
   ========================================================= */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--card-padding);display:flex;flex-direction:column;transition:var(--duration) var(--ease);
}
a.quote:hover,.quote:hover{transform:translateY(var(--lift));box-shadow:var(--shadow-sm);border-color:var(--line-hover)}
.quote-mark{font-family:var(--font-display);font-size:2.6rem;line-height:.7;
  color:var(--accent);margin-bottom:var(--space-4);display:block}
.quote blockquote{margin:0 0 var(--space-5);font-size:var(--text-lg);color:var(--ink);line-height:1.6}
.quote cite{
  margin-top:auto;font-style:normal;font-family:var(--font-display);font-weight:500;
  font-size:var(--text-md);color:var(--ink);display:block;
}
.quote cite span{display:block;font-family:var(--font-body);font-weight:400;
  font-size:var(--text-sm);color:var(--body)}

/* Naam + sector met een gekleurd monogram, gebruikt in de kleinere kaarten
   en in de uitgelichte testimonial hieronder. */
.quote-who{margin-top:auto;display:flex;align-items:center;gap:var(--space-3)}
.quote-avatar{
  width:44px;height:44px;border-radius:var(--r);flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);
  background:var(--accent-soft);color:var(--brand-dark);
}
.quote-who cite{margin-top:0}

/* Uitgelichte testimonial: één grote quote naast een stapel kleinere. */
.testimonials{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--space-5);align-items:stretch}
.testimonial-feature{
  position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;
  border-radius:var(--r-lg);padding:clamp(var(--space-8),3.2vw,var(--space-10));
  background:linear-gradient(155deg,var(--navy) 0%,var(--brand-dark) 100%);
}
.testimonial-feature::after{
  content:"\201C";position:absolute;top:-.28em;right:.12em;pointer-events:none;
  font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:11rem;color:rgba(255,255,255,.07);
}
.testimonial-feature blockquote{
  position:relative;z-index:1;margin:0 0 var(--space-8);
  font-family:var(--font-display);font-weight:500;letter-spacing:0;
  font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.4;
}
.testimonial-feature .quote-avatar{background:rgba(255,255,255,.14);color:#fff}
.testimonial-feature .quote-who cite b{color:#fff}
.testimonial-feature .quote-who cite span{color:var(--body-light)}
.quote-who cite b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-base);color:var(--ink)}
.quote-who cite span{display:block;font-size:var(--text-sm);color:var(--body)}

.testimonial-stack{display:flex;flex-direction:column;gap:var(--space-5)}
.testimonial-stack .quote{flex:1}

@media (max-width:900px){.testimonials{grid-template-columns:1fr}}

/* Klantindex: elke naam linkt echt door naar zijn eigen klantcase of
   portfoliokaart, dus geen knopvorm die interactiviteit alleen maar
   suggereert. Een middenpunt scheidt de namen, zoals in een colofon. */
.client-index{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  font-family:var(--font-display);font-size:var(--text-md);
}
.client-index a{color:var(--brand);font-weight:500;padding:.3em 0}
.client-index a:hover{color:var(--brand-dark);text-decoration:underline}
.client-index a:not(:last-child)::after{content:"\00B7";margin:0 .7em;color:var(--line);font-weight:400}

/* logostrook klanten (referenties.html, oudere pagina's) */
.logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-5) var(--space-12)}
.logo-strip span{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);color:var(--body);
  opacity:.75;padding:var(--space-2) 0;
}

/* =========================================================
   CERTIFICERING
   ========================================================= */
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.cert{
  display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--card-padding);
  border:1px solid var(--line-dark);border-radius:var(--r);background:rgba(255,255,255,.05);
}
.cert-badge{
  width:52px;height:52px;border-radius:var(--r);flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
}
.cert-badge svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cert b{display:block;font-family:var(--font-display);font-size:var(--text-lg);color:#fff;margin-bottom:.25em}
.cert p{margin:0;font-size:var(--text-md);color:var(--body-light)}
@media (max-width:900px){.certs{grid-template-columns:1fr}}

/* =========================================================
   FOTO ACHTER DE DONKERE SECTIES
   -----------------------------------------------------------------
   Elke .section--dark krijgt een eigen foto onder een donkerblauwe
   sluier, links (waar de tekst staat) het donkerst, net als in de
   hero. Zonder modifier valt hij terug op de supportafdeling. De
   bestanden in assets/foto zijn sterk gecomprimeerd: onder de sluier
   is fijn detail toch niet te zien. Mobiel krijgt de 800px-versie.
   ========================================================= */
.section--dark{
  --sectie-foto:url(../foto/support-1600.webp);
  --sectie-foto-klein:url(../foto/support-800.webp);
  background-color:var(--navy);
  background-image:linear-gradient(100deg,rgba(9,22,54,.96) 0%,rgba(9,22,54,.88) 40%,rgba(9,22,54,.72) 100%),
    var(--sectie-foto);
  background-size:cover;background-position:center;
}
.section--dark .cert{background:rgba(9,22,54,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:760px){
  .section--dark{
    background-image:linear-gradient(rgba(9,22,54,.9),rgba(9,22,54,.9)),var(--sectie-foto-klein);
  }
}
.section--foto-beveiliging{--sectie-foto:url(../foto/beveiliging-1600.webp);--sectie-foto-klein:url(../foto/beveiliging-800.webp)}
.section--foto-kantoor{--sectie-foto:url(../foto/kantoor-1600.webp);--sectie-foto-klein:url(../foto/kantoor-800.webp)}
.section--foto-monitoring{--sectie-foto:url(../foto/monitoring-1600.webp);--sectie-foto-klein:url(../foto/monitoring-800.webp)}
.section--foto-gesprek{--sectie-foto:url(../foto/gesprek-1600.webp);--sectie-foto-klein:url(../foto/gesprek-800.webp)}
.section--foto-werkplaats{--sectie-foto:url(../foto/werkplaats-1600.webp);--sectie-foto-klein:url(../foto/werkplaats-800.webp)}
.section--foto-support{--sectie-foto:url(../foto/support-1600.webp);--sectie-foto-klein:url(../foto/support-800.webp)}

/* =========================================================
   PRIJS / PAKKETTEN
   ========================================================= */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:stretch}
.plan{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--card-padding);display:flex;flex-direction:column;position:relative;
}
.plan--featured{border-color:var(--brand);box-shadow:var(--shadow)}
.plan-tag{
  position:absolute;top:-11px;left:30px;background:var(--brand);color:#fff;
  font-family:var(--font-display);font-weight:500;font-size:var(--text-xs);letter-spacing:.08em;
  text-transform:uppercase;padding:.35em .8em;border-radius:var(--r-pil);
}
.plan h3{margin-bottom:.2em}
.plan .plan-for{font-size:var(--text-sm);color:var(--body);margin-bottom:var(--space-5)}
.plan .price{
  font-family:var(--font-display);font-weight:700;font-size:2.1rem;color:var(--ink);
  line-height:1;letter-spacing:0;
}
.plan .price small{font-family:var(--font-body);font-weight:400;font-size:var(--text-xs);
  color:var(--body);display:block;margin-top:.6em;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:var(--space-6) 0 var(--space-6)}
.plan li{position:relative;padding-left:var(--space-8);font-size:var(--text-md);margin-bottom:.6em}
.plan li svg{position:absolute;left:0;top:.3em;width:18px;height:18px;fill:none;
  stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{margin-top:auto;width:100%}
@media (max-width:980px){.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:820px;margin:0 auto}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:var(--space-3);overflow:hidden;
}
.faq-item summary{
  cursor:pointer;padding:var(--space-5) var(--space-12) var(--space-5) var(--space-6);position:relative;list-style:none;
  font-family:var(--font-display);font-weight:500;font-size:var(--text-base);color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--duration) var(--ease);
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-item[open] summary{color:var(--brand)}
.faq-a{padding:0 var(--space-6) var(--space-6);font-size:var(--text-md)}
.faq-a p:last-child{margin-bottom:0}

/* =========================================================
   VACATUREKAART (vacatures.html)
   ========================================================= */
.job-card{text-align:left;padding:var(--card-padding);margin-bottom:var(--space-6)}
.job-card:last-of-type{margin-bottom:0}
.job-card h3{font-size:var(--text-xl);margin:.4em 0 .2em}
.job-card p.small{margin-bottom:1.2em}
.job-card .grid--3{margin-top:var(--space-5)}
.job-card h4{font-size:var(--text-md);color:var(--brand-dark);margin-bottom:.6em}
.job-card .checklist{margin-bottom:0}

/* =========================================================
   CTA-BAND
   ========================================================= */
.cta{
  background:radial-gradient(600px 300px at 85% 15%,rgba(var(--brand-rgb),.6),transparent 62%),
    linear-gradient(135deg,var(--brand-dark) 0%,var(--navy) 100%);
  color:#fff;border-radius:var(--r-lg);padding:clamp(var(--space-10),5vw,var(--space-16));
  display:grid;grid-template-columns:1.3fr .7fr;gap:var(--space-8);align-items:center;
}
.cta h2{color:#fff;margin-bottom:.4em}
.cta p{color:var(--body-light);margin-bottom:0;max-width:52ch}
/* Twee acties onder elkaar in de smalle rechterkolom, even breed. */
.cta .btn-row{flex-direction:column;align-items:stretch;justify-self:end;width:100%;max-width:320px}
.cta .btn-row > .wp-block-button > .wp-block-button__link,.cta .btn-row > .btn{width:100%}
@media (max-width:860px){
  .cta{grid-template-columns:1fr}
  .cta .btn-row{justify-self:start;max-width:360px}
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-8),4vw,var(--space-12));align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5) 0;
  border-bottom:1px solid var(--line)}
.contact-list li:last-child{border-bottom:0}
.contact-list .ci{
  width:44px;height:44px;border-radius:var(--r);background:var(--accent-soft);
  display:grid;place-items:center;flex:0 0 auto;
}
.contact-list svg{width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.contact-list b{display:block;font-family:var(--font-display);font-size:var(--text-base);margin-bottom:.15em}
.contact-list p{margin:0;font-size:var(--text-md)}

.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--card-padding)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.field{margin-bottom:var(--space-5)}
.field label,
.wp-block-search__label{
  display:block;font-family:var(--font-display);font-weight:500;font-size:var(--text-sm);
  color:var(--ink);margin-bottom:var(--space-2);
}
.field label .req{color:var(--color-error)}
.field input,.field textarea,.field select,
.wp-block-search__input{
  width:100%;min-height:var(--touch);font-family:var(--font-body);font-size:var(--text-base);color:var(--ink);
  padding:var(--space-3) var(--space-4);border:1.5px solid var(--color-border-strong);border-radius:var(--r-sm);
  background:#fff;transition:border-color var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);
}
.field input::placeholder,.field textarea::placeholder,.wp-block-search__input::placeholder{color:var(--color-muted)}
.field textarea{min-height:130px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover,.wp-block-search__input:hover{border-color:var(--line-hover)}
/* De focus is een rand plus een zachte ring: zichtbaar genoeg, zonder de
   dikke outline die bij een veld waar je in typt onrustig oogt. */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,
.field input:focus,.field textarea:focus,.field select:focus,
.wp-block-search__input:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18);
}
/* Foutstatus pas na interactie, niet bij een leeg formulier dat net laadt. */
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{
  border-color:var(--color-error);box-shadow:0 0 0 3px rgba(179,38,30,.12);
}
.form-note{font-size:var(--text-sm);color:var(--body);margin:var(--space-3) 0 0}
/* Meldingen: één component voor succes, fout en informatie. */
.form-status,.melding{
  font-size:var(--text-md);font-weight:500;border-radius:var(--r-sm);
  padding:var(--space-3) var(--space-4);margin:0 0 var(--space-5);border-left:4px solid currentColor;
  background:var(--accent-soft);color:var(--brand-dark);
}
.form-status.is-ok,.melding--succes{background:#e7f4ec;color:var(--color-success)}
.form-status.is-fout,.melding--fout{background:#fbeaea;color:var(--color-error)}
.melding--waarschuwing{background:#fdf3e1;color:var(--color-warning)}
.spete-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Het zoekblok van WordPress: veld en knop naast elkaar, knop als .btn--primary. */
.wp-block-search{max-width:560px;margin:0 0 var(--space-8)}
.wp-block-search__inside-wrapper{display:flex;gap:var(--space-2);border:0;padding:0}
.wp-block-search__button{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);margin:0;
  padding:var(--space-3) var(--space-6);font-family:var(--font-display);font-weight:500;font-size:var(--text-base);
  background:var(--brand);color:#fff;border:1.5px solid var(--brand);border-radius:var(--r-sm);
  box-shadow:var(--shadow-knop);cursor:pointer;
  transition:background-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease);
}
.wp-block-search__button:hover{background:var(--brand-dark);border-color:var(--brand-dark);box-shadow:var(--shadow-knop-hover)}
.wp-block-search__button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.check-line{display:flex;gap:.7em;align-items:flex-start;font-size:var(--text-sm)}
.check-line input{width:20px;height:20px;min-height:0;padding:0;box-shadow:none;margin-top:.2em;flex:0 0 auto;accent-color:var(--brand)}

.map-embed{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);line-height:0}
.map-embed iframe{width:100%;height:380px;border:0;display:block}
/* De kaart laadt pas na een klik: scheelt zo'n 400 KB aan scripts van Google
   op de contactpagina en er gaat niets naar Google zonder dat de bezoeker
   daarvoor kiest. */
.map-klik{line-height:1.5}
.map-voorbeeld{
  position:relative;height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-4);padding:var(--space-6);text-align:center;color:var(--body-light);
  background-color:var(--navy);
  background-image:linear-gradient(rgba(9,22,54,.86),rgba(9,22,54,.86)),url(../foto/kantoor-800.webp);
  background-size:cover;background-position:center;
}
.map-pin{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff}
.map-pin svg{width:26px;height:26px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.map-adres{margin:0}
.map-adres b{display:block;color:#fff;font-family:var(--font-display);font-size:var(--text-lg)}
.map-knoppen{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}
.map-voorbeeld small{max-width:42ch;font-size:var(--text-xs);opacity:.8}

/* =========================================================
   NIEUWS
   ========================================================= */
/* :not(.wp-block-post): WordPress zet zelf de klasse "post" op elk bericht
   in een lijst (post_class). Zonder deze uitzondering kreeg een nieuws-
   bericht in bijvoorbeeld de zoekresultaten ineens een kaartkader. */
.post:not(.wp-block-post){
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:var(--duration) var(--ease);
}
a.post:hover{text-decoration:none;transform:translateY(var(--lift));box-shadow:var(--shadow);
  border-color:var(--line-hover)}
.post img{aspect-ratio:16/9;object-fit:cover;width:100%}
.post-body{padding:var(--card-padding);display:flex;flex-direction:column;flex:1}
.post-meta{font-size:var(--text-xs);color:var(--body);margin-bottom:.7em;display:flex;gap:.6em;
  align-items:center;flex-wrap:wrap}
.post-meta .tag{
  background:var(--accent-soft);color:var(--brand-dark);border-radius:var(--r-pil);
  padding:.2em .7em;font-family:var(--font-display);font-weight:500;font-size:var(--text-xs);
  letter-spacing:.04em;text-transform:uppercase;
}
/* De kaarttitel is een h2 in een overzicht zonder sectiekop (nieuws,
   klantcases) en een h3 onder een sectiekop. Het niveau volgt de pagina,
   het uiterlijk is hetzelfde. */
.post :is(h2,h3){font-size:var(--text-lg);margin-bottom:.4em}
.post :is(h2,h3) a{color:var(--ink)}
.post :is(h2,h3) a:hover{color:var(--brand)}
.post p{font-size:var(--text-md);color:var(--body)}

/* =========================================================
   TEAM
   ========================================================= */
/* Compacte, randvullende portretfoto's met naam en functie erover.
   Iedereen krijgt dezelfde kaart, ook wie nog geen foto heeft: die krijgt
   een initiaal op een verloopvlak in plaats van een verzonnen foto.
   Eén raster voor de hele organisatie, ten hoogste vijf naast elkaar en
   zonder kopjes per afdeling: bezoekers zoeken een gezicht, geen
   organogram. */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4)}
.team-photo{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  aspect-ratio:3/4;background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow:var(--shadow-sm);transition:var(--duration) var(--ease);
}
.team-photo:hover{transform:translateY(var(--lift));box-shadow:var(--shadow)}
.team-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  display:block;transition:transform var(--duration-slow) var(--ease);
}
.team-photo:hover img{transform:scale(1.05)}
.team-photo .initial{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:rgba(255,255,255,.4);
  font-size:clamp(1.8rem,4vw,2.6rem);
}
.team-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(9,22,54,.18) 60%,rgba(7,17,44,.9) 100%);
}
.team-photo-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(var(--space-3),1.8vw,var(--space-4))}
.team-photo-info .role{
  display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(.6rem,1vw,.7rem);
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:.3em;
}
.team-photo-info .name{
  display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(.92rem,1.6vw,1.1rem);
  letter-spacing:0;color:#fff;
}
@media (max-width:1100px){.team-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.team-grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   CHIPS (plaatsen / links)
   ========================================================= */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;padding:0;margin:0;list-style:none}
.chips li{margin:0}
.chip{
  display:inline-block;background:#fff;border:1px solid var(--line);border-radius:var(--r-pil);
  padding:.5em 1.15em;font-family:var(--font-display);font-weight:500;font-size:var(--text-sm);
  color:var(--ink);transition:var(--duration-fast) var(--ease);
}
.chip:hover{background:var(--brand);border-color:var(--brand);color:#fff;text-decoration:none}

/* =========================================================
   ERELIJST (sponsoring: namen zonder link of logo)
   ========================================================= */
.sponsor-list{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--space-1) clamp(var(--space-5),3vw,var(--space-8));display:grid;
  grid-template-columns:repeat(2,1fr);column-gap:var(--space-8);list-style:none;margin:0;
}
.sponsor-item{
  display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;
  border-bottom:1px solid var(--line);font-family:var(--font-display);
  font-weight:600;font-size:var(--text-base);color:var(--ink);
}
.sponsor-item::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--brand);flex:0 0 auto}
.sponsor-list .sponsor-item:nth-last-child(-n+2){border-bottom:0}
@media (max-width:640px){
  .sponsor-list{grid-template-columns:1fr}
  .sponsor-list .sponsor-item{border-bottom:1px solid var(--line)}
  .sponsor-list .sponsor-item:last-child{border-bottom:0}
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--navy);color:var(--body-light);padding:clamp(var(--space-12),6vw,var(--space-16)) 0 0;font-size:var(--text-md)}
.footer h4{
  color:#fff;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;margin-bottom:1.2em;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--space-10)}
.footer-logo img{height:34px;width:auto;margin-bottom:var(--space-5);filter:brightness(0) invert(1);opacity:.95}
.footer p{color:var(--body-light)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.65em}
.footer a{color:var(--body-light)}
.footer a:hover{color:#fff;text-decoration:none}
.footer-contact li{display:flex;gap:.7em;align-items:flex-start}
.footer-contact svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:.35em}
/* De keurmerken in de footer: de logo's zelf, zonder wit veld, naast
   elkaar op één lijn. Het ISO-logo is rond met een transparante rand; het NIS2-logo
   is van zichzelf een donker vlak. Beide klikbaar naar hun pagina. */
.footer-certs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:var(--space-6)}
.footer-cert{display:inline-block;line-height:0;border-radius:var(--r-sm);
  transition:transform var(--duration) var(--ease),opacity var(--duration) var(--ease)}
.footer-cert:hover{transform:translateY(var(--lift-knop));opacity:.9}
.footer-cert:focus-visible{outline:var(--focus-ring);outline-offset:4px}
.footer-cert img{width:auto;display:block}
.footer-cert img[src*="iso"]{height:72px}
.footer-cert img[src*="nis2"]{height:56px}
.footer-bottom{
  margin-top:clamp(var(--space-10),4vw,var(--space-12));border-top:1px solid var(--line-dark);
  padding:var(--space-6) 0;display:flex;justify-content:space-between;gap:var(--space-3) var(--space-8);
  flex-wrap:wrap;font-size:var(--text-sm);
}
.footer-bottom ul{display:flex;gap:var(--space-5);flex-wrap:wrap}
.footer-bottom li{margin:0}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .footer-bottom{flex-direction:column}
}

/* =========================================================
   ANIMATIE (subtiel, respecteert voorkeuren)
   ========================================================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .btn:hover,a.card:hover,a.post:hover{transform:none}
}

/* =========================================================
   HULPKLASSEN
   ========================================================= */
.mb-0{margin-bottom:0}
.mt-0{margin-top:0}
.mt-l{margin-top:clamp(var(--space-8),3vw,var(--space-12))}
.small{font-size:var(--text-sm)}
.muted{color:var(--body)}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--brand);
  padding:var(--space-3) var(--space-5);border-radius:0 0 var(--r-sm) 0;font-family:var(--font-display);font-weight:500;
}
.skip-link:focus{left:0}

/* =========================================================
   HEROVIDEO
   -----------------------------------------------------------------
   De hero toont bewegend beeld uit het eigen pand in plaats van een
   stilstaande foto. De video is zwaar, dus hij laadt pas als het scherm
   er breed genoeg voor is en de bezoeker niet om databesparing vraagt;
   daaronder blijft de posterfoto staan. site.js regelt dat.
   ========================================================= */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  z-index:0;background:var(--navy);
  /* Geen hover op de video, anders tonen browsers hun eigen knoppen
     (beeld-in-beeld, doorspoelen) over de hero. */
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  /* Wie beweging heeft uitgezet krijgt het stilstaande beeld. */
  .hero-video{display:none}
}

/* =========================================================
   KEURMERKEN
   -----------------------------------------------------------------
   ISO 27001 en NIS2 als logo, niet als tekst. De logo's zijn van een
   andere afzender en mogen daarom niet verkleuren; op donkere vlakken
   staan ze daarom in een wit veld in plaats van uitgesleuteld.
   ========================================================= */
.keurmerken{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.keurmerk{
  display:inline-flex;align-items:center;gap:var(--space-3);background:#fff;
  border-radius:var(--r-sm);padding:var(--space-2) var(--space-4);box-shadow:var(--shadow-sm);
}
.keurmerk img{height:34px;width:auto;display:block}
.keurmerk span{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-xs);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
/* Staat direct boven de certificeringskaarten; zonder eigen marge
   plakken de witte velden tegen de kaarten aan. */
.keurmerken--groot{margin-bottom:var(--space-8)}
.keurmerken--groot .keurmerk{padding:var(--space-4) var(--space-5)}
.keurmerken--groot .keurmerk img{height:52px}
/* In de hero staan de logo's zonder bijschrift naast de knop, zodat de
   klantbalk eronder op een laptopscherm nog in beeld valt. */
.hero-acties{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-4);margin-bottom:var(--space-8)}
.hero-acties .btn-row{margin-bottom:0}
.keurmerken--logo .keurmerk{padding:var(--space-2) var(--space-3)}
a.keurmerk{text-decoration:none;transition:transform var(--duration),box-shadow var(--duration) var(--ease)}
a.keurmerk:hover{transform:translateY(-2px);box-shadow:var(--shadow-op-donker);text-decoration:none}
a.keurmerk:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-content>.hero-bellen:last-child{margin-bottom:0}
@media (max-width:520px){
  .keurmerk span{display:none}
  .keurmerk{padding:var(--space-2) var(--space-3)}
}

/* =========================================================
   KLANTBALK ONDER DE HERO
   -----------------------------------------------------------------
   Waar eerst de logo's van leveranciers stonden, staan nu de klanten.
   Wat een klant zegt weegt zwaarder dan bij wie wij inkopen, en het
   past bij de belofte: aantoonbaar boven beweerd.
   ========================================================= */
.klantbalk{background:rgba(255,255,255,.04);border-top:1px solid var(--line-dark);position:relative;z-index:3}
.klantbalk .container{padding-top:var(--space-5);padding-bottom:var(--space-5)}
.klantbalk-kop{
  margin:0 0 var(--space-4);font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--body-light);opacity:.85;
}
.klantbalk-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4) var(--space-8)}
.klantquote{display:flex;align-items:center;gap:var(--space-4);margin:0}
/* De quotes linken naar de klantcase: dezelfde hover als elke andere
   kaartlink (tekst licht op, cite onderstreept), geen extra kader. */
a.klantquote{color:inherit;text-decoration:none;border-radius:var(--r-sm);
  transition:transform var(--duration) var(--ease)}
a.klantquote:hover{text-decoration:none;transform:translateY(var(--lift-knop))}
a.klantquote:hover cite{color:#fff;text-decoration:underline;text-underline-offset:3px}
a.klantquote:focus-visible{outline:var(--focus-ring);outline-offset:6px}
.klantbalk-kop a{color:inherit;text-decoration:none}
.klantbalk-kop a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.klantbalk-kop a::after{content:" \2192";opacity:.7}
.klantquote img{
  width:52px;height:52px;flex:0 0 auto;border-radius:var(--r-sm);
  object-fit:cover;box-shadow:var(--shadow-sm);
}
.klantquote blockquote{
  margin:0;color:#fff;font-size:var(--text-md);line-height:1.45;
}
.klantquote cite{
  display:block;margin-top:.3em;font-style:normal;font-family:var(--font-display);
  font-weight:500;font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--body-light);
}
@media (max-width:900px){
  .klantbalk-rij{grid-template-columns:1fr}
  .klantbalk-rij .klantquote:nth-child(n+3){display:none}
}

/* =========================================================
   DOORZICHTIGE KOP OP DE HOMEPAGE
   -----------------------------------------------------------------
   Net als op de oude site loopt de hero onder de topbar en de
   navigatie door. Pas bij scrollen, of met het mobiele menu open,
   krijgt de kop weer zijn witte achtergrond. --kop is de hoogte van
   topbar plus header en wordt door site.js gezet.
   ========================================================= */
.home .topbar{position:relative;z-index:101;background:transparent}
.home .topbar-belofte{display:none} /* staat al in de hero zelf */
.home .header{transition:background-color var(--duration),border-color var(--duration),box-shadow var(--duration) var(--ease)}
.home .header:not(.is-scrolled):not(:has(.nav.is-open)){
  background:transparent;border-bottom-color:rgba(255,255,255,.14);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.home .header:not(.is-scrolled):not(:has(.nav.is-open)) .brand img{filter:brightness(0) invert(1)}
.home .header:not(.is-scrolled):not(:has(.nav.is-open)) .menu-toggle{border-color:rgba(255,255,255,.35)}
.home .header:not(.is-scrolled):not(:has(.nav.is-open)) .menu-toggle svg{stroke:#fff}
@media (min-width:981px){
  .home .header:not(.is-scrolled) .nav-links > li > a{color:#fff}
  .home .header:not(.is-scrolled) .nav-links > li > a:hover{background:rgba(255,255,255,.12);color:#fff}
}

/* De hero vult precies het eerste scherm, met de klantbalk onderaan.
   Op een groot scherm krijgt hij daardoor ruimte, op een laag scherm
   krimpt vooral de witruimte mee met de schermhoogte. */
.home .hero{
  display:flex;flex-direction:column;
  margin-top:calc(-1 * var(--kop,var(--space-24)));padding-top:var(--kop,var(--space-24));
  min-height:100vh;min-height:100svh;
}
/* width:100%, anders krimpt de container door margin:auto tot zijn inhoud en
   komt de tekst in het midden te staan. */
.home .hero>.container{flex:1 0 auto;min-height:0;width:100%}
/* Bovenin de video zit het donkere plafond. Achter de doorzichtige kop
   werd dat een zwarte balk; een navy verloop trekt het gelijk. */
.home .hero-scrim{
  background:linear-gradient(180deg,rgba(9,22,54,.9) 0,rgba(9,22,54,.55) calc(var(--kop,121px) + 20px),transparent calc(var(--kop,121px) + 120px)),
    linear-gradient(100deg,rgba(9,22,54,.94) 0%,rgba(9,22,54,.84) 32%,rgba(9,22,54,.58) 60%,rgba(9,22,54,.4) 100%),
    linear-gradient(0deg,rgba(9,22,54,.92) 0%,rgba(9,22,54,.1) 32%,transparent 62%);
}
/* Ingelogd staat de WordPress-balk bovenin; de vaste header moet daaronder. */
.admin-bar .header{top:32px}
@media (max-width:782px){.admin-bar .header{top:46px}}
@media (max-width:600px){.admin-bar .header{top:0}}
.home .hero-content{padding:clamp(var(--space-5),5vh,var(--space-24)) 0 clamp(var(--space-5),4.5vh,var(--space-16))}

/* Lage schermen (laptops): kop en tekst iets compacter. */
@media (min-width:761px) and (max-height:820px){
  .home .hero h1{font-size:clamp(2rem,7.2vh,3.6rem)}
  .home .hero-sub{font-size:var(--text-lg);line-height:1.6;margin-bottom:clamp(var(--space-4),2.6vh,1.8em)}
  .home .hero-belofte{margin-bottom:clamp(var(--space-2),1.6vh,var(--space-5))}
  .home .hero-acties{margin-bottom:clamp(var(--space-4),2.6vh,var(--space-8))}
  .home .klantbalk .container{padding-top:clamp(var(--space-3),2vh,var(--space-5));padding-bottom:clamp(var(--space-3),2vh,var(--space-5))}
  .home .klantbalk-kop{margin-bottom:clamp(var(--space-2),1.2vh,var(--space-4))}
}
/* Heel lage schermen: het telefoonnummer staat dan al direct boven in
   de topbar, dus de belregel in de hero mag weg. */
@media (min-width:761px) and (max-height:700px){
  .home .hero-bellen{display:none}
  .home .hero-acties{margin-bottom:0}
}

/* Mobiel: de belbalk onderin heeft het nummer al, dus de belregel in
   de hero vervalt. De logo's worden kleiner en er staat één quote. */
@media (max-width:820px){
  /* De vaste belbalk onderin (60px) hoort niet bij het eerste scherm. */
  .home .hero{min-height:calc(100vh - 60px);min-height:calc(100svh - 60px)}
  .home .hero-bellen{display:none}
  .home .hero-acties{margin-bottom:0}
}
@media (max-width:600px){
  .home .hero h1{font-size:clamp(1.9rem,8.6vw,2.4rem)}
  .home .hero-content{padding:var(--space-6) 0 var(--space-6)}
  .home .hero-sub{font-size:var(--text-base);line-height:1.6;margin-bottom:var(--space-5)}
  .home .hero-belofte{font-size:var(--text-xs);margin-bottom:var(--space-3)}
  .home .hero-acties{gap:var(--space-3) var(--space-3)}
  .home .hero .btn-row{flex:1 1 100%}
  .home .hero .btn-row .wp-block-button,.home .hero .btn-row .wp-block-button__link{width:100%}
  .home .keurmerken--logo .keurmerk{padding:var(--space-2) var(--space-3)}
  .home .keurmerken--logo .keurmerk img{height:26px}
  .home .klantbalk-rij .klantquote:nth-child(n+2){display:none}
  .home .klantbalk .container{padding-top:var(--space-4);padding-bottom:var(--space-4)}
}


/* =========================================================
   KAART MET FOTO
   -----------------------------------------------------------------
   De dienstenkaarten op de homepage tonen echt beeld in plaats van
   alleen een icoon, zoals op de oude site. Het icoon blijft, maar
   verhuist naar de foto zodat de kaart herkenbaar blijft.
   ========================================================= */
.card--foto{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--foto .card-beeld{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--bg-soft)}
.card--foto .card-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--duration-slow) var(--ease)}
.card--foto:hover .card-beeld img{transform:scale(1.04)}
.card--foto .card-beeld::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(9,22,54,.34) 100%);
}
.card--foto .card-icon{
  position:absolute;left:16px;bottom:16px;z-index:1;margin:0;
  background:#fff;color:var(--brand);
}
.card--foto:hover .card-icon{background:var(--brand);color:#fff}
/* De fotokaart is een div, dus a.card:hover .card-icon svg geldt hier
   niet; zonder deze regel werd het icoon blauw op blauw. */
.card--foto:hover .card-icon svg{stroke:#fff}
.card--foto .card-tekst{padding:var(--card-padding);display:flex;flex-direction:column;flex:1}
.card--foto h3{margin-bottom:.45em}
.card--foto p{font-size:var(--text-md)}

/* =========================================================
   KLANTFOTO BIJ EEN CITAAT
   -----------------------------------------------------------------
   Elke klant met een naam krijgt er een foto bij. Waar die er niet is
   blijft de initiaal staan, nooit een gekochte stockfoto.
   ========================================================= */
.quote-foto{
  width:56px;height:56px;border-radius:var(--r);flex:0 0 auto;
  object-fit:cover;display:block;box-shadow:var(--shadow-sm);
}
.testimonial-feature .quote-foto{width:64px;height:64px;box-shadow:none}

/* =========================================================
   GOOGLE-RECENSIES
   ========================================================= */
.recensies{margin-bottom:0}
.recensie{
  margin:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--card-padding);display:flex;flex-direction:column;transition:var(--duration) var(--ease);
}
.recensie:hover{transform:translateY(var(--lift));box-shadow:var(--shadow);border-color:var(--line-hover)}
.recensie blockquote{margin:var(--space-4) 0 var(--space-6);font-size:var(--text-md);line-height:1.65;color:var(--body)}
.recensie-wie{display:flex;align-items:center;gap:var(--space-3);margin-top:auto}
.recensie-foto{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover;display:block;
}
.recensie-foto--initiaal{
  display:grid;place-items:center;background:var(--accent-soft);color:var(--brand-dark);
  font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);
}
.recensie-wie b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-base);color:var(--ink)}
.recensie-wanneer{display:block;font-size:var(--text-xs);color:var(--body)}
.stars{display:inline-flex;gap:1px}
.stars svg{width:16px;height:16px;fill:var(--sterren-goud);stroke:none}
.stars svg.is-leeg{fill:none;stroke:var(--sterren-leeg);stroke-width:1.6}

/* =========================================================
   LINKEDIN-FEED
   -----------------------------------------------------------------
   Vervangt de nieuwssectie op de homepage. De berichten komen uit een
   RSS-feed van de bedrijfspagina; zie Instellingen, LinkedIn.
   ========================================================= */
.li-feed{margin-bottom:0}
.li-post{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--card-padding);display:flex;flex-direction:column;transition:var(--duration) var(--ease);
}
.li-post:hover{transform:translateY(var(--lift));box-shadow:var(--shadow);border-color:var(--line-hover)}
.li-kop{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.li-merk{
  width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--brand);
}
.li-merk svg{width:22px;height:22px;fill:currentColor;stroke:none}
.li-kop b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-md);color:var(--ink)}
.li-kop time{display:block;font-size:var(--text-xs);color:var(--body)}
.li-beeld{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);margin-bottom:var(--space-4)}
.li-tekst{font-size:var(--text-md);margin-bottom:var(--space-5)}
.li-post .more{margin-top:auto}

/* =========================================================
   WHATSAPP-KNOP
   -----------------------------------------------------------------
   Rechtsonder, boven de belbalk maar onder de header, zodat het
   uitgeklapte mobiele menu er overheen valt. Linksonder blijft vrij
   voor de melding van Leadinfo.
   ========================================================= */
.wa-knop{
  position:fixed;right:20px;bottom:20px;z-index:95;
  display:inline-flex;align-items:center;gap:.6em;
  background:#25d366;color:#fff;border-radius:var(--r-pil);
  padding:.8em 1.25em;box-shadow:var(--shadow);
  font-family:var(--font-display);font-weight:500;font-size:var(--text-md);
  text-decoration:none;transition:var(--duration) var(--ease);
}
.wa-knop:hover{background:#1ebe5a;transform:translateY(-2px);text-decoration:none;color:#fff}
.wa-knop svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor;stroke:none}
@media (max-width:820px){
  /* Boven de belbalk, en alleen nog het icoon. */
  .wa-knop{bottom:72px;right:16px;padding:.85em;border-radius:50%}
  .wa-knop .wa-label{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
}
@media print{.wa-knop{display:none}}

/* =========================================================
   DE BELOFTE IN DE HERO
   -----------------------------------------------------------------
   De merkbelofte uit het brandbook staat boven de kop, in kleinkapitaal
   met een printplaatbaan ervoor. Het is geen kop en geen knop, het is
   de zin waar de rest van de pagina op rust.
   ========================================================= */
.hero-belofte{
  display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-5);
  font-family:var(--font-display);font-weight:500;font-size:var(--text-xs);
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.hero-belofte::before{
  content:"";flex:0 0 auto;width:40px;height:12px;background-color:var(--accent);
  mask-image:url(../brand/baan.svg);-webkit-mask-image:url(../brand/baan.svg);
  mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;
  mask-size:40px 12px;-webkit-mask-size:40px 12px;
}
@media (max-width:520px){.hero-belofte::before{display:none}}

/* =========================================================
   BELLEN VANUIT DE HERO
   -----------------------------------------------------------------
   Een derde knop in de rij zou de rij laten omslaan en alle drie de
   acties even zwaar maken. Bellen krijgt daarom een eigen regel: wel
   duidelijk aanwezig, maar herkenbaar als het alternatief voor wie
   niet wil plannen of typen.
   ========================================================= */
.hero-bellen{
  display:inline-flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);
  color:#fff;text-decoration:none;
}
.hero-bellen:hover{text-decoration:none;color:#fff}
.hero-bellen-icoon{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);transition:var(--duration) var(--ease);
}
.hero-bellen-icoon svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-bellen:hover .hero-bellen-icoon{background:#fff}
.hero-bellen:hover .hero-bellen-icoon svg{stroke:var(--brand)}
.hero-bellen-tekst b{
  display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-base);color:#fff;
}
.hero-bellen-tekst span{display:block;font-size:var(--text-sm);color:var(--body-light)}
@media (max-width:520px){.hero-bellen-tekst span{display:none}}

/* =========================================================
   KLANTENRASTER
   -----------------------------------------------------------------
   Vervangt de klantindex met alleen namen. Elke klant met een naam
   krijgt er een foto bij en elke kaart leidt naar zijn eigen verhaal.
   ========================================================= */
.klantenraster{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.klantkaart{
  display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--bg);text-decoration:none;transition:var(--duration) var(--ease);
}
.klantkaart:hover{
  transform:translateY(var(--lift));box-shadow:var(--shadow);border-color:var(--line-hover);text-decoration:none;
}
.klantkaart img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg-soft)}
.klantkaart span{
  display:block;padding:var(--space-3) var(--space-4);font-family:var(--font-display);font-weight:500;
  font-size:var(--text-md);color:var(--ink);
}
.klantkaart:hover span{color:var(--brand)}
@media (max-width:900px){.klantenraster{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.klantenraster{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   DE BELOFTE IN DE TOPBALK
   -----------------------------------------------------------------
   De merkbelofte uit het brandbook staat op elke pagina bovenaan, net
   als op de huidige site. .topbar-note houdt de marge naar rechts, dus
   deze regel staat daar links van zonder zelf te duwen.
   ========================================================= */
.topbar-belofte{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-xs);
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
}
@media (max-width:1180px){.topbar-belofte{display:none}}

/* =========================================================
   PLAATSOVERZICHT
   -----------------------------------------------------------------
   De plaatspagina's zijn kinderen van hun dienst en staan daardoor in
   geen enkel menu. Dit blok is hun ingang: per dienst één regel met de
   plaatsen als chips eronder.
   ========================================================= */
.plaatsen-rij{padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.plaatsen-rij:last-child{border-bottom:0}
.plaatsen-rij h3{margin:0 0 var(--space-3);font-size:var(--text-lg)}
.plaatsen-rij h3 a{color:var(--ink)}
.plaatsen-rij h3 a:hover{color:var(--brand);text-decoration:none}
.plaatsen-rij .chips{margin:0}
.klantkaart-initiaal{
  display:grid;place-items:center;aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:rgba(255,255,255,.5);font-family:var(--font-display);font-weight:700;font-size:2rem;
}

/* =========================================================
   RITME VAN DE PAGINAKOP EN DE HERO
   -----------------------------------------------------------------
   Stond eerder in aanpassingen.css, dat na site.css laadde en daardoor
   regels overschreef die hier ook stonden. Nu op één plek.
   ========================================================= */
/* ---------- Meer lucht in de paginakop ----------
   Titel, inleiding en de beoordelingsbalk stonden te dicht op elkaar,
   zeker doordat de titel een onderstreept accent kan bevatten. */
.page-hero h1 { margin-bottom: .62em; }
.page-hero .lead { margin-bottom: 0; }
.page-hero .lead + .review-badge,
.page-hero .review-badge { margin-top: var(--space-8); }
.page-hero .btn-row { margin-top: var(--space-8); }

/* Dezelfde verhouding op de hero van de homepage. */
.hero .review-badge { margin-bottom: var(--space-6); }
.hero h1 { margin-bottom: .45em; }
.hero-sub { margin-bottom: 2.1em; }

/* ---------- Het accent onder een deel van de titel ----------
   site.css tekent dat met border-bottom. Een rand zit altijd onder de
   hele regelbox, dus onder de ruimte voor staartletters, waardoor de
   streep ver van de tekst komt te staan. Als onderstreping rekent de
   browser vanaf de basislijn, en met text-underline-offset is de
   afstand precies te regelen. skip-ink uit houdt de lijn doorlopend,
   net als de rand deed. */
.hero h1 em,
.page-hero h1 em {
  padding-bottom: 0;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .38);
  text-decoration-thickness: 3px;
  text-underline-offset: .1em;
  text-decoration-skip-ink: none;
}

/* =========================================================
   PAGINERING
   -----------------------------------------------------------------
   Eén component voor de nieuwslijst (.paginering) en het query-blok van
   WordPress. Elk nummer is een aanraakdoel van minimaal 40px.
   ========================================================= */
.paginering,
.wp-block-query-pagination{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-2);
  margin-top:var(--space-12);
}
.paginering .page-numbers,
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch-sm);min-height:var(--touch-sm);
  padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--r-pil);background:#fff;
  font-family:var(--font-display);font-weight:500;font-size:var(--text-sm);color:var(--body);text-decoration:none;
  transition:border-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),background-color var(--duration-fast) var(--ease);
}
.paginering a.page-numbers:hover,
.wp-block-query-pagination a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.paginering .page-numbers.current,
.wp-block-query-pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.paginering .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots{border-color:transparent;background:none;min-width:auto}

/* =========================================================
   ZOEKRESULTATEN
   -----------------------------------------------------------------
   Een lijst, geen raster: bij zoeken lees je van boven naar beneden.
   Elk resultaat heeft dezelfde kopmaat als een kaarttitel, zodat de
   lijst niet schreeuwt.
   ========================================================= */
.zoek-in-kop{margin:var(--space-8) 0 0}
.zoekresultaten > .wp-block-post-template{list-style:none;margin:0;padding:0}
.zoekresultaten > .wp-block-post-template > li{margin:0}
.zoekresultaat{padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.zoekresultaat h2{font-size:var(--text-xl);margin:0 0 var(--space-2)}
.zoekresultaat h2 a{color:var(--ink)}
.zoekresultaat h2 a:hover{color:var(--brand)}
.zoekresultaat .wp-block-post-excerpt__excerpt{margin:0;font-size:var(--text-md)}
.zoekresultaat .wp-block-post-excerpt__more-text{display:none}
.leeg{padding:var(--space-8);border:1px dashed var(--color-border-strong);border-radius:var(--r);background:var(--bg-soft)}
.leeg h2{font-size:var(--text-xl)}
.leeg p:last-child{margin:0}

/* =========================================================
   KEURMERKEN IN DE HERO: INVLIEGEN
   -----------------------------------------------------------------
   De logo's naast de hoofdknop schuiven na de kop en tekst van links in,
   één voor één. Eenmalig bij laden, niet bij scrollen, en uit voor wie
   minder beweging wil. Zelfde easing als de rest van het systeem.
   ========================================================= */
@keyframes spete-invliegen{
  from{opacity:0;transform:translateX(-32px)}
  to{opacity:1;transform:none}
}
.hero .keurmerken--logo .keurmerk{
  animation:spete-invliegen .6s var(--ease) backwards;
  animation-delay:.35s;
}
.hero .keurmerken--logo .keurmerk:nth-child(2){animation-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .hero .keurmerken--logo .keurmerk{animation:none}
}

/* =========================================================
   LOPENDE TEKST (PROSE)
   -----------------------------------------------------------------
   Voor artikelen en andere lange teksten. Een kop binnen een tekst is
   een tussenkop, geen sectiekop: kleiner dan een h2 van een sectie en
   met duidelijk meer ruimte erboven dan eronder, zodat hij bij de tekst
   eronder hoort.
   ========================================================= */
.prose{font-size:var(--text-base);line-height:var(--leading-body)}
.prose > * + h2{margin-top:var(--space-12)}
.prose > * + h3{margin-top:var(--space-8)}
.prose h2{font-size:var(--text-2xl);margin-bottom:var(--space-3)}
.prose h3{font-size:var(--text-xl);margin-bottom:var(--space-2)}
.prose h4{font-size:var(--text-lg);margin:var(--space-6) 0 var(--space-2)}
.prose p,.prose ul,.prose ol{margin-bottom:var(--space-5)}
.prose li{margin-bottom:var(--space-2)}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose blockquote{margin:var(--space-8) 0;padding:var(--space-2) 0 var(--space-2) var(--space-6);
  border-left:3px solid var(--brand);color:var(--ink);font-size:var(--text-lg)}
.prose img{border-radius:var(--r)}
.artikel-beeld{margin:0 0 var(--space-10)}
.artikel-beeld img{border-radius:var(--r)}
.artikel-terug{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--line)}

/* Kleinste telefoons (360px breed, lage viewport): één stap kleiner in de
   spacingschaal, zodat de klantbalk ook daar in het eerste scherm valt. */
@media (max-width:400px) and (max-height:760px){
  .home .hero-content{padding:var(--space-4) 0 var(--space-5)}
  .home .hero-sub{margin-bottom:var(--space-3)}
  .home .hero-belofte{margin-bottom:var(--space-2)}
}

/* Geleverde diensten onder een klantcase: links als chips, links uitgelijnd
   onder de tekst van de case. */
.case-diensten h2{margin-bottom:var(--space-4)}
.case-diensten .chips{justify-content:flex-start}