/* =========================================================================
   Nutscontact — demo
   Concept: "het bord". Het kantoor draait op zichtbare cijfers: aan de muur
   hangen live dashboards per campagne. Het bord maakt de claim "transparant"
   zichtbaar in plaats van beweerd, maar is bewust rustig gehouden: geen
   LED-scorebord, wel een verzorgd informatiepaneel.

   Merkkleuren komen uit de bestaande WordPress-CSS van nutscontact.nl
   (#1E71A6, #071925, #0F3650), niet gegokt vanaf een screenshot.

   Opbouw: tokens → reset → utilities → header → componenten → secties →
   formulier → footer.
   ========================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Donker — de dominante ondergrond */
  --navy-900:   #071925;  /* hero, footer, scorebord-achtergrond */
  --navy-800:   #0A2333;  /* iets lichter donker vlak */
  --navy-700:   #0F3650;  /* panelen op navy */
  --navy-line:  rgba(30, 113, 166, .38); /* hairline op donker */

  /* Merk */
  --brand:      #1E71A6;  /* knopvlak met witte tekst — 5,29:1 */
  --brand-deep: #175E8C;  /* links en labels op licht — 6,99:1 */
  --brand-wash: #E8F0F6;  /* zeer lichte merktint voor vlakken */

  /* Signatuur — gedempt zand. Regel: het accent staat NOOIT op een licht vlak. */
  --accent:     #D6C3A0;  /* op --navy-900: 10,4:1 · op --navy-700: 7,3:1 · op wit: 1,73 ✗ */
  --accent-dim: #A8946E;  /* alleen voor decoratieve lijnen op donker */

  /* Licht */
  --bg:         #FFFFFF;
  --paper:      #F2F5F7;
  --ink:        #0C1B26;  /* 17,4:1 op wit */
  --ink-soft:   #4A5A66;  /* 7,83:1 op wit */
  --line:       #DCE4EA;

  /* Tekst op donker */
  --on-navy:      #FFFFFF;
  --on-navy-soft: #A9BFCE; /* 9,47:1 op --navy-900 · 6,62:1 op --navy-700 */

  --danger:     #C0392B;
  --fout-lijn:  #E8877A;  /* randkleur van een ongeldig formulierveld op donker */

  /* Typografie — drie rollen: display / body / data */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ritme */
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem;
  --s-section: clamp(4.5rem, 8vw, 7.5rem);

  --wrap: 1180px;
  --radius: 3px;
  --radius-lg: 6px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 72px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
li { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: var(--brand-deep); text-underline-offset: .22em; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
table { border-collapse: collapse; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Op donkere vlakken moet de ring zelf oplichten */
.op-navy :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--accent); }

::selection { background: var(--brand); color: #fff; }

/* ── Typografie ─────────────────────────────────────────────────────────── */
/* Barlow Condensed blijft, maar in zinsvorm en met meer lucht. Hoofdletters
   zijn voorbehouden aan de kleine mono-labels (.eyebrow, .bord__meta, dt's):
   daar is het een labelconventie, in een kop is het stemverheffing. */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.h1 { font-size: clamp(2.6rem, 7.2vw, 5rem); }
.h2 { font-size: clamp(2rem, 4.6vw, 3.15rem); }
.h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }

.lead {
  font-size: clamp(1.075rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}
.op-navy .lead { color: var(--on-navy-soft); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-data);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 var(--s-2);
}
.op-navy .eyebrow { color: var(--accent); }

.mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 48em) { .wrap { width: min(100% - 4rem, var(--wrap)); } }

.section { padding-block: var(--s-section); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4rem); }
.op-navy { background: var(--navy-900); color: var(--on-navy); }
.op-paper { background: var(--paper); }

.kop { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.kop .lead { margin-top: var(--s-2); }

.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;
}

.skip {
  position: absolute; left: var(--s-2); top: -4rem; z-index: 200;
  background: var(--accent); color: var(--navy-900);
  padding: .7rem 1.1rem; font-weight: 600; border-radius: var(--radius);
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--s-2); color: var(--navy-900); }

/* ── Knoppen ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radius);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primair { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primair:hover { background: #185C88; border-color: #185C88; color: #fff; }

.btn--ghost-licht { color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost-licht:hover { border-color: var(--accent); color: var(--accent); }

.btn--ghost-donker { color: var(--brand-deep); border-color: var(--brand-deep); }
.btn--ghost-donker:hover { background: var(--brand-deep); color: #fff; }

.btn-rij { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.pijl-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  letter-spacing: .01em; text-decoration: none;
  color: var(--brand-deep);
}
.pijl-link::after { content: '→'; transition: transform .18s var(--ease); }
.pijl-link:hover::after { transform: translateX(4px); }
.op-navy .pijl-link { color: var(--accent); }
.op-navy .pijl-link:hover { color: #fff; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header[data-scrolled='true'] {
  border-bottom-color: var(--navy-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.header-in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--header-h);
}

.merk { display: inline-flex; align-items: center; text-decoration: none; color: #fff; }
.merk svg { width: 168px; height: auto; fill: currentColor; }

.hoofdnav ul { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem); }
.hoofdnav a {
  display: block; padding: .45rem 0;
  color: var(--on-navy-soft); text-decoration: none;
  font-size: .96rem; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.hoofdnav a:hover { color: #fff; border-bottom-color: var(--accent); }
.hoofdnav a[aria-current='page'] { color: #fff; border-bottom-color: var(--accent); }

.header-cta { display: none; }

.menu-knop {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .5rem .75rem;
  background: none; border: 1px solid var(--navy-line); border-radius: var(--radius);
  color: #fff; font-family: var(--font-display); font-size: .95rem;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.menu-knop__streep { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.menu-knop__streep::before,
.menu-knop__streep::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; }
.menu-knop__streep::before { top: -6px; }
.menu-knop__streep::after { top: 6px; }
.menu-knop[aria-expanded='true'] .menu-knop__streep { background: transparent; }
.menu-knop[aria-expanded='true'] .menu-knop__streep::before { top: 0; transform: rotate(45deg); }
.menu-knop[aria-expanded='true'] .menu-knop__streep::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 61.9375em) {
  .hoofdnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy-800);
    border-bottom: 1px solid var(--navy-line);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
    display: none;
  }
  .hoofdnav[data-open='true'] { display: block; }
  .hoofdnav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2) 0; }
  .hoofdnav li { border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .hoofdnav li:last-child { border-bottom: 0; }
  .hoofdnav a {
    padding: 1rem 1.25rem; font-size: 1.05rem;
    border-bottom: 0; border-left: 3px solid transparent;
  }
  .hoofdnav a:hover,
  .hoofdnav a[aria-current='page'] { border-left-color: var(--accent); background: rgba(255, 255, 255, .04); }
}

@media (min-width: 62em) {
  .menu-knop { display: none; }
  .header-cta { display: inline-flex; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--navy-900);
  color: var(--on-navy);
  padding-block: clamp(3.25rem, 8vw, 6.5rem) clamp(3.25rem, 7vw, 5.5rem);
  overflow: hidden;
}
/* Zacht raster op de achtergrond — de lijnen van een bord, niet decoratief geklets */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(30, 113, 166, .15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 113, 166, .15) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 75% 10%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 75% 10%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero--kort { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.hero--kort .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero--kort .lead { margin-bottom: 0; }

.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62em) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(3rem, 5vw, 5rem); }
}

.hero h1 { margin-bottom: var(--s-3); max-width: 18ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { margin-bottom: var(--s-4); }
.hero .btn-rij { margin-bottom: var(--s-3); }

.hero-noot {
  font-family: var(--font-data); font-size: .8rem; letter-spacing: .04em;
  color: var(--on-navy-soft);
}

/* ── Signature: het informatiebord ──────────────────────────────────────── */
.bord {
  position: relative;
  background: var(--navy-700);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Was een tweekleurige LED-strip; nu een effen merkregel. Datzelfde paneel,
   maar het leest als een informatiebord in plaats van een scorebord. */
.bord::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand);
}

.bord__kop {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 1.1rem 1.35rem .9rem;
  border-bottom: 1px solid var(--navy-line);
}
.bord__label {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  letter-spacing: .01em; color: #fff;
}
.bord__meta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-data); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-soft);
}
.bord__stip {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(214, 195, 160, .18);
}

.bord__rijen { padding: .35rem 1.35rem 1.1rem; }
.bord__rij {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding: .95rem 0;
  border-bottom: 1px solid rgba(169, 191, 206, .16);
}
.bord__rij:last-child { border-bottom: 0; }
.bord__rij dt {
  font-size: .875rem; font-weight: 500; color: var(--on-navy-soft);
  letter-spacing: .01em;
}
.bord__rij dd {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600;
  color: var(--accent); white-space: nowrap;
}
.bord__rij dd small { font-size: .62em; font-weight: 500; color: var(--on-navy-soft); }
/* Waarden die geen cijfer zijn krijgen wél de bordtypografie, maar niet de
   schreeuwende cijfergrootte. */
.bord__rij dd.bord__woord { font-size: 1.05rem; }

/* Prijzenkast-variant: een uitspraak en een foto binnen dezelfde bordtaal. */
.bord__uitspraak {
  margin: 0 0 1rem; color: #fff;
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  line-height: 1.2;
}
.bord__datum {
  font-family: var(--font-data); font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin: .5rem 0 .75rem;
}
.bord__foto { border-radius: var(--radius); width: 100%; }

.bord__voet {
  padding: .95rem 1.35rem;
  border-top: 1px solid var(--navy-line);
  background: rgba(7, 25, 37, .5);
  font-size: .85rem; line-height: 1.5; color: var(--on-navy-soft);
}

/* ── Bewijs ─────────────────────────────────────────────────────────────── */
.bewijs__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 56em) { .bewijs__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* De foto ligt bovenop het kader (z-index 1) zodat het lijnenspel er alleen
   rechtsonder onderuit piept. Geen negatieve z-index: die zou onder de
   sectie-achtergrond verdwijnen. */
.foto-kader { position: relative; }
.foto-kader img { position: relative; z-index: 1; border-radius: var(--radius-lg); width: 100%; }
.foto-kader::after {
  content: ''; position: absolute; right: -14px; bottom: -14px;
  width: 62%; height: 62%;
  border-right: 3px solid var(--brand); border-bottom: 3px solid var(--brand);
  border-bottom-right-radius: var(--radius-lg);
}
@media (max-width: 47.9375em) { .foto-kader::after { display: none; } }

.feitenlijst { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.feitenlijst li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2);
  align-items: baseline;
  padding: 1rem 0; border-top: 1px solid var(--line);
}
.feitenlijst li:last-child { border-bottom: 1px solid var(--line); }
.feitenlijst b {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; font-weight: 600; color: var(--brand-deep);
  white-space: nowrap;
}
.feitenlijst span { color: var(--ink-soft); font-size: .98rem; }

/* ── Tweekolomssectie met een bord ernaast ──────────────────────────────── */
.verdien__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62em) { .verdien__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Werkt op licht én op donker: de kleuren zijn per achtergrond gescopet, zodat
   dit blok in WordPress in elke sectie geplaatst kan worden. */
.voorwaarden { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.voorwaarden li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
/* Variant voor een lijst die de volle breedte van de wrap krijgt: dan is één
   kolom te wijd om prettig te lezen. */
@media (min-width: 56em) {
  .voorwaarden--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
}
.voorwaarden svg { width: 22px; height: 22px; flex: none; margin-top: .28rem; color: var(--brand-deep); }
.voorwaarden b { display: block; color: var(--ink); font-weight: 600; }
.voorwaarden span { color: var(--ink-soft); font-size: .96rem; }
.op-navy .voorwaarden svg { color: var(--accent); }
.op-navy .voorwaarden b { color: #fff; }
.op-navy .voorwaarden span { color: var(--on-navy-soft); }

/* ── Transparant ────────────────────────────────────────────────────────── */
.transparant__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 56em) { .transparant__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

.citaat {
  margin-top: var(--s-4); padding-left: var(--s-3);
  border-left: 3px solid var(--brand);
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 600; line-height: 1.25; color: var(--ink);
}
.op-navy .citaat { color: #fff; border-left-color: var(--accent); }

/* ── Route ──────────────────────────────────────────────────────────────── */
.route { display: grid; gap: 0; }
.route__stap {
  position: relative;
  display: grid; gap: var(--s-2);
  grid-template-columns: 3.25rem 1fr;
  padding: clamp(1.5rem, 3vw, 2.15rem) 0;
  border-top: 1px solid var(--line);
}
.route__stap:last-child { border-bottom: 1px solid var(--line); }
.route__nr {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; font-weight: 600; color: var(--brand);
  letter-spacing: .02em; padding-top: .25rem;
}
.route__tekst h3 { margin-bottom: .5rem; color: var(--ink); }
.route__tekst p { color: var(--ink-soft); max-width: 62ch; }

@media (min-width: 56em) {
  .route__stap { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, .55fr); align-items: center; gap: var(--s-4); }
  .route__foto { justify-self: end; width: 100%; max-width: 260px; }
  .route__foto img { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
}
@media (max-width: 55.9375em) { .route__foto { display: none; } }

/* ── De club (bento) ────────────────────────────────────────────────────── */
.club { display: grid; gap: var(--s-2); }
@media (min-width: 48em) { .club { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .club { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); } }

.club__kaart {
  position: relative;
  background: var(--navy-700);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.club__kaart h3 { color: #fff; margin-bottom: .6rem; }
.club__kaart p { color: var(--on-navy-soft); font-size: .98rem; margin: 0; }

.club__foto {
  position: relative;
  border-radius: var(--radius-lg); overflow: hidden;
  min-height: 220px;
}
.club__foto img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.club__foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 2.5rem 1.15rem 1rem;
  background: linear-gradient(to top, rgba(7, 25, 37, .92), rgba(7, 25, 37, 0));
  font-family: var(--font-data); font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}

@media (min-width: 62em) {
  .club__kaart--breed { grid-column: span 4; }
  .club__kaart--smal  { grid-column: span 2; }
  .club__foto--hoog   { grid-column: span 2; grid-row: span 2; min-height: 320px; }
  .club__foto--breed  { grid-column: span 4; min-height: 240px; }
}

/* ── Opdrachtgevers ─────────────────────────────────────────────────────── */
.opdracht__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 56em) { .opdracht__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

.streeplijst { display: grid; gap: .7rem; margin: var(--s-3) 0 var(--s-4); }
.streeplijst li {
  position: relative; padding-left: 1.6rem; color: var(--ink-soft);
}
.streeplijst li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 10px; height: 2px; background: var(--brand);
}
.streeplijst b { color: var(--ink); font-weight: 600; }
.op-navy .streeplijst li { color: var(--on-navy-soft); }
.op-navy .streeplijst b { color: #fff; }
.op-navy .streeplijst li::before { background: var(--accent); }

/* ── Twee paden (contactpagina) ─────────────────────────────────────────── */
.paden { display: grid; gap: var(--s-3); }
@media (min-width: 48em) { .paden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pad {
  display: block; padding: clamp(1.5rem, 3vw, 2.15rem);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink);
  border-left: 4px solid var(--brand);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.pad:hover { color: var(--ink); box-shadow: 0 12px 30px rgba(12, 27, 38, .1); transform: translateY(-3px); }
.pad h2 { margin-bottom: .5rem; }
.pad p { color: var(--ink-soft); font-size: .98rem; }
.pad .pijl-link { margin-top: var(--s-2); pointer-events: none; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { max-width: 76ch; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600; letter-spacing: .01em;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand-deep); }
.faq__teken {
  flex: none; width: 24px; height: 24px; position: relative;
}
.faq__teken::before,
.faq__teken::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--brand); border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.faq__teken::before { width: 16px; height: 2px; }
.faq__teken::after  { width: 2px; height: 16px; }
.faq__item[open] .faq__teken::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.faq__antwoord { padding: 0 0 1.4rem; color: var(--ink-soft); max-width: 68ch; }

/* ── Formulier ──────────────────────────────────────────────────────────── */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 56em) { .contact__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

.formulier { display: grid; gap: var(--s-3); }
.veld { display: grid; gap: .4rem; }
.veld--breed { grid-column: 1 / -1; }
@media (min-width: 40em) { .formulier__rij { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } }

.veld label {
  font-family: var(--font-data); font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-soft);
}
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem;
  font: inherit; font-size: 1rem;
  color: #fff; background: rgba(255, 255, 255, .05);
  border: 1px solid var(--navy-line); border-radius: var(--radius);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.veld textarea { min-height: 130px; resize: vertical; }
.veld input::placeholder, .veld textarea::placeholder { color: rgba(169, 191, 206, .65); }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: rgba(169, 191, 206, .5); }
.veld input:focus, .veld select:focus, .veld textarea:focus { background: rgba(255, 255, 255, .09); }
/* Foutstatus zit hier en niet in de JS, zodat er geen kleur buiten de tokens om
   wordt gezet. Zand zou als foutsignaal ook semantisch niet kloppen. */
.veld .is-fout, .veld input.is-fout, .veld select.is-fout, .veld textarea.is-fout {
  border-color: var(--fout-lijn);
}
.veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #A9BFCE 50%), linear-gradient(135deg, #A9BFCE 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.akkoord { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.akkoord input { width: 22px; height: 22px; min-height: 0; margin-top: .18rem; accent-color: var(--accent); }
.akkoord label { font-family: var(--font-body); font-size: .9rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--on-navy-soft); }
.akkoord a { color: var(--accent); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* In de demo heette dit .demo-noot en stond hier de mededeling dat het formulier
   niets verstuurde. Nu is het de terugvalmelding als het formulier ontbreekt;
   het meldingsvlak van CF7 zelf staat verderop bij het CF7-blok. */
.form-melding {
  padding: .85rem 1rem; border-left: 3px solid var(--accent);
  background: rgba(214, 195, 160, .09);
  font-size: .875rem; color: var(--on-navy-soft);
}

.contactkaart {
  background: var(--navy-700); border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 56em) {
  .contactkaart { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.contactkaart h3 { color: #fff; margin-bottom: var(--s-2); }
.gegevens { display: grid; gap: 1.05rem; }
.gegevens div { display: grid; gap: .15rem; }
.gegevens dt {
  font-family: var(--font-data); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-soft);
}
.gegevens dd { color: #fff; font-size: 1rem; }
.gegevens dd a { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.gegevens dd a:hover { color: var(--accent); }

.uren { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--navy-line); }
.uren tr th, .uren tr td { padding: .35rem 0; text-align: left; font-size: .95rem; font-weight: 400; }
.uren tr th { color: var(--on-navy-soft); padding-right: var(--s-3); }
.uren tr td { color: #fff; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: .9rem; }

/* ── CTA-band ───────────────────────────────────────────────────────────── */
.cta-band { background: var(--brand); color: #fff; }
.cta-band__in { display: grid; gap: var(--s-3); align-items: center; }
@media (min-width: 56em) { .cta-band__in { grid-template-columns: 1fr auto; gap: var(--s-5); } }
.cta-band .display { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .92); margin: .75rem 0 0; max-width: 52ch; }
.cta-band .btn--wit { background: #fff; color: #0F3650; border-color: #fff; }
.cta-band .btn--wit:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.cta-band :focus-visible { outline-color: #fff; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy-900); color: var(--on-navy-soft); padding-block: clamp(3rem, 6vw, 4.5rem) var(--s-4); }
.footer-grid { display: grid; gap: var(--s-4); }
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--s-5); } }

.site-footer .merk svg { width: 178px; margin-bottom: var(--s-2); }
.site-footer h2 {
  font-family: var(--font-data); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  margin-bottom: var(--s-2);
}
.site-footer ul { display: grid; gap: .55rem; }
.site-footer a { color: var(--on-navy-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-slogan { max-width: 40ch; font-size: .96rem; }

.footer-onder {
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid var(--navy-line);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  justify-content: space-between; align-items: center;
  font-size: .84rem;
}
.footer-onder p { margin: 0; }

/* ── Reveal-on-scroll ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-zichtbaar { opacity: 1; transform: none; }

/* ── Tekstpagina ────────────────────────────────────────────────────────────
   Voor inhoud die uit de paginabewerker komt in plaats van uit een template:
   de privacyverklaring. Die staat in WPBakery-shortcodes, dus er zitten lagen
   <div> omheen (.vc_row, .wpb_wrapper). Die zijn zonder de WPBakery-CSS gewoon
   blokken, dus alleen de tekstelementen zelf hebben opmaak nodig. */
.tekstinhoud { max-width: 68ch; }
.tekstinhoud > * + *,
.tekstinhoud .wpb_wrapper > * + * { margin-top: var(--s-2); }
.tekstinhoud p, .tekstinhoud li { color: var(--ink-soft); }
.tekstinhoud h2, .tekstinhoud h3, .tekstinhoud h4 {
  margin-top: var(--s-4); font-family: var(--font-display);
  font-weight: 600; line-height: 1.2; color: var(--ink);
}
.tekstinhoud h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.tekstinhoud h3 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); }
.tekstinhoud h4 { font-size: 1.15rem; }
.tekstinhoud ul, .tekstinhoud ol { padding-left: 1.25rem; }
.tekstinhoud li + li { margin-top: .4rem; }
/* In de privacyverklaring staan volledige URL's als linktekst. Zonder afbreken
   duwen die op 375px de hele pagina 158px breder dan het scherm. */
.tekstinhoud { overflow-wrap: break-word; }
.tekstinhoud a { color: var(--brand-deep); overflow-wrap: anywhere; }
.tekstinhoud strong, .tekstinhoud b { color: var(--ink); font-weight: 600; }
.tekstinhoud table { width: 100%; border-collapse: collapse; }
.tekstinhoud th, .tekstinhoud td {
  padding: .6rem .75rem; text-align: left; border-bottom: 1px solid rgba(12, 27, 38, .12);
}
.tekstinhoud img { max-width: 100%; height: auto; }

/* ── Contact Form 7 ─────────────────────────────────────────────────────────
   De demo had kale <input>-elementen als directe kinderen van .veld. CF7 wikkelt
   elk veld in een <span class="wpcf7-form-control-wrap">, en bij een acceptance
   zelfs in drie geneste elementen met een <label> eromheen. De selectors
   hierboven (.veld input, .veld select, .veld textarea) zijn descendant-selectors
   zonder >, dus die blijven gewoon werken. Wat hier staat, herstelt de dingen
   die wél op de directe structuur leunden.

   Dit blok staat bewust vóór de prefers-reduced-motion-regels hieronder: dat
   blok moet het laatst blijven, anders wint het niet meer. */

/* De wrapper is inline. Als grid-item in .veld moet hij de hele cel vullen,
   anders krijgt het veld eronder niet de volle breedte. */
.wpcf7-form-control-wrap { display: block; }

/* De akkoordregel. CF7 maakt hier één grid-item van in plaats van twee, dus de
   kolomindeling verhuist naar het <label> dat CF7 eromheen zet. */
.akkoord { display: block; }
.akkoord .wpcf7-list-item { margin: 0; }
.akkoord label {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  cursor: pointer;
}
.akkoord .wpcf7-list-item-label { display: block; }

/* CF7 zet zijn eigen klasse op een ongeldig veld. Die haakt hier aan dezelfde
   token als .is-fout, zodat de foutkleur op één plek staat. */
.veld .wpcf7-not-valid { border-color: var(--fout-lijn); }
.wpcf7-not-valid-tip {
  margin-top: .35rem;
  font-family: var(--font-data); font-size: .78rem; font-weight: 500;
  letter-spacing: .02em; color: var(--fout-lijn);
}

/* [submit] is een <input>, geen <button>. Vandaar geen pointer en op iOS een
   native uiterlijk dat over .btn heen walst. */
.formulier input[type='submit'] { appearance: none; cursor: pointer; }

/* Het meldingsvlak. De selectors zijn hier expres net zo diep als die van CF7
   zelf (.wpcf7 form .wpcf7-response-output): met een kortere selector wint de
   blauwe standaardrand van CF7, hoe laat deze regels ook in het bestand staan. */
.wpcf7 form .wpcf7-response-output {
  margin: 0 0 var(--s-2); padding: .85rem 1rem;
  border: 0; border-left: 3px solid var(--accent);
  background: rgba(214, 195, 160, .09);
  font-size: .875rem; color: var(--on-navy-soft);
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--accent); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-left-color: var(--fout-lijn); background: rgba(232, 135, 122, .1);
}

.wpcf7-spinner { background-color: var(--accent); }

/* ── Cookiebanner ───────────────────────────────────────────────────────────
   De accepteerknop van CookieYes staat op #4D99CA met witte tekst: 3,12:1, en
   dat zakt door AA heen. De merkblauw uit de tokens haalt 5,29:1 met wit en
   past bovendien bij de rest. Dit geldt alleen op de nieuwe pagina's, want
   alleen daar wordt deze stylesheet geladen. */
.cli-plugin-button.cli-plugin-main-button,
#cookie_action_close_header,
.wt-cli-accept-btn,
.wt-cli-accept-all-btn {
  background: var(--brand) !important;
  color: #fff !important;
}
.cli-plugin-button.cli-plugin-main-button:hover,
#cookie_action_close_header:hover,
.wt-cli-accept-btn:hover,
.wt-cli-accept-all-btn:hover {
  background: #185C88 !important;
}

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

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .menu-knop, .cta-band, .hero::before { display: none; }
  body { color: #000; background: #fff; }
}