/* ============================================================
   STERK TRANSPORT: Design System
   Geen framework/build-step: handgeschreven, custom properties
   als single source of truth. Zie docs/DESIGN_SYSTEM.md.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Kleuren --- */
  --ink: #0b0e14;          /* vrijwel zwart, subtiel navy-getint */
  --ink-soft: #12161f;     /* iets lichter donker vlak, bv. footer */
  --ink-line: #262c38;     /* scheidingslijnen op donker */
  --paper: #ffffff;
  --paper-soft: #f4f5f7;   /* lichte sectie-achtergrond */
  --gold: #c9a24b;         /* warm, gedempt goud/oker */
  --gold-bright: #d9b968;  /* hover-state van goud */
  --ink-on-paper: #14171d; /* bijna-zwarte body-tekst op licht */
  --text-muted-dark: rgba(255, 255, 255, 0.72);
  --text-muted-light: #545a66;

  /* --- Typografie --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  /* Niet meer in gebruik sinds 21 sep: de page-hero H1 op binnenpagina's gebruikt nu
     --step-h1-hero (Randy: net zo groot als de homepage-H1). */
  --step-h1: clamp(2.4rem, 1.9rem + 2.3vw, 3.75rem);
  /* Homepage-hero H1: ~44px mobiel, ~56px tablet, geplafonneerd op 60px. */
  --step-h1-hero: clamp(2.375rem, 1.9665rem + 2.831vw, 3.5625rem);
  --step-h2: clamp(1.9rem, 1.6rem + 1.3vw, 2.9rem);
  --step-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --lh-body: 1.6;
  --lh-tight: 1.08;

  /* --- Spacing / ritme --- */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 6vw + 1rem, 8rem);

  /* --- Overig --- */
  --radius: 6px; /* vaste standaard vlootbreed: knoppen, kaarten, afbeeldingen, formuliervelden (Randy, 11 sep 2026): bewust niet groter, geen 12-16px ronde hoeken */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset / basis --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: var(--lh-body);
  color: var(--ink-on-paper);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; border-radius: var(--radius); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--dark { background: var(--ink); color: var(--text-muted-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--soft { background: var(--paper-soft); }

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9em;
}

.section-heading { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-heading h2 { font-size: var(--step-h2); }
.section-heading p { margin-top: 1em; font-size: 1.05rem; color: var(--text-muted-light); }
.section--dark .section-heading p { color: var(--text-muted-dark); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.6em;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 1em; height: 1em; transition: transform 0.2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-bright); }

.btn--ghost-dark { border-color: rgba(255,255,255,0.4); color: #fff; }
.btn--ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.btn--text { padding: 0; color: var(--ink-on-paper); border-bottom: 1px solid var(--ink-on-paper); border-radius: 0; }
.btn--text:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Losse tekstlink met pijl (los van een zin, bv. onder een alinea): groter, dikke gouden lijn,
   pijl schuift bij hover door. Voor inline links in lopende tekst blijft .btn--text. */
.btn--link {
  padding: 0 0 0.45em;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--ink-on-paper);
  border: 0;
  border-bottom: 2px solid var(--gold);
  border-radius: 0;
  margin-top: 0.4rem;
}
.btn--link svg { width: 1.1em; height: 1.1em; color: var(--gold); transition: transform 0.2s var(--ease), color 0.2s var(--ease); }
.btn--link:hover { border-bottom-color: var(--ink-on-paper); }
.btn--link:hover svg { transform: translateX(5px); color: var(--ink-on-paper); }

/* ============================================================
   HEADER / NAVIGATIE
   ============================================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  /* Bovenaan iets meer lucht, zodat het logo niet tegen de schermrand plakt.
     Bij scroll wordt de balk compact en symmetrisch (zie .is-scrolled). */
  padding-block: 1.85rem 1.1rem;
  background: linear-gradient(to bottom, rgba(11,14,20,0.85), transparent);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), padding-block 0.25s var(--ease);
}
.site-header.is-scrolled {
  background: var(--ink);
  box-shadow: 0 1px 0 var(--ink-line);
  padding-block: 0.7rem;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.logo { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-weight: 800; font-size: 1.05rem; }
.logo img { height: 64px; width: auto; transition: height 0.25s var(--ease); }
.site-header.is-scrolled .logo img { height: 50px; }

.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav-desktop a {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  font-weight: 700;
  padding-block: 0.4rem;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: #fff; border-color: var(--gold); }

/* Dropdowns (Verhuizen, Overige diensten, Over ons). Open bij hover of bij
   toetsenbord-focus. Het bovenste item blijft een gewone link. */
/* Alle hoofditems als flex-rij: zo staan items met en zonder pijltje op dezelfde regel. */
.nav-desktop > ul > li { display: flex; align-items: center; gap: 0.15rem; }
.nav-desktop .has-sub { position: relative; }
.nav-desktop .sub-menu {
  position: absolute; top: 100%; left: -1rem; z-index: 5;
  display: block; min-width: 14.5rem;
  padding: 1.1rem 0 0; /* onzichtbare brug, zodat hover niet wegvalt tussen link en paneel */
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}
.nav-desktop .sub-menu::before {
  content: ""; position: absolute; inset: 1.1rem 0 0 0; z-index: -1;
  background: var(--ink); border: 1px solid var(--ink-line);
  border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.nav-desktop .has-sub:hover .sub-menu,
.nav-desktop .has-sub:has(:focus-visible) .sub-menu {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.nav-desktop .sub-menu li { display: block; }
.nav-desktop .sub-menu a {
  display: block; padding: 0.7rem 1.1rem; border-bottom: 0;
  font-size: 0.97rem; font-weight: 600; white-space: nowrap;
  color: var(--text-muted-dark);
}
.nav-desktop .sub-menu a:hover,
.nav-desktop .sub-menu a[aria-current="page"] { color: var(--gold-bright); }
.nav-desktop .sub-menu li:first-child a { padding-top: 0.85rem; }
.nav-desktop .sub-menu li:last-child a { padding-bottom: 0.85rem; }

.header-cta { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
}

.nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 99;
  padding: 5.5rem var(--gutter) 2rem;
  transform: translateY(-100%);
  /* Dicht = echt onzichtbaar en niet met tab bereikbaar (visibility), pas na de
     slide-out verbergen, en bij openen direct tonen. */
  visibility: hidden;
  transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
  overflow-y: auto;
}
.nav-mobile.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.nav-mobile ul { display: flex; flex-direction: column; gap: 0.4rem; }
.nav-mobile a { display: block; padding: 0.9rem 0; font-size: 1.4rem; font-weight: 700; color: #fff; border-bottom: 1px solid var(--ink-line); }
.nav-mobile .sub { gap: 0; margin: 0.2rem 0 0.6rem; padding-left: 1rem; border-left: 1px solid var(--ink-line); }
.nav-mobile .sub a { padding: 0.55rem 0; font-size: 1.05rem; font-weight: 500; color: var(--text-muted-dark); border-bottom: 0; }
.nav-mobile .btn { margin-top: 2rem; width: 100%; justify-content: center; display: flex; padding: 1em 1.6em; font-size: 1rem; color: var(--ink); border-bottom: 1px solid transparent; } /* 22 okt: .nav-mobile a overschreef de knop (groot, links, block) */

/* Volledige navigatie + knop past pas vanaf ~1100px; daaronder het hamburgermenu. */
@media (min-width: 1100px) {
  .nav-desktop { display: block; }
  .nav-mobile { display: none; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column; /* tekstblok + klantlogo-balk onder elkaar, samen 1 scherm */
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}
.hero-slider { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(1.06) contrast(1.08) saturate(1.1);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero-dots {
  position: absolute;
  z-index: 3;
  right: 2.5rem;
  bottom: 2.5rem;
  display: flex;
  gap: 0.9rem;
}
.hero-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.25);
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.6);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.hero-dot:hover { border-color: var(--gold); transform: scale(1.1); }
.hero-dot.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.25); }
.hero::before {
  /* Overlay voor leesbare tekst (zie DESIGN_SYSTEM.md). Moet BOVEN .hero-slider
     liggen, vandaar de z-index, anders zit de foto er overheen.
     Mobiel staat de tekst over de volle breedte, dus daar van onderaf donker. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(5,7,10,0.86) 0%, rgba(5,7,10,0.72) 45%, rgba(8,10,14,0.5) 75%, rgba(8,10,14,0.42) 100%);
  pointer-events: none;
}
@media (min-width: 700px) {
  /* Vanaf tablet staat de tekst links: daar een sterke lokale gradient vanaf
     links, zodat de foto rechts natuurlijk zichtbaar blijft. */
  .hero::before {
    background:
      linear-gradient(to right, rgba(5,7,10,0.88) 0%, rgba(5,7,10,0.8) 22%, rgba(6,8,12,0.6) 40%, rgba(8,10,14,0.28) 56%, rgba(8,10,14,0.06) 70%, rgba(8,10,14,0) 100%); /* 22 okt: lichter (nieuwe hero-foto), daarna links weer iets donkerder voor leesbaarheid subtekst (Randy) */
  }
}
/* width:100% is nodig omdat .hero display:flex is: zonder die regel krimpt de
   container mee met de tekst en wordt hij gecentreerd, waardoor de hero niet
   meer op dezelfde linkerlijn staat als de secties eronder. */
.hero > .container { position: relative; z-index: 2; width: 100%; margin-top: auto; padding-block: 7rem 3rem; }
/* Vanaf tablet de tekst verticaal in het midden (Randy 30 sep: "staat te laag").
   Bovenpadding groter dan onder: compenseert de header die over de hero ligt,
   zodat het blok optisch in het midden van het zichtbare deel staat. */
@media (min-width: 700px) {
  .hero > .container { margin-block: auto; padding-block: 8rem 2.5rem; }
}
.hero-eyebrow { color: var(--gold); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.82rem; margin-bottom: 1.2em; text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
/* Dubbele schaduw (strak + wijd): "vakmanschap." loopt door tot in het lichtere
   deel van de foto, en alleen een wijde schaduw is daar te zwak. Zie ook de
   contrastmeting: dit haalt het probleemgebied van 10% naar 2%. */
.hero h1 { font-size: var(--step-h1-hero); line-height: 1.0; max-width: 12em; text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 26px rgba(0,0,0,0.75); }
.hero h1 em { color: var(--gold); font-style: normal; white-space: nowrap; }
/* Kolom van 12em = drie regels: "Verhuizen is logistiek." / "Uitvoering is" / "vakmanschap."
   (regel 1 is ~10,7em, "Uitvoering is vakmanschap." ~13,4em). Voor de variant met twee regels:
   max-width terug naar 59rem en, voor tablets, font-size: min(var(--step-h1-hero), 6.7vw) vanaf 700px. */
.hero p.lede { max-width: 34rem; margin-top: 1.4em; font-size: 1.1rem; color: var(--text-muted-dark); text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 18px rgba(0,0,0,0.6); } /* 22 okt: meer schaduw, subtekst was slecht leesbaar op de drukke foto */
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* ============================================================
   PAGE HERO: compacte hero voor binnenpagina's (geen 100svh)
   ============================================================ */
.page-hero {
  position: relative;
  color: #fff;
  background: radial-gradient(120% 140% at 15% 0%, #1a2130 0%, var(--ink) 55%, #05070a 100%);
  padding-block: clamp(7rem, 12vw, 10rem) clamp(3rem, 6vw, 5rem);
}
/* Page-hero met foto: afbeelding via --hero-img (inline op de pagina), donkere laag erover
   voor leesbaarheid (zelfde opbouw als de homepage-hero: links sterk, rechts helder, boven
   donker voor de navigatie, mobiel van onderaf). */
.page-hero--photo { background: var(--ink); overflow: hidden; min-height: var(--hero-minh, 0); }
.page-hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* --hero-pos-mobile: optioneel per pagina (9 okt 2026, warehousing: foto met donkere opvulling links, het onderwerp staat rechts van het midden). */
  background: var(--hero-img) var(--hero-pos-mobile, center 18%) / cover no-repeat;
  filter: brightness(1.06) contrast(1.08) saturate(1.1);
}
.page-hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5,7,10,0.7) 0, rgba(5,7,10,0) 9rem),
    linear-gradient(to top, rgba(5,7,10,0.86) 0%, rgba(5,7,10,0.72) 45%, rgba(8,10,14,0.5) 75%, rgba(8,10,14,0.42) 100%);
}
@media (min-width: 700px) {
  /* Fijnafstelling per pagina (inline --hero-size/--hero-pos), alleen vanaf tablet: op smalle
     schermen is "cover" de enige maat die de hele hero bedekt. */
  .page-hero--photo::before { background-position: var(--hero-pos, center 18%); background-size: var(--hero-size, cover); }
  .page-hero--photo::after {
    background:
      linear-gradient(to bottom, rgba(5,7,10,0.7) 0, rgba(5,7,10,0) 9rem),
      linear-gradient(to right, rgba(5,7,10,0.92) 0%, rgba(5,7,10,0.84) 28%, rgba(6,8,12,0.64) 46%, rgba(8,10,14,0.3) 60%, rgba(8,10,14,0.08) 74%, rgba(8,10,14,0) 100%);
  }
}
/* Zeer brede schermen: de header is daar ~4:1 en een 16:9-foto zou tot de hoofden worden afgesneden.
   Daarom staat de foto rechts op een vaste vorm (3x de hoogte, 581px = de vaste header-hoogte) en
   vervaagt de linkerrand naar de donkere achtergrond; de tekst staat op dat donkere deel. */
@media (min-width: 1900px) {
  .page-hero--photo::before {
    left: auto; right: 0; width: min(100%, 1743px);
    background-size: cover; background-position: center var(--hero-pos-wide, 40%);
    /* Vervaging van de linkerrand; per pagina bij te stellen (--fade-a: tot hier volledig weg, --fade-b: vanaf hier volledig zichtbaar). */
    -webkit-mask-image: linear-gradient(to right, transparent var(--fade-a, 0%), #000 var(--fade-b, 24%));
    mask-image: linear-gradient(to right, transparent var(--fade-a, 0%), #000 var(--fade-b, 24%));
  }
}
.page-hero--photo .container { position: relative; z-index: 2; }
.page-hero.page-hero--photo h1 { max-width: 22ch; text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 26px rgba(0,0,0,0.75); }
.page-hero--photo p.lede { color: #e3e6ec; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.page-hero--photo .eyebrow { text-shadow: 0 2px 16px rgba(0,0,0,0.6); }
.page-hero .eyebrow { color: var(--gold); }
.page-hero h1 { font-size: var(--step-h1-hero); max-width: 28ch; }
/* Alle binnenpagina-headers even hoog op desktop: de maat van de Zakelijke-pagina (Randy 21 sep),
   559px op 1100, 571px op 1280, 581px vanaf ~1333 breed. Content moet daarbinnen passen (koppen op 2 regels). */
@media (min-width: 1100px) {
  /* = padding boven + onder + de content-hoogte van de Zakelijke-pagina (341px); ondergrens 559px op 1100. */
  .page-hero { min-height: max(calc(clamp(7rem, 12vw, 10rem) + clamp(3rem, 6vw, 5rem) + 341px), 559px); }
  /* Broodkruimel in de ruimte tussen menu en label trekken, zodat label/kop/lede/knop op elke
     pagina op dezelfde plek staan (anders zakt alles op de dienstpagina's ±45px). */
  .page-hero .breadcrumb { margin-top: -2.85rem; }
}
/* Vaste regeleinden in kop en lede (2 + 3 regels, Randy 21 sep): alleen op desktop, daaronder loopt de tekst gewoon door. */
.page-hero .d { display: none; }
@media (min-width: 1100px) {
  .page-hero .d { display: inline; }
  /* Hogere specificiteit dan de losse h1/lede-regels verderop (die staan later in het bestand). */
  section.page-hero .container h1,
  section.page-hero .container p.lede { max-width: none; }
}
.page-hero p.lede { max-width: 46ch; margin-top: 1em; font-size: 1.05rem; color: var(--text-muted-dark); }
.breadcrumb { font-size: 0.85rem; color: var(--text-muted-dark); margin-bottom: 1.5rem; }
.breadcrumb a:hover { color: var(--gold); }
/* Lichte variant: broodkruimel op een witte/lichte sectie (bv. boven een split-blok), bewust
   klein en onopvallend gehouden i.p.v. de prominente header-variant. */
.breadcrumb--light { color: var(--text-muted-light); font-size: 0.8rem; margin-bottom: 0.8rem; }
.breadcrumb--light a { color: inherit; }
.breadcrumb--light a:hover { color: var(--ink-on-paper); }

.feature-list { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 1.5rem; }
.feature-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.feature-list .tick { flex: none; width: 22px; height: 22px; margin-top: 0.15em; color: var(--gold); }
.feature-list strong { display: block; margin-bottom: 0.2em; }
.feature-list span.desc { color: var(--text-muted-light); font-size: 0.94rem; }
.section--dark .feature-list span.desc { color: var(--text-muted-dark); }

.contact-bar { display: grid; grid-template-columns: 1fr; gap: 1.6rem 1.5rem; background: var(--paper-soft); border-radius: var(--radius); padding: 1.75rem; margin-top: 3rem; }
.contact-bar .item { display: flex; gap: 0.8rem; align-items: flex-start; }
.contact-bar .tick { flex: none; width: 22px; height: 22px; margin-top: 0.1em; color: var(--gold); }
.contact-bar strong { display: block; margin-bottom: 0.2em; }
.contact-bar span.desc { color: var(--text-muted-light); font-size: 0.94rem; }
@media (min-width: 640px) { .contact-bar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .contact-bar { grid-template-columns: repeat(4, 1fr); } }

.contact-card { display: grid; grid-template-columns: 1fr; background: var(--paper); border-radius: var(--radius); overflow: hidden; border: 1px solid #e2e2e6; }
@media (min-width: 900px) { .contact-card { grid-template-columns: 1.15fr 1fr; } }
.contact-card__form, .contact-card__info { padding: clamp(2rem, 4vw, 3.25rem); }
.contact-card__form h2, .contact-card__info h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); margin-bottom: 1.75rem; }
.contact-card__info { background: var(--paper-soft); color: var(--text-muted-light); position: relative; border-top: 1px solid #e2e2e6; }
@media (min-width: 900px) { .contact-card__info { border-top: 0; border-left: 1px solid #e2e2e6; } }
.contact-card__intro { font-size: var(--step-body); font-weight: 400; line-height: var(--lh-body); margin-bottom: 2rem; max-width: 32rem; }
.contact-card__list { display: grid; grid-template-columns: 1fr; gap: 1.3rem 1.5rem; }
@media (min-width: 480px) { .contact-card__list { grid-template-columns: 1fr 1fr; } }
.contact-card__list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-card__list .tick { flex: none; width: 20px; height: 20px; margin-top: 0.15em; color: var(--gold); }
.contact-card__list strong { display: block; color: var(--ink-on-paper); margin-bottom: 0.2em; }
.contact-card__list span { display: block; font-size: 0.94rem; }
.contact-card__list a { color: var(--text-muted-light); }
.contact-card__list a:hover { color: var(--ink-on-paper); }
.contact-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-top: 3rem; }
.contact-card__badges img { height: 92px; width: auto; }
.contact-card__closing { margin-top: 1rem; font-size: 0.85rem; line-height: 1.5; }
.contact-card__closing a { color: var(--ink-on-paper); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.contact-card__closing a:hover { color: var(--gold); }

.stat-inline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; margin-top: 2rem; max-width: 26rem; }
.stat-inline div { padding-top: 1.1rem; border-top: 1px solid #e2e2e6; }
.stat-inline div strong { display: block; font-size: 1.8rem; color: var(--gold); }
.stat-inline div span { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--text-muted-light); }
.section--dark .stat-inline div span { color: var(--text-muted-dark); }
.section--dark .stat-inline div { border-top-color: rgba(255,255,255,0.14); }

.notice-box {
  border-left: 3px solid var(--gold);
  background: var(--paper-soft);
  padding: 1.4rem 1.6rem;
  margin-top: 2rem;
  font-size: 0.95rem;
}

/* ============================================================
   USP / GRID componenten
   ============================================================ */
.usp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  align-items: start;
}
.usp { padding-bottom: 0.5rem; }
.usp-icon { width: 40px; height: 40px; margin-bottom: 1.1rem; color: var(--gold); }
.usp-icon svg { width: 100%; height: 100%; }
.usp h3 { font-size: 1.05rem; margin-bottom: 0.5em; }
.usp p { color: var(--text-muted-dark); font-size: 0.95rem; margin: 0; }

/* "Waarom Sterk"-sectie, editorial i.p.v. iconen-grid (feedback Randy,
   11 sep 2026): subtiele gouden 01–04 in plaats van vier grote lijn-iconen,
   scheidingslijnen tussen de items i.p.v. losse blokken met veel witruimte. */
.reasons-section .section-heading { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.reasons-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.reason { padding-top: 1.5rem; border-top: 1px solid var(--ink-line); }
.reason-num {
  display: block;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}
.reason h3 { font-size: 1.08rem; margin-bottom: 0.55em; }
.reason p { font-size: 0.92rem; line-height: 1.55; color: var(--text-muted-dark); margin: 0; }

@media (min-width: 700px) {
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .reasons-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .reason { border-top: none; border-left: 1px solid var(--ink-line); padding: 0 2.2rem; }
  .reason:first-child { border-left: none; padding-left: 0; }
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.split img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
/* Staande foto in het standaard 4:3-formaat: uitsnede gericht op de onderkant (monteur + shirtlogo). */
.split img.img-focus-bottom { object-position: center 88%; }
.split h2 { font-size: var(--step-h2); }
.split p { color: var(--text-muted-light); margin-top: 1em; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius);
  color: #fff;
  background: var(--ink-soft);
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 0.4s var(--ease); }
.card:hover img { transform: scale(1.04); }
.card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,7,10,0.9) 0%, rgba(5,7,10,0.15) 55%, transparent 75%);
}
.card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.3rem; z-index: 1; }
.card-body h3 { font-size: 1.05rem; }
.card-body p { font-size: 0.85rem; color: var(--text-muted-dark); margin: 0.3em 0 0; }

/* ============================================================
   DIENSTEN, herstructureerd naar twee categorieën (feedback Randy,
   11 sep 2026): "Verhuizen" (kerndienst, fotokaarten) en "Overige
   diensten" (aanvullende expertise, compacte tegels met icoon i.p.v.
   grote foto's: bewust een ander, lichter visueel gewicht).
   ============================================================ */
.services-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted-light); margin-bottom: 0.6em; }
.services-label .rule { display: inline-block; width: 28px; height: 1px; background: var(--gold); margin-right: 0.7em; vertical-align: middle; }

/* -- Verhuizen: 1 uitgelichte dienst + 2 compacte -- */
.services-primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.services-primary .card--featured { grid-column: 1 / 3; aspect-ratio: 4/3; }
.services-primary .card--featured h3 { font-size: 1.3rem; }
.services-primary .card--featured p { font-size: 0.92rem; }
.services-primary .card--compact { aspect-ratio: 1/1; }
.services-primary .card--compact h3 { font-size: 0.98rem; }
.services-primary .card--compact p { font-size: 0.82rem; }

@media (min-width: 700px) {
  .services-primary { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(150px, 1fr)); }
  .services-primary .card--featured { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; height: 100%; }
  .services-primary .card--compact { aspect-ratio: auto; height: 100%; }
}

/* -- Eén brede kaart: sinds 9 okt 2026 staat alleen zakelijk nog op de homepage (feedback
      Sterk Transport), particulier/senioren alleen via het menu. -- */
.services-primary--single { grid-template-columns: 1fr; }
.services-primary--single .card--featured { grid-column: auto; aspect-ratio: 4/3; }
@media (min-width: 700px) {
  .services-primary--single { grid-template-rows: none; }
  .services-primary--single .card--featured { grid-column: auto; grid-row: auto; height: auto; aspect-ratio: 21/8; }
  .services-primary--single .card--featured .card-body { padding: 2rem 2.2rem; max-width: 36rem; }
}

/* -- Overige diensten: strakke tegels met hairline-borders, klein icoon,
      géén grote foto's: signaleert bewust "aanvullend", niet kerndienst. */
.services-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid #e2e2e6;
  border-left: 1px solid #e2e2e6;
}
.service-tile {
  border-right: 1px solid #e2e2e6;
  border-bottom: 1px solid #e2e2e6;
  padding: 1.9rem 1.6rem;
  transition: background-color 0.2s var(--ease);
}
a.service-tile:hover { background: var(--paper-soft); }
.service-tile .icon { display: block; width: 30px; height: 30px; color: var(--gold); margin-bottom: 1.1rem; }
.service-tile .icon svg { display: block; width: 100%; height: 100%; }
.service-tile h3 { font-size: 1rem; margin-bottom: 0.4em; color: var(--ink-on-paper); }
.service-tile p { font-size: 0.86rem; color: var(--text-muted-light); margin: 0; }

.process { display: grid; grid-template-columns: 1fr; gap: 2rem; counter-reset: step; }
.process-step { position: relative; padding-top: 1rem; border-top: 1px solid var(--ink-line); }
.process-step .num { font-size: 2.6rem; font-weight: 800; color: var(--ink-line); display: block; margin-bottom: 0.6rem; }
.process-step h3 { font-size: 1.05rem; color: #fff; margin-bottom: 0.4em; }
.process-step p { color: var(--text-muted-dark); font-size: 0.92rem; margin: 0; }

/* Uitgebreide procesuitleg op /werkwijze/: eigen modifier i.p.v. de gedeelde
   .process aangepast, zodat de compacte samenvatting op de homepage
   ongewijzigd blijft (feedback Randy, 22 sep 2026 - alleen deze sectie,
   niet de hele pagina herontwerpen). Nummers gaan van het bijna onzichtbare
   --ink-line naar goud, zelfde subtiele-maar-zichtbare behandeling als
   .reason-num; een pijltje tussen de stappen op desktop verbindt de kolommen
   visueel tot één traject i.p.v. vijf losse blokken - hergebruikt de
   bestaande pijl-taal van .btn--link, geen nieuw icoon of kleur. */
.process--detailed { position: relative; }
.process--detailed .process-step { border-top-color: #e2e2e6; }
.process--detailed .process-step .num {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.process--detailed .process-step h3 { color: var(--ink-on-paper); }
.process--detailed .process-step p { color: var(--text-muted-light); line-height: 1.55; }

/* Tijdlijn boven de stappen: één doorlopende lijn i.p.v. de losse border-top
   per kolom (probeerde eerst een scroll-in-animatie zoals de werkgebied-kaart,
   maar die was bij Randy niet zichtbaar/merkbaar - 22 sep 2026 teruggezet naar
   gewoon statisch). Alleen op desktop: op mobiel valt de rij uiteen in een
   gestapelde kolom, daar doet elke stap zijn eigen border-top. */
.process-line { display: none; }

@media (min-width: 960px) {
  .process--detailed .process-step { border-top: none; padding-top: 1.25rem; }
  .process--detailed .process-step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 1.5rem;
    left: 100%;
    width: 2rem;
    text-align: center;
    color: var(--gold);
    opacity: 0.5;
    font-size: 1.05rem;
  }

  .process-line {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #e2e2e6;
  }
}

.proof-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem 3rem;
  padding-block: 2.5rem;
  border-top: 1px solid #e7e7ea;
  border-bottom: 1px solid #e7e7ea;
}
.proof-bar img { width: 110px; height: auto; object-fit: contain; }
.testimonials { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.testimonial { padding: 1.8rem; background: var(--paper-soft); border-left: 3px solid var(--gold); }
.testimonial p.quote { font-size: 1.02rem; font-style: italic; margin-bottom: 0.8em; }
.testimonial .who { font-weight: 700; font-size: 0.88rem; color: var(--text-muted-light); }

/* Beoordelingen (klanttevredenheid.php): sterren + datum boven de naam/tekst,
   zelfde kaart-basis (--paper-soft, gouden randlijn) als .testimonial hierboven. */
.review-stars { display: flex; gap: 0.2rem; margin-bottom: 0.9rem; }
.review-stars svg { width: 17px; height: 17px; color: var(--gold); }
.review-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; }
.review-meta .who { font-weight: 700; font-size: 0.92rem; color: var(--ink-on-paper); }
.review-meta .date { font-size: 0.82rem; color: var(--text-muted-light); }

.cta-band {
  position: relative;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}
.cta-band .container { position: relative; padding-block: 5rem 3.85rem; display: grid; gap: 1rem; }
/* Fijne scheidingslijn onder de CTA, op contentbreedte (zelfde lijn als onderin de footer). */
.cta-band .container::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--ink-line); }
.cta-band h2 { font-size: clamp(1.5rem, 0.8rem + 1.6vw, 2.25rem); line-height: 1.12; max-width: min(24em, 100%); }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }

@media (min-width: 700px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.reverse { direction: rtl; }
  .split.reverse > * { direction: ltr; }
  .usp-grid { grid-template-columns: repeat(4, 1fr); }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .process { grid-template-columns: repeat(5, 1fr); }
  .cta-band .container { grid-template-columns: 1fr auto; align-items: center; }
  .cta-band .actions { margin-top: 0; justify-self: end; }
}

/* ============================================================
   FORMULIER
   ============================================================ */
.form-row { margin-bottom: 1.3rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-row label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.4em; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 0.75em 0.9em;
  font: inherit;
  font-size: var(--step-body);
  line-height: var(--lh-body);
  color: var(--ink-on-paper);
  background: var(--paper);
  border: 1px solid #d5d5da;
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--gold);
  outline: none;
}
.form-row textarea { resize: vertical; }
#formulier, #over-ons, #diensten, #verhuizen, #overige-diensten { scroll-margin-top: 7rem; }
.form-privacy { margin-top: 1rem; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted-light); max-width: 34rem; }
.form-privacy a { color: var(--ink-on-paper); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.form-privacy a:hover { color: var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: var(--text-muted-dark); }
.site-footer .container { padding-block: 2rem 1.5rem; }
/* Mobiel: intro + contact over de volle breedte, Diensten en Bedrijf als compacte blokken naast elkaar. */
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; margin-bottom: 1.5rem; }
.footer-grid > .footer-col:first-child,
.footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
.footer-logo { width: 160px; height: auto; }
.footer-badges-label { margin-top: 1.6rem; margin-bottom: 1.6rem; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.footer-badges a { display: block; line-height: 0; }
/* Beide keurmerken zijn transparante PNG's gemaakt voor de donkere footer: geen chip of achtergrond eromheen. */
.footer-badges img { width: 110px; height: auto; border-radius: 0; }
/* NIWO oogt door de brede letters optisch groter dan de badge: ±7% smaller. */
.footer-badges .badge-niwo img { width: 102px; }
.footer-col h4 { color: #fff; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.85rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0; }
.footer-col li { font-size: 1rem; line-height: 1.65; }
.footer-col a:hover { color: #fff; }
/* Socials: icoon 24px, klikvlak 40x40 (mobiel-vriendelijk). Het klikvlak begint 8px links van het icoon;
   de negatieve marge zorgt dat het icoon zelf op dezelfde lijn staat als de contacttekst erboven. */
.footer-social { display: flex; gap: 0.25rem; margin: 0.35rem 0 0 -8px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: rgba(255,255,255,0.9);
  border-radius: var(--radius);
  transition: color 0.25s var(--ease);
}
.footer-social a:hover { color: var(--gold-bright); }
.footer-social a:focus-visible { color: var(--gold-bright); outline: 2px solid var(--gold); outline-offset: 0; }
.footer-social svg { width: 24px; height: 24px; display: block; border-radius: 0; }
.footer-social .social-glyph { fill: var(--ink); }
.footer-bottom {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding-top: 1.25rem; border-top: 1px solid var(--ink-line);
  font-size: 0.8125rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 0; }
.footer-legal a:hover { color: #fff; }
/* Scheiding tussen de twee voorwaarden-links: dun streepje, net als in het oude menu */
.footer-legal a + a::before { content: ""; display: inline-block; width: 1px; height: 0.9em; margin: 0 0.9rem; background: var(--ink-line); vertical-align: -0.1em; }
@media (max-width: 699px) {
  .footer-legal { flex-direction: column; }
  .footer-legal a + a::before { display: none; }
}
/* Tablet: logo + keurmerken over de volle breedte, daaronder Diensten, Bedrijf en Contact als drie kolommen. */
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 2.5rem; }
  .footer-grid > .footer-col:first-child { grid-column: 1 / -1; }
  .footer-grid > .footer-col:last-child { grid-column: auto; }
}
/* Desktop: vier kolommen, de eerste iets breder. */
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem 2.5rem; }
  .footer-grid > .footer-col:first-child { grid-column: auto; }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Subtiele reveal-on-scroll: PROGRESSIVE ENHANCEMENT.
   Content is standaard altijd zichtbaar (geen FOUC-risico als JS traag laadt,
   faalt, of geblokkeerd is). Alleen als main.js de observer succesvol opzet
   krijgt <html> de klasse .reveal-ready, en pas dán verstopt [data-reveal]
   zich even voor de eigen fade-in. Zonder die klasse: gewoon zichtbaar. */
html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* Sichtbaarheid voor toetsenbord-only "skip to content" */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--gold); color: var(--ink); padding: 0.8em 1.2em; font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================================================
   WERKGEBIED: puntenkaart van Nederland met routes vanuit Wateringen
   Eén lichte sectie (geen apart vlak): tekst en kaart staan samen op dezelfde achtergrond.
   svg uit includes/nl-map.php, gegenereerd door docs/tools/gen-nl-map.py
   ============================================================ */
.coverage-section { position: relative; overflow: hidden; }
.coverage-section::before {
  /* zachte gouden gloed achter de kaart, zodat die niet los op het vlak staat */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 70% at 76% 50%, rgba(201,162,75,0.13), transparent 70%);
}
.coverage { position: relative; display: grid; gap: 2rem; }
.coverage h2 { font-size: var(--step-h2); }
.coverage-text p { margin-top: 1em; max-width: 30rem; color: var(--text-muted-light); }
.coverage-points { margin: 1.6rem 0 1.8rem; display: grid; gap: 0.7rem; }
.coverage-points li { position: relative; padding-left: 1.6rem; color: var(--ink-on-paper); font-weight: 600; font-size: 0.97rem; }
.coverage-points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 2px; background: var(--gold);
}
.coverage-map { display: flex; justify-content: center; align-items: center; }
.nl-map { width: 100%; max-width: 33rem; height: auto; overflow: visible; border-radius: 0; }

.nl-dots { fill: none; stroke: #b7bdc9; stroke-width: 3.3; stroke-linecap: round; }
/* Randstad uitgelicht (9 okt 2026): kern goud, rand een tussentint zodat het zacht overloopt. */
.nl-dots--randstad { stroke: #d2ae5c; }
.nl-dots--randstad-rand { stroke: #c9b994; }

/* Routes: standaard volledig getekend (zonder JS blijft alles zichtbaar). Met JS (.nl-anim-ready)
   tekenen ze zich pas als de kaart in beeld komt (.is-drawn). Animaties draaien bewust ook bij
   "animaties uit": het is kleine, rustige, decoratieve beweging (Randy, 20 sep 2026). */
.nl-dest { pointer-events: none; }
.nl-route {
  fill: none; stroke: rgba(176,134,38,0.7); stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.7s var(--ease);
  transition-delay: calc(var(--i) * 0.16s);
}
.nl-anim-ready:not(.is-drawn) .nl-route { stroke-dashoffset: 100; }
.nl-anim-ready:not(.is-drawn) .nl-city,
.nl-anim-ready:not(.is-drawn) .nl-label { opacity: 0; }
/* Busjes, aankomstringen en de pulse wachten tot de routes getekend worden (.is-drawn). */
.nl-anim-ready:not(.is-drawn) .nl-van,
.nl-anim-ready:not(.is-drawn) .nl-arrive,
.nl-anim-ready:not(.is-drawn) .nl-pulse { animation: none; opacity: 0; }
.nl-city, .nl-label { transition: opacity 0.5s var(--ease) 1.2s; }
/* Verhuisbusje rijdt over de route (CSS offset-path, pad staat inline per busje). Het busje kijkt
   naar rechts; bij routes naar het westen draaien we 180 graden en spiegelen we de tekening, zodat
   het busje rechtop blijft rijden. */
.nl-van {
  offset-rotate: auto; offset-distance: 0%;
  opacity: 0; pointer-events: none;
  animation: nl-drive 5.2s linear infinite;
  animation-delay: calc(1.6s + var(--i) * 0.65s);
  filter: drop-shadow(0 1.5px 2px rgba(20,23,29,0.35));
}
.nl-van-in { scale: 1.3; }
.nl-van--rev { offset-rotate: reverse; }
.nl-van--rev .nl-van-in { transform: scaleX(-1); }
@keyframes nl-drive {
  0%   { offset-distance: 0%;   opacity: 0; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 0.95); }
  6%   { opacity: 1; }
  70%  { offset-distance: 100%; opacity: 1; }
  78%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* Aankomst: ring bij de stad op het moment dat het lichtje er is (zelfde ritme als .nl-van) */
.nl-arrive {
  fill: none; stroke: var(--gold); stroke-width: 1.6; opacity: 0; pointer-events: none;
  transform-box: fill-box; transform-origin: center;
  animation: nl-arrive 5.2s ease-out infinite;
  animation-delay: calc(1.6s + var(--i) * 0.65s);
}
@keyframes nl-arrive { 0%, 68% { transform: scale(0.8); opacity: 0; } 70% { opacity: 0.95; } 100% { transform: scale(3.4); opacity: 0; } }
.nl-city { fill: var(--ink-on-paper); }
.nl-label { fill: var(--ink-on-paper); font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; paint-order: stroke; stroke: #f4f5f7; stroke-width: 3px; stroke-linejoin: round; }
.nl-label--home { fill: #8f6a12; font-size: 13.5px; font-weight: 800; }
/* Europa-routes rijden de kaart uit: pijlpunt i.p.v. stadsstip, label in goud. */
.nl-eu-arrow { fill: none; stroke: var(--ink-on-paper); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nl-label--eu { fill: #8f6a12; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.nl-home { fill: var(--gold); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35)); }
.nl-pulse {
  fill: none; stroke: var(--gold); stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  animation: nl-ping 3.2s ease-out infinite;
}
.nl-pulse--2 { animation-delay: 1.6s; }
@keyframes nl-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(4.2); opacity: 0; } }
@media (max-width: 899px) {
  .coverage-section::before { background: radial-gradient(70% 34% at 50% 78%, rgba(201,162,75,0.13), transparent 70%); }
  /* De kaart wordt op telefoon ~40% kleiner getoond, dus de labels iets groter zetten. */
  .nl-label { font-size: 16px; }
  .nl-label--home { font-size: 18px; }
  .nl-city { r: 3.8; }
  .nl-van-in { scale: 1.6; }
}
@media (min-width: 900px) {
  .coverage { grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; }
}

/* ============================================================
   JURIDISCHE TEKSTPAGINA (privacybeleid)
   ============================================================ */
.legal { max-width: 46rem; }
.legal .notice-box { margin: 0 0 1.5rem; }
.legal-date { color: var(--text-muted-light); font-size: 0.9rem; margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.3rem; margin: 2.2rem 0 0.6rem; }
.legal p { margin-top: 0.9em; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin-top: 0.8em; }
.legal li { margin-top: 0.35em; }
.legal a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
/* Nog in te vullen door Sterk Transport: bewust zichtbaar gemarkeerd zodat het niet live kan zonder controle. */

/* ============================================================
   VACATUREKAARTEN (/vacatures/) - hele kaart is een link naar de losse
   vacaturepagina (zelfde patroon als a.service-tile): foto boven, tekst
   eronder, border #e2e2e6/--radius, overflow:hidden zodat de foto's
   bovenhoeken meeronden. Geen nieuwe kleuren/schaduwen.
   ============================================================ */
.jobs-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 50rem; }
@media (min-width: 700px) { .jobs-grid { grid-template-columns: repeat(2, 1fr); } }
/* Bij precies 1 kaart (bv. "andere vacatures" op een detailpagina met maar 2
   vacatures totaal): niet over de volle 2-koloms-breedte uitrekken. */
.jobs-grid--single { max-width: 26rem; }
@media (min-width: 700px) { .jobs-grid--single { grid-template-columns: 1fr; } }

.job-card {
  display: block;
  border: 1px solid #e2e2e6;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s var(--ease);
}
.job-card:hover { border-color: var(--gold); }
.job-card__photo { aspect-ratio: 3/2; }
.job-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; border-radius: 0; }
.job-card__body { padding: clamp(1.25rem, 2.5vw, 1.6rem); }
.job-card h3 { font-size: var(--step-h3); margin-bottom: 0.35em; color: var(--ink-on-paper); }
.job-card__meta { color: var(--text-muted-light); font-size: 0.92rem; margin-bottom: 1.1rem; }
/* .job-card__cta is een <span>, geen eigen <a>: de hele kaart is al de link. */
.job-card:hover .job-card__cta { border-bottom-color: var(--ink-on-paper); }
.job-card:hover .job-card__cta svg { transform: translateX(5px); color: var(--ink-on-paper); }

/* ============================================================
   VACATURE-DETAILPAGINA (/vacatures/<id>/): tekstkolom hergebruikt .legal
   (zelfde h2/ul/li-stijl als privacybeleid.php), rechts een sticky
   sollicitatiekaart met de vacaturefoto als ronde afbeelding.
   ============================================================ */
.vacature-detail { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.vacature-detail .legal { max-width: none; }
@media (min-width: 900px) {
  .vacature-detail { grid-template-columns: 1.5fr 1fr; gap: 3rem; }
}

.apply-card {
  background: var(--paper-soft);
  color: var(--text-muted-light);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
}
@media (min-width: 900px) { .apply-card { position: sticky; top: 7rem; } }
.apply-card h2 { color: var(--ink-on-paper); font-size: 1.3rem; margin-bottom: 1.5rem; }
.apply-card__photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.5rem; border: 3px solid var(--gold); }
.apply-card p { margin-bottom: 1.75rem; }
.apply-card .btn { width: 100%; justify-content: center; }

/* ============================================================
   SOLLICITATIE OFF-CANVAS DRAWER - zelfde mechaniek als .nav-mobile
   (transform + visibility, scroll-lock in main.js) maar schuift van
   rechts i.p.v. van boven, en blijft op desktop een vaste breedte i.p.v.
   het volledige scherm.
   ============================================================ */
.drawer-backdrop {
  /* Boven .site-header (z-index:100): anders blijft het logo/hamburgermenu
     zichtbaar boven de drawer op mobiel (bug gevonden 22 sep 2026). */
  position: fixed; inset: 0; z-index: 150;
  background: rgba(5,7,10,0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.apply-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 151;
  width: 100%; max-width: 30rem;
  background: var(--paper);
  box-shadow: -18px 0 40px rgba(0,0,0,0.22);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.apply-drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.apply-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid #e2e2e6;
  position: sticky; top: 0; background: var(--paper); z-index: 1;
}
.apply-drawer__head h2 { font-size: 1.3rem; }
.apply-drawer__close {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid #d5d5da;
  border-radius: var(--radius);
  color: var(--ink-on-paper);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.apply-drawer__close:hover { border-color: var(--gold); color: var(--gold); }
.apply-drawer__body { padding: 1.25rem clamp(1.5rem, 4vw, 2.5rem) 1.25rem; }
.apply-drawer__intro { color: var(--text-muted-light); margin-bottom: 1.1rem; }
/* Iets minder ruimte dan .form-row's standaard 1.3rem (getuned voor de ruimere
   contact.php) zodat het formulier hier bij voorkeur zonder scrollen past. */
.apply-drawer .form-row { margin-bottom: 1rem; }
.apply-drawer .form-privacy { margin-top: 0.7rem; }

.upload-field {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center;
  padding: 1.3rem 1.25rem;
  border: 1px dashed #d5d5da;
  border-radius: var(--radius);
  color: var(--text-muted-light);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.upload-field:hover, .upload-field.is-dragover { border-color: var(--gold); background: var(--paper-soft); }
.upload-field svg { width: 24px; height: 24px; color: var(--gold); }
.upload-field__hint { font-size: 0.82rem; color: var(--text-muted-light); }
#cv {
  /* Blijft in de DOM en met toetsenbord/screenreader bereikbaar (label[for] koppelt
     'm aan .upload-field), maar visueel onzichtbaar: de gestylede label toont de
     eigenlijke dropzone. Geen display:none, dat zou 'm ook uit de tab-volgorde halen. */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.upload-field:has(+ #cv:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (min-width: 480px) {
  .apply-drawer { width: 30rem; }
}
.fill-in { background: rgba(201,162,75,0.22); padding: 0.05em 0.3em; border-radius: 3px; }

/* ============================================================
   KLANTLOGO-BALK direct onder de homepage-hero (30 sep)
   Logo's zijn witte PNG's met transparantie (uitgesneden uit Randy's
   voorbeeldbalk); width/height in de HTML = weergavegrootte op desktop.
   ============================================================ */
.client-bar { position: relative; z-index: 2; background: rgba(18, 22, 31, 0.92); border-top: 1px solid var(--ink-line); }
@supports (backdrop-filter: blur(1px)) { .client-bar { background: rgba(18, 22, 31, 0.8); backdrop-filter: blur(10px); } }
/* Carrousel (9 okt 2026: 15 klanten passen niet meer naast elkaar). Twee identieke lijsten in een
   track die precies 50% opschuift = naadloze lus. Stopt bij hover/focus; draait bewust ook bij
   "animaties uit" (rustige, decoratieve beweging, zelfde keuze als de kaart, Randy 20 sep). */
.client-marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.client-track { display: flex; width: max-content; animation: client-scroll 70s linear infinite; }
.client-marquee:hover .client-track, .client-marquee:focus-within .client-track { animation-play-state: paused; }
@keyframes client-scroll { to { transform: translateX(-50%); } }
.client-logos { display: flex; list-style: none; margin: 0; padding: 0; --s: 0.62; }
.client-logos li { flex: none; display: flex; align-items: center; justify-content: center; min-height: 4.5rem; padding: 0.8rem 1.6rem; border-right: 1px solid var(--ink-line); }
.client-logos a { display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.client-logos a:hover img, .client-logos a:focus-visible img { opacity: 1; }
.client-logos a:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
/* --w = desktopbreedte uit de HTML (per logo optisch afgestemd, zie index.php); op kleinere
   schermen schalen alle logo's met dezelfde factor mee, zodat de onderlinge verhouding blijft. */
.client-logos img { width: calc(var(--w) * var(--s) * 1px); max-width: none; height: auto; opacity: 0.85; transition: opacity 0.2s ease;
  /* --dy: optische correctie (px op desktop) voor logo's waarvan het zwaartepunt niet in het
     midden ligt, bv. AstraZeneca (zware tekst onder, dun icoon boven). Gemeten 30 sep. */
  transform: translateY(calc(var(--dy, 0) * var(--s) * 1px)); }
@media (min-width: 480px) { .client-logos { --s: 0.8; } }
@media (min-width: 900px) {
  .client-logos li { min-height: 5.6rem; padding: 0.9rem 2.6rem; }
  .client-logos { --s: 1; }
}

/* Verhuisliften op de homepage (9 okt 2026): het kernfeit (30 meter) als rustige, gouden accentregel. */
.lift-fact { border-left: 3px solid var(--gold); padding: 0.2rem 0 0.2rem 1rem; margin: 1.4rem 0; color: var(--ink-on-paper); font-size: 1.05rem; max-width: 34rem; }
.lift-fact strong { font-weight: 800; }
/* Tweede liftfoto (de lift op de Sterk-pick-up bij een appartementencomplex) als kleine
   thumbnail over de grote foto, rechtsonder (9 okt 2026, op verzoek van de klant). */
.lift-media { position: relative; margin: 0 0 1.6rem; }
.split .lift-media .lift-thumb {
  position: absolute; right: 1rem; bottom: -1.6rem;
  width: 34%; height: auto; aspect-ratio: 3/4; object-fit: cover;
  border: 4px solid #fff; border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(10,14,20,0.28);
}

/* Logo-overzicht op /over-ons/partnerschap/ (9 okt 2026): zelfde witte logo's en --w-maten als de
   carrousel op de homepage, hier als rustig raster met hairlines. */
.partner-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink-line); border-left: 1px solid var(--ink-line); --s: 0.62; }
.partner-logos li { display: flex; align-items: center; justify-content: center; min-height: 6rem; padding: 1rem; border-right: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.partner-logos a { display: flex; border-radius: 4px; }
.partner-logos a:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.partner-logos img { width: calc(var(--w) * var(--s) * 1px); max-width: 100%; height: auto; opacity: 0.85; transition: opacity 0.2s ease; transform: translateY(calc(var(--dy, 0) * var(--s) * 1px)); }
.partner-logos a:hover img { opacity: 1; }
@media (min-width: 600px) { .partner-logos { grid-template-columns: repeat(3, 1fr); --s: 0.8; } }
@media (min-width: 960px) { .partner-logos { grid-template-columns: repeat(5, 1fr); } .partner-logos li { min-height: 7rem; } }

/* Voor/na-schuif op /diensten/ontruimen-en-opkopen/ (9 okt 2026). "Voor" ligt onder, "na" erboven en
   wordt links weggeknipt tot --pos; een onzichtbaar range-veld over de hele foto stuurt --pos aan. */
.ba-slider { position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); background: var(--ink-soft); user-select: none; }
.split .ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.ba-na { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.35); pointer-events: none; }
.ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.ba-label { position: absolute; top: 0.9rem; padding: 0.3rem 0.65rem; border-radius: 4px; background: rgba(10,13,18,0.72); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; }
.ba-label--voor { left: 0.9rem; }
.ba-label--na { right: 0.9rem; }
.ba-slider input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba-slider:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Origineel logo (zwarte letters) als kop in de lichte contactkaart, 9 okt 2026. */
.contact-card__logo { margin: 0 0 0.4rem; line-height: 0; }
.contact-card__logo img { width: min(160px, 100%); height: auto; border-radius: 0; } /* 22 okt: zelfde maat als header-logo (64px hoog) */

/* 22 okt (Randy): op mobiel alleen de contactknop in de homepage-hero */
@media (max-width: 699px) { .hero-actions .hero-btn-desktop { display: none; } }
/* 22 okt (Randy): titel op mobiel compacter, 3 regels i.p.v. 4 */
@media (max-width: 699px) { .hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.4rem); line-height: 1.05; max-width: none; } }

/* 22 okt: donkere feature-sectie met foto ernaast (ICT, foto van Bart). Mobiel: foto onder de lijst. */
.dark-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.dark-split .section-heading { margin-bottom: 2.2rem; }
.dark-split .feature-list { margin-top: 0; }
.dark-split img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius, 6px); }
@media (min-width: 960px) { .dark-split { grid-template-columns: 1fr 1fr; } .dark-split img { order: -1; } }

/* 22 okt (Randy): lichtere schaduw voor headers waar de foto al op een donker vlak staat
   en de titel kort is (montage). Alleen vanaf tablet; mobiel houdt het standaard-verloop. */
@media (min-width: 700px) {
  .page-hero--licht::after {
    background:
      linear-gradient(to bottom, rgba(5,7,10,0.55) 0, rgba(5,7,10,0) 8rem),
      linear-gradient(to right, rgba(5,7,10,0.7) 0%, rgba(5,7,10,0.55) 28%, rgba(6,8,12,0.3) 46%, rgba(8,10,14,0.1) 60%, rgba(8,10,14,0) 72%);
  }
}

/* 22 okt (Randy): pagina-headers op mobiel rustiger, net als de homepage: kleinere titel en
   alleen de eerste zin van de intro (rest in .lede-extra, op desktop gewoon zichtbaar). */
@media (max-width: 699px) {
  .page-hero h1, .page-hero.page-hero--photo h1 { font-size: clamp(1.7rem, 7.4vw, 2.15rem); line-height: 1.08; max-width: none; }
  .page-hero p.lede { font-size: 1rem; }
  .page-hero .lede-extra { display: none; }
}

/* 22 okt: mobiel menu open = header dicht (anders schuiven de menu-items bij scrollen
   onder het transparante logo door) en menu-inhoud onder de header laten beginnen. */
.site-header:has(.nav-toggle[aria-expanded="true"]) { background: var(--ink); box-shadow: 0 1px 0 var(--ink-line); }
.nav-mobile { padding-top: 7.5rem; }

/* 22 okt: op subpagina's (compactere page-hero) is het logo op mobiel kleiner dan op home */
@media (max-width: 699px) {
  body:has(.page-hero) .logo img { height: 50px; }
  body:has(.page-hero) .site-header.is-scrolled .logo img { height: 44px; }
}

/* 22 okt: lange tekstlinks (.btn--link, nowrap via .btn) maakten de pagina op een smalle telefoon
   breder dan het scherm (menu viel rechts weg). Op mobiel mogen ze afbreken. */
@media (max-width: 699px) {
  .btn--link { white-space: normal; max-width: 100%; }
}