/* ------------------------------------------------------------------
 * Letters, zelf gehost
 *
 * Het sjabloon haalt Work Sans en Source Sans 3 bij Google op. Dat kost de
 * bezoeker twee extra verbindingen naar een ander domein voordat er ook maar
 * iets op het scherm staat, en het stuurt zijn IP-adres naar een derde partij.
 * Dezelfde twee letters staan hier in het thema zelf: alleen de subsets latin
 * en latin-ext, met de gewichtsas teruggebracht tot wat het thema gebruikt.
 * Work Sans en Source Sans 3, SIL Open Font License 1.1.
 * ------------------------------------------------------------------ */
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/work-sans-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:'Work Sans';font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/work-sans-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:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/source-sans-3-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:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/source-sans-3-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}

/* CV Onderhoud Leeuwarden, designsysteem uit het aangeleverde sjabloon */
:root{
  color-scheme: light;
  --navy:#2E2A45;
  --navy-2:#3A3557;
  --navy-3:#4A4470;
  --blue:#3B37A8;
  --blue-soft:#ECEBF7;
  --orange:#C3283F;
  --orange-dark:#A31E33;
  --green:#0B7A50;
  --amber:#D9A21B;
  --bg:#F6F5F9;
  --ink:#1C1A2B;
  --ink-2:#443F5E;
  --ink-3:#544E6C;
  --line:#E0DDE9;
  --line-soft:#EDEBF2;
  --white:#fff;
  --shadow-sm:0 1px 2px rgba(46,42,69,.06), 0 2px 8px rgba(46,42,69,.05);
  --shadow-md:0 2px 6px rgba(46,42,69,.06), 0 12px 28px rgba(46,42,69,.09);
  --shadow-lg:0 8px 20px rgba(46,42,69,.10), 0 32px 64px rgba(46,42,69,.18);
  --r-sm:10px; --r:14px; --r-md:18px; --r-lg:22px;
  --wrap:1280px;
  --ff-head:"Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-body:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}
:root[data-theme="dark"], :root:not([data-theme="light"]){ color-scheme: light; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important; transition-duration:.01ms!important} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-body); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:4px}

h1,h2,h3,h4{font-family:var(--ff-head); color:var(--ink); margin:0; line-height:1.14; letter-spacing:-.02em; text-wrap:balance;
  /* Lange samenstellingen als onderhoudsabonnement passen op 390px niet op een regel;
     zonder dit loopt de kop buiten de kolom. Afbreken mag, hakken alleen als het moet. */
  overflow-wrap:break-word; hyphens:auto}
h1{font-size:clamp(2.05rem,3.7vw,3.5rem); font-weight:800; letter-spacing:-.032em}
h2{font-size:clamp(1.65rem,2.5vw,2.45rem); font-weight:700}
h3{font-size:1.16rem; font-weight:700; letter-spacing:-.012em}
h4{font-size:1rem; font-weight:700}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
.section{padding-block:clamp(56px,6.4vw,104px)}
.section--soft{background:var(--bg)}
.section--white{background:var(--white)}
.section--navy{background:var(--navy); color:#D9D6EC}
.section--navy h2,.section--navy h3{color:#fff}
.section-head{max-width:680px; margin:0 auto clamp(34px,3.6vw,52px); text-align:center}
.section-head p{color:var(--ink-2); font-size:1.09rem; margin-top:14px}
.section--navy .section-head p{color:#B4AFD2}
.eyebrow{font-family:var(--ff-head); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:0 0 12px}
.section--navy .eyebrow{color:#A9A4EC}
.muted{color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-head); font-weight:700; font-size:1rem; letter-spacing:-.005em;
  padding:15px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-decoration:none; line-height:1.2; min-height:52px;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn svg{flex:0 0 auto}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 6px 18px rgba(195,40,63,.32)}
.btn-primary:hover{background:#8A1928; box-shadow:0 10px 26px rgba(195,40,63,.4)}
.btn-white{background:#fff; color:var(--navy); box-shadow:var(--shadow-md)}
.btn-white:hover{background:#F0EEF7}
.btn-outline-light{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px)}
.btn-outline-light:hover{background:rgba(255,255,255,.16)}
.btn-outline{background:#fff; color:var(--navy); border-color:var(--line)}
.btn-outline:hover{border-color:var(--blue); color:var(--blue)}
.btn-block{width:100%}
.btn-lg{padding:17px 30px; font-size:1.06rem; min-height:58px}

.link-arrow{font-family:var(--ff-head); font-weight:700; color:var(--orange); display:inline-flex; align-items:center; gap:7px; font-size:.98rem}
.link-arrow svg{transition:transform .18s ease}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- topbar ---------- */
.topbar{background:var(--navy); color:#C6C2DF; font-size:.82rem}
.topbar .wrap{display:flex; align-items:center; gap:10px; min-height:42px; flex-wrap:nowrap; overflow:hidden}
.tb-item{display:inline-flex; align-items:center; gap:8px; padding-block:9px; white-space:nowrap}
.tb-item svg{flex:0 0 auto; opacity:.95}
.tb-sep{width:1px; height:15px; background:rgba(255,255,255,.17)}
.tb-item strong{color:#fff; font-weight:600}
.topbar a{color:#C6C2DF}
.topbar a:hover{color:#fff}
.tb-right{margin-left:auto; display:flex; align-items:center; gap:10px}
@media (max-width:1420px){ .tb-3{display:none} }
@media (max-width:1080px){ .tb-hide{display:none} }
@media (max-width:760px){
  .topbar .wrap{gap:8px; min-height:38px}
  .tb-item{font-size:.75rem; gap:6px; padding-block:7px}
  .tb-tail{display:none}
}
@media (max-width:460px){
  /* op smalle telefoons past alleen de openingstijd netjes op een regel */
  .topbar .wrap{justify-content:center}
  .topbar .wrap > .tb-item{display:none}
  .tb-right{margin-left:0}
  .tb-item{font-size:.74rem}
}

/* ---------- header ---------- */
.site-header{background:#fff; position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line-soft)}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(46,42,69,.10)}
.header-inner{display:flex; align-items:center; gap:20px; min-height:70px}
.brand{flex:0 0 auto; display:block}
.brand img{height:42px; width:auto}
.mainnav{display:flex; align-items:center; gap:4px; margin-inline:auto; min-width:0; flex-shrink:1}
.mainnav > a{
  font-family:var(--ff-head); font-weight:600; font-size:.96rem; color:var(--ink);
  padding:8px 13px; border-radius:9px; white-space:nowrap; transition:background .15s ease, color .15s ease;
}
.mainnav > a:hover{background:var(--blue-soft); color:var(--blue); text-decoration:none}
.header-actions{display:flex; align-items:center; gap:11px; flex:0 0 auto; min-width:0}
.header-actions .btn{padding:11px 20px; min-height:44px; font-size:.95rem}
.phone-pill{
  display:flex; align-items:center; gap:10px; padding:6px 18px 6px 12px;
  border:1.5px solid var(--line); border-radius:999px; background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.phone-pill:hover{border-color:var(--blue); box-shadow:0 4px 14px rgba(59,55,168,.12); text-decoration:none}
.phone-pill .ico{width:30px; height:30px; border-radius:50%; background:var(--blue-soft); display:grid; place-items:center; flex:0 0 auto}
.phone-pill .num{font-family:var(--ff-head); font-weight:700; font-size:1rem; color:var(--ink); display:block; line-height:1.2}
.phone-pill .sub{font-size:.7rem; color:var(--ink-3); display:block; line-height:1.3; margin-top:1px}
.navtoggle{display:none; width:44px; height:44px; border:1.5px solid var(--line); background:#fff; border-radius:12px; cursor:pointer; align-items:center; justify-content:center}
.navtoggle span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.navtoggle span::before,.navtoggle span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.navtoggle span::before{top:-6px} .navtoggle span::after{top:6px}

@media (max-width:1400px){
  .mainnav > a{padding:8px 11px; font-size:.94rem}
  .header-actions .btn svg{display:none}
  .header-actions .btn{padding:11px 18px}
}
@media (max-width:1240px){
  .mainnav > a{padding:8px 9px; font-size:.92rem}
  .brand img{height:38px}
  .phone-pill{padding:8px 16px 8px 12px; gap:10px}
  .phone-pill .num{font-size:1rem}
  .phone-pill .sub{display:none}
  .header-actions .btn{padding:10px 16px; font-size:.92rem}
}
@media (max-width:1180px){  /* afgeleid: het uitklapmenu begint eerder dan in het sjabloon, zie design.json */
  .header-inner{min-height:62px; gap:12px; position:relative}
  .navtoggle{display:flex}
  .mainnav{
    position:absolute; left:auto; right:24px; top:calc(100% + 9px);
    width:min(282px, calc(100vw - 48px));
    background:#fff; flex-direction:column; align-items:stretch; gap:2px;
    padding:8px; margin:0; border:1px solid var(--line); border-radius:16px;
    box-shadow:0 20px 40px rgba(46,42,69,.16); display:none; overflow:hidden;
  }
  .mainnav.is-open{display:flex}
  .mainnav > a{
    padding:13px 14px; font-size:1rem; border-radius:10px;
    display:flex; align-items:center; min-height:46px; white-space:normal;
  }
  .mainnav > a + a{border-top:1px solid var(--line-soft)}
  .header-actions .btn{display:none}
  .header-actions{margin-left:auto}
  .phone-pill{padding:8px 16px 8px 10px}
  .navtoggle[aria-expanded="true"]{border-color:var(--blue); background:var(--blue-soft)}
}
@media (max-width:760px){
  /* de vaste balk onderin heeft al een belknop - niet dubbel in de header */
  .header-actions .phone-pill{display:none}
}
@media (max-width:620px){
  .brand img{height:34px}
  .header-actions{gap:10px}
  .wrap{padding-inline:18px}
  .mainnav{right:18px; width:min(282px, calc(100vw - 36px))}
}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:62% 50%; filter:brightness(1.42) saturate(1.06)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(20,17,34,.94) 0%, rgba(26,23,43,.9) 30%, rgba(46,42,69,.66) 52%, rgba(46,42,69,.18) 72%, rgba(46,42,69,.06) 100%),
    linear-gradient(180deg, rgba(17,14,29,.42) 0%, rgba(17,14,29,0) 34%);
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.82fr);
  gap:clamp(32px,4vw,72px); align-items:center;
  padding-block:clamp(34px,3.2vw,56px);
}
.hero-copy{color:#fff; max-width:640px}
.hero-eyebrow{font-family:var(--ff-head); font-size:.79rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8); margin:0 0 13px}
.hero h1{color:#fff; margin-bottom:16px; text-shadow:0 2px 26px rgba(0,0,0,.3)}
.hero-lead{font-size:clamp(1.06rem,1.32vw,1.24rem); color:rgba(255,255,255,.88); max-width:33em; margin-bottom:20px}
.hero-usps{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px}
.hero-usps li{display:flex; align-items:flex-start; gap:12px; font-family:var(--ff-head); font-weight:600; font-size:1.04rem; color:#fff}
.hero-usps svg{flex:0 0 auto; margin-top:2px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}
.hero-note{margin-top:18px; font-size:.96rem; color:rgba(255,255,255,.76)}
.hero-note a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.hero-note strong{color:#fff; font-weight:600}

/* lead form */
.hero-form-col{position:relative}
.leadcard{
  background:#fff; border-radius:22px; padding:clamp(22px,1.7vw,28px);
  box-shadow:var(--shadow-lg); position:relative; z-index:2;
}
.leadcard h2{font-size:clamp(1.35rem,1.7vw,1.72rem); margin-bottom:10px}
.leadcard .form-sub{color:var(--ink-2); font-size:.95rem; margin-bottom:18px; line-height:1.5}
.field{display:block; margin-bottom:13px}
.field label{display:block; font-family:var(--ff-head); font-weight:700; font-size:.88rem; color:var(--ink); margin-bottom:6px}
.field label .req{color:var(--orange)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#E5484D; background:#FFF6F6;
}
.form-error{display:none}
.form-error.is-shown{
  display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:11px 13px;
  background:#FFF1F1; border:1px solid #F5C2C2; border-radius:10px;
  color:#B4292E; font-size:.88rem; line-height:1.4;
}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--ff-body); font-size:1rem; color:var(--ink);
  background:#F3F2F8; border:1.5px solid #E2DFEC; border-radius:12px; padding:12px 14px;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical; min-height:62px}
.field input::placeholder,.field textarea::placeholder{color:#918BAB}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(59,55,168,.13);
}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23544E6C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field-row .field{margin-bottom:13px}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0}
.form-note{display:flex; align-items:flex-start; justify-content:center; gap:7px; margin:12px 0 0; font-size:.83rem; color:var(--ink-3); line-height:1.45}
.form-note svg{margin-top:3px}
.form-success{display:none; background:#EAF9F0; border:1.5px solid #B7E8CC; border-radius:14px; padding:18px; color:#14603A; font-size:.98rem}
.leadcard.is-sent .form-success{display:block}
.leadcard.is-sent form{display:none}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; padding-block:32px 42px; gap:28px}
  .hero::before{background:linear-gradient(180deg, rgba(20,17,34,.9) 0%, rgba(24,21,40,.86) 55%, rgba(46,42,69,.9) 100%)}
  .hero-copy{max-width:none}
}
@media (max-width:560px){
  .hero-actions .btn{width:100%}
  .field-row{grid-template-columns:1fr; gap:0}
}

/* ---------- trust strip ---------- */
.truststrip{background:#fff; border-bottom:1px solid var(--line-soft)}
.truststrip .wrap{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding-block:26px;
}
.ts-item{display:flex; align-items:center; gap:13px; padding-inline:14px; position:relative; min-width:0}
.ts-item + .ts-item::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line-soft)}
.ts-item svg{flex:0 0 auto}
.ts-item b{display:block; font-family:var(--ff-head); font-weight:700; font-size:.95rem; white-space:nowrap; color:var(--ink); line-height:1.25}
.ts-item span{display:block; font-size:.85rem; color:var(--ink-3); line-height:1.35; margin-top:2px}
@media (max-width:1100px){ .truststrip .wrap{grid-template-columns:repeat(3,1fr); gap:18px 8px} .ts-item:nth-child(3n+1)::before{display:none} .ts-item b{white-space:normal} }
@media (max-width:700px){ .truststrip .wrap{grid-template-columns:repeat(2,1fr)} .ts-item::before{display:none!important} .ts-item{padding-inline:0} }
@media (max-width:400px){ .truststrip .wrap{grid-template-columns:1fr} }

/* ---------- service cards ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px)}
@media (max-width:1040px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .grid-2{grid-template-columns:1fr} }
@media (max-width:620px){ .grid-4,.grid-3{grid-template-columns:1fr; gap:20px} }

.svc{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; text-decoration:none}
.svc-img{aspect-ratio:3/2; background:var(--blue-soft); overflow:hidden}
.svc-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.svc:hover .svc-img img{transform:scale(1.045)}
.svc-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:9px; flex:1}
.svc-body h3{color:var(--ink)}
.svc-body p{color:var(--ink-2); font-size:.96rem; margin:0; flex:1}
.svc-more{margin-top:4px}

.svc--all{background:var(--navy); border-color:var(--navy); color:#fff; justify-content:center; align-items:flex-start; padding:30px 26px; gap:14px}
.svc--all:hover{background:var(--navy-3)}
.svc--all h3{color:#fff; font-size:1.3rem}
.svc--all p{color:#B4AFD2; font-size:.96rem}

/* ---------- split blocks ---------- */
.split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,4vw,68px); align-items:center}
.split--start{align-items:start}
.split--stretch{align-items:stretch}
.split--stretch .split-media{aspect-ratio:auto; min-height:340px}
.split-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3; background:var(--blue-soft)}
.split-media img{width:100%; height:100%; object-fit:cover}
.split-text h2{margin-bottom:18px}
.split-text p{color:var(--ink-2)}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split .order-first{order:-1}
  .split-media{aspect-ratio:16/10}
}

.checklist{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
.checklist.two-col{grid-template-columns:1fr 1fr; gap:12px 26px}
.checklist li{display:flex; align-items:flex-start; gap:11px; color:var(--ink); font-size:1rem}
.checklist svg{flex:0 0 auto; margin-top:4px}
.section--navy .checklist li{color:#D9D6EC}
@media (max-width:620px){ .checklist.two-col{grid-template-columns:1fr} }

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; position:relative}
.step{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); padding:28px 24px; position:relative}
.step .num{
  width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--ff-head); font-weight:800; font-size:1.18rem; display:grid; place-items:center; margin-bottom:18px;
}
.step h3{margin-bottom:9px}
.step p{color:var(--ink-2); font-size:.96rem; margin:0}
.step-arrow{position:absolute; top:52px; right:-19px; z-index:2; color:#C2BCD8}
@media (max-width:1040px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px} .step-arrow{display:none} }
@media (max-width:620px){ .steps{grid-template-columns:1fr} }

/* ---------- pricing table ---------- */
.pricetable{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); container-type:inline-size}
.pricetable .scroller{overflow:visible}
.pricetable table{width:100%; min-width:0; border-collapse:collapse; text-align:left; table-layout:auto}
.pricetable thead th{
  background:var(--navy); color:#fff; font-family:var(--ff-head); font-weight:700;
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  padding:15px 22px;
}
.pricetable thead th:first-child{width:34%}
.pricetable thead th:last-child{width:24%}
.pricetable thead th:last-child{text-align:right}
.pricetable tbody td{padding:18px 22px; border-top:1px solid var(--line-soft); vertical-align:middle; color:var(--ink-2)}
.pricetable tbody tr:first-child td{border-top:0}
.pricetable tbody tr:hover{background:#F7F6FB}
.pt-type{font-family:var(--ff-head); font-weight:700; font-size:1.04rem; color:var(--ink); display:block; line-height:1.3}
.pt-tag{
  display:inline-block; margin-top:7px; font-family:var(--ff-head); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue); background:var(--blue-soft);
  padding:4px 10px; border-radius:999px;
}
.pt-price{
  text-align:right; font-family:var(--ff-head); font-weight:800; text-wrap:balance;
  font-size:1.15rem; color:var(--navy); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.pricetable tfoot td{background:#F7F6FB; border-top:1px solid var(--line); padding:16px 22px; font-size:.88rem; color:var(--ink-3)}

@container (max-width:620px){
  .pricetable table,.pricetable tbody,.pricetable tr,.pricetable td{display:block; width:100%; min-width:0}
  .pricetable thead,.pricetable tfoot{display:none}
  .pricetable tbody tr{border-top:1px solid var(--line-soft); padding:6px 0}
  .pricetable tbody tr:first-child{border-top:0}
  .pricetable tbody td{border-top:0; padding:7px 20px; display:flex; gap:10px 14px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; min-width:0; overflow-wrap:anywhere}
  .pricetable tbody td:first-child{padding-top:18px; display:block}
  .pricetable tbody td:last-child{padding-bottom:18px}
  .pricetable tbody td[data-label]::before{
    content:attr(data-label); font-family:var(--ff-head); font-weight:700; font-size:.72rem;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); flex:0 0 auto;
  }
  .pt-price{text-align:right; font-size:1.12rem}
  .pricetable .pt-mobile-note{display:block; padding:0 20px 18px; font-size:.82rem; color:var(--ink-3)}
  .pricetable thead th:first-child,.pricetable thead th:last-child{width:auto}
}
@container (max-width:400px){
  .pricetable tbody td,.pricetable tbody td:first-child,.pricetable .pt-mobile-note{padding-inline:14px}
  .pt-price{font-size:1.05rem}
}
.pricetable .pt-mobile-note{display:none}

.callout{
  background:var(--white); border:1px solid var(--line); border-left:5px solid var(--orange);
  border-radius:var(--r); padding:24px 26px; margin-top:28px;
}
.callout h3{margin-bottom:10px}
.callout p{color:var(--ink-2); margin:0}
.callout--overlap{
  position:relative; z-index:2; margin:-76px 0 0 44px;
  background:#fff; border:1px solid var(--line-soft); border-left:5px solid var(--orange);
  box-shadow:var(--shadow-lg);
  padding:26px 28px;
}
@media (max-width:1100px){ .callout--overlap{margin:-60px 0 0 28px} }
@media (max-width:860px){ .callout--overlap{margin:-48px 16px 0} }
@media (max-width:520px){ .callout--overlap{margin:-36px 12px 0; padding:22px 20px} }
.callout--blue{border-left-color:var(--blue); background:var(--blue-soft); border-color:#D5D1EA}
.callout--blue p{color:#2B2660}

/* ---------- duo cards ---------- */
.duogrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:stretch}
.duocard{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm)}
.duocard-img{aspect-ratio:16/9; overflow:hidden; background:var(--blue-soft)}
.duocard-img img{width:100%; height:100%; object-fit:cover}
.duocard-body{padding:clamp(24px,2vw,32px); display:flex; flex-direction:column; flex:1}
.duocard-body h3{margin:0 0 16px; font-size:clamp(1.4rem,1.8vw,1.85rem); font-weight:700; letter-spacing:-.02em; line-height:1.16}
.duocard-body p{color:var(--ink-2)}
.duocard-foot{margin-top:auto; padding-top:20px}
@media (max-width:860px){ .duogrid{grid-template-columns:1fr; gap:22px} }

/* ---------- editorial ---------- */
.article{max-width:74ch; margin:0 auto}
.article h2{margin-bottom:22px}
.article p{color:var(--ink-2); font-size:1.06rem}
.article ul{color:var(--ink-2); padding-left:0; list-style:none; display:grid; gap:11px; margin:22px 0 0}
.article .checklist li::before{display:none}
.article ul li{display:flex; gap:11px; align-items:flex-start}
.article ul li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); flex:0 0 auto; margin-top:11px}
.section--navy .article p{color:#C9C5E2}

.factgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:30px}
.fact{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r); padding:24px}
.section--navy .fact{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.fact h3{margin-bottom:9px; display:flex; align-items:center; gap:10px}
.fact p{font-size:.98rem; color:var(--ink-2); margin:0}
.section--navy .fact p{color:#BFBADA}
@media (max-width:760px){ .factgrid{grid-template-columns:1fr} }

/* ---------- werkgebied ---------- */
.area-wrap{
  background:var(--navy); border-radius:var(--r-lg); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:stretch;
}
.area-copy{padding:clamp(30px,3.4vw,52px); color:#D9D6EC}
.area-copy h2{color:#fff; margin-bottom:14px}
.area-copy > p{color:#B4AFD2}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.chip{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); color:#fff; padding:10px 16px; border-radius:999px;
  font-family:var(--ff-head); font-weight:600; font-size:.94rem; transition:background .16s ease, border-color .16s ease;
}
.chip:hover{background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.4); text-decoration:none}
.area-map{background:#241F36; position:relative; min-height:380px; display:grid; place-items:center; padding:22px}
.area-map svg{width:100%; height:auto; max-width:560px}
@media (max-width:900px){ .area-wrap{grid-template-columns:1fr} .area-map{min-height:320px} }

/* ---------- kennisbank ---------- */
.kb{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease}
.kb:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); text-decoration:none}
.kb-img{aspect-ratio:16/10; overflow:hidden; background:var(--blue-soft)}
.kb-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.kb:hover .kb-img img{transform:scale(1.045)}
.kb-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1}
.kb-body .eyebrow{margin:0}
.kb-body p{color:var(--ink-2); font-size:.95rem; margin:0; flex:1}

/* ---------- faq ---------- */
.faq{max-width:840px; margin:0 auto; display:grid; gap:12px}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.faq-item[open]{border-color:#CFCBE6; box-shadow:var(--shadow-sm)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 58px 20px 24px; position:relative;
  font-family:var(--ff-head); font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  border-right:2.4px solid var(--blue); border-bottom:2.4px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq-item summary:hover{color:var(--blue)}
.faq-body{padding:0 24px 22px; color:var(--ink-2)}
.faq-body p{margin:0}

/* ---------- final CTA ---------- */
/* De oproepband boven de voet. De voet is donker navy, dus de band mag dat niet
   ook zijn: zonder eigen achtergrondfoto staat hij in de zachte toon van het
   palet, met donkere letters. Met een foto krijgt hij de donkere behandeling en
   houdt de accentrand bovenop de voet de twee vlakken uit elkaar. */
/* Smalle oproepregel halverwege een lange pagina. Zie colw_lead_rij(). */
.leadrij--soft{background:var(--bg)}
.leadrij--white{background:var(--white)}
.leadrij .wrap{padding-block:clamp(26px,3vw,40px); display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:center; text-align:center}
.leadrij p{margin:0; font-family:var(--ff-head); font-weight:700; font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink)}
.leadrij .hero-actions{margin:0}
@media (max-width:560px){ .leadrij .wrap{flex-direction:column} }

.finalcta{position:relative; overflow:hidden; isolation:isolate; background:var(--bg)}
.finalcta .bg{position:absolute; inset:0; z-index:-2}
.finalcta .bg img{width:100%; height:100%; object-fit:cover}
.finalcta--soft{background:var(--bg)}
.finalcta--white{background:var(--white)}
.finalcta--photo{background:var(--navy)}
.finalcta--photo::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(95deg, rgba(20,17,34,.95) 0%, rgba(26,23,43,.88) 45%, rgba(46,42,69,.72) 100%)}
.finalcta .wrap{padding-block:clamp(58px,6vw,96px); text-align:center; color:var(--ink)}
.finalcta h2{color:var(--ink); font-size:clamp(1.9rem,3vw,2.9rem); margin-bottom:16px}
.finalcta p{color:var(--ink-2); font-size:1.12rem; max-width:52ch; margin:0 auto 32px}
.finalcta--photo .wrap{color:#fff}
.finalcta--photo h2{color:#fff}
.finalcta--photo p{color:rgba(255,255,255,.85)}
.finalcta .hero-actions{justify-content:center}

/* ---------- juridische pagina's + offertepagina ---------- */
.art-hero--tight{padding-bottom:clamp(72px,7vw,104px)}
.art-layout--up{margin-top:calc(-1 * clamp(44px,4.4vw,64px))}
@media (max-width:900px){ .art-layout--up{margin-top:calc(-1 * clamp(32px,4vw,44px))} }
.deflist{margin:22px 0; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.deflist-row{display:grid; grid-template-columns:190px minmax(0,1fr); gap:0}
.deflist-row + .deflist-row{border-top:1px solid var(--line)}
.deflist dt{font-family:var(--ff-head); font-weight:700; color:var(--ink); padding:14px 18px; background:var(--bg)}
.deflist dd{margin:0; padding:14px 18px; color:var(--ink-2)}
@container (max-width:520px){ .deflist-row{grid-template-columns:minmax(0,1fr)} .deflist dd{padding-top:0} }

.ministeps{list-style:none; margin:0; padding:0; display:grid; gap:13px; counter-reset:ms}
.ministeps li{display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--ink-2); line-height:1.45}
.ministeps li span{
  width:24px; height:24px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
  font-family:var(--ff-head); font-weight:700; font-size:.82rem; display:grid; place-items:center; flex:0 0 auto;
}
.art-layout > div > .leadcard{margin:0}

/* ---------- footer ---------- */
.site-footer{background:var(--navy); color:#B1ABD0; padding-block:clamp(48px,5vw,76px) 0; font-size:.97rem; border-top:4px solid var(--orange)}
.footer-grid{display:grid; grid-template-columns:minmax(230px,1.25fr) minmax(172px,auto) minmax(168px,auto) minmax(168px,auto) minmax(248px,auto); gap:clamp(26px,2.4vw,40px); align-items:start}
.site-footer h3{color:#fff; font-size:1.04rem; margin-bottom:18px}
.site-footer p{color:#B1ABD0; margin-bottom:14px}
.site-footer a{color:#B1ABD0}
.site-footer a:hover{color:#fff}
.footer-logo{height:40px; width:auto; display:block}
.fbrand-adres{font-size:.92rem}
.footer-brand{display:inline-block; background:#fff; padding:11px 16px; border-radius:14px; margin-bottom:20px}
.flist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.fcontact{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.fcontact li{display:flex; gap:11px; align-items:flex-start; min-width:0}
.fcontact .ico{width:31px; height:31px; border-radius:9px; background:rgba(255,255,255,.09); display:grid; place-items:center; flex:0 0 auto}
.fcontact b{display:block; color:#fff; font-family:var(--ff-head); font-weight:700; font-size:.95rem; line-height:1.35; overflow-wrap:anywhere}
.fcontact span{display:block; font-size:.86rem; color:#9A93BD; line-height:1.4; margin-top:2px}
.socials{display:grid; grid-template-columns:repeat(8,32px); gap:8px; margin-top:22px}
.socials a{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; opacity:.9; transition:opacity .15s ease, transform .15s ease}
.socials a:hover{opacity:1; transform:translateY(-2px)}
.socials svg{width:15px; height:15px; fill:#fff}
.footer-areas{margin-top:44px; padding-top:30px; border-top:1px solid rgba(255,255,255,.11)}
.footer-areas h3{margin-bottom:14px}
.footer-areas ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px}
.footer-areas li a{display:inline-block; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.07); font-size:.9rem}
.footer-areas li a:hover{background:rgba(255,255,255,.15); text-decoration:none}
.footer-bottom{
  margin-top:34px; border-top:1px solid rgba(255,255,255,.11); padding-block:22px 26px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:.9rem; color:#9A93BD;
}
.fcol > summary{list-style:none; cursor:default}
.fcol > summary::-webkit-details-marker{display:none}
.fhours h3{margin-top:26px}
.fhours p{margin:0; font-size:.92rem}

@media (max-width:1180px){ .footer-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:34px 28px} }

@media (max-width:760px){
  /* mobiel: een korte footer met uitklapbare linklijsten in plaats van een lange kolom */
  .site-footer{padding-block:38px 0; font-size:.95rem}
  .footer-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .footer-grid > *{min-width:0}
  .footer-grid > div:first-child{order:1}
  .fcontactcol{order:2; border-top:1px solid rgba(255,255,255,.11); padding-top:22px}
  .footer-grid > .fcol{order:3}
  .footer-grid > div:nth-child(4){order:4}

  .site-footer h3{font-size:1rem; margin-bottom:13px}
  .footer-brand{margin-bottom:16px; padding:9px 14px}
  .footer-logo{height:34px}
  .socials{grid-template-columns:repeat(auto-fill,30px); gap:8px; margin-top:16px; margin-bottom:22px}
  .socials a{width:30px; height:30px; border-radius:8px}
  .socials svg{width:14px; height:14px}
  .fbrand-adres{display:none}

  .fcol{border-top:1px solid rgba(255,255,255,.11)}
  .fcol > summary{
    position:relative; cursor:pointer; display:flex; align-items:center;
    padding:15px 34px 15px 0; min-height:54px; -webkit-tap-highlight-color:transparent;
  }
  .fcol > summary h3{margin:0}
  .fcol > summary::after{
    content:""; position:absolute; right:7px; top:50%; width:9px; height:9px; opacity:.65;
    border-right:2.2px solid #fff; border-bottom:2.2px solid #fff;
    transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
  }
  .fcol[open] > summary::after{transform:translateY(-25%) rotate(225deg)}
  .fcol .flist{gap:7px; padding-bottom:12px}
  .fcol .flist a{display:block; padding:11px 2px}
  .fhours{display:none}
  .fcontact{gap:15px}
  .footer-areas{margin-top:10px; padding-top:22px}
  .footer-areas li a{padding:8px 14px}
  .footer-bottom{margin-top:24px; padding-block:18px 22px; font-size:.86rem; gap:8px 18px}
}

/* ---------- mobile call bar ---------- */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:rgba(255,255,255,.97); backdrop-filter:blur(8px); padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
  }
  .callbar .btn{width:100%; padding:13px 12px; font-size:.98rem; min-height:50px}
  body{padding-bottom:78px}
}

/* ---------- service page (dienstensjabloon) ---------- */
.hero--landing .hero-grid{padding-block:clamp(30px,2.8vw,48px)}
.hero--landing h1{font-size:clamp(1.95rem,3.1vw,3rem)}
.hero--landing .hero-lead{font-size:clamp(1.02rem,1.2vw,1.15rem)}
.crumbs{font-size:.88rem; color:rgba(255,255,255,.72); margin:0 0 14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.crumbs a{color:#fff; text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}
.crumbs [aria-current]{color:rgba(255,255,255,.72)}

.linkgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.linkcard{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; font-family:var(--ff-head); font-weight:700; color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.linkcard:hover{border-color:var(--blue); box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none}
.linkcard svg{color:var(--orange); flex:0 0 auto; transition:transform .18s ease}
.linkcard:hover svg{transform:translateX(4px)}
.linkcard--accent{background:var(--navy); border-color:var(--navy); color:#fff}
.linkcard--accent:hover{background:var(--navy-3); border-color:var(--navy-3)}
.linkcard--accent svg{color:#fff}
@media (max-width:960px){ .linkgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .linkgrid{grid-template-columns:1fr} }

/* ---------- diensten overzicht ---------- */
.minigrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.minicard{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r);
  padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px;
}
a.minicard{transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
a.minicard:hover{border-color:var(--blue); box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none}
.minicard h3{color:var(--ink)}
.minicard p{color:var(--ink-2); font-size:.95rem; margin:0; flex:1}
.minicard .link-arrow{margin-top:6px; font-size:.93rem}
.minicard--plain{background:#FCFBFE; border-style:dashed}
@media (max-width:900px){ .minigrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .minigrid{grid-template-columns:1fr} }

.jumprow{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:24px}
.jumpchip{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  color:var(--ink); padding:10px 18px; border-radius:999px;
  font-family:var(--ff-head); font-weight:600; font-size:.95rem;
  transition:border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.jumpchip:hover{border-color:var(--blue); color:var(--blue); box-shadow:var(--shadow-sm); text-decoration:none}

/* ---------- kennisbank artikel ---------- */
.art-hero{background:var(--navy); color:#CFCBE5; padding-block:clamp(34px,3.4vw,52px) clamp(96px,9vw,140px)}
.art-hero .crumbs{color:rgba(255,255,255,.68); margin-bottom:16px}
.art-hero .eyebrow{color:#A9A4EC}
.art-hero h1{color:#fff; font-size:clamp(1.9rem,3.2vw,3.05rem)}
.art-hero .art-lead{color:#C3BEDD; font-size:clamp(1.05rem,1.25vw,1.2rem); margin:0}
.art-hero-grid{display:grid; grid-template-columns:1.08fr 1fr; gap:clamp(26px,3.4vw,56px); align-items:end}
@media (max-width:900px){ .art-hero-grid{grid-template-columns:1fr; gap:20px; align-items:start} }
.art-meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:20px; font-size:.9rem; color:#A69FC6}
.art-meta span{display:inline-flex; align-items:center; gap:8px}

.art-figure{margin-top:clamp(-82px,-7vw,-120px); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:21/9; background:var(--blue-soft)}
.art-figure img{width:100%; height:100%; object-fit:cover}

.art-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(28px,3vw,48px); align-items:start; margin-top:clamp(40px,4vw,64px)}
.art-body{
  container-type:inline-size;
  min-width:0; max-width:none;
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,48px); box-shadow:var(--shadow-sm);
}
/* binnen het witte tekstvlak moeten blokken hun eigen vlak houden */
.art-body .callout{background:var(--bg); border-color:var(--line-soft)}
.art-body .pricetable{box-shadow:none}
.art-body .pricetable tbody tr:nth-child(even){background:#F7F6FB}
.art-body .pricetable tbody tr:hover{background:#EFEDF7}
.art-body h2{font-size:clamp(1.4rem,1.95vw,1.9rem); margin:clamp(34px,3.2vw,48px) 0 16px; scroll-margin-top:110px}
.art-body h2:first-child{margin-top:0}
.art-body p{color:var(--ink-2); font-size:1.06rem}
.art-body .pricetable{margin:26px 0}
.art-body .checklist{margin:22px 0}

.art-side{position:sticky; top:92px; display:grid; gap:18px}
.sidecard{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:22px 24px}
.sidecard h3{font-size:1rem; margin-bottom:14px}
.toc{list-style:none; margin:0; padding:0; display:grid; gap:7px; counter-reset:toc}
.toc a{
  display:block; padding:8px 10px; border-radius:8px; font-size:.94rem; color:var(--ink-2);
  border-left:2px solid var(--line); transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.toc a:hover{background:var(--blue-soft); color:var(--blue); border-left-color:var(--blue); text-decoration:none}
.sidecard--cta{background:var(--navy); border-color:var(--navy); color:#C3BEDD}
.sidecard--cta h3{color:#fff}
.sidecard--cta p{color:#B4AFD2; font-size:.93rem; margin-bottom:16px}
.sidecard--cta .btn{width:100%; margin-bottom:10px}
.sidecard--cta .side-tel{display:block; text-align:center; color:#fff; font-family:var(--ff-head); font-weight:700; font-size:1.05rem}
.sidecard--cta .side-hours{display:block; text-align:center; font-size:.84rem; color:#9F98C1; margin-top:3px}

@media (max-width:1000px){
  .art-layout{grid-template-columns:1fr}
  .art-side{position:static; grid-template-columns:1fr 1fr; display:grid; gap:18px}
}
@media (max-width:700px){
  .art-side{grid-template-columns:1fr}
  .art-figure{aspect-ratio:16/9; margin-top:-64px}
  .art-body{padding:24px 20px; border-radius:var(--r-md)}
}

/* ---------- over ons ---------- */
.crumbbar{background:#fff; border-bottom:1px solid var(--line-soft)}
.crumbbar .crumbs{color:var(--ink-3); padding-block:14px; margin:0; font-size:.88rem}
.crumbbar .crumbs a{color:var(--ink-2)}
.crumbbar .crumbs a:hover{color:var(--blue)}
.crumbbar .crumbs [aria-current]{color:var(--ink-3)}
.crumbbar .crumbs span[aria-hidden]{color:var(--line)}

.portret{position:relative}
.portret-main{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:5/6; background:var(--blue-soft)}
.portret-main img{width:100%; height:100%; object-fit:cover}

.portret-badge{
  position:absolute; left:-22px; bottom:-22px; background:#fff; border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:16px 20px; display:flex; align-items:center; gap:12px; max-width:270px;
}
.portret-badge b{display:block; font-family:var(--ff-head); font-weight:700; font-size:.98rem; color:var(--ink); line-height:1.25}
.portret-badge span{display:block; font-size:.85rem; color:var(--ink-3); line-height:1.35; margin-top:2px}
@media (max-width:860px){
  .portret-main{aspect-ratio:16/11}
  .portret-badge{left:16px; bottom:-18px}
}

.pullquote{
  position:relative; margin:0; padding:clamp(26px,2.6vw,38px) clamp(26px,2.6vw,40px);
  background:var(--blue-soft); border-radius:var(--r-md); border-left:5px solid var(--blue);
}
.pullquote p{
  font-family:var(--ff-head); font-weight:600; font-size:clamp(1.1rem,1.45vw,1.34rem);
  line-height:1.45; color:var(--ink); margin:0; letter-spacing:-.012em;
}
.pullquote cite{display:block; margin-top:14px; font-style:normal; font-size:.9rem; color:var(--ink-3); font-family:var(--ff-body)}

.badgerow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:36px}
.badge{
  display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); padding:20px 22px; color:#fff;
  font-family:var(--ff-head); font-weight:600; font-size:1rem; line-height:1.3;
}
.badge .ico{width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.1); display:grid; place-items:center; flex:0 0 auto}
@media (max-width:820px){ .badgerow{grid-template-columns:1fr} }

/* ---------- contact ---------- */
.contactgrid{display:grid; grid-template-columns:1fr; gap:14px}
.contacttile{
  display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:22px 24px; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.contacttile:hover{border-color:var(--blue); box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none}
.contacttile .ico{width:44px; height:44px; border-radius:12px; background:var(--blue-soft); display:grid; place-items:center; flex:0 0 auto}
.contacttile .lbl{font-family:var(--ff-head); font-size:.76rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); display:block}
.contacttile b{display:block; font-family:var(--ff-head); font-weight:700; font-size:1.08rem; color:var(--ink); line-height:1.3; margin-top:5px; overflow-wrap:anywhere}
.contacttile span.sub{display:block; font-size:.88rem; color:var(--ink-3); line-height:1.4; margin-top:4px}
@media (max-width:520px){ .contacttile{padding:18px 18px; gap:13px} .contacttile .ico{width:40px; height:40px} }

/* ---------- eigen visuals, afgeleid van de kaartopmaak uit het sjabloon ---------- */
.gasvisual{margin:0; background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:clamp(20px,2.2vw,30px); box-shadow:var(--shadow-sm)}
.gasvisual svg{width:100%; height:auto; display:block}
.section--navy .gasvisual{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14)}
.paginabeeld{margin:26px 0; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm)}
.paginabeeld img{width:100%; height:auto; display:block}

/* ---------- overslaan-naar-inhoud, hoort bij elke pagina ---------- */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; font-family:var(--ff-head); font-weight:700}
.skip:focus{left:0; text-decoration:none}

/* ---------- beeldmerk ---------- */
.brand-mark{height:42px; width:auto; display:block}
.footer-logo-svg{height:40px; width:auto; display:block}
@media (max-width:1240px){ .brand-mark{height:38px} }
@media (max-width:620px){ .brand-mark{height:34px} }
.diagram{margin:26px 0; background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:clamp(18px,2vw,26px)}
.diagram svg{width:100%; height:auto; display:block}
.art-body .diagram{background:var(--bg)}
.kb-img--diagram{aspect-ratio:16/10; background:var(--blue-soft); display:grid; place-items:center; padding:14px; overflow:hidden}
.kb-img--diagram .diagram{margin:0; width:100%; background:#fff; border:0; padding:12px 14px}
.kb-img--diagram svg{max-height:100%}

/* ---------- toegankelijkheid, afgeleid ----------
 * Tikdoelen in de voettekst waren 18 tot 22 pixels hoog. Met wat lucht erboven
 * en eronder halen ze de 24 die de controle vraagt, zonder dat de voettekst
 * zichtbaar verschuift. De koppen in de uitklapkolommen krijgen dezelfde lucht,
 * met een negatieve marge eromheen zodat ze op hun oude plek blijven staan.
 * ---------------------------------------------------------------- */
.flist a{display:inline-block; padding-block:2px}
.fcontact b a,.fcontact a{display:inline-block; padding-block:3px}
.footer-bottom a{display:inline-block; padding-block:2px}
@media (min-width:761px){
  .fcol > summary{padding-block:14px; margin-top:-14px; margin-bottom:4px}
  .fcol > summary h3{margin-bottom:0}
}

/* ---------- koptekst past binnen de wrap, afgeleid ----------
 * Het merkteken plus zes menu-items plus de telefoonknop plus de knop haalden
 * samen 1271 pixels, terwijl er binnen .wrap 1232 pixels beschikbaar zijn. Het
 * laatste menu-item liep daardoor onder de telefoonknop door. Het beeldmerk is
 * teruggebracht tot de breedte die het woordmerk echt nodig heeft, en de
 * menu-items krijgen op elke breedte de kleinere binnenruimte die het sjabloon
 * zelf vanaf 1400 pixels al voorschrijft. Samen scheelt dat 77 pixels.
 * ---------------------------------------------------------------- */
@media (min-width:1181px){
  .mainnav > a{padding:8px 11px; font-size:.94rem}
}

/* ---------- bestandsveld, afgeleid ----------
 * Het sjabloon heeft geen formulier met een bijlage. De browserknop stond
 * daardoor kaal in een verder verzorgd formulier. De knop krijgt hier de vorm
 * van de lichte knop uit het sjabloon; de rest van de besturing blijft de
 * browser zelf, zodat de tekst erop in de taal van de bezoeker blijft staan.
 * ---------------------------------------------------------------- */
.field input[type=file]{padding:9px 12px; font-size:.95rem; color:var(--ink-2); cursor:pointer; line-height:1.5}
.field input[type=file]::file-selector-button{
  font-family:var(--ff-head); font-weight:700; font-size:.88rem; color:var(--navy);
  background:#fff; border:1.5px solid var(--line); border-radius:9px;
  padding:7px 14px; margin-right:12px; cursor:pointer;
  transition:border-color .16s ease, color .16s ease;
}
.field input[type=file]::file-selector-button:hover{border-color:var(--blue); color:var(--blue)}

/* ---------- links in lopende tekst, afgeleid ----------
 * Het sjabloon zet alle links zonder onderstreping. In knoppen, kaarten en
 * menu's is dat duidelijk genoeg, maar een link midden in een alinea is dan
 * alleen aan de kleur te herkennen. Dat valt weg voor wie kleuren slecht
 * onderscheidt, en de toegankelijkheidscontrole meldt het terecht. Alleen
 * links binnen lopende tekst krijgen daarom een onderstreping terug.
 * ---------------------------------------------------------------- */
.article p a, .callout p a, .faq-body a, .art-body p a, .art-body li a,
.form-success a, .form-error a, .pricetable td a{
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.article p a:hover, .callout p a:hover, .faq-body a:hover, .art-body p a:hover,
.art-body li a:hover, .form-success a:hover, .pricetable td a:hover{text-decoration-thickness:2px}

/* fotoblokken */
.fotoblok{margin:0;border-radius:16px;overflow:hidden;background:#EDEBF4}
.fotoblok img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.fotoblok figcaption{padding:10px 14px;font-size:.9rem;line-height:1.45;color:#443F5E;background:#fff}
.area-map{align-items:stretch}
.area-map .fotoblok{position:relative;width:100%;justify-self:stretch;align-self:center;height:100%;min-height:320px;max-height:560px;overflow:hidden}
.area-map .fotoblok img{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover}

/* leesbaarheid over de herofoto: extra donker naar boven, waar de lucht zit */
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,32,.46) 0,rgba(18,15,32,.14) 40%,rgba(18,15,32,0) 68%)}
.hero .crumbs,.hero .crumbs a,.art-hero .crumbs,.art-hero .crumbs a{color:rgba(255,255,255,.93)}
.hero-eyebrow{color:rgba(255,255,255,.93)}