@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nieuw Begin: gegenereerd door build.py uit het ontwerpcanvas. Niet met de hand wijzigen. */

  :root{
    --accent:#E8601A; --accent-donker:#B94A0C; --accent-diep:#8F3A09; --accent-zacht:#FFF1E8;
    --deep:#183D69; --deep-diep:#0F2C4D; --deep-rgb:24,61,105;
    --ink:#14243F; --bg:#FAF9F6; --surface:#FFFFFF; --surface-2:#F1F0EC;
    --koel:#EEF3F9; --muted:#5B6472; --muted-licht:#A3ACBB;
    --muted-op-deep:#D8E2EF; --line:#E2E1DE; --line-deep:rgba(255,255,255,.16);
    --ster:#FCB444; --oker:#FCB444; --oranje-licht:#FFC49A; --veld-rand:#C9CBD1;
    --plaatshouder:#8A929E;   /* tekst in een leeg veld */
    --op-deep:#EAF0F7;        /* leestekst op een donker vlak */

    --radius:10px; --radius-beeld:16px;
    --schaduw-kaart:0 1px 0 rgba(var(--deep-rgb),.04), 0 24px 48px -28px rgba(var(--deep-rgb),.30);
    --schaduw-zwevend:0 2px 4px -2px rgba(var(--deep-rgb),.10), 0 28px 56px -24px rgba(var(--deep-rgb),.34);

    --kop:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
    --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

    /* De leesbreedte en de marges zijn geen twee vaste waarden meer. --wrap is
       overal 1360; op een smal blad is het blad zelf smaller en doet die grens
       niets. De marge en de sectiehoogte lopen mee met de breedte. */
    --wrap:1440px;
    /* 18 en niet 20: de kop is een los component met zijn eigen marge, en die
       begint op 18. Wijken die twee af, dan staat het logo niet boven de tekst
       eronder. De marge is een maat en geen ritme, dus hij hoeft niet op de
       ruimteschaal te liggen. */
    --gutter:clamp(18px, 9.829px + 2.0952vw, 40px);
    --sectie-y:clamp(56px, 41.143px + 3.8095vw, 96px);

    --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
  }

  /* Kolommen en zijbalken schakelen op de breedte van het blad zelf, niet op
     die van het venster. Daardoor klopt het ook op het canvas, waar meerdere
     artboards naast elkaar in één venster staan.
     Het aantal staat als getal in de opmaak (--kol-m mobiel, --kol-t tussenin,
     --kol-d bureaublad); de regels hieronder kiezen welke geldt. Zo staat de
     structuur één keer beschreven in plaats van twee keer. */
  [data-kol]{grid-template-columns:repeat(var(--kol-m,1),minmax(0,1fr))}
  [data-zij]{grid-template-columns:minmax(0,1fr)}
  @media (min-width:640px){
    [data-kol]{grid-template-columns:repeat(var(--kol-t,var(--kol-m,1)),minmax(0,1fr))}
  }
  @media (min-width:1000px){
    [data-kol]{grid-template-columns:repeat(var(--kol-d,var(--kol-m,1)),minmax(0,1fr))}
    [data-zij]{grid-template-columns:var(--zij)}
  }

  /* De Engelse kop. Eén stuk opmaak dat zichzelf omklapt, op hetzelfde punt
     als Kop.dc.html doet. Hij stond eerder in twee versies in de generator en
     liep daardoor tussen 480 en 900 uit de bocht: die breedtes bestonden
     nergens. */
  [data-en-top],[data-en-nav],[data-en-acties]{display:none}
  [data-en-mob]{display:flex}
  @media (min-width:1000px){
    [data-en-top]{display:block}
    [data-en-nav],[data-en-acties]{display:flex}
    [data-en-mob]{display:none}[data-en-merk]{display:none!important}
  }

  *{box-sizing:border-box}
  body{margin:0}
  body.nb-site{width:100%;min-height:100vh;background:var(--bg);font-family:var(--body);
    font-size:17px;line-height:1.6;color:var(--ink);-webkit-font-smoothing:antialiased;position:relative}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

  h1,h2,h3{font-family:var(--kop);font-weight:800;margin:0;letter-spacing:-.025em;line-height:1.04}
  h1{font-size:64px;letter-spacing:-.025em}
  h2{font-size:40px;letter-spacing:-.022em}
  h3{font-family:var(--body);font-weight:600;font-size:17px;letter-spacing:0;line-height:1.35}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  table{border-collapse:collapse;width:100%}
  /* Een brede tabel mag schuiven in plaats van de pagina uit elkaar te duwen.
     Dit is de enige plek waar zijwaarts scrollen is toegestaan. */
  .tabelwikkel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabelwikkel>table{min-width:min(100%,640px)}

  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--accent-donker)}
  .eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);flex:none}
  .eyebrow--op-deep{color:var(--oranje-licht)}
  .lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:36em}
  .lede--op-deep{color:var(--muted-op-deep)}
  .klein{font-size:15px;line-height:1.55;color:var(--muted)}

  .knop{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;
    padding:0 26px;border-radius:var(--radius);font-weight:600;font-size:17px;white-space:nowrap}
  .knop--primair{background:var(--accent);color:#fff}
  .knop--primair:hover{background:var(--accent-donker)}
  .lees:hover{color:var(--accent-diep)}
  .knop--wit{background:var(--surface);color:var(--deep);border:1px solid var(--line)}
  .knop--lijn{background:transparent;color:var(--deep);border:1px solid var(--veld-rand)}
  .knop--lijn-op-deep{background:transparent;color:#fff;border:1px solid var(--line-deep)}
  .knop--vol{width:100%}

  /* Twee gedragingen die eerder twee versies van een blok vroegen.
     data-vol: een knop die op een smal blad de volle breedte pakt.
     data-plak: een zijbalk die pas meeloopt als er een tweede kolom is.
     Deze regels staan ná de knopstijlen, anders wint .knop met dezelfde
     specificiteit en gebeurt er niets. */
  [data-vol]{width:100%}
  /* De plaatsnamen op de kaart hebben ruimte nodig. Past die er niet, dan
     blijven de stippen staan en noemt de lijst ernaast de plaatsen. */
  [data-kaartnaam]{display:none}
  @media (min-width:640px){ [data-kaartnaam]{display:block} }
  [data-plak]{position:static}
  @media (min-width:640px){ [data-vol]{width:auto} }
  @media (min-width:1000px){ [data-plak]{position:sticky;top:20px} }

  /* De kaart draagt zijn eigen maat. Stond die per plek in de opmaak, dan
     kreeg dezelfde kaart op de ene pagina 20 en op de andere 26 — allebei
     netjes op de schaal en samen toch geen ontwerp. Drie varianten, elk met
     een reden: een kaart om een tabel heeft bovenin geen ruimte nodig omdat
     de kolomkoppen die zelf meebrengen; een blokje in de begrippenindex is
     te klein voor de volle maat; en een kaart die alleen beeld of rijen
     bevat laat de padding aan die rijen. */
  .kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    padding:clamp(20px, 17.771px + 0.5714vw, 26px)}
  .kaart--tabel{padding:clamp(6px, 4.886px + 0.2857vw, 9px) clamp(20px, 17.771px + 0.5714vw, 26px) clamp(15px, 13.143px + 0.4762vw, 20px)}
  .kaart--rij{padding:clamp(12px, 10.886px + 0.2857vw, 15px) clamp(15px, 13.143px + 0.4762vw, 20px)}
  .kaart--blok{padding:12px 15px}
  .kaart--vlak{padding:0}
  .pil{display:inline-block;padding:4px 9px;border-radius:999px;background:var(--surface-2);
    font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap}
  .lees{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}

  .sectie{padding:var(--sectie-y) 0}
  .sectie--wit{background:var(--surface)}
  .sectie--warm{background:linear-gradient(180deg,var(--surface-2) 0%,var(--bg) 62%)}
  .sectie--zand{background:var(--surface-2)}
  .sectie--koel{background:linear-gradient(180deg,var(--koel),#F7FAFD)}
  .sectie--deep{background:var(--deep);color:#fff;position:relative;isolation:isolate}
  .sectie--deep::after{content:"";position:absolute;inset:0;background-image:var(--korrel);
    opacity:.16;mix-blend-mode:overlay;pointer-events:none;z-index:-1}

  .sterren{display:inline-flex;gap:2px;color:var(--ster)}
  .vink{flex:none;margin-top:3px}
  .raster{display:grid;gap:26px}
  /* Veelgestelde vragen: de vraag is de knop, het pijltje toont of hij open is. */
  .faq-vraag summary{list-style:none;cursor:pointer}
  .faq-vraag summary::-webkit-details-marker{display:none}
  .faq-vraag[open] .faq-pijl{transform:rotate(180deg)}
    /* Op mobiel altijd eerst de tekst, dan het beeld. */
  @media (max-width:999px){ [data-beeld-na]{order:2} }
  

  
  @media (min-width: 981px) and (hover: hover) {
    [data-hdrnav] li:hover > [data-dienstenlijst] { display: block !important; }
    [data-hdrnav] [data-dienstenlijst]::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  }
  @media (min-width: 981px) {
    [data-woordmerk] { display: none !important; }
    [data-menuknop] { display: none !important; }
    [data-flyout] { display: none !important; }
    [data-sluier] { display: none !important; }
  }
  @media (max-width: 980px) {
    [data-topbalk] { display: none !important; }
    [data-hdrnav] { display: none !important; }
    [data-hdracties] { display: none !important; }
    [data-mobielbalk] { display: grid !important; }
  }
  @media (max-width: 640px) {
    [data-topbalk-adres] { display: none !important; }
    [data-hdr] img { height: 44px !important; }
  }
  @media (max-width: 380px) {
    [data-topbalk-mail] { display: none !important; }
  }
  [data-hdr][data-zwevend="ja"] {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 12px clamp(18px, 14.32px + 1.5238vw, 40px) 0 !important;
  }
  [data-hdr][data-zwevend="ja"] > div {
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(10px);
    border-radius: 14px;
  }
  [data-hdr][data-zwevend="ja"] [data-hdrnav] a,
  [data-hdr][data-zwevend="ja"] [data-hdrnav] button {
    color: #FFFFFF !important;
  }
  [data-hdr][data-zwevend="ja"] [data-hdrnav] svg { stroke: #FFFFFF; }
  [data-hdr][data-zwevend="ja"] [data-hdracties] > a:first-child { color: #FFFFFF !important; }
  [data-hdr][data-zwevend="ja"] [data-hdracties] > a:last-child { background: #E8601A !important; }
  [data-hdr][data-zwevend="ja"] [data-menuknop] {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.5) !important;
    color: #FFFFFF !important;
  }
  [data-hdr][data-zwevend="ja"] [data-woordmerk] span { color: #FFFFFF !important; }
  [data-hdr][data-zwevend="ja"] [data-hdrlogo] { display: none !important; }
  [data-hdr][data-zwevend="ja"] [data-hdrlogowit] { display: block !important; }


  
  @media (max-width: 980px) {
    [data-voet] { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  }

.nbh-34eee4:hover{background:#B94A0C !important}
.nbh-37e9bd:hover{color:#183D69 !important}
.nbh-6e134c:hover{background:#F1F0EC !important}
.nbh-b61ba1:hover{text-decoration:underline !important}
.nbh-c466f2:hover{color:#B94A0C !important}
/* ------------------------------------------------------------------
   Aanvulling voor WordPress. Alles hierboven komt letterlijk uit het
   ontwerp; hieronder staat wat een echte site extra nodig heeft.
   ------------------------------------------------------------------ */

/* Elementor-containers zonder eigen maat: het ontwerp regelt de ruimte zelf */
body.nb-site .elementor .e-con,
body.nb-site .elementor .e-con-inner{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
  --gap:0px;--row-gap:0px;--column-gap:0px;--widgets-spacing:0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;
  --content-width:100%;max-width:none}
body.nb-site .elementor .e-con{padding:0}
/* Elementor zet position:relative op elke container en widget. Daardoor tekent
   elke volgende sectie over uitstekende delen (zoals de vertrouwensstrook onder
   de hero) heen. Op de voorkant zijn ze statisch; in de editor blijven ze relatief. */
body.nb-site:not(.elementor-editor-active) .elementor .e-con,
body.nb-site:not(.elementor-editor-active) .elementor .elementor-widget-html{position:static}
body.nb-site .elementor-widget-html{width:100%}
body.nb-site .elementor-element.elementor-widget{margin:0}
body.nb-site img{max-width:100%}
body.nb-site svg{flex-shrink:0}
body.nb-site ::selection{background:var(--accent-zacht);color:var(--ink)}
html{scroll-behavior:smooth;scroll-padding-top:20px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Koppen lopen vloeiend van telefoon (390) naar bureaublad (1440),
   met de maten van de twee artboards als begin- en eindpunt. */
h1{font-size:clamp(34px, 22.857px + 2.857vw, 64px)}
h2{font-size:clamp(26px, 20.8px + 1.3333vw, 40px)}
@media (max-width:767px){
  h1{letter-spacing:-.02em}
  .lede{font-size:17px}
  .raster{gap:15px}
  /* Veelgestelde vragen: de maten van het mobiele artboard */
  .faq-vraag summary{min-height:64px!important;padding:14px 15px 14px 20px!important}
  .faq-vraag summary>span:first-child{font-size:16px!important}
  .faq-vraag .faq-pijl{width:36px!important;height:36px!important}
  .faq-vraag>p{padding:0 20px 20px!important;font-size:15px!important}
  .knop{white-space:normal;text-align:center;line-height:1.2}
}
.faq-pijl{transition:transform .2s ease}
.faq-vraag summary:focus-visible{outline:2px solid var(--deep);outline-offset:2px;border-radius:14px}

/* Knoppen die echte buttons zijn geworden */
button.knop{border:0;cursor:pointer;font-family:inherit;line-height:1}
button.knop--lijn{border:1px solid var(--veld-rand);background:transparent}
button.knop--lijn:hover{border-color:var(--deep)}
button.knop[disabled]{opacity:.6;cursor:progress}
.knop--primair{transition:background-color .15s ease}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sectie--deep a:focus-visible,.sectie--deep button:focus-visible,footer a:focus-visible{outline-color:#fff}

/* Formuliervelden: dezelfde maat en kleur als de velden in het ontwerp */
.nb-veld{display:block;width:100%;height:48px;padding:0 12px;border:1px solid var(--veld-rand);border-radius:8px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:1.2;margin:0;
  transition:border-color .15s ease, box-shadow .15s ease;-webkit-appearance:none;appearance:none}
@media (min-width:768px){.nb-veld{font-size:15px}}
.nb-veld::placeholder{color:var(--plaatshouder);opacity:1}
.nb-veld:hover{border-color:#A9ADB6}
.nb-veld:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 3px rgba(var(--deep-rgb),.14)}
.nb-veld--kies{padding-right:38px;cursor:pointer;text-overflow:ellipsis;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center}
.nb-veld--tekst{height:auto;min-height:88px;padding:12px;line-height:1.5;resize:vertical}
.nb-veld[readonly],.nb-veld--auto{background-color:var(--surface-2)}
input[type=number].nb-veld{-moz-appearance:textfield}
input[type=number].nb-veld::-webkit-inner-spin-button{opacity:1;height:28px}
input[type=date].nb-veld{min-height:48px}
.nb-veld[aria-invalid=true]{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.nb-fout{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:#B3261E}
.nb-optioneel{font-weight:400;color:var(--muted)}
[data-nb-verplicht]::after{content:" *";color:var(--accent-donker)}
.nb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.nb-form{position:relative}
.nb-form [data-nb-stap][hidden]{display:none!important}
.nb-status{margin:15px 0 0;font-size:15px;line-height:1.45;color:var(--ink);background:var(--accent-zacht);
  border-radius:8px;padding:12px 14px}
.nb-status[data-soort=fout]{background:#FDECEA;color:#8C1D18}
.nb-form [data-nb-stap]{animation:nbIn .22s ease}
@keyframes nbIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[data-nb-balk] span{transition:background-color .2s ease}
[data-nb-terug][data-verborgen]{visibility:hidden}

/* m3-calculator: tellers zijn knoppen */
[data-nb-calc] button[data-nb-min],[data-nb-calc] button[data-nb-plus]{cursor:pointer;font:inherit;line-height:1;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
[data-nb-calc] button[data-nb-min]:hover,[data-nb-calc] button[data-nb-plus]:hover{filter:brightness(.96)}
[data-nb-calc] [data-nb-aantal]{font-variant-numeric:tabular-nums;min-width:2ch;text-align:center}
[data-nb-uit]{font-variant-numeric:tabular-nums}

/* Kruimelpad in de dunne band onder de kop */
.nb-kruimelband{background:var(--surface);border-bottom:1px solid var(--line)}
.nb-kruimel ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:10px 0;list-style:none;font-size:13px;line-height:1.4;color:var(--muted)}
.nb-kruimel li{display:flex;align-items:center;gap:8px;min-width:0}
.nb-kruimel li+li::before{content:"";width:6px;height:6px;border-top:1.5px solid var(--muted-licht);border-right:1.5px solid var(--muted-licht);transform:rotate(45deg);flex:none}
.nb-kruimel a{color:var(--deep)}
.nb-kruimel a:hover{text-decoration:underline}
.nb-kruimel [aria-current]{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Voetkoppen hielden de maat van de h3 */
.nb-voetkop{font-family:var(--body);font-weight:600;font-size:17px;line-height:1.35;color:#fff}

/* Overslaan naar de inhoud */
.nb-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--deep);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600}
.nb-skip:focus{top:12px}

/* Menu: open/dicht via data-attribuut, de stijl uit het ontwerp blijft */
body.nb-menu-open{overflow:hidden}
[data-hdr] [data-dienstenknop] svg{transition:transform .2s ease}
[data-hdr] [aria-expanded=true] svg{transform:rotate(180deg)}

/* Het ontwerp is gemaakt voor 1440; daarboven blijft het blad op die maat
   en groeit alleen de achtergrond mee. */
@media (min-width:1441px){
  body.nb-site{font-size:17px}
}

/* Schuifbalken van de rekenhulp: de echte range-input ligt onzichtbaar over de getekende baan */
[data-nb-schuif] [data-nb-vul],[data-nb-schuif] [data-nb-duim]{pointer-events:none}
.nb-schuif{position:absolute;left:-11px;right:-11px;top:-14px;height:34px;width:calc(100% + 22px);margin:0;opacity:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y}
.nb-schuif:focus-visible + *,.nb-schuif:focus-visible{outline:none}
[data-nb-schuif] div:has(> .nb-schuif:focus-visible) [data-nb-duim]{box-shadow:0 0 0 4px rgba(255,255,255,.35)}

/* Het hidden-attribuut wint altijd, ook van .knop{display:inline-flex} */
body.nb-site [hidden]{display:none!important}
/* Terug op stap 1: op bureaublad onzichtbaar maar op zijn plek, eronder weg */
@media (max-width:999px){[data-nb-terug][data-verborgen]{display:none!important}}

/* m3-calculator: de tellerknoppen houden de witte vorm uit het ontwerp */
[data-nb-calc] button[data-nb-min],[data-nb-calc] button[data-nb-plus]{background:var(--surface);color:var(--ink);padding:0}
[data-nb-calc] button[disabled]{opacity:.4;cursor:default}
/* Namen van stukken lopen op een telefoon door naar een tweede regel in plaats van af te kappen */
@media (max-width:639px){
  [data-nb-stuk]>span:first-child{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.3}
}
/* Tikvlak van 44 px rond de kleine tellerknoppen, zonder dat ze groter ogen */
[data-nb-calc] button[data-nb-min],[data-nb-calc] button[data-nb-plus]{position:relative}
[data-nb-calc] button[data-nb-min]::after,[data-nb-calc] button[data-nb-plus]::after{content:"";position:absolute;inset:-5px}

/* 404 */
.nb-404{padding:var(--sectie-y) 0;background:linear-gradient(180deg,var(--surface-2) 0%,var(--bg) 62%)}
.nb-404 h1{margin:15px 0 15px}
.nb-404 .lede{margin-bottom:26px}
.nb-404 ul{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.nb-404 ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--deep);font-weight:600;font-size:15px}
.nb-404 ul a:hover{border-color:var(--deep)}

/* De inhoud is op bureaublad 1440 px breed; achtergronden lopen van rand tot rand */
:root{--wrap:calc(1440px + 2 * var(--gutter))}

/* Op bureaublad mag een kop over twee regels lopen in plaats van drie */
@media (min-width:1000px){
  h1{max-width:none!important;text-wrap:balance}
  div:has(> h1)[style*="max-width:760px"]{max-width:1000px!important}
}

/* Hero op mobiel: een diepere laag zodat de witte tekst goed leesbaar blijft */
@media (max-width:767px){
  .nb-site [data-nb-hero] [data-nb-laag="zwart"]{background:linear-gradient(180deg,rgba(12,34,60,.74) 0%,rgba(12,34,60,.84) 50%,rgba(12,34,60,.94) 100%)!important}
}

/* Particulier/zakelijk: rustige segmentknop */
[data-nb-segment]{gap:4px!important}
[data-flyout] [data-nb-segment]{padding:4px!important;border-radius:99px}
[data-flyout] [data-nb-segment] a{min-height:42px!important}
[data-nb-segment] [data-actief]{box-shadow:0 1px 2px rgba(20,36,63,.10),0 3px 10px -6px rgba(20,36,63,.35)}
[data-nb-segment] a:not([data-actief]):hover{color:#14243F!important}

/* Trustindex-widget in het reviewblok */
[data-nb-trustindex]{min-height:260px}
.sectie--deep [data-nb-trustindex] .ti-widget{color:inherit}

/* ------------------------------------------------------------------
   m3-calculator (data-nb-calc2)
   ------------------------------------------------------------------ */
.nbc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px, 11.829px + 2.0952vw, 44px);align-items:start}
@media (min-width:1000px){.nbc{grid-template-columns:minmax(0,1fr) 400px}}
.nbc-main{min-width:0}
.nbc-start{display:grid;gap:15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-beeld);padding:clamp(20px, 17.771px + .5714vw, 26px);margin-bottom:15px}
@media (min-width:900px){.nbc-start{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.nbc-start__h{font-family:var(--kop);font-weight:700;font-size:21px;letter-spacing:-.015em;line-height:1.2;margin:8px 0 6px}
.nbc-presets{display:flex;flex-wrap:wrap;gap:8px}
.nbc-preset{font:inherit;font-size:15px;font-weight:600;color:var(--deep);background:var(--surface-2);border:1px solid transparent;border-radius:999px;
  min-height:44px;padding:0 16px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.nbc-preset:hover{border-color:var(--deep)}
.nbc-preset[aria-pressed=true]{background:var(--deep);color:#fff}
.nbc-zoek{position:relative;margin-bottom:12px}
.nbc-zoek svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.nbc-zoek .nb-veld{padding-left:42px;height:52px;border-radius:12px;background:var(--surface)}
.nbc-zoekleeg{margin:0 0 12px}
.nbc-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 2px 10px;margin:0 -2px 6px;scroll-snap-type:x proximity}
.nbc-tabs::-webkit-scrollbar{display:none}
@media (min-width:1000px){.nbc-tabs{flex-wrap:wrap;overflow:visible}}
.nbc-tab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;scroll-snap-align:start;transition:border-color .15s ease,background-color .15s ease}
.nbc-tab svg{color:var(--muted)}
.nbc-tab:hover{border-color:var(--veld-rand)}
.nbc-tab[aria-selected=true]{background:var(--deep);border-color:var(--deep);color:#fff}
.nbc-tab[aria-selected=true] svg{color:#fff}
.nbc-tab__tel{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.nbc-tab[aria-selected=true] .nbc-tab__tel{background:#fff;color:var(--deep)}
.nbc-paneel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-beeld);overflow:hidden}
.nbc-paneel__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(16px, 13.771px + .5714vw, 22px);background:var(--surface-2)}
.nbc-paneel__h{font-family:var(--kop);font-weight:700;font-size:18px;letter-spacing:-.01em}
.nbc-paneel__m3{font-family:var(--kop);font-weight:700;font-size:16px;color:var(--deep);font-variant-numeric:tabular-nums}
.nbc-lijst{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.nbc-lijst{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nbc-rij{display:flex;align-items:center;gap:10px;padding:10px clamp(16px, 13.771px + .5714vw, 22px);border-top:1px solid var(--line);min-height:62px}
@media (min-width:640px){.nbc-rij:nth-child(odd){border-right:1px solid var(--line)}}
.nbc-rij__naam{flex:1 1 auto;min-width:0;font-size:15px;line-height:1.3}
.nbc-rij__vol{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.nbc-rij[data-actief] {background:var(--accent-zacht)}
.nbc-rij[data-actief] .nbc-rij__naam{font-weight:600}
.nbc-rij[data-nbc-dozen] .nbc-rij__naam::after{content:" (per doos)";color:var(--muted);font-weight:400;font-size:13px}
.nbc-rij[hidden]{display:none}
.nbc-tel{flex:none;display:inline-flex;align-items:center;gap:4px}
.nbc-tel__k{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:18px;line-height:1;cursor:pointer;position:relative;touch-action:manipulation}
.nbc-tel__k::after{content:"";position:absolute;inset:-4px}
.nbc-tel__k:hover{border-color:var(--deep)}
.nbc-tel__k[disabled]{opacity:.35;cursor:default}
.nbc-tel__n{width:44px;height:36px;border:0;background:transparent;text-align:center;font:inherit;font-size:16px;font-weight:700;color:var(--ink);-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.nbc-tel__n::-webkit-inner-spin-button,.nbc-tel__n::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.nbc-tel__n:focus{outline:2px solid var(--deep);outline-offset:0;border-radius:6px}
.nbc-eigen{border-top:1px solid var(--line)}
.nbc-eigen summary{list-style:none;cursor:pointer;padding:14px clamp(16px, 13.771px + .5714vw, 22px);font-size:15px;font-weight:600;color:var(--deep)}
.nbc-eigen summary::-webkit-details-marker{display:none}
.nbc-eigen summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:10px;border-radius:50%;background:var(--accent-zacht);color:var(--accent-donker);font-weight:700}
.nbc-eigen[open] summary::before{content:"−"}
.nbc-eigen__vak{display:grid;gap:12px;padding:0 clamp(16px, 13.771px + .5714vw, 22px) 18px}
.nbc-eigen__vak label span,.nbc-f>span,.nbc-som__opties label>span{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px}
.nbc-eigen__maten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.nbc-eigen__vak .knop{justify-self:start;height:46px}
.nbc-rij[data-eigen] .nbc-rij__naam::before{content:"Eigen";display:inline-block;margin-right:8px;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:600}

.nbc-som{display:grid;gap:15px}
.nbc-som__kaart{background:var(--deep);color:#fff;border-radius:var(--radius-beeld);padding:clamp(20px, 17.771px + .5714vw, 26px);position:relative;isolation:isolate;overflow:hidden}
.nbc-som__kaart::after{content:"";position:absolute;inset:0;background-image:var(--korrel);opacity:.15;mix-blend-mode:overlay;pointer-events:none;z-index:-1}
.nbc-som__m3{font-family:var(--kop);font-weight:800;font-size:clamp(44px, 39.543px + 1.1429vw, 56px);line-height:1;letter-spacing:-.03em;margin:8px 0 6px;font-variant-numeric:tabular-nums}
.nbc-som__uitleg{font-size:14px;color:var(--muted-op-deep);margin:0 0 18px}
.nbc-som__rijen{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--line-deep);border-bottom:1px solid var(--line-deep)}
.nbc-som__rijen div{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.nbc-som__rijen div span:first-child{color:var(--muted-op-deep)}
.nbc-som__rijen div span:last-child{font-weight:600}
.nbc-som__opties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.nbc-som__opties label>span{color:var(--muted-op-deep)}
.nbc-som__opties .nb-veld{height:44px;background-color:rgba(255,255,255,.08);border-color:var(--line-deep);color:#fff}
.nbc-som__opties .nb-veld--kies{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D8E2EF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.nbc-som__opties .nb-veld option{color:var(--ink)}
.nbc-som__bedrag{background:rgba(255,255,255,.08);border:1px solid var(--line-deep);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.nbc-som__label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-op-deep);margin-bottom:6px}
.nbc-som__bedrag [data-nb-uit=bedrag]{font-family:var(--kop);font-weight:800;font-size:clamp(26px, 24.514px + .381vw, 30px);letter-spacing:-.02em;line-height:1.1}
.nbc-som__noot{font-size:13px;line-height:1.5;color:var(--muted-op-deep);margin:0 0 16px}
.nbc-som__klein{display:flex;justify-content:center;gap:18px;margin-top:12px}
.nbc-som__klein button{background:none;border:0;color:var(--muted-op-deep);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 2px}
.nbc-som__klein button:hover{color:#fff}
.nbc-kamers{padding:16px 20px}
.nbc-kamers__h{font-weight:600;margin:0 0 8px}
.nbc-kamers ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.nbc-kamers li{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.nbc-kamers li b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.nbc-form{display:block}
.nbc-form[hidden]{display:none}
.nbc-form__h{font-family:var(--kop);font-weight:700;font-size:21px;letter-spacing:-.015em;margin:0 0 4px}
.nbc-form .klein{margin-bottom:14px}
.nbc-f{display:block;margin-bottom:12px}
.nbc-f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nbc-balk{display:none}
@media (max-width:999px){
  body.nb-site:has([data-nb-calc2]) [data-mobielbalk]{display:none!important}
  .nbc-balk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px -18px rgba(23,32,31,.4)}
  .nbc-balk>div{display:flex;flex-direction:column;line-height:1.2}
  .nbc-balk__m3{font-family:var(--kop);font-weight:800;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
  .nbc-balk__b{font-size:13px;color:var(--muted)}
  .nbc-balk .knop{height:48px;padding:0 18px;font-size:16px}
  .nbc-sectie{padding-bottom:calc(var(--sectie-y) + 70px)}
}
@media print{
  [data-topbalk],[data-hdr],footer,[data-mobielbalk],.nbc-balk,.nbc-start,.nbc-zoek,.nbc-tabs,.nbc-eigen,.nbc-som__opties,.nbc-som__klein,[data-nbc-verstuur-open],.nbc-form,
  .nb-kruimelband,.sectie:not(.nbc-sectie),.nbc-rij:not([data-actief]),[data-nb-laag]{display:none!important}
  .nbc-paneel[hidden]{display:block!important}
  .nbc-paneel:not(:has([data-actief])){display:none!important}
  .nbc{grid-template-columns:1fr!important}
  .nbc-som__kaart{background:#fff!important;color:#000!important;border:1px solid #ccc}
  .nbc-som__kaart *{color:#000!important}
  .nbc-lijst{grid-template-columns:1fr 1fr!important}
  .nbc-tel__k{display:none}
  body.nb-site{background:#fff}
}

/* ---------------------------------------------------------------- hero 50/50
   Tekst en aanvraagkaart elk de helft. De kaart schaalt mee op zijn eigen breedte. */
@media (min-width:1000px){
  [data-nb-hero5050]{--zij:minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important}
  [data-nb-hero5050] > div:first-child{padding-top:0!important}
}
[data-nb-herokaart]{container-type:inline-size;position:relative}
.nb-hk{margin:2px 0 16px;padding:14px 16px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);grid-column:1/-1}
.nb-hk-bedrag{display:grid;gap:2px}
.nb-hk-lbl{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nb-hk strong{font-family:var(--kop);font-weight:700;font-size:22px;letter-spacing:-.015em;color:var(--ink);line-height:1.25;font-variant-numeric:tabular-nums}
.nb-hk-meta{display:flex;flex-wrap:wrap;gap:4px 7px;font-size:13px;color:var(--muted)}
.nb-hk-plaats{display:block;min-height:0;font-size:12px;color:var(--muted);margin-top:5px}
.nb-hk-plaats:empty{display:none}
.nb-hk-plaats::before{content:"✓ ";color:var(--accent)}
@container (min-width:520px){
  [data-nb-herokaart] > div:first-child{padding:24px 34px!important}
  [data-nb-herokaart] > div:first-child > div:first-child{font-size:25px!important}
  [data-nb-herokaart] > div:nth-child(2){padding:24px 34px 30px!important}
  [data-nb-herokaart] [data-nb-titel]{font-size:24px!important}
  [data-nb-herokaart] [data-nb-stap="1"]:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px}
  [data-nb-herokaart] [data-nb-stap="1"] > *{grid-column:1/-1}
  [data-nb-herokaart] [data-nb-stap="1"] > div:nth-child(1),
  [data-nb-herokaart] [data-nb-stap="1"] > div:nth-child(2){grid-column:auto}
  [data-nb-herokaart] [data-nb-stap="1"] > div[style*="grid-template-columns"]{column-gap:14px!important}
  [data-nb-herokaart] [data-nb-stap="2"] > div:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
  [data-nb-herokaart] [data-nb-stap="2"] > div:first-child > div:nth-child(2){display:contents!important}
  [data-nb-herokaart] [data-nb-stap="2"] > div:first-child > div{margin-bottom:15px!important}
  [data-nb-herokaart] [data-nb-stap="2"] > div:first-child > div:last-child{margin-bottom:20px!important}
  .nb-hk{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}
  .nb-hk strong{font-size:26px}
  [data-nb-herokaart] .knop--vol{height:56px;font-size:17px}
}

/* Kop tussen tablet en breed scherm: alles op één regel houden */
@media (min-width:981px) and (max-width:1239px){
  [data-hdr] > div{flex-wrap:nowrap!important;gap:18px!important}
  [data-hdrnav] ul{flex-wrap:nowrap!important;gap:4px 14px!important;font-size:15.5px}
  [data-hdrnav] ul a,[data-hdrnav] ul button{white-space:nowrap}
  [data-hdracties]{gap:8px!important}
  [data-hdracties] > a:first-child{font-size:0!important;gap:0!important;width:44px;justify-content:center;border:1.5px solid var(--line);border-radius:10px}
  [data-hdracties] > a:first-child svg{width:18px;height:18px}
  [data-hdracties] > a:last-child{font-size:15.5px!important;padding:0 16px!important}
  [data-topbalk-adres]{display:none!important}
  [data-topbalk] > div{flex-wrap:nowrap!important}
}
@media (min-width:1000px) and (max-width:1099px){
  [data-nb-hero5050]{--zij:minmax(0,1fr) 440px!important}
}

/* Zakelijk: uitkomst van de werkplekkenkaart */
.nb-zk{display:block;margin:4px 0 16px}
.nb-zk-noot{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
#aanvraag,#aanvraag-onderaan{scroll-margin-top:24px}

/* ---------------------------------------------------------------- mobiel: kop en snelbalk
   De kop verdwijnt bij naar beneden scrollen en komt terug zodra u omhoog scrolt.
   De snelbalk verschijnt pas na de hero en wijkt zodra er een formulier in beeld is. */
@media (max-width:980px){
  [data-hdr]{position:sticky!important;top:0;transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease;will-change:transform}
  body.nb-kop-weg [data-hdr]{transform:translateY(-100%)}
  body.nb-kop-los [data-hdr]{box-shadow:0 10px 28px -22px rgba(20,36,63,.55)}
  body.nb-menu-open [data-hdr]{transform:none}
  #aanvraag,#aanvraag-onderaan,#werkplekken{scroll-margin-top:92px}
  [data-mobielbalk]{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;
    padding:8px!important;gap:8px!important;border:1px solid rgba(226,225,222,.9)!important;border-radius:16px;
    background:rgba(255,255,255,.92)!important;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    box-shadow:0 14px 34px -18px rgba(20,36,63,.45)!important;
    transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;
    transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .28s ease}
  [data-mobielbalk] > a{height:48px!important;min-height:48px!important;border-radius:12px!important}
  [data-mobielbalk] > a:not(:last-child){width:48px!important;border:0!important;background:#F1F0EC}
  body.nb-balk-aan [data-mobielbalk]{transform:none;opacity:1;pointer-events:auto}
  body.nb-menu-open [data-mobielbalk]{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  [data-hdr],[data-mobielbalk]{transition:none!important}
}

/* ---------------------------------------------------------------- video's: korte filmpjes van de ploeg */
.nbv{padding:clamp(56px, 38.171px + 4.5714vw, 104px) 0;background:var(--surface-2)}
.nbv-kop{max-width:760px;margin-bottom:clamp(26px, 19.314px + 1.7143vw, 44px)}
.nbv-kop h2{margin:15px 0 12px}
.nbv-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px, 8.286px + .9524vw, 22px)}
.nbv-rij:has(> .nbv-clip:nth-child(5)){grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.nbv-clip{margin:0}
.nbv-frame{position:relative;aspect-ratio:9/16;border-radius:var(--radius-beeld);overflow:hidden;background:var(--deep);box-shadow:var(--schaduw-kaart);isolation:isolate}
.nbv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nbv-frame::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(10,20,36,.55),transparent);pointer-events:none}
.nbv-knop{position:absolute;right:10px;bottom:10px;z-index:1;width:40px;height:40px;border-radius:999px;border:0;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .2s ease}
.nbv-knop:hover{transform:scale(1.06)}
.nbv-knop:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.nbv-ic--pauze{display:none}
.nbv-clip.is-speelt .nbv-ic--speel{display:none}
.nbv-clip.is-speelt .nbv-ic--pauze{display:block}
.nbv-clip figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
@media (max-width:767px){
  .nbv-rij,.nbv-rij:has(> .nbv-clip:nth-child(5)){display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .nbv-rij::-webkit-scrollbar{display:none}
  .nbv-clip{flex:0 0 62%;scroll-snap-align:start}
}

/* ---------------------------------------------------------------- ons werk in beeld: galerij */
.nbw-kop{padding:clamp(40px, 28.857px + 2.8571vw, 72px) 0 clamp(20px, 15.543px + 1.1429vw, 32px)}
.nbw-kop h1{margin:15px 0 15px;max-width:none}
.nbw-kop .lede{max-width:720px}
.nbw{padding:0 0 clamp(56px, 38.171px + 4.5714vw, 104px)}
.nbw-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(18px, 14.286px + .9524vw, 28px)}
.nbw-filter__knop{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.nbw-filter__knop[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:#fff}
.nbw-grid{list-style:none;margin:0;padding:0;columns:3 260px;column-gap:clamp(10px, 6.286px + .9524vw, 18px)}
.nbw-item{break-inside:avoid;margin:0 0 clamp(10px, 6.286px + .9524vw, 18px)}
.nbw-item[hidden]{display:none!important}
.nbw-foto{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-beeld);overflow:hidden}
.nbw-foto img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.nbw-foto:hover img{transform:scale(1.03)}
.nbw-foto:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.nbw-groot{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:92vh;overflow:visible}
.nbw-groot::backdrop{background:rgba(8,16,30,.86)}
.nbw-groot img{display:block;max-width:min(92vw,1100px);max-height:84vh;width:auto;height:auto;border-radius:12px;margin:0 auto}
.nbw-groot__tekst{color:#EAF0F7;text-align:center;font-size:14px;margin:12px 0 0}
.nbw-groot__sluit{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:999px;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer}
@media (max-width:767px){.nbw-grid{columns:2 140px}.nbw-groot__sluit{top:8px;right:8px}}

/* Kop op breed scherm: meer lucht tussen de menu-items */
@media (min-width:1240px){
  [data-hdr] > div{gap:24px!important}
  [data-hdrnav] ul{gap:4px 22px!important}
  [data-hdracties]{gap:16px!important}
}
@media (min-width:1340px){
  [data-hdr] > div{gap:32px!important}
  [data-hdrnav] ul{gap:4px 30px!important}
  [data-hdracties]{gap:20px!important}
}
@media (min-width:1480px){
  [data-hdrnav] ul{gap:4px 38px!important}
}

/* Wegwijzer tussen particulier en zakelijk, direct onder de hero */
.nb-wissel{background:var(--surface-2);border-bottom:1px solid var(--line)}
.nb-wissel .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding-top:14px;padding-bottom:14px}
.nb-wissel p{margin:0;font-size:15px;color:var(--muted)}
.nb-wissel__link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--deep);text-decoration:none;min-height:32px}
.nb-wissel__link svg{color:var(--accent);transition:transform .2s ease}
.nb-wissel__link:hover{text-decoration:underline}
.nb-wissel__link:hover svg{transform:translateX(3px)}

/* Hero: één rustige laag in merkblauw, links dicht voor de tekst en rechts lichter, zonder korrel */
[data-nb-hero] [data-nb-laag="navy"],[data-nb-hero] [data-nb-laag="korrel"]{display:none!important}
@media (min-width:768px){
  [data-nb-hero] [data-nb-laag="zwart"]{background:linear-gradient(90deg,rgba(12,34,60,.94) 0%,rgba(12,34,60,.86) 40%,rgba(12,34,60,.64) 70%,rgba(12,34,60,.52) 100%)!important}
}
[data-nb-hero] [data-nb-herobeeld]{object-fit:cover;object-position:center 45%;filter:saturate(.92)}

/* Plaatspagina's: de feiten in het kort */
.nb-kort{padding:clamp(40px, 32.571px + 1.9048vw, 60px) 0 0;background:var(--surface)}
.nb-kort__kaart{border:1px solid var(--line);border-radius:var(--radius-beeld);padding:clamp(20px, 16.286px + .9524vw, 30px) clamp(20px, 14.057px + 1.5238vw, 36px);background:var(--surface)}
.nb-kort__h{font-family:var(--kop);font-weight:700;font-size:clamp(19px, 17.886px + .2857vw, 22px);letter-spacing:-.015em;margin:0 0 14px}
.nb-kort__lijst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 28px;margin:0}
.nb-kort__rij{padding-top:12px;border-top:1px solid var(--line)}
.nb-kort__rij dt{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.nb-kort__rij dd{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
@media (max-width:980px){.nb-kort__lijst{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.nb-kort__lijst{grid-template-columns:1fr}}

/* Mobiel artboard: stijl per element onder 768 px */
@media (max-width:767px){
.nbm-051bb9{font-size:13px !important;line-height:1.45 !important;margin-bottom:6px !important}
.nbm-06152e{row-gap:34px !important}
.nbm-0b3483{font-size:19px !important;margin-bottom:9px !important}
.nbm-0ef678{font-size:20px !important}
.nbm-124654{width:36px !important;height:36px !important}
.nbm-153376{border-bottom:1px solid var(--line) !important}
.nbm-180658{display:flex !important;align-items:flex-start !important;gap:15px !important}
.nbm-1be13d{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 100%) !important}
.nbm-1cc122{right:-50px !important;bottom:-30px !important;height:46% !important;top:unset !important;transform:unset !important}
.nbm-231adc{max-width:100% !important}
.nbm-270e9d{height:88px !important}
.nbm-2a2899{display:grid !important}
.nbm-303fb3{display:none !important}
.nbm-334c30{order:unset !important}
.nbm-38190c{padding:20px !important}
.nbm-389289{padding:0 20px 20px !important;font-size:15px !important}
.nbm-3a0737{padding-top:5px !important}
.nbm-3f4e8d{font-size:12px !important}
.nbm-40581e{flex:none !important}
.nbm-40e7cb{min-height:64px !important;padding:14px 15px 14px 20px !important}
.nbm-42b728{height:300px !important}
.nbm-43d2b2{overflow:hidden !important}
.nbm-4764c0{font-size:22px !important}
.nbm-53f368{right:-60px !important;bottom:-20px !important;height:60% !important;top:unset !important;transform:unset !important}
.nbm-54014f{min-width:0 !important;padding:12px 12px 12px 0 !important;display:unset !important;flex-direction:unset !important;flex:unset !important}
.nbm-5addf2{width:36px !important;height:36px !important;font-size:17px !important}
.nbm-5b8500{padding:18px 20px !important;gap:14px !important}
.nbm-63509c{font-size:16px !important;letter-spacing:-.01em !important;line-height:1.2 !important;margin-bottom:4px !important}
.nbm-687835{width:40px !important;height:40px !important;flex:none !important;margin-bottom:unset !important}
.nbm-6b9842{padding:13px 15px !important}
.nbm-708027{flex-direction:column !important;gap:20px !important;align-items:unset !important}
.nbm-7b3458{object-position:unset !important}
.nbm-7eb026{align-items:flex-start !important;flex-direction:column !important}
.nbm-7ec7c0{padding-right:20px !important}
.nbm-8c6f8c{text-align:center !important;margin-top:clamp(26px, 23.029px + 0.7619vw, 34px) !important;background:unset !important;border-radius:unset !important;padding:unset !important}
.nbm-8cb5f5{font-size:16px !important}
.nbm-8e29c1{font-size:15px !important}
.nbm-939939{justify-content:center !important;margin-left:unset !important}
.nbm-abe7dc{width:104px !important;height:100% !important;min-height:104px !important;flex:unset !important}
.nbm-b34179{padding:16px 20px !important}
.nbm-b3e56b{flex-wrap:wrap !important}
.nbm-b54a95{border-bottom:1px solid var(--line) !important;border-right:unset !important}
.nbm-b69f5c{height:170px !important}
.nbm-b89cd9{font-size:14px !important;margin-top:unset !important}
.nbm-bd9a4c{display:grid !important;grid-template-columns:104px minmax(0,1fr) !important;gap:12px !important;flex-direction:unset !important;height:unset !important}
.nbm-c52e2d{font-size:21px !important}
.nbm-ccee66{font-size:19px !important}
.nbm-ee58e1{background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 100%) !important}
.nbm-fd375c{margin-top:26px !important}
}