/* ============================================================
   OUDE TANKE LOGISTICS — premium site system
   Apple-clean industrial · geel #FFD337 als conversiekleur,
   navy als fundament, Manrope 800 koppen, Inter lopende tekst.
   Zelfde ontwerptaal als oudetanketechniek.nl (ott-site.css).
   ============================================================ */

/* ---------- Fonts (zelf gehost, variabel) ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-var-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --yellow: #FFD337;
  --yellow-hover: #FFDC57;
  --yellow-600: #F5B81E;
  --navy-950: #07131F;
  --navy-900: #0B1B2A;
  --navy-800: #102536;
  --navy-700: #18334A;
  --ink: #15202B;
  --steel-700: #3B4652;
  --steel-500: #66717D;
  --steel-300: #AEB8C2;
  --white: #FFFFFF;
  --off: #F6F7F9;
  --line: #E6EAEE;
  --line-soft: #EEF1F4;
  --wa: #25D366;
  --ok: #1E9E5A;
  --ok-bg: #E9F7EF;
  --err: #C0392B;
  --err-bg: #FBEEEC;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Manrope', system-ui, -apple-system, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --wrap: 1180px;
  --wrap-wide: 1320px;

  --sect: clamp(4.5rem, 9vw, 7.5rem);
  --shadow-card: 0 1px 2px rgba(7, 19, 31, .04), 0 8px 28px rgba(7, 19, 31, .07);
  --shadow-card-hover: 0 2px 4px rgba(7, 19, 31, .05), 0 18px 44px rgba(7, 19, 31, .12);
  --shadow-yellow: 0 10px 30px rgba(245, 184, 30, .35);

  /* Werkelijke hoogte van de vaste mobiele actiebalk, inclusief randen. */
  --actiebalk-h: 68px;

  /* Eén eigen bewegingstaal: expo-out voor binnenkomend, spring alleen voor de CTA-terugveer */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 200ms;
  --t-med: 450ms;
  --t-slow: 800ms;
}

/* ---------- Reset & basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--yellow); color: var(--navy-950); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--steel-700); line-height: 1.65; max-width: 46em; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.wrap-wide { max-width: var(--wrap-wide); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

/* Eyebrow — kenmerkend huisstijlpatroon met geel streepje */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--yellow);
  flex: none;
}
.on-dark .eyebrow { color: var(--steel-300); }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  min-height: 50px;
  padding: .98rem 1.55rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -.012em;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .18s var(--ease); }
.btn:active { transform: translateY(1px) scale(.97); }

.btn-primary {
  background: var(--yellow);
  color: var(--navy-950);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 22px rgba(245,184,30,.2);
}
.btn-primary:hover { background: var(--yellow-hover); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-yellow); }

.btn-dark { background: var(--navy-900); color: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 22px rgba(7,19,31,.16); }
.btn-dark:hover { background: var(--navy-800); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 14px 30px rgba(7,19,31,.22); }

.btn-ghost { background: rgba(255,255,255,.72); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--steel-300); transform: translateY(-2px); }
.on-dark .btn-ghost, .hero .btn-ghost { color: var(--white); background: rgba(7,19,31,.18); border-color: rgba(255,255,255,.3); }
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.62); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(3px); }
}

.btn-note {
  display: block;
  font-size: .84rem;
  color: var(--steel-500);
  margin-top: .8rem;
}
.on-dark .btn-note { color: var(--steel-300); }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .78);
  font-size: .86rem;
  line-height: 1.2;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  /* De hero schuift er met een negatieve marge onderdoor; zonder eigen
     stapelcontext schildert die er overheen en is het nummer onklikbaar. */
  position: relative;
  z-index: 59;
}
.topbar .wrap-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  flex-wrap: nowrap;
}
.topbar a, .topbar span { white-space: nowrap; }
.topbar a {
  color: var(--white);
  text-decoration: none;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1;
}
.topbar a:hover { color: var(--yellow); }
.topbar-right { display: flex; align-items: center; gap: .7rem; }
.topbar-right > span { color: rgba(255, 255, 255, .68); font-weight: 600; }
.topbar svg { width: 15px; height: 15px; margin: 0; flex: none; color: var(--yellow); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  color: var(--white);
  background: rgba(7, 19, 31, .94);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 30px rgba(7,19,31,.08);
  transition: background-color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.site-header.is-scrolled { background: rgba(7, 19, 31, .985); box-shadow: 0 14px 38px rgba(7,19,31,.2); }
.site-header .wrap-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: none; padding-block: .3rem; }
.brand img { height: 46px; width: auto; }
.brand .logo-dark { display: none; }
.brand .logo-light { display: block; }

/* Donkere headerstaat boven de hero (logo wisselt naar wit, zoals de zustersite) */
.site-header.over-hero {
  background: rgba(7, 19, 31, .94);
  border-bottom-color: rgba(255, 255, 255, .1);
}
.site-header.over-hero .logo-dark { display: none; }
.site-header.over-hero .logo-light { display: block; }
.site-header.over-hero .nav > a { color: var(--white); }
.site-header.over-hero .nav > a:hover { color: var(--yellow); }
.site-header.over-hero .nav-toggle { color: var(--white); }

.nav {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .34rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.nav > a {
  font-weight: 600;
  font-size: .98rem;
  color: var(--white);
  text-decoration: none;
  padding: .68rem .86rem;
  border-radius: 999px;
  position: relative;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav > a::after {
  content: '';
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .34rem;
  height: 2px;
  border-radius: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s var(--ease);
}
.nav > a:hover { color: var(--white); background: rgba(255,255,255,.08); }
.nav > a:hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1); }
.nav > a[aria-current="page"] { background: rgba(255,255,255,.08); }

.nav > .nav-cta {
  margin-left: .2rem;
  padding: .6rem .68rem .6rem 1.08rem;
  min-height: 42px;
  font-size: .92rem;
  color: var(--navy-950);
  white-space: nowrap;
}
.nav > .nav-cta:hover { color: var(--navy-950); background: var(--yellow-hover); }
.nav > .nav-cta::after {
  content: '\2192';
  position: static;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-left: .2rem;
  border-radius: 50%;
  background: rgba(7,19,31,.1);
  transform: none;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.nav > .nav-cta:hover::after { transform: translateX(2px); background: rgba(7,19,31,.16); }

/* Dropdown Diensten */
.nav-group { position: relative; }
.nav-group > button {
  font: inherit;
  font-weight: 600;
  font-size: .98rem;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .68rem .86rem;
  border-radius: 999px;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav-group > button svg { width: 12px; height: 12px; transition: transform .25s; }
.site-header .nav-group > button { color: var(--white); }
.site-header.over-hero .nav-group > button { color: var(--white); }
.nav-group > button:hover, .nav-group[data-open] > button, .nav-group.is-current > button { background: rgba(255,255,255,.08); }
.nav-group.is-current > button::after {
  content: '';
  position: absolute;
  left: .86rem;
  right: 1.65rem;
  bottom: .34rem;
  height: 2px;
  border-radius: 2px;
  background: var(--yellow);
}
.nav-group > button { position: relative; }
.nav-group[data-open] > button svg { transform: rotate(180deg); }
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  min-width: 320px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card-hover);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-group[data-open] .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
}
.dropdown a:hover { background: var(--off); }
.dropdown a .num {
  font-family: var(--display);
  font-weight: 800;
  font-size: .8rem;
  color: var(--steel-500);
  letter-spacing: 0;
}
.dropdown a:hover .num { color: var(--yellow-600); }
.dropdown a small { display: block; font-weight: 400; color: var(--steel-500); font-size: .84rem; }

/* Mobiel menu */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--white);
  padding: .5rem;
  margin-right: -.5rem;
  cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--navy-950);
  color: var(--white);
  overflow: clip;
  margin-top: calc(-74px - 42px); /* achter topbar+header door */
  padding-top: calc(74px + 42px);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero-video.is-playing { opacity: 1; }
/* De video draait nu ook op mobiel, met een eigen licht bestand.
   Alleen bij reduced-motion blijft de foto staan. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(7, 19, 31, .92) 0%, rgba(7, 19, 31, .50) 38%, rgba(7, 19, 31, .08) 72%, rgba(7, 19, 31, .28) 100%),
    linear-gradient(90deg, rgba(7, 19, 31, .66) 0%, rgba(7, 19, 31, .38) 26%, rgba(7, 19, 31, .12) 46%, rgba(7, 19, 31, 0) 60%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 9vh, 6.5rem);
  max-width: var(--wrap);
  min-height: calc(100svh - 116px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* kop linksonder, video krijgt de ruimte (KNAPP-patroon) */
  align-items: flex-start;
}
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
/* Kop en lead blijven links; de rechterhelft van het beeld blijft vrij. */
.hero h1 { max-width: min(100%, 46rem); }
.hero .lead { max-width: min(100%, 38rem); }
.hero .alleen-smal { display: none; }
.hero h1 { color: var(--white); margin-bottom: .45em; }
.hero .lead { color: rgba(255, 255, 255, .92); margin-bottom: 2.1rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero .eyebrow { color: #fff; }

.hero .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, .32); }
.hero .btn-ghost:hover { border-color: rgba(255, 255, 255, .65); }
.hero .btn-note { color: var(--steel-300); }

/* Gestaffelde fade-up bij laden.
   De zichtbare eindstaat is de standaard; de animatie is de uitzondering.
   Zo hangt de belangrijkste boodschap van de site niet af van JavaScript
   en ook niet van het voltooien van een animatie. */
:where(.js) .hero .stagger { animation: fadeUp .8s var(--ease) both; }
:where(.js) .hero .stagger:nth-child(1) { animation-delay: .05s; }
:where(.js) .hero .stagger:nth-child(2) { animation-delay: .18s; }
:where(.js) .hero .stagger:nth-child(3) { animation-delay: .31s; }
:where(.js) .hero .stagger:nth-child(4) { animation-delay: .44s; }
:where(.js) .hero .stagger:nth-child(5) { animation-delay: .57s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Subhero voor subpagina's */
.subhero {
  background: var(--navy-950);
  color: var(--white);
  padding-block: clamp(3.2rem, 7vw, 5.5rem);
  position: relative;
  overflow: clip;
}
.subhero h1 { color: var(--white); font-size: clamp(2rem, 4.4vw, 3.3rem); margin-bottom: .3em; }
.subhero .lead { color: rgba(255, 255, 255, .8); max-width: 44em; }
.subhero .crumbs {
  font-size: .84rem;
  color: var(--steel-300);
  margin-bottom: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.subhero .crumbs a { color: var(--steel-300); text-decoration: none; }
.subhero .crumbs a:hover { color: var(--yellow); }
.subhero .crumbs svg { width: 11px; height: 11px; opacity: .6; }

/* ---------- Secties ---------- */
.section { padding-block: var(--sect); position: relative; }
.section-off { background: var(--off); }
.section-navy { background: var(--navy-950); color: var(--white); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy .lead, .section-navy p { color: var(--steel-300); }

.section-head { max-width: 640px; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head.centered .eyebrow { justify-content: center; }

/* Rollenbaan-divider: rij kleine rollen als sectie-overgang */
.roller-divider {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-block: .4rem;
  overflow: hidden;
}
.roller-divider i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}
.roller-divider i:nth-child(7n + 4) { background: var(--yellow); }

/* ---------- Trust-strip ---------- */
.trust-strip {
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-inline: 1px solid var(--line-soft);
}
.trust-item {
  background: var(--white);
  padding: 2rem 1.6rem;
  text-align: left;
}
.trust-item .big {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: .1em;
  font-variant-numeric: tabular-nums;
}
.trust-item .big .plus { color: var(--yellow-600); }
.trust-item .lbl { color: var(--steel-500); font-size: .92rem; margin-top: .5rem; line-height: 1.45; }

/* ---------- Snel contact: één korte keuze, geen offertetraject ---------- */
.quick-contact {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 5.8rem);
  background: var(--white);
  overflow: clip;
}
.quick-contact::before {
  content: '';
  position: absolute;
  width: min(34vw, 460px);
  aspect-ratio: 1;
  right: -12vw;
  top: -16vw;
  border-radius: 50%;
  background: rgba(255, 211, 55, .11);
  pointer-events: none;
}
.quick-contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  gap: clamp(2.2rem, 6vw, 5.5rem);
  align-items: center;
}
.quick-contact-intro h2 { max-width: 12em; }
.quick-contact-intro .lead { max-width: 31em; }
.quick-direct {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: .6rem;
  color: var(--ink);
  font-weight: 750;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--yellow);
  text-underline-offset: .35rem;
}
.quick-direct:hover { color: var(--navy-700); }
.quick-direct svg { width: 20px; height: 20px; flex: none; color: var(--yellow-600); }
.quick-form {
  position: relative;
  background: var(--off);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-card);
}
.quick-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin: 0 0 1.25rem;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}
.quick-choice legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.quick-choice label { position: relative; cursor: pointer; }
.quick-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.quick-choice span {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--steel-700);
  font-weight: 700;
  font-size: .92rem;
  transition: color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.quick-choice input:checked + span {
  color: var(--navy-950);
  background: var(--yellow);
  box-shadow: 0 5px 14px rgba(245, 184, 30, .2);
}
.quick-choice input:focus-visible + span { outline: 3px solid var(--navy-950); outline-offset: 2px; }
.quick-common,
.quick-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.quick-mode[hidden] { display: none; }
.quick-mode { margin-top: 1rem; }
.quick-mode[data-contact-mode="vraag"] .form-field:last-child { grid-column: 1 / -1; }
.quick-form .form-field textarea { min-height: 104px; }
.quick-form .btn { width: 100%; margin-top: 1.15rem; }
.quick-form .form-note {
  display: block;
  margin-top: .75rem;
  color: var(--steel-500);
  text-align: center;
  font-size: .78rem;
  line-height: 1.45;
}
.quick-form .form-note a { color: var(--steel-700); }

/* ---------- Dienstenkaarten ---------- */
.diensten-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}
.dienst-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 3vw, 2.4rem);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  overflow: clip;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.dienst-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line);
}
/* Gele accentlijn die van boven groeit bij hover */
.dienst-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--yellow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-med) var(--ease);
  z-index: 2;
}
.dienst-card:hover::before { transform: scaleY(1); }
.dienst-card .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--navy-950);
  color: var(--yellow);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.dienst-card .icon svg { width: 26px; height: 26px; }
.dienst-card h3 { margin: 0; position: relative; z-index: 1; }
.dienst-card p { color: var(--steel-700); font-size: .98rem; position: relative; z-index: 1; }
.dienst-card .more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.dienst-card .more svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.dienst-card:hover .more svg { transform: translateX(5px); }
.dienst-card .more::after {
  content: '';
  height: 2.5px;
  border-radius: 2px;
  background: var(--yellow);
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  transition: width .3s var(--ease);
}
.dienst-card:hover .more::after { width: 100%; }

/* Homepage: verticale scroll stuurt één rustige, horizontale dienstenrail. */
.services-journey {
  --services-progress: 0;
  position: relative;
  background: var(--off);
}
.services-stage { background: var(--off); }
.services-head { padding-block: 2.7rem 1.7rem; }
.services-head .section-head { margin-bottom: 0; }
.services-progress {
  width: min(260px, 30vw);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
  margin-top: 1.5rem;
}
.services-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--yellow-600);
  transform: scaleX(var(--services-progress));
  transform-origin: left center;
  will-change: transform;
}
.services-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.services-viewport::-webkit-scrollbar { display: none; }
.services-track {
  --rail-pad: max(clamp(1.1rem, 4vw, 2rem), calc((100vw - var(--wrap)) / 2 + 2rem));
  display: flex;
  width: max-content;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: 0 var(--rail-pad) 3rem;
}
.services-track .dienst-card {
  flex: 0 0 min(84vw, 390px);
  min-height: 350px;
  scroll-snap-align: start;
}
.service-scope {
  position: relative;
  z-index: 1;
  color: var(--steel-500);
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: .07em;
  text-transform: uppercase;
}

@media (min-width: 881px) {
  .services-stage {
    position: sticky;
    top: 74px;
    height: calc(100svh - 74px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .services-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    flex: none;
  }
  .services-progress { margin: 0 0 .45rem; flex: none; }
  .services-viewport { overflow: hidden; flex: 1; min-height: 0; }
  .services-track {
    height: 100%;
    padding-bottom: clamp(2.2rem, 5vh, 4rem);
    will-change: transform;
  }
  .services-track .dienst-card {
    flex-basis: clamp(430px, 46vw, 620px);
    min-height: 0;
    height: 100%;
    max-height: 440px;
    opacity: .72;
    transform: translateY(14px) scale(.985);
    transition: transform .4s var(--ease), opacity .4s var(--ease), box-shadow .35s var(--ease), border-color .3s var(--ease);
  }
  .services-track .dienst-card.is-past { opacity: .82; transform: translateY(4px) scale(.995); }
  .services-track .dienst-card.is-active { opacity: 1; transform: translateY(-3px) scale(1); }
  .services-track .dienst-card.is-active::before { transform: scaleY(1); }
}

/* ---------- Media + tekst split ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.4rem, 6vw, 5rem);
  align-items: center;
}
.split.flip > .split-media { order: 2; }
.split-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: clip;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 5; /* vast staand kader: elke bronfoto wordt netjes gecropt */
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media .foto-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(7, 19, 31, .78);
  color: var(--white);
  backdrop-filter: blur(6px);
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem .85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.split-media .foto-tag::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

.checklist { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .85rem; }
.checklist li { display: flex; gap: .8rem; align-items: flex-start; color: var(--steel-700); }
.checklist li strong { color: var(--ink); }
.checklist .check {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy-950);
  display: grid;
  place-items: center;
  margin-top: .1rem;
}
.checklist .check svg { width: 13px; height: 13px; }
.section-navy .checklist li { color: var(--steel-300); }
.section-navy .checklist li strong { color: var(--white); }

/* ---------- Werkwijze: één betekenisvolle scrollroute ---------- */
.process-route {
  --route-progress: 1;
  overflow: clip;
}
.process-route .section-head .lead { color: var(--steel-300); }
.stappen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
  counter-reset: stap;
}
.process-route .stappen { position: relative; }
.process-route .stappen::before,
.process-route .stappen::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: calc(1.7rem + 19px);
  left: calc(1.5rem + 19px);
  right: calc(1.5rem + 19px);
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
}
.process-route .stappen::before { background: var(--navy-700); }
.process-route .stappen::after {
  background: var(--yellow);
  transform: scaleX(var(--route-progress));
  transform-origin: left center;
  will-change: transform;
}
.stap {
  position: relative;
  z-index: 1;
  background: var(--navy-900);
  border: 1px solid var(--navy-800);
  border-radius: var(--r-md);
  padding: 1.7rem 1.5rem;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.stap .stap-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: .95rem;
  color: var(--navy-950);
  background: var(--yellow);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  border: 1px solid transparent;
  transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.stap h3 { font-size: 1.12rem; color: var(--white); margin-bottom: .4em; }
.stap p { font-size: .93rem; color: var(--steel-300); margin: 0; }
.js .process-route.route-ready .stap .stap-num {
  color: var(--steel-300);
  background: var(--navy-800);
  border-color: var(--navy-700);
}
.js .process-route.route-ready .stap.is-route-active {
  background: color-mix(in srgb, var(--navy-900) 88%, var(--yellow));
  border-color: rgba(255, 203, 5, .38);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}
.js .process-route.route-ready .stap.is-route-active .stap-num {
  color: var(--navy-950);
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 0 0 5px rgba(255, 203, 5, .1);
}

/* ---------- Quote / citaat ---------- */
.pull-quote {
  border-left: 4px solid var(--yellow);
  padding-left: 1.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
  max-width: 34em;
}

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: .8rem; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: clip;
  transition: border-color .25s;
}
.faq details[open] { border-color: var(--line); box-shadow: var(--shadow-card); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 1.15rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--off);
  display: grid;
  place-items: center;
  transition: background .25s, transform .3s var(--ease);
}
.faq summary .plus svg { width: 13px; height: 13px; }
.faq details[open] summary .plus { background: var(--yellow); transform: rotate(45deg); }
.faq .faq-body { padding: 0 1.4rem 1.25rem; color: var(--steel-700); font-size: .98rem; }

/* ---------- Gele CTA-band ---------- */
.cta-band {
  background: var(--yellow);
  color: var(--navy-950);
  position: relative;
  overflow: clip;
}
.cta-band .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta-band h2 { color: var(--navy-950); font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: .35em; }
.cta-band p { color: rgba(7, 19, 31, .78); max-width: 34em; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 1.6rem; }
.cta-band .btn-tel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--navy-950);
  text-decoration: none;
}
.cta-band .btn-tel svg { width: 20px; height: 20px; }
.cta-band .btn-tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.cta-portret {
  /* Verborgen tot er een echt portret is. Een generiek avatar-icoon dat
     doorgaat voor de oprichter kost meer vertrouwen dan het oplevert.
     Weghalen zodra assets-src/photos/portret-contact.jpg bestaat. */
  display: none;
  width: clamp(150px, 18vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: clip;
  border: 6px solid rgba(7, 19, 31, .1);
  align-self: center;
}
.cta-portret img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-950);
  color: var(--steel-300);
  font-size: .95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.site-footer .footer-logo img { height: 44px; width: auto; margin-bottom: 1.2rem; }
.site-footer h4 {
  color: var(--white);
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { color: var(--steel-300); text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--yellow); }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: .25rem; color: var(--yellow); }
/* Ruimte vrijhouden voor de zwevende WhatsApp-knop, die op laptopbreedtes
   anders bovenop 'Privacy & cookies' ligt. Onder 881px neemt de vaste
   actiebalk het contact over en is deze extra ruimte dus niet nodig. */
@media (min-width: 881px) {
  .footer-bottom { padding-inline-end: 6rem; }
}
.footer-bottom {
  border-top: 1px solid var(--navy-800);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
  font-size: .84rem;
  color: var(--steel-500);
}
.footer-bottom a { color: var(--steel-500); text-decoration: none; }
.footer-bottom a:hover { color: var(--yellow); }
.footer-zuster {
  background: var(--navy-900);
  border: 1px solid var(--navy-800);
  border-radius: var(--r-md);
  padding: 1.1rem 1.3rem;
  margin-top: 1.4rem;
  font-size: .88rem;
}
.footer-zuster strong { color: var(--white); display: block; margin-bottom: .2rem; }

/* ---------- Formulieren ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.8rem, 3.4vw, 2.6rem);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-field { display: grid; gap: .45rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: .92rem; }
.form-field label .opt { color: var(--steel-500); font-weight: 400; }
.form-field input,
.form-field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--off);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: .85rem 1rem;
  width: 100%;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.form-field textarea { min-height: 130px; resize: vertical; }
/* Geen outline:none meer: op de belangrijkste pagina van de site moet een
   toetsenbordgebruiker kunnen zien in welk veld hij staat. De globale
   navy ring pakt hier vanzelf. */
.form-field input:focus,
.form-field textarea:focus {
  background: var(--white);
  border-color: var(--steel-700);
  box-shadow: 0 0 0 4px rgba(7, 19, 31, .08);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: var(--err); }
.field-error { color: var(--err); font-size: .84rem; display: none; }
.form-field.has-error .field-error { display: block; }
/* Geen display:none op de live region zelf: een verborgen aria-live wordt
   niet voorgelezen, dus de bevestiging bereikte schermlezers nooit.
   De opmaak hangt nu aan de statusklassen. */
.form-msg {
  border-radius: var(--r-sm);
  font-size: .95rem;
  font-weight: 600;
}
.form-msg.ok,
.form-msg.err { padding: .95rem 1.15rem; margin-top: 1.1rem; }
.form-msg.ok { background: var(--ok-bg); color: var(--ok); }
.form-msg.err { background: var(--err-bg); color: var(--err); }
.hp-field { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Contactpagina ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-info { display: grid; gap: 1.5rem; }
.contact-kaart {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact-kaart .ic {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--navy-950);
  color: var(--yellow);
  display: grid;
  place-items: center;
}
.contact-kaart .ic svg { width: 22px; height: 22px; }
.contact-kaart .lbl { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-500); }
.contact-kaart .val { font-weight: 700; font-size: 1.08rem; }
.contact-kaart .val a { text-decoration: none; }
.contact-kaart .val a:hover { color: var(--yellow-600); }
.contact-kaart .sub { color: var(--steel-500); font-size: .9rem; }

/* WhatsApp fab */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 55;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(7, 19, 31, .28);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(7, 19, 31, .35); }
.wa-fab svg { width: 28px; height: 28px; }

/* ---------- Scroll-reveal ---------- */
/* De beginstaat hangt aan .js, die het inline bootscript in de <head> zet en
   weer weghaalt als ott-logistics.js niet binnen 2,5s draait. Zonder deze
   koppeling is de halve site onzichtbaar bij een JS-fout of een contentfilter.
   :where() houdt de specificiteit op nul, zodat .reveal.in blijft winnen. */
:where(.js) .reveal {
  opacity: 0;
  transform: translateY(22px);
}
.reveal {
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* ---------- Prose (privacy e.d.) ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: 1.5rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.8em; }
.prose ul { color: var(--steel-700); }

/* ---------- Verfijningen: materiaal, beweging & signatuur ---------- */

/* Grain op navy-vlakken — je ziet het pas als het weg is */
.section-navy, .site-footer, .hero { position: relative; }
.section-navy::before, .site-footer::before, .hero .grain {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: .06;
  mix-blend-mode: overlay;
  z-index: 0;
}
.hero .grain { z-index: 1; }
.section-navy > .wrap, .section-navy > .wrap-wide,
.site-footer > .wrap, .site-footer > .wrap-wide { position: relative; z-index: 1; }

/* Uniforme fotobehandeling: licht ontkleurd, navy in de schaduwen */
.foto {
  position: relative;
  overflow: clip;
}
.foto img {
  filter: saturate(.78) contrast(1.05);
  transition: filter var(--t-slow) var(--ease);
}
.foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 19, 31, .28), rgba(7, 19, 31, .06) 55%);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}
.foto:hover img { filter: saturate(1) contrast(1.02); }
.foto:hover::after { opacity: .4; }

/* Clip-path-fotoreveal: foto's worden onthuld, niet getoond */
:where(.js) .reveal-img { clip-path: inset(0 0 100% 0); }
:where(.js) .reveal-img img { transform: scale(1.06); }
.reveal-img {
  transition: clip-path .9s var(--ease);
}
.reveal-img img {
  transition: transform 1.1s var(--ease), filter var(--t-slow) var(--ease);
}
.reveal-img.in { clip-path: inset(0); }
.reveal-img.in img { transform: scale(1); }

/* Subtiele diepte op één praktijkfoto. De schaal houdt de beeldrand tijdens
   de kleine verschuiving altijd buiten het kader. */
[data-scroll-depth] picture {
  display: block;
  width: 100%;
  height: 100%;
  transform: translate3d(0, var(--depth-y, 0px), 0) scale(1.045);
  will-change: transform;
}

/* Witte sectie die over de navy heen schuift */
.overlap-top {
  border-radius: 24px 24px 0 0;
  margin-top: -28px;
  position: relative;
  z-index: 2;
}

/* Getekende gele underline op tekstlinks in lopende tekst */
.prose a, .lead a, p a:not(.btn) {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 2.5px;
  transition: background-size var(--t-fast) var(--ease);
  padding-bottom: 2px;
}
p a:not(.btn):hover, .prose a:hover, .lead a:hover { background-size: 100% 38%; }

/* Mobiele sticky actiebalk (bellen / WhatsApp / offerte) */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 58;
  background: var(--navy-950);
  border-top: 1px solid var(--navy-800);
  padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: .55rem;
}
.mobile-bar a {
  display: flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  border-radius: 999px;
  padding: .7rem .5rem;
  border: 1.5px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.mobile-bar a:active { transform: translateY(1px) scale(.97); }
.mobile-bar a svg { width: 16px; height: 16px; flex: none; }
.mobile-bar .mb-tel { color: var(--white); border-color: var(--navy-700); }
/* Icoon-only: het woord "WhatsApp" voegde niets toe naast een groen,
   herkenbaar logo. De getinte glasachtige vulling blijft (dat oogde goed),
   het icoon is groter zodat het de knop draagt zonder bijschrift. */
.mobile-bar .mb-wa {
  color: var(--white);
  background: rgba(37, 211, 102, .16);
  border-color: rgba(37, 211, 102, .4);
}
.mobile-bar .mb-wa svg { width: 26px; height: 26px; }
.mobile-bar .mb-cta { color: var(--navy-950); background: var(--yellow); }

/* Cross-document view transitions: subtiele fade-up tussen pagina's */
@view-transition { navigation: auto; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-up-in { from { opacity: 0; transform: translateY(8px); } }
::view-transition-old(root) { animation: vt-fade-out .18s var(--ease-inout) both; }
::view-transition-new(root) { animation: vt-fade-up-in .3s var(--ease) both; }

/* ---------- Toegankelijkheid & motion ---------- */
/* Geel is achtergrond of accent op donker, nooit een focusring op licht:
   #F5B81E haalt op wit maar 1,79:1 waar WCAG 3:1 vraagt. Navy op licht,
   geel op de donkere vlakken. Geen eigen border-radius, want die zou de
   pill-vorm van .btn bij focus rechthoekig maken. */
:focus-visible {
  outline: 3px solid var(--navy-950);
  outline-offset: 2px;
}
.hero :focus-visible, .subhero :focus-visible, .section-navy :focus-visible,
.site-footer :focus-visible, .topbar :focus-visible,
.mobile-bar :focus-visible { outline-color: var(--yellow); }
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--yellow);
  color: var(--navy-950);
  font-weight: 700;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* animation-duration wordt hierboven platgeslagen, animation-delay niet;
     zonder dit wacht deze bezoeker alsnog op een onzichtbare CTA. */
  .hero .stagger { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal-img { clip-path: inset(0); }
  .reveal-img img { transform: none; }
  [data-scroll-depth] picture { transform: none; }
  .process-route { --route-progress: 1 !important; }
  .services-journey { height: auto !important; }
  .services-stage { position: relative; top: auto; height: auto; overflow: visible; display: block; }
  .services-viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .services-track { transform: none !important; height: auto; }
  .services-track .dienst-card,
  .services-track .dienst-card.is-past,
  .services-track .dienst-card.is-active { opacity: 1; transform: none; height: auto; min-height: 350px; }
  .js .process-route.route-ready .stap .stap-num,
  .js .process-route.route-ready .stap.is-route-active .stap-num {
    color: var(--navy-950);
    background: var(--yellow);
    border-color: var(--yellow);
    box-shadow: none;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Responsive ---------- */
.diensten-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1020px) {
  .diensten-grid, .diensten-grid-3 { grid-template-columns: 1fr 1fr; }
  .stappen { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .process-route .stappen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
  }
  .process-route .stap { padding: 1.35rem 1rem; }
  .process-route .stappen::before,
  .process-route .stappen::after {
    top: calc(1.35rem + 19px);
    left: calc(1rem + 19px);
    right: calc(1rem + 19px);
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  /* backdrop-filter maakt in Chromium van de sticky header een containing
     block voor position:fixed. Zonder deze uitzondering bleef het mobiele
     menu daardoor opgesloten in de 120px hoge header. */
  body.nav-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    z-index: 70;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex-direction: column;
    /* Met open submenu is het menu circa 535px hoog. Op een telefoon in
       liggend formaat was de gele knop daardoor onbereikbaar, want
       body.nav-open staat op overflow:hidden. */
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5.5rem 1.25rem 2rem;
    align-items: center;
    gap: 1.6rem;
    background: var(--navy-950);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  /* Blijft optisch gecentreerd zolang het past, en schuift pas op als het
     niet past. auto-marges op de buitenste kinderen doen dat werk. */
  .nav > :first-child { margin-top: auto; }
  .nav > :last-child { margin-bottom: auto; }
  body.nav-open .nav { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .nav > a, .nav-group > button { color: var(--white) !important; font-size: 1.3rem; }
  .nav > a:hover, .nav > a[aria-current="page"],
  .nav-group > button:hover, .nav-group[data-open] > button, .nav-group.is-current > button { background: transparent; }
  .nav-group { text-align: center; }
  .dropdown {
    position: static;
    translate: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: none;
    min-width: 0;
    padding: .4rem 0 0;
  }
  .nav-group[data-open] .dropdown { display: block; }
  .dropdown a { color: var(--steel-300); justify-content: center; font-size: 1.05rem; padding: .45rem; }
  .dropdown a:hover { background: transparent; color: var(--yellow); }
  /* Het mobiele menu is een navy paneel, dus daar wint geel van navy. */
  .nav :focus-visible, body.nav-open .nav-toggle:focus-visible { outline-color: var(--yellow); }
  .dropdown a small { display: none; }
  .nav > .nav-cta { font-size: 1.05rem; margin: 0; color: var(--navy-950) !important; }
  .nav-toggle { display: block; position: relative; z-index: 80; }
  body.nav-open .nav-toggle { color: var(--white); position: fixed; top: calc(42px + 14px); right: 1.1rem; }
  .topbar .hide-mobile { display: none; }
  .topbar .wrap-wide { justify-content: center; min-height: 42px; }
  .topbar-right { gap: .45rem; }
  .topbar-right > span { font-size: .78rem; }
  .topbar a { font-size: .83rem; }
  .brand img { height: 42px; }

  .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip > .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-band .wrap { grid-template-columns: 1fr; }
  .cta-portret { display: none; }
  .trust-grid { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-soft); }
  .quick-contact-grid { grid-template-columns: 1fr; gap: 1.7rem; }
  .quick-contact-intro h2 { max-width: none; }
  .quick-contact-intro .lead { max-width: 40em; }
  .services-journey { height: auto !important; }
  .services-stage { position: relative; top: auto; height: auto; overflow: visible; display: block; }
  .services-head { display: block; padding-block: 3.3rem 1.6rem; }
  .services-progress { display: none; }
  .services-viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .services-track { transform: none !important; height: auto; }
  .services-track .dienst-card,
  .services-track .dienst-card.is-past,
  .services-track .dienst-card.is-active { opacity: 1; transform: none; height: auto; min-height: 350px; }
  [data-scroll-depth] picture { transform: none; will-change: auto; }

  .process-route .stappen {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .process-route .stap { padding: 1.35rem 1.1rem; }
  .process-route .stappen::before,
  .process-route .stappen::after {
    top: calc(1.35rem + 19px);
    bottom: calc(1.35rem + 19px);
    left: calc(1.1rem + 19px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .process-route .stappen::after {
    transform: scaleY(var(--route-progress));
    transform-origin: center top;
  }
}

/* De indeling hoort bij het beschikbare scherm, niet bij het gemelde
   invoerapparaat. Zo krijgen hybride apparaten en browserweergaven op
   telefoonformaat niet óók nog de zwevende WhatsApp-knop over de content. */
@media (max-width: 880px) {
  .mobile-bar { display: grid; }
  .wa-fab { display: none; }
  body { padding-bottom: calc(var(--actiebalk-h) + env(safe-area-inset-bottom)); }
  /* De hero rekende met de volle schermhoogte en hield geen rekening met de
     vaste actiebalk. Op een iPhone SE liep de geruststellingsregel daardoor
     achter de balk. Nu is de balk onderdeel van de rekensom. */
  .hero-inner {
    min-height: calc(100svh - 116px - var(--actiebalk-h) - env(safe-area-inset-bottom));
    padding-block: 2rem 1.5rem;
    /* Desktop anchort onderaan (KNAPP-patroon), maar op mobiel liet flex-end
       al het overtollige ruimte als één dode zone bovenaan staan: gemeten
       196px lucht boven de eyebrow tegenover 24px onder de laatste regel.
       Centreren verdeelt diezelfde ruimte gelijk (circa 114px/106px), zodat
       het blok als geheel een stap omhoog komt in plaats van tegen de
       actiebalk aan te plakken. */
    justify-content: center;
  }
  .hero .lead { margin-bottom: 1.4rem; }
}

@media (max-width: 620px) {
  .diensten-grid, .diensten-grid-3 { grid-template-columns: 1fr; }
  .stappen { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .quick-common,
  .quick-mode { grid-template-columns: 1fr; }
  .quick-mode[data-contact-mode="vraag"] .form-field:last-child { grid-column: auto; }
  .quick-choice span { font-size: .84rem; padding-inline: .45rem; }
  .quick-direct { align-items: flex-start; font-size: .92rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
}

/* Op 320px is de volledige tekst "Storing melden" samen met de andere twee
   acties breder dan het scherm. De zichtbare verkorting houdt alle knoppen
   binnen beeld; voor screenreaders blijft de expliciete HTML-tekst staan. */
@media (max-width: 360px) {
  .mobile-bar {
    grid-template-columns: 1fr 1fr .8fr;
    gap: .35rem;
    padding-inline: .45rem;
  }
  .mobile-bar a {
    gap: .3rem;
    padding-inline: .3rem;
    font-size: .76rem;
  }
  .mobile-bar .mb-tel { font-size: 0; }
  .mobile-bar .mb-tel::after {
    content: "Bellen";
    font-size: .76rem;
  }
  .mobile-bar .mb-cta {
    white-space: normal;
    text-align: center;
    line-height: 1.1;
  }
}

/* ============================================================
   Terugbelblok — het korte formulier
   Twee velden. Elk extra verplicht veld kost ingevulde formulieren,
   dus hier staat bewust geen e-mailadres, geen bedrijf, geen onderwerp.
   ============================================================ */
.terugbel {
  background: var(--navy-950);
  color: var(--white);
  position: relative;
  overflow: clip;
}
.terugbel::before {
  /* Zelfde gele signatuurlijn als de eyebrow, maar dan als accentrand */
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow) 0%, var(--yellow-600) 38%, transparent 72%);
}
.terugbel-inner {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.terugbel h2 {
  color: var(--white);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  max-width: 16em;
}
.terugbel .eyebrow { color: var(--steel-300); }
.terugbel-lead {
  color: rgba(255, 255, 255, .82);
  font-size: 1.05rem;
  max-width: 34em;
  margin-bottom: 1.6rem;
}
.terugbel-punten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.terugbel-punten li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  color: rgba(255, 255, 255, .82);
  font-size: .96rem;
}
.terugbel-punten svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: .18rem;
  color: var(--yellow);
}

/* De kaart zelf */
.terugbel-kaart {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.terugbel-kaart h3 {
  font-size: 1.25rem;
  margin-bottom: .3em;
}
.terugbel-kaart .sub {
  color: var(--steel-500);
  font-size: .9rem;
  margin-bottom: 1.4rem;
}
.terugbel-velden { display: grid; gap: .9rem; }
.terugbel-kaart .btn { width: 100%; margin-top: 1.2rem; }
.terugbel-kaart .form-note {
  display: block;
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--steel-500);
  text-align: center;
}
.terugbel-kaart .form-note a { color: var(--steel-700); }
/* Of-scheiding naar de directe belknop */
.terugbel-of {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.3rem 0 .2rem;
  color: var(--steel-500);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}
.terugbel-of::before,
.terugbel-of::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.terugbel-bel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 800;
  font-size: 1.08rem;
  text-decoration: none;
  color: var(--navy-950);
  padding: .85rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  transition: border-color .2s, background .2s;
}
.terugbel-bel:hover { border-color: var(--navy-950); background: var(--off); }
.terugbel-bel svg { width: 19px; height: 19px; color: var(--yellow-600); }

@media (max-width: 880px) {
  .terugbel-inner { grid-template-columns: 1fr; }
  .terugbel-punten { margin-bottom: .4rem; }
}

/* ============================================================
   Projectsectie — bewijs van uitgevoerd werk
   ============================================================ */
.projecten-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.project-kaart {
  position: relative;
  border-radius: var(--r-lg);
  overflow: clip;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.project-kaart img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--t-slow) var(--ease);
}
.project-kaart::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(7, 19, 31, .88) 0%, rgba(7, 19, 31, .45) 45%, rgba(7, 19, 31, .05) 100%);
}
.project-kaart:hover img { transform: scale(1.04); }
.project-tekst {
  padding: clamp(1.3rem, 3vw, 2rem);
  color: var(--white);
}
.project-tekst .tag {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-950);
  background: var(--yellow);
  padding: .3rem .7rem;
  border-radius: 999px;
  margin-bottom: .8rem;
}
.project-tekst h3 {
  color: var(--white);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: .35em;
}
.project-tekst p {
  color: rgba(255, 255, 255, .84);
  font-size: .96rem;
  margin: 0;
  max-width: 34em;
}
@media (max-width: 880px) {
  .projecten-grid { grid-template-columns: 1fr; }
  .project-kaart { min-height: 260px; }
}

/* Overzichtslink bovenaan de dropdown */
.dropdown-all { border-bottom: 1px solid var(--line-soft); }
.dropdown-all .num { color: var(--yellow-600); font-weight: 800; }

/* Korte telefoonschermen: de tweede heroknop is daar dubbelop, want
   "Storing melden" staat al als eerste vak in de vaste actiebalk.
   Weghalen scheelt 66px en trekt de geruststellingsregel in beeld. */
@media (max-width: 880px) and (max-height: 740px) {
  .hero-ctas .btn-ghost { display: none; }
  .hero .lead { font-size: 1rem; margin-bottom: 1.1rem; }
  .hero .btn-note { font-size: .78rem; margin-top: .5rem; }
  .hero-inner { padding-block: 1.5rem 1.1rem; }
}

/* Datumregel boven juridische teksten */
.prose-meta {
  font-size: .86rem;
  color: var(--steel-500);
  margin-bottom: 2.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.prose ol, .prose ul { color: var(--steel-700); padding-left: 1.2rem; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--yellow-600); }

/* ============================================================
   Praktijkvoorbeeld — één uitgelicht project
   Klaar voor gebruik. Zie docs/praktijkvoorbeeld-template.html voor
   het HTML-blok en wat er per veld ingevuld moet worden.
   ============================================================ */
.case {
  background: var(--white);
  border-top: 1px solid var(--line-soft);
}
.case-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: var(--sect);
}
.case-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: clip;
  aspect-ratio: 4 / 3;
}
.case-media img { width: 100%; height: 100%; object-fit: cover; }
/* Optioneel tweede beeld, iets verschoven, voor een voor-en-na */
.case-media-duo { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.case-media-duo .case-media { aspect-ratio: 3 / 4; }
.case-media-duo .case-media:last-child { margin-top: 2.2rem; }

.case-situatie {
  border-left: 3px solid var(--yellow);
  padding-left: 1.1rem;
  margin-bottom: 1.6rem;
  color: var(--steel-700);
  font-size: 1.02rem;
}
.case-situatie strong { display: block; color: var(--ink); margin-bottom: .2em; }

/* De cijfers onder het verhaal. Alleen vullen met wat waargemaakt kan
   worden; een leeg vak is beter dan een verzonnen getal. */
.case-cijfers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.case-cijfer .waarde {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy-950);
}
.case-cijfer .wat {
  font-size: .86rem;
  color: var(--steel-500);
  margin-top: .35rem;
  line-height: 1.35;
}
.case-quote {
  margin-top: 2rem;
  padding: 1.3rem 1.5rem;
  background: var(--off);
  border-radius: var(--r-md);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}
.case-quote footer {
  margin-top: .8rem;
  font-size: .88rem;
  color: var(--steel-500);
  font-style: normal;
}

@media (max-width: 880px) {
  .case-inner { grid-template-columns: 1fr; }
  .case-cijfers { grid-template-columns: 1fr; gap: .9rem; }
  .case-media-duo .case-media:last-child { margin-top: 0; }
}

/* ---------- Casepagina: aanvullende elementen ---------- */
/* Beeld en tekst wisselen per blok van kant, zodat de pagina ritme houdt. */
.case-omgekeerd .case-media { order: 2; }
.case-inner .case-media { aspect-ratio: 4 / 5; }
.case-inner .case-media picture { display: contents; }

.case-breed {
  border-radius: var(--r-lg);
  overflow: clip;
  margin-bottom: 1.8rem;
}
.case-breed img { width: 100%; height: auto; display: block; }
.case-bijschrift {
  display: block;
  padding: .9rem 1.1rem;
  background: var(--navy-950);
  color: var(--steel-300);
  font-size: .9rem;
}
.case-tekstblok { max-width: 34em; }

.case-lijst {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.case-lijst li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--steel-700);
}
.case-lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--yellow);
}

.case-strook {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.case-strook-item {
  border-radius: var(--r-md);
  overflow: clip;
  aspect-ratio: 4 / 5;
}
.case-strook-item picture { display: contents; }
.case-strook-item img { width: 100%; height: 100%; object-fit: cover; }

.case-slot { max-width: 46em; }
.section-navy .case-slot p { color: rgba(255, 255, 255, .84); }
.case-kernzin {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--white);
  border-left: 3px solid var(--yellow);
  padding-left: 1.1rem;
  margin-top: 1.8rem;
}

@media (max-width: 880px) {
  .case-omgekeerd .case-media { order: 0; }
  .case-strook { grid-template-columns: 1fr; }
  .case-strook-item { aspect-ratio: 3 / 2; }
}

/* De casekaart in de werksectie is klikbaar en krijgt daarom een doorleesregel */
.project-kaart-case { text-decoration: none; }
.project-kaart-case .more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--yellow);
}
.project-kaart-case .more svg { width: 17px; height: 17px; transition: transform var(--t-fast) var(--ease); }
.project-kaart-case:hover .more svg { transform: translateX(4px); }
/* Drie kaarten naast elkaar zodra er ruimte is */
@media (min-width: 881px) {
  .projecten-grid { grid-template-columns: repeat(3, 1fr); }
  .project-kaart { min-height: 340px; }
}

/* ============================================================
   Hero-leesbaarheid
   Tekst staat over bewegend beeld, dus de leesbaarheid mag niet
   afhangen van welk frame er toevallig onder staat.
   ============================================================ */
/* Een zachte schaduw houdt witte tekst leesbaar als er een licht
   frame voorbijkomt, zonder dat je hem als schaduw herkent. */
.hero h1,
.hero .lead,
.hero .eyebrow,
.hero .btn-note { text-shadow: 0 1px 22px rgba(7, 19, 31, .55); }

@media (max-width: 880px) {
  /* Op een telefoon telde het tekstblok dertien regels. Deze zinnen
     staan verderop op de pagina en in de vaste actiebalk al. */
  .hero .alleen-breed { display: none; }
  .hero .alleen-smal { display: inline; }

  /* De eyebrow en de geruststellingsregel braken net over twee regels.
     Iets krapper gezet zodat ze allebei op één regel passen. */
  .hero .eyebrow { letter-spacing: .07em; font-size: .68rem; gap: .5rem; }
  .hero .eyebrow::before { width: 16px; }
  .hero .btn-note { font-size: .76rem; }

  /* Sterker scrim precies onder het tekstblok, zodat de contrastwaarde
     niet meebeweegt met de video. Rechts blijft het beeld open. */
  .hero-media::after {
    background:
      linear-gradient(to top, rgba(7, 19, 31, .95) 0%, rgba(7, 19, 31, .78) 34%, rgba(7, 19, 31, .34) 62%, rgba(7, 19, 31, .22) 100%),
      linear-gradient(90deg, rgba(7, 19, 31, .55) 0%, rgba(7, 19, 31, .18) 58%, rgba(7, 19, 31, .06) 100%);
  }
}