/* ==========================================================================
   Special Security Group - design system
   Brandkit (overgenomen van de bestaande huisstijl):
     navy #05437f: primaire merkkleur
     logoblauw #164d8b: blauw uit het beeldmerk
     accent #68ccd1: lichtblauw/turquoise accent
     grijs #737373: logogrijs / secundaire tekst
     lichtgrijs#d8d8d8: lijnen en vlakken
     antraciet #383838: tekstkleur
   ========================================================================== */

:root {
  /* --- brand ---------------------------------------------------------- */
  --navy:          #05437f;
  --navy-700:      #043768;
  --navy-800:      #032a50;
  --navy-900:      #07203a;
  --navy-950:      #04162a;
  --brand-blue:    #164d8b;
  --brand-blue-400:#3d7ec4;
  --accent:        #68ccd1;
  --accent-700:    #2fa3ab;
  --grey:          #737373;
  --grey-light:    #d8d8d8;
  --charcoal:      #383838;

  /* --- semantische tokens (licht) -------------------------------------- */
  --bg:            #ffffff;
  --bg-alt:        #f4f6f9;
  --bg-soft:       #eef2f7;
  --surface:       #ffffff;
  --text:          #1e2836;
  --text-soft:     #56616f;
  --text-dim:      #5c6875; /* a11y-fix: was #7b8694 (3.70:1 op wit, 3.42:1 op --bg-alt) faalde WCAG AA 4.5:1). Nieuwe waarde: 5.69:1 / 5.25:1. */
  --line:          #e2e7ee;
  --line-strong:   #cbd3de;

  /* --- op donkere vlakken ---------------------------------------------- */
  --d-text:        #f2f5f9;
  --d-text-soft:   #b8c4d2;
  --d-line:        rgba(255, 255, 255, .16);

  /* --- type ------------------------------------------------------------ */
  --font-display: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- layout ---------------------------------------------------------- */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 16px;
  --radius-sm: 10px;
  --header-h: 86px;

  --shadow-sm: 0 1px 2px rgba(7, 32, 58, .06), 0 2px 8px rgba(7, 32, 58, .05);
  --shadow-md: 0 4px 12px rgba(7, 32, 58, .07), 0 16px 32px -16px rgba(7, 32, 58, .18);
  --shadow-lg: 0 24px 60px -22px rgba(7, 32, 58, .35);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ----------------------------------------------------- self-hosted fonts */
/* Vervangt de render-blokkerende Google Fonts-koppeling. Eén variabel
   bestand per familie dekt alle gebruikte gewichten (400–700), alleen de
   latin-subset (geen cyrillic/greek/vietnamese). Werkt volledig offline. */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/lexend-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

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

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Logo's hebben een vaste hoogte; breedte moet altijd meeschalen zodat de
   width/height-attributen de beeldverhouding niet platdrukken. */
.brand img, .footer-brand img { width: auto; max-width: none; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--navy-900);
  margin: 0 0 .6em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.2rem, 5.6vw, 4.1rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); font-weight: 700; }
h3 { font-size: clamp(1.12rem, 1.5vw, 1.35rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .5em; }

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

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

/* ------------------------------------------------------------- helpers -- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 900px; }

.section { padding-block: clamp(4rem, 8vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--alt { background: var(--bg-alt); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem;
  border-radius: 8px; font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.kicker {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 1.05rem;
}
.kicker::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--navy), var(--accent));
}

.lead { font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--text-soft); }
.muted { color: var(--text-soft); }

/* De kop mag de volle breedte van de container gebruiken. Hier stond 720px
   voor het hele blok, en dat brak koppen halverwege af: "Zo bereiden wij uw"
   op de ene regel en "bijeenkomst voor" op de volgende, terwijl er rechts nog
   een halve pagina leeg was. De tekst eronder houdt wél een regellengte, want
   een lopende zin van 1200 pixels breed leest niet. */
.section-head { max-width: none; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section-head > p { max-width: 780px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center > p { margin-inline: auto; }
.section-head--center .kicker::before { display: none; }
.section-head p:last-child { margin-bottom: 0; }

/* donkere secties -------------------------------------------------------- */
.on-dark { color: var(--d-text-soft); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .kicker { color: var(--accent); }
.on-dark .kicker::before { background: linear-gradient(90deg, var(--accent), transparent); }
.on-dark .lead, .on-dark p { color: var(--d-text-soft); }

/* -------------------------------------------------------------- button -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px;
  padding: .8rem 1.55rem;
  background: var(--navy); color: #fff;
  border: 2px solid var(--navy); border-radius: 999px;
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease), color .22s var(--ease);
}
.btn:hover { background: var(--navy-700); border-color: var(--navy-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); box-shadow: none; }
.btn--ghost:hover { background: var(--bg-soft); border-color: var(--navy); color: var(--navy); box-shadow: none; }

.on-dark .btn--ghost, .cta-band .btn--ghost, .hero .btn--ghost, .page-hero .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px);
}
.on-dark .btn--ghost:hover, .cta-band .btn--ghost:hover, .hero .btn--ghost:hover, .page-hero .btn--ghost:hover {
  background: rgba(255,255,255,.12); border-color: #fff; color: #fff;
}

.btn--accent { background: var(--accent-700); border-color: var(--accent-700); color: #04212c; }
.btn--accent:hover { background: var(--accent); border-color: var(--accent); color: #04212c; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: .93rem;
  color: var(--navy);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg, a:hover .link-arrow svg { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--accent); }

/* -------------------------------------------------------------- header -- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease), height .35s var(--ease);
}
.site-header.is-stuck {
  height: 70px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 18px rgba(7, 32, 58, .07);
}

.site-header .container { display: flex; align-items: center; gap: 1.25rem; }

.brand { display: flex; align-items: center; margin-right: auto; }
/* De hoogtes komen uit Bedrijfsgegevens en staan in het gegenereerde
   assets/css/logo.css. De waarden hier zijn het vangnet als dat bestand er niet
   is. */
.brand img { height: var(--logo-hoogte-open, 42px); width: auto; transition: height .35s var(--ease), filter .35s var(--ease); }
.site-header.is-stuck .brand img { height: var(--logo-hoogte-vast, 34px); }

/* Twee logo's in de balk: één voor de doorzichtige toestand boven de foto en
   één voor de balk zodra die vastplakt. Ze zijn los in te stellen bij
   Bedrijfsgegevens; kiest de klant er maar één, dan staat er twee keer
   hetzelfde beeld en valt er niets op. */
.brand__logo--vast { display: none; }
.site-header.is-stuck .brand__logo--open { display: none; }
.site-header.is-stuck .brand__logo--vast { display: block; }

/* Zolang er geen apart logo voor de doorzichtige balk is gekozen, wordt het
   standaardlogo wit gemaakt, anders verdwijnt het donkere beeldmerk in de
   foto erachter. Kiest de klant er wél een, dan blijft dat ongemoeid: hij
   heeft dan zelf bepaald hoe het eruit hoort te zien. */
.brand--wit .brand__logo--open { filter: brightness(0) invert(1); }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a, .nav-item > button {
  position: relative;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .8rem;
  font-family: var(--font-body); font-size: .93rem; font-weight: 500;
  color: #fff; opacity: .88;
  background: none; border: 0; cursor: pointer;
  border-radius: 8px; white-space: nowrap;
  transition: opacity .2s, color .2s;
}
.site-header.is-stuck .nav a, .site-header.is-stuck .nav-item > button { color: var(--navy-900); opacity: .78; }
.nav a:hover, .nav-item > button:hover, .nav-item.is-open > button { opacity: 1; }
.site-header.is-stuck .nav a:hover, .site-header.is-stuck .nav-item > button:hover { opacity: 1; color: var(--navy); }
.nav a[aria-current="page"] { opacity: 1; font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.nav-item > button svg { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.nav-item.is-open > button svg { transform: rotate(180deg); }

.nav-item { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0;
  min-width: 268px; padding: .5rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  display: grid; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  padding: .62rem .8rem; border-radius: 9px; font-size: .9rem;
  color: var(--text-soft); opacity: 1;
}
.dropdown a:hover { background: var(--bg-soft); color: var(--navy); }
.dropdown a[aria-current="page"] { color: var(--navy); background: var(--bg-soft); }
.dropdown a[aria-current="page"]::after { display: none; }

.header-cta { display: inline-flex; }
.site-header:not(.is-stuck) .header-cta {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); backdrop-filter: blur(8px);
}
.site-header:not(.is-stuck) .header-cta:hover { background: #fff; color: var(--navy); border-color: #fff; }

.burger {
  display: none;
  width: 48px; height: 48px; padding: 0;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
  border-radius: 12px; cursor: pointer;
  align-items: center; justify-content: center;
}
.site-header.is-stuck .burger { background: var(--bg-soft); border-color: var(--line); }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .3s var(--ease), top .3s var(--ease), background .2s;
}
.site-header.is-stuck .burger span,
.site-header.is-stuck .burger span::before,
.site-header.is-stuck .burger span::after { background: var(--navy-900); }
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
body.nav-open .burger span::after  { top: 0; transform: rotate(-45deg); }

/* mobiele drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: #fff;
  padding: calc(var(--header-h) + 1.25rem) var(--gutter) 2.5rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: translateY(0); }
body.nav-open { overflow: hidden; }
.mobile-nav a {
  display: block; padding: .8rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 600;
  color: var(--navy-900);
}
.mobile-nav a[aria-current="page"] { color: var(--navy); }
.mobile-nav .sub { padding-left: 1rem; }
.mobile-nav .sub a { font-size: .98rem; font-weight: 500; color: var(--text-soft); }
.mobile-nav .mobile-actions { margin-top: 2rem; display: grid; gap: .75rem; }
.mobile-nav .btn { width: 100%; }

/* ---------------------------------------------------------------- hero -- */
/* Overlay op een foto: kleur en dichtheid
   ---------------------------------------
   De hero, de paginakop en de oproepbalk leggen een gekleurd waas over hun
   foto, anders is witte tekst er niet op te lezen. Hoe zwaar dat waas is, hing
   tot nu toe vast in deze regels, en elke wens om het lichter te krijgen werd
   een ronde langs deze bestanden.

   Nu staan de kleur en de dichtheid in variabelen. Elk blok kan ze los zetten
   met een klasse uit de lijst hieronder; die lijst is eindig, dus er kan nooit
   een willekeurige waarde in de HTML terechtkomen. Dat is ook precies waarom
   het geen vrij in te vullen kleur is: een inline stijl zou het
   beveiligingsbeleid van de site breken, dat inline stijlen niet toestaat.

   --ov-dicht is een factor op wat er stond. 1 is dus onveranderd, .95 is vijf
   procent lichter. De verhouding tussen de stops blijft gelijk, zodat de
   overgang van donker naar doorzichtig zijn vorm houdt. */
.hero, .page-hero, .cta-band {
  --ov-donker: 4,22,42;      /* het donkere anker, standaard bijna zwartblauw */
  --ov-licht: 5,67,127;      /* de blauwe zweem die naar de foto toe uitdooft */
  --ov-dicht: 1;
}

.ov-kleur--zwart  { --ov-donker: 0,0,0;      --ov-licht: 14,16,20; }
.ov-kleur--blauw  { --ov-donker: 5,45,90;    --ov-licht: 12,110,190; }
.ov-kleur--grijs  { --ov-donker: 24,28,34;   --ov-licht: 60,68,80; }

.ov-dicht--110 { --ov-dicht: 1.1; }
.ov-dicht--105 { --ov-dicht: 1.05; }
.ov-dicht--95  { --ov-dicht: .95; }
.ov-dicht--90  { --ov-dicht: .9; }
.ov-dicht--85  { --ov-dicht: .85; }
.ov-dicht--80  { --ov-dicht: .8; }
.ov-dicht--70  { --ov-dicht: .7; }
.ov-dicht--60  { --ov-dicht: .6; }

.hero {
  position: relative;
  min-height: min(92svh, 880px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden; isolation: isolate;
  background: var(--navy-950);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* Op hoogte gecentreerd: de uitsnede pakt het midden van de foto in plaats van
   het bovenste deel. Stond op 35%, waardoor bij liggende foto's de onderkant
   wegviel. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(var(--ov-donker), calc(.88 * var(--ov-dicht))) 0%,
      rgba(var(--ov-donker), calc(.45 * var(--ov-dicht))) 38%,
      rgba(var(--ov-donker), calc(.93 * var(--ov-dicht))) 88%,
      var(--navy-950) 100%),
    linear-gradient(100deg,
      rgba(var(--ov-licht), calc(.72 * var(--ov-dicht))) 0%,
      rgba(var(--ov-licht), calc(.15 * var(--ov-dicht))) 55%,
      transparent 80%);
}
.hero__inner { width: 100%; }
/* Kop en tekst lopen over de volle breedte van de container; geen regellengte-
   beperking meer. Zie ook .page-hero h1 / .page-hero p verderop. */
.hero h1 { color: #fff; margin-bottom: 1.3rem; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { font-size: clamp(1.03rem, 1.35vw, 1.18rem); color: var(--d-text-soft); }
.hero .kicker { color: var(--accent); }
.hero .kicker::before { background: linear-gradient(90deg, var(--accent), transparent); }
.hero .btn-row { margin-top: 1.9rem; }

/* feitenbalk */
.factbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.factbar div { background: #fff; padding: 1.3rem 1.4rem; }
.factbar dt { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; color: var(--navy); line-height: 1.15; }
.factbar dd { margin: .3rem 0 0; font-size: .87rem; color: var(--text-soft); line-height: 1.45; }

.hero .factbar { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); }
.hero .factbar div { background: rgba(4,22,42,.8); backdrop-filter: blur(10px); } /* a11y-fix: was .55; met een lichte foto op de achtergrond zakte de tekst tot 4.07:1 (dt) / 2.30:1 (dd), faalt 4.5:1. .8 geeft ≥9.8:1 / ≥5.5:1 in het slechtste geval. */
.hero .factbar dt { color: #fff; }
.hero .factbar dd { color: var(--d-text-soft); }

/* subpagina-hero */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden; isolation: isolate;
  background: var(--navy-950);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Nogmaals 6 punten lichter, zodat de foto verder doorkomt. Verder gaan kan
     niet zonder de tekst eronder te verzwakken: bij 10 punten zakt de zachte
     introtekst op de hoogte van de kop naar 4.09:1 en het kruimelpad naar
     4.45:1, allebei onder de 4.5:1 die kleine tekst nodig heeft. Bij deze 6
     punten blijft het slechtste geval, een spierwitte foto erachter, op
     4.70:1 voor de intro en 4.90:1 voor het kruimelpad. */
  background:
    linear-gradient(180deg,
      rgba(var(--ov-donker), calc(.79 * var(--ov-dicht))) 0%,
      rgba(var(--ov-donker), calc(.55 * var(--ov-dicht))) 45%,
      rgba(var(--ov-donker), calc(.84 * var(--ov-dicht))) 100%),
    linear-gradient(100deg,
      rgba(var(--ov-licht), calc(.69 * var(--ov-dicht))) 0%,
      rgba(var(--ov-licht), calc(.09 * var(--ov-dicht))) 60%,
      transparent 85%);
}
.page-hero h1 { color: #fff; margin-bottom: .9rem; font-size: clamp(2rem, 4.6vw, 3.4rem); }
.page-hero p { color: var(--d-text-soft); }
.page-hero .kicker { color: var(--accent); }
.page-hero .kicker::before { background: linear-gradient(90deg, var(--accent), transparent); }

.breadcrumb {
  font-size: .82rem; color: rgba(255,255,255,.65); margin-bottom: 1.35rem;
}
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb span[aria-hidden] { opacity: .45; }
.breadcrumb li[aria-current] { color: #fff; }

/* --------------------------------------------------------------- cards -- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
a.card:hover, .card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-soft); font-size: .96rem; margin-bottom: 0; }

.card__icon {
  width: 50px; height: 50px; margin-bottom: 1.15rem;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--navy), var(--brand-blue));
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(5, 67, 127, .7);
}
.card__icon svg { width: 22px; height: 22px; }

/* dienstkaart met foto */
.service-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
/* De link in de kop wordt over de hele kaart uitgerekt. Daardoor werkt klikken
   op de foto, op de tekst en op "Meer informatie", terwijl er in de code maar
   één link staat: drie losse links naar hetzelfde adres leest een schermlezer
   voor als drie keer dezelfde bestemming. */
.rek-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.service-card:has(.rek-link:focus-visible) { outline: 2px solid var(--brand-blue); outline-offset: 3px; }
/* Het pijltje schuift mee zodra de kaart wordt aangewezen; het zit niet meer
   ín de link, dus de regel bij .link-arrow pakt het niet vanzelf. */
.service-card:hover .link-arrow svg { transform: translateX(4px); }
.service-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--bg-soft); }
.service-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .65s var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,22,42,0) 45%, rgba(4,22,42,.45) 100%);
}
.service-card__body { padding: 1.4rem 1.55rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.service-card__body h3 { margin-bottom: .45rem; }
.service-card__body h3 a:hover { color: var(--navy); }
.service-card__body p { color: var(--text-soft); font-size: .95rem; flex: 1; margin-bottom: 1.1rem; }

/* kernwaardekaart */
.value-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 1.8rem 1.65rem;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.value-card p { font-size: .96rem; }

/* split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
/* De foto houdt zijn eigen verhouding. Hier stond een vast kader van 4:3 (en
   3:4 voor "tall") met object-fit: cover, wat betekende dat een foto die daar
   niet in paste aan de zijkanten werd afgesneden, een liggende groepsfoto van
   1800x1200 in een staand 3:4-kader verloor letterlijk de mensen aan de rand.
   De generator zet de echte breedte en hoogte in het <img>-element, dus de
   browser reserveert nog steeds de juiste ruimte en de pagina verspringt niet
   tijdens het laden. */
.split__media img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.badge-float {
  position: absolute; right: -14px; bottom: -20px;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  padding: 1.05rem 1.35rem;
  box-shadow: var(--shadow-lg);
  max-width: 250px;
}
.badge-float strong { display: block; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -.025em; line-height: 1.1; }
.badge-float span { font-size: .82rem; color: rgba(255,255,255,.8); }

/* pills */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.4rem 0 0; }
.pills li {
  margin: 0; padding: .42rem .95rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .85rem; color: var(--navy); background: var(--bg-soft); font-weight: 500;
}

/* checklist */
.checklist { list-style: none; padding: 0; display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.checklist li { position: relative; padding-left: 2.05rem; margin: 0; color: var(--text-soft); font-size: .98rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .32rem;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--navy);
}
.checklist li::after {
  content: ""; position: absolute; left: 6px; top: .66rem;
  width: 8px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.on-dark .checklist li { color: var(--d-text-soft); }
.on-dark .checklist li::before { background: var(--accent); }
.on-dark .checklist li::after { border-color: var(--navy-900); }

/* stappen */
.steps {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.steps > div { background: #fff; padding: 1.9rem 1.7rem; position: relative; }
.steps h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.steps p { color: var(--text-soft); font-size: .94rem; margin: 0; }
.steps .step-n {
  font-family: var(--font-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; color: var(--navy); display: block; margin-bottom: .9rem;
}

/* citaat */
.quote {
  position: relative; margin: 1.6rem 0;
  border-left: 4px solid var(--accent);
  padding: .3rem 0 .3rem 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5; letter-spacing: -.015em;
  color: var(--navy-900);
}
.quote cite { display: block; margin-top: .9rem; font-family: var(--font-body); font-size: .88rem; font-style: normal; color: var(--text-dim); }

/* prose */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
.prose h2:first-child, .prose > .kicker + h2 { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; }
.prose p, .prose li { color: var(--text-soft); }
.prose strong { color: var(--navy-900); font-weight: 600; }

/* content + zijbalk */
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.aside-card {
  position: sticky; top: calc(var(--header-h) + 24px);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.aside-card h3 { font-size: 1.15rem; }
.aside-card p { font-size: .93rem; color: var(--text-soft); }
.aside-card .btn { width: 100%; margin-top: .4rem; }
.aside-list { list-style: none; padding: 0; margin: 1.15rem 0 0; display: grid; gap: 2px; }
.aside-list li { margin: 0; }
.aside-list a {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .65rem .8rem; border-radius: 9px;
  font-size: .91rem; color: var(--text-soft);
  transition: background-color .2s, color .2s;
}
.aside-list a:hover { background: #fff; color: var(--navy); }
.aside-list a[aria-current="page"] { background: var(--navy); color: #fff; font-weight: 500; }
.aside-list svg { width: 14px; height: 14px; flex: none; opacity: .55; }

/* FAQ */
details.card { cursor: pointer; }
details.card summary {
  list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: .45rem;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
details.card[open] summary::after { transform: rotate(-135deg); }
details.card p { color: var(--text-soft); }

/* ------------------------------------------------------------ CTA band -- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-950); }
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
/* De balk is ongeveer 3,3:1 terwijl de foto's 3:2 zijn, dus er wordt boven en
   onder afgesneden. Zonder opgave pakt de browser het midden, en dat is bij een
   foto van staande mensen precies de romp: op Servicemedewerkers zag je drie
   gilets en geen enkel gezicht. Op 15% vallen de gezichten binnen de strook,
   nagelopen op alle vier de foto's die hier gebruikt worden. */
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Vijf punten lichter. Het eerste ankerpunt schuift mee van 18% naar 34%,
     want alleen de dekking verlagen maakte juist de tekstkant lichter: de
     staart van de introzin zakte van 4.15:1 naar 3.59:1, terwijl daar 4.5:1
     nodig is. Nu blijft de zone onder de tekst gelijk (4.21:1) en wordt het
     lichter waar de foto zit, op 70% van de breedte van 2.78 naar 2.52, op
     90% van 1.84 naar 1.65. */
  background:
    linear-gradient(90deg,
      rgba(var(--ov-donker), calc(.91 * var(--ov-dicht))) 34%,
      rgba(var(--ov-licht),  calc(.77 * var(--ov-dicht))) 62%,
      rgba(var(--ov-licht),  calc(.45 * var(--ov-dicht))) 100%);
}
@media (max-width: 860px) {
  .cta-band::before {
    background: linear-gradient(180deg,
      rgba(var(--ov-donker), calc(.92 * var(--ov-dicht))),
      rgba(var(--ov-licht),  calc(.90 * var(--ov-dicht))));
  }
}

/* ---------------------------------------------------------------- form -- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* Zonder formulier is het kaartje rechts een stuk lager. Dan mag de tekst
   links meer ruimte hebben, zodat de kop niet over drie regels breekt terwijl
   ernaast een halve kolom leeg staat. */
.contact-grid--kort { grid-template-columns: 1.5fr 1fr; }

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.3rem);
  box-shadow: var(--shadow-md);
}
.form-card h3 { margin-bottom: .35rem; }

.field { margin-bottom: 1.05rem; }
.field label { display: block; margin-bottom: .4rem; font-size: .87rem; font-weight: 500; color: var(--navy-900); }
.field label .req { color: var(--charcoal); } /* a11y-fix: accent-700 op wit was 3.02:1 (faalt 4.5:1 voor tekst); charcoal = 11.73:1 */

.field input, .field select, .field textarea {
  width: 100%; min-height: 48px;
  padding: .8rem .95rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit; font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(5, 67, 127, .13);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2305437f' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px;
  padding-right: 2.6rem;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #c0392b; }
.field .error-msg { display: none; margin: .4rem 0 0; font-size: .82rem; color: #c0392b; }
.field.has-error .error-msg { display: flex; align-items: center; gap: .35rem; }
.field.has-error .error-msg::before {
  content: "!"; flex: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: #c0392b; color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 15px; text-align: center;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }

.form-note { margin-top: .9rem; font-size: .84rem; color: var(--text-dim); }
.form-note a { color: var(--navy); font-weight: 500; text-decoration: underline; }
.form-status {
  display: none; margin-top: 1rem; padding: .85rem 1.05rem;
  border-radius: 10px; font-size: .92rem;
  background: var(--bg-soft); border: 1px solid var(--line-strong); color: var(--navy-900);
}
.form-status.is-visible { display: block; }
.form-status.is-error { background: #fdf0ee; border-color: #f0c4bd; color: #8c2a1e; }
/* Geslaagd verdient een eigen kleur: anders lijkt een bevestiging op een fout. */
.form-status.is-ok { background: #eef7f0; border-color: #b9dcc4; color: #1d5c31; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* contactgegevens */
.contact-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; margin: 0; }
.contact-list dl { margin: 0; } /* a11y-fix: dt/dd zaten voorheen los in een <dl><li>, ongeldige HTML; nu <ul><li><dl>. Reset UA-marge op de geneste dl. */
.contact-list .ico {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--navy);
}
.contact-list .ico svg { width: 19px; height: 19px; }
.contact-list dt { font-size: .76rem; color: var(--text-dim); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.contact-list dd { margin: .1rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--navy-900); }
.contact-list a:hover { color: var(--navy); text-decoration: underline; }

/* -------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--navy-900);
  color: var(--d-text-soft);
  padding-block: clamp(3.25rem, 6vw, 4.75rem) 1.75rem;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.05fr; gap: clamp(2rem, 4vw, 3.25rem); }
.site-footer h3 { /* a11y-fix: was h4, sprong h2/h3 in main naar h4 in footer op pagina's waar ctaBand (alleen h2) het laatste blok voor de footer is (o.a. contact.html) */
  font-size: .78rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem; font-weight: 600;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--d-text-soft); font-size: .92rem; transition: color .2s; }
.site-footer a:hover { color: #fff; }
.footer-brand img { height: var(--logo-hoogte-footer, 46px); margin-bottom: 1.15rem; }
/* Zelfde afspraak als in de balk: alleen het standaardlogo wordt wit gemaakt,
   een zelfgekozen footerlogo blijft zoals het is. */
.footer-brand__logo--wit { filter: brightness(0) invert(1); }
.footer-brand p { font-size: .92rem; max-width: 34ch; }

.socials { display: flex; gap: .55rem; margin-top: 1.3rem; }
.socials a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--d-line); border-radius: 12px; color: var(--d-text-soft);
  transition: border-color .25s, color .25s, background-color .25s, transform .25s var(--ease);
}
.socials a:hover { border-color: var(--accent); color: var(--accent); background: rgba(104,204,209,.1); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

.footer-bottom {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem); padding-top: 1.4rem;
  border-top: 1px solid var(--d-line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.55);
}

/* -------------------------------------------------------------- reveal -- */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .factbar { grid-template-columns: repeat(2, 1fr); }
  .content-layout { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .steps { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 980px) {
  .nav, .header-cta { display: none; }
  .burger { display: inline-flex; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  /* Het decoratieve streepje staat verticaal gecentreerd; zodra de kicker over
     meerdere regels loopt (smalle schermen) zweeft het los naast de tekst. */
  .kicker::before { display: none; }
  :root { --header-h: 74px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr !important; }
  .field-row { grid-template-columns: 1fr; }
  .factbar { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 4rem); }
  .badge-float { position: static; margin-top: 1rem; max-width: none; }
  .btn-row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .mobile-nav, .cta-band, .socials { display: none; }
  body { color: #000; background: #fff; }
}

/* ------------------------------------------------------------ utilities --
   Vervangen de vroegere inline style-attributen, zodat de Content-Security-
   Policy geen 'unsafe-inline' voor style-src nodig heeft. */
.mt-xs   { margin-top: .9rem; }
.mt-sm   { margin-top: 1.1rem; }
.mt-md   { margin-top: 1.3rem; }
.mt-lg   { margin-top: 1.5rem; }
.mt-xl   { margin-top: 1.8rem; }
.mt-2xl  { margin-top: 2rem; }
.mt-3xl  { margin-top: 2.5rem; }
.mt-none { margin-top: 0; }

.d-1 { --d: 40ms; }
.d-2 { --d: 60ms; }
.d-3 { --d: 80ms; }
.d-4 { --d: 120ms; }
.d-5 { --d: 180ms; }
.d-6 { --d: 160ms; }

.text-sm      { font-size: .95rem; }
.measure-cta  { max-width: 880px; }
.measure-none { max-width: none; }
.gap-sm       { gap: 1rem; }
.steps--4     { grid-template-columns: repeat(4, 1fr); }
.quote--lead  { font-size: clamp(1.25rem, 2.6vw, 1.85rem); }
.faq-q        { display: inline; font-size: 1.08rem; }
.link-inline  { color: var(--navy); text-decoration: underline; }
.link-inline:hover { color: var(--navy-700); }

/* ---------------------------------------------------------------- modal --
   Klachtenformulier. Native <dialog>: de browser regelt focus-trap, Escape en
   het inert maken van de achtergrond. */
.modal {
  width: min(680px, calc(100vw - 2rem));
  max-height: min(86svh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.modal::backdrop {
  background: rgba(4, 22, 42, .62);
  backdrop-filter: blur(3px);
}
.modal__panel {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-height: inherit;
  overflow-y: auto;
  border-radius: var(--radius);
}
.modal h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin-bottom: .5rem; }
.modal form { margin-top: 1.6rem; }

.modal__close {
  position: absolute; top: .9rem; right: .9rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy-900);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.modal__close:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.modal__close svg { width: 18px; height: 18px; }

.modal__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* De voorwaarden bij het klachtenformulier.
   Bewust een kader met een eigen achtergrond en niet gewoon een alinea: dit is
   het stuk dat bepaalt of iemand antwoord krijgt of niet, en dat moet je zien
   staan zonder het te hoeven zoeken. */
.eisen {
  margin-top: 1.4rem;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
}
.eisen--na { margin-top: 1.8rem; }
.eisen__kop {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-900);
}
.eisen__intro { margin: 0 0 .55rem; font-size: .87rem; color: var(--text-soft); }
.eisen__lijst {
  margin: 0;
  padding-left: 1.15rem;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.eisen__lijst li + li { margin-top: .4rem; }
.eisen__slot { margin: .7rem 0 0; font-size: .87rem; line-height: 1.6; color: var(--text-soft); }

/* Toelichting onder een invoerveld. De foutmelding gebruikt dezelfde plek maar
   is rood en verschijnt pas na een mislukte poging; dit staat er altijd. */
.hint { margin: .4rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-dim); }

/* Een groep vinkjes in een formulier, bijvoorbeeld de diploma's bij een
   sollicitatie. Het label ligt om het vinkje heen, zodat de hele regel het
   aanklikgebied is: op een telefoon is een vierkantje van 16 pixels geen
   redelijk doel.
 *
 * Dit blok stond eerst binnen .field, en dat ging mis. Een gewoon formulierveld
 * zet zijn label op display:block en zijn invoervak op honderd procent breed met
 * een minimumhoogte van 48 pixels. Beide regels zijn specifieker dan die
 * hieronder, dus het vinkje werd een leeg invoervak van 48 pixels hoog met de
 * tekst eronder. Vandaar dat de groep nu buiten .field staat en zichzelf
 * volledig regelt. */
.vinkjes {
  border: 0;
  padding: 0;
  margin: 0 0 1.05rem;
  min-width: 0;   /* anders laat een fieldset zich niet smaller maken dan zijn inhoud */
}
.vinkjes legend {
  padding: 0;
  margin-bottom: .5rem;
  font-size: .87rem;
  font-weight: 500;
  color: var(--navy-900);
}
.vinkje {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;          /* comfortabel aan te tikken op een telefoon */
  padding: .5rem .85rem;
  margin-bottom: .4rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: .95rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.vinkje:last-of-type { margin-bottom: 0; }
.vinkje:hover { border-color: var(--navy); }
.vinkje:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(5, 67, 127, .13); }
.vinkje input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--navy);
  cursor: pointer;
}
/* Aangevinkt mag je zien zonder het vakje zelf te hoeven bekijken. */
.vinkje:has(input:checked) { border-color: var(--navy); background: var(--bg-soft); }
.vinkjes__hint { margin: .55rem 0 0; font-size: .82rem; color: var(--text-dim); }

[hidden] { display: none !important; }

/* ------------------------------------------------------- bestand kiezen -- */
/* De browser zet hier standaard een grijs systeemknopje neer met "Geen bestand
   gekozen" ernaast. Dat valt uit de toon bij de rest van het formulier, en in
   een smalle kolom wordt de bestandsnaam afgekapt tot iets onleesbaars.
   Vandaar een eigen vak over de volle breedte, met de knop erin. */
.bestandsveld input[type="file"] {
  width: 100%;
  min-height: 48px;
  padding: .55rem .7rem;
  background: #fff;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--text-soft);
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.9;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.bestandsveld input[type="file"]:hover { border-color: var(--navy); background: var(--bg-soft); }
.bestandsveld input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--navy);
  border-style: solid;
  box-shadow: 0 0 0 4px rgba(5, 67, 127, .13);
}
/* De knop binnen het veld. Alleen deze pseudo-selector werkt hiervoor; een
   eigen knop bouwen zou betekenen dat het invoerveld verstopt moet worden, en
   dan gaat het toetsenbordgebruik eraan. */
.bestandsveld input[type="file"]::file-selector-button {
  margin: 0 .8rem 0 0;
  padding: .45rem .9rem;
  background: var(--navy);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: .87rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .2s;
}
.bestandsveld input[type="file"]::file-selector-button:hover { background: var(--navy-900); }

/* --------------------------------------------------- offerteformulier -- */
/* Een kop boven een groepje bij elkaar horende vragen. Zonder die tussenkopjes
   is het formulier een lange sliert velden waarin je kwijtraakt waar je bent. */
.veldgroep { margin-bottom: 1.6rem; }
.veldgroep__kop {
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy-900);
}

/* De eerste vraag: evenement of object. Groot en als kaart, want alles wat
   daarna komt hangt ervan af; een gewone keuzelijst zou dat verstoppen. */
.keuzegroep { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.keuzegroep legend {
  padding: 0;
  margin-bottom: .6rem;
  font-size: .87rem;
  font-weight: 500;
  color: var(--navy-900);
}
.keuzekaart {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  margin-bottom: .5rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.keuzekaart:hover { border-color: var(--navy); }
.keuzekaart:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(5, 67, 127, .13); }
.keuzekaart input { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; margin: .1rem 0 0; padding: 0; accent-color: var(--navy); cursor: pointer; }
.keuzekaart__tekst { display: block; line-height: 1.35; }
.keuzekaart__tekst strong { display: block; font-size: .95rem; font-weight: 600; color: var(--navy-900); }
.keuzekaart__tekst small { display: block; margin-top: .15rem; font-size: .82rem; color: var(--text-dim); }
.keuzekaart:has(input:checked) { border-color: var(--navy); background: var(--bg-soft); }
.keuzegroep .error-msg { display: none; margin: .3rem 0 0; font-size: .82rem; color: #c0392b; }
.keuzegroep.has-error .error-msg { display: block; }
.keuzegroep.has-error .keuzekaart { border-color: #c0392b; }

/* Meerdere dagen onder elkaar. Op een telefoon vallen datum en tijden onder
   elkaar, want drie velden naast elkaar wordt daar onleesbaar smal. */
.datums { border: 0; padding: 0; margin: 0 0 1.05rem; min-width: 0; }
.datums legend { padding: 0; margin-bottom: .5rem; font-size: .87rem; font-weight: 500; color: var(--navy-900); }
.datums > .error-msg { display: none; margin: 0 0 .6rem; font-size: .82rem; color: #c0392b; }
.datums.has-error > .error-msg { display: block; }
.datums .hint { margin-top: .55rem; }
.datumrij {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: .6rem;
  align-items: end;
  margin-bottom: .6rem;
}
.datumrij .field { margin-bottom: 0; }
.datumrij .field label { font-size: .78rem; color: var(--text-dim); font-weight: 400; }
.datumrij__weg {
  width: 44px; height: 48px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.datumrij__weg:hover { border-color: #c0392b; color: #c0392b; background: #fdf2f1; }
.datumrij__weg svg { width: 16px; height: 16px; }
.btn--klein {
  padding: .5rem .95rem;
  font-size: .85rem;
  min-height: 0;
  background: transparent;
  color: var(--navy);
  border: 1px dashed var(--line-strong);
}
.btn--klein:hover { border-style: solid; border-color: var(--navy); background: var(--bg-soft); }
@media (max-width: 620px) {
  .datumrij { grid-template-columns: 1fr 1fr; }
  .datumrij .field:first-child { grid-column: 1 / -1; }
  .datumrij__weg { grid-column: 1 / -1; width: 100%; height: 40px; }
}

/* Openingsanimatie */
.modal[open] { animation: modal-in .28s var(--ease); }
.modal[open]::backdrop { animation: backdrop-in .28s var(--ease); }
@keyframes modal-in   { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes backdrop-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop { animation: none; }
}

/* Navigatie- en footerknoppen die eruitzien als een link */
.nav-dialog-trigger {
  display: block; width: 100%;
  padding: .62rem .8rem;
  font-family: var(--font-body); font-size: .9rem; font-weight: 500;
  text-align: left;
  color: var(--text-soft);
  background: none; border: 0; border-radius: 9px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.nav-dialog-trigger:hover { background: var(--bg-soft); color: var(--navy); }
.mobile-nav .nav-dialog-trigger {
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-display); font-size: .98rem; font-weight: 500;
}
.mobile-nav .nav-dialog-trigger:hover { background: none; }

.footer-link-btn {
  padding: 0; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .92rem; color: var(--d-text-soft);
  text-align: left;
  transition: color .2s;
}
.footer-link-btn:hover { color: #fff; }

/* Kaart die als knop fungeert */
.card--button {
  width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  color: inherit;
}
.card--button h3 { color: var(--navy-900); }

/* Toplevel-navigatie-item markeren wanneer de huidige pagina eronder valt.
   Het item is een <button> (het opent een dropdown), dus aria-current is hier
   niet geldig; de submenulink naar de huidige pagina draagt die wel. */
.nav-item.is-current > button { opacity: 1; font-weight: 600; }
.nav-item.is-current > button::after {
  content: ""; position: absolute; left: .8rem; right: 1.6rem; bottom: .3rem;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.site-header.is-stuck .nav-item.is-current > button::after { background: var(--navy); }

/* ============================================================== press == */
/* Lijst met publicaties over het bedrijf. Bewust rustig: de titel van het
   artikel moet het werk doen, niet de opmaak eromheen. */

.press-list { display: grid; gap: 0; }

.press-item {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
}
.press-item:first-child { border-top: 0; padding-top: 0; }

.press-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-bottom: .6rem;
  font-size: .82rem;
  color: var(--text-dim);
}
.press-item__source {
  font-weight: 600;
  color: var(--brand-blue);
  letter-spacing: .01em;
}
.press-item__kind {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .1rem .6rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.press-item h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  margin-bottom: .5rem;
}
.press-item h3 a { color: var(--navy-900); text-decoration: none; }
.press-item h3 a:hover { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }

.press-item p { color: var(--text-soft); margin-bottom: 0; }

.press-item__quote {
  margin: .9rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--text-soft);
}

/* ------------------------------------------------- uitsnede per blok --- */
/*
 * Welk deel van een foto in beeld blijft, in te stellen per blok in de
 * backoffice (zie het veld "Welk deel van de foto blijft in beeld?" in
 * lib/blocks.mjs). Zonder keuze verandert er niets: dan gelden de
 * standaardwaarden die hierboven per bloktype staan.
 *
 * Twee klassen op één element in plaats van één, zodat deze regels zwaarder
 * wegen dan de standaarden hierboven, die zijn geschreven als
 * `.cta-band__media img` en dat is precies één klasse plus een element.
 * Een inline style zou eenvoudiger zijn maar botst met het beveiligingsbeleid
 * van de site, dat inline stijlen niet toestaat.
 */
.uitsnede.uitsnede--boven      { object-position: center top; }
.uitsnede.uitsnede--iets-boven { object-position: center 25%; }
.uitsnede.uitsnede--midden     { object-position: center center; }
.uitsnede.uitsnede--iets-onder { object-position: center 75%; }
.uitsnede.uitsnede--onder      { object-position: center bottom; }

/* De foto naast de tekst houdt zijn eigen verhouding en wordt dus nergens
   bijgesneden; daar valt niets uit te lijnen. object-position doet daar niets,
   wat prima is: de keuze staat er wel maar heeft geen effect, en dat is beter
   dan het veld per bloktype anders te laten zijn. */

/* ------------------------------------------------------------ berichten -- */
/* Eigen berichten met een verhaal dat de bezoeker zelf openklapt. */
.berichten { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.bericht {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.bericht__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm);
}
.bericht__datum {
  display: block;
  font-size: .82rem; color: var(--text-dim);
  margin-bottom: .3rem;
}
.bericht h3 { margin-bottom: .5rem; }
.bericht__lead { margin-bottom: .6rem; }

/* De hele kaart is aanklikbaar zodra er een case achter zit. */
.bericht--klikbaar { cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bericht--klikbaar:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }

.bericht__knop {
  margin-top: .7rem;
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: 0;
  font-family: var(--font-display); font-weight: 600; font-size: .93rem;
  color: var(--navy); cursor: pointer;
}
.bericht--klikbaar:hover .bericht__knop { color: var(--brand-blue); }
.bericht__knop svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.bericht--klikbaar:hover .bericht__knop svg { transform: translateX(3px); }

/* --- de popup zelf --- */
.case {
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  cursor: auto;
}
.case::backdrop { background: rgba(4, 22, 42, .62); }
.case__inner { padding: clamp(1.3rem, 4vw, 2.4rem); position: relative; }
.case__inner h2 { margin-bottom: .8rem; }
.case__sluit {
  position: absolute; top: .7rem; right: .7rem;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
  background: var(--bg-soft); color: var(--text-soft);
  border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer;
}
.case__sluit:hover { background: var(--bg-alt); color: var(--navy); }
.case__hoofdfoto img {
  width: 100%; border-radius: var(--radius-sm); margin-bottom: 1.1rem;
}
.case__fotos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .7rem; margin-top: 1.2rem;
}
.case__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }

/* ------------------------------------------------------- TikTok-sectie -- */
/* Staande video's naast elkaar. Op een smal scherm schuiven ze horizontaal
   in plaats van dat ze elk een halve pagina hoog worden. */
/* De kop boven de videorij mag de volle breedte gebruiken. Standaard staat een
   sectiekop in een kolom van 720px, en daar past "Video's van Security Rendel
   op TikTok" niet in, die brak dan over twee regels. Geen nowrap: op een
   telefoon moet hij juist wél kunnen afbreken, anders loopt de pagina opzij. */
.section--tiktok .section-head { max-width: none; }

/* Eén regel die opzij schuift, nooit meerdere regels. De tegels hebben een
   vaste breedte en mogen niet krimpen; wat niet past schuift uit beeld.

   De speler van TikTok richt zich intern in op ongeveer 325 pixels breed. Zet
   je hem in een smaller kader, dan schaalt hij niet mee maar wordt de inhoud
   opzij afgeknipt, dat was te zien als een video die in de breedte niet
   klopte. Daarom krijgt het venster zijn eigen maat en wordt het geheel
   teruggeschaald naar de tegel. De schaal staat als los getal naast de breedte
   omdat CSS geen lengte door een lengte kan delen; wijzig je --tegel, wijzig
   dan --schaal mee (tegel gedeeld door 325). Boven de 325 niet verder oprekken:
   dan wordt het venster vergroot in plaats van verkleind en gaat het beeld
   zichtbaar zachter staan. */
.tiktok-slider { position: relative; }
.tiktok-rij {
  --embed: 325px;
  --tegel: 290px;
  --schaal: .892;

  display: flex;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  align-items: start;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scroll-padding-inline: 2px;
  padding-bottom: .6rem;
  scrollbar-width: thin;
}
.tiktok-rij > * { flex: 0 0 var(--tegel); scroll-snap-align: start; }

.tiktok__video {
  position: relative;
  width: var(--tegel); aspect-ratio: 9 / 21;
  margin: 0; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--navy-950);
}
.tiktok__video iframe {
  position: absolute; top: 0; left: 0;
  width: var(--embed); height: calc(var(--embed) * 21 / 9);
  border: 0;
  transform: scale(var(--schaal));
  transform-origin: top left;
}

/* De knop staat er tot iemand klikt; hij vult dezelfde tegel als de speler die
   erna komt, zodat de rij niet verspringt. */
.tiktok__start {
  position: absolute; inset: 0; overflow: hidden;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem;
  padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  color: #fff; cursor: pointer;
  transition: filter .2s var(--ease);
}
.tiktok__start:hover { filter: brightness(1.08); }

/* Het eerste beeld vult de tegel; de knop en het label liggen erbovenop. */
.tiktok__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  z-index: 0;
}
/* Zonder waas verdwijnt een witte afspeelknop in een licht beeld. */
.tiktok__start--beeld::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,22,42,.15) 0%, rgba(4,22,42,.10) 45%, rgba(4,22,42,.72) 100%);
}
.tiktok__play, .tiktok__label { position: relative; z-index: 2; }

.tiktok__play {
  width: 56px; height: 56px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(4, 22, 42, .45);
  border: 2px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(2px);
  transition: background-color .2s var(--ease);
}
.tiktok__start:hover .tiktok__play { background: rgba(4, 22, 42, .68); }
.tiktok__play svg { width: 24px; height: 24px; margin-left: 3px; }

.tiktok__label {
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  text-shadow: 0 1px 3px rgba(4, 22, 42, .6);
}

.tiktok-slider__pijl {
  position: absolute; top: calc(50% - .3rem); z-index: 3;
  translate: 0 -50%;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--navy);
  border: 1px solid var(--line-strong); border-radius: 50%;
  box-shadow: var(--shadow-md); cursor: pointer;
}
.tiktok-slider__pijl:hover { background: var(--bg-soft); }
.tiktok-slider__pijl svg { width: 18px; height: 18px; }
.tiktok-slider__pijl--vorige { left: -14px; }
.tiktok-slider__pijl--volgende { right: -14px; }
@media (max-width: 900px) {
  /* Op een aanraakscherm veeg je gewoon; pijlen zouden daar alleen ruimte
     kosten en over de video's heen liggen. */
  .tiktok-slider__pijl { display: none; }
}

.tiktok__link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 620px) {
  /* Grotere tegel op een telefoon. Breedte en schaal horen bij elkaar:
     320 / 325 = .985. */
  .tiktok-rij { --tegel: 320px; --schaal: .985; }
}

@media (max-width: 760px) {
  .bericht { grid-template-columns: 1fr; }
}