/* =================================================================
   Kempensite: hoofdstijl
   Idee: een drukproef op de snijmat van een grafisch ontwerper.
   Groene snijmat, wit papier, drukinkt en de heidepaarse pen
   waarmee alles wordt nagekeken.
   ================================================================= */

/* ---------- Lettertypes (zelf gehost, OFL) ---------- */
@font-face {
  font-family: "Besley";
  src: url("/assets/fonts/besley-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("/assets/fonts/atkinson-next-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Pen";
  src: url("/assets/fonts/covered-by-your-grace.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Enkel gebruikt in de kleine proefjes en kleurstalen van de voorbeelden */
@font-face { font-family: "Young Serif"; src: url("/assets/fonts/young-serif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --mat: #1e4636;        /* snijmat */
  --mat-deep: #163729;
  --paper: #ffffff;
  --ink: #18231f;        /* drukinkt */
  --ink-soft: #4a5a53;
  --pen: #b4236e;        /* heidepaarse pen */
  --pen-dark: #8f1a57;
  --pen-light: #f5a3cc;  /* pen op de donkere mat */
  --mist: #edf1ed;
  --line: #d3dcd6;
  --field: #6f7f78;
  --error: #b42318;
  --focus: var(--mat);

  --serif: "Besley", "Rockwell", "Georgia", serif;
  --sans: "Atkinson Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --hand: "Pen", "Segoe Print", "Bradley Hand", cursive;

  --wrap: 73rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(4rem, 2.8rem + 5vw, 7.5rem);
  --radius: 6px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

h1, h2, h3 {
  font-family: var(--serif);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.012em;
}
h3 { font-size: 1.35rem; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }

a { color: var(--pen); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--pen-dark); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nowrap { white-space: nowrap; }
.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: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1rem;
  font-weight: 700;
  border-radius: var(--radius);
}
.skip:focus { top: 1rem; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--pen);
  color: #fff;
  font: 700 1.0625rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--pen-dark);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.btn:hover { background: var(--pen-dark); color: #fff; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pen-dark); }
.btn--small { min-height: 2.6rem; padding: 0.55rem 1rem; font-size: 0.98rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- Snijmat ---------- */
.mat {
  --focus: #f2d24b;
  position: relative;
  color: #fff;
  background-color: var(--mat);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
}
.mat a:not(.btn) { color: #fff; }
.mat a:not(.btn):hover { color: var(--pen-light); }

.ruler {
  position: absolute;
  inset: 0 0 auto 0;
  height: 22px;
  overflow: hidden;
  display: flex;
  pointer-events: none;
  user-select: none;
}
.ruler span {
  flex: 0 0 32px;
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 10px;
  line-height: 1;
  padding: 10px 0 0 3px;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
.ruler span:nth-child(5n) { border-left-color: rgba(255, 255, 255, 0.6); }

/* ---------- Kop ---------- */
.site-head {
  position: absolute;
  inset: 22px 0 auto 0;
  z-index: 20;
  color: #fff;
  --focus: #f2d24b;
}
.site-head__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
}
.logo:hover { color: #fff; }
.logo__mark { width: 2.1rem; height: 2.1rem; color: rgba(255, 255, 255, 0.8); }
.logo__name {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}
.site-nav ul { list-style: none; display: flex; gap: 0.25rem; }
.site-nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
}
.site-nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--pen-light); text-underline-offset: 0.35em; }
.menu-toggle {
  display: none;
  font: 700 1rem/1 var(--sans);
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  cursor: pointer;
}
.site-head__cta { display: none; }

@media (max-width: 63.99rem) {
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    background: var(--mat-deep);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius);
    padding: 0.5rem;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.5);
  }
  .js .site-nav:not(.is-open) { display: none; }
  .js .site-nav ul { flex-direction: column; }
  .js .site-nav a { padding: 0.85rem 1rem; font-size: 1.1rem; }
  .no-js .site-head__inner { flex-wrap: wrap; }
  .no-js .site-nav { order: 3; width: 100%; }
  .no-js .site-nav ul { flex-wrap: wrap; }
}
@media (min-width: 40rem) {
  .site-head__cta { display: inline-flex; }
  .site-nav__cta { display: none; }
}
.js .site-nav__cta a { color: var(--pen-light); }

/* ---------- Hero ---------- */
.hero {
  padding: calc(22px + 4.5rem + clamp(2rem, 1rem + 4vw, 4.5rem)) 0 clamp(3.5rem, 2rem + 5vw, 6.5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}
.hero__text { container-type: inline-size; }
.hero h1 {
  /* "dan betalen." is ongeveer 6,6 em breed: zo past het altijd in de kolom */
  font-size: clamp(2.4rem, 14.6cqi, 4.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: initial;
}
.hero__lead {
  margin-top: 1.5rem;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  max-width: 33em;
  color: rgba(255, 255, 255, 0.92);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.link-quiet { font-weight: 700; }
.hero__meta {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 30em;
}

/* Keuze bakker / kapper / garage */
.switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.25rem 28px;
}
.switch button {
  font: 700 0.98rem/1 var(--sans);
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  cursor: pointer;
}
.switch button:hover { border-color: #fff; }
.switch button[aria-selected="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

/* ---------- Drukproef met snijtekens ---------- */
.proof {
  --cm: rgba(255, 255, 255, 0.75);
  --pad: 28px;
  --pad-b: 52px;
  position: relative;
  padding: var(--pad) var(--pad) var(--pad-b);
}
.proof::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--cm), var(--cm)) left var(--pad) top 0 / 1px 18px no-repeat,
    linear-gradient(var(--cm), var(--cm)) left 0 top var(--pad) / 18px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right var(--pad) top 0 / 1px 18px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right 0 top var(--pad) / 18px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) left var(--pad) bottom calc(var(--pad-b) - 28px) / 1px 18px no-repeat,
    linear-gradient(var(--cm), var(--cm)) left 0 bottom var(--pad-b) / 18px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right var(--pad) bottom calc(var(--pad-b) - 28px) / 1px 18px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right 0 bottom var(--pad-b) / 18px 1px no-repeat;
}
.proof__reg {
  position: absolute;
  top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  fill: none;
  stroke: var(--cm);
  stroke-width: 1;
}
.proof__reg--l { left: 4px; }
.proof__reg--r { right: 4px; }
.proof__sheet {
  position: relative;
  background: var(--paper);
  aspect-ratio: 1000 / 760;
  container-type: inline-size;
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 30px 50px -24px rgba(0, 0, 0, 0.6);
}
.proof__panel { position: absolute; inset: 0; }
.proof__panel:focus-visible { outline-offset: -4px; }
.proof__slug {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.75);
}
.proof__bar { display: inline-flex; flex: none; }
.proof__bar i { width: 11px; height: 11px; display: block; }
.proof__bar i:nth-child(1) { background: #00a0dc; }
.proof__bar i:nth-child(2) { background: #e5007e; }
.proof__bar i:nth-child(3) { background: #ffe600; }
.proof__bar i:nth-child(4) { background: #000; }
.proof__bar i:nth-child(5) { background: var(--pen); }
.proof__bar i:nth-child(6) { background: #fff; }

/* Mini-pagina: een gsm-scherm, gedrukt op de proef */
.mini {
  position: absolute;
  left: 28cqi;
  top: 4cqi;
  width: 44cqi;
  height: 72cqi;
  overflow: hidden;
  outline: 1px solid rgba(0, 0, 0, 0.12);
  font-family: var(--sans);
  line-height: 1.3;
}
.mini p { margin: 0; }
.mini dl { margin: 0; display: grid; grid-template-columns: 1fr auto; }
.mini dd { margin: 0; text-align: right; }

/* Pennotities */
.notes { position: absolute; inset: 0; pointer-events: none; }
.marks {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--pen);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 23%;
  font-family: var(--hand);
  font-size: 3.3cqi;
  line-height: 1.05;
  color: var(--pen);
  transform: rotate(-3deg);
}
.note--r { transform: rotate(2deg); }

@media (prefers-reduced-motion: no-preference) {
  .js .marks path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .note { opacity: 0; }
  .js .is-drawn .marks path {
    animation: draw 0.55s cubic-bezier(.5, 0, .3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.32s + 0.35s);
  }
  .js .is-drawn .note {
    animation: appear 0.35s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.32s + 0.6s);
  }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { from { opacity: 0; transform: translateY(4px) rotate(-3deg); } to { opacity: 1; } }

/* -- Mini bakker -- */
.mini--bakker { background: #fff7e8; color: #3b1f12; }
.mb-head { display: flex; justify-content: space-between; align-items: center; padding: 2.2cqi 2.6cqi; border-bottom: 0.25cqi solid #ead9bc; }
.mb-logo { font-family: "Young Serif", var(--serif); font-size: 3.3cqi; line-height: 1; color: #6b2e14; }
.mb-logo small { display: block; font-family: var(--sans); font-size: 1.25cqi; color: #8a5a3c; margin-bottom: 0.4cqi; }
.mini-burger { display: grid; gap: 0.6cqi; }
.mini-burger i { display: block; width: 3cqi; height: 0.35cqi; background: currentColor; border-radius: 1cqi; }
.mb-hero { padding: 2.4cqi 2.6cqi 2.6cqi; text-align: center; }
.mb-loaf { width: 17cqi; margin: 0 auto 1.4cqi; }
.mb-title { font-family: "Young Serif", var(--serif); font-size: 4.7cqi; line-height: 1.04; color: #3b1f12; }
.mb-sub { font-size: 1.6cqi; margin-top: 1.1cqi !important; color: #6b4a36; }
.mb-btn { display: inline-block; margin-top: 2cqi; background: #8a3b12; color: #fff; font-weight: 700; font-size: 1.6cqi; padding: 1.1cqi 2.4cqi; border-radius: 4cqi; }
.mb-hours { margin: 0 2.6cqi; background: #fff; border-radius: 1.2cqi; padding: 1.8cqi 2.2cqi; box-shadow: 0 0.3cqi 1cqi rgba(80, 40, 10, 0.12); font-size: 1.45cqi; }
.mb-now { font-size: 1.75cqi; margin-bottom: 1cqi !important; }
.mb-now b { color: #2e6b3a; }
.mb-hours dl { row-gap: 0.4cqi; }
.mb-hours dt { color: #6b4a36; }
.mb-call { margin: 2.2cqi 2.6cqi 0; background: #f2c14e; color: #3b1f12; text-align: center; padding: 1.5cqi; border-radius: 1cqi; font-weight: 700; font-size: 1.85cqi; }

/* -- Mini kapper -- */
.mini--kapper { background: #2b1630; color: #fbe9e1; font-family: "Bricolage Grotesque", var(--sans); }
.mk-head { display: flex; justify-content: space-between; align-items: center; padding: 2.4cqi 2.6cqi; }
.mk-logo { font-size: 3.8cqi; font-weight: 800; letter-spacing: -0.04em; color: #f7b39a; line-height: 1; }
.mk-btn { background: #f7b39a; color: #2b1630; font-weight: 700; font-size: 1.5cqi; padding: 1cqi 1.8cqi; border-radius: 4cqi; }
.mk-hero { position: relative; padding: 5cqi 2.6cqi 4cqi; }
.mk-curls { position: absolute; right: -11cqi; top: -1cqi; width: 25cqi; opacity: 0.85; }
.mk-title { position: relative; font-size: 6.6cqi; font-weight: 800; line-height: 0.93; letter-spacing: -0.04em; }
.mk-sub { position: relative; font-size: 1.65cqi; margin-top: 1.6cqi !important; color: #e3c9da; }
.mk-prices { margin: 0 2.6cqi; border-top: 0.3cqi solid #cdb8f0; padding-top: 1.8cqi; }
.mk-h { font-size: 2.3cqi; font-weight: 800; color: #cdb8f0; margin-bottom: 1cqi !important; }
.mk-prices dl { font-size: 1.7cqi; }
.mk-prices dt, .mk-prices dd { padding: 0.9cqi 0; border-bottom: 0.2cqi dotted rgba(251, 233, 225, 0.35); }

/* -- Mini garage -- */
.mini--garage { background: #1f2427; color: #fff; font-family: "Barlow", var(--sans); }
.mg-head { display: flex; justify-content: space-between; align-items: center; padding: 2.2cqi 2.6cqi; border-bottom: 0.7cqi solid #ffc400; }
.mg-logo { font-family: "Barlow Condensed", var(--sans); font-weight: 700; font-size: 2.9cqi; line-height: 0.9; text-transform: uppercase; }
.mg-phone { background: #ffc400; color: #1f2427; font-family: "Barlow Condensed", var(--sans); font-weight: 700; font-size: 2.3cqi; padding: 0.8cqi 1.4cqi; border-radius: 0.6cqi; }
.mg-hero { padding: 4.4cqi 2.6cqi 3cqi; }
.mg-title { font-family: "Barlow Condensed", var(--sans); font-weight: 700; font-size: 6.4cqi; line-height: 0.92; text-transform: uppercase; }
.mg-sub { font-size: 1.7cqi; margin-top: 1.4cqi !important; color: #c9d1d6; }
.mg-stripes { display: block; height: 2cqi; margin-top: 2.6cqi; background: repeating-linear-gradient(-45deg, #ffc400 0 1.3cqi, #1f2427 1.3cqi 2.6cqi); }
.mg-list { list-style: none; margin: 0 2.6cqi; display: grid; gap: 1cqi; }
.mg-list li { background: #2a3135; border-left: 0.7cqi solid #ffc400; padding: 1.2cqi 1.6cqi; font-size: 1.5cqi; color: #c9d1d6; }
.mg-list b { display: block; font-family: "Barlow Condensed", var(--sans); font-size: 2.5cqi; line-height: 1.1; text-transform: uppercase; color: #fff; }

/* ---------- Secties ---------- */
.sec { padding-block: var(--sec); }
.sec--mist { background: var(--mist); }
.sec--tight-top { padding-top: 0; }
.sec__head { max-width: 40rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.sec__lede { margin-top: 1rem; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem); color: var(--ink-soft); }

.split { display: grid; gap: 2rem 4rem; }
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: 1fr 1fr; }
  .sec__head--sticky { position: sticky; top: 2rem; align-self: start; }
  .split > .sec__head { margin-bottom: 0; }
}

/* Werkwijze */
.steps { list-style: none; display: grid; gap: 2.75rem; counter-reset: none; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.step { position: relative; padding-top: 1.25rem; border-top: 3px solid var(--ink); }
.step__n {
  display: block;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(3.6rem, 3rem + 2vw, 4.8rem);
  line-height: 0.9;
  color: var(--mat);
  margin-bottom: 1rem;
}
.step h3 { margin-bottom: 0.6rem; }
.step p { color: var(--ink-soft); max-width: 34ch; }
.pen-note {
  position: absolute;
  top: 1.1rem;
  left: 4.6rem;
  font-family: var(--hand);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--pen);
  transform: rotate(-4deg);
  padding-left: 2.6rem;
}
.pen-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 2.3rem;
  height: 1.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 32'%3E%3Cpath d='M44 6C30 2 14 6 6 22M6 22l-1-10M6 22l9-3' fill='none' stroke='%23b4236e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Wat je krijgt */
.checklist {
  list-style: none;
  display: grid;
  gap: 0 2.5rem;
}
@media (min-width: 40rem) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2.4rem;
  border-bottom: 1px solid var(--line);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.8rem;
  width: 1.55rem;
  height: 1.55rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M3 14.5c2.6 1.6 4.6 4 6.4 7.6C12.6 13.4 18 6.6 25.5 2.5' fill='none' stroke='%23b4236e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Prijzen */
.prices {
  display: grid;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(24, 35, 31, 0.06), 0 24px 40px -30px rgba(24, 35, 31, 0.35);
}
@media (min-width: 52rem) { .prices { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.price { padding: clamp(1.75rem, 1rem + 3vw, 3rem); }
.price__name { font-size: 1.5rem; }
.price__amount {
  margin: 1.1rem 0 0.35rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.price__amount small {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.price__then { font-weight: 700; color: var(--mat); margin-bottom: 1.1rem; }
.price p:not([class]) { color: var(--ink-soft); }
.price__fit { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.98rem; }
.prices__or {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-top: 2px dashed #9aaba2;
  height: 0;
}
.prices__or span {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: 1.1rem;
  background: var(--paper);
  color: var(--ink-soft);
  padding: 0 0.75rem;
  position: relative;
  top: -1px;
}
.prices__scissors {
  position: absolute;
  left: -0.4rem;
  top: -0.85rem;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: #6f7f78;
  stroke-width: 1.6;
  max-width: none;
  background: var(--paper);
}
@media (min-width: 52rem) {
  .prices__or { margin: 2rem 0; border-top: 0; border-left: 2px dashed #9aaba2; height: auto; width: 0; }
  .prices__or span { padding: 0.6rem 0; top: 0; left: -1px; }
  .prices__scissors { left: -0.85rem; top: -1.4rem; transform: rotate(90deg); }
}

.addon {
  display: grid;
  gap: 1.5rem 3rem;
  margin-top: 1.5rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--pen);
}
@media (min-width: 52rem) { .addon { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.addon h3 { font-size: 1.5rem; }
.addon__price { margin: 0.6rem 0 0.75rem; font-family: var(--serif); font-weight: 800; font-size: 2.2rem; line-height: 1.1; }
.addon__price small { font-family: var(--sans); font-size: 1.05rem; font-weight: 400; color: var(--ink-soft); }
.addon__intro { color: var(--ink-soft); }
.addon__list { list-style: none; display: grid; gap: 0.8rem; }
.addon__list li { position: relative; padding-left: 1.5rem; }
.addon__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 0.7rem; height: 2px;
  background: var(--pen);
}
.prices__note { margin-top: 2rem; font-size: 1.05rem; color: var(--ink-soft); }
.prices__note a { font-weight: 700; margin-left: 0.25rem; }

/* Garantie in stap 3 */
.step .guarantee {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px dashed var(--pen);
  border-radius: var(--radius);
  font-size: 0.98rem;
  color: var(--ink);
  background: #fdf3f8;
}
.guarantee strong { color: var(--pen-dark); }

/* Prijzen: totalen, "bij allebei", garantie-stempel en startaanbod */
.price__total {
  margin: 1.1rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--mist);
  border-radius: var(--radius);
  font-size: 0.98rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price__total b { white-space: nowrap; }
.prices__both {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.75rem, 1rem + 3vw, 3rem);
  border-top: 2px dashed #9aaba2;
}
@media (min-width: 52rem) {
  .prices__both { grid-column: 1 / -1; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.prices__both-title { font-size: 1.2rem; margin-bottom: 0.75rem; }
.prices__both-list { list-style: none; display: grid; gap: 0.6rem; }
.prices__both-list li { position: relative; padding-left: 2rem; }
.prices__both-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15rem;
  width: 1.3rem; height: 1.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M3 14.5c2.6 1.6 4.6 4 6.4 7.6C12.6 13.4 18 6.6 25.5 2.5' fill='none' stroke='%23b4236e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.stamp {
  position: relative;
  padding: 1.1rem 1.25rem 1.2rem;
  border: 2.5px solid var(--pen);
  border-radius: 10px;
  color: var(--ink);
  transform: rotate(-1.2deg);
  background: var(--paper);
}
.stamp__label {
  font-family: var(--hand);
  font-size: 2rem;
  line-height: 1;
  color: var(--pen);
  margin-bottom: 0.4rem !important;
}
.stamp p:not(.stamp__label) { font-size: 0.98rem; }

.founding {
  position: relative;
  display: grid;
  gap: 0.35rem;
  margin-top: 1.5rem;
  padding: 1.4rem clamp(1.25rem, 1rem + 2vw, 2.25rem) 1.4rem clamp(3.5rem, 2.5rem + 2vw, 4.5rem);
  border: 2px dashed var(--mat);
  border-radius: var(--radius);
  background: var(--paper);
}
.founding__scissors {
  position: absolute;
  left: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  top: 1.4rem;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--mat);
  stroke-width: 1.6;
}
.founding__title { font-family: var(--serif); font-weight: 800; font-size: 1.3rem; color: var(--mat); margin: 0 !important; }
.founding p:not(.founding__title) { color: var(--ink); max-width: 52em; }

/* Vergelijking: zelf doen, bureau, Kempensite */
#vergelijking .sec__head { max-width: 52rem; }
.compare { width: 100%; border-collapse: collapse; font-size: 1rem; table-layout: fixed; }
.compare__corner { width: 19%; }
.compare thead th { width: 27%; }
.compare th, .compare td { text-align: left; vertical-align: top; }
.compare thead th {
  padding: 0.9rem 1rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 800;
  border-bottom: 3px solid var(--ink);
}
.compare thead th.compare__us { color: var(--pen-dark); border-bottom-color: var(--pen); }
.compare tbody th {
  padding: 1rem 1rem 1rem 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.08rem;
}
.compare td { padding: 1rem; color: var(--ink-soft); }
.compare tbody tr { border-bottom: 1px solid var(--line); }
.compare .compare__us { background: #fdf3f8; color: var(--ink); }
.compare td.compare__us { font-weight: 600; }
.compare__label { display: none; }
@media (max-width: 47.99rem) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare caption { display: block; }
  .compare thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .compare tbody tr { padding: 1.1rem 0 1.25rem; border-bottom: 0; border-top: 1px solid var(--line); }
  .compare tbody tr:first-child { border-top: 3px solid var(--ink); }
  .compare tbody th { padding: 0 0 0.6rem; font-size: 1.2rem; }
  .compare td {
    display: grid;
    grid-template-columns: 6.6rem minmax(0, 1fr);
    gap: 0 0.85rem;
    padding: 0.45rem 0;
  }
  .compare td.compare__us {
    margin-top: 0.35rem;
    padding: 0.7rem 0.8rem 0.75rem 0.65rem;
    grid-template-columns: calc(6.6rem - 0.65rem - 4px) minmax(0, 1fr);
    border-left: 4px solid var(--pen);
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .compare__label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); padding-top: 0.08rem; }
  .compare td.compare__us .compare__label { color: var(--pen-dark); }
}

/* Voorbeelden: kleurstalen */
.chips { list-style: none; display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chip {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 30px -26px rgba(24, 35, 31, 0.5);
}
.chip:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.chip__swatch {
  position: relative;
  height: clamp(9rem, 6rem + 8vw, 12.5rem);
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.25rem;
  overflow: hidden;
}
.chip__aa { font-size: 5.5rem; line-height: 0.8; }
.chip__dots { position: absolute; top: 1.1rem; right: 1.1rem; display: flex; gap: 0.35rem; }
.chip__dots i { width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.chip__label { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.chip h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.chip h3 a { color: var(--ink); text-decoration: none; }
.chip h3 a::after { content: ""; position: absolute; inset: 0; }
.chip h3 a:focus-visible { outline: none; }
.chip:hover h3 a { text-decoration: underline; text-decoration-color: var(--pen); }
.chip p { color: var(--ink-soft); font-size: 1rem; }
.chip__meta {
  margin-top: auto !important;
  padding-top: 1rem;
  font-size: 0.9rem !important;
  font-weight: 700;
  color: var(--ink) !important;
}
.chip__meta::before {
  content: "";
  display: inline-block;
  width: 0.55rem; height: 0.55rem;
  margin-right: 0.5rem;
  border: 1.5px solid var(--ink);
  transform: rotate(45deg) translateY(-1px);
}
.chip--bakker .chip__swatch { background: #8a3b12; color: #fff7e8; }
.chip--bakker .chip__aa { font-family: "Young Serif", var(--serif); }
.chip--bakker .chip__dots i:nth-child(1) { background: #f2c14e; }
.chip--bakker .chip__dots i:nth-child(2) { background: #fff7e8; }
.chip--bakker .chip__dots i:nth-child(3) { background: #3b1f12; }
.chip--kapper .chip__swatch { background: #2b1630; color: #f7b39a; }
.chip--kapper .chip__aa { font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; letter-spacing: -0.05em; }
.chip--kapper .chip__dots i:nth-child(1) { background: #f7b39a; }
.chip--kapper .chip__dots i:nth-child(2) { background: #cdb8f0; }
.chip--kapper .chip__dots i:nth-child(3) { background: #fbe9e1; }
.chip--garage .chip__swatch { background: #1f2427; color: #ffc400; }
.chip--garage .chip__aa { font-family: "Barlow Condensed", var(--sans); font-weight: 700; }
.chip--garage .chip__swatch::after { content: ""; position: absolute; right: 0; bottom: 0; width: 45%; height: 0.9rem; background: repeating-linear-gradient(-45deg, #ffc400 0 0.6rem, transparent 0.6rem 1.2rem); }
.chip--garage .chip__dots i:nth-child(1) { background: #ffc400; }
.chip--garage .chip__dots i:nth-child(2) { background: #c9d1d6; }
.chip--garage .chip__dots i:nth-child(3) { background: #ffffff; }
.chip--slager .chip__swatch { background: #7a1f1f; color: #f6efe4; }
.chip--slager .chip__aa { font-family: var(--serif); font-weight: 800; }
.chip--slager .chip__swatch::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.1rem; background: repeating-linear-gradient(90deg, #f6efe4 0 1.1rem, #7a1f1f 1.1rem 2.2rem); }
.chip--slager .chip__dots { top: 2rem; }
.chip--slager .chip__dots i:nth-child(1) { background: #f6efe4; }
.chip--slager .chip__dots i:nth-child(2) { background: #2d3430; }
.chip--slager .chip__dots i:nth-child(3) { background: #d9a441; }
.chip--frituur .chip__swatch { background: #ffc93c; color: #2a1a12; }
.chip--frituur .chip__aa { font-family: "Figtree", var(--sans); font-weight: 900; letter-spacing: -0.04em; }
.chip--frituur .chip__dots i:nth-child(1) { background: #d62828; }
.chip--frituur .chip__dots i:nth-child(2) { background: #fff4d6; }
.chip--frituur .chip__dots i:nth-child(3) { background: #1d1f3d; }
.chip--loodgieter .chip__swatch { background: #0b4f8a; color: #ffffff; }
.chip--loodgieter .chip__aa { font-family: var(--sans); font-weight: 800; }
.chip--loodgieter .chip__swatch::after { content: ""; position: absolute; right: -1.5rem; bottom: -1.5rem; width: 7rem; height: 7rem; border-radius: 50%; box-shadow: inset 0 0 0 0.6rem rgba(255, 255, 255, 0.18), 0 0 0 1.4rem rgba(255, 255, 255, 0.08); }
.chip--loodgieter .chip__dots i:nth-child(1) { background: #e6f2fb; }
.chip--loodgieter .chip__dots i:nth-child(2) { background: #f08c00; }
.chip--loodgieter .chip__dots i:nth-child(3) { background: #ffffff; }

/* Voor wie */
#voor-wie h2 { margin-bottom: 1.5rem; }
.trades {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: 24em;
  margin-bottom: 2.75rem;
  color: var(--mat);
}
#voor-wie .split p { color: var(--ink-soft); max-width: 36em; }
.trade-links { margin: -0.75rem 0 2.75rem; }
.trade-links__title { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.85rem; }
.trade-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.trade-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--mat);
  border-radius: 999px;
  background: var(--paper);
  color: var(--mat);
  font-weight: 700;
  text-decoration: none;
}
.trade-links a::after { content: "→"; margin-left: 0.5rem; color: var(--pen); }
.trade-links a:hover { background: var(--mat); color: #fff; }
.trade-links a:hover::after { color: var(--pen-light); }

/* Vragen */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 3rem 1.2rem 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 1rem;
  height: 2px;
  background: var(--pen);
  transition: transform 0.2s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--mat); }
.faq__a { padding: 0 3rem 1.4rem 0; color: var(--ink-soft); max-width: 62ch; }

/* Over */
.about { display: grid; gap: 2.5rem 4rem; align-items: center; }
@media (min-width: 52rem) { .about { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.about__text h2 { margin-bottom: 1.5rem; }
.about__text p { max-width: 36em; }
.about__portrait { margin: 0; --cm: rgba(24, 35, 31, 0.55); --pad: 22px; }
.about__portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.about__sign {
  justify-self: center;
  position: relative;
  padding: 2.25rem 2.75rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  transform: rotate(-2deg);
  box-shadow: 0 20px 30px -24px rgba(24, 35, 31, 0.5);
  text-align: left;
  min-width: 15rem;
}
.about__signname {
  display: block;
  font-family: var(--hand);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--pen);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
}
.about__signplace { display: block; margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); }

/* Contact */
.contact { padding-block: var(--sec); }
.contact__grid { display: grid; gap: 2.5rem 4rem; align-items: start; }
@media (min-width: 64rem) { .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.contact h2 { color: #fff; margin-bottom: 1.25rem; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem); }
.next { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.next h3 { font-size: 1.2rem; margin-bottom: 1rem; color: #fff; }
.next ol { list-style: none; counter-reset: next; display: grid; gap: 0.7rem; }
.next li { counter-increment: next; position: relative; padding-left: 2.1rem; color: rgba(255, 255, 255, 0.9); }
.next li::before {
  content: counter(next);
  position: absolute; left: 0; top: 0.05rem;
  width: 1.45rem; height: 1.45rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--pen-light);
  border-radius: 50%;
  font-family: var(--serif); font-weight: 800; font-size: 0.85rem; line-height: 1;
  color: var(--pen-light);
}
.contact__intro > p { color: rgba(255, 255, 255, 0.9); max-width: 30em; }
.contact__alt { margin-top: 1.75rem; }
.contact__alt a { font-weight: 700; font-size: 1.15rem; }
.proof--form, .proof--even { --pad-b: var(--pad); }
.proof--form::before,
.proof--even::before {
  background:
    linear-gradient(var(--cm), var(--cm)) left var(--pad) top 0 / 1px 18px no-repeat,
    linear-gradient(var(--cm), var(--cm)) left 0 top var(--pad) / 18px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right var(--pad) top 0 / 1px 18px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right 0 top var(--pad) / 18px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) left var(--pad) bottom 0 / 1px 18px no-repeat,
    linear-gradient(var(--cm), var(--cm)) left 0 bottom var(--pad) / 18px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right var(--pad) bottom 0 / 1px 18px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right 0 bottom var(--pad) / 18px 1px no-repeat;
}
@media (max-width: 30rem) {
  .proof { --pad: 16px; --pad-b: 48px; }
  .hero__proof { margin-inline: -10px; }
  .switch { margin-left: 16px; }
  .note { font-size: 3.7cqi; }
  .proof--form, .proof--even { --pad-b: var(--pad); }
  .proof__reg { display: none; }
}

/* Formulier */
.form {
  --focus: var(--mat);
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.25rem, 0.8rem + 2.5vw, 2.5rem);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 30px 50px -24px rgba(0, 0, 0, 0.6);
}
.mat .form a { color: var(--pen); }
.mat .form a:hover { color: var(--pen-dark); }
.field { margin-bottom: 1.25rem; }
.field-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 0.4rem; }
.opt { font-weight: 400; color: var(--ink-soft); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--field);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  min-height: 3.1rem;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.45; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--mat); outline-offset: 1px; border-color: var(--mat); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__hint { font-size: 0.92rem; color: var(--ink-soft); margin: 0.4rem 0 0; }
.field__err { font-size: 0.95rem; font-weight: 700; color: var(--error); margin: 0.4rem 0 0; }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; align-items: start; }
.field--check input { width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; accent-color: var(--mat); }
.field--check label { font-weight: 400; margin: 0; }
.field--check .field__err { grid-column: 2; }
.form__privacy { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status:empty { display: none; }
.form__status { margin-top: 1.25rem; padding: 1rem 1.1rem; border-left: 5px solid var(--mat); background: #e7f0ea; font-weight: 700; }
.form__status.is-error { border-left-color: var(--error); background: #fbeceb; color: #7a1a12; }
.form__status a { color: inherit; }
.form.is-sent .field, .form.is-sent .field-row, .form.is-sent .form__privacy, .form.is-sent button { display: none; }
.form.is-sent .form__status { margin-top: 0; }

/* ---------- Voet ---------- */
.site-foot {
  --focus: #f2d24b;
  background: var(--mat-deep);
  color: #d9e4dd;
  padding-block: 3.5rem 2.5rem;
  font-size: 1rem;
}
.site-foot a { color: #fff; }
.site-foot a:hover { color: var(--pen-light); }
.site-foot__grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 40rem) { .site-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .site-foot__grid { grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr; } }
.site-foot__name { font-family: var(--serif); font-weight: 800; font-size: 1.5rem; color: #fff; margin-bottom: 0.4rem; }
.site-foot ul { list-style: none; display: grid; gap: 0.4rem; align-content: start; }
.site-foot__head { font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.site-foot__copy { grid-column: 1 / -1; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.92rem; color: #b9c9bf; }

/* ---------- Losse pagina's (privacy, 404) ---------- */
.page-head {
  padding: calc(22px + 4.5rem + 2.5rem) 0 3rem;
}
.page-head h1 { font-size: clamp(2.6rem, 1.8rem + 3.5vw, 4.2rem); font-weight: 800; letter-spacing: -0.02em; }
.page-head p { margin-top: 1rem; color: rgba(255, 255, 255, 0.88); max-width: 36em; font-size: 1.15rem; }
.prose { max-width: 42rem; padding-block: 3.5rem var(--sec); }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); font-weight: 700; margin: 2.5rem 0 0.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; margin-bottom: 1em; }
.prose li { margin-bottom: 0.35rem; }
.prose .cfg-block { padding: 1rem 1.25rem; background: var(--mist); border-left: 4px solid var(--mat); margin-bottom: 1em; }
.prose .cfg-block p { margin: 0; }
.notfound { min-height: 100vh; display: flex; flex-direction: column; }
.notfound .hero { flex: 1; display: flex; align-items: center; }
.notfound h1 { max-width: 12em; }

/* ---------- Vakpagina's (/voor/...) ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin-bottom: 1.25rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: rgba(255, 255, 255, 0.5); }
.crumbs a { color: #fff; }
.vak-head .hero__actions { margin-top: 1.75rem; }
.vak-head h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.2rem); text-wrap: pretty; max-width: 17em; }
.sec__head--long h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); }
.vak-head p.vak-head__lead { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); max-width: 34em; }

.asks { list-style: none; display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .asks { grid-template-columns: 1fr 1fr; } }
.asks li {
  position: relative;
  padding: 1.35rem 1.4rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 30px -28px rgba(24, 35, 31, 0.5);
}
.asks__q {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.25;
  color: var(--mat);
  margin-bottom: 0.6rem !important;
}
.asks p:not(.asks__q) { color: var(--ink-soft); font-size: 1rem; }

.vak-duo { display: grid; gap: 2.5rem 4rem; align-items: start; }
@media (min-width: 52rem) { .vak-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.vak-duo h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom: 1rem; }
.vak-duo .chips { grid-template-columns: 1fr; max-width: 24rem; margin-top: 1.5rem; }
.vak-tip {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--pen);
}
.vak-tip p { color: var(--ink-soft); }
.vak-tip .pen-label { font-family: var(--hand); font-size: 1.7rem; line-height: 1; color: var(--pen); margin-bottom: 0.5rem; transform: rotate(-2deg); transform-origin: left; }

.price-mini {
  display: grid;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(24, 35, 31, 0.06), 0 24px 40px -30px rgba(24, 35, 31, 0.35);
}
@media (min-width: 52rem) { .price-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-mini > div { padding: 1.5rem clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.price-mini > div + div { border-top: 1px dashed #9aaba2; }
@media (min-width: 52rem) { .price-mini > div + div { border-top: 0; border-left: 1px dashed #9aaba2; } }
.price-mini h3 { font-size: 1.2rem; }
.price-mini__amount { margin: 0.6rem 0 0.3rem; font-family: var(--serif); font-weight: 800; font-size: 2.2rem; line-height: 1.1; }
.price-mini__amount small { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
.price-mini p:not(.price-mini__amount) { color: var(--ink-soft); font-size: 1rem; }
.price-mini__more { margin-top: 2.25rem; display: grid; gap: 1rem 2.5rem; align-items: start; }
@media (min-width: 52rem) { .price-mini__more { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.price-mini__more ul { list-style: none; display: grid; gap: 0.6rem; }
.price-mini__more li { position: relative; padding-left: 2rem; }
.price-mini__more li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15rem;
  width: 1.3rem; height: 1.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M3 14.5c2.6 1.6 4.6 4 6.4 7.6C12.6 13.4 18 6.6 25.5 2.5' fill='none' stroke='%23b4236e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.price-mini__link { margin-top: 1.25rem; font-weight: 700; }

.cta-band { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.cta-band .wrap { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 52rem) { .cta-band .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cta-band h2 { color: #fff; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem); margin-bottom: 1rem; }
.cta-band p { color: rgba(255, 255, 255, 0.9); max-width: 32em; }
.cta-band .hero__actions { margin-top: 1.5rem; }
.kempen-card {
  padding: 1.5rem 1.6rem;
  background: var(--paper);
  color: var(--ink);
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 30px 50px -24px rgba(0, 0, 0, 0.6);
}
.kempen-card .pen-label { font-family: var(--hand); font-size: 1.9rem; line-height: 1; color: var(--pen); margin-bottom: 0.5rem; }
.cta-band .kempen-card p:not(.pen-label) { color: var(--ink); }

@media print {
  .mat, .site-foot { background: none !important; color: #000 !important; }
  .site-head, .ruler, .switch, .proof, .form, .menu-toggle { display: none !important; }
}
.lost__code {
  font-family: var(--hand);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1;
  color: var(--pen-light);
  transform: rotate(-4deg);
  transform-origin: left bottom;
  margin-bottom: 1rem;
}