/*
Theme Name: Easy ICT Service
Theme URI: https://easy-ictservice.nl/
Author: Easy ICT Service
Author URI: https://easy-ictservice.nl/
Description: Zakelijk thema voor Easy ICT Service — licht corporate in antraciet met merkrood als accent, fijne korrel en gelaagd materiaal. Bevat pagina's voor systeembeheer, netwerkbeheer, cloud en Microsoft 365, telecom, softwareontwikkeling, particulieren en portfolio, losse blokpatronen om zelf pagina's mee te bouwen, een contactformulier, een onderhoudsmodus, contactgegevens via de Customizer en een opbouwfunctie die alle pagina's en het menu in één klik aanmaakt.
Version: 3.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: easy-ict-service
Tags: business, custom-logo, custom-menu, block-patterns, translation-ready, one-column, two-columns, right-sidebar
*/

/* === eigen lettertypen (self-hosted) === */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-latin-ext-400-normal.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:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/archivo-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/archivo-latin-ext-500-normal.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:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/archivo-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/archivo-latin-ext-600-normal.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:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-latin-ext-700-normal.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:'Newsreader';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/newsreader-latin-300-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/newsreader-latin-ext-300-normal.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:'Newsreader';font-style:italic;font-weight:300;font-display:swap;src:url('assets/fonts/newsreader-latin-300-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300;font-display:swap;src:url('assets/fonts/newsreader-latin-ext-300-italic.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:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/newsreader-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/newsreader-latin-ext-400-normal.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:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/newsreader-latin-400-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/newsreader-latin-ext-400-italic.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-latin-ext-400-normal.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-latin-ext-500-normal.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}


/* =========================================================
   Easy ICT Service — huisstijl v2
   Licht corporate met diepte: koele neutralen, één donkere
   contrastband, merkrood #C10011 als enige accent.
   Type: Archivo (display/body) · Source Serif 4 (lead/statement)
         IBM Plex Mono (labels, specs, diagram)
   ========================================================= */

:root{
  --ground:#F5F7FA;
  --ground-2:#EBEFF4;
  --surface:#FFFFFF;
  --surface-2:#EFF2F6;
  --ink:#0F1722;
  --ink-2:#2A3644;
  --muted:#5C6878;
  --line:#DCE1E8;
  --line-strong:#BAC4D0;
  --primary:#16202C;
  --primary-2:#0A1119;
  --label:#16202C;
  --on-primary:#FFFFFF;
  --accent:#AE0F1D;
  --accent-ink:#AE0F1D;
  --accent-soft:#F8EDEE;
  --on-accent:#FFFFFF;
  --bloom-a:rgba(22,32,44,.07);
  --bloom-b:rgba(32,64,116,.07);
  --dot:rgba(15,23,34,.055);
  --sh-sm:0 1px 2px rgba(15,23,34,.05);
  --sh-md:0 2px 4px rgba(15,23,34,.04), 0 18px 40px -26px rgba(15,23,34,.35);
  --sh-lg:0 2px 6px rgba(15,23,34,.05), 0 40px 80px -48px rgba(15,23,34,.45);
  --logo-l:block;
  --logo-d:none;
  --r:6px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#090D12;
    --ground-2:#0D131A;
    --surface:#111820;
    --surface-2:#172029;
    --ink:#ECF1F6;
    --ink-2:#C6D1DC;
    --muted:#93A0AF;
    --line:#1E2731;
    --line-strong:#32404E;
    --primary:#E8EDF3;
    --primary-2:#FFFFFF;
    --label:#93A0AF;
    --on-primary:#0F1722;
    --accent:#E2485A;
    --accent-ink:#FF7382;
    --accent-soft:#22151A;
    --bloom-a:rgba(255,255,255,.05);
    --bloom-b:rgba(60,110,200,.10);
    --dot:rgba(255,255,255,.045);
    --sh-sm:0 1px 2px rgba(0,0,0,.5);
    --sh-md:0 2px 4px rgba(0,0,0,.4), 0 18px 40px -26px rgba(0,0,0,.9);
    --sh-lg:0 2px 6px rgba(0,0,0,.5), 0 40px 80px -48px rgba(0,0,0,1);
    --logo-l:none;
    --logo-d:block;
  }
}
:root[data-theme="dark"]{
  --ground:#090D12;
  --ground-2:#0D131A;
  --surface:#111820;
  --surface-2:#172029;
  --ink:#ECF1F6;
  --ink-2:#C6D1DC;
  --muted:#93A0AF;
  --line:#1E2731;
  --line-strong:#32404E;
  --primary:#E8EDF3;
  --primary-2:#FFFFFF;
  --label:#93A0AF;
  --on-primary:#0F1722;
  --accent:#E2485A;
  --accent-ink:#FF7382;
  --accent-soft:#22151A;
  --bloom-a:rgba(255,255,255,.05);
  --bloom-b:rgba(60,110,200,.10);
  --dot:rgba(255,255,255,.045);
  --sh-sm:0 1px 2px rgba(0,0,0,.5);
  --sh-md:0 2px 4px rgba(0,0,0,.4), 0 18px 40px -26px rgba(0,0,0,.9);
  --sh-lg:0 2px 6px rgba(0,0,0,.5), 0 40px 80px -48px rgba(0,0,0,1);
  --logo-l:none;
  --logo-d:block;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;text-wrap:balance;line-height:1.08;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px;}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:26px;}
.section{padding-block:clamp(64px,7vw,104px);position:relative;}
.section--line{border-top:1px solid var(--line);}
.section--tint{background:var(--surface);border-block:1px solid var(--line);}
.stack-8{display:flex;flex-direction:column;gap:8px;}
.stack-16{display:flex;flex-direction:column;gap:16px;}

/* ---------- type ---------- */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:1px;}
.eyebrow--muted{color:var(--muted);}
h1,.h1{font-size:clamp(2.35rem,5vw,3.65rem);line-height:1.04;letter-spacing:-.033em;}
h2,.h2{font-size:clamp(1.8rem,3.4vw,2.7rem);}
h3,.h3{font-size:1.16rem;letter-spacing:-.015em;}
.serif{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.01em;}
.lead{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:clamp(1.12rem,1.75vw,1.35rem);line-height:1.56;color:var(--ink-2);max-width:60ch;
}
.body-text{color:var(--muted);max-width:66ch;}
.body-text + .body-text{margin-top:15px;}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:.02em;}
.ph{color:var(--muted);border-bottom:1px dotted var(--line-strong);
    font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:.9em;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:26px;min-height:80px;}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;}
.brand img{height:36px;width:auto;}
.lg-l{display:var(--logo-l);}
.lg-d{display:var(--logo-d);}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nav a{
  position:relative;white-space:nowrap;text-decoration:none;
  font-size:14px;font-weight:500;color:var(--muted);padding:10px 13px;
  transition:color .16s ease;
}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;background:var(--accent);}
.header-cta{flex:0 0 auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:600;letter-spacing:-.008em;
  padding:14px 22px;border-radius:var(--r);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .14s ease, box-shadow .18s ease, background .16s ease, border-color .16s ease;
}
.btn .arrow{transition:transform .18s ease;font-family:"IBM Plex Mono",monospace;font-weight:400;}
.btn:hover .arrow{transform:translateX(3px);}
.btn--primary{background:var(--primary);color:var(--on-primary);box-shadow:0 10px 26px -16px rgba(10,17,25,.85);}
.btn--primary:hover{background:var(--primary-2);box-shadow:0 16px 34px -16px rgba(10,17,25,.95);transform:translateY(-1px);}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:color-mix(in srgb,var(--surface) 70%,transparent);}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px);}
.btn--sm{padding:9px 16px;font-size:13.5px;}
.btn--onink{background:#fff;color:#0C1218;}
.btn--onink:hover{background:#EDEFF3;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}
.arrow{font-family:"IBM Plex Mono",monospace;font-weight:400;}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,84px);overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:150%;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 46% at 78% 8%, var(--bloom-a), transparent 68%),
    radial-gradient(46% 42% at 8% 86%, var(--bloom-b), transparent 70%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 78%);
}
.hero > *{position:relative;z-index:1;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(36px,5vw,64px);align-items:center;}
.hero h1{margin-top:20px;}
.hero h1 em{font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em;}
.hero .lead{margin-top:24px;}
.hero .btn-row{margin-top:32px;}
.hero-note{margin-top:28px;display:flex;gap:12px;align-items:baseline;color:var(--muted);font-size:14.5px;}
.hero-note .mono{color:var(--ink-2);}

/* ---------- trust strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--surface);}
.strip ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.strip li{
  padding:20px 22px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:5px;
}
.strip li:last-child{border-right:0;}
.strip .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--label);}
.strip .v{font-size:14.5px;color:var(--ink-2);font-weight:500;letter-spacing:-.01em;}

/* ---------- diagram panel ---------- */
.viz{
  position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.viz-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 40%, var(--surface)));
}
.viz-head .mono{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;font-weight:500;}
.viz-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.viz-body{padding:20px 18px 10px;}
.viz svg{width:100%;height:auto;display:block;}
.viz-foot{
  padding:13px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;
  background:var(--surface-2);
}
.n-box{fill:var(--surface);stroke:var(--line-strong);}
.n-box-accent{fill:var(--accent-soft);stroke:var(--accent);}
.n-label{fill:var(--ink);font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:-.01em;}
.n-sub{fill:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.08em;}
.n-line{stroke:var(--line-strong);stroke-width:1.25;fill:none;}
.n-dash{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4;fill:none;opacity:.7;}
.n-tag{fill:var(--accent-ink);font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.14em;}
.pulse{fill:var(--accent);}
@media (prefers-reduced-motion:reduce){.pulse{display:none;}}

/* ---------- hairline grid ---------- */
.hairgrid{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:48px;
  box-shadow:var(--sh-md);
}
.hairgrid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cell{
  background:var(--surface);padding:34px 32px 30px;position:relative;
  display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
  transition:background .18s ease;
}
a.cell:hover{background:var(--surface-2);}
.cell-top{display:flex;align-items:center;gap:14px;}
.cell-ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:8px;border:1px solid var(--line);
  background:var(--ground);display:grid;place-items:center;color:var(--primary);
  transition:border-color .18s ease, background .18s ease;
}
a.cell:hover .cell-ico{border-color:var(--accent);background:var(--accent-soft);}
.cell-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.cell-no{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--muted);}
.cell h3{color:var(--ink);}
.cell p{color:var(--muted);font-size:15px;}
.cell-tags{margin-top:auto;padding-top:16px;color:var(--muted);border-top:1px dashed var(--line);}
.cell-link{color:var(--ink);font-weight:600;font-size:14px;padding-top:14px;display:inline-flex;gap:8px;align-items:center;}
.cell-link .arrow{color:var(--accent);}
a.cell:hover .cell-link .arrow{transform:translateX(3px);}
.cell-link .arrow{transition:transform .18s ease;}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.28fr);gap:clamp(32px,5vw,76px);align-items:start;}
.split--rev{grid-template-columns:minmax(0,1.28fr) minmax(0,.88fr);}

/* ---------- donkere contrastband ---------- */
.band{
  position:relative;color:#EAEFF5;overflow:hidden;border-block:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(58% 78% at 84% 6%, rgba(174,15,29,.17), transparent 64%),
    radial-gradient(72% 92% at 8% 100%, rgba(34,66,124,.30), transparent 66%),
    linear-gradient(162deg,#18222E 0%,#0C131B 58%,#0E151D 100%);
}
.band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);
  mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.band > *{position:relative;z-index:1;}
.band .eyebrow{color:#DDE5EE;}
.band .eyebrow::before{background:#E2485A;}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center;padding-block:clamp(72px,8vw,116px);}
.band-statement{
  font-family:"Source Serif 4",Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.22;letter-spacing:-.02em;color:#D9E1EA;margin-top:22px;
}
.band-statement em{font-style:italic;color:#FFFFFF;}
.band p{color:#A9B6C4;}
.band-list li{
  display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);
  color:#DCE4EC;font-size:15.5px;
}
.band-list li:first-child{border-top:1px solid rgba(255,255,255,.1);}
.band-list .mono{color:rgba(255,255,255,.48);flex:0 0 auto;padding-top:3px;}

/* ---------- spec table ---------- */
.spec-wrap{overflow-x:auto;margin-top:34px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--sh-md);}
table.spec{width:100%;border-collapse:collapse;min-width:540px;}
table.spec th,table.spec td{text-align:left;padding:16px 22px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top;}
table.spec thead th{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--muted);background:var(--surface-2);
}
table.spec tbody tr:last-child td{border-bottom:0;}
table.spec tbody tr:hover{background:var(--surface-2);}
table.spec td:first-child{font-weight:600;color:var(--ink);width:34%;}
table.spec td:last-child{color:var(--muted);font-variant-numeric:tabular-nums;}

/* ---------- checklist ---------- */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;}
.checks li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15px;}
.checks li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;margin-top:10px;border-radius:50%;
  background:var(--primary);opacity:.38;
}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:52px;}
.step{padding:30px 26px 0 0;position:relative;}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);}
.step::after{content:"";position:absolute;top:-3.5px;left:0;width:7px;height:7px;border-radius:50%;background:var(--primary);}
.step-no{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.18em;}
.step h3{margin-top:12px;font-size:1.05rem;}
.step p{margin-top:10px;color:var(--muted);font-size:14.5px;}

/* ---------- cta ---------- */
.cta-band{background:var(--surface);border-top:1px solid var(--line);}
.cta-inner{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between;padding-block:clamp(52px,6vw,72px);}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:start;}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg);overflow:hidden;}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.panel-head .mono{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;font-weight:500;}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:13px;font-weight:600;color:var(--ink-2);}
.field input,.field textarea,.field select{
  font:inherit;font-size:15px;color:var(--ink);background:var(--ground);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:12px 14px;width:100%;
  transition:border-color .16s ease, background .16s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{background:var(--surface);border-color:var(--primary);}
.field textarea{min-height:130px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.65;}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.form-note{color:var(--muted);font-size:13px;}
.detail-list li{padding:17px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:baseline;}
.detail-list li:last-child{border-bottom:0;}
.detail-list .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);}
.detail-list .v{color:var(--ink);font-size:15.5px;}

/* ---------- footer ---------- */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding-block:64px 26px;}
.footer-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:44px;}
.footer-nav li{padding:7px 0;}
.footer-nav a{color:var(--muted);text-decoration:none;font-size:14.5px;transition:color .15s ease;}
.footer-nav a:hover{color:var(--ink);}
.footer-title{font-family:"IBM Plex Mono",monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:12px;}
.footer-bottom{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:var(--muted);font-size:13px;
}
.footer-logo img{height:32px;width:auto;}
.footer-claim{color:var(--muted);font-size:14.5px;margin-top:16px;max-width:36ch;}

/* ---------- subpagina hero ---------- */
.page-hero{position:relative;padding-block:clamp(44px,5.5vw,76px) clamp(36px,4vw,56px);overflow:hidden;}
.page-hero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:200%;z-index:0;pointer-events:none;
  background:radial-gradient(44% 50% at 82% 0%, var(--bloom-a), transparent 70%);
}
.page-hero > *{position:relative;z-index:1;}
.page-hero .lead{margin-top:22px;}
.page-hero h1{margin-top:18px;font-size:clamp(2.2rem,4.8vw,3.4rem);}
.crumb{color:var(--muted);font-size:13px;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--ink);}

/* ---------- entree-animatie (vanuit zichtbare rusttoestand) ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both;}
  .rise-2{animation-delay:.08s;}
  .rise-3{animation-delay:.16s;}
  @keyframes rise{from{opacity:.001;transform:translateY(14px);}to{opacity:1;transform:none;}}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid,.split,.split--rev,.contact-grid,.band-grid{grid-template-columns:minmax(0,1fr);}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .strip ul{grid-template-columns:repeat(2,minmax(0,1fr));}
  .strip li:nth-child(2){border-right:0;}
  .strip li:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
@media (max-width:720px){
  .hairgrid--2{grid-template-columns:minmax(0,1fr);}
  .checks{grid-template-columns:minmax(0,1fr);}
  .steps{grid-template-columns:minmax(0,1fr);}
  .strip ul{grid-template-columns:minmax(0,1fr);}
  .strip li{border-right:0;border-bottom:1px solid var(--line);}
  .strip li:last-child{border-bottom:0;}
  .form-row{grid-template-columns:minmax(0,1fr);}
  .header-inner{min-height:68px;gap:12px;flex-wrap:wrap;padding-block:10px;}
  .header-cta{display:none;}
  .brand img{height:30px;}
  .detail-list li{grid-template-columns:minmax(0,1fr);gap:4px;}
  .footer-top{grid-template-columns:minmax(0,1fr);}
  .cell{padding:28px 24px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}

/* =========================================================
   LAAG 3 — afwerking
   Volledig licht. Zwaardere typografie (Archivo variabele
   breedte + Newsreader), fijne korrel, gelaagd materiaal,
   scrollindicator en een header die in de hero opgaat.
   ========================================================= */

:root{
  --hdr-h:80px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --ease:cubic-bezier(.2,.75,.25,1);
}

/* ---------- typografie ---------- */
body{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;letter-spacing:-.005em;
}
h1,h2,h3,h4,.h1,.h2{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 112;
  font-weight:600;
}
h1,.h1{
  font-size:clamp(2.5rem,5.5vw,4.15rem);line-height:1;letter-spacing:-.042em;
  font-variation-settings:"wdth" 108;
}
h2,.h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.04;letter-spacing:-.035em;}
h3,.h3{font-size:1.18rem;letter-spacing:-.018em;font-variation-settings:"wdth" 104;}

.serif,.lead,.band-statement,h1 em,.hero h1 em{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
}
.lead{
  font-size:clamp(1.15rem,1.85vw,1.42rem);line-height:1.5;font-weight:300;
  letter-spacing:-.008em;max-width:56ch;
}
h1 em,.hero h1 em{font-style:italic;font-weight:300;letter-spacing:-.03em;}

.eyebrow{font-size:10.5px;letter-spacing:.24em;}
.eyebrow::before{width:30px;height:2px;border-radius:1px;background:var(--accent);}

/* ---------- scrollindicator ---------- */
.scroll-bar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:99;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .08s linear;pointer-events:none;
}

/* ---------- header: gaat op in de hero, wordt vast bij scrollen ---------- */
.site-header{transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);}
.site-header.over-hero:not(.is-solid){
  background:transparent;border-bottom-color:transparent;backdrop-filter:none;
}
.site-header.is-solid{box-shadow:0 1px 0 var(--line), 0 10px 30px -24px rgba(15,23,34,.5);}

/* ---------- de hero ---------- */
main > .hero{margin-top:calc(-1 * var(--hdr-h));}
.hero{
  position:relative;
  padding-block:calc(var(--hdr-h) + clamp(48px,6.5vw,96px)) clamp(64px,7.5vw,112px);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(64% 56% at 82% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 64%),
    radial-gradient(70% 78% at 0% 100%, var(--bloom-b), transparent 66%),
    linear-gradient(172deg, var(--surface) 0%, var(--ground) 56%, var(--ground-2) 100%);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:-30% -20%;z-index:0;pointer-events:none;
  background:radial-gradient(36% 32% at 80% 14%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
  filter:blur(10px);
  animation:drift 24s var(--ease) infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);opacity:.032;mix-blend-mode:multiply;
  -webkit-mask-image:none;mask-image:none;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(-4%,3%,0) scale(1.12);}
}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none;}}

.hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(40px,5vw,72px);}
.hero h1{margin-top:22px;}
.hero .lead{margin-top:26px;}
.hero .btn-row{margin-top:36px;}

/* paneel rond het schema */
.hero .viz{
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, var(--sh-lg);
}

/* ---------- ruimer ritme ---------- */
.section{padding-block:clamp(72px,8.5vw,128px);}
.wrap{max-width:1220px;padding-inline:28px;}

/* ---------- materiaal ---------- */
.hairgrid{border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--sh-md);}
.cell{padding:38px 34px 32px;transition:background .3s var(--ease);}
.cell-ico{width:44px;height:44px;border-radius:10px;transition:all .3s var(--ease);}
a.cell:hover .cell-ico,.cell.is-clickable:hover .cell-ico{transform:translateY(-2px);}
.panel,.viz{border-radius:14px;}
.spec-wrap{border-radius:14px;}

/* ---------- de accentband: licht, met korrel en hairlines ---------- */
.band{
  position:relative;color:var(--ink);
  border-block:1px solid var(--line);
  background:
    radial-gradient(52% 70% at 88% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 66%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:var(--grain);opacity:.028;mix-blend-mode:multiply;
}
.band::after{content:none;}
.band-grid{padding-block:clamp(80px,8.5vw,124px);}
.band .eyebrow{color:var(--ink-2);}
.band .eyebrow::before{background:var(--accent);}
.band-statement{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.18;color:var(--ink);}
.band-statement em{font-style:italic;color:var(--accent-ink);}
.band p,.band .body-text{color:var(--muted);}
.band-list li{
  display:flex;gap:16px;align-items:baseline;padding:16px 0;
  border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15.5px;
}
.band-list li:first-child{border-top:1px solid var(--line);}
.band-list .mono{color:var(--muted);flex:0 0 auto;padding-top:3px;}
.btn--onink{background:var(--primary);color:var(--on-primary);box-shadow:0 10px 26px -16px rgba(10,17,25,.85);}
.btn--onink:hover{background:var(--primary-2);transform:translateY(-1px);}

/* ---------- footer ---------- */
.site-footer{
  background:linear-gradient(180deg, var(--surface) 0%, var(--ground) 100%);
  border-top:1px solid var(--line);color:var(--ink);
  padding-block:clamp(64px,7vw,96px) 30px;
  position:relative;overflow:hidden;
}
.site-footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.025;mix-blend-mode:multiply;
}
.site-footer > *{position:relative;z-index:1;}
.site-footer .footer-title{color:var(--muted);}
.site-footer .footer-nav a{color:var(--muted);}
.site-footer .footer-nav a:hover{color:var(--ink);}
.site-footer .footer-claim{color:var(--muted);}
.site-footer .footer-bottom{border-top:1px solid var(--line);color:var(--muted);}

/* ---------- cta-band vlak boven de footer ---------- */
.cta-band{border-bottom:0;}
.cta-inner{padding-block:clamp(64px,7vw,88px);}

/* ---------- fijne interacties ---------- */
.btn{transition:transform .2s var(--ease), box-shadow .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);}
.nav a{transition:color .25s var(--ease);}
a.cell,.cell{transition:background .3s var(--ease);}

/* ---------- entree ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .9s var(--ease) both;}
  .rise-2{animation-delay:.1s;}
  .rise-3{animation-delay:.2s;}
  @keyframes rise{from{opacity:.001;transform:translateY(18px);}to{opacity:1;transform:none;}}
}

/* ---------- subpagina's ---------- */
.page-hero{
  padding-block:clamp(52px,6vw,88px) clamp(40px,4.5vw,64px);
  border-bottom:1px solid var(--line);
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);opacity:.03;mix-blend-mode:multiply;
}
.page-hero h1{font-size:clamp(2.3rem,5.2vw,3.7rem);}
.page-hero .crumb{margin-bottom:22px;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:720px){
  :root{--hdr-h:68px;}
  .cell{padding:30px 24px;}
  .wrap{padding-inline:22px;}
}

/* =========================================================
   WordPress-specifiek — blokken, editor en admin bar
   ========================================================= */

/* --- admin bar --- */
body.admin-bar .site-header{top:32px;}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px;}}

/* --- blokbreedtes --- */
.alignwide{max-width:1200px;margin-inline:auto;}
.alignfull{width:100%;}
:where(.wp-block-group){margin-block:0;}
main > :where(.wp-block-group){margin-block:0;}

/* --- koppen en alinea's uit de editor --- */
:where(.wp-block-heading){margin:0;}
:where(main p){margin:0;}
:where(main .wp-block-list){margin:0;padding:0;list-style:none;}

/* --- strip (4 kernpunten) --- */
.strip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.strip-item{
  padding:20px 22px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:5px;
}
.strip-item:last-child{border-right:0;}
.strip-item .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--label);}
.strip-item .v{font-size:14.5px;color:var(--ink-2);font-weight:500;letter-spacing:-.01em;}

/* --- knoppen als blok --- */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:0;}
.wp-block-button{margin:0;}
.wp-block-button .wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.008em;line-height:1.2;
  padding:14px 22px;border-radius:var(--r);text-decoration:none;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  transition:transform .14s ease, box-shadow .18s ease, background .16s ease, border-color .16s ease;
}
.wp-block-button .wp-block-button__link:hover{border-color:var(--ink);transform:translateY(-1px);}
.wp-block-button.is-primary .wp-block-button__link{
  background:var(--primary);color:var(--on-primary);border-color:transparent;
  box-shadow:0 10px 26px -16px rgba(10,17,25,.85);
}
.wp-block-button.is-primary .wp-block-button__link:hover{
  background:var(--primary-2);
  box-shadow:0 16px 34px -16px rgba(10,17,25,.95);
}
.wp-block-button.is-onink .wp-block-button__link{
  background:var(--primary);color:var(--on-primary);border-color:transparent;
  box-shadow:0 10px 26px -16px rgba(10,17,25,.85);
}
.wp-block-button.is-onink .wp-block-button__link:hover{background:var(--primary-2);}

/* --- lijsten als blok --- */
.wp-block-list.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;}
.wp-block-list.checks li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15px;}
.wp-block-list.checks li::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:10px;border-radius:50%;background:var(--primary);opacity:.38;}
.wp-block-list.checks--1{grid-template-columns:minmax(0,1fr);}

.wp-block-list.band-list li{
  display:flex;gap:16px;align-items:baseline;padding:16px 0;
  border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15.5px;
}
.wp-block-list.band-list li:first-child{border-top:1px solid var(--line);}
.wp-block-list.band-list strong{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;
  color:var(--muted);flex:0 0 auto;
}

.wp-block-list.detail-list li{padding:17px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:15.5px;}
.wp-block-list.detail-list li:last-child{border-bottom:0;}
.wp-block-list.detail-list strong{
  display:inline-block;min-width:132px;font-weight:500;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--muted);
}
@media (max-width:720px){
  .wp-block-list.detail-list strong{display:block;margin-bottom:3px;}
}

/* --- diensten: kaart is klikbaar via assets/theme.js --- */
.cell{cursor:default;}
.cell.is-clickable{cursor:pointer;}
.cell .cell-link a{color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;display:inline-flex;gap:8px;align-items:center;}
.cell .cell-link a .arrow{color:var(--accent);}
.cell:hover .cell-link a .arrow{transform:translateX(3px);}

/* --- spec-tabel als blok --- */
.wp-block-table.spec{
  margin:34px 0 0;overflow-x:auto;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);box-shadow:var(--sh-md);
}
.wp-block-table.spec table{width:100%;border-collapse:collapse;min-width:540px;}
.wp-block-table.spec th,.wp-block-table.spec td{
  text-align:left;padding:16px 22px;border:0;border-bottom:1px solid var(--line);
  font-size:14.5px;vertical-align:top;
}
.wp-block-table.spec thead th{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--muted);background:var(--surface-2);
}
.wp-block-table.spec tbody tr:last-child td{border-bottom:0;}
.wp-block-table.spec tbody tr:hover{background:var(--surface-2);}
.wp-block-table.spec td:first-child{font-weight:600;color:var(--ink);width:34%;}
.wp-block-table.spec td:last-child{color:var(--muted);font-variant-numeric:tabular-nums;}
.wp-block-table.spec figcaption{display:none;}

/* --- contactformulier --- */
.eics-form{padding:26px 24px;display:flex;flex-direction:column;gap:18px;}
.eics-notice{
  margin:0 0 4px;padding:13px 16px;border-radius:var(--r);font-size:14.5px;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-2);
}
.eics-notice--ok{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);}
.eics-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* --- losse WordPress-pagina's en berichten --- */
.entry{padding-block:clamp(48px,6vw,80px);}
.entry-content > * + *{margin-top:18px;}
.entry-content h2{margin-top:34px;}
.entry-content h3{margin-top:26px;}
.entry-content p{color:var(--muted);max-width:66ch;}
.entry-content a{color:var(--accent-ink);}
.entry-content ul:not(.checks):not(.band-list):not(.detail-list){list-style:disc;padding-left:22px;color:var(--muted);}
.entry-content ul:not(.checks):not(.band-list):not(.detail-list) li{padding:4px 0;}
.post-list li{padding:22px 0;border-bottom:1px solid var(--line);}
.post-list a{text-decoration:none;font-size:1.1rem;font-weight:600;}
.post-meta{color:var(--muted);font-size:13px;font-family:"IBM Plex Mono",monospace;}

/* --- responsive aanvullingen --- */
@media (max-width:1000px){
  .strip-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .strip-item:nth-child(2){border-right:0;}
  .strip-item:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .wp-block-list.checks{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .strip-grid{grid-template-columns:minmax(0,1fr);}
  .strip-item{border-right:0;border-bottom:1px solid var(--line);}
  .strip-item:last-child{border-bottom:0;}
  .wp-block-list.checks{grid-template-columns:minmax(0,1fr);}
}

/* --- editor --- */
.block-editor-page .editor-styles-wrapper{background:var(--ground);}

/* --- groepen: eigen spacing, geen core-marges --- */
:where(.wp-block-group) > *{margin-block-start:0;margin-block-end:0;}

/* --- toegankelijkheid --- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed!important;top:12px;left:12px;z-index:100;width:auto;height:auto;
  clip:auto;padding:12px 18px;border-radius:var(--r);
  background:var(--primary);color:var(--on-primary);font-weight:600;text-decoration:none;
}

/* --- paginering --- */
.wp-block-query-pagination,.navigation.pagination{display:flex;gap:10px;flex-wrap:wrap;}
.navigation.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 12px;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--muted);font-size:14px;background:var(--surface);
}
.navigation.pagination .page-numbers.current{border-color:var(--primary);color:var(--ink);font-weight:600;}
.navigation.pagination .screen-reader-text{display:none;}

/* --- spacing binnen blokinhoud --- */
.page-hero .crumb{margin-bottom:22px;}
.page-hero .eyebrow + .wp-block-heading{margin-top:16px;}
.wp-block-table.spec + *{margin-top:40px;}
.hero-grid .viz .viz-foot{padding:13px 18px;border-top:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:13px;}
.cell .cell-tags{margin-top:auto;}
.detail-list + .body-text{margin-top:28px;}
.nav .nav-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none;}
.nav .nav-list li{list-style:none;margin:0;padding:0;}
.footer-nav li{list-style:none;}

/* --- afwerkingslaag opnieuw bevestigen na de blokstijlen --- */
.wp-block-table.spec{border-radius:14px;}
.wp-block-button .wp-block-button__link{transition:transform .2s var(--ease), box-shadow .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);}
.wp-block-list.band-list li{border-bottom:1px solid var(--line);color:var(--ink-2);}
.wp-block-list.band-list li:first-child{border-top:1px solid var(--line);}
.wp-block-list.band-list strong{color:var(--muted);}
.site-footer .footer-nav a{color:var(--muted);}
.site-footer .footer-nav a:hover{color:var(--ink);}

/* ---- toegankelijkheid: sprong naar de inhoud ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--surface);color:var(--ink);
      border:1px solid var(--line-strong);border-radius:0 0 10px 0;padding:12px 18px;
      font-weight:600;text-decoration:none;box-shadow:var(--sh-md);}
.skip:focus{left:0;}
main:focus{outline:none;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
      clip-path:inset(50%);white-space:nowrap;}

/* ---- drie kolommen voor het actualiteitenblok ---- */
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:900px){.steps--3{grid-template-columns:minmax(0,1fr);}}

/* het menu mag op desktop niet clippen, anders valt het paneel weg */
@media (min-width:981px){ .nav{overflow:visible;} }

.nav-drop{position:relative;display:flex;align-items:center;}
.nav-trigger{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font:inherit;font-size:14px;font-weight:500;color:var(--muted);
  background:none;border:0;cursor:pointer;padding:10px 13px;
  transition:color .25s var(--ease);
}
.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{color:var(--ink);}
.nav-trigger.is-current{color:var(--ink);font-weight:600;}
.nav-trigger .chev{width:11px;height:8px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease);}
.nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg);}

.nav-panel{
  position:absolute;top:calc(100% + 10px);left:-6px;z-index:60;min-width:316px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-lg);padding:8px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav-drop:hover .nav-panel,
.nav-drop:focus-within .nav-panel,
.nav-drop.is-open .nav-panel{opacity:1;visibility:visible;transform:none;}
.nav-panel a{
  display:block;padding:11px 13px;border-radius:9px;white-space:normal;
  transition:background .18s ease;
}
.nav-panel a:hover{background:var(--ground);}
.nav-panel a b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.nav-panel a span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);font-weight:400;}
.nav-panel a[aria-current="page"]{background:var(--accent-soft);}
.nav-panel a[aria-current="page"]::after{display:none;}

@media (max-width:980px){
  /* op smalle schermen komen de diensten gewoon in de rij te staan */
  .nav-trigger{display:none;}
  .nav-drop{display:contents;}
  .nav-panel{
    position:static;opacity:1;visibility:visible;transform:none;display:contents;
    background:none;border:0;box-shadow:none;padding:0;
  }
  .nav-panel a{padding:10px 13px;border-radius:0;white-space:nowrap;}
  .nav-panel a:hover{background:none;}
  .nav-panel a b{display:inline;font-size:14px;font-weight:500;color:var(--muted);}
  .nav-panel a:hover b{color:var(--ink);}
  .nav-panel a[aria-current="page"]{background:none;}
  .nav-panel a[aria-current="page"] b{color:var(--ink);font-weight:600;}
  .nav-panel a span{display:none;}
}

/* ---------- vijfde dienstkaart over de volle breedte ---------- */
.hairgrid--2 > .cell:nth-child(5):last-child{grid-column:1 / -1;}