/* ==========================================================================
   F&M LOGISTICS · style.css
   Concept: de meridiaan + de vrachtbrief
   Gebouwd door Qualenta. Eén bestand, gesecteerd:
   01 tokens · 02 reset/basis · 03 typografie · 04 layout · 05 knoppen/iconen
   06 kop van de pagina (topregel, merkeiland, navigatie-eiland, menu)
   07 hero · 08 secties home · 09 subpagina's · 10 formulier · 11 footer
   12 beweging · 13 responsief · 14 reduced motion

   Let op: in dit bestand staat nergens mix-blend-mode of backdrop-filter.
   Die combinatie gaf op grote donkere secties rechthoekige vlekken over de
   tekst, doordat de browser zulke lagen apart samenstelt. Overlays werken nu
   met gewone doorzichtigheid, wat er hetzelfde uitziet en altijd klopt.
   ========================================================================== */

/* ---------- 01 · TOKENS ---------- */
:root {
  --ink:          #04122B;
  --ink-2:        #071B3D;
  --navy:         #00306A;
  --navy-600:     #1E5AA8;
  --navy-200:     #C9DAF0;

  --paper:        #F6F3EE;
  --paper-2:      #FBF9F6;
  --amber:        #E9A13B;
  --amber-deep:   #C67E1D;

  --text:         #10203A;
  --text-soft:    #55637A;
  --text-invert:  #F2F5FA;
  --text-invert-soft: rgba(242,245,250,.66);

  --line:         rgba(16,32,58,.12);
  --line-invert:  rgba(242,245,250,.14);

  --r-xs: 3px; --r-sm: 4px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;
  --r-pill: 999px;
  /* Knoppen zijn rechthoekig met een kleine ronding. Een capsulevorm gaf de
     kop en de hero een zachte, generieke uitstraling; deze radius sluit aan
     op de rechte hoeken van de kaarten, de velden en het vrachtbriefraster. */
  --r-btn: 6px;
  --shadow-soft: 0 1px 2px rgba(4,18,43,.04), 0 8px 24px -12px rgba(4,18,43,.18);
  --shadow-lift: 0 2px 4px rgba(4,18,43,.05), 0 24px 60px -24px rgba(4,18,43,.28);
  --shadow-float: 0 1px 2px rgba(4,18,43,.07), 0 18px 38px -20px rgba(4,18,43,.55);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 180ms; --dur: 320ms; --dur-slow: 700ms;

  --font-display: 'Cabinet Grotesk', 'Switzer', ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: 'Switzer', ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-serif: 'Boska', Georgia, serif;
  --font-mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-pad: clamp(56px, 7vw, 112px);
  --topline-h: 32px;
  --head-h: 124px;          /* topregel plus de kopregel met merk en navigatie */
}

/* ---------- 02 · RESET / BASIS ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
ul[class], ol[class], nav ul, nav ol,
.forwho ul, .alt-copy ul, .person-info ul { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--navy-200); color: var(--ink); }
#main { scroll-margin-top: calc(var(--head-h) + 8px); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--text-invert);
  padding: .6em 1.1em; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { top: 12px; color: var(--text-invert); }

/* ---------- 03 · TYPOGRAFIE ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: .96; }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.02; }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); letter-spacing: -0.02em; }
h4 { font-size: 1.1rem; letter-spacing: -0.01em; }
p { text-wrap: pretty; max-width: 62ch; }
strong { font-weight: 600; }

/* Boska blijft voorbehouden aan echt redactionele momenten: de slogan in de
   footer en de missie- en visieblokken. Niet in gewone koppen. */
.quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 401;
  letter-spacing: 0; color: var(--navy);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-600);
  display: inline-flex; align-items: center; gap: .85em;
  margin-bottom: 1.2rem;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--amber); }
.lead { font-size: clamp(1.1rem, 1.02rem + .3vw, 1.28rem); color: var(--text-soft); max-width: 56ch; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; font-weight: 500; }

/* donkere context */
.on-dark { color: var(--text-invert); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--text-invert); }
.on-dark p { color: var(--text-invert-soft); }
.on-dark .eyebrow { color: var(--amber); }
.on-dark a { color: var(--text-invert); }

/* ---------- 04 · LAYOUT ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: var(--sec-pad); --chipbg: var(--paper); }
.sec-tight { padding-block: clamp(44px, 5vw, 76px); }
.sec-dark  { background-color: var(--ink);  --chipbg: var(--ink); }
.sec-dark2 { background-color: var(--ink-2); --chipbg: var(--ink-2); }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

/* bewuste rand op elke licht/donker-overgang */
.seam::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent 4%, rgba(233,161,59,.5) 30%, rgba(30,90,168,.36) 68%, transparent 96%);
}

.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }

/* de vaste haarlijn-verticaal. Hier hangt de sectienummering aan, zodat de
   koppen zelf geen nummers hoeven te dragen. */
.page-rule { display: none; }
@media (min-width: 1200px) {
  .page-rule {
    display: block; position: absolute; left: 88px; top: 0; bottom: 0; width: 1px;
    background: rgba(120,140,170,.16); z-index: 1; pointer-events: none;
  }
  .sec[data-no]::after {
    content: attr(data-no);
    position: absolute; left: 88px; top: clamp(58px, 6vw, 96px);
    transform: translateX(-50%);
    font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
    letter-spacing: .16em; color: var(--text-soft); opacity: .72;
    background: var(--chipbg); padding: 8px 2px;
    writing-mode: vertical-rl; text-orientation: mixed;
    z-index: 2;
  }
  .sec-dark[data-no]::after, .sec-dark2[data-no]::after { color: var(--text-invert-soft); }
}

/* Filmkorrel op donkere secties: een tegel van 64 bij 64 pixels waarin de
   doorzichtigheid al is ingebakken.

   Hier stond eerder een absolute overlay over de hele sectie, eerst met een
   SVG-filter en later met opacity. Zo'n laag over een sectie van honderden
   pixels hoog stelt de browser in tegels samen, en waar een tegel misging
   bleef er een rechthoekige vlek over de tekst staan. Nu is de korrel een
   gewone achtergrondlaag van de sectie zelf. Dat kost geen extra laag en kan
   dus ook niet meer scheuren. Elke sectie met deze klasse zet daarom alleen
   background-color, nooit de background-shorthand. */
.grain {
  background-image: url("../img/grain.png");
  background-repeat: repeat;
  background-size: 64px 64px;
}

/* meridiaanbogen als decor */
.merid { position: absolute; pointer-events: none; z-index: 0; }
.merid path, .merid ellipse, .merid circle, .merid line { vector-effect: non-scaling-stroke; }

/* hoekmarkeringen zoals op een verzendlabel */
.corners { position: relative; }
.corners::before, .corners::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--amber); border-style: solid; opacity: .9;
}
.corners::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; }
.corners::after { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; }

/* Beeldbehandeling: één navy sluier over elke foto, zonder blend-mode. */
.duo { position: relative; overflow: hidden; }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06) brightness(.94); }
.duo::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: .34; transition: opacity 600ms var(--ease); }

/* ---------- 05 · KNOPPEN & ICONEN ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 1.02em 1.5em; border-radius: var(--r-btn);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn .ic { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:hover .ic { transform: translateX(4px); }
.btn-primary { background: var(--amber); color: var(--ink); }
.btn-primary:hover { background: var(--amber-deep); color: var(--ink); box-shadow: 0 12px 26px -14px rgba(233,161,59,.85); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--navy); background: rgba(0,48,106,.05); color: var(--ink); }
.on-dark .btn-ghost, .btn-ghost-invert { border-color: var(--line-invert); color: var(--text-invert); }
.on-dark .btn-ghost:hover, .btn-ghost-invert:hover { border-color: rgba(242,245,250,.5); background: rgba(242,245,250,.07); color: var(--text-invert); }

.tlink {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; color: var(--navy); text-decoration: none;
}
.tlink .ic { width: 17px; height: 17px; transition: transform var(--dur-fast) var(--ease); }
.tlink:hover .ic { transform: translateX(4px); }

.ic {
  width: 24px; height: 24px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 06 · KOP VAN DE PAGINA ---------- */
/* Hier stonden eerder twee losse, roomwitte capsules die over de hero
   zweefden. Twee lichte vlekken op een diepblauw vlak: de kop hoorde
   zichtbaar niet bij de hero. Nu is de kop onderdeel van de hero zelf. Boven
   de vouw is de balk volledig doorzichtig en houdt alleen een haarlijn hem
   vast, precies zoals de regels op een vrachtbrief. Zodra er gescrold wordt
   zakt de balk dicht op het merkblauw, want vanaf dat moment loopt er lichte
   inhoud onderdoor. Op diezelfde onderrand loopt een amberen streep mee met
   de leesvoortgang van de pagina.
   Elke pagina van deze site opent met een donkere sectie, dus de doorzichtige
   stand is overal veilig. */
.site-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  pointer-events: none;                 /* alleen de kopregels vangen klikken */
  background: rgba(4,18,43,0);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-top > * { pointer-events: auto; }

/* haarlijn onder de kop: dooft naar de randen uit */
.site-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,245,250,.18) 14%,
                              rgba(242,245,250,.18) 86%, transparent);
  transition: background var(--dur) var(--ease);
}
/* Leesvoortgang: dezelfde amberen streep als op de tijdlijnen. Hij deelt de
   onderrand met de haarlijn hierboven, en omdat ::after later wordt getekend
   moet deze er met z-index bovenuit komen. Op één beeldpunt viel de streep
   tegen de haarlijn weg; drie punten lezen als een eigen element zonder dat
   de kop een balk erbij krijgt. */
.site-top::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1;
  background: var(--amber);
  transform: scaleX(var(--read, 0)); transform-origin: left center;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
/* Bij het scrollen verandert alleen de KLEUR van de kop, nooit de maat. De
   balk zakte eerder dicht: de topregel klapte weg, het merk kromp en de
   kopregel verloor padding. Daardoor stond de kop op de home (een hero van
   een volledig scherm, dus je leest hem meestal gescrold) lager dan op een
   binnenpagina die vers bovenaan opent, en versprong de navigatie bij elke
   paginawissel. De hoogte is nu op elke pagina en in elke scrollstand
   gelijk aan --head-h. */
.site-top.is-scrolled {
  background: rgba(4,18,43,.97);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.9);
}
.site-top.is-scrolled::after { background: rgba(242,245,250,.12); }
.site-top.is-scrolled::before { opacity: .9; }

.topline {
  height: var(--topline-h);
  display: flex; align-items: center;
  color: var(--text-invert-soft);
  font-size: .76rem;
  overflow: hidden;
}
.topline .wrap { display: flex; align-items: center; justify-content: flex-end; gap: 1.25em; width: 100%; }
.topline a {
  position: relative; color: var(--text-invert-soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4em;
  transition: color var(--dur-fast) var(--ease);
}
/* haarlijntje dat vanuit links aangroeit en naar rechts weer wegloopt */
.topline a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--amber);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 340ms var(--ease-out);
}
.topline a:hover { color: var(--text-invert); }
.topline a:hover::after { transform: scaleX(1); transform-origin: left center; }
.topline a:hover .ic { color: var(--amber); }
.topline .ic { width: 13px; height: 13px; transition: color var(--dur-fast) var(--ease); }
.topline .sep { color: rgba(242,245,250,.24); }

.lang-switch { display: inline-flex; align-items: center; gap: .1em; }
.lang-switch button {
  position: relative; background: none; border: 0; cursor: pointer; padding: .3em .45em;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  color: var(--text-invert-soft);
  transition: color var(--dur-fast) var(--ease);
}
.lang-switch button:hover { color: var(--text-invert); }
.lang-switch button[aria-pressed="true"] { color: var(--amber); }
.lang-switch button[aria-pressed="true"]::after {
  content: ''; position: absolute; left: .45em; right: .45em; bottom: .05em;
  height: 1px; background: var(--amber); opacity: .7;
}
.lang-switch .lang-sep { color: rgba(242,245,250,.24); align-self: center; font-size: .68rem; }

.header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 2vw, 28px);
  padding-block: clamp(11px, 1.3vw, 16px);
}

/* het merk: geen kader meer, de witte vectorversie staat direct op de hero */
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; flex: none; padding: 2px 0;
  transition: opacity var(--dur-fast) var(--ease);
}
/* Het bolletje in het beeldmerk bestaat uit dunne meridianen. Onder de
   veertig pixels vallen die onder één beeldpunt en lopen ze grijs uit; het
   logo oogt dan zacht. Op deze maat staan ze weer als lijn. */
.brand img { height: 56px; width: auto; }
.brand:hover { opacity: .78; }

/* De navigatie en de knop delen de ruimte rechts van het merk. De navigatie
   staat vooraan in dat vlak — dicht bij het merk, waar het oog na het logo
   als eerste komt — en de knop blijft tegen de rechterrand. */
.navpill { display: flex; align-items: center; flex: 1; justify-content: space-between; gap: clamp(10px, 1.6vw, 22px); }

.nav { display: flex; align-items: center; margin-left: clamp(8px, 4vw, 56px); }
.nav > ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
/* Navigatie-items dragen geen vlak, maar een amberen onderstreping die vanuit
   links aangroeit bij hover en er aan de rechterkant weer uitloopt. De actieve
   pagina houdt die streep permanent. */
.nav a {
  position: relative; display: inline-block; padding: .5em 0 .55em;
  color: var(--text-invert-soft); text-decoration: none;
  font-weight: 500; font-size: 1.06rem;
  transition: color var(--dur-fast) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .18em; height: 1.5px;
  background: var(--amber);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 380ms var(--ease-out);
}
.nav a:hover, .nav a:focus-visible { color: var(--text-invert); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav a[aria-current="page"] { color: var(--text-invert); font-weight: 600; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta {
  padding: .95em 1.25em;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--r-btn);
}
.nav-cta .ic { width: 15px; height: 15px; }

.has-sub { position: relative; }
.has-sub > a { display: inline-flex; align-items: center; gap: .35em; }
.has-sub > a .ic { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.has-sub:hover > a .ic, .has-sub:focus-within > a .ic { transform: rotate(180deg); }
.sub {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  min-width: 216px;
  background: rgba(4,18,43,.98);
  border: 1px solid var(--line-invert); border-radius: var(--r-sm);
  box-shadow: 0 28px 64px -28px rgba(0,0,0,.95); padding: .4rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
/* onzichtbare brug over de tussenruimte, zodat het paneel niet dichtklapt
   terwijl de muis ernaartoe beweegt */
.sub::before { content: ''; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
.has-sub:hover .sub, .has-sub:focus-within .sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.sub a {
  display: flex; align-items: center; gap: .55em;
  padding: .58em .7em; font-size: .99rem; border-radius: var(--r-xs);
  color: var(--text-invert-soft); font-weight: 500;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.sub a::after { display: none; }        /* geen onderstreping in het paneel */
.sub a::before {
  content: ''; width: 0; height: 1.5px; background: var(--amber); flex: none;
  transition: width 280ms var(--ease-out);
}
.sub a:hover, .sub a:focus-visible { color: var(--text-invert); background: rgba(242,245,250,.06); }
.sub a:hover::before, .sub a:focus-visible::before { width: 14px; }

/* hamburger: rechthoekig kadertje in dezelfde taal als de knoppen */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: rgba(242,245,250,.05); border: 1px solid var(--line-invert);
  border-radius: var(--r-btn);
  cursor: pointer; color: var(--text-invert);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover { background: rgba(242,245,250,.11); border-color: rgba(242,245,250,.42); }
.nav-toggle .bars { display: block; width: 22px; height: 12px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars::after { top: 10px; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 5px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--ink);
  display: flex; flex-direction: column;
  padding: max(4.5rem, 12svh) var(--gutter) 2.2rem;
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  overflow-y: auto;
}
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-close {
  position: absolute; top: 18px; right: max(var(--gutter), 18px);
  background: rgba(242,245,250,.05); border: 1px solid var(--line-invert); border-radius: var(--r-btn);
  width: 48px; height: 48px; cursor: pointer; color: var(--text-invert);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.menu-close:hover { background: rgba(242,245,250,.11); border-color: rgba(242,245,250,.42); }
.menu-brand { position: absolute; top: 22px; left: var(--gutter); }
.menu-brand img { height: 46px; width: auto; }
.menu nav ul { display: flex; flex-direction: column; gap: .2rem; }
.menu nav a {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 6.6vw, 2.5rem); line-height: 1.25;
  color: var(--text-invert); text-decoration: none;
  display: inline-block; padding: .1em 0;
}
.menu nav a { transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease); }
.menu nav a:hover, .menu nav a[aria-current="page"] { color: var(--amber); }
.menu nav > ul > li > a:hover { transform: translateX(8px); }
.menu nav .menu-sub a { font-size: 1.1rem; font-family: var(--font-body); font-weight: 500; color: var(--text-invert-soft); padding: .28em 0; }
.menu nav .menu-sub { padding-left: 1.1rem; border-left: 1px solid var(--line-invert); margin: .3rem 0 .6rem; }
.menu.is-open nav li { animation: menuItem 480ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
@keyframes menuItem { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.menu-foot {
  margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--line-invert);
  display: flex; flex-wrap: wrap; gap: .9rem 2rem; align-items: center;
  color: var(--text-invert-soft); font-size: .9rem;
}
.menu-foot a { color: var(--text-invert); text-decoration: none; display: inline-flex; gap: .5em; align-items: center; }
.menu-foot .lang-switch { margin-left: auto; }

/* ---------- 07 · HERO (home) ---------- */
.hero {
  position: relative; background-color: var(--ink); color: var(--text-invert);
  min-height: 100svh; display: flex; flex-direction: column;
  overflow: clip; isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .26; }
/* Geen filmkorrel in de hero. De tegel van 64 bij 64 pixels herhaalde zich
   hier over een vlak van een heel scherm en werd daardoor zichtbaar als een
   gevlekt, leerachtig patroon achter de kop. De overige donkere secties zijn
   veel lager en houden de korrel wel. De kleuropbouw is ongewijzigd; alleen
   de overgangen lopen nu vloeiender, zodat het vlak strak blijft. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(96deg,
      rgba(4,18,43,.97) 0%, rgba(4,18,43,.93) 18%, rgba(4,18,43,.84) 34%,
      rgba(4,18,43,.62) 56%, rgba(4,18,43,.5) 74%, rgba(4,18,43,.72) 100%),
    radial-gradient(1080px 720px at 74% 22%, rgba(30,90,168,.3), transparent 72%),
    linear-gradient(to top, rgba(4,18,43,.6), rgba(4,18,43,0) 26%);
}

.hero-main {
  position: relative; z-index: 4; flex: 1;
  display: flex; align-items: center;
  padding-block: calc(var(--head-h) + clamp(12px, 3svh, 40px)) clamp(24px, 4svh, 48px);
}
.hero-main .wrap { width: 100%; min-width: 0; }
.hero-head { max-width: 900px; }
.hero .eyebrow { color: var(--amber); }
.hero h1 { color: var(--text-invert); margin-bottom: 0; }

.hero-copy { position: relative; z-index: 2; max-width: 580px; margin-top: clamp(1.3rem, 2.4vw, 2.1rem); }
.hero .lead { color: var(--text-invert-soft); margin-bottom: 1.9rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* DE WERELDBOL
   De bol is geen kolom naast de tekst meer maar een eigen laag over de volle
   hoogte van de hero, met de rechterrand tegen de vensterrand aan. Hij is
   daarmee ongeveer even hoog als de hero zelf, zoals in het ontwerp bedoeld.
   De tekst loopt eroverheen; de leesbaarheid komt van twee kanten:
   het canvas dooft aan de linkerzijde uit met een masker, en main.js kiest
   alleen routes waarvan beide eindpunten rechts van de tekstkolom vallen. */
.hero-globe {
  position: absolute; z-index: 1; pointer-events: none;
  top: 50%; right: 0; transform: translateY(-50%);
  width: min(62vw, 96svh, 1040px); aspect-ratio: 1;
}
.hero-globe canvas {
  width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(96deg, transparent 0%, rgba(0,0,0,.3) 22%, rgba(0,0,0,.82) 44%, #000 60%);
          mask-image: linear-gradient(96deg, transparent 0%, rgba(0,0,0,.3) 22%, rgba(0,0,0,.82) 44%, #000 60%);
}
.glabel {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242,245,250,.78); white-space: nowrap;
  text-shadow: 0 1px 10px rgba(4,18,43,.9);
  transform: translate(10px, -50%);
  opacity: 0; transition: opacity 500ms var(--ease);
}
.glabel.is-on { opacity: 1; }

.scroll-hint {
  position: absolute; left: var(--gutter); bottom: 100px; z-index: 5;
  display: none; align-items: flex-end; gap: .8em;
}
.scroll-hint .shl { width: 1px; height: 44px; background: var(--line-invert); position: relative; overflow: hidden; }
.scroll-hint .shl::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: var(--amber); animation: scrollSeg 2s var(--ease) infinite;
}
@keyframes scrollSeg { 0% { top: -40%; } 100% { top: 110%; } }
.scroll-hint .mono { writing-mode: vertical-rl; color: var(--text-invert-soft); font-size: .58rem; }
@media (min-width: 1320px) and (min-height: 800px) { .scroll-hint { display: flex; } }

/* De strook staat over de onderkant van de bol heen en krijgt daarom een
   eigen, naar beneden verdiepende bodem. Zo blijven de labels leesbaar en
   houdt de hero onderaan een duidelijke afsluiting. */
.hero-strip {
  position: relative; z-index: 4; border-top: 1px solid var(--line-invert);
  height: 68px; overflow: hidden;
  background: linear-gradient(to top, rgba(4,18,43,.88), rgba(4,18,43,.6));
}
.strip-track { display: flex; height: 100%; }
.strip-set { display: grid; grid-template-columns: repeat(6, 1fr); flex: none; width: 100%; height: 100%; }
.strip-set + .strip-set { display: none; }
.strip-cell {
  display: flex; align-items: center; justify-content: center; gap: .7em;
  border-left: 1px solid var(--line-invert);
  color: var(--text-invert-soft); font-size: .8rem;
}
.strip-cell:first-child { border-left: 0; }
.strip-cell .mono { color: var(--text-invert); font-size: .64rem; letter-spacing: .2em; }
.strip-cell .ic { width: 19px; height: 19px; color: var(--amber); opacity: .82; }

/* ---------- 08 · SECTIES HOME ---------- */
/* B · positionering */
.pos-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 48px); }
.pos-head { grid-column: 1 / 9; }
/* De twee kolommen beginnen op dezelfde regel. Eerder stond de rechter
   alinea 2,4rem lager als "redactionele" trap; in de praktijk las dat als
   twee blokken die scheef onder elkaar hangen in plaats van als een bewuste
   keuze. Ze staan nu gewoon op één lijn. */
.pos-body { grid-column: 1 / 8; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: 2.2rem; align-items: start; }
.pos-aside { grid-column: 9 / 13; align-self: end; }
.forwho {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md);
  border-top: 2px solid var(--amber);
  padding: 1.7rem 1.5rem; box-shadow: var(--shadow-soft);
}
.forwho .mono { color: var(--navy-600); display: block; margin-bottom: 1rem; }
.forwho ul { display: grid; gap: .45rem; font-weight: 500; }
.forwho hr { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0; }
.forwho .fw-note { color: var(--text-soft); font-size: .94rem; }

/* C · dienstenkaarten */
.services-head { max-width: 720px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.services-head .lead { margin-top: .9rem; }
.svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: stretch; }
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-card:nth-child(1) { grid-column: 1 / 6; grid-row: span 2; }
.svc-card:nth-child(2) { grid-column: 6 / 13; }
.svc-card:nth-child(3) { grid-column: 6 / 13; }
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--amber); z-index: 5; transition: width 420ms var(--ease);
}
.svc-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.svc-card:hover::before { width: 100%; }
.svc-media { aspect-ratio: 16 / 9; }
.svc-card:nth-child(1) .svc-media { aspect-ratio: 4 / 5; }
.svc-media img { transition: transform 600ms var(--ease); }
.svc-card:hover .svc-media img { transform: scale(1.04); }
.svc-card:hover .svc-media::after { opacity: .16; }
.svc-body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .85rem; flex: 1; }
.svc-body .mono { color: var(--navy-600); }
.svc-body h3 { margin-top: .1rem; }
.svc-tags { display: flex; flex-direction: column; gap: .3rem; color: var(--text-soft); font-size: .94rem; }
.svc-tags li { display: flex; gap: .7em; align-items: baseline; }
.svc-tags li::before { content: ''; width: 12px; height: 1.5px; background: var(--amber); flex: none; transform: translateY(-.22em); }
.svc-body .tlink { margin-top: auto; padding-top: .5rem; }

/* D · waarop u ons kunt beoordelen */
.usp-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.usp-list { border-top: 1px solid var(--line-invert); }
.usp-item {
  display: grid; grid-template-columns: minmax(72px, 150px) 1fr; gap: clamp(16px, 4vw, 56px);
  padding: clamp(1.5rem, 2.6vw, 2.3rem) 0; border-bottom: 1px solid var(--line-invert);
}
.usp-item .usp-no {
  font-family: var(--font-mono); font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--amber); font-variant-numeric: tabular-nums; line-height: 1; opacity: .9;
}
.usp-item h3 { color: var(--text-invert); margin-bottom: .5rem; }
.usp-item p { color: var(--text-invert-soft); max-width: 68ch; }

/* E · werkwijze tijdlijn */
.tl-head { max-width: 720px; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.tl-head .lead { margin-top: .9rem; }
.timeline { position: relative; }
.tl-line { position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: var(--line); }
.tl-line::after {
  content: ''; position: absolute; inset: 0; transform-origin: left center;
  background: var(--amber); transform: scaleX(var(--tl-progress, 0));
}
.tl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); }
.tl-step { position: relative; padding-top: 2.1rem; }
.tl-step::before {
  content: ''; position: absolute; top: 3px; left: 0; width: 11px; height: 11px;
  border-radius: 50%; background: var(--paper); border: 1.5px solid var(--text-soft);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tl-step.is-passed::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px rgba(233,161,59,.18); }
.tl-step .mono { color: var(--navy-600); display: block; margin-bottom: .45rem; }
.tl-step h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.tl-step p { font-size: .94rem; color: var(--text-soft); }
.tl-more { margin-top: clamp(2.2rem, 4vw, 3.2rem); }

/* F · netwerk */
.net-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.net-copy { grid-column: 1 / 6; }
.net-copy p + p { margin-top: 1rem; }
.net-points { margin-top: 1.6rem; display: grid; gap: .5rem; }
.net-points li { display: flex; gap: .8em; align-items: baseline; color: var(--text-invert); font-weight: 500; font-size: .96rem; }
.net-points li::before { content: ''; width: 14px; height: 1.5px; background: var(--amber); flex: none; transform: translateY(-.22em); }
.net-map { grid-column: 6 / 13; position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-invert); }
.net-map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .26; filter: saturate(.7) contrast(1.05); }
.net-map::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(4,18,43,.74), rgba(4,18,43,.38)); }
.net-map svg { position: relative; width: 100%; height: auto; display: block; }
.net-map .land { stroke: rgba(242,245,250,.2); stroke-width: .9; fill: none; }
.net-map .arc {
  stroke: var(--amber); stroke-width: 1.3; fill: none; opacity: .9;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.net-map.is-in .arc { animation: drawArc 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 120ms + 200ms); }
@keyframes drawArc { to { stroke-dashoffset: 0; } }
.net-map .city { fill: var(--amber); }
.net-map.is-in .city { animation: cityPulse 3.2s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 120ms + 1s); }
@keyframes cityPulse { 0%, 100% { opacity: .95; } 50% { opacity: .45; } }
.net-map .clabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; fill: rgba(242,245,250,.55); }

/* G · zekerheden */
.facts { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--paper-2); }
.fact {
  padding: 1.5rem 1.3rem; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .65rem;
}
.fact:first-child { border-left: 0; }
.fact .ic { color: var(--navy-600); width: 22px; height: 22px; }
.fact b { display: block; font-weight: 600; font-size: .96rem; line-height: 1.4; }
.fact span { color: var(--text-soft); font-size: .86rem; line-height: 1.5; }

/* H · CTA */
.cta { text-align: left; overflow: clip; isolation: isolate; }
.cta .merid { right: -140px; top: 50%; transform: translateY(-50%); width: min(560px, 60vw); opacity: .9; }
.cta-inner { position: relative; z-index: 4; max-width: 640px; }
.cta h2 { margin-bottom: 1rem; }
.cta p { margin-bottom: 1.8rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cta .mono { display: block; margin-top: 1.5rem; color: var(--text-invert-soft); }

/* ---------- 09 · SUBPAGINA'S ---------- */
/* Elke hero op de site is van dezelfde lucht gemaakt: geen filmkorrel, wel
   een koele lichtval rechtsboven en een verdieping naar de bovenrand toe.
   De korrel bleef hier eerder staan, waardoor je op elke subpagina weer
   tegen datzelfde gespikkelde blauw aankeek terwijl de home strak was. */
.page-hero, .hero-sky {
  background-color: var(--ink);
  background-image:
    radial-gradient(940px 560px at 76% 6%, rgba(30,90,168,.34), transparent 72%),
    linear-gradient(180deg, rgba(7,27,61,.62), rgba(4,18,43,0) 64%);
}
.page-hero {
  position: relative; color: var(--text-invert);
  min-height: 48svh; display: flex; align-items: flex-end;
  padding: calc(var(--head-h) + clamp(30px, 5vw, 64px)) 0 clamp(40px, 5vw, 64px);
  overflow: clip; isolation: isolate;
}
.page-hero .merid { right: -180px; top: -120px; width: min(640px, 70vw); }
.page-hero .wrap { position: relative; z-index: 4; }
.page-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); color: var(--text-invert); margin-bottom: 1.1rem; max-width: 20ch; }
.page-hero .lead { color: var(--text-invert-soft); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5em; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-invert-soft); margin-bottom: 1.8rem; }
.crumbs a { color: var(--text-invert-soft); text-decoration: none; }
.crumbs a:hover { color: var(--text-invert); }
.crumbs .sep { color: rgba(242,245,250,.3); }

/* afwisselende blokken (diensten.html) */
.altblock { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.altblock + .altblock { margin-top: clamp(3.2rem, 6vw, 5.5rem); }
.alt-media { grid-column: 1 / 8; border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.alt-media img { aspect-ratio: 16 / 9; }
.alt-copy { grid-column: 8 / 13; }
.altblock:nth-child(even) .alt-media { grid-column: 6 / 13; order: 2; }
.altblock:nth-child(even) .alt-copy { grid-column: 1 / 6; order: 1; }
.alt-copy h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: .9rem; }
.alt-copy p + p { margin-top: .9rem; }
.alt-copy ul { margin: 1.2rem 0 1.5rem; display: grid; gap: .45rem; }
.alt-copy ul li { display: flex; gap: .8em; align-items: baseline; font-size: .96rem; }
.alt-copy ul li::before { content: ''; width: 12px; height: 1.5px; background: var(--amber); flex: none; transform: translateY(-.22em); }

/* dienstpagina: intro + sfeerbeeld */
.svc-intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 48px); }
.svc-intro-copy { grid-column: 1 / 8; }
.svc-intro-copy h2 { margin-bottom: 1rem; }
.svc-intro-copy p + p, .svc-intro-copy h2 + p { margin-top: 1rem; }
.svc-intro-media { grid-column: 8 / 13; align-self: start; border-radius: var(--r-md); box-shadow: var(--shadow-soft); }

/* optiekaartjes in haarlijnenraster */
.optgrid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.opt {
  padding: 1.6rem 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .75rem; background: var(--paper-2);
}
.opt .ic { color: var(--navy-600); }
.opt b { font-weight: 600; font-size: 1rem; }
.opt span { color: var(--text-soft); font-size: .92rem; line-height: 1.55; }
.optgrid-2 { grid-template-columns: repeat(2, 1fr); }

/* FAQ accordeon */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  padding: 1.2rem .2rem; font-weight: 600; font-size: 1.02rem; color: var(--ink);
  font-family: var(--font-body);
}
.faq-q .ic { width: 18px; height: 18px; color: var(--navy-600); transition: transform var(--dur) var(--ease); }
.faq-q[aria-expanded="true"] .ic { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { color: var(--text-soft); padding: 0 .2rem 1.2rem; max-width: 68ch; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* werkwijze pagina */
.steps-flow { position: relative; }
.steps-rail { position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.steps-rail::after {
  content: ''; position: absolute; inset: 0; transform-origin: top center;
  background: var(--amber); transform: scaleY(var(--flow-progress, 0));
}
.step-block { position: relative; padding: 0 0 clamp(2.6rem, 5vw, 4rem) clamp(2.2rem, 4vw, 3.6rem); }
.step-block:last-child { padding-bottom: 0; }
.step-block::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--text-soft);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step-block.is-passed::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px rgba(233,161,59,.18); }
.step-block .step-no {
  font-family: var(--font-mono); font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--navy-600); font-variant-numeric: tabular-nums; display: block; margin-bottom: .5rem;
}
.step-block h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: .8rem; }
.step-block p { margin-bottom: .85rem; }
.step-hear {
  margin-top: 1.1rem; background: var(--paper-2); border: 1px solid var(--line);
  border-left: 2px solid var(--amber); border-radius: var(--r-xs);
  padding: .9rem 1.15rem; font-size: .94rem; max-width: 62ch;
}
.step-hear .mono { display: block; color: var(--navy-600); margin-bottom: .28rem; }

.wide-media { border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.wide-media img { aspect-ratio: 21 / 9; }

/* misgaat-blok */
.mishap .wrap { max-width: 920px; }
.mishap h2 { margin-bottom: 1.3rem; }
.mishap p { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); line-height: 1.6; color: var(--text-invert); max-width: 30em; }

/* over ons */
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 48px); }
.about-copy { grid-column: 1 / 8; }
.about-copy h2 { margin-bottom: 1rem; }
.about-copy p + p { margin-top: 1rem; }
.about-media { grid-column: 8 / 13; align-self: start; position: sticky; top: calc(var(--head-h) + 20px); }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.mv-card {
  position: relative; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 2.1rem 1.8rem 1.8rem; box-shadow: var(--shadow-soft);
}
.mv-card::before {
  content: '\201C'; position: absolute; top: .4rem; left: 1.3rem;
  font-family: var(--font-serif); font-size: 4.4rem; line-height: 1; color: var(--navy-200);
}
.mv-card h3 {
  font-family: var(--font-serif); font-style: italic; font-weight: 401;
  letter-spacing: 0; font-size: 1.28rem; color: var(--navy); margin: 1.1rem 0 .75rem;
}
.honest {
  border: 1px solid var(--line); border-left: 2px solid var(--amber); border-radius: var(--r-sm);
  background: var(--paper-2); padding: 1.8rem 1.9rem; max-width: 760px;
}
.honest h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: .75rem; }
.person { display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: clamp(20px, 4vw, 44px); align-items: center; }
.person-visual {
  position: relative; aspect-ratio: 1; border-radius: var(--r-md); background: var(--ink);
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
}
.person-visual .merid { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%; }
.person-visual b {
  position: relative; z-index: 2; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.2rem, 7vw, 4.6rem); color: var(--text-invert); letter-spacing: -0.03em;
}
.person-info h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .2rem; }
.person-info .mono { color: var(--navy-600); display: block; margin-bottom: 1rem; }
.person-info ul { display: grid; gap: .4rem; margin-bottom: .9rem; }
.person-info ul a { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; font-weight: 500; color: var(--ink); }
.person-info ul a:hover { color: var(--navy-600); }
.person-info .p-note { color: var(--text-soft); font-size: .96rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact-form-col { grid-column: 1 / 8; }
.contact-info-col { grid-column: 8 / 13; position: sticky; top: calc(var(--head-h) + 20px); }
.cpanel {
  position: relative; background: var(--ink); color: var(--text-invert);
  border-radius: var(--r-md); padding: 2rem 1.8rem; overflow: hidden; isolation: isolate;
}
.cpanel .merid { right: -160px; bottom: -180px; width: 420px; }
.cpanel > * { position: relative; z-index: 2; }
.cpanel .cgroup { padding: .8rem 0; }
.cpanel .cgroup + .cgroup { border-top: 1px solid var(--line-invert); }
.cpanel .mono { color: var(--amber); display: block; margin-bottom: .28rem; }
.cpanel a { color: var(--text-invert); text-decoration: none; font-weight: 500; }
.cpanel a:hover { color: var(--amber); }
.cpanel .csub { color: var(--text-invert-soft); font-size: .86rem; }
.cpanel address { font-style: normal; line-height: 1.6; }
.cpanel .soon { color: var(--text-invert-soft); font-weight: 500; }
.tag {
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber); margin-left: .6em;
  border: 1px solid rgba(233,161,59,.4); border-radius: var(--r-pill); padding: .2em .55em;
  white-space: nowrap;
}

/* ---------- 10 · FORMULIER ---------- */
.form-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.5rem, 3.5vw, 2.4rem); box-shadow: var(--shadow-soft);
}
.form-note { display: block; margin-bottom: 1.5rem; color: var(--text-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .38rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .76em .88em; font-size: .97rem; color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(30,90,168,.14);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B4452F; }
.field textarea { resize: vertical; min-height: 118px; }
.field .ferr { display: none; color: #A03A26; font-size: .83rem; }
.field.has-error .ferr { display: block; }
.consent { flex-direction: row; align-items: flex-start; gap: .75rem; }
.consent input { width: 18px; height: 18px; margin-top: .25em; accent-color: var(--navy); flex: none; }
.consent label { font-family: var(--font-body); font-size: .91rem; letter-spacing: 0; text-transform: none; color: var(--text); line-height: 1.55; }
.consent-wrap { display: flex; flex-direction: column; gap: .38rem; }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-actions { grid-column: 1 / -1; margin-top: .3rem; display: flex; flex-direction: column; gap: .85rem; align-items: flex-start; }
.form-alt { color: var(--text-soft); font-size: .94rem; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.form-note-box {
  display: none; border: 1px solid var(--line); border-left: 2px solid #B4452F;
  background: var(--paper); border-radius: var(--r-xs); padding: 1rem 1.2rem; margin-top: 1.2rem;
  font-size: .95rem;
}
.form-note-box.is-visible { display: block; }
.form-success {
  display: none; border: 1px solid var(--line); border-left: 2px solid var(--amber);
  background: var(--paper); border-radius: var(--r-sm); padding: 1.3rem 1.5rem; margin-top: 1.3rem;
}
.form-success.is-visible { display: block; animation: successIn 600ms var(--ease-out); }
@keyframes successIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 11 · FOOTER ---------- */
.footer { position: relative; background: var(--ink); color: var(--text-invert-soft); overflow: clip; isolation: isolate; }
.footer .merid { right: -220px; top: -200px; width: 680px; }
.footer-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: clamp(28px, 4vw, 56px);
  padding: clamp(48px, 6vw, 84px) 0 clamp(32px, 4vw, 48px);
}
.footer-brand img { height: 56px; width: auto; margin-bottom: 1.1rem; }
.footer-brand .slogan {
  font-family: var(--font-serif); font-style: italic; color: var(--text-invert);
  font-size: 1.12rem; margin-bottom: .85rem;
}
.footer-brand p { font-size: .94rem; max-width: 34ch; }
.footer-brand .some { margin-top: 1.3rem; }
.footer-brand .some a, .footer-brand .some .soon {
  display: inline-flex; align-items: center; gap: .6em; color: var(--text-invert);
  text-decoration: none; font-weight: 500; font-size: .94rem;
}
.footer-brand .some a:hover { color: var(--amber); }
.footer-brand .some .soon { color: var(--text-invert-soft); }
.footer-h { color: var(--text-invert); font-family: var(--font-mono); font-size: .64rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: .5rem; }
.footer-col a { color: var(--text-invert-soft); text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: var(--text-invert); }
.footer-contact li { display: flex; flex-direction: column; margin-bottom: .75rem; font-size: .94rem; }
.footer-contact .mono { color: rgba(242,245,250,.45); font-size: .58rem; margin-bottom: .12rem; }
.footer-contact a { color: var(--text-invert); text-decoration: none; }
.footer-contact a:hover { color: var(--amber); }
.footer-contact .addr-note { color: rgba(242,245,250,.45); font-size: .82rem; margin-top: .2rem; }
.footer-bottom {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line-invert);
  padding: 1.3rem 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  font-size: .84rem;
}
.footer-bottom a { color: var(--text-invert-soft); text-decoration: none; }
.footer-bottom a:hover { color: var(--text-invert); }

/* juridisch + 404 */
.legal .wrap { max-width: 880px; }
.legal h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 2.4rem 0 .85rem; }
.legal p + p { margin-top: .85rem; }
.legal ul { margin: .85rem 0 .85rem 1.2rem; display: grid; gap: .4rem; }
.legal .datebar { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 1.8rem; }
.placeholder-block {
  border: 1px dashed rgba(198,126,29,.6); background: rgba(233,161,59,.07);
  border-radius: var(--r-sm); padding: 1.5rem 1.7rem; margin: 1.8rem 0;
}
.placeholder-block .mono { color: var(--amber-deep); display: block; margin-bottom: .5rem; }

.notfound { min-height: 100svh; display: flex; flex-direction: column; }
.nf-main { flex: 1; display: flex; align-items: center; position: relative; z-index: 2; }
.nf-code { font-family: var(--font-mono); color: var(--amber); letter-spacing: .3em; margin-bottom: 1.3rem; display: block; }
.nf-links { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- 12 · BEWEGING (scroll reveal) ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--rd, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* De kop van de hero komt woord voor woord onder een masker vandaan. main.js
   zet elk woord in een .w met een eigen volgnummer; zonder JavaScript, bij
   beperkte beweging of op smalle schermen blijft de kop gewoon staan. */
.hero h1 .w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.hero h1 .w > span { display: inline-block; will-change: transform; }
.hero h1.is-ready .w > span {
  animation: heroWord 950ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 100ms);
}
@keyframes heroWord { from { transform: translateY(108%); } to { transform: none; } }

/* eyebrow, inleiding en knoppen volgen de kop in dezelfde cadans */
.hero .eyebrow, .hero .lead, .hero-actions { animation: heroRise 900ms var(--ease-out) both; }
.hero .eyebrow { animation-delay: 40ms; }
.hero .lead { animation-delay: 460ms; }
.hero-actions { animation-delay: 600ms; }
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 13 · RESPONSIEF ---------- */
@media (max-width: 1180px) {
  .pos-head { grid-column: 1 / 10; }
  .pos-body { grid-column: 1 / 13; }
  .pos-aside { grid-column: 1 / 8; margin-top: .5rem; }
  .net-copy { grid-column: 1 / 13; }
  .net-map { grid-column: 1 / 13; margin-top: 1.4rem; }
}
@media (max-width: 1023px) {
  :root { --head-h: 108px; }
  .brand img { height: 48px; }
  .nav, .nav-cta { display: none; }
  .navpill { display: none; }
  .nav-toggle { display: inline-flex; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact { border-top: 1px solid var(--line); }
  .fact:nth-child(-n+2) { border-top: 0; }
  .fact:nth-child(odd) { border-left: 0; }
  .fact:nth-child(even) { border-left: 1px solid var(--line); }
  .svc-card:nth-child(1) { grid-column: 1 / 13; grid-row: auto; }
  .svc-card:nth-child(2), .svc-card:nth-child(3) { grid-column: 1 / 13; }
  .svc-card:nth-child(1) .svc-media { aspect-ratio: 16 / 9; }
  .altblock .alt-media, .altblock:nth-child(even) .alt-media { grid-column: 1 / 13; order: 1; }
  .altblock .alt-copy, .altblock:nth-child(even) .alt-copy { grid-column: 1 / 13; order: 2; }
  .svc-intro-copy { grid-column: 1 / 13; }
  .svc-intro-media { grid-column: 1 / 13; }
  .about-copy { grid-column: 1 / 13; }
  .about-media { grid-column: 1 / 13; position: static; }
  .contact-form-col { grid-column: 1 / 13; }
  .contact-info-col { grid-column: 1 / 13; position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Op tabletformaat loopt de tekstkolom over de volle breedte en blijft er
     rechts van de kop te weinig ruimte over voor een route met plaatsnamen.
     De bol is hier dus alleen nog decor: hij draait door met zijn netwerk van
     knooppunten, maar main.js laat de routes achterwege (zie routesOn). Hij
     schuift verder naar buiten en zakt in intensiteit, en het masker dooft
     hem verder naar rechts uit zodat de inleiding schoon blijft. */
  .hero-globe { width: min(104vw, 92svh, 860px); right: -22vw; opacity: .55; }
  .hero-globe canvas {
    -webkit-mask-image: linear-gradient(96deg, transparent 8%, rgba(0,0,0,.24) 38%, rgba(0,0,0,.7) 64%, #000 82%);
            mask-image: linear-gradient(96deg, transparent 8%, rgba(0,0,0,.24) 38%, rgba(0,0,0,.7) 64%, #000 82%);
  }
}
@media (max-width: 767px) {
  :root { --head-h: 74px; --topline-h: 0px; }
  .topline { display: none; }
  .brand img { height: 40px; }
  .nav-toggle { width: 44px; height: 44px; }
  .hero-main { padding-block: calc(var(--head-h) + 24px) 24px; }

  /* Op telefoonformaat komt de bol als horizon onder de tekst vandaan: hij
     staat rechtsonder half buiten beeld en dooft naar boven toe uit, zodat
     hij naadloos onder de inleiding en de knoppen door loopt. */
  .hero-globe {
    top: auto; bottom: -16svh; right: -26vw; transform: none;
    width: min(146vw, 620px); opacity: .5;
  }
  .hero-globe canvas {
    -webkit-mask-image: linear-gradient(to top, #000 22%, rgba(0,0,0,.5) 58%, transparent 92%);
            mask-image: linear-gradient(to top, #000 22%, rgba(0,0,0,.5) 58%, transparent 92%);
  }
  .glabel { display: none; }
  .pos-body { grid-template-columns: 1fr; gap: 1rem; }
  .tl-line { display: none; }
  .tl-steps { grid-template-columns: 1fr; gap: 0; position: relative; padding-left: 26px; }
  .tl-steps::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
  .tl-step { padding: 0 0 1.7rem 0; }
  .tl-step::before { left: -26px; }
  .usp-item { grid-template-columns: 1fr; gap: .4rem; }
  .usp-item .usp-no { font-size: 1.15rem; }
  .optgrid { grid-template-columns: 1fr 1fr; }
  .mv-grid { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .person-visual { max-width: 240px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .page-hero { min-height: 0; }

  /* hero-strook wordt marquee */
  .hero-strip { height: 56px; }
  .strip-track { width: max-content; animation: marquee 26s linear infinite; }
  .strip-track:hover { animation-play-state: paused; }
  .strip-set, .strip-set + .strip-set { display: flex; width: auto; }
  .strip-cell { padding: 0 1.3rem; border-left: 1px solid var(--line-invert); white-space: nowrap; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}
@media (max-width: 560px) {
  .optgrid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .fact, .fact:nth-child(even) { border-left: 0; }
  .fact:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .fact:first-child { border-top: 0; }
  /* De kop mag afbreken op de zachte afbreekstreep in "verantwoordelijkheid",
     dus met een streepje en niet middenin een lettergreep. */
  .hero h1 { font-size: clamp(2rem, 9.2vw, 2.8rem); overflow-wrap: break-word; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- 14 · REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero .eyebrow, .hero .lead, .hero-actions, .hero h1 .w > span { animation: none !important; opacity: 1 !important; transform: none !important; }
  .net-map .arc { stroke-dashoffset: 0 !important; animation: none !important; }
  .strip-track { animation: none !important; width: 100%; }
  .strip-set + .strip-set { display: none !important; }
  .scroll-hint { display: none !important; }
  .tl-line::after { transform: scaleX(1); }
  .steps-rail::after { transform: scaleY(1); }
}