/* ==========================================================================
   Gouwers.nl: basis-stylesheet
   Tokens, basis, layout, componenten (knoppen, links, kaarten, modal),
   topbar, header, mobiel menu, footer en alle gedeelde animaties.
   Pagina-specifieke stijlen staan in /assets/css/pages/*.css
   Eén easing voor alles: --ease (ease-in-out).
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --c-blue: #3d73dc;
  --c-blue-hover: #2c5cbd;
  --c-blue-deep: #2f63c9;
  --c-blue-light: #8fb0ef;
  --c-blue-tekst: #3567d0; /* blauw voor kleine tekst op licht: haalt AA-contrast (merkblauw zit net onder 4,5:1) */
  --c-navy: #0d222d;
  --c-ink: #1c232b;
  --c-black: #161616;
  --c-muted: #5b636c;
  --c-light: #f5f5f5;
  --c-white: #fff;
  --c-line: #e3e6ea;
  --c-line-soft: #eceef1;
  --c-input: #d4d9df;
  --c-input-hover: #8a939d;
  --c-placeholder: #e9ecef;
  --c-error: #b32d2e;
  --c-success: #1f8a5b;

  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-h1: clamp(44px, 5.6vw, 80px);
  --fs-h1-xl: clamp(48px, 6.8vw, 100px);
  --fs-h2: clamp(34px, 4.2vw, 58px);

  --container: 1280px;
  --gutter: 32px;
  --section-y: 96px;

  --r-pill: 999px;
  --r-input: 14px;

  --sh-float: 0 30px 60px -20px rgba(13, 34, 45, .45);
  --sh-card: 0 24px 50px -18px rgba(28, 35, 43, .35);

  --ease: cubic-bezier(.65, 0, .35, 1);
  --hdr-h: 92px;
}

/* ---- Basis -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--hdr-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: #fff; color: var(--c-ink);
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--c-blue-hover); }
a:hover { color: var(--c-ink); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--c-blue); color: #fff; }
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .ftr :focus-visible, .mm :focus-visible { outline-color: var(--c-blue-light); }

.sr, .sr-only { 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 { position: fixed; left: 16px; top: 16px; z-index: 200; padding: 12px 20px; border-radius: var(--r-pill); background: var(--c-navy); color: #fff; font-weight: 600; text-decoration: none; transform: translateY(-200%); opacity: 0; pointer-events: none; transition: transform .4s var(--ease), opacity .3s var(--ease); }
.skip:focus-visible { transform: none; opacity: 1; pointer-events: auto; color: #fff; }

.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.page > main { flex: 1 0 auto; }

/* ---- Layout-hulpklassen --------------------------------------------------- */
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sec { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.stack { display: flex; flex-direction: column; }
.muted { color: var(--c-muted); }
.eyebrow { font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue-tekst); }
.on-dark .eyebrow, .eyebrow.light { color: var(--c-blue-light); }
.h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; color: var(--c-black); }
.h1-xl { font-size: var(--fs-h1-xl); line-height: .98; letter-spacing: -.055em; font-weight: 700; color: var(--c-black); }
.h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.04em; font-weight: 700; color: var(--c-black); }
.on-dark .h2, .on-dark .h1 { color: #fff; }
.lead { font-size: 20px; line-height: 1.55; }
.hl { color: var(--c-blue); }
.hl-i { font-style: italic; }
.on-dark .hl { color: var(--c-blue-light); }

/* Sectiekop: eyebrow + H2 links, korte tekst of link rechts */
.sec-kop { display: flex; flex-wrap: wrap; gap: 24px 32px; justify-content: space-between; align-items: flex-end; }
.sec-kop__l { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.sec-kop__r { font-size: 17px; line-height: 1.6; max-width: 400px; }

/* Kruimelpad */
.crumbs { font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.crumbs a { color: var(--c-muted); font-weight: 500; }
.crumbs [aria-current] { color: var(--c-ink); }

/* ---- Animaties: laden ----------------------------------------------------- */
/* H1 woord voor woord omhoog uit een masker */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .1em 0; margin: 0 -.06em -.1em 0; }
.w > span { display: inline-block; animation: up 1.1s var(--ease) both; }
@keyframes up { from { transform: translateY(110%); } to { transform: none; } }
.fade { animation: fd 1.1s var(--ease) both; }
.fi { animation: fd .7s var(--ease) both; }
@keyframes fd { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fd0 { from { opacity: 0; } to { opacity: 1; } }
.spin { animation: spin 16s var(--ease) infinite alternate; }
@keyframes spin { to { transform: rotate(360deg); } }
.flt { animation: flt 4.5s ease-in-out infinite alternate; }
.flt2 { animation: flt 5.5s ease-in-out -2s infinite alternate; }
@keyframes flt { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.drift { animation: drift 7s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 176, 239, .55); } 50% { box-shadow: 0 0 0 8px rgba(143, 176, 239, 0); } }

/* ---- Animaties: scroll-reveal (zie main.js) --------------------------------
   .pre wordt alleen gezet op elementen die bij laden onder de vouw staan. */
.rv { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.pre { opacity: 0; transform: translateY(48px); }
.rv-l.pre { transform: translateX(-64px); }
.rv-r.pre { transform: translateX(64px); }
.rv.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }
.wm { transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); }
.wm.pre { opacity: 0; transform: translateY(80px); }
.wm.in { opacity: 1; transform: none; }
.clip { transition: clip-path 1.4s var(--ease); }
.clip.pre { clip-path: inset(8% 6% 8% 6% round 48px); }
.clip.in { clip-path: inset(0 0 0 0 round 36px); }

/* ---- Voortgangsbalk + header ---------------------------------------------- */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--c-blue); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); z-index: 60; pointer-events: none; }

.topbar { background: var(--c-navy); color: #fff; font-size: 14px; line-height: 1.3; position: relative; z-index: 51; }
.topbar__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.topbar__status { display: inline-flex; align-items: center; gap: 10px; }
.topbar__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ef4b4b; }
.topbar__dot.pulse { animation: pulse-rood 2s ease-in-out infinite; }
@keyframes pulse-rood { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 75, 75, .6); } 50% { box-shadow: 0 0 0 8px rgba(239, 75, 75, 0); } }
.topbar__links { display: flex; gap: 24px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; transition: color .4s var(--ease); }
.topbar a:hover { color: var(--c-blue-light); }

.hdr { line-height: 1.3; position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: box-shadow .5s var(--ease); }
.hdr.is-scrolled { box-shadow: 0 1px 0 rgba(28, 35, 43, .06); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; transition: padding .5s var(--ease); }
.hdr.is-compact .hdr__in { padding-top: 10px; padding-bottom: 10px; }
.hdr__logo { display: block; flex: none; }
.hdr__logo img { height: 30px; width: 129px; }
.nav-l { display: flex; gap: 26px; align-items: center; }
.hdr__acties { display: flex; gap: 10px; align-items: center; }

.nl { position: relative; color: var(--c-ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 12px 4px; }
.nl::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 2px; background: var(--c-blue); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nl:hover { color: var(--c-ink); }
.nl:hover::after, .nl.on::after { transform: scaleX(1); transform-origin: left; }

/* Scroll-gekoppeld via CSS waar ondersteund, anders JS (main.js zet --p en .is-compact) */
@supports (animation-timeline: scroll()) {
  .prog { animation: prog linear both; animation-timeline: scroll(root); }
  .hdr__in { animation: shrink linear both; animation-timeline: scroll(root); animation-range: 0 240px; }
}
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shrink { from { padding-top: 20px; padding-bottom: 20px; } to { padding-top: 10px; padding-bottom: 10px; } }

/* Hamburger */
.burger { display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--c-ink); background: transparent; color: var(--c-ink); padding: 0; transition: background-color .5s var(--ease), color .5s var(--ease), transform .4s var(--ease); }
.burger:active { transform: scale(.94); }
.burger span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: currentColor; transition: transform .6s var(--ease), opacity .4s var(--ease); }
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }
.mm__sluit { display: inline-grid; background: #fff; color: var(--c-navy); border-color: #fff; }
.mm__sluit span:nth-child(1), .mm__sluit span:nth-child(3) { transform: none; transition: transform .6s var(--ease) .25s; }
.mm__sluit span:nth-child(2) { opacity: 0; }
.menu-open .mm__sluit span:nth-child(1) { transform: rotate(45deg); }
.menu-open .mm__sluit span:nth-child(3) { transform: rotate(-45deg); }
.mm__sluit:hover { transform: rotate(90deg); }

/* Mobiel menu: fullscreen navy overlay */
.mm { position: fixed; inset: 0; z-index: 90; background: var(--c-navy); color: #fff; display: flex; flex-direction: column; padding: 0 20px 32px; overflow-y: auto; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease), visibility 0s linear .8s; }
.mm:focus { outline: none; }
.menu-open .mm { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .8s var(--ease), visibility 0s; }
.mm__top { display: flex; align-items: center; justify-content: space-between; min-height: 88px; }
.mm__top img { height: 28px; width: 120px; }
.mm__nav { display: flex; flex-direction: column; margin-top: 24px; }
.mm__nav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; font-size: clamp(32px, 9vw, 44px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .7s var(--ease), color .4s var(--ease); }
.mm__nav a svg { flex: none; transition: transform .5s var(--ease); }
.mm__nav a:hover, .mm__nav a.on { color: var(--c-blue-light); }
.mm__nav a:hover svg { transform: rotate(-45deg); }
.menu-open .mm__nav a { opacity: 1; transform: none; }
.menu-open .mm__nav a:nth-child(1) { transition-delay: .15s; }
.menu-open .mm__nav a:nth-child(2) { transition-delay: .2s; }
.menu-open .mm__nav a:nth-child(3) { transition-delay: .25s; }
.menu-open .mm__nav a:nth-child(4) { transition-delay: .3s; }
.menu-open .mm__nav a:nth-child(5) { transition-delay: .35s; }
.menu-open .mm__nav a:nth-child(6) { transition-delay: .4s; }
.mm__onder { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 20px; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease) .4s, transform .7s var(--ease) .4s; }
.menu-open .mm__onder { opacity: 1; transform: none; }
.mm__knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm__knoppen .btn { padding: 0 16px; }
.mm__contact { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.mm__contact a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.mm__status { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .72); }
body.menu-open, body.modal-open { overflow: hidden; }

/* ---- Knoppen -------------------------------------------------------------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--r-pill); border: 1.5px solid var(--c-blue); background: var(--c-blue); color: #fff; font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .5s var(--ease), border-color .5s var(--ease), transform .4s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-navy); transform: translateY(101%); transition: transform .55s var(--ease); }
.btn:hover { color: #fff; border-color: var(--c-navy); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(.97); }
.btn .ar { flex: none; transition: transform .5s var(--ease); }
.btn:hover .ar { transform: translateX(5px); }
.btn:hover .ar-dl { transform: translateY(3px); }
.btn:hover .ar-l { transform: translateX(-5px); }
.btn-o { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn-o::before { background: var(--c-ink); }
.btn-o:hover { color: #fff; border-color: var(--c-ink); }
.btn-w { background: #fff; color: var(--c-navy); border-color: #fff; }
.btn-w::before { background: var(--c-navy); }
.btn-w:hover { color: #fff; border-color: var(--c-navy); }
.btn-g { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-g::before { background: #fff; }
.btn-g:hover { color: var(--c-navy); border-color: #fff; }
.btn-s { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-blok { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.btn[disabled]::before, .btn[aria-disabled="true"]::before { display: none; }
.btn[disabled]:active { transform: none; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy .ar { animation: busy 1s var(--ease) infinite alternate; }
@keyframes busy { from { transform: translateY(-3px); } to { transform: translateY(3px); } }

/* ---- Links ---------------------------------------------------------------- */
.lk { color: inherit; text-decoration: none; font-weight: 600; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat; transition: background-size .5s var(--ease), color .4s var(--ease); }
.lk:hover { color: inherit; background-size: 100% 2px; }
.lk .ar { display: inline-block; vertical-align: middle; transition: transform .5s var(--ease); }
.lk:hover .ar { transform: translateX(5px); }
/* Variant die standaard onderstreept is en bij hover naar rechts wegloopt */
.lk-u { background-size: 100% 2px; background-position: 100% 100%; }
.lk-u:hover { background-size: 0% 2px; }
.lb { border: 0; background-color: transparent; cursor: pointer; padding: 0 0 3px; font: 600 15px var(--font); text-align: left; }

/* ---- Filterchips (projecten, kennisbank) ---------------------------------- */
.chip { min-height: 46px; padding: 0 22px; border-radius: var(--r-pill); border: 1.5px solid var(--c-input); background: #fff; color: var(--c-ink); font: 500 15px var(--font); cursor: pointer; transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease); }
.chip:hover { border-color: var(--c-ink); }
.chip:active { transform: scale(.96); }
.chip.on { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.chip .c { display: inline-block; margin-left: 8px; font-size: 12px; opacity: .6; }

/* ---- Kaarten (cases en artikelen) ------------------------------------------ */
.card { display: flex; flex-direction: column; gap: 18px; text-decoration: none; color: inherit; transition: transform .6s var(--ease); }
.card:hover { transform: translateY(-8px); color: inherit; }
.card .ph { position: relative; overflow: hidden; border-radius: 24px; background: var(--c-placeholder); isolation: isolate; }
.card .ph > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card:hover .ph > img { transform: scale(1.07); }
.card .tag { position: absolute; left: 20px; top: 20px; font-size: 13px; font-weight: 600; line-height: 1.2; padding: 7px 13px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); color: var(--c-ink); }
.card .pill { position: absolute; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pill); background: var(--c-blue); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; transform: translateY(160%); transition: transform .6s var(--ease); }
.card:hover .pill, .card:focus-visible .pill { transform: translateY(0); }
.card .ttl { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; transition: color .4s var(--ease); }
.card:hover .ttl { color: var(--c-blue); }
.card .sub { font-size: 15px; line-height: 1.5; }
.card .go { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--c-light); display: grid; place-items: center; transition: transform .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease); }
.card:hover .go { transform: rotate(-45deg); background: var(--c-blue); color: #fff; }
/* Kaart zonder link (project zonder eigen pagina): geen hover-beweging */
.card--stil, .card--stil:hover { transform: none; cursor: default; }
.card--stil:hover .ph > img { transform: none; }
.card--stil:hover .ttl { color: inherit; }
.card__rij { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.card__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Kennisbank-thumbnail zonder foto: gegenereerd uit categorie + trefwoord */
.card .ph.kb { border-radius: 22px; }
.kt { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: #fff; background: var(--c-blue); transition: transform .9s var(--ease); }
.kt.wd { background: var(--c-navy); }
.card:hover .kt { transform: scale(1.04); }
.kt .cat { position: relative; z-index: 1; align-self: flex-start; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(13, 34, 45, .16); }
.kt.wd .cat { background: rgba(255, 255, 255, .16); }
.kt .kw { position: relative; z-index: 1; font-size: 44px; font-weight: 800; letter-spacing: -.045em; line-height: .95; max-width: 80%; overflow-wrap: anywhere; hyphens: manual; }
.kt .m { position: absolute; transition: transform 1s var(--ease); }
.card:hover .kt .m { transform: rotate(-14deg) scale(1.1); }
.mo { right: -60px; top: -60px; width: 240px; height: 240px; }
.mo span { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); }
.mo .r1 { inset: 0; } .mo .r2 { inset: 22%; } .mo .r3 { inset: 41%; background: #fff; border: 0; }
.mw { right: -24px; bottom: -24px; width: 58%; aspect-ratio: 4 / 3; border: 2px solid rgba(255, 255, 255, .32); border-radius: 16px; }
.mw .bar { position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: rgba(255, 255, 255, .32); }
.mw .dt { position: absolute; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.mw .dt:nth-child(2) { left: 14px; } .mw .dt:nth-child(3) { left: 30px; } .mw .dt:nth-child(4) { left: 46px; }
.mw .blk { position: absolute; left: 16px; top: 48px; width: 46%; height: 30%; border-radius: 8px; background: var(--c-blue); }
.kt.xl { padding: 40px; }
.kt.xl .kw { font-size: clamp(72px, 9vw, 128px); }
.kt.xl .mo { width: 420px; height: 420px; right: -100px; top: -100px; }

/* Rasters */
.grid-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 44px 28px; }
.grid-art { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 48px 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }

/* ---- CTA-band (projecten, kennisbank, project) ----------------------------- */
.band { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; padding: 64px 56px; border-radius: 36px; background: var(--c-blue); color: #fff; }
.band__txt { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.band h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.05; letter-spacing: -.04em; }
.band p { font-size: 18px; color: rgba(255, 255, 255, .9); }
.band__knoppen { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
.band .shape { position: absolute; transition: transform 1s var(--ease); pointer-events: none; }
.band .shape--blok { right: -60px; top: -90px; width: 220px; height: 280px; border-radius: 22px; background: rgba(255, 255, 255, .12); }
.band .shape--ring { right: 22%; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); }
.band:hover .shape--blok { transform: rotate(24deg) scale(1.08); }
.band:hover .shape--ring { transform: rotate(24deg) scale(1.08); }

/* ---- Invoervelden ---------------------------------------------------------- */
.in-f { width: 100%; min-height: 54px; padding: 0 20px; border-radius: var(--r-input); border: 1.5px solid var(--c-input); background: #fff; font: 400 16px var(--font); color: var(--c-ink); outline: none; -webkit-appearance: none; appearance: none; transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease); }
.in-f:hover { border-color: var(--c-input-hover); }
.in-f:focus { border-color: var(--c-blue); box-shadow: 0 0 0 4px rgba(61, 115, 220, .18); }
.in-f::placeholder { color: #8a939d; }
textarea.in-f { padding: 16px 20px; min-height: 130px; resize: vertical; line-height: 1.5; }
.in-d { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.in-d::placeholder { color: rgba(255, 255, 255, .6); }
.in-d:hover { border-color: rgba(255, 255, 255, .5); }
.in-d:focus { border-color: var(--c-blue-light); box-shadow: 0 0 0 4px rgba(143, 176, 239, .22); }
.in-f[aria-invalid="true"] { border-color: var(--c-error); }
.in-d[aria-invalid="true"] { border-color: #f2a2a3; }
.veld { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
.veld-fout { font-size: 14px; font-weight: 500; color: var(--c-error); margin-top: -4px; }
.on-dark .veld-fout, .ftr .veld-fout { color: #f6b4b5; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Formulier-meldingen (succes / fout) */
.melding { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; font-size: 15px; line-height: 1.5; animation: fd .7s var(--ease) both; }
.melding[hidden] { display: none; }
.melding__ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.melding b { display: block; font-size: 16px; }
.melding--ok { background: rgba(61, 115, 220, .14); }
.melding--ok .melding__ic { background: var(--c-blue); color: #fff; }
.melding--fout { background: rgba(179, 45, 46, .12); }
.melding--fout .melding__ic { background: var(--c-error); color: #fff; }
.on-dark .melding--ok, .ftr .melding--ok { background: rgba(143, 176, 239, .16); color: #fff; }
.on-dark .melding--fout, .ftr .melding--fout { background: rgba(242, 162, 163, .16); color: #fff; }
.melding .ok-vink { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .7s var(--ease) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- Footer ----------------------------------------------------------------- */
.ftr { background: var(--c-navy); color: #fff; padding: 80px 0 32px; border-radius: 48px 48px 0 0; }
.ftr__in { display: flex; flex-direction: column; gap: 56px; }
.ftr__cta { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-end; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ftr__cta h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -.04em; max-width: 680px; }
.ftr__cta .hl { color: var(--c-blue-light); font-style: italic; }
.ftr__knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.ftr__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px; }
.ftr__kol { display: flex; flex-direction: column; gap: 14px; font-size: 15px; align-items: flex-start; }
.ftr__kol--merk { gap: 20px; }
.ftr__kol--merk img { height: 30px; width: 129px; }
.ftr__kol--merk p { line-height: 1.6; color: rgba(255, 255, 255, .72); }
.ftr__kop { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue-light); }
.ftr a.lk, .ftr button.ck-link, .ftr .lb { color: #fff; }
.ftr__plaats { color: rgba(255, 255, 255, .72); }
.ftr__nb { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.ftr__nb p { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.ftr__onder { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, .65); border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 26px; }
.ftr__juridisch { display: flex; gap: 22px; flex-wrap: wrap; }
.ftr__juridisch .lk { color: rgba(255, 255, 255, .8); font-weight: 500; }
.soc { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center; color: #fff; transition: background-color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
.soc:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; transform: rotate(-12deg); }

/* ---- Modal (downloads) ------------------------------------------------------ */
.ov { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.ov[hidden] { display: none; }
.bd { position: fixed; inset: 0; border: 0; padding: 0; background: rgba(13, 34, 45, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; animation: fd0 .5s var(--ease) both; }
.pnl { position: relative; width: 100%; max-width: 940px; margin: auto; background: #fff; border-radius: 32px; overflow: hidden; display: flex; flex-wrap: wrap; animation: pop .65s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
.ov.is-closing .bd { animation: fd0 .4s var(--ease) reverse both; }
.ov.is-closing .pnl { animation: popout .45s var(--ease) both; }
@keyframes popout { to { opacity: 0; transform: translateY(30px) scale(.97); } }
.pnl__beeld { position: relative; flex: 1 1 380px; min-height: 460px; overflow: hidden; background: var(--c-blue); transition: background-color .5s var(--ease); }
/* Foto vult het vlak tot 30px onder de bovenrand, onderaan flush */
.pnl__beeld img { position: absolute; top: 30px; bottom: 0; left: 0; right: 0; margin: 0 auto; width: auto; height: calc(100% - 30px); max-width: 100%; object-fit: contain; object-position: 50% 100%; animation: fd 1s var(--ease) .2s both; }
.pnl__body { flex: 1 1 340px; padding: 44px 40px; display: flex; flex-direction: column; gap: 20px; position: relative; }
.pnl__body h2 { font-size: 32px; line-height: 1.1; letter-spacing: -.035em; color: var(--c-black); padding-right: 48px; }
.pnl__body .klein { font-size: 13px; line-height: 1.5; }
.x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--c-light); cursor: pointer; display: grid; place-items: center; color: var(--c-ink); transition: transform .5s var(--ease), background-color .4s var(--ease); }
.x:hover { transform: rotate(90deg); background: #e6e9ed; }

/* ---- Responsive -------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav-l { gap: 16px; }
}
@media (max-width: 960px) {
  .nav-l { display: none !important; }
  .burger { display: inline-grid; }
}
@media (max-width: 860px) {
  .hide-m { display: none !important; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --section-y: 64px; --hdr-h: 76px; }
  body { font-size: 16px; }
  .lead { font-size: 18px; }
  .topbar__links { display: none; }
  .topbar__in { justify-content: center; }
  .hdr__in { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  @keyframes shrink { from { padding-top: 14px; padding-bottom: 14px; } to { padding-top: 8px; padding-bottom: 8px; } }
  .hdr__logo img { height: 26px; width: 112px; }
  .hdr__acties .btn-s { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .card .ttl { font-size: 21px; }
  .card .tag { left: 14px; top: 14px; }
  .card .pill { display: none; }
  .kt { padding: 20px; }
  .kt .kw { font-size: 38px; }
  .band { padding: 40px 28px; border-radius: 28px; }
  .band .shape--ring { right: -40px; }
  .ftr { padding: 64px 0 28px; border-radius: 32px 32px 0 0; }
  .ftr__in { gap: 44px; }
  .ftr__cta { padding-bottom: 44px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .ftr__kol--merk, .ftr__kol--nb { grid-column: 1 / -1; }
  .pnl { border-radius: 26px; }
  .pnl__beeld { min-height: 0; height: clamp(240px, 38vh, 330px); flex-basis: 100%; }
  .pnl__beeld img { top: 20px; height: calc(100% - 20px); }
  .pnl__body { padding: 28px 22px 26px; gap: 16px; }
  .pnl__body h2 { font-size: 26px; }
  .ov { padding: 12px; align-items: flex-end; }
}
.btn-cta-kort { display: none; }
@media (max-width: 420px) {
  .hdr__acties .btn-cta-tekst { display: none; }
  .hdr__acties .btn-cta-kort { display: inline; }
  .mm__knoppen { grid-template-columns: 1fr; }
}
@media (hover: none) {
  .card:hover { transform: none; }
}

/* ---- Minder beweging -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv.pre, .wm.pre, .clip.pre { opacity: 1; transform: none; clip-path: none; }
  .mm__nav a, .mm__onder { opacity: 1; transform: none; }
  .melding .ok-vink { stroke-dashoffset: 0; }
}

/* ---- Print ------------------------------------------------------------------ */
@media print {
  .topbar, .hdr, .ftr, .ov, .prog, .mm, .band { display: none !important; }
  .rv.pre, .wm.pre, .clip.pre { opacity: 1; transform: none; clip-path: none; }
}
.ftr.ftr--vlak { border-radius: 0; }

/* ---- Cookiebanner (partials/cookiebanner.njk, /assets/js/toestemming.js) ---- */
.ck { position: fixed; z-index: 85; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100% - 40px)); max-height: calc(100dvh - 40px); overflow-y: auto; display: grid; gap: 14px; padding: 24px; background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 22px; box-shadow: var(--sh-float); opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ck:not(.is-in) { pointer-events: none; }
.ck.is-in { opacity: 1; transform: none; }
.ck[hidden], .ck [hidden] { display: none; }
.ck__kop { font-size: 19px; line-height: 1.25; outline: none; }
.ck__tekst { font-size: 15px; line-height: 1.55; color: var(--c-muted); }
.ck__tekst .lk { color: var(--c-ink); }
.ck__keuzes { margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--c-line); display: grid; gap: 12px; }
.ck__keuze { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--c-muted); cursor: pointer; }
.ck__keuze b { display: block; color: var(--c-ink); }
.ck__keuze input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--c-blue); cursor: pointer; }
.ck__keuze input:disabled { cursor: default; }
.ck__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ck__knoppen .btn { flex: 1 1 150px; }
.ck__meer { background: none; border: 0; padding: 6px 2px; font: 600 15px/1.2 var(--font); color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ck__meer:hover { color: var(--c-blue-tekst); }
.ck-link { border: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; padding: 0 0 3px; background-color: transparent; }
@media (max-width: 600px) {
  .ck { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 20px; gap: 12px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } }

/* ---- Tabellen in artikelen en juridische teksten (Markdown, zie eleventy.config.js) ---- */
.tabel { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-line); border-radius: 16px; background-color: #fff;
  /* schaduw aan de kant waar nog meer tabel staat (verdwijnt als je tot het eind scrolt) */
  background-image: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)), radial-gradient(farthest-side at 0 50%, rgba(13, 34, 45, .18), transparent), radial-gradient(farthest-side at 100% 50%, rgba(13, 34, 45, .18), transparent);
  background-position: left center, right center, left center, right center; background-size: 48px 100%, 48px 100%, 16px 100%, 16px 100%; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; }
.tabel:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.tabel table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.tabel th, .tabel td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--c-line-soft); }
.tabel th { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); border-bottom-color: var(--c-line); }
.tabel tr:last-child td { border-bottom: 0; }
.tabel td:first-child { font-weight: 600; color: var(--c-black); }