/* ==========================================================================
   Ferion — Beheer, Onderhoud, Reiniging
   Stijl van de homepage. Ontwerp: Claude Design "Feriongroep.nl website design".
   ========================================================================== */

/* --- Lettertypen ----------------------------------------------------------
   Zelf gehost in plaats van via Google Fonts: scheelt twee externe
   verbindingen bij het laden, en er gaat geen bezoekersgegeven naar Google.
   Dat laatste is voor gemeenten een harde eis. Alleen de latin-subset, want
   meer heeft het Nederlands niet nodig. -------------------------------------- */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-700.woff2') format('woff2');
}
@font-face {
  /* variabel bestand: dekt 400 tot en met 700 in één download */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-variable.woff2') format('woff2');
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --navy-900: #14293F;
  --navy: #1B3A5F;
  --navy-700: #204A75;
  --sky: #4FB8E0;
  --orange: #F0722B;
  --orange-dark: #D95F1B;
  --orange-tint: #FFE3CF;

  --ink: #28394C;
  --text: #44566B;
  --text-soft: #5A6B7E;
  --text-faint: #8496A8;
  --on-dark: #C4D3E2;

  --white: #ffffff;
  --mist: #F4F7FA;
  --line: #E3E9F0;
  --ice: #EAF4FA;

  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1200px;
  --gutter: 24px;

  --shadow-card: 0 8px 24px rgba(20, 41, 63, 0.07);
  --shadow-card-hover: 0 14px 32px rgba(20, 41, 63, 0.14);

  --skew: -12deg;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: var(--navy); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--orange); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Alleen voor schermlezers: wel in de voorleesvolgorde, niet in beeld */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--orange);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
  color: var(--white);
}

/* --- Layout --------------------------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 908px; }
.wrap--prose { max-width: 900px; }
/* De inhoud onder een diagonale overgang mag niet in de schuine punt vallen */
.wrap--after-divider { padding-top: 24px; }
.wrap--after-divider-lg { padding-top: 36px; }

.section { padding-block: 72px; }
.section--tight { padding-block: 64px; }
.section--pb { padding-block: 0 72px; }
.section--pb-sm { padding-block: 0 64px; }
.section--intro { padding-block: 16px 64px; text-align: center; }
.section--over { padding-block: 72px 64px; }

.bg-mist { background: var(--mist); }
.bg-navy { background: var(--navy); }
.bg-navy h2, .bg-navy h3 { color: var(--white); }
.bg-navy p { color: var(--on-dark); }

/* Diagonale overgangen tussen secties */
.divider {
  height: 56px;
  border: 0;
  margin: 0;
  display: block;
}
.divider--tall { height: 70px; }
.divider--hero { height: 60px; }
.divider--short { height: 52px; }
.divider--white { background: var(--white); }
.divider--mist { background: var(--mist); }
.divider--navy { background: var(--navy); }
.divider--tl { clip-path: polygon(0 0, 100% 0, 0 100%); }
.divider--tr { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.divider--br { clip-path: polygon(0 100%, 100% 0, 100% 100%); }

/* Twee kolommen die op smalle schermen onder elkaar vallen */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow--sky { color: var(--sky); }

.lede { font-size: 17px; line-height: 1.7; color: var(--text); }

.section-title { font-size: clamp(28px, 3.4vw, 36px); margin: 8px 0 18px; }
.section-title--lg { font-size: clamp(28px, 3.6vw, 38px); margin: 8px 0 36px; }
.section-title--plain { margin-top: 0; }

.prose { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 14px; }
.prose:last-child { margin-bottom: 0; }
.prose--last { margin-bottom: 20px; }
.bg-navy .prose { color: var(--on-dark); }

/* --- Knoppen -------------------------------------------------------------- */
.btn {
  display: inline-block;
  transform: skewX(var(--skew));
  padding: 14px 30px;
  font-weight: 700;
  font-size: 16px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn > span { display: inline-block; transform: skewX(calc(var(--skew) * -1)); }

.btn--primary { background: var(--orange); color: var(--white); }
.btn--primary:hover { background: var(--orange-dark); color: var(--white); }

.btn--ghost {
  border: 2px solid var(--sky);
  color: var(--white);
  padding: 12px 28px;
}
.btn--ghost:hover { background: rgba(79, 184, 224, 0.15); color: var(--white); }

.btn--light { background: var(--white); color: var(--navy); padding: 14px 32px; }
.btn--light:hover { background: var(--ice); color: var(--navy); }

.btn--sm { padding: 10px 20px; }

/* Tekstlink met onderstreping in huisstijl */
.link-underline {
  /* inline-block, niet inline: bij een inline-element tellen de onderrand en de
     padding niet mee in de regelhoogte, waardoor een volgend blok er 4 px
     overheen schuift en de onderstreping doorsneden wordt. */
  display: inline-block;
  font-weight: 700;
  border-bottom: 2px solid var(--sky);
  padding-bottom: 2px;
}
.link-underline--sky { color: var(--sky); border-bottom-color: var(--sky); }
.link-underline--sky:hover { color: var(--white); }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
}
.header__logo img { height: 56px; width: auto; display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-weight: 600;
  font-size: 15px;
}
.nav__link { padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav__link[aria-current="page"] { color: var(--orange); border-bottom-color: var(--orange); }

/* --- Uitklapmenu onder Diensten -------------------------------------------- */
/* Werkt zonder JavaScript, op :hover en op :focus-within. Dat laatste is wat het
   toetsenbord bruikbaar maakt: zodra "Diensten" zelf focus krijgt matcht
   :focus-within op de ouder, klapt het paneel open en worden de links pas
   focusbaar. Zonder die volgorde slaat Tab het hele submenu over, want
   visibility:hidden haalt kinderen uit de tabvolgorde. */
.nav__item--menu { position: relative; }
.nav__link--menu { display: inline-flex; align-items: center; gap: 6px; }
.nav__pijl { width: 13px; height: 13px; flex: 0 0 auto; transition: transform 0.18s ease; }

/* Onzichtbare brug over de ruimte tussen de balk en het paneel. Zonder dit valt
   de muis daar tussenin en klapt het menu dicht voordat je er bent. */
.nav__item--menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 20px;
}

.nav__submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  min-width: 330px;
  background: var(--white);
  border-top: 3px solid var(--sky);
  box-shadow: var(--shadow-card-hover);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.nav__item--menu:hover .nav__submenu,
.nav__item--menu:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}
.nav__item--menu:hover .nav__pijl,
.nav__item--menu:focus-within .nav__pijl { transform: rotate(180deg); }

.nav__submenu a {
  display: block;
  padding: 12px 14px;
  border-left: 3px solid transparent;
  line-height: 1.35;
}
.nav__submenu a:hover,
.nav__submenu a:focus-visible {
  background: var(--mist);
  border-left-color: var(--orange);
}
.nav__submenu small {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-soft);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 42px;
  padding: 0;
  background: var(--navy);
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background: var(--white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(115deg, var(--navy-900) 0%, var(--navy) 60%, var(--navy-700) 100%);
  overflow: hidden;
}
.hero__stripe {
  position: absolute;
  top: -120px;
  height: 640px;
  transform: skewX(-18deg);
  pointer-events: none;
}
.hero__stripe--wide { right: 26%; width: 220px; background: rgba(79, 184, 224, 0.14); }
.hero__stripe--accent { right: 19%; width: 44px; background: rgba(240, 114, 43, 0.55); }

.hero__grid {
  position: relative;
  padding-block: 84px 92px;
}
.hero__title {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.08;
  color: var(--white);
  margin: 14px 0 18px;
}
.hero__text {
  color: var(--on-dark);
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 540px;
}
.hero__actions { display: flex; gap: 18px; flex-wrap: wrap; }
.hero__actions--404 { margin: 26px 0 0; }
.hero .media { height: 400px; }

/* --- Beeld ---------------------------------------------------------------- */
.media {
  display: block;
  margin: 0;
  height: 340px;
  background: var(--mist);
  overflow: hidden;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Toont de bovenkant van de foto in plaats van het midden. Nodig zodra een staande
   foto in een breed vak staat: object-fit cover snijdt dan boven en onder evenveel
   weg, en soms zit het onderwerp juist bovenin. Bij telescoop.webp is dat de
   borstel aan de kop van de steel, die op ongeveer 9% van de bovenrand zit en er
   anders afvalt. Zo komt hij op 14 tot 27% in beeld, afhankelijk van de breedte. */
.media--boven img { object-position: 50% 0; }

/* Schuine uitsnede, in de vormtaal van het logo */
.media--lean-right { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.media--lean-right-soft { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.media--edge-right { clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%); }
.media--edge-left { clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%); }

.media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 340px;
}
.media-pair .media { height: 100%; }
.media-pair--kort { height: 300px; margin-top: 24px; }

/* Donkere schermfoto's op een blauwe sectie.
   In plaats van het beeld als een kaart op de achtergrond te leggen, laten we
   het zwart van de foto samenvallen met de sectiekleur: `screen` maakt alles
   wat zwart is precies zo donker als de ondergrond, zodat alleen de oplichtende
   delen overblijven. De schuine uitsnede vervalt dan; de vervaagde rand van het
   beeldbestand bepaalt de vorm. */
.media--blend {
  background: transparent;
  clip-path: none;
  overflow: visible;
  height: clamp(260px, 31vw, 410px);
}
.media--blend img {
  mix-blend-mode: screen;
  object-fit: contain;
}

/* Zonder ondersteuning voor mix-blend-mode blijft het beeld gewoon staan,
   dan zonder de zachte overgang. */
@supports not (mix-blend-mode: screen) {
  .media--blend img { mix-blend-mode: normal; }
}

/* --- Dienstenkaarten ------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px;
}
.service-card {
  background: var(--white);
  padding: 26px 24px;
  border-top: 4px solid var(--sky);
  display: block;
  box-shadow: var(--shadow-card);
  color: var(--ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.service-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  color: var(--ink);
}
.service-card h3 { font-size: 21px; margin: 0 0 8px; }
.service-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.service-card__more { font-weight: 700; color: var(--navy); font-size: 14px; }
.service-card:hover .service-card__more { color: var(--orange); }

/* --- Opsommingen met ruit ---------------------------------------------------- */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.chips--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 22px;
  margin-top: 40px;
}
.chip {
  display: flex;
  gap: 12px;
  align-items: baseline;
  background: var(--mist);
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
}
.chips--wide .chip { gap: 14px; padding: 18px 22px; font-weight: 600; }

.diamond {
  width: 10px;
  height: 10px;
  background: var(--sky);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.chips--wide .diamond { width: 11px; height: 11px; }

/* --- Werkwijze ------------------------------------------------------------ */
.steps {
  /* De stapnummers staan als .step__num in de kaart zelf. Zonder deze regel zet de
     browser er zijn eigen opsommingsnummer voor en leest het als "1. 01". */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 20px;
}
.step {
  background: var(--white);
  padding: 22px;
  border-left: 4px solid var(--sky);
}
.step--do { border-left-color: var(--orange); }
.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--sky);
}
.step--do .step__num { color: var(--orange); }
.step h3 { font-size: 19px; margin: 6px 0; }
.step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-soft); }

.steps__footnote {
  text-align: center;
  margin: 32px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
}
.steps__footnote a { color: var(--orange); }
.steps__footnote a:hover { color: var(--orange-dark); }

/* --- Opbrengsten ---------------------------------------------------------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 22px;
}
.benefit { border-left: 3px solid var(--orange); padding: 4px 0 4px 20px; }
.benefit h3 { font-size: 20px; margin: 0 0 8px; }
.benefit p { margin: 0; font-size: 15px; line-height: 1.6; }

/* --- Keurmerkenbalk ------------------------------------------------------- */
.trustbar {
  background: var(--mist);
  padding-block: 22px;
}
.trustbar__inner {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--navy);
  text-transform: uppercase;
}
.trustbar .diamond { width: 8px; height: 8px; }

/* --- Slot-CTA ------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--orange);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0 -60px 0 auto;
  width: 38%;
  background: var(--navy);
  transform: skewX(-14deg);
}
.cta-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-block: 56px;
}
.cta-band__text { max-width: 660px; }
.cta-band h2 { font-size: clamp(28px, 3.2vw, 34px); color: var(--white); margin: 0 0 10px; }
.cta-band p { margin: 0; color: var(--orange-tint); font-size: 16px; line-height: 1.6; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--white);
  color: var(--text);
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 40px;
}
.footer__logo { height: 64px; width: auto; display: block; margin-bottom: 14px; }
.footer__about { margin: 0; font-size: 14px; line-height: 1.6; max-width: 280px; }
.footer__heading {
  font-size: 16px;
  letter-spacing: 1.5px;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__links .pending { color: var(--text-faint); }
.footer__bottom {
  max-width: var(--wrap);
  margin: 32px auto 0;
  padding: 20px var(--gutter) 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__bottom a { text-decoration: underline; }


/* ==========================================================================
   Onderdelen van de subpagina's
   ========================================================================== */

/* --- Compacte pagina-hero ------------------------------------------------- */
.page-hero {
  position: relative;
  background: linear-gradient(115deg, var(--navy-900) 0%, var(--navy) 70%, var(--navy-700) 100%);
  overflow: hidden;
}
.page-hero .hero__stripe { height: 520px; }
.page-hero .hero__stripe--wide { right: 14%; width: 180px; }
.page-hero .hero__stripe--accent { right: 9%; width: 38px; }

.page-hero__inner {
  position: relative;
  padding-block: 60px 52px;
}
.page-hero h1 {
  font-size: clamp(32px, 4vw, 44px);
  color: var(--white);
  margin: 10px 0 14px;
}
.page-hero__lede {
  color: var(--on-dark);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

/* --- Tekstsectie ---------------------------------------------------------- */
.section--prose { padding-block: 24px 40px; }
.section--pullquote { padding-block: 0 56px; }
.section--prose h2 { font-size: clamp(26px, 3vw, 30px); margin: 0 0 14px; }
/* Een tweede kop in hetzelfde tekstblok begint een nieuw onderwerp en heeft dus
   lucht boven zich nodig. De eerste kop krijgt die niet: die staat al onder de
   ruimte van de sectie zelf. */
.section--prose h2:not(:first-child) { margin-top: 44px; }

/* --- Uitgelichte zin ------------------------------------------------------ */
.pullquote {
  background: var(--mist);
  border-left: 4px solid var(--orange);
  padding: 22px 26px;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.pullquote--on-mist { background: var(--white); margin-top: 32px; }

/* --- Werkwijze als genummerde lijst --------------------------------------- */
.steplist { list-style: none; margin: 0; padding: 0; }
.steplist li {
  display: flex;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.steplist__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--sky);
  min-width: 56px;
}
.steplist li.is-uitvoering .steplist__num { color: var(--orange); }
.steplist h2 { font-size: 24px; margin: 0 0 8px; }
.steplist p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text); }

/* --- Fasekaarten en personen ---------------------------------------------- */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 22px;
}
/* Bij precies vier panelen past de basisregel er maar drie naast elkaar en blijft
   het vierde als wees op een tweede rij achter. Een lagere ondergrens laat ze
   alle vier op één rij staan; smaller wordt het vanzelf weer 2 en dan 1. */
.panel-grid--vier { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.panel {
  background: var(--white);
  padding: 28px 26px;
  border-top: 4px solid var(--sky);
}
.panel--accent { border-top-color: var(--orange); }
.panel--deep { border-top-color: var(--navy); }
.panel__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--sky);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.panel--accent .panel__label { color: var(--orange); }
.panel--deep .panel__label { color: var(--navy); }
.panel h3 { font-size: 22px; margin: 0 0 10px; }
.panel p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-soft); }

.panel__portret {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 18px;
  background: var(--mist);
}

/* --- Verwante diensten ---------------------------------------------------- */
.related h2 { font-size: clamp(24px, 2.8vw, 28px); margin: 0 0 24px; }

/* --- Contactpagina -------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}
.contact-form {
  background: var(--white);
  padding: 40px;
  box-shadow: 0 12px 32px rgba(20, 41, 63, 0.08);
  border-top: 4px solid var(--orange);
}
.contact-form h2 { font-size: 26px; margin: 0 0 24px; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field--breed { grid-column: 1 / -1; }

label {
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  display: block;
  margin-bottom: 6px;
}
input, select, textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  border: 1px solid #C9D4E0;
  padding: 12px 14px;
  width: 100%;
  background: var(--white);
  border-radius: 0;
}
textarea { resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--sky);
  outline-offset: 0;
  border-color: var(--sky);
}
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--orange-dark); }

.form-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.form-note { font-size: 13px; color: var(--text-faint); }

/* Het honeypot-veld hoort onzichtbaar te zijn voor mensen, niet voor bots */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  background: #FDECE3;
  border-left: 4px solid var(--orange-dark);
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 15px;
  color: #8A3A10;
}
.form-error ul { margin: 6px 0 0; padding-left: 20px; }

.form-success { text-align: center; padding: 48px 24px; }
.form-success__mark {
  width: 64px;
  height: 64px;
  background: var(--sky);
  transform: rotate(45deg);
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-success__mark span {
  transform: rotate(-45deg);
  color: var(--white);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.form-success h2 { font-size: 28px; margin: 0 0 12px; }
.form-success p { font-size: 16px; line-height: 1.6; color: var(--text-soft); margin: 0; }

.contact-aside { display: flex; flex-direction: column; gap: 22px; }
.contact-card {
  background: var(--navy);
  padding: 30px;
  color: var(--on-dark);
}
.contact-card h2 { font-size: 21px; color: var(--white); margin: 0 0 16px; }
.contact-card ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-card a { color: var(--sky); font-weight: 600; }
.contact-card a:hover { color: var(--white); }
.contact-card .pending { color: #7E93A8; }

.contact-note {
  background: var(--white);
  padding: 30px;
  border-left: 4px solid var(--sky);
}
.contact-note h2 { font-size: 20px; margin: 0 0 12px; }
.contact-note p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-soft); }


/* ==========================================================================
   Juridische pagina's en de cookiemelding
   ========================================================================== */

/* --- Lange lopende tekst --------------------------------------------------- */
.legal { max-width: 760px; }
.legal__meta {
  font-size: 14px;
  color: var(--text-faint);
  margin: 0 0 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.legal h2 {
  font-size: clamp(22px, 2.6vw, 26px);
  margin: 36px 0 12px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-size: 19px;
  margin: 24px 0 8px;
}
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal li::marker { color: var(--sky); }
.legal a { text-decoration: underline; }

/* Blok met contactgegevens binnen een juridische tekst */
.legal__kaart {
  background: var(--mist);
  border-left: 4px solid var(--sky);
  padding: 20px 24px;
  margin: 0 0 24px;
}
.legal__kaart p { margin: 0; }
.legal__kaart p + p { margin-top: 4px; }

/* --- Cookiemelding --------------------------------------------------------- */
.cookiemelding {
  position: fixed;
  z-index: 80;
  inset: auto 0 0 0;
  background: var(--white);
  border-top: 4px solid var(--orange);
  box-shadow: 0 -8px 32px rgba(20, 41, 63, 0.16);
  padding: 22px var(--gutter);
}
.cookiemelding[hidden] { display: none; }

.cookiemelding__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.cookiemelding__tekst { flex: 1 1 420px; }
.cookiemelding h2 {
  font-size: 20px;
  margin: 0 0 6px;
}
.cookiemelding p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.cookiemelding__knoppen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* Weigeren moet net zo makkelijk zijn als accepteren: zelfde maat, zelfde plek */
.btn--stil {
  background: var(--mist);
  color: var(--navy);
  border: 2px solid var(--line);
  padding: 12px 28px;
}
.btn--stil:hover { background: var(--ice); color: var(--navy); border-color: var(--sky); }

@media (max-width: 767px) {
  .cookiemelding { padding: 18px var(--gutter); }
  .cookiemelding__inner { gap: 18px; }
  .cookiemelding__knoppen { width: 100%; }
  .cookiemelding__knoppen .btn { flex: 1 1 auto; text-align: center; }
}

/* --- Werkgebied in de footer ----------------------------------------------- */
/* Een eigen blok over de volle breedte, niet een vierde kolom. Twintig plaatsen in
   een kolom van 220 px worden een sliert van twintig regels; in een raster over de
   volle breedte zijn het vier nette rijen die je in één oogopslag scant. */
.footer__gebied {
  max-width: var(--wrap);
  margin: 40px auto 0;
  padding: 28px var(--gutter) 0;
  border-top: 1px solid var(--line);
}
.footer__gebied__lede {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft);
}
.footer__plaatsen {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
  gap: 10px 24px;
  font-size: 14px;
}
/* Plaatsen met en zonder eigen pagina houden dezelfde kleur en hetzelfde gewicht,
   anders wordt het een bont blok. De vijf met een pagina krijgen wel een lichte
   onderlijn: zonder dat zijn ze onvindbaar, en met een kleurverschil zou het
   raster er lukraak uitzien omdat ze alfabetisch verspreid staan. */
.footer__plaatsen li { color: var(--text-soft); }
.footer__plaatsen a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}
.footer__plaatsen a:hover,
.footer__plaatsen a:focus-visible {
  color: var(--navy);
  text-decoration-color: var(--sky);
}

.footer__gebied + .footer__legal { margin-top: 28px; }

/* --- Juridische links in de footer ----------------------------------------- */
.footer__legal {
  max-width: var(--wrap);
  margin: 32px auto 0;
  padding: 20px var(--gutter) 0;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px 26px;
  flex-wrap: wrap;
  font-size: 14px;
}
.footer__legal + .footer__bottom {
  margin-top: 16px;
  padding-top: 16px;
}

/* --- Werk in beeld --------------------------------------------------------- */
/* Vierkante rasterfoto's. De aspect-ratio staat hier en niet alleen in de HTML,
   zodat de rij niet verspringt zolang de foto's nog laden. */
.galerij {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px;
}
.galerij li { margin: 0; }
.galerij img {
  width: 100%;
  /* height:auto is nodig: de basisregel img,svg zet alleen max-width, dus zonder
     dit wint het height-attribuut uit de HTML en wordt de foto 800px hoog. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--mist);
}

/* --- Statusmelding --------------------------------------------------------- */
/* Voor het eerlijk melden dat een tak nog niet draait. Bewust in oranje en boven
   de rest van de pagina, zodat een bezoeker het ziet voordat hij de rest leest
   en niet de indruk krijgt dat die dienstverlening al loopt. */
.melding {
  background: var(--orange-tint);
  border-left: 4px solid var(--orange);
  padding: 20px 24px;
  margin: 0 0 8px;
}
.melding__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0 0 6px;
}
.melding p:last-child { margin: 0; color: var(--ink); }

/* Onderschrift bij beeld dat een illustratie of voorbeeld is, geen foto van
   uitgevoerd werk. Klein en grijs, maar wel gewoon leesbaar. */
.beeldnoot {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-faint);
}
.on-dark .beeldnoot, .bg-navy .beeldnoot { color: var(--on-dark); }

/* --- Uitgelicht blok ------------------------------------------------------- */
/* Voor de tweede tak, de verkeersbebording. Bewust breed en met een oranje rand,
   zodat het naast de dienstkaarten staat en er niet in verdwijnt. */
.uitgelicht {
  margin-top: 22px;
  background: var(--white);
  border-left: 4px solid var(--orange);
  box-shadow: var(--shadow-card);
  padding: 28px 30px;
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.uitgelicht > div { flex: 1 1 420px; }
.uitgelicht h3 { font-size: 21px; margin: 0 0 8px; }
.uitgelicht p { margin: 0; max-width: 62ch; }
.uitgelicht .btn { flex: 0 0 auto; }

/* Pictogram op een dienstkaart. Alleen de kaarten met een eigen badge hebben er
   een; de kaarten zonder pictogram blijven gewoon met de kop beginnen. */
.service-card__icon {
  width: 68px;
  height: 68px;
  display: block;
  margin: 0 0 14px;
}

/* --- Responsief ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--line); }
  .nav .btn { margin-top: 18px; text-align: center; }

  /* In het uitgeklapte mobiele menu geen zwevend paneel maar een ingesprongen
     lijst die gewoon openstaat. Scheelt een extra tik en dus een extra knop. */
  .nav__item--menu { display: flex; flex-direction: column; }
  .nav__item--menu::after { display: none; }
  .nav__pijl { display: none; }
  .nav__submenu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    background: none;
    box-shadow: none;
    border-top: 0;
    border-left: 2px solid var(--line);
    padding: 4px 0 4px 16px;
    margin: 6px 0 4px;
  }
  .nav__submenu a { padding: 10px 0; border-left: 0; font-size: 15px; }
  .nav__submenu a:hover, .nav__submenu a:focus-visible { background: none; }
  .nav__submenu small { font-size: 13px; }
}

@media (max-width: 899px) {
  .split { gap: 36px; }
  .hero__grid { padding-block: 60px 68px; }
  .hero__text { font-size: 17px; }
  .hero .media { height: clamp(220px, 46vw, 400px); }
  .media { height: clamp(220px, 42vw, 340px); }
  .media-pair { height: clamp(200px, 40vw, 340px); }
  .section { padding-block: 56px; }
  .divider { height: 40px; }
  .page-hero__inner { padding-block: 44px 40px; }
  .page-hero__lede { font-size: 17px; }
  .page-hero .hero__stripe--wide { right: -10%; }
  .page-hero .hero__stripe--accent { right: -4%; }
  .contact-grid { gap: 32px; }
}

@media (max-width: 599px) {
  :root { --gutter: 20px; }
  .header__logo img { height: 44px; }
  /* Drie kolommen afdwingen in plaats van de twee die auto-fill hier zou geven:
     twintig plaatsen worden anders tien rijen en dat is een te lange footer. */
  .footer__plaatsen { grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
  /* De schuine banen blijven op smalle schermen aan de rand, niet over de tekst */
  .hero__stripe--wide { right: -10%; }
  .hero__stripe--accent { right: -4%; }
  .hero__actions .btn { width: 100%; text-align: center; }
  .cta-band::before { inset: auto -60px -30% auto; width: 70%; height: 60%; }
  .cta-band__inner { padding-block: 44px; }
  .cta-band .btn { width: 100%; text-align: center; }
  .contact-form { padding: 26px 22px; }
  .field-grid { grid-template-columns: 1fr; }
  .steplist li { flex-direction: column; gap: 4px; }
  .steplist__num { min-width: 0; }
  .form-actions .btn { width: 100%; text-align: center; }
  .footer__bottom { flex-direction: column; gap: 8px; }
}

/* --- Voorkeuren van de bezoeker ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header, .nav-toggle, .cta-band, .hero__stripe { display: none !important; }
  body { color: #000; }
  .media { display: none; }
}