@charset "utf-8";
/* ==========================================================================
   A.J. Klus & Afwerking — design system
   Tokens & rules are documented in /DESIGN.md. Do not invent colours here.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Dark anchors */
  --ink:          oklch(0.185 0.005 235);   /* #101214 */
  --ink-raised:   oklch(0.235 0.006 220);   /* #191D1E */
  --ink-hairline: oklch(0.295 0.007 220);   /* #262B2D */

  /* Brand gold — see DESIGN.md "The gold rule" before using */
  --gold:       oklch(0.795 0.145 79);      /* #EBB029 — bg fill, or text ON DARK only */
  --gold-hover: oklch(0.735 0.140 78);      /* #D69C1C */
  --gold-ink:   oklch(0.475 0.098 78);      /* #7D5A0A — the only gold text on light */

  /* Light surfaces */
  --paper:     #fff;
  --sand:      oklch(0.940 0.008 85);       /* #EEEBE3 */
  --sand-deep: oklch(0.925 0.014 79);       /* #ECE5DB */

  /* Text */
  --text:       oklch(0.225 0 0);           /* #1A1A1A */
  --text-muted: oklch(0.485 0.020 250);     /* #5A636E */
  --hairline:   oklch(0.895 0.008 85);      /* #E2DED6 — decorative only */

  /* Semantic */
  --success: oklch(0.525 0.152 138);
  --error:   oklch(0.525 0.168 30);

  /* Type */
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-hero: clamp(2.4rem, 1.55rem + 3.5vw, 4.1rem);
  --t-h2:   clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
  --t-h3:   clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem);
  --t-stat: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  --t-lead: clamp(1.02rem, 0.97rem + 0.3vw, 1.15rem);
  --t-body: 1rem;
  --t-sm:   0.875rem;
  --t-xs:   0.78rem;

  /* Space */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;  --s-5: 1.25rem;
  --s-6: 1.5rem; --s-8: 2rem;   --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem;
  --s-20: 5rem;  --s-24: 6rem;
  --section: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --gutter:  clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --maxw: 1220px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 320ms;

  /* Elevation — z-index scale, semantic only */
  --z-sticky: 100; --z-drawer: 200; --z-overlay: 300; --z-toast: 400;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  font: 400 var(--t-body)/1.65 var(--font);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 2px; border-radius: 3px; }
.on-dark :focus-visible, .quiz :focus-visible { outline-color: var(--gold); }
::selection { background: var(--gold); color: var(--ink); }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-toast);
  background: var(--gold); color: var(--ink); font-weight: 700;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
  transition: top 180ms var(--ease);
}
.skip:focus { top: var(--s-4); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 3. Typography ------------------------------------------------ */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.08; text-wrap: balance; }
h1 { font-size: var(--t-hero); letter-spacing: -0.033em; line-height: 1.06; }
h2 { font-size: var(--t-h2);  letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3);  letter-spacing: -0.012em; font-weight: 700; line-height: 1.3; }
p { text-wrap: pretty; }
.lead { font-size: var(--t-lead); color: var(--text-muted); max-width: 52ch; }
.on-dark .lead, .hero .lead, .quiz .lead { color: rgb(255 255 255 / .74); line-height: 1.71; }
.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--s-4); }

/* Section kicker — a named brand system, used on 4 section headings only */
.kicker {
  display: block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: var(--s-3);
}
.on-dark .kicker { color: var(--gold); }

/* ---------- 4. Layout primitives ---------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.on-dark { background: var(--ink); color: #fff; }
.on-sand { background: var(--sand); }
.on-sand-deep { background: var(--sand-deep); }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: var(--s-3) var(--s-6);
  border-radius: var(--r-sm); font-size: .95rem; font-weight: 700;
  letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn svg { flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* The only correct gold pairing: ink text on a gold fill (9.9:1) */
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-hover); }

.btn-ghost-dark { color: #fff; border: 1.5px solid var(--gold); }
.btn-ghost-dark:hover { background: rgb(235 176 41 / .12); }

.btn-ghost { color: var(--ink); border: 1px solid var(--hairline); background: var(--paper); }
.btn-ghost:hover { background: var(--sand); border-color: var(--gold-ink); }

.btn-block { width: 100%; }

/* ---------- 6. Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgb(16 18 20 / .93); color: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: blur(14px) saturate(1.3); }
}
.site-header.is-stuck { border-bottom-color: var(--ink-hairline); background: rgb(16 18 20 / .98); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  min-height: 76px; padding-block: var(--s-3);
}
.brand { display: block; flex: none; }
.brand img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a {
  position: relative; display: block; padding: var(--s-2) var(--s-4);
  font-size: .95rem; font-weight: 500; text-decoration: none;
  color: rgb(255 255 255 / .84); border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease);
}
.nav a:hover { color: #fff; }
.nav a::after {
  content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: 2px;
  height: 2px; background: var(--gold); border-radius: var(--r-pill);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav > .btn { display: none; }        /* drawer-only; desktop uses .header-cta */

.header-cta { flex: none; }
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .header-cta { display: none; }
  .nav-toggle {
    display: grid; place-items: center; width: 46px; height: 46px;
    border: 1px solid var(--ink-hairline); border-radius: var(--r-sm); color: #fff;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 20px; height: 2px; background: currentcolor;
    border-radius: 2px; transition: transform 260ms var(--ease), opacity 160ms linear;
  }
  .nav-toggle span::before { position: absolute; transform: translateY(-6px); }
  .nav-toggle span::after  { position: absolute; transform: translateY(6px); }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

  .nav {
    position: fixed; inset: 76px 0 0; z-index: var(--z-drawer);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: var(--s-4) var(--gutter) var(--s-12);
    background: var(--ink); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    padding: var(--s-4) var(--s-2); font-size: 1.15rem; font-weight: 600;
    border-bottom: 1px solid var(--ink-hairline); border-radius: 0;
  }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--gold); }
  .nav > .btn { display: inline-flex; margin-top: var(--s-6); }
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(97deg, rgb(10 12 13 / .94) 0%, rgb(10 12 13 / .90) 30%,
                    rgb(10 12 13 / .74) 48%, rgb(10 12 13 / .50) 68%, rgb(10 12 13 / .38) 100%),
    linear-gradient(to bottom, rgb(10 12 13 / .55) 0%, transparent 26%),
    linear-gradient(to top, rgb(10 12 13 / .5) 0%, transparent 34%);
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .87fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
  padding-block: clamp(3.25rem, 1.5rem + 7vw, 6.5rem);
  min-height: min(86vh, 820px);
}
.hero h1 { max-width: 15ch; }

/* Hero content runs the full page width on desktop; the quiz keeps a sane track */
@media (min-width: 1025px) {
  /* fill the screen below the sticky header, so no next section peeks in */
  .hero .hero-inner { min-height: calc(100svh - 77px); }
}

.hero .lead { margin-top: var(--s-6); max-width: 46ch; }

.trust-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-10);
  margin-top: clamp(2rem, 1rem + 2.5vw, 3rem);
}
.trust-item { display: flex; align-items: flex-start; gap: var(--s-3); max-width: 15ch; }
.trust-item svg { flex: none; width: 26px; height: 26px; color: var(--gold); }
.trust-item span { font-size: var(--t-sm); font-weight: 500; line-height: 1.35; color: rgb(255 255 255 / .9); }

@media (max-width: 640px) {
  .hero-anim { text-align: center; }
  .hero h1 { max-width: none; margin-inline: auto; }
}

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; gap: var(--s-10); }
  .hero h1, .hero .lead { max-width: 24ch; }
  .hero .lead { max-width: 52ch; }
  .trust-strip { margin-top: var(--s-8); gap: var(--s-6); }
  .trust-item { max-width: none; flex: 1 1 8rem; }
}

/* ---------- 8. Quiz ------------------------------------------------------ */
.quiz {
  background: rgb(20 23 24 / .96); border: 1px solid var(--ink-hairline);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  color: #fff; box-shadow: 0 24px 60px -24px rgb(0 0 0 / .7);
}
@supports (backdrop-filter: blur(1px)) { .quiz { backdrop-filter: blur(10px); } }
.quiz h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); letter-spacing: -0.028em; max-width: 14ch; }

.quiz-meta { display: flex; align-items: center; gap: var(--s-4); margin-block: var(--s-5) var(--s-6); }
.quiz-step-label { font-size: var(--t-sm); font-weight: 500; color: rgb(255 255 255 / .62); white-space: nowrap; }
.quiz-progress { display: flex; gap: 6px; flex: 1; }
.quiz-progress i {
  flex: 1; height: 5px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .14); transition: background-color 420ms var(--ease);
}
.quiz-progress i.is-done { background: var(--gold); }

.quiz-panel[hidden] { display: none; }
.quiz-panel > p { font-size: var(--t-sm); color: rgb(255 255 255 / .66); margin-bottom: var(--s-5); }

.quiz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.quiz-tile {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s-3); min-height: 96px; padding: var(--s-4) var(--s-3);
  background: var(--ink-raised); border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--r-sm); color: #fff; text-align: center;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.quiz-tile svg { width: 24px; height: 24px; color: var(--gold); }
.quiz-tile b { font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.008em; }
.quiz-tile:hover { border-color: rgb(235 176 41 / .55); background: rgb(235 176 41 / .06); }
.quiz-tile[aria-pressed="true"] { border-color: var(--gold); background: rgb(235 176 41 / .1); }
/* State is border + tick + aria-pressed, never colour alone */
.quiz-tile::after {
  content: ""; position: absolute; top: var(--s-3); right: var(--s-3);
  width: 17px; height: 17px; border-radius: var(--r-pill);
  background: var(--gold) no-repeat center / 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101214' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  opacity: 0; transform: scale(.6); transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.quiz-tile[aria-pressed="true"]::after { opacity: 1; transform: none; }

.quiz-fields { display: grid; gap: var(--s-4); }
.quiz .field label { color: rgb(255 255 255 / .82); }
.quiz .field input, .quiz .field textarea, .quiz .field select {
  background: var(--ink-raised); border-color: rgb(255 255 255 / .14); color: #fff;
}
.quiz .field input::placeholder, .quiz .field textarea::placeholder { color: rgb(255 255 255 / .42); }
.quiz .field input:focus, .quiz .field textarea:focus, .quiz .field select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgb(235 176 41 / .22);
}
.quiz .consent { color: rgb(255 255 255 / .72); }
.quiz .consent a { color: var(--gold); }

.quiz-actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.quiz-back {
  display: none; align-items: center; gap: var(--s-2); min-height: 46px;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 600; color: rgb(255 255 255 / .72);
  transition: color var(--dur) var(--ease);
}
.quiz-back:hover { color: #fff; }
.quiz-back.is-shown { display: inline-flex; }
.quiz-actions .btn-primary { flex: 1; }

.quiz-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid rgb(255 255 255 / .1);
  font-size: var(--t-sm); color: rgb(255 255 255 / .6);
}
.quiz-foot span { display: inline-flex; align-items: center; gap: var(--s-2); }
.quiz-foot svg { width: 15px; height: 15px; color: var(--gold); }

.quiz-done[hidden], .quiz-foot[hidden], .quiz-actions[hidden] { display: none !important; }
.quiz-done { display: grid; gap: var(--s-4); justify-items: start; padding-block: var(--s-4); }
.quiz-done .tick {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-pill);
  background: rgb(235 176 41 / .14); color: var(--gold);
}
.quiz-done .tick svg { width: 26px; height: 26px; }

@media (max-width: 420px) { .quiz-tiles { grid-template-columns: 1fr; } }

/* ---------- 9. Merken band ---------------------------------------------- */
.merken { padding-block: var(--s-10); text-align: center; }
.merken h2 {
  display: flex; align-items: center; justify-content: center; gap: var(--s-5);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.merken h2::before, .merken h2::after {
  content: ""; height: 1px; width: clamp(1.5rem, 6vw, 5.5rem);
  background: linear-gradient(to right, transparent, var(--gold-ink));
  opacity: .5;
}
.merken h2::after { background: linear-gradient(to left, transparent, var(--gold-ink)); }
.merken p { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--s-3); }
.merken-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(1.75rem, 1rem + 3.5vw, 4.25rem); margin-top: var(--s-8);
}
.merken-row img, .merken-row svg {
  height: clamp(26px, 3.4vw, 38px); width: auto;
  filter: grayscale(1); opacity: .72;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.merken-row a:hover img, .merken-row a:hover svg,
.merken-row a:focus-visible img, .merken-row a:focus-visible svg { filter: none; opacity: 1; }
.merken-row .m-fb { height: clamp(34px, 4.4vw, 48px); }

/* ---------- 10. Diensten ------------------------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: start;
}
.split-media img { width: 100%; border-radius: var(--r-lg); }
.split > div > .lead { margin-top: var(--s-4); }

.dienst-list { margin-top: var(--s-10); }
.dienst {
  display: flex; gap: var(--s-5); padding-block: var(--s-5);
}
.dienst-icon { flex: none; width: 30px; height: 30px; color: var(--gold-ink); }
.dienst h3 { margin-bottom: var(--s-2); }
.dienst p { font-size: var(--t-sm); line-height: 1.55; color: var(--text-muted); max-width: 46ch; }

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .split-media { order: -1; }
  .split-media img { max-height: 60vh; object-fit: cover; }
}

/* ---------- 11. Recent werk ---------------------------------------------- */
.werk-head { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-10); align-items: start; }
.werk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-3); }
.werk-item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-md); aspect-ratio: 4 / 3; isolation: isolate;
}
.werk-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.werk-item:hover img, .werk-item:focus-visible img { transform: scale(1.045); }
.werk-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--s-8) var(--s-4) var(--s-4);
  font-size: var(--t-sm); font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgb(11 13 14 / .85), transparent);
  transform: translateY(24%); opacity: 0;
  transition: transform 380ms var(--ease), opacity 380ms var(--ease);
}
.werk-item:hover figcaption, .werk-item:focus-visible figcaption { transform: none; opacity: 1; }
@media (hover: none) { .werk-item figcaption { transform: none; opacity: 1; } }

@media (max-width: 900px) {
  .werk-head { grid-template-columns: 1fr; gap: var(--s-8); }
  .werk-head .btn { justify-self: start; }
}

/* ---------- 12. Cijfers band --------------------------------------------- */
.cijfers { position: relative; overflow: hidden; padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); }
.cijfers-ghost {
  position: absolute; left: -2%; top: 50%; translate: 0 -50%;
  width: clamp(230px, 26vw, 340px); opacity: .06; pointer-events: none; user-select: none;
}
.cijfers-inner {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center;
}
.cijfers h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem); letter-spacing: -0.028em; max-width: 24ch; }
.cijfers-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.cijfer { padding-left: var(--s-6); border-left: 1px solid var(--ink-hairline); }
.cijfer:first-child { padding-left: 0; border-left: 0; }
.cijfer svg { width: 26px; height: 26px; color: var(--gold); margin-bottom: var(--s-4); }
.cijfer b { display: block; font-size: var(--t-stat); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--gold); }
.cijfer span { display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: rgb(255 255 255 / .68); }

@media (max-width: 900px) {
  .cijfers-inner { grid-template-columns: 1fr; }
  .cijfers-ghost { display: none; }
}
@media (max-width: 560px) {
  .cijfers-stats { grid-template-columns: 1fr; gap: var(--s-5); }
  .cijfer { padding-left: 0; border-left: 0; padding-top: var(--s-5); border-top: 1px solid var(--ink-hairline); }
  .cijfer:first-child { padding-top: 0; border-top: 0; }
  .cijfer svg { display: none; }
}

/* ---------- 13. Missie --------------------------------------------------- */
.missie { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: stretch; }
.missie-media { position: relative; min-height: 340px; }
.missie-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.missie-body { display: flex; flex-direction: column; justify-content: center; padding: var(--section) var(--gutter); }
.missie-body > * { max-width: 46ch; }
.missie-body h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); }
.missie-body .lead { margin-top: var(--s-4); }
.missie-body .btn { margin-top: var(--s-8); align-self: flex-start; }
@media (max-width: 900px) { .missie { grid-template-columns: 1fr; } .missie-media { min-height: 260px; } }

/* ---------- 14. Forms ---------------------------------------------------- */
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field .hint { font-size: var(--t-xs); color: var(--text-muted); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 46px; padding: var(--s-3) var(--s-4);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); font-size: var(--t-body);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgb(125 90 10 / .16);
}
.err[hidden] { display: none !important; }
.quiz-panel > .err { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-3);
  font-size: var(--t-xs); font-weight: 600; color: #FF9E92; }
.field .err { display: none; font-size: var(--t-xs); font-weight: 600; color: var(--error); }
.quiz .field .err { color: #FF9E92; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--error); }
.quiz .field.is-invalid input, .quiz .field.is-invalid textarea { border-color: #FF9E92; }
.field.is-invalid .err { display: flex; align-items: center; gap: var(--s-1); }

.consent { display: flex; gap: var(--s-3); font-size: var(--t-sm); line-height: 1.5; }
.consent input { flex: none; width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--gold-ink); }
.quiz .consent input { accent-color: var(--gold); }
.consent.is-invalid { color: var(--error); }
.quiz .consent.is-invalid { color: #FF9E92; }

.form-status { display: none; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-sm); font-size: var(--t-sm); }
.form-status.is-ok  { display: flex; background: rgb(46 125 15 / .1); color: var(--success); }
.form-status.is-err { display: flex; background: rgb(192 57 43 / .1); color: var(--error); }

/* ---------- 15. Footer --------------------------------------------------- */
.site-footer { background: var(--ink); color: rgb(255 255 255 / .72); padding-top: var(--s-16); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-10) var(--s-8); padding-bottom: var(--s-12);
}
.footer-grid img.f-logo { height: 54px; width: auto; }
.footer-grid h3 {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s-5);
}
.footer-grid p { font-size: var(--t-sm); line-height: 1.6; margin-top: var(--s-5); max-width: 34ch; }
.footer-grid li + li { margin-top: var(--s-3); }
.footer-grid a { font-size: var(--t-sm); text-decoration: none; transition: color 200ms var(--ease); }
.footer-grid a:hover { color: var(--gold); }
.f-contact li { display: flex; gap: var(--s-3); font-size: var(--t-sm); line-height: 1.55; }
.f-contact svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--gold); }
.f-social { display: flex; gap: var(--s-3); }
.f-social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--ink-hairline); border-radius: var(--r-sm);
  transition: border-color 200ms var(--ease), color 200ms var(--ease), background-color 200ms var(--ease);
}
.f-social a:hover { border-color: var(--gold); color: var(--gold); background: rgb(235 176 41 / .08); }
.f-social svg { width: 19px; height: 19px; }

.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-6); padding-block: var(--s-5);
  border-top: 1px solid var(--ink-hairline);
  font-size: var(--t-xs); color: rgb(255 255 255 / .55);
}
.footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--gold); }

@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- 16. Interior page bits --------------------------------------- */
.page-head { position: relative; background: var(--ink); color: #fff; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.page-head .crumb { font-size: var(--t-sm); color: rgb(255 255 255 / .55); margin-bottom: var(--s-4); }
.page-head .crumb a { text-decoration: none; }
.page-head .crumb a:hover { color: var(--gold); }
.page-head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); max-width: 18ch; }
.page-head .lead { margin-top: var(--s-5); color: rgb(255 255 255 / .72); }

.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); align-items: center; }
.cta-band h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); max-width: 20ch; }
.cta-band .lead { margin-top: var(--s-3); }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 800px) { .cta-band { grid-template-columns: 1fr; } }

.dienst-detail { border-top: 1px solid var(--hairline); padding-block: var(--s-12); }
.dienst-detail:first-of-type { border-top: 0; padding-top: 0; }
.dienst-detail .split { align-items: center; }
.dienst-detail h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.stappen { counter-reset: stap; margin-top: var(--s-8); display: grid; gap: var(--s-5); }
.stappen li { counter-increment: stap; display: flex; gap: var(--s-4); font-size: var(--t-sm); line-height: 1.55; }
.stappen li::before {
  content: "Stap " counter(stap); flex: none; align-self: flex-start;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--ink); color: var(--gold); font-size: var(--t-xs); font-weight: 700;
}

.faq { display: grid; gap: var(--s-3); margin-top: var(--s-10); max-width: 60rem; }
.faq details { border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--paper); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5); font-size: 1.02rem; font-weight: 700; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink);
  rotate: 45deg; translate: 0 -3px; transition: rotate 260ms var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 3px; }
.faq p { padding: 0 var(--s-5) var(--s-5); font-size: var(--t-sm); color: var(--text-muted); max-width: 64ch; }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-6); margin-top: var(--s-10); }
.waarde { padding-top: var(--s-2); }
.waarde-num {
  display: block; font-family: var(--font); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem); line-height: 1;
  color: var(--gold-ink); margin-bottom: var(--s-3);
}
.waarde h3 { margin-bottom: var(--s-2); }
.waarde p { font-size: var(--t-sm); color: var(--text-muted); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: start; }
.contact-card { display: grid; gap: var(--s-6); }
.contact-line { display: flex; gap: var(--s-4); }
.contact-line svg { flex: none; width: 22px; height: 22px; color: var(--gold-ink); margin-top: 2px; }
.contact-line b { display: block; font-size: var(--t-sm); }
.contact-line a, .contact-line span { font-size: 1.05rem; font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }
.contact-line a:hover { color: var(--gold-ink); }
.contact-line p { font-size: var(--t-sm); color: var(--text-muted); }
.contact-form { display: grid; gap: var(--s-5); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); background: var(--sand); border-radius: var(--r-lg); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .contact-form .row { grid-template-columns: 1fr; } }

/* ---------- 17. Motion --------------------------------------------------- */
/* Reveals enhance an already-visible default: no content is gated on a class. */
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal[data-d="1"] { transition-delay: 70ms; }
html.js .reveal[data-d="2"] { transition-delay: 140ms; }
html.js .reveal[data-d="3"] { transition-delay: 210ms; }
html.js .reveal[data-d="4"] { transition-delay: 280ms; }
html.js .reveal[data-d="5"] { transition-delay: 350ms; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.js .hero-anim > * { animation: rise 800ms var(--ease) backwards; }
html.js .hero-anim > *:nth-child(1) { animation-delay: 100ms; }
html.js .hero-anim > *:nth-child(2) { animation-delay: 190ms; }
html.js .hero-anim > *:nth-child(3) { animation-delay: 280ms; }
html.js .hero-quiz-anim { animation: rise 900ms var(--ease) 360ms backwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .werk-item:hover img, .werk-item:focus-visible img { transform: none; }
  .btn:hover svg { transform: none; }
}

/* ---------- 18. Print ---------------------------------------------------- */
@media print {
  .site-header, .quiz, .nav-toggle, .f-social { display: none; }
  body { color: #000; background: #fff; }
  .on-dark, .site-footer { background: #fff !important; color: #000 !important; }
}