/* ==================================================================
   ClearKlik ontwerpbasis 2026 (design refresh). Zie docs/design-refresh.md.

   Het enige gedeelde stylesheet van de site. Elke pagina heeft
   <html class="ck-refresh"> en laadt alleen dit bestand, plus hooguit
   een kleine inline <style> voor wat echt bij die pagina hoort.

   Elke regel hangt aan html.ck-refresh (CSS nesting), zodat externe
   embeds of een pagina zonder die klasse er niets van merken.

   Lagen: paginastijlen buiten een laag winnen altijd van deze basis.
   ================================================================== */
@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Vervangletter tot Bricolage geladen is, op dezelfde breedte gezet, zodat tekst niet verspringt
   bij het wisselen. Arial voor Windows, macOS en iOS; Roboto voor Android. Gemeten op 17 px
   (lopende tekst) en op 36 tot 60 px (koppen): Bricolage is bij grote corpsen smaller. */
@font-face {
  font-family: 'Bricolage Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 104.6%; ascent-override: 88.9%; descent-override: 25.8%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage Fallback R';
  src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 105.4%; ascent-override: 88.2%; descent-override: 25.6%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage Fallback Kop';
  src: local('Arial'), local('ArialMT');
  size-adjust: 95%; ascent-override: 97.9%; descent-override: 28.4%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage Fallback Kop R';
  src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 102.5%; ascent-override: 90.7%; descent-override: 26.3%; line-gap-override: 0%;
}
/* Labels in hoofdletters (klein, vet, gespatieerd): daar is Bricolage juist smaller dan Arial */
@font-face {
  font-family: 'Bricolage Fallback Label';
  src: local('Arial'), local('ArialMT');
  size-adjust: 97.4%; ascent-override: 95.5%; descent-override: 27.7%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage Fallback Label R';
  src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 103.9%; ascent-override: 89.5%; descent-override: 26%; line-gap-override: 0%;
}

/* ---------------------------------------------------------------- */
@layer tokens {
  :root.ck-refresh {
    /* Merkkleuren: ongewijzigd ten opzichte van de live site */
    --ink: #22102f;
    --ink-2: #4b3a5a;
    --ink-3: #75668a;
    --violet: #8b40f0;
    --violet-d: #6a24d0;
    --plum: #b43ad8;
    --pink: #e83e9c;
    --pink-d: #c41f7c;
    --lilac: #efe6fd;
    --blush: #fde7f2;
    --paper: #fcfaff;
    --white: #ffffff;
    --line: rgba(34, 16, 47, .12);

    /* Rollen. Contrast gemeten per combinatie, zie docs/design-refresh.md */
    --bg: var(--paper);
    --surface: var(--white);
    --text: var(--ink);              /* 17.1:1 op paper */
    --text-2: var(--ink-2);          /* lopende tekst, 9.9:1 */
    --text-3: var(--ink-3);          /* bijschriften op paper/wit (5.0:1). Niet op lilac/blush: daar --text-2 */
    --accent: var(--violet);         /* knoppen, focus, merktekens. Witte tekst erop 5.1:1 */
    --accent-text: var(--violet-d);  /* violette tekst en links, 7.3:1 */
    --spark: var(--pink);            /* alleen tekens en grote koppen, nooit lopende tekst (3.6:1) */
    --spark-text: var(--pink-d);     /* roze tekst, 5.3:1 */
    --line-strong: rgba(34, 16, 47, .26);
    --line-field: rgba(34, 16, 47, .5);  /* rand van invoervelden en vinkjes: 3.4:1 op wit en paper (WCAG 1.4.11) */
    --field-lilac: var(--lilac);     /* rustige kleurvlakken achter projectbeelden */
    --field-blush: var(--blush);
    --field-ink: var(--ink);

    /* Op donker (ink) */
    --on-dark: #ffffff;
    --on-dark-2: rgba(255, 255, 255, .72);   /* 9.0:1 */
    --on-dark-accent: #cdb2fb;               /* violet als tekst op ink, 9.6:1 */
    --line-dark: rgba(255, 255, 255, .16);

    /* Lettertype */
    --font: 'Bricolage Grotesque', 'Bricolage Fallback', 'Bricolage Fallback R', system-ui, sans-serif;
    --font-heading: 'Bricolage Grotesque', 'Bricolage Fallback Kop', 'Bricolage Fallback Kop R', system-ui, sans-serif;
    --font-label: 'Bricolage Grotesque', 'Bricolage Fallback Label', 'Bricolage Fallback Label R', system-ui, sans-serif;

    /* Typeschaal: vloeiend tussen 360px en 1440px breed */
    --step--1: clamp(.8125rem, .79rem + .1vw, .875rem);   /* 13 tot 14 */
    --step-0:  clamp(1rem, .97rem + .14vw, 1.0625rem);     /* 16 tot 17 */
    --step-1:  clamp(1.125rem, 1.07rem + .28vw, 1.3125rem);/* 18 tot 21 */
    --step-2:  clamp(1.375rem, 1.24rem + .6vw, 1.75rem);   /* 22 tot 28 */
    --step-3:  clamp(1.75rem, 1.47rem + 1.25vw, 2.625rem); /* 28 tot 42 */
    --step-4:  clamp(2.25rem, 1.75rem + 2.2vw, 3.75rem);   /* 36 tot 60 */
    --step-5:  clamp(2.625rem, 1.8rem + 3.65vw, 5.25rem);  /* 42 tot 84 */

    --weight-display: 560;
    --weight-strong: 700;
    --track-display: -0.04em;
    --track-heading: -0.03em;
    --leading-display: 1;
    --leading-heading: 1.08;
    --leading-body: 1.6;

    /* Leesbreedte */
    --measure: 62ch;
    --measure-narrow: 44ch;
    --measure-heading: 18ch;

    /* Ruimte: vloeiend */
    --space-3xs: clamp(4px, .3vw, 6px);
    --space-2xs: clamp(8px, .6vw, 10px);
    --space-xs: clamp(12px, 1vw, 16px);
    --space-s: clamp(16px, 1.6vw, 24px);
    --space-m: clamp(24px, 2.6vw, 40px);
    --space-l: clamp(36px, 4.2vw, 64px);
    --space-xl: clamp(56px, 7vw, 104px);
    --space-section: clamp(72px, 9vw, 128px);

    /* Layout */
    --max: 1320px;
    --max-prose: 760px;
    --gutter: clamp(16px, 4vw, 56px);
    --gap: clamp(16px, 2.4vw, 32px);
    --gap-l: clamp(24px, 4vw, 64px);
    --nav-h: 72px;

    /* Randen en hoeken: dunne lijnen, kleine radius */
    --border: 1px solid var(--line);
    --border-strong: 1px solid var(--line-strong);
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-pill: 999px;
    --shadow-media: 0 1px 2px rgba(34, 16, 47, .06), 0 18px 40px -28px rgba(34, 16, 47, .35);

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

    /* Beweging */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: 150ms;
    --dur-2: 280ms;
    --dur-3: 600ms;
  }
  @media (prefers-reduced-motion: reduce) {
    :root.ck-refresh { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  }
}

/* ---------------------------------------------------------------- */
@layer reset {
  :root.ck-refresh { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .ck-refresh {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    img, picture, video, svg { display: block; max-width: 100%; height: auto; }
    input, button, textarea, select { font: inherit; color: inherit; }
    button { cursor: pointer; }
    ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  }
}

/* ---------------------------------------------------------------- */
@layer base {
  :root.ck-refresh { scroll-padding-top: calc(var(--nav-h) + 24px); }
  @media (prefers-reduced-motion: no-preference) { :root.ck-refresh { scroll-behavior: smooth; } }
  .ck-refresh {
  body {
    font-family: var(--font); font-size: var(--step-0); line-height: var(--leading-body);
    color: var(--text); background: var(--bg);
    /* Lange samenstellingen (huwelijksuitnodigingen, maatwerkplatform) breken bij 200% tekstzoom liever dan dat ze overlopen.
       anywhere en niet break-word: alleen anywhere telt mee voor de minimale breedte van raster- en flexkolommen. */
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--lilac); color: var(--ink); }

  h1, h2, h3, h4 { color: var(--text); font-weight: var(--weight-display); text-wrap: balance;
    /* Bij 200% tekstzoom op een smal scherm past een lang woord soms niet: dan breken in plaats van overlopen */
    overflow-wrap: anywhere; }
  h1, h2 { font-family: var(--font-heading); }
  h1 { font-size: var(--step-5); line-height: var(--leading-display); letter-spacing: var(--track-display); }
  h2 { font-size: var(--step-4); line-height: var(--leading-heading); letter-spacing: var(--track-heading); }
  h3 { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.02em; }
  h4 { font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; }
  p, li { text-wrap: pretty; }
  p { color: var(--text-2); }
  strong, b { font-weight: var(--weight-strong); color: var(--text); }

  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
  #main:focus { outline: none; }

  .skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 2000;
    padding: 10px 16px; border-radius: var(--radius-s);
    background: var(--ink); color: #fff; font-weight: 700;
    transform: translateY(calc(-100% - 24px)); transition: transform var(--dur-2) var(--ease-out);
  }
  .skip-link:focus { transform: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  }
}

/* ---------------------------------------------------------------- */
@layer layout {
  .ck-refresh {
  /* Container. .shell--prose voor lange teksten. */
  .shell { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .shell--prose { width: min(var(--max-prose), 100% - 2 * var(--gutter)); }

  /* Sectie. Secties verschillen in compositie; een achtergrond is de uitzondering. */
  .block { padding-block: var(--space-section); }
  .block--tight { padding-block: var(--space-xl); }
  .block--ruled { border-top: var(--border); }
  .block--dark { background: var(--ink); color: var(--on-dark); --text: var(--on-dark); --text-2: var(--on-dark-2); --text-3: var(--on-dark-2); --accent-text: var(--on-dark-accent); --line: var(--line-dark); --focus-ring: 2px solid var(--on-dark-accent); }

  /* Kop van een sectie: titel links, optionele intro of link rechts */
  .block-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-s) var(--gap-l); margin-bottom: var(--space-l); }
  .block-head > :is(h1, h2) { max-width: var(--measure-heading); }
  .block-head > p { max-width: var(--measure-narrow); }
  @media (min-width: 900px) {
    .block-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  }

  /* Raster. --min bepaalt de kleinste kolom; het raster telt zelf. */
  .grid > * { min-width: 0; }
    .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr)); }
  .grid--2 { --min: 380px; }
  .grid--3 { --min: 280px; }
  .grid--4 { --min: 220px; }

  /* Asymmetrische tweedeling, 5/7 of 7/5 */
  .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-l); align-items: start; }
  @media (min-width: 900px) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .split--center { align-items: center; }
  }

  .stack > * + * { margin-top: var(--stack, var(--space-s)); }
  .measure { max-width: var(--measure); }
  }
}

/* ---------------------------------------------------------------- */
@layer components {
  .ck-refresh {
  /* ---- Typografie ---- */
  .display { font-size: var(--step-5); line-height: var(--leading-display); letter-spacing: var(--track-display); font-weight: var(--weight-display); max-width: 16ch; }
  .display .line { display: block; }
  /* Tweekleurige kop: het tweede deel rustiger */
  .tone { color: var(--text-3); }
  .lead { font-size: var(--step-1); line-height: 1.55; color: var(--text-2); max-width: var(--measure-narrow); }
  .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--step--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-label); color: var(--text-3); }
  .meta > * + *::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 14px; border-radius: 50%; background: var(--spark); vertical-align: middle; }
  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: 1em; }
  .prose :is(h2, h3) { margin-top: 1.6em; }
  .prose h2 { font-size: var(--step-3); }
  .prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
  .prose a:hover { text-decoration-thickness: 2px; }
  .prose ul, .prose ol { padding-left: 1.2em; color: var(--text-2); }
  .prose li + li { margin-top: .4em; }

  /* ---- Knoppen: rechthoekig met kleine radius, geen schaduw ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--radius-s);
    font: 650 var(--step-0)/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer;
    background: var(--btn-bg, var(--ink)); color: var(--btn-fg, #fff); box-shadow: inset 0 0 0 1px var(--btn-edge, transparent);
    transition: background-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);
  }
  .btn:hover { background: var(--btn-bg-hover, #3a2250); color: var(--btn-fg-hover, var(--btn-fg, #fff)); }
  .btn .arrow { transition: transform var(--dur-2) var(--ease-out); }
  .btn:hover .arrow { transform: translateX(3px); }
  .btn-primary { --btn-bg: var(--violet); --btn-bg-hover: var(--violet-d); }
  .btn-dark { --btn-bg: var(--ink); --btn-bg-hover: #3a2250; }
  .btn-line { --btn-bg: transparent; --btn-fg: var(--text); --btn-edge: var(--line-strong); --btn-bg-hover: var(--ink); --btn-fg-hover: #fff; }
  .btn-light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bg-hover: var(--lilac); }
  .block--dark .btn-line { --btn-edge: rgba(255,255,255,.4); --btn-bg-hover: #fff; --btn-fg-hover: var(--ink); }
  .btn-lg { min-height: 56px; padding: 16px 28px; font-size: var(--step-1); }
  /* Smal scherm: grote knoppen overal even groot (hero, afsluiter, formulier), zodat de tekst op één regel past */
  @media (max-width: 520px) { .btn-lg { padding-inline: 16px; font-size: var(--step-0); } }

  /* ---- Tekstlinks ---- */
  .link { color: var(--accent-text); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-thickness var(--dur-1); }
  .link:hover { text-decoration-thickness: 2px; }
  .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--text); padding-block: 6px; border-bottom: 1px solid var(--line-strong); transition: border-color var(--dur-1), gap var(--dur-2) var(--ease-out); }
  .link-arrow:hover { border-color: currentColor; gap: 12px; }

  /* ---- Lijsten met dunne lijnen ---- */
  .rule-list { list-style: none; padding: 0; border-top: var(--border); }
  .rule-list > li { padding-block: var(--space-s); border-bottom: var(--border); }
  .rule-list--cols > li { display: grid; gap: 6px var(--gap); }
  @media (min-width: 760px) { .rule-list--cols > li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
  .rule-list h3 { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; }

  /* ---- Beeld ---- */
  .media { border-radius: var(--radius-s); overflow: hidden; background: var(--lilac); }
  .media img { width: 100%; height: 100%; object-fit: cover; }

  /* ---- Project: groot beeld op een rustig kleurvlak, tekst eronder ---- */
  .project { display: grid; gap: var(--space-s); }
  .project-field {
    --field: var(--field-lilac);
    position: relative; display: block; overflow: hidden;
    aspect-ratio: var(--ratio, 16 / 10); border-radius: var(--radius-s);
    background: var(--field); padding: var(--inset, clamp(20px, 6%, 72px)) var(--inset, clamp(20px, 6%, 72px)) 0;
  }
  .project-field.is-blush { --field: var(--field-blush); }
  .project-field.is-ink { --field: var(--field-ink); }
  .project-field.is-paper { --field: #f3eef9; }
  .project-field img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0; box-shadow: var(--shadow-media);
    transition: transform var(--dur-3) var(--ease-out);
  }
  @media (hover: hover) { a.project-field:hover img { transform: translateY(-6px); } }
  .project-body { display: grid; gap: var(--space-2xs); }
  .project-title { font-size: var(--step-2); font-weight: var(--weight-display); letter-spacing: -0.02em; line-height: 1.2; max-width: 30ch; }
  .project-title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-2) var(--ease-out); }
  .project-title a:hover { background-size: 100% 1px; }
  .project-body p { max-width: var(--measure-narrow); }
  .project--wide .project-field { --ratio: 21 / 10; }
  @media (max-width: 640px) { .project--wide .project-field { --ratio: 4 / 3; } }
  .project-grid { display: grid; gap: var(--space-xl) var(--gap); }
  @media (min-width: 900px) { .project-grid { grid-template-columns: 1fr 1fr; } }

  /* ---- Kerncijfer ---- */
  .stat { display: grid; gap: 4px; padding-top: var(--space-xs); border-top: var(--border); }
  .stat-value { font-size: var(--step-4); font-weight: var(--weight-display); letter-spacing: var(--track-display); line-height: 1; color: var(--text); }
  .stat-label { font-size: var(--step--1); color: var(--text-3); }

  /* ---- Veelgestelde vragen: <details>, ook zonder JS bruikbaar ---- */
  .faq { border-top: var(--border); }
  .faq details { border-bottom: var(--border); }
  .faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
    padding-block: var(--space-s); cursor: pointer; list-style: none;
    font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; color: var(--text);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ''; flex: none; width: 14px; height: 14px;
    background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq summary:hover { color: var(--accent-text); }
  .faq .answer { padding-bottom: var(--space-s); max-width: var(--measure); }
  .faq .answer > * + * { margin-top: .8em; }

  /* ---- Formulieren ---- */
  .field { display: grid; gap: 8px; }
  .field + .field { margin-top: var(--space-s); }
  .field label, .field legend { font-size: var(--step--1); font-weight: 700; color: var(--text); }
  .field .hint { font-size: var(--step--1); color: var(--text-3); }
  .input {
    width: 100%; min-height: 48px; padding: 12px 14px;
    border: 1px solid var(--line-field); border-radius: var(--radius-s); background: var(--surface); color: var(--text);
    transition: border-color var(--dur-1), box-shadow var(--dur-1);
  }
  textarea.input { min-height: 140px; resize: vertical; }
  .input::placeholder { color: var(--ink-3); }
  .input:hover { border-color: rgba(34, 16, 47, .7); }
  .input:focus-visible { outline: none; border-color: var(--violet-d); box-shadow: 0 0 0 3px rgba(139, 64, 240, .22); }
  .input[aria-invalid="true"] { border-color: var(--pink-d); }
  .form-status { font-size: var(--step--1); color: var(--text-2); min-height: 1.5em; }

  /* ---- Afsluiter: één donker vlak, geen gloed ---- */
  .cta-band { grid-template-columns: minmax(0, 1fr); background: var(--ink); color: var(--on-dark); border-radius: var(--radius-m); padding: var(--space-xl) var(--space-l); display: grid; gap: var(--space-m); }
  .cta-band h2 { color: var(--on-dark); max-width: 14ch; }
  .cta-band p { color: var(--on-dark-2); max-width: var(--measure-narrow); }
  .cta-band :focus-visible { outline-color: var(--on-dark-accent); }
  .cta-band .btn-line { --btn-fg: #fff; --btn-edge: rgba(255,255,255,.4); --btn-bg-hover: #fff; --btn-fg-hover: var(--ink); }
  /* Dot Field (js/dot-field.js): canvas achter de inhoud van de afsluiter */
  .cta-band.has-dot-field { position: relative; isolation: isolate; overflow: hidden; }
  .cta-band.has-dot-field > :not(.dot-field) { position: relative; z-index: 1; }
  .dot-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .dot-field__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

  /* Shape Grid (js/shape-grid.js): bewegend raster achter de homepagehero */
  .has-shape-grid { position: relative; isolation: isolate; overflow: hidden; }
  .has-shape-grid > :not(.shape-grid) { position: relative; z-index: 1; }
  .shape-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .shape-grid__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  @media (min-width: 900px) { .cta-band { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
  @media (max-width: 520px) { .cta-band { padding: var(--space-l) var(--space-s); } .cta-band .btn { width: 100%; } }

  /* ==== Dienstpagina's (website, webshop, AI Automation) ==== */

  /* ---- Paginahero: typografie, geen beeld. Zelfde opbouw als de homepagehero ---- */
  .page-hero { padding-block: var(--space-l) var(--space-xl); }
  .page-hero > .shell > .meta { margin-bottom: var(--space-s); }
  /* 34 px op 320 px breed: het langste woord ('bedrijfswebsite') past dan nog zonder te breken */
  .page-hero-title { font-size: clamp(2.125rem, 1.1rem + 4.6vw, 5rem); max-width: 17ch; }
  .page-hero-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m) var(--gap-l); margin-top: var(--space-m); }
  .page-hero-lead { font-size: var(--step-1); line-height: 1.55; max-width: 50ch; }
  .page-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .page-hero-note { margin-top: var(--space-s); font-size: var(--step--1); color: var(--text-3); }
  @media (min-width: 1100px) {
    .page-hero-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .page-hero-actions { flex-wrap: nowrap; }
  }
  @media (max-width: 520px) { .page-hero-actions .btn { width: 100%; } }

  /* ---- Lijst met vinkjes. --dash: tegenovergestelde lijst ---- */
  .ticks { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ticks > li { position: relative; padding-left: 28px; color: var(--text-2); }
  .ticks > li::before { content: ''; position: absolute; left: 2px; top: .52em; width: 12px; height: 6px; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg); }
  .ticks--dash > li::before { top: .8em; height: 0; border-left: 0; border-bottom-color: var(--text-3); transform: none; }
  .ticks strong { font-weight: 650; }

  /* ---- Redactioneel raster: titel en korte uitleg tussen dunne lijnen, geen kaarten ---- */
  .index-grid { list-style: none; padding: 0; display: grid; column-gap: var(--gap-l); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr)); counter-reset: idx; }
  .index-grid > li { counter-increment: idx; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding-block: var(--space-s) var(--space-m); border-top: var(--border); }
  .index-grid--numbered > li::before { content: counter(idx, decimal-leading-zero); margin-bottom: 4px; font-size: var(--step--1); font-weight: 650; color: var(--accent-text); font-variant-numeric: tabular-nums; }
  .index-grid h3 { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
  .index-grid p { max-width: var(--measure-narrow); }

  /* ---- Pakketvergelijking. Subgrid lijnt naam, prijs, doelgroep, inhoud en knop over de kolommen uit.
     Dunne lijnen tussen de kolommen (achtergrond door de 1px-gap), geen kaarten. ---- */
  .plans { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr)); background: var(--line); border-block: var(--border); }
  .plan { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: var(--space-m) var(--space-m) var(--space-m); background: var(--bg); }
  .plan-name { font-size: var(--step--1); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-label); color: var(--accent-text); }
  .plan-price { margin-top: var(--space-2xs); font-size: var(--step-4); font-weight: var(--weight-display); letter-spacing: var(--track-heading); line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .plan-price small { display: block; margin-top: 8px; font-size: var(--step--1); font-weight: 550; letter-spacing: 0; color: var(--text-3); }
  .plan-fit { margin-top: var(--space-xs); padding-bottom: var(--space-s); border-bottom: var(--border); color: var(--text); font-weight: 550; max-width: 40ch; }
  .plan-body { padding-block: var(--space-s) var(--space-m); }
  .plan-body > p { margin-bottom: 10px; font-weight: 650; color: var(--text); }
  .plan-body .ticks .is-base { color: var(--text-3); }
  .plan-cta { align-self: end; }
  .plan-cta .btn { width: 100%; }
  /* Aanbevolen pakket: rustig kleurvlak, geen donker blok. Op lilac is --text-3 te licht voor kleine tekst */
  .plan--featured { background: var(--lilac); --text-3: var(--ink-2); }
  .plans-note { margin-top: var(--space-s); font-size: var(--step--1); color: var(--text-2); max-width: var(--measure); }
  .plans-note + .plans-note { margin-top: 6px; }
  @media (max-width: 640px) { .plan { padding-inline: 0; } .plan--featured { padding-inline: var(--space-s); } }

  /* ---- Kosten of kenmerken met waarde: label, bedrag, uitleg ---- */
  .spec-list { border-top: var(--border); }
  .spec-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--gap); padding-block: var(--space-xs); border-bottom: var(--border); }
  .spec-list dt { font-weight: 650; color: var(--text); }
  .spec-list dd { color: var(--text-2); }
  .spec-list .spec-value { font-weight: 650; color: var(--accent-text); font-variant-numeric: tabular-nums; }
  @media (min-width: 760px) {
    .spec-list > div { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); align-items: baseline; }
    .spec-list--2 > div { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  }

  /* ---- Eén rustige rij tussen dunne lijnen (maatwerk, aanvullend aanbod), uitgelijnd op de 5/7-verdeling ---- */
  .note-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--gap-l); padding-block: var(--space-m); border-block: var(--border); }
  .note-row h3 { font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.2; }
  .note-row p { max-width: var(--measure); }
  .note-row .link-arrow { justify-self: start; margin-top: 6px; }
  @media (min-width: 900px) { .note-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

  /* ---- Stappen: genummerde rijen. --wide: titel, uitleg en 'van jou' naast elkaar op breed scherm.
     --cols: korte stappen als kolommen op breed scherm ---- */
  .steps { list-style: none; padding: 0; border-top: var(--border); }
  .step { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 4px var(--gap); padding-block: var(--space-s); border-bottom: var(--border); }
  .step-n { grid-row: span var(--step-rows, 2); font-size: var(--step-1); font-weight: 650; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1.3; }
  .step h3 { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; }
  .step p { max-width: var(--measure-narrow); }
  .step-when { display: block; margin-top: 2px; font-size: var(--step--1); font-weight: 550; letter-spacing: 0; color: var(--text-3); }
  .step .step-you { font-size: var(--step--1); color: var(--text-2); }
  .step-you strong { font-weight: 650; }
  .steps--wide .step, .steps--cols .step { --step-rows: 3; }
  @media (min-width: 1000px) {
    .steps--wide .step { grid-template-columns: 3.2em minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); align-items: baseline; padding-block: var(--space-m); }
    .steps--wide .step-n { grid-row: auto; }
    .steps--cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); border-top: 0; }
    .steps--cols .step { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding-block: var(--space-s) 0; border-bottom: 0; border-top: var(--border-strong); }
    .steps--cols .step-n { grid-row: auto; margin-bottom: var(--space-2xs); font-size: var(--step-3); font-weight: var(--weight-display); letter-spacing: var(--track-heading); line-height: 1; }
    .steps--cols .step-you { margin-top: 4px; }
  }

  /* ---- Voor-en-na-schuif (main.js zet --ba-pos). Werkt met slepen, tikken, pijltjestoetsen en knoppen ---- */
  .ba-slider { --ba-pos: 50%; position: relative; overflow: hidden; aspect-ratio: var(--ratio, 1900 / 940); border-radius: var(--radius-s); background: var(--field-lilac); touch-action: pan-y; }
  .ba-slider-media { position: absolute; inset: 0; }
  .ba-slider-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ba-focus, top center); pointer-events: none; }
  .ba-slider-before { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
  .ba-slider-line { position: absolute; inset-block: 0; left: var(--ba-pos); width: 2px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(34, 16, 47, .14); pointer-events: none; }
  .ba-slider-line::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(34, 16, 47, .16), 0 6px 16px -6px rgba(34, 16, 47, .4); }
  .ba-slider-line::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 10px; transform: translate(-50%, -50%);
    background: linear-gradient(135deg, transparent 45%, var(--ink) 45% 60%, transparent 60%) left / 5px 5px no-repeat, linear-gradient(45deg, transparent 45%, var(--ink) 45% 60%, transparent 60%) left bottom / 5px 5px no-repeat,
                linear-gradient(-135deg, transparent 45%, var(--ink) 45% 60%, transparent 60%) right top / 5px 5px no-repeat, linear-gradient(-45deg, transparent 45%, var(--ink) 45% 60%, transparent 60%) right bottom / 5px 5px no-repeat; }
  .ba-slider:has(.ba-slider-range:focus-visible) .ba-slider-line::before { outline: var(--focus-ring); outline-offset: 3px; }
  /* Labels zitten in hun eigen laag: 'Oud' verdwijnt als de nieuwe homepage het hele beeld vult en omgekeerd */
  .ba-slider-tag { position: absolute; bottom: 12px; padding: 4px 10px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, .95); color: var(--ink); font-size: var(--step--1); font-weight: 650; line-height: 1.4; }
  .ba-slider-tag-before { left: 12px; }
  .ba-slider-tag-after { right: 12px; }
  .ba-slider-range { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; }
  .ba-slider-range:focus-visible { outline: none; }
  .ba-slider-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
  .ba-slider-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; }
  .ba-slider-range::-moz-range-track { height: 100%; background: transparent; border: 0; }
  .ba-slider-range::-moz-range-thumb { width: 44px; height: 100%; background: transparent; border: 0; }

  /* ---- Segmentknoppen (bv. Oud / Vergelijk / Nieuw), aria-pressed geeft de stand ---- */
  .segmented { display: inline-flex; flex-wrap: wrap; gap: 6px; }
  .segmented button { min-height: 44px; padding: 8px 16px; border: var(--border-strong); border-radius: var(--radius-s); background: transparent; color: var(--text); font-weight: 650; font-size: var(--step--1); transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
  .segmented button:hover { border-color: var(--ink); }
  .segmented button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

  /* ==== Werk: resultaten en projectpagina's ==== */

  /* ---- Projectkop: terug naar het overzicht, naam en opdracht, kerngegevens ---- */
  .back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--step--1); font-weight: 650; color: var(--text-2); }
  .back-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
  .case-hero { padding-block: var(--space-s) var(--space-l); }
  .case-hero .meta { margin-block: var(--space-s) var(--space-xs); }
  .case-title { font-size: clamp(2.125rem, 1.1rem + 4.6vw, 5rem); max-width: 18ch; }
  .case-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m) var(--gap-l); margin-top: var(--space-m); }
  .case-intro .lead { max-width: 52ch; }
  @media (min-width: 900px) { .case-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
  .case-facts { border-top: var(--border); }
  .case-facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap); padding-block: 10px; border-bottom: var(--border); }
  .case-facts dt { padding-top: 3px; font-size: var(--step--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-label); color: var(--text-3); }
  .case-facts dd { color: var(--text); font-weight: 550; }
  .case-facts a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .case-facts a:hover { text-decoration-thickness: 2px; }

  /* ---- Openingsbeeld: fotomockup van 2400 x 960. Smal scherm: hoger beeld, midden van de foto ---- */
  .case-cover { overflow: hidden; aspect-ratio: 2400 / 960; border-radius: var(--radius-s); background: var(--lilac); }
  .case-cover img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 640px) { .case-cover { aspect-ratio: 16 / 10; } }

  /* ---- Screenshot volledig zichtbaar op een kleurvlak (geen uitsnede, geen link) ---- */
  .shot { --field: var(--field-lilac); padding: clamp(12px, 5%, 64px); border-radius: var(--radius-s); background: var(--field); }
  .shot.is-blush { --field: var(--field-blush); }
  .shot.is-ink { --field: var(--field-ink); }
  .shot.is-paper { --field: #f3eef9; }
  .shot img { width: 100%; border-radius: var(--radius-xs); box-shadow: var(--shadow-media); }
  .shot--small img { width: auto; max-width: 100%; margin-inline: auto; }

  /* ---- Beelden met bijschrift: beeld over de volle breedte, tekst eronder op de 5/7-verdeling ---- */
  .case-shots { display: grid; gap: var(--space-xl); }
  .case-shot { display: grid; gap: var(--space-s); }
  .case-shot figcaption { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px var(--gap-l); }
  .case-shot h3 { font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.2; }
  .case-shot figcaption p { max-width: var(--measure); }
  @media (min-width: 900px) { .case-shot figcaption { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

  /* ---- Projectkaart: titel van de kaart ---- */
  .project h2, .project h3 { font-size: var(--step-3); letter-spacing: var(--track-heading); line-height: 1.1; }
  .project .meta { margin-bottom: 2px; }
  .project .link-arrow { justify-self: start; margin-top: 4px; }

  /* ---- Antwoorden in de FAQ met links of lijsten ---- */
  .faq .answer a { color: var(--accent-text); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .faq .answer a:hover { text-decoration-thickness: 2px; }

  /* ---- Gedeeld door meerdere pagina's (stond eerder per pagina inline) ---- */
  .cta-small { font-size: var(--step--1); }
  .head-stack { display: grid; gap: var(--space-2xs); }
  .faq-side p { margin-top: var(--space-xs); max-width: 34ch; }
  /* Ander werk onderaan een project- of dienstpagina */
  .more-work .block-head { margin-bottom: var(--space-m); }
  .more-work .block-head h2 { font-size: var(--step-3); }
  .more-work .block-head .link-arrow { justify-self: start; }
  .more-work .project h3 { font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.2; }
  .more-work .project-field { --ratio: 16 / 9; --inset: clamp(14px, 5%, 48px); }
  .more-work .project-grid { gap: var(--space-l) var(--gap); }
  /* Projectpagina: wat we maakten, wat er opgeleverd is */
  .made .index-grid { --min: 240px; margin-top: var(--space-l); }
  .delivered .ticks { gap: 12px; }
  .delivered .link-arrow { margin-top: var(--space-s); }
  /* Vergelijking oud en nieuw (website laten maken, Atelier V) */
  .compare .segmented { width: 100%; }
  .compare .segmented button { flex: 1 1 0; padding-inline: 8px; }
  .compare .ba-slider { --ratio: 4 / 3; --ba-focus: 35% top; }
  .compare .ba-slider-tag { bottom: 8px; padding: 2px 8px; }
  .compare .ba-slider-tag-before { left: 8px; }
  .compare .ba-slider-tag-after { right: 8px; }
  .compare-hint { font-size: var(--step--1); color: var(--text-3); }

  /* ---- Formulieren: rij van twee velden, keuzelijst, honeypot ---- */
  .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-s) var(--gap); }
  @media (min-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .field .optional { font-weight: 550; color: var(--text-3); }
  select.input {
    appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2322102f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
  }
  fieldset.field { border: 0; padding: 0; min-width: 0; }
  fieldset.field > legend { padding: 0; margin-bottom: 8px; }
  /* Honeypot: buiten beeld, niet bereikbaar met Tab */
  .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* ---- Tabel: dunne lijnen, scrolt zelf op een smal scherm ---- */
  .table-wrap { overflow-x: auto; margin-block: 1.6em; border-top: var(--border-strong); }
  .table-wrap:focus-visible { outline-offset: 2px; }
  .data-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--step--1); line-height: 1.5; overflow-wrap: normal; }
  .data-table th { padding: 12px 14px 10px 0; text-align: left; vertical-align: bottom; font-weight: 650; letter-spacing: .02em; color: var(--text); border-bottom: var(--border-strong); }
  .data-table td { padding: 12px 14px 12px 0; vertical-align: top; color: var(--text-2); border-bottom: var(--border); }
  .data-table td:first-child { color: var(--text); font-weight: 550; }
  .data-table .verdict-works { color: var(--accent-text); font-weight: 650; }
  .data-table .verdict-no { color: var(--text-3); }
  .data-table .verdict-warn { color: var(--spark-text); font-weight: 650; }

  /* ==== Blog: overzicht, artikels, gerelateerde artikels ==== */

  /* ---- Artikelkaart (overzicht en gerelateerd). Hele kaart is één link ---- */
  .post-grid { display: grid; gap: var(--space-l) var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
  .post-card { display: grid; align-content: start; gap: var(--space-xs); color: inherit; }
  .post-thumb { overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-s); background: var(--lilac); }
  .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
  @media (hover: hover) { .post-card:hover .post-thumb img { transform: scale(1.02); } }
  .post-card h2, .post-card h3 { font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.2; }
  .post-card:hover :is(h2, h3) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
  .post-card p:not(.meta) { max-width: var(--measure-narrow); }
  .post-card--featured { gap: var(--space-s) var(--gap-l); }
  .post-card--featured h2 { font-size: var(--step-3); letter-spacing: var(--track-heading); line-height: 1.1; }
  @media (min-width: 900px) { .post-card--featured { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }

  /* ---- Kruimelpad ---- */
  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--step--1); color: var(--text-3); }
  .breadcrumb a { display: inline-block; padding-block: 10px; font-weight: 600; color: var(--text-2); }
  .breadcrumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }

  /* ---- Artikelkop en openingsbeeld ---- */
  .article-hero { padding-block: var(--space-xs) var(--space-l); }
  .article-title { margin-top: var(--space-s); font-size: clamp(2rem, 1.35rem + 2.9vw, 3.75rem); line-height: 1.04; letter-spacing: var(--track-heading); max-width: 22ch; }
  .article-hero .meta { margin-top: var(--space-s); }
  .article-cover { overflow: hidden; aspect-ratio: 16 / 9; max-height: 560px; width: 100%; border-radius: var(--radius-s); background: var(--lilac); }
  .article-cover img { width: 100%; height: 100%; object-fit: cover; }

  /* ---- Artikel: tekst links, inhoudstafel rechts (breed). Smal: inhoudstafel in de tekst ---- */
  .article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--gap-l); padding-block: var(--space-l) var(--space-section); }
  @media (min-width: 1000px) {
    .article-layout { grid-template-columns: minmax(0, 1fr) 280px; }
    .article-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); }
  }
  .article-content { max-width: 68ch; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.7; }
  .article-content > * + * { margin-top: 1.1em; }
  /* :where houdt deze basis zwak, zodat de componenten hieronder zonder !important winnen */
  .article-content :where(p, li) { color: var(--text-2); }
  .article-content > h2 { margin-top: 2.2em; font-size: var(--step-3); }
  .article-content > h3 { margin-top: 1.8em; font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
  .article-content > :is(h2, h3) + * { margin-top: .6em; }
  .article-content > :is(ul, ol) { padding-left: 1.2em; }
  .article-content li + li { margin-top: .45em; }
  .article-content li::marker { color: var(--accent-text); }
  .article-content :where(a:not(.btn)) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .article-content :where(a:not(.btn)):hover { text-decoration-thickness: 2px; }
  .article-content .divider { border: 0; border-top: var(--border); margin-block: 2.6em; }
  .article-content code { padding: .1em .35em; border-radius: var(--radius-xs); background: var(--lilac); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .88em; color: var(--text); }
  .article-content pre { overflow-x: auto; padding: 18px 20px; border-radius: var(--radius-s); background: var(--ink); color: var(--on-dark); font-size: var(--step--1); line-height: 1.7; }
  .article-content pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
  .article-content .code-comment { color: var(--on-dark-accent); }

  /* Wat je na dit artikel weet */
  .takeaways-box { padding-block: var(--space-s); border-block: var(--border-strong); }
  .takeaways-title { font-size: var(--step--1); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-label); color: var(--accent-text); }
  .takeaways-box ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 12px; font-size: var(--step-0); }
  .takeaways-box li { position: relative; padding-left: 28px; }
  .takeaways-box li + li { margin-top: 0; }
  .takeaways-box li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 12px; height: 6px; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg); }

  /* Inzicht tussen dunne lijnen, waarschuwing als rustig kleurvlak. Geen kaart, geen zijrand */
  .highlight-box { padding-block: var(--space-xs); border-block: var(--border); }
  .warning-box { padding: var(--space-xs) var(--space-s); border-radius: var(--radius-s); background: var(--blush); }
  .warning-box p { color: var(--ink-2); }
  .highlight-box > * + *, .warning-box > * + * { margin-top: .6em; }
  .pull-quote { padding-top: var(--space-xs); border-top: var(--border-strong); }
  .pull-quote p { font-size: var(--step-2); line-height: 1.35; letter-spacing: -0.01em; color: var(--text); }
  .pull-quote cite { display: block; margin-top: 8px; font-size: var(--step--1); font-style: normal; color: var(--text-3); }

  /* Drie prioriteiten naast elkaar (SEO voor webshops) */
  .priority-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--space-s) var(--gap); }
  .priority-item { display: grid; align-content: start; gap: 6px; padding-top: var(--space-xs); border-top: 2px solid var(--line-strong); }
  .priority-item.top { border-top-color: var(--accent); }
  .priority-item.mid { border-top-color: var(--spark); }
  .priority-icon { color: var(--accent-text); }
  .priority-icon svg { width: 28px; height: 28px; }
  .priority-item h3 { font-size: var(--step-0); font-weight: 650; letter-spacing: 0; }
  .priority-item p { font-size: var(--step--1); }

  /* Afzender onder het artikel */
  .author-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); align-items: start; margin-top: 2.6em; padding-block: var(--space-s); border-block: var(--border); font-size: var(--step-0); }
  .author-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: var(--step--1); letter-spacing: .04em; }
  .author-name { font-weight: 650; color: var(--text); }
  .author-role { font-size: var(--step--1); color: var(--text-3); }
  .author-bio { margin-top: 6px; font-size: var(--step--1); }
  .article-content > .faq { margin-top: var(--space-s); font-size: var(--step-0); }

  /* Inhoudstafel. Breed in de zijkolom, smal (.mobile-toc) na de kernpunten */
  .toc-title { margin-bottom: 8px; font-size: var(--step--1); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-label); color: var(--text-3); }
  .toc-list { list-style: none; padding: 0; border-left: var(--border); font-size: var(--step--1); line-height: 1.4; }
  .toc-list li + li { margin-top: 0; }
  .toc-list a { display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; color: var(--text-2); text-decoration: none; }
  .toc-list .toc-sub a { padding-left: 28px; color: var(--text-3); }
  .toc-list a:hover { color: var(--text); }
  .toc-list a.active { border-left-color: var(--accent); color: var(--text); font-weight: 650; }
  .mobile-toc { padding-block: var(--space-s); border-bottom: var(--border); }
  .mobile-toc .toc-list { border-left: 0; }
  .mobile-toc .toc-list a { margin-left: 0; padding-left: 0; }
  .mobile-toc .toc-list .toc-sub a { padding-left: 14px; }
  .sidebar-cta { margin-top: var(--space-m); padding-top: var(--space-s); border-top: var(--border-strong); }
  .sidebar-cta h2 { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
  .sidebar-cta p { margin-top: 8px; font-size: var(--step--1); }
  .sidebar-cta .btn { margin-top: var(--space-xs); width: 100%; }
  .inline-cta { padding-block: var(--space-s); border-block: var(--border-strong); }
  .inline-cta-title { font-weight: 650; color: var(--text); }
  .inline-cta .btn { margin-top: 12px; }
  @media (min-width: 1000px) {
    .mobile-toc, .inline-cta { display: none; }
  }
  @media (max-width: 999.98px) {
    .article-sidebar .toc-card { display: none; }
    .article-sidebar .sidebar-cta { margin-top: 0; }
    /* Artikel met een eigen CTA in de tekst: niet nog eens onderaan herhalen */
    .article-layout:has(.inline-cta) .sidebar-cta { display: none; }
  }

  /* ==== Juridische pagina's ==== */
  .legal-hero { padding-block: var(--space-l) var(--space-m); }
  .legal-hero h1 { font-size: var(--step-4); }
  .legal-hero .meta { margin-top: var(--space-s); }
  .legal { padding-block: var(--space-m) var(--space-section); border-top: var(--border); }
  .legal.prose h2 { font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.2; }
  .legal.prose h2:first-child { margin-top: 0; }
  .legal .table-wrap { margin-block: 1.4em; }

  /* ==== Toast (korte bevestiging, bv. checklist) ==== */
  .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 980; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--radius-s); background: var(--ink); color: #fff; font-size: var(--step--1); font-weight: 600; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }

  /* ---- Navigatie (main.js stuurt het mobiele menu) ----
     Markup: <header class="nav"><div class="nav-inner">
               a.wordmark, button.nav-toggle, nav.nav-links#nav-menu > ul > li > a, a.btn
             </div></header>
     De menuknop staat in de DOM vóór de links, zodat Tab na het openen meteen in het menu
     belandt; visueel staat hij rechts (order). De oude volgorde (ul.nav-links, a.btn,
     button.nav-toggle) wordt ook nog correct opgemaakt. */
  .nav { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--border); }
  .nav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--space-s); min-height: var(--nav-h); width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .wordmark { font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: var(--ink); }
  .wordmark b { color: var(--pink); font-weight: inherit; }
  .nav-links { display: flex; gap: 2px; list-style: none; padding: 0; margin-left: auto; }
  .nav-links > ul { display: flex; gap: 2px; list-style: none; padding: 0; }
  .nav-links a { display: block; padding: 10px 12px; font-weight: 550; color: var(--ink-2); border-radius: var(--radius-xs); transition: color var(--dur-1); }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--violet); border-radius: 0; }
  .nav .btn { min-height: 42px; padding: 10px 18px; }
  .nav-toggle { display: none; order: 3; flex: none; width: 44px; height: 44px; border: var(--border); border-radius: var(--radius-s); background: transparent; color: var(--ink); place-items: center; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1); }
  .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; }
  .nav-toggle span::before { top: -6px; }
  .nav-toggle span::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  @media (max-width: 860px) {
    .nav .btn { margin-left: auto; }
    .nav-toggle { display: grid; }
    /* Past het menu niet op het scherm (laag scherm, tekstzoom), dan scrolt het zelf: niets valt weg achter de rand */
    .nav-links { display: none; position: absolute; inset: 100% 0 auto; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 20px; max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-bottom: var(--border); box-shadow: 0 24px 40px -32px rgba(34, 16, 47, .35); }
    .nav-links > ul { flex-direction: column; gap: 0; }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 14px 0; font-size: var(--step-1); border-bottom: var(--border); border-radius: 0; }
    .nav-links a[aria-current="page"] { box-shadow: none; color: var(--accent-text); }
    /* Zonder JavaScript werkt de menuknop niet: dan staan de links als rij onder het woordmerk.
       De klasse js zet een inline script in de <head>, dus er verspringt niets bij het laden. */
    &:not(.js) .nav { position: relative; }  /* twee rijen: niet vast bovenaan, anders kost het een kwart van het scherm */
    &:not(.js) .nav-toggle { display: none; }
    &:not(.js) .nav-links { display: flex; position: static; order: 4; width: 100%; max-height: none; overflow: visible; padding: 0 0 8px; background: none; border: 0; box-shadow: none; }
    &:not(.js) .nav-links > ul { flex-direction: row; flex-wrap: wrap; gap: 0 20px; }
    &:not(.js) .nav-links a { padding: 10px 0; font-size: var(--step-0); border-bottom: 0; }
  }

  /* ---- Footer: zelfde markup als nu ---- */
  .footer { padding-block: var(--space-xl) var(--space-m); border-top: var(--border); background: var(--bg); }
  .footer-wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-s) var(--space-l); padding-bottom: var(--space-l); border-bottom: var(--border); }
  .footer-brand p { margin-top: 12px; max-width: 48ch; }
  .footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .footer-social { display: grid; place-items: center; width: 44px; height: 44px; border: var(--border); border-radius: var(--radius-s); color: var(--ink); transition: border-color var(--dur-1); }
  .footer-social:hover { border-color: var(--ink); }
  .footer-social svg { width: 20px; height: 20px; }
  .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-m); padding-block: var(--space-l); }
  .footer-col-title { margin-bottom: 10px; font-size: var(--step--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-label); color: var(--text-3); }
  .footer-col ul { list-style: none; padding: 0; }
  .footer-col a, .footer-col span { display: inline-flex; align-items: center; gap: 12px; padding: 7px 0; color: var(--ink-2); font-weight: 550; }
  .footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
  .footer-col svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
  .footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: var(--space-s); border-top: var(--border); font-size: var(--step--1); color: var(--text-3); }
  .footer-legal nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .footer-legal a:hover, .footer-cookie-btn:hover { color: var(--ink); text-decoration: underline; }
  .footer-cookie-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; }

  /* ---- Cookiebanner (js/consent.js maakt de markup) ---- */
  .cookie-banner { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 990; width: min(400px, calc(100vw - 32px)); padding: 20px; border-radius: var(--radius-m); background: #fff; border: var(--border); box-shadow: 0 24px 48px -28px rgba(34, 16, 47, .4); }
  .cookie-banner-title { font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
  .cookie-banner-text { font-size: var(--step--1); line-height: 1.55; margin-bottom: 16px; }
  .cookie-banner-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
  .cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .cookie-banner .btn { flex: 1 1 auto; min-height: 44px; padding: 10px 14px; }
  }
}

/* ---------------------------------------------------------------- */
@layer utilities {
  /* Beweging (js/motion.js). ck-motion wordt in de <head> gezet, alleen zonder prefers-reduced-motion.
     Vangnet: faalt het script, dan is de tekst na 1,5 s toch zichtbaar. */
  .ck-refresh.ck-motion [data-split] { visibility: hidden; animation: ck-failsafe 0s linear 1.5s forwards; }
  @media (prefers-reduced-motion: reduce) { .ck-refresh.ck-motion [data-split] { visibility: visible; animation: none; } }

  .ck-refresh {
    .accent { color: var(--accent-text); }
  }
}
@keyframes ck-failsafe { to { visibility: visible; } }