/* HockeyTime homepage. Tokens in tokens.css.
   Kleurregel: --accent is een vlakkleur. Oranje TEKST op cream/paper gaat via
   --accent-text (klein) of --accent-display (>=24px). Zie tokens.css. */

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

/* Font smoothing hoort één keer op de root: per element toepassen geeft
   koppen en broodtekst ongelijke gewichten op macOS. */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
a { color: inherit; text-decoration: none; }

/* Regelafbreking: koppen in gelijke regels, lopende tekst zonder losse
   staartwoorden. `balance` werkt alleen tot ~6 regels, dus koppen; `pretty`
   heeft die grens niet en is de juiste keuze voor alinea's en lijsten. */
h1, h2, h3, .sec-title, .pillar-title, .h1a, blockquote { text-wrap: balance; }
p, li, figcaption, .sec-lead, .hero-sub, .band-body, .fact-line { text-wrap: pretty; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* Alles wat een sprongdoel kan zijn houdt afstand tot de plakkende header.
   Stond alleen op `section`, maar de dienstenkaarten zijn zelf ook doelen:
   `/#training` vanuit de footer en `/visie#d-training` vanuit de homepage
   landden allebei mét hun bovenkant ónder de header. `[id]` vangt ze alle
   drie, en nieuwe ankers voortaan vanzelf. */
section, [id] { scroll-margin-top: calc(var(--header-h) + var(--sp-1)); }

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

/* skip link: eerste tabstop, springt over de navigatie heen */
/* Bewust zonder transitie: dit is een toetsenbordactie, en die animeren nooit
   — je wilt de eerste tabstop meteen zien, niet 120ms later. En verplaatsen
   gaat via transform in plaats van `top`, zodat er geen layout aan te pas komt. */
.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 100;
  background: var(--accent); color: var(--ht-navy);
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; padding: var(--sp-3) var(--sp-5);
  transform: translateY(calc(-100% - var(--sp-4) - var(--sp-1)));
}
.skip-link:focus { transform: none; }

/* header */
header {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface-inverse); color: var(--text-on-dark);
}
.hbar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--sp-4); }

.mark { display: inline-flex; align-items: center; min-height: var(--tap); }
.mark img { height: 30px; width: auto; display: block; }

/* align-items: stretch geeft elke link de volle balkhoogte als raakvlak,
   zonder dat er visueel iets verandert */
.site-nav { display: flex; gap: var(--sp-6); align-items: stretch; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-on-dark-muted); transition: color var(--dur-hover) var(--ease-out);
}
.site-nav a:hover { color: var(--accent-on-dark); }
.site-nav a[aria-current="page"] { color: var(--text-on-dark); }

.hright { display: flex; align-items: center; gap: var(--sp-4); }

/* Taalwissel: twee losse links, niet één knop die omklapt. Zo zie je meteen
   welke talen er zijn én in welke je nu zit, en werkt hij ook zonder JS.
   Hij staat als laatste item ín het hoofdmenu, niet in de rechterkolom: op
   mobiel vecht die kolom al om ruimte met de CTA en de menuknop, en zo zakt
   de taalwissel vanzelf mee het uitklapmenu in. */
.lang { display: flex; align-items: center; gap: 2px; }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: 30px; padding: 0 4px;
  font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-on-dark-muted);
  transition: color var(--dur-hover) var(--ease-out);
}
.lang a:hover { color: var(--accent-on-dark); }
.lang a[aria-current="page"] { color: var(--text-on-dark); }
.lang .sep { color: var(--ht-hair-light); font-size: var(--fs-label); }

.menu-btn {
  display: none; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap);
  background: transparent; border: var(--bw-hair) solid var(--ht-hair-light);
  color: var(--text-on-dark); font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-caps); text-transform: uppercase; padding: 0 var(--sp-3); cursor: pointer;
  transition-property: border-color, scale;
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
}
.menu-btn:hover { border-color: var(--text-on-dark); }
.menu-btn:active { scale: .96; }

/* buttons */
.btn {
  font-family: inherit; font-size: var(--fs-meta); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  padding: var(--sp-3) var(--sp-5); border: var(--bw) solid transparent; cursor: pointer; line-height: 1;
  min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  /* alleen benoemde eigenschappen, nooit `all` */
  transition-property: background-color, color, scale;
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
}
/* scale(0.96) leest als indrukken; onder 0.95 wordt het karikaturaal.
   Als transitie (niet keyframe) zodat loslaten halverwege netjes terugveert. */
.btn:active { scale: .96; }
/* navy op oranje = 5.01:1; hover gaat LICHTER zodat contrast stijgt naar 5.94:1 */
.btn.primary { background: var(--accent); color: var(--ht-navy); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.dark { background: var(--surface-inverse); color: var(--text-on-dark); }
.btn.dark:hover { background: var(--surface-inverse-hover); }
.btn.lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-body); }

.eyebrow {
  display: block;
  font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: 600;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--accent-text);
}
/* op donkere vlakken mag het felle merkoranje wel (5.01:1) */
.band .eyebrow, .lab-band .eyebrow, .visie-cta .eyebrow { color: var(--accent-on-dark); }

/* hero */
.hero { padding: var(--sp-9) 0 var(--sp-7); position: relative; overflow: hidden; }
/* Iets meer ruimte voor het bord dan voorheen (was 1.25/.75): het veld staat er
   nu op ware verhouding op en moet leesbaar blijven. */
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-7); align-items: center; }
.h1a {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  line-height: .88; letter-spacing: var(--ls-display); color: var(--text-strong);
  margin: var(--sp-5) 0 0; font-size: var(--fs-display-xl);
}
/* Anton heeft geen echte cursief, dus `italic` is een synthetische
   schuinstelling: de browser scheert de glief. Daardoor leunt de laatste letter
   het volgende woordspatie in en staat "GEK is?" krapper dan de rest van de
   regel. De .06em compenseert dat. Aan het eind van een regel doet hij niets. */
.h1a em, .sec-title em { margin-right: .06em; }
.h1a em { font-style: italic; color: var(--accent-display); }
.hero-sub { max-width: 46ch; margin: var(--sp-5) 0 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-body); }
.hero-cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }

/* tactiekbord-paneel */
.hero-side {
  align-self: stretch;
  display: flex; flex-direction: column;
  background: var(--surface-raised);
  border: var(--bw) solid var(--border-strong);
  overflow: hidden;
}
/* .pitch (niet .field): .field is de formulierrij verderop. Zie main.js.
   De aspect-ratio volgt de viewBox, zodat de speelhelft nooit wordt
   uitgerekt of bijgesneden: de verhoudingen van het veld kloppen. */
.pitch { width: 100%; aspect-ratio: 700 / 600; display: block; color: var(--text-strong); }
.pitch .lines { opacity: .35; }
/* het balkje blijft onderaan plakken als de tekstkolom hoger is */
.hero-side .hero-stat { margin-top: auto; }

/* tactiekbord-animatie wordt aangestuurd vanuit js/main.js (rAF met echte
   balcurves en eigen easing per beweging). Zonder JS of met
   prefers-reduced-motion blijft de statisch getekende opstelling staan. */
.pitch .marks > * { transform-box: fill-box; transform-origin: center; }
/* will-change alleen zolang er écht geanimeerd wordt: twaalf permanent
   gepromote compositielagen kosten geheugen terwijl het bord stilstaat.
   js/main.js zet .animating aan en uit samen met de rAF-loop. */
.pitch.animating .marks > * { will-change: transform, opacity; }
.hero-stat {
  background: var(--surface-inverse); color: var(--text-on-dark); padding: var(--sp-5);
}
/* Bewust GEEN cijfermaat (was 48px): dit blok bevat een frase, geen getal, en
   op statformaat belooft het een cijfer dat er niet komt. Op --fs-display-s
   leest het als een kop boven de zin eronder. Komt er alsnog een echt getal
   (jaren, aantal clubs), dan mag dit terug naar 48px. */
.hero-stat .num { font-family: var(--font-display); font-size: var(--fs-display-s); line-height: .95; color: var(--accent-on-dark); text-transform: uppercase; }
/* geen uppercase meer: dit is een hele zin, geen label */
.hero-stat .lab { font-size: var(--fs-meta); margin-top: var(--sp-2); color: var(--text-on-dark-muted); line-height: var(--lh-meta); }

/* promise bar */
.promise { background: var(--accent); }
.promise .wrap {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-5); flex-wrap: wrap;
  padding-top: var(--sp-5); padding-bottom: var(--sp-5);
}
.promise span.p {
  font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--ht-navy);
}
.promise .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ht-navy); flex: none; }

/* sectiekoppen */
.values { padding: var(--section-y) 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); margin-bottom: var(--sp-7); flex-wrap: wrap; }
.sec-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: var(--lh-display);
  font-size: var(--fs-display-l); color: var(--text-strong); margin: var(--sp-2) 0 0; letter-spacing: var(--ls-display);
}
.sec-title em { font-style: italic; color: var(--accent-display); }
.sec-lead { max-width: 38ch; font-size: var(--fs-lead); line-height: var(--lh-body); margin: 0; }

/* GEK-tegels */
.vgrid { display: flex; gap: 0; }
.tile {
  flex: 1; min-height: 320px; padding: var(--sp-7) var(--sp-6);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5);
  /* eigen stapelcontext, zodat de tegel onder de muis over zijn buren heen komt */
  position: relative; z-index: 1;
}
/* De schaduw hangt op een pseudo-element en gaat aan met opacity. box-shadow
   animeren is repaint per frame; opacity draait op de compositor. */
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 18px 40px rgba(14, 27, 59, .22); opacity: 0;
}
.tile .l { font-family: var(--font-display); font-weight: 400; font-size: 108px; line-height: .8; }
.tile h3 { font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; margin: 0 0 var(--sp-2); }
.tile p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
/* contrasterende tegels: navy / oranje / wit (idee Thijmen) */
.tile.g { background: var(--ht-navy); color: #fff; }
.tile.g .l { color: var(--accent-on-dark); }
.tile.e { background: var(--accent); color: var(--ht-navy); }
.tile.e .l { color: #fff; }
.tile.k { background: var(--surface-raised); color: var(--ht-navy); }
.tile.k .l { color: var(--accent-display); }

/* Hover op de GEK-tegels: de tegel onder de muis komt naar voren en de andere
   twee zakken terug en vervagen. Bewust met transform en niet met flex-grow:
   dan hoeft de tekst niet te herbreken terwijl je heen en weer beweegt.
   De letter wisselt tegelijk van kleur, zodat het ook op één tegel leest.
   Alleen op apparaten met een échte muisaanwijzer: op touch blijft hover
   'plakken' na een tik.

   Maatvoering bewust ingehouden. Hover is een herhaalde interactie, dus kort
   (was .28s: dat gaf een golf van animaties bij het langslopen van de drie).
   De buren zakken naar .78 en niet naar .55: opacity neemt de héle tegel mee,
   dus op .55 composite de navy tegel richting cream en wordt de witte tekst
   erin onleesbaar. En 1.03 in plaats van 1.06, want de tegels staan op
   gap: 0 en op 6% kruipt de tegel zichtbaar over zijn buurman heen. */
@media (hover: hover) and (pointer: fine) {
  .tile, .tile .l, .tile::after {
    transition-property: scale, opacity, color;
    transition-duration: var(--dur-hover);
    transition-timing-function: var(--ease-out);
  }
  /* Bewust de losse `scale`-eigenschap en niet `transform`: de binnenkomst-
     animatie hieronder gebruikt `transform`, en die twee stapelen zich netjes
     op elkaar in plaats van elkaar te overschrijven. Scheelt een gevecht om
     specificiteit én de tekst hoeft niet te herbreken. */
  .vgrid .tile:hover { scale: 1.03; z-index: 2; }
  /* de buren: alleen als er daadwerkelijk één tegel wordt aangewezen.
     Browsers zonder :has() slaan deze twee over en houden de regel hierboven. */
  .vgrid:has(.tile:hover) .tile { scale: .98; opacity: .78; }
  .vgrid:has(.tile:hover) .tile:hover { scale: 1.03; opacity: 1; z-index: 2; }
  .vgrid:has(.tile:hover) .tile:hover::after { opacity: 1; }
  .vgrid .tile.g:hover .l { color: #fff; }
  .vgrid .tile.e:hover .l { color: var(--ht-navy); }
  .vgrid .tile.k:hover .l { color: var(--ht-navy); }
}

.gek-note {
  display: flex; align-items: baseline; gap: var(--sp-3);
  max-width: 68ch; margin: var(--sp-6) 0 0; font-size: var(--fs-body); line-height: var(--lh-body);
}
.gek-note .sq { width: 10px; height: 10px; background: var(--accent-display); flex: none; align-self: center; }

/* diensten */
.programma { padding: 0 0 var(--section-y); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--bw) solid var(--border-strong); }
.pcard {
  padding: var(--sp-6); border-right: var(--bw) solid var(--border-strong); background: var(--surface-raised);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.pcard:last-child { border-right: none; }
.pcard .idx { font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--ls-caps); color: var(--accent-text); }
.pcard h3 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-display-s); line-height: .95; margin: 0; color: var(--text-strong);
}
.pcard p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; color: var(--text-body); }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-1); }
.tag {
  font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding: var(--sp-1) var(--sp-2); box-shadow: inset 0 0 0 var(--bw-hair) var(--border-strong); color: var(--text-strong);
}

/* Hover op de dienstenkaarten: de kleuren klappen om naar navy. De kaarten
   staan in een raster met randen ertussen, dus hier geen schaal maar een
   kleuromslag; dat blijft strak binnen het kader.

   Alleen op .pcard, en die kaarten zijn sinds augustus 2026 échte links naar
   de uitgebreide versie op /visie. De .ddeep-kaarten ZIJN die uitgebreide
   versie en linken nergens heen: die krijgen daarom geen kleuromslag meer.
   Een hover die klikbaarheid belooft op iets dat niet klikt, is een loze
   belofte — en het was meteen de sterkste hover-affordance op de pagina. */
@media (hover: hover) and (pointer: fine) {
  .pcard, .pcard h3, .pcard p, .pcard .idx, .pcard .tag {
    transition-property: background-color, color, box-shadow;
    transition-duration: var(--dur-hover);
    transition-timing-function: var(--ease-out);
  }
  .pcard:hover { background: var(--surface-inverse); }
  .pcard:hover h3 { color: var(--surface-raised); }
  .pcard:hover p  { color: var(--text-on-dark-muted); }
  .pcard:hover .idx { color: var(--accent-on-dark); }
  .pcard:hover .tag { color: var(--text-on-dark); box-shadow: inset 0 0 0 var(--bw-hair) var(--ht-hair-light); }
}

/* zo werkt het: het traject in vier stappen */
.proces { padding: 0 0 var(--section-y); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: var(--bw) solid var(--border-strong); }
.step {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-right: var(--bw) solid var(--border-strong);
  display: flex; flex-direction: column;
}
/* Uitlijning volgt de KOLOM, niet de volgorde: bij 2 kolommen wordt item 3
   ook een eerste-in-rij en moet die net zo strak links staan als item 1.
   Eerste kolom loopt gelijk met de linkerrand van de sectie, laatste kolom
   met de rechterrand; alleen tussenkolommen krijgen ruimte aan beide kanten. */
.step:nth-child(4n+1) { padding-left: 0; }
.step:nth-child(4n)   { padding-right: 0; border-right: none; }

.step .sn {
  font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: .8;
  color: var(--accent-display);
}
.step h3 { font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; margin: var(--sp-3) 0 0; color: var(--text-strong); }
.step p { font-size: var(--fs-body); line-height: var(--lh-body); margin: var(--sp-2) 0 0; color: var(--text-body); }

/* over-band */
.band { background: var(--surface-inverse); color: var(--text-on-dark); padding: var(--section-y) 0; }
/* Drie kolommen: verhaal · staat van dienst · portret. De chips zijn naar
   links opgeschoven zodat de foto rechts een eigen kolom krijgt. */
.band-grid { display: grid; grid-template-columns: 1fr .72fr .52fr; gap: var(--sp-7); align-items: center; }
.band-portret { margin: 0; }
.band-portret img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: var(--bw) solid var(--ht-hair-light);
}
.band-cta { margin-top: var(--sp-5); }
.band blockquote {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .98;
  font-size: var(--fs-display-m); margin: var(--sp-4) 0 0; max-width: 16ch; letter-spacing: var(--ls-display);
}
.band .who { font-family: var(--font-ui); font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; margin-top: var(--sp-4); color: var(--text-on-dark-muted); }
.band-body { font-size: var(--fs-body); line-height: 1.7; margin: var(--sp-5) 0 0; max-width: 60ch; color: var(--text-on-dark-muted); }
/* visueel verborgen kop: houdt de documentstructuur heel zonder het ontwerp te raken */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.facts .ft { display: block; font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-on-dark-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip {
  font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3); border: var(--bw-hair) solid var(--ht-hair-light); color: var(--text-on-dark);
}
.fact-line { font-size: var(--fs-meta); line-height: 1.7; margin: var(--sp-5) 0 0; color: var(--text-on-dark-muted); }

/* lab / game */
.lab-band { padding: var(--section-y) 0; background: var(--surface-inverse); }
.lab-band .sec-head { align-items: center; }
.lab-band .sec-title { color: var(--surface-raised); }
.lab-band .sec-title em { color: var(--accent-on-dark); }
.lab-band .sec-lead { color: var(--text-on-dark-muted); }
.lab-cta { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; max-width: 40ch; }
.console {
  background: var(--surface-raised); border: var(--bw) solid var(--ht-hair-light); padding: var(--sp-4) var(--sp-3) var(--sp-2);
  max-width: 952px; margin: 0 auto;
}
.console iframe { display: block; width: 100%; height: min(56vw, 400px); border: 0; }
.console .hint {
  font-size: var(--fs-meta); color: var(--text-muted); margin: var(--sp-2) 0 var(--sp-1); text-align: center;
}

/* contact */
.intake { padding: var(--section-y) 0; }
.intake-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
.intake-lead { max-width: 42ch; font-size: var(--fs-lead); line-height: var(--lh-body); margin-top: var(--sp-5); }
.mailline { font-size: var(--fs-body); line-height: 1.8; margin-top: var(--sp-5); }
/* De streep hoort strak onder de tekst. Het raakvlak van 44px komt daarom van
   een pseudo-element en niet van een min-height op de link zelf: die zette de
   border-bottom onderaan een 44px hoog vak, dus ~14px onder de tekst, en dan
   leest het als een losse streep in plaats van als onderstreping. */
.mailline a {
  position: relative; color: var(--accent-text); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: var(--bw-hair); text-underline-offset: 4px;
}
.mailline a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--tap); transform: translateY(-50%);
}
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--text-muted);
}
.field label .opt { font-weight: 400; letter-spacing: .04em; text-transform: none; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--fs-body); /* 16px: anders zoomt iOS Safari in bij focus */
  color: var(--text-strong); background: var(--surface-raised);
  padding: var(--sp-3) var(--sp-4); border: var(--bw-hair) solid var(--border-hair); border-radius: 0; outline: none;
  min-height: var(--tap);
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); width: 100%;
}
.field textarea { line-height: var(--lh-body); resize: vertical; min-height: 110px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ht-hair-strong); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 1; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
/* stond als inline style op de knop; hoort hier, op de schaal */
.form .btn[type="submit"] { margin-top: var(--sp-1); }
.form-note { font-size: var(--fs-body); line-height: var(--lh-body); margin: var(--sp-1) 0 0; color: var(--text-body); display: none; }
.form-note.show { display: block; }
.form-note strong { color: var(--accent-text); }
.form-note.error strong { color: #A3231A; }
.privacy-note { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-muted); margin: var(--sp-1) 0 0; }
.privacy-note a { color: var(--accent-text); border-bottom: 1px solid currentColor; }

/* footer */
footer {
  background: var(--surface-inverse); color: var(--text-on-dark);
  border-top: 1px solid var(--ht-hair-light); padding: var(--sp-7) 0;
}
.fgrid { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-7); flex-wrap: wrap; }
.fbrand { max-width: 34ch; }
.fbrand .mark { margin-bottom: var(--sp-3); }
.fbrand p { font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--text-on-dark-muted); margin: var(--sp-1) 0 0; }
.fbrand .mark img { height: 26px; }
.fcol { display: flex; flex-direction: column; }
.fcol .ft {
  font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: var(--sp-2);
}
/* 44px hoge raakvlakken, ook op mobiel */
.fcol a, .fcol .fnote {
  display: flex; align-items: center; min-height: var(--tap);
  font-size: var(--fs-meta); color: var(--text-on-dark);
}
.fcol a:hover { color: var(--accent-on-dark); }
.fcol .fnote { color: var(--text-on-dark-muted); }
.fmeta {
  display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--ht-hair-light); font-family: var(--font-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-on-dark-muted); flex-wrap: wrap; gap: var(--sp-3);
}
/* zelfde constructie als .mailline a: streep tegen de tekst aan, raakvlak los */
.fmeta a {
  position: relative;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--ht-hair-light);
}
.fmeta a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--tap); transform: translateY(-50%);
}
.fmeta a:hover { color: var(--accent-on-dark); }

/* visie-pagina */
.visie-hero { padding: var(--sp-9) 0 var(--sp-8); }
/* De introtekst houdt dezelfde maat als op de homepage (46ch via .hero-sub).
   Stond hier op 60ch: zelfde component, twee maten, en 60ch is aan de lange
   kant voor 18px introtekst. */

/* De letterkolom stond op .32fr = 343px terwijl de letter zelf ~120px breed
   is: bijna 270px dood gat tussen de letter en de tekst waar hij bij hoort.
   Nu is de kolom --rail breed en de letter even groot, zodat de drie banden
   onderling uitlijnen. Bewust geen `auto`: dan krijgt elke letter zijn eigen
   kolombreedte en staan G, E en K niet meer op één lijn. */
.pillar { padding: var(--section-y) 0; }
.pillar-grid { display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--sp-6); align-items: start; }
.pillar .l { font-family: var(--font-display); font-weight: 400; font-size: var(--rail); line-height: .8; }
.pillar-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(32px, 4vw, 48px); line-height: .95; margin: 0 0 var(--sp-4); letter-spacing: var(--ls-display);
}
.pillar p { font-size: var(--fs-body); line-height: 1.7; margin: 0 0 var(--sp-3); max-width: 66ch; }
.pillar-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pillar-list li { font-size: var(--fs-body); line-height: var(--lh-meta); padding-left: var(--sp-5); position: relative; }
.pillar-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--accent-display); }
.pillar.g { background: var(--ht-navy); color: #fff; }
.pillar.g .l { color: var(--accent-on-dark); }
.pillar.g p { color: var(--text-on-dark-muted); }
.pillar.g .pillar-list li::before { background: var(--accent-on-dark); }
.pillar.e { background: var(--accent); color: var(--ht-navy); }
.pillar.e .l { color: #fff; }
.pillar.e .pillar-list li::before { background: var(--ht-navy); }
.pillar.k { background: var(--surface-raised); color: var(--ht-navy); }
.pillar.k .l { color: var(--accent-display); }

.visie-diensten { padding: var(--section-y) 0; }
/* Eén kaart per rij in plaats van drie naast elkaar, met nummer en kop links en
   de tekst rechts — hetzelfde ritme als de pijlers hierboven, via dezelfde
   --rail. Drie kolommen gaven een tekstbreedte van ~336px, ongeveer 40 tekens,
   en dat is te smal voor twee alinea's per kaart: de tekst wordt rivierig en
   breekt op rare plekken. Twee kolommen was geen optie, want dan blijft de
   derde kaart alleen achter in een halve rij. De kaarten op de homepage hebben
   één korte alinea en blijven wél drie naast elkaar. */
.dienst-deep { display: grid; grid-template-columns: 1fr; gap: 0; border: var(--bw) solid var(--border-strong); }
.ddeep {
  padding: var(--sp-6); border-bottom: var(--bw) solid var(--border-strong); background: var(--surface-raised);
  display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--sp-4) var(--sp-6); align-items: start;
}
.ddeep:last-child { border-bottom: none; }
.ddeep-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.ddeep-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.ddeep .idx { font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--ls-caps); color: var(--accent-text); }
.ddeep h3 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-display-s); line-height: .95; margin: 0; color: var(--text-strong);
}
.ddeep p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; max-width: 66ch; color: var(--text-body); }

.visie-cta { background: var(--surface-inverse); color: var(--text-on-dark); padding: var(--section-y) 0; }
.visie-cta .sec-title { color: var(--surface-raised); }
.visie-cta .sec-title em { color: var(--accent-on-dark); }
.visie-cta-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-7); align-items: center; }
.visie-cta-side { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.visie-cta .sec-lead { color: var(--text-on-dark-muted); }

/* knoppen naar de visie-pagina op de homepage */
.sec-cta { margin-top: var(--sp-6); display: flex; }

/* fotogalerij */
.galerij { padding: 0 0 var(--section-y); }
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.gal { margin: 0; overflow: hidden; border: var(--bw-hair) solid var(--border-hair); background: var(--surface-raised); }
.gal.wide { grid-column: span 2; }
.gal img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 860px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .gal.wide { grid-column: span 2; }
}
@media (max-width: 520px) {
  .gal-grid { grid-template-columns: 1fr; }
  .gal.wide { grid-column: span 1; }
}

/* eenvoudige tekstpagina (privacy) */
.prose-page { padding: var(--sp-9) 0 var(--section-y); }
.prose { max-width: 68ch; }
.prose h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-display-s); line-height: .95; margin: var(--sp-7) 0 var(--sp-3);
  color: var(--text-strong); letter-spacing: var(--ls-display);
}
.prose p, .prose li { font-size: var(--fs-body); line-height: 1.7; color: var(--text-body); }
.prose p { margin: 0 0 var(--sp-3); }
.prose ul { margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.prose li { padding-left: var(--sp-5); position: relative; margin-bottom: var(--sp-2); }
.prose li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--accent-display); }
.prose a { color: var(--accent-text); border-bottom: var(--bw-hair) solid currentColor; font-weight: 600; }
.prose .updated { font-size: var(--fs-meta); color: var(--text-muted); margin-bottom: var(--sp-6); }

/* scroll reveal: alleen actief met JS, uit bij prefers-reduced-motion.
   ease-out voor zowel binnenkomen als verdwijnen. */
.js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition-property: opacity, transform;
  transition-duration: var(--dur-enter);
  transition-timing-function: var(--ease-out);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* Hero-entree: eenmalige, gefaseerde sequentie bij het laden. Bewust met
   keyframes en niet via de IntersectionObserver: de hero staat boven de
   vouw en mag niet van JS afhangen om zichtbaar te wórden. `both` houdt de
   beginstaat vast tijdens de vertraging.

   Zonder blur. Die stond hier wél, maar hij animeert `filter`, en dat is
   paint per frame op de grootste tekst van de pagina — precies de kop waar
   met `size-adjust` in tokens.css juist alle moeite is gedaan om hem stabiel
   te laten laden. Opacity plus verschuiving doet hetzelfde werk, gratis. */
@keyframes enter-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.js [data-enter-stagger] > * { animation: enter-up var(--dur-enter) var(--ease-out) both; }
.js [data-enter-stagger] > *:nth-child(2) { animation-delay: .07s; }
.js [data-enter-stagger] > *:nth-child(3) { animation-delay: .14s; }
.js [data-enter-stagger] > *:nth-child(4) { animation-delay: .21s; }

/* Gespreide entree voor blokken ónder de vouw: per semantisch onderdeel met
   70ms ertussen, zodat de volgorde de hiërarchie vertelt. Bewust alleen
   voor eenmalige entrees, nooit voor herhaalde interacties als hover.
   Was 550ms met 100ms ertussen: dan komt het vierde blok pas 850ms na de
   trigger binnen en leest de pagina als traag in plaats van als rustig.
   Ook hier geen blur meer: op sectiebrede blokken (drie tegels, vier stappen)
   is dat het duurste wat er per frame gebeurt, en op 4px zie je het amper.

   LET OP bij het aanpassen van deze regel: transition-property, -duration en
   -timing-function zijn per element één lijst, en de meest specifieke regel
   wint die lijst in zijn geheel. Deze selector (.js + attribuut = drie klassen)
   is specifieker dan de hover-regels bovenin het bestand, dus die verloren hier
   stilzwijgend: de schaal van de GEK-tegels en de kleuromslag van de
   dienstenkaarten stonden niet eens in de lijst en sprongen dus zonder overgang.
   Daarom staan de hover-eigenschappen hieronder mee in dezelfde lijst. */
.js [data-reveal-stagger] > * {
  opacity: 0; transform: translateY(16px);
  transition-property: opacity, transform, scale, background-color, color, box-shadow;
  transition-duration:
    var(--dur-hover), var(--dur-enter), var(--dur-hover),
    var(--dur-hover), var(--dur-hover), var(--dur-hover);
  transition-timing-function: var(--ease-out);
}
.js [data-reveal-stagger].in > * { opacity: 1; transform: none; }
.js [data-reveal-stagger].in > *:nth-child(2) { transition-delay: .07s; }
.js [data-reveal-stagger].in > *:nth-child(3) { transition-delay: .14s; }
.js [data-reveal-stagger].in > *:nth-child(4) { transition-delay: .21s; }

/* De GEK-tegels zijn de kern van het verhaal en mogen daarom nadrukkelijker
   binnenkomen dan de rest: ze poppen op vanuit iets te klein, met een lichte
   overshoot in de easing. Iets langer uit elkaar (90ms) zodat je G, E en K
   los van elkaar leest. */
.js .vgrid[data-reveal-stagger] > * {
  transform: translateY(26px) scale(.9);
  /* zelfde volgorde als de transition-property hierboven; alleen `transform`
     (de entree) krijgt de overshoot, de hover-eigenschappen blijven kort */
  transition-duration:
    var(--dur-hover), .46s, var(--dur-hover),
    var(--dur-hover), var(--dur-hover), var(--dur-hover);
  transition-timing-function:
    var(--ease-out), cubic-bezier(.22, 1.2, .36, 1), var(--ease-out),
    var(--ease-out), var(--ease-out), var(--ease-out);
}
/* Deze reset MOET er expliciet staan: de algemene `.in`-regel hierboven heeft
   precies dezelfde specificiteit als de regel hierboven én staat eerder in het
   bestand, dus zonder deze regel blijven de tegels 26px te laag hangen. */
.js .vgrid[data-reveal-stagger].in > * { transform: none; }
.js .vgrid[data-reveal-stagger].in > *:nth-child(2) { transition-delay: .09s; }
.js .vgrid[data-reveal-stagger].in > *:nth-child(3) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal-stagger] > *,
  .js [data-reveal-stagger].in > *,
  .js [data-enter-stagger] > * {
    opacity: 1; transform: none; filter: none;
    transition: none; transition-delay: 0s;
    animation: none;
  }
  .js .vgrid[data-reveal-stagger] > * { transform: none; }
  /* de statische signalen (kleur, rand) blijven staan, alleen de beweging gaat eruit */
  .btn, .site-nav a, .field input, .field select, .field textarea,
  .tbtn, .swatch { transition: none; }
  .btn:active, .tbtn:active, .swatch:active, .menu-btn:active { scale: 1; }
  /* hover mag zijn kleuromslag houden, maar niet meer schalen of vervagen */
  .tile, .tile .l, .tile::after, .pcard { transition: none; }
  .vgrid .tile:hover,
  .vgrid:has(.tile:hover) .tile,
  .vgrid:has(.tile:hover) .tile:hover { scale: 1; opacity: 1; }
  .vgrid:has(.tile:hover) .tile:hover::after { opacity: 0; }
}

@media (max-width: 1080px) {
  /* te smal voor drie kolommen: het verhaal pakt de volle breedte, daaronder
     staan de staat van dienst en het portret naast elkaar */
  .band-grid { grid-template-columns: 1fr .55fr; gap: var(--sp-6) var(--sp-7); align-items: start; }
  .band-grid > *:first-child { grid-column: 1 / -1; }

  .steps { grid-template-columns: repeat(2, 1fr); }
  /* kolomregels opnieuw bepalen voor twee kolommen: 1 en 3 links, 2 en 4 rechts */
  .step:nth-child(2n+1) { padding-left: 0; padding-right: var(--sp-5); }
  .step:nth-child(2n)   { padding-right: 0; padding-left: var(--sp-5); border-right: none; }
  .step:nth-child(2n+1) { border-right: var(--bw) solid var(--border-strong); }
  .step:nth-child(-n+2) { border-bottom: var(--bw) solid var(--border-strong); }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* één kolom: het bord mag breed, maar niet torenhoog worden */
  .pitch { max-height: 420px; margin: 0 auto; }
  .intake-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .band-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .band-portret { max-width: 320px; }
}

@media (max-width: 860px) {
  /* Uitklapmenu via visibility/opacity in plaats van display, zodat het
     open- en dichtgaan een onderbreekbare transitie is in plaats van een
     harde sprong. visibility houdt het dicht ook buiten de tabvolgorde. */
  .site-nav {
    display: flex; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--surface-inverse);
    border-top: 1px solid var(--ht-hair-light); padding: var(--sp-2) var(--gutter) var(--sp-4);
    visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out),
                visibility 0s linear var(--dur-hover);
  }
  .site-nav.open {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out),
                visibility 0s;
  }
  .site-nav a { min-height: var(--tap); padding: var(--sp-3) 0; }
  /* in het uitklapmenu staat de taalwissel onderaan, met een streep ervoor
     zodat hij niet als zesde menu-item leest */
  .site-nav .lang {
    margin-top: var(--sp-2); padding-top: var(--sp-2);
    border-top: 1px solid var(--ht-hair-light);
  }
  .menu-btn { display: inline-flex; }

  .vgrid { flex-direction: column; }
  .tile { min-height: 0; }
  .cards { grid-template-columns: 1fr; }
  .pcard { border-right: none; border-bottom: var(--bw) solid var(--border-strong); }
  .pcard:last-child { border-bottom: none; }

  /* --rail zakt naar 96px in tokens.css; hier vallen de kolommen zelf weg */
  .pillar-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .ddeep { grid-template-columns: 1fr; gap: var(--sp-3); }
  .visie-cta-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

@media (max-width: 560px) {
  .mark img { height: 24px; }
  /* de primaire CTA blijft staan op mobiel, alleen compacter */
  .hbar .btn.primary { padding: 10px var(--sp-3); font-size: var(--fs-label); letter-spacing: .06em; }
  .hright { gap: var(--sp-2); }
  .hero { padding: var(--sp-7) 0 var(--sp-6); }
  /* Expliciet, ook al staan de waarden gelijk aan .hero hierboven: .visie-hero
     heeft dezelfde specificiteit en staat eerder in het bestand, dus zijn eigen
     onderpadding verdween hier stilzwijgend. Dat las als een bug wachtend om te
     gebeuren zodra iemand .visie-hero aanpast. */
  .visie-hero { padding: var(--sp-7) 0 var(--sp-6); }
  .pitch { max-height: 300px; }
  .frow { grid-template-columns: 1fr; }
  /* één kolom: alles vlak links, scheidingslijnen worden horizontaal */
  .steps { grid-template-columns: 1fr; }
  .step, .step:nth-child(2n+1), .step:nth-child(2n) {
    padding-left: 0; padding-right: 0;
    border-right: none; border-bottom: var(--bw) solid var(--border-strong);
  }
  .step:last-child { border-bottom: none; }
  .fgrid { gap: var(--sp-5); }
}

/* zeer smalle toestellen: label van de CTA inkorten */
@media (max-width: 380px) {
  .hbar .btn.primary .long { display: none; }
}