/* =====================================================================
   Van Toorn Tandtechniek - style.css
   Structuur:
   1.  Design tokens (:root)
   2.  Reset & basis
   3.  Layout helpers (.wrap, .section, ...)
   4.  Typografie helpers
   5.  Herbruikbare componenten (knoppen, kaarten, chips, velden)
   6.  Navigatie
   7.  Hero
   8.  Secties (trust, over, specialismen, werkwijze, kwaliteit, cta, nieuws, contact)
   9.  Footer
   10. Motion / scroll-reveal
   11. Responsive
   12. Subpagina's, fotoviewer en snelmenu
   13. Sitemap en 404
   Palet: koel grafiet. Diep zwart, wit, koele grijzen. Geen kleuraccent.
   ===================================================================== */

/* ============================ 1. TOKENS ============================ */
/* Het palet is monochroom: diep zwart, wit en koele grijzen. Contrast doet het
   werk dat eerst een kleur deed. Twee dingen maken het verschil met het warme
   palet van hiervoor, en beide zijn bewust:

   1. De grijzen staan koel (een spoortje blauw, hue ~205). Dezelfde helderheid
      in een warme tint leest als vergeeld papier, in een koele tint als fris.
   2. Er is geen accentkleur meer. Wat accent was (knop, actieve link, iconvlak)
      is nu bijna-zwart op wit of andersom. Dat is de "chique" kant: één toon,
      maximaal contrast, niets dat om aandacht schreeuwt.

   De namen --sage-* en --brass-* zijn historisch. Ze staan in ruim honderd
   regels hieronder en in de klassenaam .ico--brass in de HTML, dus ze blijven.
   Lees --sage-* als "koel grijs" en --brass-* als "grafiet". */
:root {
  /* Koel grijs: van bijna-zwart tot bijna-wit. De donkere vlakken (nav-offcanvas,
     viewer, snelmenu, footer) staan op 950 en 900. */
  --sage-950:#0d1013; --sage-900:#141a1e; --sage-800:#1f262b; --sage-700:#2f383f;
  --sage-600:#48535b; --sage-500:#616d76; --sage-400:#8c98a1; --sage-300:#b4bcc1;
  --sage-200:#d7d9db; --sage-100:#e8eaeb; --sage-50:#f1f2f3;

  /* Grafiet (het accent). Loopt van bijna-zwart naar licht staal, zodat dezelfde
     schaal werkt op wit (600/700 als vlak of tekst) en op zwart (300/400). */
  --brass-700:#1a2126; --brass-600:#28323a; --brass-500:#46535d;
  --brass-400:#93a2ac; --brass-300:#c3ccd3; --brass-100:#ecedef;

  /* Papier & inkt */
  /* De lichte vlakken staan bewust bijna neutraal en niet koel. Een groot
     blauwgrijs vlak leest kil; crisp wit leest fris, en dat is wat de site moet
     uitstralen. De koelte zit in de donkere panelen, de foto's en de middengrijzen,
     niet in de achtergronden. De drie niveaus liggen dicht bij elkaar maar blijven
     onderscheidbaar: dat is genoeg om secties te scheiden. */
  --paper:#f8f9f9;        /* hoofdachtergrond, bijna wit */
  --paper-raised:#ffffff; /* kaarten / verhoogde vlakken */
  --ink:#12171a;          /* koppen */
  --ink-soft:#454f56;     /* bodytekst */
  --ink-mute:#666f76;     /* meta / gedempt */
  --line:#e5e7e8;         /* haarlijnen op licht */
  --line-strong:#d1d4d6;

  /* Merkaccent: exact de brass uit het logo (#9b6d39), plus een lichtere variant
     voor op donkere vlakken.

     Dit is met opzet GEEN vierde kleur in het systeem. Het is een signatuur, en
     er geldt één harde regel voor: het merkaccent verschijnt uitsluitend als
     haarlijn of als klein merkteken, NOOIT als vlak. Geen brass knoppen, geen
     brass iconvlakken, geen brass gloed over een foto. Precies dat maakte de
     vorige versie oudbollig: het brass zat op alle vlakken en werd daardoor het
     thema in plaats van het accent.

     De vuistregel bij twijfel: past het op een haarlijn van 1,5px, dan mag het.
     Vult het een oppervlak, dan is het grafiet.

     Het zit nu op: het streepje van de eyebrow, de onderstreping van de actieve
     navlink, de hoverlijn op de trust-strip, de voortgangsbalk van de heroslider,
     de marge-lijn van de mobiele hero, de actieve regel in het mobiele menu, de
     hoverstreep onder een tekstlink en de tekstselectie. Samen genoeg om het logo
     gezelschap te houden, te weinig om de site bruin te maken.

     Twee gevulde uitzonderingen, allebei zwevende chrome: 'Bel direct' en de
     scroll-to-top. Zie --merk-vlak. */
  --merk:#9b6d39;
  --merk-licht:#c49a63;   /* op donker: 7,4:1 op --sage-950 */
  /* De gevulde variant, voor de twee knoppen die hem delen ('Bel direct' en de
     scroll-to-top). Bewust een tint dieper dan de logotint: witte tekst haalt op
     #9b6d39 precies 4,53:1, op de grens van AA. Deze zit op 5,5:1. */
  --merk-vlak:#8b6032; --merk-vlak-hover:#7a5228;

  /* Focusring. Bewust een middentoon en niet het accent zelf: het accent is nu
     bijna-zwart en zou op de donkere panelen (offcanvas, viewer) onzichtbaar
     zijn. Deze haalt 4,2:1 op wit en 4,5:1 op --sage-950, dus overal boven 3:1. */
  --focus:#6f7d88;

  /* Op donker */
  --on-dark:#eef1f3;
  --on-dark-dim:#b2bcc2;
  --on-dark-line:rgba(255,255,255,.14);

  /* Radius (systeem: controls 10px, kaarten 18px, grote media 24px) */
  --r-ctl:10px; --r-card:18px; --r-lg:24px; --r-pill:999px;

  /* Schaduw (koel getint zoals de achtergrond, nooit puur zwart) */
  --shadow-sm:0 1px 2px rgba(16,22,28,.06), 0 1px 3px rgba(16,22,28,.05);
  --shadow:0 10px 30px -12px rgba(16,22,28,.18), 0 4px 10px -6px rgba(16,22,28,.10);
  --shadow-lg:0 30px 70px -24px rgba(16,22,28,.28), 0 10px 24px -14px rgba(16,22,28,.16);

  /* Ritme */
  --wrap:1280px;
  --pad:clamp(1.25rem, 5vw, 2rem);
  --section-y:clamp(4rem, 9vw, 7.5rem);
  --nav-h:72px;
  --topbar-h:40px;

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.55s;

  /* Fonts */
  --font-display:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-text:"Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ============================ 2. RESET ============================ */
*,*::before,*::after{ box-sizing:border-box; }
/* Elke eigen display-regel (display:flex op een knop) wint van de UA-regel
   [hidden]{display:none}. Zonder deze regel doet het hidden-attribuut niets. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-text);
  color:var(--ink-soft);
  background:var(--paper);
  font-size:1.0625rem;         /* 17px basis - prettig leesbaar */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }

/* ---- Fotografie: volledig in kleur ----
   De site is monochroom (zwart, wit, koele grijzen), maar de FOTO'S staan bewust
   in volle kleur. Dat is een expliciete klantkeuze (Conny, juli 2026): het koele
   palet voor de vlakken beviel, maar de foto's mochten hun kleur houden zoals in
   de eerste opzet. Daarom staat hier geen globale ontzadiging meer.

   Het pakt bovendien goed uit: op een verder rustige, kleurloze site is het beeld
   het enige met kleur, en dus vanzelf waar het oog heen gaat. Voor het lab is dat
   precies goed, want kleurechtheid (de kleur en translucentie van een kroon) is de
   kernbelofte.

   Twee dingen om te weten als je hier ooit toch weer wilt ontzadigen:
   1. `filter` is NIET cumulatief over regels heen. De hero-slides, de
      page-hero-achtergrond en de 404-foto hebben een eigen filter en overschrijven
      een globale `img`-regel dus volledig; die moet je apart meenemen.
   2. Verworpen recept: sepia() + hue-rotate() om er een koele zweem in te forceren.
      Dat draait de echte kleuren om in plaats van ze te dempen (een groene
      achtergrond werd paars, de blauwe freesfoto bruin). Een kleurzweem hoort uit
      de foto te komen, niet uit een hoekverdraaiing. */
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,textarea,select,button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
/* De browser geeft <figure> standaard 'margin: 1em 40px' en <dd> een
   'margin-inline-start: 40px'. Zonder deze regels is elke .frame op de site 80px
   smaller dan bedoeld en staat elke .deflist__desc 40px ingesprongen. */
figure{ margin:0; }
dl,dd{ margin:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
/* Tekstselectie in het merkbrass, dekkend en met witte tekst. Bewust dekkend en
   niet transparant: een half-doorzichtige selectie met donkere tekst werd op de
   hero's en de foto-CTA's onleesbaar (donkere tekst op een donker beeld). Een
   dekkend brass vlak met wit werkt op zowel licht als donker. #8b6032 haalt met
   wit 5,5:1, dus overal boven AA. */
::selection{ background:var(--merk-vlak); color:#fff; }

/* ============================ 3. LAYOUT ============================ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--wide{ max-width:1320px; }
.section{ padding-block:var(--section-y); }
.section[id]{ scroll-margin-top:calc(var(--topbar-h) + var(--nav-h) + 1.5rem); }
.spec[id]{ scroll-margin-top:calc(var(--topbar-h) + var(--nav-h) + 4rem); }   /* stopt iets eerder: kaart landt met lucht erboven */
.stack > * + *{ margin-top:1.1rem; }

/* Sectiekop (herbruikbaar) */
.sec-head{ max-width:60ch; }
.sec-head--center{ margin-inline:auto; text-align:center; }

/* ============================ 4. TYPOGRAFIE ============================ */
.display{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.06;
}
h1.display{ font-size:clamp(2.7rem, 6.2vw, 4.6rem); line-height:1.02; letter-spacing:-.03em; }
h2.display{ font-size:clamp(1.6rem, 1rem + 3.125vw, 3.05rem); letter-spacing:-.026em; line-height:1.08; }
h3.display{ font-size:clamp(1.2rem, 2vw, 1.45rem); letter-spacing:-.015em; line-height:1.2; }
.lead{ font-size:clamp(1.15rem, 1.1rem + 0.25vw, 1.3rem); color:var(--ink-soft); line-height:1.6; }
.prose{ max-width:64ch; }
.prose p + p{ margin-top:1rem; }

/* Juridische leespagina (disclaimer & privacy): een rustige leeskolom met
   duidelijke koppen. h2's krijgen een haarlijn erboven als afscheiding. */
.legal{ max-width:70ch; }
.legal h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.45rem, 3vw, 2rem); color:var(--ink); letter-spacing:-.015em; margin:0;
}
.legal h2:not(:first-child){ margin-top:3.2rem; padding-top:2.6rem; border-top:1px solid var(--line); }
.legal h3{ font-family:var(--font-display); font-weight:600; font-size:1.14rem; color:var(--ink); margin:2.1rem 0 0; }
/* Een kop met een id is een sprongdoel (bv. #cookies vanuit de cookiebanner);
   de vaste nav mag hem niet afdekken. */
.legal [id]{ scroll-margin-top:calc(var(--topbar-h) + var(--nav-h) + 1.5rem); }
.legal h2 + p, .legal h3 + p{ margin-top:1rem; }
.legal p{ margin:.7rem 0 0; color:var(--ink-soft); line-height:1.75; }
.legal__intro{ font-size:1.06rem; color:var(--ink); }
.legal ul{ margin:.85rem 0 0; padding-left:1.25rem; color:var(--ink-soft); line-height:1.7; }
.legal ul li{ margin:.35rem 0; }
.legal a{ color:var(--brass-700); border-bottom:1px solid rgba(40,50,58,.35);
  transition:border-color .2s var(--ease); overflow-wrap:anywhere; }
.legal a:hover{ border-color:var(--brass-600); }
.legal__terms{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.5rem; max-width:34rem; }
.legal__terms li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.65rem .95rem; background:var(--paper-raised);
  border:1px solid var(--line); border-radius:var(--r-ctl);
}
.legal__terms span{ color:var(--ink-soft); }
.legal__terms b{ color:var(--ink); font-weight:600; white-space:nowrap; }
.muted{ color:var(--ink-mute); }
.balance{ text-wrap:balance; }

/* Eyebrow (spaarzaam gebruikt - max 1 per 3 secties)
   Gedempt grijs en niet het accent: het accent is nu bijna-zwart, en een
   bijna-zwarte eyebrow boven een bijna-zwarte kop geeft geen rangorde meer.
   In een monochroom palet komt die rangorde uit de toon, niet uit de kleur. */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-600);
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--merk); border-radius:2px; }
.eyebrow--light{ color:var(--brass-300); }
.eyebrow--light::before{ background:var(--merk-licht); }

/* Accentwoord in een kop.
   Zonder accentkleur moet het verschil uit de toon komen: op licht een stap
   lichter dan de kop, op donker (zie de hero's hieronder) een stap donkerder
   dan het wit. Beide keren blijft het één kop met twee tonen, en niet een kop
   met een gekleurd woord erin. Een bijna-zwart accentwoord op een bijna-zwarte
   kop zou helemaal niets meer zijn. */
.accent{ color:var(--sage-500); }

/* ============================ 5. COMPONENTEN ============================ */
/* Inline-icoon basis (herbruikt via <use>) */
.svg-i{ width:1.4rem; height:1.4rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* Knoppen */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.85rem 1.4rem; border-radius:var(--r-ctl);
  font-weight:600; font-size:.98rem; line-height:1; white-space:nowrap;
  border:1.5px solid transparent;
  transition:transform .15s var(--ease), background-color .25s var(--ease),
             border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .25s var(--ease); }
.btn:hover svg.arrow{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }

.btn--primary{ background:var(--brass-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--brass-700); box-shadow:var(--shadow); }

/* Dezelfde knop op een donker vlak, omgekeerd: wit vlak, donkere tekst.
   De primaire knop is grafiet, en grafiet op de hero, de CTA-band of het
   404-paneel is grafiet op grafiet. Het contrast moet uit de knop zelf komen,
   niet uit een tweede kleur - dat is precies wat het palet niet meer heeft.
   .btn--ghost-light blijft de secundaire actie ernaast, dus de rangorde klopt. */
.hero__cta .btn--primary,
.cta-band .btn--primary,
.err__actions .btn--primary{ background:#fff; color:var(--ink); }
.hero__cta .btn--primary:hover,
.cta-band .btn--primary:hover,
.err__actions .btn--primary:hover{ background:var(--sage-100); color:var(--ink); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--sage-600); background:#fff; }

/* Ghost op donkere achtergrond */
.btn--ghost-light{ background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.32); }
.btn--ghost-light:hover{ border-color:var(--on-dark); background:rgba(255,255,255,.08); }

.btn--lg{ padding:1rem 1.7rem; font-size:1.02rem; }
.btn--block{ width:100%; }

/* white-space:nowrap houdt het label en de pijl bij elkaar, maar telt ook mee in
   de min-content van het grid-spoor eromheen. Een knoptekst van vier woorden
   duwde een kaart op contact.php daardoor 34px breder dan het scherm (gemeten op
   een knop die er inmiddels niet meer staat). Laat de tekst op een telefoon
   afbreken. line-height:1 moet dan mee, anders plakken de twee regels op elkaar. */
@media (max-width:599px){
  .btn{ white-space:normal; line-height:1.25; }
}

/* Tekstlink met pijl */
.link-arrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; color:var(--brass-700);
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow svg{ width:1.05em; height:1.05em; transition:transform .25s var(--ease); }
.link-arrow:hover{ color:var(--brass-600); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* Zonder pijl staat deze link middenin een lopende zin (over-ons, contact,
   sitemap). Vet en bijna-zwart is daar geen linkteken meer nu de kleur weg is:
   dat leest als nadruk. Een haarlijn eronder wel. De variant mét pijl is een
   op zichzelf staande actie en heeft de streep niet nodig; die zou er dan
   dwars onder de pijl doorlopen. */
.link-arrow:not(:has(svg)){ border-bottom:1px solid var(--line-strong); }
.link-arrow:not(:has(svg)):hover{ border-color:var(--merk); }

/* Kaart (basis) */
.card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
}

/* Media-frame */
.frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.ratio-portrait{ aspect-ratio:4/5; }
.ratio-landscape{ aspect-ratio:16/11; }
.ratio-wide{ aspect-ratio:16/9; }

/* Chip / label */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:var(--r-pill);
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  background:var(--sage-100); color:var(--sage-700);
}

/* Iconhouder */
.ico{
  display:grid; place-items:center; flex:none;
  width:46px; height:46px; border-radius:12px;
  background:var(--sage-100); color:var(--sage-700);
}
.ico svg{ width:22px; height:22px; }
.ico--brass{ background:var(--brass-100); color:var(--brass-700); }

/* Formuliervelden */
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--ink); }
.field input, .field textarea{
  width:100%; padding:.8rem .95rem;
  background:var(--paper-raised);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-ctl);
  color:var(--ink); font-size:1rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--sage-500); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--brass-600);
  box-shadow:0 0 0 3px rgba(40,50,58,.16);
}
.field textarea{ resize:vertical; min-height:120px; }

/* Foutstaat. De rand alleen is geen signaal voor wie geen kleur ziet, dus komt er
   een tekstregel bij (zie sectie 6 in script.js). Het rood is een tint schoner dan
   de oude baksteentint: die leunde tegen het bruin aan dat hier juist weg moest.
   Gemeten: 6,5:1 op wit en 6,1:1 op --paper. */
.field input.is-invalid, .field textarea.is-invalid{ border-color:#b3261e; }
.field input.is-invalid:focus, .field textarea.is-invalid:focus{
  box-shadow:0 0 0 3px rgba(179,38,30,.16);
}
.field__fout{
  margin:.4rem 0 0; font-size:.85rem; font-weight:500; color:#b3261e;
  display:flex; align-items:center; gap:.4rem;
}
.field__fout:empty{ display:none; }

/* Een fout van de server, voor het hele formulier (zie sectie 6 in script.js). */
.form-fout{ margin:1rem 0 0; font-size:.9rem; font-weight:500; color:#b3261e; }
.form-fout:empty{ display:none; }

/* Honeypot tegen spambots: buiten beeld, niet met display:none, want sommige
   bots slaan velden over die zo verborgen zijn. */
.form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Citaatblok.
   Bewust zonder aanhalingstekens en zonder naambordje: dit is de stem van het
   lab zelf op zijn eigen site, dus een attributie zou alleen herhalen wie er aan
   het woord is. Het streepje erboven is hetzelfde teken als bij .eyebrow, en het
   is een van de plekken waar het merkaccent mag staan: een haarlijn, geen vlak. */
.pullquote{
  margin:0; max-width:46rem;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.2rem, .98rem + 1.1vw, 1.8rem);
  line-height:1.34; letter-spacing:-.02em; color:var(--ink);
  text-wrap:balance;
}
.pullquote p{ margin:0; }
.pullquote::before{
  content:""; display:block; width:34px; height:2px; border-radius:2px;
  background:var(--merk); margin-bottom:1.3rem;
}
.pullquote--center{ margin-inline:auto; text-align:center; }
.pullquote--center::before{ margin-inline:auto; }

/* Divider */
.hr{ height:1px; background:var(--line); border:0; }

/* ============================ 6. NAVIGATIE ============================ */
/* Lint-balk boven de nav (contact + social) */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:49;
  height:var(--topbar-h);
  display:flex; align-items:center;
  background:var(--sage-950); color:rgba(255,255,255,.72);
  font-size:.82rem;
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:1.5rem; }
.topbar__left{ display:flex; align-items:center; gap:1.6rem; }
.topbar__left a{ display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.72); transition:color .2s var(--ease); }
.topbar__left a:hover{ color:#fff; }
/* Geen eigen kleur: het icoon erft die van de link eromheen. Zo zijn icoon en
   label één geheel en lichten ze samen op bij hover, in plaats van dat er een
   grijs icoontje naast witte tekst blijft staan. */
.topbar__left .svg-i{ width:15px; height:15px; }
.topbar__right{ display:flex; align-items:center; gap:1rem; }
.topbar__label{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.topbar__social{ display:flex; align-items:center; gap:.35rem; }
.topbar__social a{ display:inline-grid; place-items:center; width:29px; height:29px; border-radius:7px; color:rgba(255,255,255,.72); transition:color .2s var(--ease), background-color .2s var(--ease); }
.topbar__social a:hover{ color:#fff; background:rgba(255,255,255,.12); }
.svg-brand{ width:15px; height:15px; fill:currentColor; display:block; }

.nav{
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
  /* Dekkend wit, niet doorzichtig met een blur. De balk hangt over de hero, en
     een half doorzichtige balk laat de foto er doorheen schemeren: dat gaf een
     vuile grijze band boven elke pagina. Nu is er een schone scheiding tussen
     balk en beeld.
     Geen backdrop-filter meer: achter een dekkende achtergrond blurt die niets
     zichtbaars, maar hij kost wel een extra compositielaag bij elke scroll. Let
     op als je hem terugzet: een element met backdrop-filter wordt een containing
     block voor position:fixed-nakomelingen (zie de valkuilen in CLAUDE.md).
     Bij scrollen verandert de kleur dus niet meer, alleen de haarlijn en de
     schaduw komen op. Dat is genoeg signaal en het scheelt een kleuranimatie. */
  background:#fff;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(16,22,28,.4); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; }
.nav__logo{ display:inline-flex; align-items:center; }
.nav__logo img{ height:46px; width:auto; }
.nav__logo-light{ display:none; }   /* alleen op de doorzichtige mobiele nav, zie sectie 11 */
.nav__links{ display:none; align-items:center; gap:.35rem; }
.nav__link{
  position:relative; padding:.55rem .8rem; border-radius:var(--r-ctl);
  /* Gedempt, niet vol zwart: de actieve link is nu ook bijna-zwart, dus het
     verschil tussen "waar ben ik" en "waar kan ik heen" moet uit de toon komen.
     11:1 op de balk, dus gedempt betekent hier niet slecht leesbaar. */
  font-weight:500; font-size:.95rem; color:var(--sage-700);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.34rem; height:2px;
  background:var(--merk); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--ink); }
.nav__actions{ display:flex; align-items:center; gap:.75rem; }

/* Hamburger */
.nav__toggle{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-ctl); color:var(--ink); }
.nav__toggle:hover{ background:var(--sage-100); }
.nav__toggle svg{ width:26px; height:26px; }
.nav__toggle .icon-close{ display:none; }
.nav.is-open .nav__toggle .icon-open{ display:none; }
.nav.is-open .nav__toggle .icon-close{ display:block; }

/* ---- Mobiel off-canvas paneel ----
   Zelfde taal als de mobiele hero: donker paneel, koele gloed, filmkorrel,
   haarlijnen, Manrope. Het menu voelt als de hero die opengaat, niet als een
   wit dropdown-blok dat er los overheen valt. */
.nav__mobile{
  position:fixed; inset:0; z-index:49;   /* gelijk aan .topbar, maar later in de DOM
                                            dus erboven. Onder de navbalk (50). */
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .5s;
}
.nav__mobile.is-open{ visibility:visible; pointer-events:auto; transition:visibility 0s; }
@media (min-width:992px){ .nav__mobile{ display:none; } }

.m-scrim{
  position:absolute; inset:0;
  background:rgba(10,13,16,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .45s var(--ease);
}
.nav__mobile.is-open .m-scrim{ opacity:1; }

.m-panel{
  position:absolute; inset:0 0 0 auto;
  width:min(100%, 26rem);
  display:flex; flex-direction:column;
  padding:calc(var(--topbar-h) + var(--nav-h) + 1.5rem) var(--pad) 0;
  overflow:hidden;                       /* alleen de linklijst scrollt, zie .m-nav */
  color:var(--on-dark);
  background:
    radial-gradient(115% 50% at 100% 0%, rgba(140,165,190,.16), transparent 60%),
    var(--sage-950);
  border-left:1px solid rgba(255,255,255,.08);
  isolation:isolate;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
}
.m-panel:focus{ outline:none; }   /* krijgt focus bij openen, mag niet oplichten */
.nav__mobile.is-open .m-panel{ transform:none; }
/* Dezelfde filmkorrel als de hero */
.m-panel::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.2; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* De linklijst is het enige dat scrollt. Op een korte telefoon (iPhone SE, of
   Android met de adresbalk in beeld) vielen de social-iconen anders buiten het
   scherm. De contactvoet staat nu vast onderaan. overflow-x:hidden omdat de
   rijen bij het openen vanaf rechts inschuiven. */
.m-nav{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
}
.m-nav > *:last-child{ border-bottom:0; }   /* de voet levert de scheidingslijn */

/* De inschuivende streep is dezelfde beweging als .nav__link en .hero__quick a */
.m-link{
  position:relative;
  display:block; padding:1.05rem 0 1.05rem 1.9rem;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem, 5.8vw, 1.7rem);
  letter-spacing:-.02em; line-height:1.15;
  color:var(--on-dark);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .25s var(--ease);
}
.m-link::before{
  content:""; position:absolute; left:0; top:50%; margin-top:-1px;
  width:1.1rem; height:1.5px; border-radius:2px; background:var(--brass-500);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.m-link:hover, .m-link:focus-visible{ color:var(--brass-300); }
.m-link:hover::before, .m-link:focus-visible::before{ transform:scaleX(1); }
.m-link.is-active{ color:var(--merk-licht); }
.m-link.is-active::before{ transform:scaleX(1); }

/* "Ons werk" is geen pagina, dus een kop met drie links eronder in plaats van
   een accordeon. Minder klikken, en de haarlijn links echoot de hero.
   De kop krijgt bewust GEEN streepje: dat teken betekent hier "je bent
   hier" op .m-link, en twee betekenissen voor hetzelfde teken is verwarrend. */
.m-group{
  display:flex; flex-direction:column;
  padding:1.15rem 0 1.05rem 1.9rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.m-group__label{
  margin-bottom:.6rem;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-400);
}
.m-sublink{
  display:flex; align-items:center; min-height:44px;   /* raakvlak, ook al is de tekst klein */
  padding-left:1.05rem;
  font-size:1.02rem; color:var(--on-dark-dim);
  border-left:1px solid rgba(255,255,255,.14);
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.m-sublink:hover, .m-sublink:focus-visible{ color:var(--on-dark); border-color:var(--brass-400); }
.m-sublink.is-active{ color:var(--merk-licht); border-color:var(--merk-licht); }

.m-foot{
  position:relative; z-index:1;
  flex:none;
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:1.5rem;
  padding-bottom:calc(clamp(1.4rem, 4vh, 2.2rem) + env(safe-area-inset-bottom, 0px));
  display:grid; gap:.95rem; justify-items:start;
}
.m-call{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:#fff;
  transition:color .2s var(--ease);
}
.m-call:hover{ color:var(--brass-300); }
.m-call .svg-i{ width:1.1rem; height:1.1rem; color:var(--brass-400); }
.m-mail{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.98rem; color:var(--on-dark-dim);
  transition:color .2s var(--ease);
}
.m-mail:hover{ color:var(--on-dark); }
.m-mail .svg-i{ width:1.05rem; height:1.05rem; color:var(--brass-400); }
.m-social{ display:flex; gap:.5rem; margin-top:.35rem; }
.m-social a{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-ctl); border:1px solid rgba(255,255,255,.14);
  color:var(--on-dark-dim);
  transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.m-social a:hover{ color:#fff; border-color:var(--brass-400); background:rgba(255,255,255,.12); }
.m-social .svg-brand{ width:17px; height:17px; }

/* De rijen komen mee vanuit dezelfde richting als het paneel, gestaggerd.
   Elke rij krijgt een eigen animation-delay. Deze reeks moet even lang zijn als
   het aantal directe kinderen van .m-nav: nu zes (Home, Over ons, Service, de
   groep Ons werk, Digitale workflow, Contact). Vergeet je een nth-child bij een
   nieuw item, dan erft dat item wel de animatie maar geen delay, en verschijnt
   het meteen op zijn plek terwijl de rest nog inschuift. */
@media (prefers-reduced-motion: no-preference){
  .nav__mobile.is-open .m-nav > *,
  .nav__mobile.is-open .m-foot{ animation:mIn .55s var(--ease) both; }
  .nav__mobile.is-open .m-nav > *:nth-child(1){ animation-delay:.14s; }
  .nav__mobile.is-open .m-nav > *:nth-child(2){ animation-delay:.19s; }
  .nav__mobile.is-open .m-nav > *:nth-child(3){ animation-delay:.24s; }
  .nav__mobile.is-open .m-nav > *:nth-child(4){ animation-delay:.29s; }
  .nav__mobile.is-open .m-nav > *:nth-child(5){ animation-delay:.34s; }
  .nav__mobile.is-open .m-nav > *:nth-child(6){ animation-delay:.39s; }
  .nav__mobile.is-open .m-foot{ animation-delay:.45s; }
}
@keyframes mIn{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:none; } }

/* Lage schermen (iPhone SE, 360x640 Androids): zeven menu-items en de contactvoet
   passen daar niet in de standaardmaat, waardoor de social-iconen buiten beeld
   vielen. Compactere schaal in plaats van de gebruiker laten scrollen in een menu.
   De 44px raakvlakken blijven overeind. */
@media (max-height:740px){
  .m-panel{ padding-top:calc(var(--topbar-h) + var(--nav-h) + .8rem); }
  .m-link{ padding-top:.78rem; padding-bottom:.78rem; font-size:1.32rem; }
  .m-group{ padding-top:.95rem; padding-bottom:.85rem; }
  .m-group__label{ margin-bottom:.5rem; }
  .m-sublink{ font-size:.98rem; }
  .m-foot{ padding-top:1.15rem; gap:.7rem; }
  .m-call{ font-size:1.05rem; }
  .m-mail{ font-size:.9rem; }
}

@media (prefers-reduced-motion: reduce){
  .nav__mobile{ transition:none; }
  .m-panel{ transition:none; }
  .m-scrim{ transition:none; }
}

/* Telefoonknop in nav */
/* Gevulde brass, uitzondering op de regel hierboven bij --merk. De reden: deze
   knop staat pal naast het logo en is de eigen actie van het merk, geen
   pagina-CTA. Daar leest de merkkleur als afkomstig van het logo. De CTA-knoppen
   in de pagina blijven wel grafiet, want die horen bij de tekst eromheen en niet
   bij de balk.
   De scroll-to-top deelt dezelfde tint via --merk-vlak. Dat zijn de enige twee
   gevulde brass vlakken op de site, en ze horen bij elkaar te blijven: het is
   allebei zwevende chrome in dezelfde hoek van het scherm. */
.nav__call{ display:none; background:var(--merk-vlak); }
.nav__call:hover{ background:var(--merk-vlak-hover); }

/* ---- Mega menu "Ons werk" (desktop) ---- */
.nav__item--mega{ display:flex; align-items:center; }
.nav__mega-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.55rem .8rem; border-radius:var(--r-ctl);
  font-weight:500; font-size:.95rem; color:var(--ink); cursor:pointer;
  transition:color .2s var(--ease);
}
.nav__mega-btn:hover, .nav__item--mega.is-open .nav__mega-btn,
.nav__item--mega:focus-within .nav__mega-btn{ color:var(--brass-700); }
.nav__chev{ width:15px; height:15px; transition:transform .3s var(--ease); }
.nav__item--mega:hover .nav__chev,
.nav__item--mega:focus-within .nav__chev,
.nav__item--mega.is-open .nav__chev{ transform:rotate(180deg); }
.nav__mega{
  position:absolute; top:100%; left:50%; z-index:49;
  width:min(800px, calc(100vw - 2.5rem));
  margin-top:8px; padding:1.15rem 1.15rem 1.05rem; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(40,50,58,.05), transparent 130px), var(--paper-raised);
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
  transform:translateX(-50%) translateY(-10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  transition-delay:.12s;   /* sluit-vertraging: paneel blijft heel even staan bij het oversteken van de gap */
}
/* fijne accentlijn bovenaan het paneel, licht staal naar grafiet */
.nav__mega::after{ content:""; position:absolute; left:1.15rem; right:1.15rem; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--brass-400), var(--brass-600), transparent); }
/* Onzichtbare hover-brug die knop en paneel laat aansluiten (voorkomt wegvallen in de gap) */
.nav__mega::before{ content:""; position:absolute; left:-28px; right:-28px; top:-24px; height:26px; }
.nav__item--mega:hover .nav__mega,
.nav__item--mega:focus-within .nav__mega,
.nav__item--mega.is-open .nav__mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  transition-delay:0s;   /* openen is direct, sluiten heeft de vertraging hierboven */
}
/* Kop-rij: eyebrow + tagline links, casus-CTA rechts */
.mega__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.1rem .35rem .95rem; margin-bottom:.95rem; border-bottom:1px solid var(--line); }
.mega__head .mega__kop{ font-family:var(--font-display); font-weight:700; font-size:1.04rem; color:var(--ink); letter-spacing:-.012em; margin:.35rem 0 0; }
.mega__head .eyebrow{ font-size:.68rem; }
.mega__head .link-arrow{ font-size:.86rem; white-space:nowrap; }
/* Kaartenrooster */
.mega__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.mega__card{ position:relative; display:block; padding:.5rem .55rem .75rem; border-radius:var(--r-card);
  border:1px solid transparent;
  transition:background-color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); }
.mega__card:hover{ background:var(--paper); border-color:var(--line); transform:translateY(-3px); box-shadow:var(--shadow); }
.mega__img{ position:relative; display:block; border-radius:12px; overflow:hidden; aspect-ratio:16/10; background:var(--sage-100); }
.mega__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.mega__card:hover .mega__img img{ transform:scale(1.06); }
.mega__title{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-top:.8rem;
  font-family:var(--font-display); font-weight:600; font-size:1.04rem; color:var(--ink); letter-spacing:-.01em; transition:color .2s var(--ease); }
.mega__arrow{ flex:none; width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  background:var(--brass-100); color:var(--brass-700);
  transition:background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease); }
.mega__arrow .svg-i{ width:15px; height:15px; }
.mega__card:hover .mega__title{ color:var(--brass-700); }
.mega__card:hover .mega__arrow{ background:var(--brass-600); color:#fff; transform:translate(2px,-2px); }
.mega__desc{ display:block; margin-top:.35rem; font-size:.85rem; line-height:1.45; color:var(--ink-mute); }


@media (prefers-reduced-motion: reduce){
  .nav__mega{ transform:translateX(-50%); transition:opacity .2s linear, visibility .2s; }
  .nav__item--mega:hover .nav__mega,
  .nav__item--mega:focus-within .nav__mega,
  .nav__item--mega.is-open .nav__mega{ transform:translateX(-50%); }
  .mega__card:hover .mega__img img{ transform:none; }
}

/* ============================ 7. HERO (fullscreen cinematisch, video-ready) ============================
   Volledige achtergrond (nu foto van het lab, later dronebeeld/-video).
   De nav blijft ongewijzigd en zweeft als frosted-bar over de bovenrand. */
.hero{
  position:relative; overflow:hidden;
  min-height:90vh;
  min-height:90svh;              /* svh i.p.v. dvh: geen herlayout als de mobiele adresbalk in-/uitschuift */
  display:flex;
  background:var(--sage-900); color:var(--on-dark);
}
.hero__frame{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* Fijne ingezette haarlijn-kader (redactioneel/premium detail) */
.hero__frame::after{ content:""; position:absolute; inset:clamp(14px,1.7vw,26px); z-index:5; pointer-events:none; border:1px solid rgba(255,255,255,.20); border-radius:4px; }
/* Slides (crossfade via GSAP; eerste slide standaard actief) */
.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 20%;   /* iets naar beneden: koppen komen onder de nav uit */
  filter:saturate(1) contrast(1.04) brightness(.96);
  opacity:0;
  will-change:opacity;                            /* soepele, GPU-versnelde crossfade */
}
.hero__slide.is-active{ opacity:1; }
/* Kleurgrading: donker en koel in de schaduwen links, koel staal in de highlights
   rechts. De laag staat op soft-light, dus een lichte toon licht op en een donkere
   verdiept. Eerst zat er brass in die rechterkant en dat is precies wat de foto's
   bruin maakte; koel staal doet hetzelfde werk (diepte, een cinematische kant)
   maar trekt het beeld naar de frisse kant in plaats van naar sepia. */
.hero__grade{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:soft-light;
  background:
    /* Alleen een donkere hoek linksboven voor diepte en tekstcontrast, de rest
       transparant zodat de foto zijn eigen kleur houdt. Geen kleurwash meer: die
       maakte het beeld te koel. De highlight rechts is neutraal grijs, dus hij
       licht de foto een tikje op zonder er blauw of bruin in te leggen. */
    linear-gradient(118deg, rgba(18,22,26,.55) 0%, rgba(13,17,20,0) 46%, rgba(226,228,230,.22) 100%);
}
/* Scrim: bijna zwart, links donker voor de tekst, diepte onderin */
.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,13,16,.94) 0%, rgba(10,13,16,.7) 30%, rgba(10,13,16,.22) 62%, rgba(10,13,16,.44) 100%),
    linear-gradient(0deg, rgba(10,13,16,.7) 0%, rgba(10,13,16,.08) 46%, transparent 74%);
}
/* Fijne filmkorrel */
.hero__grain{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.hero__inner{
  position:relative; z-index:6; flex:1;
  display:flex; flex-direction:column;
  padding-top:calc(var(--topbar-h) + var(--nav-h) + clamp(1.2rem, 4.5vh, 3.2rem));
  padding-bottom:clamp(3rem, 8vh, 5.5rem);
}

/* Content bovenaan (hoger, richting de nav) */
/* flex:none op beide kinderen: anders krimpen ze als de tekst hoger wordt dan
   de min-height van de hero, en schuift de slidercontrol over de knoppen heen. */
.hero__content{ max-width:44rem; flex:0 0 auto; }
.hero h1{ color:var(--on-dark); font-size:clamp(2.9rem,6.4vw,5.4rem); font-weight:800; line-height:1.0; letter-spacing:-.035em; margin-bottom:1.4rem; }
.hero h1 .accent{ color:var(--brass-300); }
.hero__sub{ font-size:clamp(1.05rem,1.35vw,1.22rem); color:var(--on-dark-dim); line-height:1.62; max-width:34rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; }

/* Onder: slidercontrol linksonder (pijlen + huidige slide + balkjes) */
.hero__control{ display:flex; align-items:center; gap:1.3rem; }
.hero__arrows{ display:flex; gap:.6rem; }
.hero__arrow{
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.42); background:rgba(10,13,16,.28);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .15s var(--ease);
}
.hero__arrow:hover{ border-color:var(--brass-400); background:rgba(255,255,255,.18); }
.hero__arrow:active{ transform:scale(.94); }
.hero__arrow svg{ width:20px; height:20px; }
.hero__ctrl{ display:flex; flex-direction:column; gap:.55rem; }
.hero__ctrl-label{ font-size:.9rem; font-weight:700; color:#fff; letter-spacing:.01em; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.hero__bars{ display:flex; gap:.5rem; }
/* padding + negatieve marge: raakvlak van 44px hoog zonder de layout te verschuiven */
.hero__dot{ background:none; border:0; cursor:pointer; line-height:0; padding:.9rem 0; margin:-.9rem 0; }
.hero__dot-track{ display:block; position:relative; width:34px; height:3px; border-radius:3px; background:rgba(255,255,255,.4); overflow:hidden; transition:width .35s var(--ease); }
.hero__dot-fill{ position:absolute; inset:0 auto 0 0; height:100%; width:0%; background:var(--merk-licht); border-radius:3px; }
.hero__dot.is-active .hero__dot-track{ width:52px; }

/* Onderrij: alleen de control (linksonder).
   margin-top:auto duwt hem naar beneden zolang er ruimte is; padding-top
   garandeert lucht onder de knoppen zodra de tekst de hero uitrekt. */
.hero__bottom{ display:flex; align-items:flex-end; flex:0 0 auto; margin-top:auto; padding-top:clamp(2rem, 6vh, 4rem); }

/* Wit "eiland" rechtsonderin met de snelnavigatie: links afgerond, rechts tegen de rand */
.hero__quick{
  position:absolute; z-index:8;
  right:clamp(28px,3.4vw,52px); bottom:clamp(28px,3.4vw,52px);     /* rust binnen het kaderlijntje */
  display:flex; align-items:center; gap:1.15rem;
  padding:.8rem 1.3rem;
  background:var(--sage-50);
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;                                             /* één radius-systeem, alle hoeken */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),                          /* fijne bovenrand-glans */
    0 20px 45px -26px rgba(16,22,28,.5);                          /* zachte, neutrale schaduw */
}
.hero__quick-arrow{ width:1.05rem; height:1.05rem; color:var(--brass-700); flex:none; }
/* Snelnav-links met een van-links-inschuivende onderstreping */
.hero__quick a{ position:relative; font-size:.95rem; font-weight:600; color:var(--ink); transition:color .2s var(--ease); }
.hero__quick a::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px; border-radius:2px; background:var(--merk); transition:right .3s var(--ease); }
.hero__quick a:hover{ color:var(--brass-700); }
.hero__quick a:hover::after{ right:0; }

/* ---- Globale overlays: scroll-to-top knop + cookiemelding ---- */
/* Onzichtbaar meetpunt: zodra dit voorbij de bovenrand scrolt, verschijnt de knop (~300px) */
.to-top-sentinel{ position:absolute; top:300px; left:0; width:1px; height:1px; pointer-events:none; }
/* Scroll-to-top: grafiet knop met witte pijl, verschijnt rechts zodra je voorbij de hero bent */
.to-top{
  /* Onder het offcanvas-menu (49) en de navbalk (50): een open menu dekt de knop
     af in plaats van andersom. Nog wel boven de pagina-inhoud. */
  position:fixed; z-index:45;
  right:clamp(16px,2.4vw,32px); bottom:clamp(16px,2.4vw,32px);
  width:clamp(46px,3.6vw,54px); height:clamp(46px,3.6vw,54px);
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); border-radius:50%;
  background:var(--merk-vlak); color:#fff;
  box-shadow:var(--shadow);
  cursor:pointer;
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;   /* verborgen bovenaan */
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease);
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--merk-vlak-hover); transform:translateY(-3px); box-shadow:0 16px 34px -12px rgba(16,22,28,.5); }
.to-top:active{ transform:translateY(-1px) scale(.96); }
.to-top:focus-visible{ outline:2px solid var(--brass-300); outline-offset:3px; }
.to-top .svg-i{ width:1.35rem; height:1.35rem; color:#fff; }
@media (prefers-reduced-motion: reduce){
  .to-top{ transform:none; transition:opacity .2s linear; }
  .to-top.is-visible{ transform:none; }
}

/* Cookiemelding: subtiele, gecentreerde balk onderin, in hetzelfde grijstonenthema */
.cookie{
  position:fixed; z-index:70;
  left:0; right:0; margin-inline:auto; bottom:clamp(16px,2.4vw,26px);
  width:min(680px, calc(100vw - 2 * clamp(16px,2.4vw,32px)));
  display:flex; align-items:center; gap:1rem;
  padding:.8rem 1rem .8rem 1.1rem;
  background:var(--paper-raised); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow);
  opacity:0; transform:translateY(16px); visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.cookie.is-in{ opacity:1; transform:none; visibility:visible; pointer-events:auto;
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.cookie.is-out{ opacity:0; transform:translateY(16px); pointer-events:none; }
.cookie__ic{
  flex:none; width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border-radius:11px; background:var(--brass-100); border:1px solid var(--brass-300); color:var(--brass-600);
}
.cookie__ic .svg-i{ width:1.15rem; height:1.15rem; }
.cookie__text{ flex:1; min-width:0; font-size:.9rem; line-height:1.5; color:var(--ink-soft); }
.cookie__more{ color:var(--brass-700); font-weight:600; text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease); }
.cookie__more:hover{ border-color:var(--brass-500); }
.cookie__actions{ flex:none; display:flex; gap:.55rem; }
.cookie__actions .btn{ padding:.62rem 1rem; font-size:.88rem; white-space:nowrap; }

/* Bevestiging: verschijnt in plaats van de tekst en knoppen zodra er gekozen is.
   De check tekent zichzelf met dezelfde keyframes als het contactformulier. */
.cookie.is-confirmed .cookie__ic,
.cookie.is-confirmed .cookie__text,
.cookie.is-confirmed .cookie__actions{ display:none; }
/* Krimpt naar de inhoud, anders blijft de balk 680px breed met veel witruimte
   naast de korte tekst. margin-inline:auto houdt hem gecentreerd, ook op mobiel. */
.cookie.is-confirmed{
  width:fit-content;
  max-width:calc(100vw - 2 * clamp(16px, 2.4vw, 32px));
  margin-inline:auto;
}
.cookie__done{ flex:1; display:none; align-items:center; justify-content:center; gap:.65rem; min-height:2.25rem; }
.cookie.is-confirmed .cookie__done{ display:flex; }
.cookie__badge{
  flex:none; display:grid; place-items:center;
  width:2.25rem; height:2.25rem; border-radius:50%; background:var(--brass-100);
  animation:badge-pop .5s var(--ease) .05s both;
}
.cookie__check{ width:1.5rem; height:1.5rem; overflow:visible; }
.cookie__ring{
  fill:none; stroke:var(--brass-400); stroke-width:3;
  stroke-dasharray:151; stroke-dashoffset:151;
  animation:teken .5s var(--ease) .1s forwards;
}
.cookie__tick{
  fill:none; stroke:var(--brass-700); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34; stroke-dashoffset:34;
  animation:teken .35s var(--ease) .45s forwards;
}
.cookie__done-text{
  font-weight:600; font-size:.92rem; color:var(--ink); line-height:1.4;
  opacity:0; animation:done-in .5s var(--ease) .5s both;
}
@media (prefers-reduced-motion:reduce){
  .cookie__badge, .cookie__ring, .cookie__tick, .cookie__done-text{ animation:none; }
  .cookie__ring, .cookie__tick{ stroke-dashoffset:0; }
  .cookie__done-text{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .cookie{ transform:none; transition:opacity .3s linear, visibility 0s linear .3s; }
  .cookie.is-in{ transform:none; transition:opacity .3s linear; }
  .cookie.is-out{ transform:none; }
}
@media (max-width:680px){
  .cookie{ left:12px; right:12px; margin:0; bottom:12px; width:auto; flex-wrap:wrap; gap:.75rem; }
  .cookie__actions{ width:100%; }
  .cookie__actions .btn{ flex:1; }
}

/* Zachte tekstentree (geen zoom op de foto); 'both' zodat content altijd zichtbaar blijft */
@media (prefers-reduced-motion: no-preference){
  .hero__content > *{ animation:heroIn .8s var(--ease) both; }
  .hero__content > *:nth-child(1){ animation-delay:.1s; }
  .hero__content > *:nth-child(2){ animation-delay:.22s; }
  .hero__content > *:nth-child(3){ animation-delay:.34s; }
}
/* transform-only: content kan nooit onzichtbaar blijven */
@keyframes heroIn{ from{ transform:translateY(18px); } to{ transform:none; } }

/* Mobiele hero-choreografie (zie het blok in sectie 11).
   heroReveal: de foto komt van boven naar onder tevoorschijn.
   heroLine:   de haarlijn stelt scherp als sluitstuk.
   heroPan:    een camera die 6% inzoomt over 18s. Bewust net waarneembaar. */
@keyframes heroReveal{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes heroLine{ from{ opacity:0; transform:scale(1.015); } to{ opacity:1; transform:scale(1); } }
@keyframes heroPan{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce){
  body.is-ready .hero__slides,
  body.is-ready .hero__frame::after{ animation:none; }
}

/* ============================ 8. SECTIES ============================ */

/* 8.1 Trust-strip (differentiators) - zwevend premium paneel */
.trust{ background:var(--sage-50); border-bottom:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem); }
/* Paneel-achtergrond = lijnkleur; 1px gap toont haarlijnen tussen de cellen */
.trust__panel{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow); overflow:hidden;
}
.trust__item{
  position:relative; overflow:hidden;
  background:var(--paper-raised);
  display:flex; gap:1rem; align-items:flex-start; padding:1.6rem 1.7rem;
  transition:background-color .25s var(--ease);
}
/* Accentlijn die bij hover van links inschuift */
.trust__item::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--merk); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.trust__item:hover{ background:#fafafa; }
.trust__item:hover::before{ transform:scaleX(1); }
.trust__item .ico{ width:48px; height:48px; box-shadow:inset 0 0 0 1px rgba(40,50,58,.14); transition:transform .3s var(--ease); }
.trust__item:hover .ico{ transform:translateY(-3px); }
.trust__item h3{ font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--ink); letter-spacing:-.015em; }
.trust__item p{ font-size:.9rem; color:var(--ink-mute); margin-top:.25rem; }

/* 8.2 Split (over ons) - herbruikbaar split-blok */
.split{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
.split__media{ position:relative; --peek:clamp(8px,0.8vw,12px); }
.split__media .frame{ margin:0; position:relative; z-index:1;
  box-shadow:0 20px 44px -26px rgba(16,22,28,.38); }
/* Premium: dunne stalen rand die subtiel achter de foto uitkomt (i.p.v. een vage glow) */
.split__media::before{
  content:""; position:absolute; z-index:0;
  left:calc(-1 * var(--peek)); bottom:calc(-1 * var(--peek)); width:100%; height:100%;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg, var(--brass-400), var(--brass-600));
  box-shadow:0 20px 40px -30px rgba(16,22,28,.35);
}
.split__copy .eyebrow{ margin-bottom:1.1rem; }
.split__badge{
  display:flex; align-items:center; gap:.7rem; margin-top:2rem;
  padding-top:1.5rem; border-top:1px solid var(--line);
  color:var(--ink); font-weight:600;
}
.split__badge .ico{ width:40px; height:40px; }

/* 8.3 Specialismen (redactioneel, genummerd) */
.spec-layout{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3rem); align-items:start; }
.spec-list{ display:grid; gap:1rem; }
.spec{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.3rem;
  padding:1.6rem; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--paper-raised);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.spec:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.spec__num{
  font-family:var(--font-display); font-weight:600; font-size:1.5rem;
  color:var(--brass-600); line-height:1;
  width:2.6rem; height:2.6rem; display:grid; place-items:center;
  border:1.5px solid var(--brass-300); border-radius:12px; background:var(--brass-100);
}
.spec__title{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.spec__title h3{ font-family:var(--font-display); font-weight:600; font-size:1.28rem; color:var(--ink); letter-spacing:-.01em; }
.spec__arrow{ color:var(--sage-400); transition:transform .3s var(--ease), color .3s var(--ease); }
.spec:hover .spec__arrow{ color:var(--brass-600); transform:translateX(4px); }
.spec p{ margin-top:.5rem; color:var(--ink-soft); font-size:.98rem; }
.spec__tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }

/* De hele kaart is klikbaar via de titel-link, uitgerekt over de kaart. De
   accessible naam blijft kort (alleen de titel), de rest is gewone tekst, en er
   is maar een tab-stop per kaart. "Bekijk ..." is nu een visuele span. */
.spec{ cursor:pointer; }
.spec__title a{ text-decoration:none; }
.spec__title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.spec__title a:focus-visible{ outline:none; }
.spec__title a:focus-visible::after{
  outline:2px solid var(--brass-500); outline-offset:3px; border-radius:var(--r-card);
}
.spec:hover .link-arrow{ color:var(--brass-600); }
.spec:hover .link-arrow svg{ transform:translateX(3px); }

/* Op een telefoon is de badge een eigen grid-kolom, waardoor de tekst nog maar
   ~236px overhoudt (zo'n 30 tekens per regel, de norm is 45 tot 75) en er onder
   de badge een lege strook blijft staan. De tussen-div wordt hier display:contents
   zodat titel, tekst en chips zelf grid-items worden: badge naast de titel,
   de rest over de volle breedte. Geen HTML-wijziging nodig. */
@media (max-width:640px){
  .spec{ column-gap:.9rem; row-gap:0; padding:1.35rem 1.25rem; }
  .spec > div{ display:contents; }
  .spec__num{
    grid-column:1; grid-row:1; align-self:center;
    width:2.35rem; height:2.35rem; font-size:1.3rem; border-radius:10px;
  }
  .spec__title{ grid-column:2; grid-row:1; }
  .spec p, .spec__tags{ grid-column:1 / -1; }
}
/* Highlight wanneer een specialisme via de snelnav wordt aangesprongen: grafiet ring die opbloeit en langzaam uitdooft */
@keyframes specFlash{
  0%   { border-color:var(--line);                box-shadow:0 0 0 0 rgba(40,50,58,0),   0 18px 40px -18px rgba(40,50,58,0); }
  22%  { border-color:rgba(40,50,58,.75);       box-shadow:0 0 0 2px rgba(40,50,58,.5), 0 18px 44px -16px rgba(40,50,58,.4); }
  55%  { border-color:rgba(40,50,58,.5);        box-shadow:0 0 0 2px rgba(40,50,58,.28),0 18px 44px -16px rgba(40,50,58,.22); }
  100% { border-color:var(--line);                box-shadow:0 0 0 0 rgba(40,50,58,0),   0 18px 40px -18px rgba(40,50,58,0); }
}
.spec--flash{ animation:specFlash 2s cubic-bezier(.33,1,.68,1) both; }
@media (prefers-reduced-motion: reduce){ .spec--flash{ animation-duration:1.1s; } }

/* 8.4 Werkwijze (lead + checklist grid) */
.work{ background:var(--sage-50); }
.checklist{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
.check{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  padding-bottom:1.1rem; border-bottom:1px solid var(--line);
}
.check:last-child{ border-bottom:0; padding-bottom:0; }
.check__ico{
  flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--brass-100); color:var(--brass-700);
}
.check__ico svg{ width:18px; height:18px; }
.check h3{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink); margin:0; }
/* Zelfde rij zonder omschrijving eronder: dan hoort het icoon naast de tekst te
   staan en niet erboven (align-items:start is er voor de variant mét tekst), en
   de scheidingslijn kan weg. In een tweekoloms raster valt :last-child namelijk
   maar op één cel, waardoor drie van de vier rijen een lijn kregen en de vierde
   niet: dat leest als een fout, niet als een keuze. Een etiket met een icoon
   heeft die lijn ook niet nodig. */
.check--kort{ align-items:center; border-bottom:0; padding-bottom:0; }
.check p{ font-size:.92rem; color:var(--ink-mute); margin-top:.1rem; }
/* Werkwijze: verticale editorial-opzet (kop -> brede foto -> 4 stappen) */
.work__stack{ display:flex; flex-direction:column; gap:clamp(2.2rem,4.5vw,3.4rem); }
.work__head-body{ margin-top:1.3rem; max-width:60ch; }
.work__media{ margin:0; aspect-ratio:16/7; }
.work__media img{ object-position:center 42%; }

/* ---- CAD/CAM freestechniek: premium foto-cluster + tekst ---- */
.mill{ background:var(--paper-raised); border-block:1px solid var(--line); }
.mill__grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.8rem,4vw,2.6rem); }
.mill__lead{ margin-top:1.1rem; max-width:56ch; }
.mill__lead p{ color:var(--ink-soft); font-size:1.02rem; line-height:1.6; }
.mill__lead p + p{ margin-top:1rem; }
/* Foto-cluster */
.mill__media{ display:grid; gap:clamp(.8rem,1.6vw,1.1rem); }
.mill__photo{ margin:0; position:relative; }
.mill__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.mill__photo--main{ aspect-ratio:4/3; }
.mill__details{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,1.6vw,1.1rem); }
.mill__details .mill__photo{ aspect-ratio:4/3; box-shadow:var(--shadow); }
/* USP-lijst */
.mill__list{ display:grid; }
.mill__list li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:center;
  padding:1rem 0; border-top:1px solid var(--line); }
.mill__list li:first-child{ border-top:0; padding-top:0; }
.mill__ico{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--brass-100); color:var(--brass-700); }
.mill__ico svg{ width:18px; height:18px; }
.mill__list p{ color:var(--ink); font-weight:500; font-size:.98rem; line-height:1.4; }
.mill__cta{ margin-top:1.6rem; }
@media (min-width:992px){
  .mill__grid{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas: "media intro" "media usps";
    grid-template-rows:auto 1fr;
    column-gap:clamp(2.5rem,5vw,4.5rem); row-gap:clamp(1.8rem,3vw,2.6rem);
    align-items:start;
  }
  .mill__media{ grid-area:media; }
  .mill__intro{ grid-area:intro; }
  .mill__usps{ grid-area:usps; align-self:end; }
}
@media (min-width:992px){
  .work__head{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2.5rem,4.5vw,4rem); align-items:start; }
  .work__head-body{ margin-top:.5rem; max-width:52ch; }
  /* Variant voor een lijst die de volle breedte van de wrap krijgt in plaats
     van een tekstkolom: drie kolommen zodra daar ruimte voor is. Zo blijft een
     lange opsomming een blok en wordt hij geen smalle strook die de foto
     ernaast platdrukt. Dubbele klasse in de selector, zodat hij de tweekoloms
     regel op 560px verslaat zonder !important. Gap en de smallere varianten
     komen van .checklist zelf. */
  .checklist.checklist--drie{ grid-template-columns:repeat(3,1fr); }
  .work__stack .checklist{ grid-template-columns:repeat(4,1fr); gap:0; }
  .work__stack .check{
    display:flex; flex-direction:column; align-items:flex-start; gap:.85rem;
    padding:0 clamp(1.1rem,1.9vw,2rem); border-bottom:0;
  }
  .work__stack .check:first-child{ padding-left:0; }
  .work__stack .check:not(:first-child){ border-left:1px solid var(--line); }
}

/* 8.5 Kwaliteit (statement + facets + figuur, spiegel van 'over') */
.quality__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
.facets{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:1.8rem; }
.facet{ display:flex; gap:.9rem; align-items:flex-start; }
.facet .ico{ width:40px; height:40px; }
.facet h3{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink); margin:0; }
.facet p{ font-size:.9rem; color:var(--ink-mute); margin-top:.1rem; }

/* 8.6 CTA-band (donker grafiet vlak) */
.cta-band{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 130% at 90% 10%, var(--sage-600), transparent 55%),
    linear-gradient(140deg, var(--sage-900), var(--sage-800));
  color:var(--on-dark);
  border-radius:var(--r-lg);
}
.cta-band__inner{ position:relative; z-index:1; padding:clamp(2.5rem,6vw,4.5rem); text-align:center; max-width:44rem; margin-inline:auto; }
.cta-band h2{ color:var(--on-dark); }
.cta-band p{ color:var(--on-dark-dim); margin-top:1rem; }
.cta-band .btn{ margin-top:2rem; }
.cta-band::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 80% at 10% 90%, rgba(140,165,190,.16), transparent 60%);
}

/* Variant met een foto als achtergrond. Een pagina zet de foto via --cta-img.
   De foto ligt onderop, met een stevige donkere waas erover (de eerste laag in
   de stapel ligt bovenaan) zodat de witte tekst en de witte knop ruim contrast
   houden: net als bij de page-hero's en de 404. De waas is het donkerst in het
   midden, waar de gecentreerde tekst staat. Geen kleurgrade, alleen verdonkeren,
   dus de foto houdt zijn eigen kleur. */
.cta-band--foto{
  background:
    linear-gradient(180deg, rgba(11,14,17,.72), rgba(11,14,17,.62) 45%, rgba(11,14,17,.80)),
    radial-gradient(120% 120% at 50% 45%, rgba(11,14,17,.30), rgba(11,14,17,.72) 78%),
    var(--cta-img) center var(--cta-pos, 50%) / cover no-repeat,
    var(--sage-900);
}
.cta-band--foto::after{ opacity:.35; }   /* de stalen gloed subtieler op beeld */

/* 8.7 Materialen & systemen (redactionele definitielijst, hergebruikt .deflist)
   Bewust geen kaartraster: de homepage heeft er al drie, en drie identieke kaarten
   naast elkaar was precies wat de vorige nieuwssectie zo sjabloonachtig maakte. */
.brands .deflist__row{ padding-block:clamp(1.3rem, 2.5vw, 1.9rem); border-top-color:var(--line-strong); }
.brands .deflist__term a{ transition:color .2s var(--ease); }
.brands .deflist__term a:hover{ color:var(--brass-700); }
.brands .deflist__desc p{ max-width:56ch; font-size:.95rem; color:var(--ink-soft); }
.brands__tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.brands__tags .chip{ background:var(--paper-raised); border:1px solid var(--line-strong); color:var(--ink); }

/* Vanaf 992px zou een rij van 'term | omschrijving' de rechterhelft van het grid
   leeg laten, want de omschrijving stopt bij een leesbare regellengte. De <dd>
   wordt hier display:contents, zodat de omschrijving en de merken elk hun eigen
   kolom krijgen en de volle breedte inhoud draagt. */
@media (min-width:992px){
  .brands .deflist__row{
    grid-template-columns:13rem minmax(0,1fr) minmax(0,1fr);
    gap:0 clamp(2rem, 3.2vw, 3.5rem);
    align-items:start;
  }
  .brands .deflist__desc{ display:contents; }
  .brands .deflist__desc p{ max-width:44ch; }
  .brands__tags{ margin-top:0; align-content:flex-start; }
}

.brands__note{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  margin-top:clamp(2rem, 4vw, 2.8rem);
  padding:clamp(1.3rem, 2.6vw, 1.8rem);
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--r-card);
}
.brands__note .ico{ width:48px; height:48px; }
.brands__note h3{ font-family:var(--font-display); font-weight:600; font-size:1.12rem; color:var(--ink); }
.brands__note p{ margin-top:.4rem; font-size:.95rem; color:var(--ink-mute); max-width:60ch; }
.brands__note .link-arrow{ grid-column:2; margin-top:1rem; font-size:.92rem; }
@media (min-width:900px){
  .brands__note{ grid-template-columns:auto 1fr auto; align-items:center; gap:1.3rem; }
  .brands__note .link-arrow{ grid-column:3; margin-top:0; white-space:nowrap; }
}
/* Op de telefoon dezelfde indeling als een .spec-kaart: anders staat de badge in
   een eigen kolom en blijft eronder een lege strook links. De body wordt
   display:contents zodat titel, tekst en link zelf grid-items worden: badge naast
   de titel, de rest over de volle breedte. */
@media (max-width:640px){
  .brands__note{ column-gap:.9rem; row-gap:0; align-items:start; }
  .brands__note-body{ display:contents; }
  .brands__note .ico{ grid-column:1; grid-row:1; align-self:center; }
  .brands__note h3{ grid-column:2; grid-row:1; align-self:center; }
  .brands__note p{ grid-column:1 / -1; margin-top:.6rem; }
  .brands__note .link-arrow{ grid-column:1 / -1; }
}

/* 8.7b Team - portretkaarten met naam en functie op de foto.

   De scrim stond eerst als ::after op de KAART, met vaste percentages
   (dekkend op 2%, niets meer op 50%). Het tekstblok staat op de figcaption en
   varieert in hoogte met de lengte van de functie: "Prothesespecialist" is een
   regel, "Specialist implantologie, kroon- en brugwerk / eigenaar" er drie of
   vier op een smalle kaart. De tekst groeide dus omhoog, de scrim niet mee, en
   de bovenste regels belandden op bladeren en witte jassen.

   Nu tekent de figcaption zijn eigen verloop. De donkere zone is per definitie
   even hoog als de tekst plus een vaste uitloopzone erboven, hoe lang de functie
   ook is. De text-shadow is de tweede verdediging.

   Geen scroll-rail: dan zie je zeven van de negen mensen niet, en swipen doet
   lang niet iedereen. Twee kolommen op mobiel, drie vanaf 768px. */
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.8rem,1.4vw,1.15rem); }

/* De kaart is een link naar het portret: klik opent de teamviewer. */
.team-card{
  display:block; margin:0; position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-card); background:var(--sage-100); box-shadow:var(--shadow-sm);
  color:inherit; text-decoration:none; cursor:pointer;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.team-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.team-card:focus-visible{ outline:2px solid var(--brass-500); outline-offset:3px; }
/* Op een kaart van 168px past bij 12,5px letters zo'n 22 tekens per regel, en de
   langste functie telt er 54. Die drie tot vier regels vragen ruimte, dus is de
   kaart op mobiel hoger en staat het hoofd hoger in beeld: de scrim eet dan de
   romp op en niet het gezicht. Vanaf 768px past alles op twee regels en kan de
   kaart terug naar 4:5. */
.team-card img{
  width:100%; aspect-ratio:5/7; object-fit:cover; object-position:center 14%;
  display:block; transition:transform .7s var(--ease);
}
.team-card:hover img{ transform:scale(1.05); }

/* Vergroot-affordance: een kleine ronde knop rechtsboven die pas bij hover of
   focus verschijnt. Zonder muis is de kaart een gewone link, dus de hint mag weg. */
.team-card__zoom{
  position:absolute; top:.7rem; right:.7rem; z-index:3;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; background:rgba(11,14,17,.5);
  border:1.5px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transform:scale(.82) translateY(-2px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             background-color .25s var(--ease), border-color .25s var(--ease);
}
.team-card__zoom .svg-i{ width:17px; height:17px; }
.team-card:hover .team-card__zoom,
.team-card:focus-visible .team-card__zoom{ opacity:1; transform:scale(1) translateY(0); }
.team-card:hover .team-card__zoom{ background:rgba(255,255,255,.25); border-color:var(--brass-400); }

/* De naamplaat tekent zijn eigen scrim: padding-top is de uitloopzone waarin het
   verloop naar nul zakt, de tekst zelf zit altijd in het donkere deel. */
.team-card__plate{
  position:absolute; left:0; right:0; bottom:0; z-index:2; display:block;
  padding:2.3rem .85rem .95rem;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  background:linear-gradient(to top,
    rgba(11,14,17,.95) 0%,
    rgba(11,14,17,.9)  45%,
    rgba(11,14,17,.58) 78%,
    rgba(11,14,17,0)   100%);
}
.team-card__plate::before{
  content:""; display:block; width:24px; height:2px; border-radius:2px;
  background:var(--brass-400); margin-bottom:.6rem;
  text-shadow:none;
  transition:width .45s var(--ease);
}
.team-card:hover .team-card__plate::before{ width:42px; }
.team-card__plate strong{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem, 2.9vw, 1.14rem); letter-spacing:-.01em;
}
.team-card__plate span{
  /* Ten hoogste twee regels. Anders groeit de plaat mee met een lange functie
     en dekt de scrim het portret af (Jacco, Jesse). De volledige functie blijft
     in de DOM en dus in de teamviewer, die hem bij het openen compleet toont:
     de kaart vat samen, de tap onthult de rest. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
  margin-top:.2rem;
  font-size:clamp(.78rem, 2.2vw, .84rem); line-height:1.35;
  color:var(--brass-300);
}
@media (min-width:768px){
  .team-grid{ grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.5vw,1.3rem); }
  .team-card img{ aspect-ratio:4/5; object-position:center 20%; }
  .team-card__plate{ padding:3.4rem 1.1rem 1.05rem; }
}
@media (prefers-reduced-motion: reduce){
  .team-card:hover img{ transform:none; }
  .team-card:hover{ transform:none; }
  .team-card__zoom{ transition:opacity .2s linear; transform:none; }
  .team-card:hover .team-card__zoom,
  .team-card:focus-visible .team-card__zoom{ transform:none; }
}

/* 8.8 Contact */
.contact__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3rem); align-items:start; }
.contact__info{ display:grid; gap:1.1rem; }
.contact__row{ display:flex; gap:.95rem; align-items:flex-start; }
.contact__row a:hover{ color:var(--brass-700); }
.contact__row .ico{ width:44px; height:44px; }
.contact__label{ font-size:.8rem; color:var(--ink-mute); }
.contact__value{ font-weight:600; color:var(--ink); font-size:1.05rem; }
.form-card{ padding:clamp(1.5rem,3vw,2.2rem); }
.form-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
.form-note{ font-size:.82rem; color:var(--ink-mute); margin-top:.2rem; }
/* Nieuwsbrief-succes (footer) gebruikt dit nog niet; het contactformulier heeft
   zijn eigen badge hieronder. Deze regel blijft voor eventuele andere formulieren. */
.form-success{
  display:none; align-items:center; gap:.6rem; margin-top:1rem;
  padding:.85rem 1rem; border-radius:var(--r-ctl);
  background:var(--sage-100); color:var(--sage-700); font-weight:600; font-size:.95rem;
}
.form-success.is-shown{ display:flex; }
.form-success svg{ width:20px; height:20px; flex:none; }

/* ---- Contactformulier: succesbadge ----
   Het formulier verdwijnt met een korte fade en krimp, de badge komt in zijn plaats.
   Het vinkje tekent zichzelf via stroke-dashoffset. Alles op transform en opacity,
   dus geen relayout. Onder prefers-reduced-motion vervalt de beweging: dan wisselt
   het gewoon zonder animatie. Zie sectie 6 in script.js. */
.form-shell{ position:relative; }
.form-shell.is-done form{
  animation:form-weg .34s var(--ease) forwards;
  pointer-events:none;
}
@keyframes form-weg{
  to{ opacity:0; transform:scale(.98); }
}

.form-done{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(1.5rem,4vw,2.6rem) 1rem;
}
/* Het formulier animeert weg (0.34s); de badge komt daarna. position:absolute laat
   ze overlappen zodat de kaart niet in hoogte springt tijdens de wissel. */
.form-shell.is-done .form-done{
  position:absolute; inset:0;
  display:flex; justify-content:center;
}
.form-done__badge{
  display:grid; place-items:center;
  width:76px; height:76px; border-radius:50%;
  background:var(--brass-100);
  animation:badge-pop .5s var(--ease) .3s both;
}
.form-done__check{ width:52px; height:52px; overflow:visible; }
.form-done__ring{
  fill:none; stroke:var(--brass-400); stroke-width:3;
  stroke-dasharray:151; stroke-dashoffset:151;
  animation:teken .55s var(--ease) .34s forwards;
}
.form-done__tick{
  fill:none; stroke:var(--brass-700); stroke-width:5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34; stroke-dashoffset:34;
  animation:teken .35s var(--ease) .72s forwards;
}
.form-done__titel{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.15rem,2.4vw,1.4rem); color:var(--ink);
  letter-spacing:-.015em; margin:1.1rem 0 0;
  opacity:0; animation:done-in .5s var(--ease) .78s both;
}
.form-done__sub{
  color:var(--ink-mute); font-size:.98rem; margin:.5rem 0 0; max-width:34ch;
  opacity:0; animation:done-in .5s var(--ease) .9s both;
}
.form-done__opnieuw{
  margin-top:1.5rem;
  opacity:0; animation:done-in .5s var(--ease) 1.02s both;
}
.form-done__opnieuw svg{ width:1.05em; height:1.05em; }
.form-done__opnieuw:hover svg{ transform:translateX(-3px); }
@keyframes badge-pop{
  0%{ opacity:0; transform:scale(.5); }
  60%{ opacity:1; transform:scale(1.08); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes teken{ to{ stroke-dashoffset:0; } }
@keyframes done-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .form-shell.is-done form{ animation:none; display:none; }
  .form-done__badge, .form-done__ring, .form-done__tick,
  .form-done__titel, .form-done__sub, .form-done__opnieuw{ animation:none; }
  .form-done__ring, .form-done__tick{ stroke-dashoffset:0; }
  .form-done__titel, .form-done__sub, .form-done__badge, .form-done__opnieuw{ opacity:1; }
  .form-shell.is-done .form-done{ position:static; }
}

/* ============================ 9. FOOTER ============================ */
.footer{ background:var(--sage-900); color:var(--on-dark-dim); }
.footer__top{
  display:grid; grid-template-columns:1fr; gap:2.5rem;
  padding-block:clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid var(--on-dark-line);
}
.footer__brand{ max-width:24rem; min-width:0; }
.footer__brand img{ height:44px; width:auto; margin-bottom:1.2rem; }
.footer__brand p{ font-size:.95rem; color:var(--on-dark-dim); }
.footer__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; }
/* Op de telefoon staan Menu en Specialismen naast elkaar, maar Contact krijgt de
   volle breedte: anders staat het in een halve kolom en breekt het e-mailadres
   midden in een woord af. Vanaf 768px (drie kolommen) weer een gewone kolom. */
.footer__cols > .footer__col:last-child{ grid-column:1 / -1; }
/* h2 en geen h4: dit zijn de topniveau-koppen binnen de contentinfo-landmark.
   Als h4 sprongen ze op elke pagina van h2 naar h4. */
.footer__col h2{ font-family:var(--font-display); font-weight:600; color:var(--on-dark); font-size:.95rem; letter-spacing:.02em; margin:0 0 .9rem; }
.footer__col a{ display:block; padding:.28rem 0; font-size:.92rem; color:var(--on-dark-dim); transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--on-dark); }
.footer__bottom{
  display:flex; flex-direction:column; gap:.6rem;
  padding-block:1.5rem; font-size:.85rem; color:var(--on-dark-dim);
}
.footer__bottom a:hover{ color:var(--on-dark); }
/* Credit onderaan, op elke breedte zichtbaar. Subtiel, met een haarlijn erboven. */
.footer__credit{
  padding-block:1.1rem; border-top:1px solid rgba(255,255,255,.08);
  font-size:.82rem; color:var(--on-dark-dim);
}
.footer__credit a{
  color:var(--on-dark); font-weight:600;
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease);
}
.footer__credit a:hover{ border-color:var(--merk-licht); }

/* ============================ 10. MOTION ============================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity, transform; }
.reveal.is-visible{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================ 11. RESPONSIVE ============================ */
/* >= 560px : trust 2-koloms, nieuws behoudt 1, footer cols */
@media (min-width:560px){
  .trust__panel{ grid-template-columns:1fr 1fr; }
  .checklist{ grid-template-columns:1fr 1fr; gap:1.1rem 2rem; }
  .facets{ grid-template-columns:1fr 1fr; }
}

/* >= 768px : tablet */
@media (min-width:768px){
  .nav__call{ display:inline-flex; }
  .footer__top{ grid-template-columns:1.3fr 1fr; gap:3rem; }
  .footer__cols{ grid-template-columns:repeat(3,1fr); }
  .footer__cols > .footer__col:last-child{ grid-column:auto; }   /* Contact weer een gewone kolom */
  .footer__bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
  .form-grid{ grid-template-columns:1fr 1fr; }
  .form-grid .field--full{ grid-column:1 / -1; }
}

/* >= 992px : desktop layout */
@media (min-width:992px){
  .nav__links{ display:flex; }
  .nav__toggle{ display:none; }
  .trust__panel{ grid-template-columns:repeat(4,1fr); }
  .trust__item{ flex-direction:column; gap:1rem; padding:2.3rem 1.8rem; }
  .split{ grid-template-columns:1.08fr .92fr; }   /* teamfoto krijgt de grotere kolom */
  .split--reverse .split__media{ order:2; }
  .quality__grid{ grid-template-columns:1.05fr .95fr; }
  .spec-layout{ grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,5vw,4.5rem); }
  .spec-head--sticky{ position:sticky; top:calc(var(--topbar-h) + var(--nav-h) + 2rem); }
  /* Het blok met de contactgegevens links is hoger dan de formulierkaart rechts.
     Met de align-items:start uit de basisregel hing die kaart aan de bovenrand,
     gelijk met de eyebrow en dus boven de kop, en dat leest als zwevend. Vanaf
     twee kolommen staan ze daarom gecentreerd ten opzichte van elkaar. */
  .contact__grid{ grid-template-columns:.95fr 1.05fr; align-items:center; }
  .footer__cols{ grid-template-columns:repeat(3,1fr); }
}

/* >= 1200px */
@media (min-width:1200px){
  .footer__top{ grid-template-columns:1.4fr 1.6fr; }
}

/* ================= HERO op mobiel + tablet (< 992px) =================
   Desktop bouwt de hero op rond een tekstkolom links, met de foto als adem
   ernaast: vandaar de scrim die van links naar rechts oplicht en het ingezette
   haarlijn-kader. Op een smal scherm bestaat die kolom niet - de tekst zou dan
   over de volle foto lopen (slecht leesbaar) en het kader dwars door de knoppen.

   Daarom kantelt de hero hier: tekst op een donker paneel, daaronder de foto
   als ingezette kaart met hetzelfde haarlijn-detail, en de slidercontrol in
   dezelfde rooilijn eronder. De volgorde regelen we met flex `order`; de
   .hero__inner-wrapper valt weg met display:contents zodat content, foto en
   control alle drie directe flex-kinderen van .hero worden.

   Grens op 992px: daar schakelt de site sowieso naar het hamburgermenu, en op
   tablet-portret (768px) is de tekstkolom nog altijd bijna schermbreed. */
@media (max-width:991px){
  .hero{
    display:flex; flex-direction:column;
    min-height:100svh;
    position:relative; isolation:isolate;
    /* Lichtbron: koele gloed linksboven die naar rechtsonder wegzakt.
       Zonder dit is het paneel platte verf. */
    background:
      radial-gradient(125% 70% at 6% -8%, rgba(140,165,190,.15), transparent 58%),
      radial-gradient(95% 55% at 100% 108%, rgba(11,12,11,.75), transparent 68%),
      var(--sage-950);
  }
  /* Filmkorrel over het hele paneel, niet alleen binnen de fotokaart */
  .hero::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    opacity:.22; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:140px 140px;
  }

  /* Standaard is de navbalk op mobiel de papieren balk met het donkere logo, ook
     bovenaan. Dat is de homepage: de hero is daar een vlak donker paneel, dus het
     frosted glas heeft niets om te frosten en leest als een grijze balk. */
  .nav:not(.is-open){
    background:#fff;
    border-bottom-color:var(--line);
  }

  /* De subpagina's beginnen met een foto onder de balk. Daar lost de nav bovenaan
     wel op, met het lichte logo, en komt de papieren balk zodra je scrolt. */
  body:not(.is-home) .nav:not(.is-scrolled):not(.is-open){
    background:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-bottom-color:transparent; box-shadow:none;
  }
  body:not(.is-home) .nav:not(.is-scrolled):not(.is-open) .nav__logo-dark{ display:none; }
  body:not(.is-home) .nav:not(.is-scrolled):not(.is-open) .nav__logo-light{ display:block; }
  body:not(.is-home) .nav:not(.is-scrolled):not(.is-open) .nav__toggle{ color:#fff; }
  body:not(.is-home) .nav:not(.is-scrolled):not(.is-open) .nav__toggle:hover{ background:rgba(255,255,255,.1); }

  /* Menu open: de balk verdwijnt in het donkere paneel, ook als je al gescrold
     had. Alleen het lichte logo en het kruisje blijven staan. */
  .nav.is-open{
    background:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-bottom-color:transparent; box-shadow:none;
  }
  .nav.is-open .nav__logo-dark{ display:none; }
  .nav.is-open .nav__logo-light{ display:block; }
  .nav.is-open .nav__toggle{ color:#fff; }
  .nav.is-open .nav__toggle:hover{ background:rgba(255,255,255,.1); }
  /* De 'Bel direct'-knop (768-991px) botst met de telefoonlink in het paneel */
  .nav.is-open .nav__call{ display:none; }

  /* Wrapper opheffen: zijn kinderen worden zelf flex-item van .hero */
  .hero__inner{ display:contents; }

  /* --- 1. Tekst, hangend aan een marge-lijn ---
     De lijn staat op de gutter, de tekst begint erachter. Zo krijgt de kolom een
     as om tegenaan te staan in plaats van los in het donker te zweven. Boven een
     lichte kap, daaronder een haarlijn die uitdooft: dezelfde taal als .eyebrow.
     De kap staat in licht staal en niet in het accent zelf: het accent is nu
     bijna-zwart, en dit paneel is dat ook. */
  .hero__content{
    order:1;
    position:relative; z-index:2;
    padding-left:calc(var(--pad) + 1.3rem);
    padding-right:var(--pad);
    padding-top:calc(var(--topbar-h) + var(--nav-h) + clamp(1.5rem, 4.5vh, 2.8rem));
  }
  .hero__content::before{
    content:""; position:absolute; z-index:-1;
    left:var(--pad); width:1px;
    top:calc(var(--topbar-h) + var(--nav-h) + clamp(1.5rem, 4.5vh, 2.8rem) + .35rem);
    bottom:0;
    background:linear-gradient(180deg,
      var(--merk-licht) 0 2.6rem,
      rgba(255,255,255,.16) 2.6rem 78%,
      transparent 100%);
  }
  /* Tracking van -.03em knijpt op ~35px en leest gespannen. Losser geeft rust
     en gezag zonder een pixel groter te worden. */
  .hero h1{
    font-size:clamp(2rem, 1.03rem + 5.45vw, 2.9rem);
    line-height:1.08;
    letter-spacing:-.018em;
    margin-bottom:1.05rem;
  }
  .hero__sub{ font-size:1.04rem; line-height:1.6; max-width:32ch; text-wrap:pretty; }

  /* Ruimtecontrast: strak binnen een groep, ruim ertussen.
     De knoppen hugen hun tekst en staan links, dus ze staan op dezelfde as als
     de kop. Twee even brede, even zware knoppen op volle breedte onder elkaar
     was het duidelijkste template-signaal in de hele hero. */
  .hero__cta{ flex-direction:column; align-items:flex-start; gap:1.1rem; margin-top:2.4rem; }
  .hero__cta .btn{ width:auto; justify-content:flex-start; }
  /* De secundaire actie wordt een tekstlink met een haarlijn eronder */
  .hero__cta .btn--ghost-light{
    padding:.7rem 0; border:0; background:none;
    color:var(--brass-300); font-size:1rem;
    position:relative;
  }
  .hero__cta .btn--ghost-light::after{
    content:""; position:absolute; left:0; right:0; bottom:.5rem; height:1px;
    background:currentColor; opacity:.45;
    transition:opacity .25s var(--ease);
  }
  .hero__cta .btn--ghost-light:hover{ background:none; color:var(--brass-100); }
  .hero__cta .btn--ghost-light:hover::after{ opacity:1; }

  /* --- 2. De plaat. Geen kaart: rechte hoeken, geen slagschaduw. Hij staat op
     dezelfde gutter als de marge-lijn, zodat zijn linkerrand die lijn voortzet,
     en wordt onderaan door de vouw afgesneden. Dat afsnijden is het punt: er is
     meer, je moet scrollen. --- */
  .hero__frame{
    order:2;
    position:relative; inset:auto; z-index:2;
    flex:1 1 auto;
    min-height:15rem;
    margin:clamp(2.4rem, 6vh, 3.4rem) var(--pad) 0;
    border-radius:0;
    box-shadow:none;
  }
  .hero__frame::after{ display:none; }   /* het ingezette kader is een desktop-device */
  .hero__slide{ object-position:center center; filter:saturate(1) contrast(1.03); }
  /* Voet onder de foto: draagt de slidercontrol */
  .hero__scrim{
    background:linear-gradient(0deg,
      rgba(10,13,16,.88) 0%, rgba(10,13,16,.4) 22%, transparent 44%);
  }
  .hero__grade{ opacity:.45; }
  .hero__grain{ opacity:.16; }

  /* --- 2b. Beweging: één aankomst, daarna een camera die nauwelijks beweegt ---
     Beide animaties zitten op .hero__slides, niet op de losse .hero__slide:
     die krijgt en verliest .is-active, en dan zou de vertrekkende slide zijn
     transform terugzetten naar scale(1) terwijl hij nog 1,5s staat weg te faden.
     Op de container is er geen class-wissel, dus geen sprong, en het is één
     composited laag in plaats van drie.

     .is-ready wordt door JS op <body> gezet. Zonder JS blijft de eindtoestand
     staan, dus nooit een leeg masker. */
  .hero__slides{ will-change:transform; transform-origin:50% 42%; }
  .hero__frame::after{ transform-origin:center; }

  /* De kaart wordt onthuld, en de haarlijn stelt daarna scherp. Eén moment. */
  body.is-ready .hero__slides{
    animation:
      heroReveal 1s var(--ease) both,
      heroPan 18s ease-in-out 1.1s infinite alternate;
  }
  body.is-ready .hero__frame::after{ animation:heroLine .6s var(--ease) .55s both; }

  /* Pan stilzetten zodra de hero uit beeld is: geen batterij verstoken aan iets
     wat niemand ziet. Class komt van een IntersectionObserver in script.js. */
  .hero.is-offscreen .hero__slides{ animation-play-state:paused; }

  /* --- 3. Slidercontrol: linksonder OP de foto, net als op desktop.
     Absoluut binnen .hero, dus de kaart erboven kan gewoon flex:1 blijven. --- */
  .hero__bottom{
    order:3;
    position:absolute; z-index:3;
    left:calc(var(--pad) + 1.3rem);    /* zelfde as als de tekstkolom erboven */
    right:0;
    bottom:clamp(1.4rem, 3.5vh, 2.2rem);
    margin:0; padding:0;
  }
  .hero__control{ gap:1rem; }
  .hero__arrow{ width:44px; height:44px; border-color:rgba(255,255,255,.4); }
  .hero__arrow svg{ width:19px; height:19px; }
  .hero__ctrl{ gap:.5rem; }
  .hero__ctrl-label{ font-size:.85rem; }
  .hero__bars{ gap:.45rem; }
  .hero__dot-track{ width:26px; height:4px; background:rgba(255,255,255,.3); }
  .hero__dot.is-active .hero__dot-track{ width:44px; }

  .hero__quick{ display:none; }
}


/* Lint-balk: e-mail weg op smaller, hele balk weg op mobiel */
@media (max-width:991px){ .topbar__mail{ display:none; } }
@media (max-width:767px){
  :root{ --topbar-h:0px; }
  .topbar{ display:none; }
}

/* ============================ 12. SUBPAGINA'S ============================
   Gedeelde bouwstenen voor de losse pagina's (over-ons, service, specialismen,
   nieuws, contact). Zelfde taal als de homepage: grafiet accent, page-hero met
   frosted nav eroverheen, editorial secties. */

/* 12.1 Page-hero: compacte cinematische banner. De nav zweeft eroverheen,
   dus de foto + scrim leveren de donkere achtergrond bovenaan. */
.page-hero{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:clamp(420px, 62vh, 640px);
  background:var(--sage-900); color:var(--on-dark);
}
.page-hero::before{                     /* achtergrondfoto via --ph-img */
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--ph-img); background-size:cover; background-position:center var(--ph-pos, 30%);
  filter:saturate(1) contrast(1.04) brightness(.94);
}
.page-hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(92deg, rgba(10,13,16,.92) 0%, rgba(10,13,16,.64) 44%, rgba(10,13,16,.26) 100%),
    linear-gradient(0deg, rgba(10,13,16,.82) 0%, rgba(10,13,16,.12) 52%, rgba(10,13,16,.42) 100%);
}
.page-hero__grade{                      /* subtiele koele grading, net als de homepage-hero */
  position:absolute; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:soft-light;
  background:
    linear-gradient(118deg, rgba(18,22,26,.5) 0%, rgba(13,17,20,0) 48%, rgba(226,228,230,.2) 100%);
}
.page-hero::after{                      /* fijne haarlijn-kader, premium detail */
  content:""; position:absolute; inset:clamp(14px,1.7vw,26px); z-index:0; pointer-events:none;
  border:1px solid rgba(255,255,255,.18); border-radius:4px;
}
.page-hero__inner{
  position:relative; z-index:1;                 /* volle wrap-breedte: linkerrand gelijk aan de rest van de pagina */
  padding-top:calc(var(--topbar-h) + var(--nav-h) + clamp(2rem, 7vh, 4.5rem));
  padding-bottom:clamp(2.4rem, 6vh, 4rem);
}
.page-hero .eyebrow{ color:var(--brass-300); }
.page-hero .eyebrow::before{ background:var(--brass-400); }
.page-hero h1.display{
  color:var(--on-dark); font-weight:800; margin:1rem 0 0; max-width:20ch;
  font-size:clamp(2.3rem, 5.2vw, 4rem); line-height:1.03; letter-spacing:-.03em;
}
.page-hero h1 .accent{ color:var(--brass-300); }
.page-hero__lead{
  margin-top:1.2rem; max-width:46ch;
  color:var(--on-dark-dim); font-size:clamp(1.05rem, 1.4vw, 1.22rem); line-height:1.62;
}

/* Page-hero op mobiel en tablet (< 992px). Dezelfde ingrepen als bij de
   homepage-hero, om dezelfde redenen:
   - Het ingezette kader staat op 14px, de tekst op 20px. Die lijn snijdt dus
     vlak langs de koppen. Sinds de navbalk doorzichtig is, is bovendien de
     bovenrand van dat kader zichtbaar achter het logo. Kader is desktop-only.
   - De scrim liep van links naar rechts, gebouwd voor de tekstkolom op desktop.
     Op een smal scherm ligt de rechterhelft van elke regel op onafgedekte foto.
   - h1.display zit met clamp(2.3rem, 5.2vw, 4rem) op een telefoon altijd op zijn
     ondergrens van 36,8px, want 5.2vw is daar kleiner. Eigen schaal dus.
   - Het kruimelpad eindigt op de paginanaam en de eyebrow eronder herhaalt dat
     woord. Kruimelpad naar boven: conventionele plek, verankert de lege
     bovenkant, en onderaan blijft eyebrow + titel + lead over. */
@media (max-width:991px){
  .page-hero{
    align-items:stretch;
    min-height:clamp(400px, 66svh, 560px);
  }
  .page-hero::after{ display:none; }
  /* De banner is hier nooit breder dan een telefoon, dus de 1280- of 1000-variant
     is ruim genoeg. De 1920-versie was tot 2,5x te groot: op implantaten scheelt
     dat 83 KB, op contact haalt het team-group van 314 naar 142 KB. Fallback naar
     --ph-img voor het geval een pagina de kleine variant niet zet. */
  .page-hero::before{
    background-position:center var(--ph-pos-sm, 34%);
    background-image:var(--ph-img-sm, var(--ph-img));
  }

  /* Gemeten tegen de helderste achtergrondpixel onder elke tekststrook, niet
     op gevoel. De donkere zones volgen precies waar tekst staat: kruimelpad tot
     22%, titel vanaf 56% (daar is .65 dekking nodig om het accentwoord op
     3:1 te houden), lead tot onderaan. Daartussen mag de foto ademen. */
  .page-hero__scrim{
    background:linear-gradient(180deg,
      rgba(10,13,16,.93) 0%,
      rgba(10,13,16,.88) 22%,
      rgba(10,13,16,.36) 40%,
      rgba(10,13,16,.40) 48%,
      rgba(10,13,16,.79) 58%,
      rgba(10,13,16,.89) 72%,
      rgba(10,13,16,.94) 88%,
      rgba(10,13,16,.97) 100%);
  }
  .page-hero__grade{ opacity:.35; }

  .page-hero__inner{
    display:flex; flex-direction:column;
    padding-top:calc(var(--topbar-h) + var(--nav-h) + 1.35rem);
    padding-bottom:clamp(1.8rem, 4.5vh, 2.6rem);
  }
  .page-hero .breadcrumb{ margin:0 0 auto; }

  /* De eyebrow valt net boven de titel, in de band waar de scrim de foto laat
     ademen (40-48%). Op de lichtste bronfoto's (frees, ontwerp) zakte de kleine
     eyebrow-tekst daar onder 4,5:1, gemeten op de glyph-pixels. Een korte schaduw
     tilt hem terug boven AA zonder de compositie of de titel eronder te raken.
     Het accentwoord in de titel zelf is groot (3:1) en zit al in de donkere band. */
  .page-hero .eyebrow{ text-shadow:0 1px 6px rgba(10,13,16,.75); }

  .page-hero h1.display{
    margin-top:.85rem;
    max-width:none;
    font-size:clamp(1.85rem, 0.665rem + 6.36vw, 3.2rem);
    line-height:1.08;
    letter-spacing:-.022em;
    text-wrap:balance;
  }
  .page-hero__lead{
    margin-top:1rem;
    font-size:1.02rem; line-height:1.6;
    text-wrap:pretty;
  }

}

/* Alleen contact.php, en alleen op een telefoon. Daar staat de groepsfoto in de
   banner. Die foto is 3:2, de banner is op een telefoon bijna vierkant.
   background-size:cover schaalt dan op hoogte en laat nog 43% van de fotobreedte
   over, waardoor de linker- en de rechtercollega buiten beeld vallen.

   Gemeten: vanaf 640px toont cover de hele groep vanzelf, dus daarboven blijft
   alles zoals het was. Daaronder schalen we op breedte. 128% toont 1250 van de
   1600 beeldpixels, precies de groep met wat lucht. De groep staat niet in het
   midden van de foto maar rond 53%, vandaar die positie.

   Boven en onder de foto blijft dan ruimte over. Twee lagen vullen die:
   1. ::before is dezelfde foto, formaatvullend en onscherp. Dat is de gangbare
      letterbox-vulling. Geen extra bestand, de foto is toch al geladen. De laag
      steekt 48px buiten het kader omdat blur() aan de randen transparantie
      aanzuigt; overflow:hidden op .page-hero knipt de overmaat weg.
   2. ::after is de scherpe foto. Zonder mask eindigt die in een harde rand: de
      bovenrand van de foto is lichte lucht (gemeten 190) en de onscherpe laag
      toont daar het donkere deurpaneel (gemeten 38). De mask laat de foto over
      44px uitvloeien in de laag eronder. mask-size volgt exact de fotohoogte,
      namelijk 128% van de schermbreedte gedeeld door de beeldverhouding 3:2.
   ::after is op mobiel toch al display:none (het haarlijn-kader is desktop-only),
   dus die is hier vrij te gebruiken. */
/* De groep staat hoog in de foto: op desktop sneed center 30% het bovenste hoofd
   net af. Iets hoger in beeld (het beeld zakt naar beneden) laat iedereen heel.
   Alleen de groep-banner, alleen vanaf 640px (daaronder geldt de blok hieronder). */
@media (min-width:640px){
  .page-hero--groep::before{ background-position:center 24%; }
}
@media (max-width:639px){
  .page-hero--groep::before{                 /* onscherpe vulling, formaatvullend */
    inset:-48px;
    background-size:cover;
    background-position:53% center;
    filter:saturate(1) brightness(.9) blur(26px);
  }
  .page-hero--groep::after{                  /* de scherpe foto, op breedte geschaald */
    --foto-h:calc(100vw * 1.28 / 1.5);
    content:""; display:block;
    position:absolute; inset:0; z-index:-2;
    border:0; border-radius:0;
    background-image:var(--ph-img-sm, var(--ph-img));
    background-size:128% auto;
    background-position:53% center;
    background-repeat:no-repeat;
    filter:saturate(1) contrast(1.04) brightness(.94);
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
    -webkit-mask-size:100% var(--foto-h);  mask-size:100% var(--foto-h);
    -webkit-mask-position:center center;   mask-position:center center;
    -webkit-mask-repeat:no-repeat;         mask-repeat:no-repeat;
  }
}
/* Mobiele afronding, bewust onder 992px zodat 1280px byte-identiek blijft.
   Lange Nederlandse samenstellingen (implantaatgedragen, CE-gecertificeerde) breken
   netjes af. lang=nl staat al op de html, dus hyphens:auto kent de afbreekregels.
   overflow-wrap is het vangnet als afbreken niets oplevert. */
@media (max-width:991px){
  h1.display, h2.display, h3.display{
    overflow-wrap:break-word;
    -webkit-hyphens:auto; hyphens:auto;
  }
  /* Het e-mailadres in de footerkolom is een aaneengesloten reeks zonder
     spaties. In de tweekoloms grid (repeat(2,1fr)) dwingt die reeks de
     kolomsporen breder dan het scherm, wat op 320px de 24px zijwaartse
     scroll gaf. overflow-wrap:anywhere telt mee in de min-content van het
     grid-spoor (break-word niet), dus alleen anywhere laat het spoor krimpen
     en het adres netjes afbreken. */
  .footer__col a{ overflow-wrap:anywhere; }
}
/* Op een telefoon is 46ch breder dan het scherm; daar bepaalt de gutter de maat.
   Vanaf 600px zou een harde 38ch een onnodig smalle kolom maken. */
@media (max-width:599px){
  .page-hero__lead{ max-width:38ch; }
}

/* 12.2 Kruimelpad (in de page-hero) */
.breadcrumb{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.85rem; margin-bottom:.4rem; }
.breadcrumb a{ color:var(--on-dark-dim); transition:color .2s var(--ease); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .svg-i{ width:14px; height:14px; color:var(--brass-400); opacity:.85; }
.breadcrumb [aria-current="page"]{ color:#fff; font-weight:600; }

/* 12.3 FAQ / veelgestelde vragen (details-accordeon, SEO-vriendelijk) */
/* De FAQ vult de volle breedte van de .wrap. Eerder stond hier max-width:60rem,
   waardoor het blok op desktop links stond met een lege strook rechts. De kaarten
   lopen nu full-width; alleen de antwoordtekst houdt een leesgrens (zie .faq__a),
   zodat een lange regel niet over 1280px uitrekt. */
.faq{ display:grid; gap:.85rem; }
.faq__item{
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--paper-raised);
  overflow:hidden; transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.faq__item[open]{ box-shadow:var(--shadow-sm); border-color:var(--line-strong); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  list-style:none; cursor:pointer; padding:1.15rem 1.35rem;
  font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:var(--ink);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q .faq__ico{ flex:none; width:24px; height:24px; color:var(--brass-600); transition:transform .3s var(--ease); }
.faq__item[open] .faq__q .faq__ico{ transform:rotate(180deg); }
.faq__a{ padding:0 1.35rem 1.3rem; color:var(--ink-soft); font-size:.98rem; line-height:1.62; }
.faq__a p, .faq__a ul{ max-width:75ch; }   /* leesgrens binnen de full-width kaart */
.faq__a p + p{ margin-top:.8rem; }
.faq__a ul{ margin-top:.6rem; display:grid; gap:.4rem; }
.faq__a ul li{ position:relative; padding-left:1.2rem; }
.faq__a ul li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--brass-500); }

/* 12.4 Fotogalerij (gemaakt werk)
   De foto's komen uit het lab en zijn onderling niet consistent: houten werkbank,
   gespikkeld aanrecht, wisselende witbalans. De rust moet dus uit de houder komen
   en niet uit een filter: gelijke uitsnede (4:3, de bronverhouding, dus geen crop),
   gelijke marge, een haarlijn, geen slagschaduw en NUL kleurbewerking. Bij een
   tandtechnisch lab is kleurechtheid de kernbelofte; een warme grade over dit werk
   zou die belofte onderuithalen. */
.gallery{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(.6rem, 1.2vw, 1rem);
  margin:0; padding:0; list-style:none;
}
.gallery__cell{ margin:0; }
.gallery.is-collapsed .gallery__cell:nth-child(n+13){ display:none; }

.gallery__item{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:4/3;
  border-radius:var(--r-card);
  border:1px solid var(--line);
  background:var(--sage-100);
  transition:border-color .3s var(--ease);
}
.gallery__item:hover{ border-color:var(--line-strong); }
.gallery__item:focus-visible{ outline:2px solid var(--brass-600); outline-offset:3px; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.gallery__item:hover img{ transform:scale(1.04); }

/* Het pijltje vertelt dat de foto opengaat. Enige beweging op de tegel, en ze is
   gemotiveerd: zonder aanwijzing lijkt een fotoraster niet klikbaar. */
.gallery__zoom{
  position:absolute; right:.55rem; bottom:.55rem;
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:50%; background:rgba(10,13,16,.62); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery__zoom .svg-i{ width:15px; height:15px; }
.gallery__item:hover .gallery__zoom,
.gallery__item:focus-visible .gallery__zoom{ opacity:1; transform:none; }

.gallery__more{ margin-top:clamp(1.6rem,3vw,2.4rem); display:flex; justify-content:center; }

@media (min-width:640px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px){ .gallery{ grid-template-columns:repeat(4,1fr); } }

@media (prefers-reduced-motion: reduce){
  .gallery__item:hover img{ transform:none; }
  .gallery__zoom{ opacity:1; transform:none; }
}

/* 12.4b Fotoviewer. Donker paneel met filmkorrel, het lichte logo, een teller,
   een filmstrip en ronde knoppen: dezelfde taal als de hero-slider en het
   mobiele off-canvas. De foto's zelf krijgen geen enkele bewerking.

   Het paneel krimpt om zijn inhoud heen (height:auto) en wordt gecentreerd. Nam
   het de volle schermhoogte, dan hing de foto bovenaan en stonden bijschrift en
   filmstrip onderaan vastgeprikt, met een gat ertussen. */
.lb{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  /* de balk bovenaan neemt de hoogte van de navbalk in beslag */
  padding:calc(var(--topbar-h) + var(--nav-h)) 0 clamp(.8rem,2vh,1.4rem);
}
.lb[hidden]{ display:none; }
.lb:focus{ outline:none; }

.lb__backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(140,165,190,.10), transparent 62%),
    rgba(9,12,14,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s var(--ease);
}
.lb.is-open .lb__backdrop{ opacity:1; }

/* Korrel op een vaste, niet-scrollende laag: geen repaint tijdens scrollen. */
.lb__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

.lb__panel{
  position:relative; z-index:2;
  /* 800px foto + twee pijlen + lucht: zo hugen de pijlen het beeld in plaats van
     aan de rand van een veel te breed paneel te hangen */
  width:min(100% - 1.5rem, 960px);
  height:auto;
  display:grid; grid-template-rows:auto auto;
  gap:clamp(.8rem, 2vh, 1.3rem);
  opacity:0; transform:scale(.985);
  transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.lb.is-open .lb__panel{ opacity:1; transform:none; }

/* --- Balk: spiegelt .nav exact (top, hoogte, .wrap, logo van 46px) --- */
.lb__bar{
  position:absolute; top:var(--topbar-h); left:0; right:0; z-index:3;
  height:var(--nav-h);
  border-bottom:1px solid transparent;   /* .nav heeft die ook: anders 0,5px scheef */
  display:flex; align-items:center;
  /* Bij sluiten meteen weg. Zonder deze regel bleef de balk 300ms op volle sterkte
     staan terwijl de achtergrond al wegvaagde: een los logo en kruisje boven de
     gewone pagina. De transitie zit alleen in de is-open-regel, dus geldt hij
     alleen bij openen. */
  opacity:0; transition:opacity 0s;
}
.lb.is-open .lb__bar{ opacity:1; transition:opacity .28s var(--ease) .04s; }
.lb__bar-inner{ display:flex; align-items:center; gap:1rem; width:100%; }
.lb__logo{ height:46px; width:auto; flex:none; }   /* gelijk aan .nav__logo img */
.lb__count{
  margin-left:auto;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.85rem, 1.1vw, .95rem);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
  color:var(--brass-300);
}

/* --- Toneel: pijl, foto, pijl --- */
.lb__stage{
  position:relative; min-height:0;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(.5rem, 2vw, 1.6rem);
}
.lb__fig{
  margin:0; min-height:0; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem;
}
/* Venster met een spoor van drie foto's: de veeg schuift het spoor, overflow
   knipt de buren zodat je er maar een ziet, plus de binnenkomende. */
.lb__viewport{ position:relative; overflow:hidden; width:100%; touch-action:pan-y; }
.lb__track{ display:flex; width:300%; will-change:transform; }
/* De padding maakt een kleine gap tussen twee foto's zonder de spoor-berekening
   te raken: de gap zit binnen de 33,3333% van de slide. */
.lb__slide{
  flex:0 0 33.3333%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  padding-inline:clamp(6px, 1.4vw, 14px);
}
.lb__slide img{
  max-width:min(100%, 800px);              /* de bron is 800px breed: nooit opschalen */
  /* schermhoogte minus de navbalk, het bijschrift, de filmstrip en wat lucht */
  max-height:calc(100svh - var(--topbar-h) - var(--nav-h) - 9.5rem);
  width:auto; height:auto; min-height:0;
  object-fit:contain; border-radius:var(--r-card);
}
.lb__cap{
  font-size:.92rem; line-height:1.5; color:var(--on-dark-dim);
  text-align:center; max-width:60ch;
}

.lb__close, .lb__nav{
  width:46px; height:46px; border-radius:50%; flex:none;
  border:1.5px solid rgba(255,255,255,.4); background:rgba(10,13,16,.4);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .15s var(--ease);
}
.lb__close:hover, .lb__nav:hover{ border-color:var(--brass-400); background:rgba(255,255,255,.16); }
.lb__close:active, .lb__nav:active{ transform:scale(.94); }
.lb__close .svg-i, .lb__nav .svg-i{ width:20px; height:20px; }

/* --- Filmstrip: sleepbare carrousel, de middelste is actief en groter ---
   De padding links en rechts is een halve tegelbreedte minus de helft van de
   strip, zodat ook de eerste en de laatste foto in het midden kunnen staan.
   scroll-snap-align:center gebruikt de border-box en trekt zich niets aan van de
   transform, dus de vergroting van de actieve tegel verstoort het snappen niet. */
.lb__strip{
  --lb-thumb-w:76px;
  position:relative;
  display:flex; gap:.5rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:.9rem calc(50% - var(--lb-thumb-w) / 2) .3rem;
  border-top:1px solid rgba(255,255,255,.09);
  scrollbar-width:none;
  cursor:grab;
}
.lb__strip.is-dragging{ scroll-snap-type:none; cursor:grabbing; }
.lb__strip::-webkit-scrollbar{ display:none; }

.lb__thumb{
  position:relative;
  flex:0 0 var(--lb-thumb-w);
  height:calc(var(--lb-thumb-w) * 3 / 4);
  scroll-snap-align:center;
  padding:0; border:0; border-radius:8px; overflow:hidden;
  background:var(--sage-800); cursor:pointer;
  opacity:.4; transform:scale(.88);
  transition:opacity .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lb__thumb img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.lb__thumb:hover{ opacity:.75; }
.lb__thumb[aria-selected="true"]{
  z-index:1; opacity:1; transform:scale(1.12);
  box-shadow:0 0 0 1.5px var(--brass-300), 0 12px 26px -14px rgba(0,0,0,.95);
}
.lb__thumb:focus-visible{ outline:2px solid var(--brass-300); outline-offset:3px; }

/* Tablet */
@media (max-width:991px){
  .lb__strip{ --lb-thumb-w:68px; }
}

/* Onder 640px is er geen ruimte naast de foto: de pijlen liggen erop, precies op
   het midden van het beeld (niet van de figuur, want daar hoort het bijschrift bij). */
@media (max-width:639px){
  .lb__panel{ width:calc(100% - 1rem); gap:.7rem; }
  .lb__stage{ grid-template-columns:minmax(0,1fr); }
  .lb__nav{
    position:absolute; z-index:2;
    top:calc(50% - 21px); margin-top:-21px;
    width:42px; height:42px;
    background:rgba(10,13,16,.62);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .lb__nav--prev{ left:.4rem; }
  .lb__nav--next{ right:.4rem; }
  .lb__close{ width:40px; height:40px; }
  .lb__close .svg-i{ width:18px; height:18px; }
  /* de strip iets lager en luchtiger op een telefoon */
  .lb__strip{ --lb-thumb-w:60px; padding-top:1.2rem; gap:.45rem; }
  .lb__cap{ font-size:.88rem; }
  .lb__fig img{ max-height:calc(100svh - var(--nav-h) - 9rem); }
}

@media (prefers-reduced-motion: reduce){
  .lb__backdrop, .lb__panel, .lb__fig img, .lb__thumb{ transition:none; }
  .lb__panel{ transform:none; }
}

/* 11.9 Teamviewer: portret groot met naam en functie ernaast (homepage).
   Deelt de donkere taal van de fotoviewer: zelfde backdrop, korrel en balk, zodat
   het logo bij het openen op zijn plek blijft en alleen het beeld donker wordt. */
.tv{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  padding:calc(var(--topbar-h) + var(--nav-h)) 0 clamp(.8rem,2vh,1.4rem);
}
.tv[hidden]{ display:none; }
.tv:focus{ outline:none; }

.tv__backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(140,165,190,.10), transparent 62%),
    rgba(9,12,14,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s var(--ease);
}
.tv.is-open .tv__backdrop{ opacity:1; }

.tv__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* Balk: spiegelt .nav en .lb__bar exact (top, hoogte, .wrap, logo van 46px). */
.tv__bar{
  position:absolute; top:var(--topbar-h); left:0; right:0; z-index:3;
  height:var(--nav-h);
  border-bottom:1px solid transparent;
  display:flex; align-items:center;
  opacity:0; transition:opacity 0s;
}
.tv.is-open .tv__bar{ opacity:1; transition:opacity .28s var(--ease) .04s; }
.tv__bar-inner{ display:flex; align-items:center; gap:1rem; width:100%; }
.tv__logo{ height:46px; width:auto; flex:none; }
.tv__count{
  margin-left:auto;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.85rem, 1.1vw, .95rem);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
  color:var(--brass-300);
}

/* Split: portret links (iets breder), naam en functie rechts, samen gecentreerd. */
.tv__panel{
  position:relative; z-index:2;
  width:min(100% - 1.5rem, 1020px);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center; gap:clamp(1.5rem,4vw,3.4rem);
  opacity:0; transform:scale(.985);
  transition:opacity .3s var(--ease), transform .35s var(--ease);
  /* De browser mag verticaal pannen; de horizontale veeg om te bladeren laat hij
     aan JS. Zonder dit vat mobiel een zijwaartse veeg op als scroll en breekt hij
     het gebaar af. */
  touch-action:pan-y;
}
.tv.is-open .tv__panel{ opacity:1; transform:none; }

/* Venster met een spoor van drie slides eronder: de veeg schuift het spoor,
   overflow knipt de buren zodat je er maar één ziet (plus de binnenkomende). */
.tv__media{
  margin:0; min-height:0; position:relative; overflow:hidden; width:100%;
  touch-action:pan-y;   /* horizontaal is voor het bladeren, verticaal mag de browser */
}
.tv__track{ display:flex; width:300%; will-change:transform; }
/* De padding maakt een kleine gap tussen twee portretten zonder de spoor-
   berekening te raken: de gap zit binnen de 33,3333% van de slide. */
.tv__slide{
  flex:0 0 33.3333%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  padding-inline:clamp(6px, 1.4vw, 12px);
}
.tv__media img{
  width:auto; height:auto; max-width:100%;
  max-height:calc(100svh - var(--topbar-h) - var(--nav-h) - 5rem);
  object-fit:contain; border-radius:var(--r-lg);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.85);
}

.tv__info{ min-width:0; }
.tv__rule{
  display:block; width:44px; height:2px; border-radius:2px;
  background:var(--brass-400); margin-bottom:1.1rem;
}
.tv__name{
  margin:0; color:#fff;
  font-size:clamp(1.9rem, 3.8vw, 2.9rem); line-height:1.06; letter-spacing:-.02em;
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.tv__role{
  margin:.85rem 0 0; max-width:32ch;
  color:var(--brass-300); font-size:clamp(1rem, 1.4vw, 1.15rem); line-height:1.55;
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.tv__info.is-swapping .tv__name,
.tv__info.is-swapping .tv__role{ opacity:0; transform:translateY(6px); }

.tv__controls{ display:flex; gap:.7rem; margin-top:clamp(1.6rem,3vh,2.5rem); }
.tv__close, .tv__arrow{
  width:46px; height:46px; border-radius:50%; flex:none;
  border:1.5px solid rgba(255,255,255,.4); background:rgba(10,13,16,.4);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .15s var(--ease);
}
.tv__close:hover, .tv__arrow:hover{ border-color:var(--brass-400); background:rgba(255,255,255,.16); }
.tv__close:active, .tv__arrow:active{ transform:scale(.94); }
.tv__close:focus-visible, .tv__arrow:focus-visible{ outline:2px solid var(--brass-300); outline-offset:3px; }
.tv__close .svg-i, .tv__arrow .svg-i{ width:20px; height:20px; }

/* Onder 760px stapelt het: portret boven, naam en functie eronder, gecentreerd. */
@media (max-width:760px){
  .tv__panel{
    grid-template-columns:minmax(0,1fr); justify-items:center;
    gap:clamp(1rem,3vh,1.6rem); width:calc(100% - 1.2rem);
  }
  .tv__media{ justify-content:center; }
  .tv__media img{ max-height:min(56svh, 460px); }
  .tv__info{ text-align:center; }
  .tv__rule{ margin-left:auto; margin-right:auto; margin-bottom:.85rem; }
  .tv__controls{ justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .tv__backdrop, .tv__panel, .tv__media img, .tv__name, .tv__role{ transition:none; }
  .tv__panel{ transform:none; }
  .tv__info.is-swapping .tv__name,
  .tv__info.is-swapping .tv__role{ transform:none; }
}

/* 12.5 Materiaal/merken-rijtje (definitielijst-stijl, herbruikbaar) */
.deflist{ display:grid; gap:0; }
.deflist__row{
  display:grid; grid-template-columns:1fr; gap:.2rem 1.5rem;
  padding:1.05rem 0; border-top:1px solid var(--line);
}
.deflist__row:first-child{ border-top:0; }
.deflist__term{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.02rem; }
.deflist__desc{ color:var(--ink-mute); font-size:.95rem; }
@media (min-width:640px){ .deflist__row{ grid-template-columns:15rem 1fr; align-items:baseline; } }

/* 12.5b Stappenplan: een reeks in de tijd, met een lijn die de stappen verbindt.

   Bewust anders vormgegeven dan de genummerde .spec-kaarten die op dezelfde
   pagina kunnen staan: dat is een keuzemenu, dit is een volgorde. Vandaar een
   dunne rail met kleine rondjes in plaats van kaarten met grote cijfers.

   Het label boven elke stap zegt waar die stap plaatsvindt. Die afwisseling
   (praktijk, lab, praktijk) is het punt van de sectie: ze laat zien dat het een
   samenwerking is. Daar is geen extra grafisch mechanisme voor nodig, de reeks
   labels onder elkaar IS het beeld. */
/* De reset nult ul, maar niet ol. Dit is bewust een <ol> (het is een volgorde),
   dus de eigen nummering en inspringing van de browser moeten hier weg: de
   rondjes op de rail dragen de nummers al. */
.stappen{ display:grid; margin:0; padding:0; list-style:none; }
.stap{
  position:relative;
  display:grid; grid-template-columns:2.15rem minmax(0,1fr);
  column-gap:1.1rem;
  padding-bottom:1.9rem;
}
.stap:last-child{ padding-bottom:0; }
/* De lijn begint onder het rondje en stopt bij de volgende stap, dus hij hoeft
   nergens afgedekt te worden. Bij de laatste stap is er niets meer om naartoe
   te lopen. */
.stap:not(:last-child)::before{
  content:""; position:absolute; z-index:0;
  left:calc(1.075rem - .5px); top:2.45rem; bottom:.25rem; width:1px;
  background:var(--line-strong);
}
.stap__punt{
  position:relative; z-index:1;
  width:2.15rem; height:2.15rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper-raised); border:1px solid var(--line-strong);
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  font-variant-numeric:tabular-nums; color:var(--sage-600);
}
.stap__body{ min-width:0; padding-top:.15rem; }
.stap__waar{
  display:block; font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--sage-500);
}
.stap h3{
  font-family:var(--font-display); font-weight:600;
  font-size:1.1rem; color:var(--ink); letter-spacing:-.012em; margin:.3rem 0 0;
}
.stap p{ margin:.45rem 0 0; color:var(--ink-soft); font-size:.97rem; line-height:1.6; }

@media (min-width:640px){
  .stap{ grid-template-columns:2.4rem minmax(0,1fr); column-gap:1.4rem; padding-bottom:2.2rem; }
  .stap__punt{ width:2.4rem; height:2.4rem; font-size:.85rem; }
  .stap:not(:last-child)::before{ left:calc(1.2rem - .5px); top:2.75rem; }
  .stap h3{ font-size:1.14rem; }
}

/* 12.6 Actieve mega-knop (subpagina onder "Ons werk") */
.nav__mega-btn.is-active{ color:var(--brass-700); }

/* 12.7 Prose-blok op licht (langere SEO-tekst, leesbaar ritme) */
.rich{ max-width:68ch; color:var(--ink-soft); }
.rich > * + *{ margin-top:1.1rem; }
.rich h3{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.4rem; letter-spacing:-.015em; margin-top:2rem; }
.rich h4{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.12rem; margin-top:1.6rem; }
.rich ul{ display:grid; gap:.55rem; }
.rich ul li{ position:relative; padding-left:1.5rem; }
.rich ul li::before{
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%;
  background:var(--brass-500); box-shadow:0 0 0 3px var(--brass-100);
}
.rich strong{ color:var(--ink); font-weight:600; }
.rich a{ color:var(--brass-700); font-weight:600; border-bottom:1px solid var(--brass-300); transition:border-color .2s var(--ease); }
.rich a:hover{ border-color:var(--brass-600); }

/* =====================================================================
   12.8 Snelmenu op de rechtermuisknop
   Donker paneel in de stijl van de fotoviewer en het offcanvas-menu.
   Alleen op een muisaanwijzer; zie script.js voor de voorwaarden.
   ===================================================================== */
.ctx{
  position:fixed; top:0; left:0; z-index:90;
  width:270px; max-width:calc(100vw - 1.5rem);
  padding:.45rem;
  background:rgba(13,16,19,.965);
  backdrop-filter:saturate(150%) blur(14px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-card);
  box-shadow:0 32px 70px -26px rgba(0,0,0,.85), 0 10px 26px -16px rgba(0,0,0,.7);
  color:var(--on-dark);
  opacity:0; transform:scale(.965);
  transform-origin:var(--ctx-origin, top left);
  transition:opacity .15s var(--ease), transform .15s var(--ease);
}
.ctx.is-open{ opacity:1; transform:none; }

.ctx__head{
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .65rem .6rem;
  font-family:var(--font-text); font-size:.62rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass-400);
}
.ctx__dash{ width:14px; height:1px; background:var(--brass-400); flex:none; }

.ctx__item{
  display:flex; align-items:center; gap:.75rem; width:100%;
  min-height:40px; padding:.5rem .65rem;
  border:0; border-radius:var(--r-ctl); background:none;
  color:var(--on-dark); text-align:left; cursor:pointer;
  font:500 .875rem/1.25 var(--font-text);
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.ctx__item .svg-i{ width:16px; height:16px; flex:none; color:var(--on-dark-dim); transition:color .16s var(--ease); }
.ctx__item:hover, .ctx__item:focus-visible{ background:rgba(255,255,255,.07); outline:none; }
.ctx__item:hover .svg-i, .ctx__item:focus-visible .svg-i{ color:var(--brass-400); }
.ctx__item:active{ transform:translateY(1px); }

.ctx__item--accent{ color:#fff; font-weight:600; }
.ctx__item--accent .svg-i{ color:var(--brass-400); }
.ctx__item--accent:hover, .ctx__item--accent:focus-visible{ background:var(--sage-700); }
.ctx__item--accent:hover .svg-i, .ctx__item--accent:focus-visible .svg-i{ color:#fff; }
.ctx__go{ margin-left:auto; transition:transform .2s var(--ease); }
.ctx__item--accent:hover .ctx__go{ transform:translateX(3px); }

.ctx__item.is-done{ color:var(--brass-300); }
.ctx__item.is-done .svg-i{ color:var(--brass-400); }

.ctx__sep{ height:1px; margin:.4rem .65rem; background:rgba(255,255,255,.09); }

.ctx__keys{ padding:.15rem .65rem .35rem; display:grid; gap:.45rem; }
.ctx__keys li{ display:flex; align-items:center; gap:.6rem; font-size:.72rem; color:var(--on-dark-dim); }
.ctx__kbd{ margin-left:auto; display:flex; align-items:center; gap:.22rem; flex:none; }
.ctx__keys kbd{
  font:600 .62rem/1 var(--font-text); letter-spacing:.02em; color:var(--on-dark-dim);
  padding:.3rem .4rem; min-width:1.4rem; text-align:center;
  border:1px solid rgba(255,255,255,.14); border-radius:5px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}

@media (prefers-reduced-motion:reduce){
  .ctx{ transition:none; transform:none; }
  .ctx__item, .ctx__go{ transition:none; }
}

/* =====================================================================
   13. Sitemap en 404

   Twee pagina's die de bestaande taal hergebruiken: één accent, hetzelfde
   radius-systeem, dezelfde easing. Geen nieuwe kleuren en geen nieuwe vormen.
   ===================================================================== */

/* ---------------------------------------------------------------------
   13.1 404: één scherm, links het gesprek, rechts het beeld.

   De pagina heeft bewust geen secties eronder. Wie hier belandt zoekt een weg
   terug, geen verhaal. De routes staan daarom meteen onder de knoppen en niet
   achter een scroll.

   Op een telefoon staat de tekst boven de foto. Dat moet ook: de navbalk is
   daar doorzichtig tot je scrolt en heeft dus een donker vlak onder zich nodig
   om het witte logo op te laten staan. Zou de foto boven komen, dan zou het
   logo op een lichte plek kunnen vallen.
   --------------------------------------------------------------------- */
.err{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  background:var(--sage-950);
  color:var(--on-dark);
}
.err__copy{
  padding-top:calc(var(--topbar-h) + var(--nav-h) + clamp(1.6rem, 5vh, 3rem));
  padding-bottom:clamp(2.4rem, 6vh, 3.4rem);
  padding-inline:var(--pad);
}
.err h1.display{
  color:var(--on-dark); font-weight:800;
  margin:1rem 0 0; max-width:16ch;
  font-size:clamp(1.9rem, 0.8rem + 5.6vw, 3.4rem);
  line-height:1.05; letter-spacing:-.028em;
}
.err h1 .accent{ color:var(--brass-300); }
.err__lead{
  margin-top:1.1rem; max-width:44ch;
  color:var(--on-dark-dim);
  font-size:clamp(1.02rem, 1.3vw, 1.18rem); line-height:1.62;
  text-wrap:pretty;
}
.err__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:clamp(1.6rem, 3.4vh, 2.2rem); }
.err__actions .btn svg{ transition:transform .25s var(--ease); }
.err__actions .btn--primary:hover svg{ transform:translateX(-3px); }
.err__hr{
  height:1px; border:0; background:var(--on-dark-line);
  margin:clamp(1.8rem, 4vh, 2.6rem) 0 .4rem;
}

/* De weg terug. Eén haarlijn boven elke rij, niet boven én onder: een lijst
   met dubbele lijnen leest als een tabel, niet als navigatie. */
.err__routes{ display:grid; grid-template-columns:1fr; }
.err__routes a{
  display:flex; align-items:center; gap:1rem;
  padding:.95rem .35rem;
  border-top:1px solid var(--on-dark-line);
  transition:padding-left .25s var(--ease), background-color .25s var(--ease);
}
.err__routes a:hover{ padding-left:.85rem; background:rgba(255,255,255,.035); }
.err__route-tekst{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.err__route-naam{
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  color:var(--on-dark); letter-spacing:-.01em;
}
.err__route-uitleg{ font-size:.86rem; color:var(--on-dark-dim); line-height:1.45; }
.err__route-pijl{
  margin-left:auto; flex:none; width:1.15rem; height:1.15rem;
  color:var(--brass-400); opacity:.7;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.err__routes a:hover .err__route-pijl{ transform:translateX(4px); opacity:1; }

.err__media{ position:relative; overflow:hidden; aspect-ratio:16/11; }
/* Dezelfde neutrale grading als de hero's: alleen een donkere hoek voor diepte,
   geen kleurwash. ::before is vrij; ::after doet de veeg naar de donkere kolom en
   tekent er overheen, wat klopt: eerst graden, dan overvloeien. */
.err__media::before{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:linear-gradient(118deg, rgba(18,22,26,.5) 0%, rgba(13,17,20,0) 48%, rgba(226,228,230,.2) 100%);
}
.err__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1) contrast(1.04) brightness(.92); }
/* De foto raakt op mobiel de donkere kolom erboven: een korte veeg maakt van
   de twee vlakken één beeld in plaats van twee losse blokken. */
.err__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--sage-950) 0%, rgba(13,16,19,0) 24%);
}

@media (min-width:560px){
  .err__routes{ grid-template-columns:1fr 1fr; column-gap:2.4rem; }
}

@media (min-width:992px){
  .err{ grid-template-columns:1.04fr .96fr; align-items:center; min-height:100svh; }

  /* De tekst begint op dezelfde lijn als .wrap op elke andere pagina, terwijl
     de foto tot de rechterrand van het scherm doorloopt. Vandaar de berekening
     in plaats van een .wrap eromheen. body heeft overflow-x:hidden, dus de
     breedte van de scrollbar kan hier geen horizontale schuifbalk opleveren. */
  .err__copy{
    padding-left:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
    padding-right:clamp(2rem, 4vw, 4.5rem);
    padding-block:calc(var(--topbar-h) + var(--nav-h) + 2rem) 3rem;
  }
  .err__media{ aspect-ratio:auto; align-self:stretch; min-height:100svh; }
  .err__media::after{
    background:linear-gradient(90deg, var(--sage-950) 0%, rgba(13,16,19,0) 22%);
  }
  .err__routes{ column-gap:2rem; }
}

/* ---------------------------------------------------------------------
   13.2 Sitemap
   --------------------------------------------------------------------- */
.sm-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.6rem, 5vw, 4rem); }
/* Dit zijn kolomkoppen, geen sectiekoppen. Op de schaal van h2.display duwen ze
   de lijst eronder weg en gaan ze concurreren met de h1 in de banner erboven. */
.sm-grid h2.display{
  font-size:clamp(1.45rem, 1.1rem + 1.1vw, 1.85rem);
  letter-spacing:-.02em; margin-bottom:1.3rem;
}

/* Rijen, met één haarlijn boven elke rij. Zie de opmerking bij .err__routes. */
.sm-list a{
  display:flex; align-items:center; gap:1rem;
  padding:1rem .3rem;
  border-top:1px solid var(--line);
  transition:padding-left .25s var(--ease), background-color .25s var(--ease);
}
.sm-list li:last-child a{ border-bottom:1px solid var(--line); }
.sm-list a:hover{ padding-left:.8rem; background:var(--sage-50); }
.sm-list__tekst{ display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.sm-list__naam{
  font-family:var(--font-display); font-weight:600; font-size:1.08rem;
  color:var(--ink); letter-spacing:-.012em;
}
.sm-list__uitleg{ font-size:.88rem; color:var(--ink-mute); line-height:1.45; }
.sm-pijl{
  margin-left:auto; flex:none; width:1.15rem; height:1.15rem;
  color:var(--brass-600); opacity:.75;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.sm-list a:hover .sm-pijl{ transform:translateX(4px); opacity:1; }

/* De werkpagina's krijgen hun beeld mee: dat is waar een verwijzer voor komt. */
.sm-cards{ display:grid; gap:1rem; }
.sm-card{
  display:grid; grid-template-columns:96px 1fr; gap:1.1rem; align-items:center;
  padding:.85rem; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--paper-raised); box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.sm-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.sm-card__img{ display:block; border-radius:calc(var(--r-card) - 8px); overflow:hidden; aspect-ratio:4/3; }
.sm-card__img img{ width:100%; height:100%; object-fit:cover; }
.sm-card__body{ display:flex; flex-direction:column; gap:.22rem; min-width:0; }
.sm-card__naam{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:1.06rem;
  color:var(--ink); letter-spacing:-.015em;
}
.sm-card__naam .sm-pijl{ margin-left:0; width:.95rem; height:.95rem; }
.sm-card:hover .sm-pijl{ transform:translate(3px,-3px); opacity:1; }
.sm-card__uitleg{ font-size:.88rem; color:var(--ink-soft); line-height:1.5; }
.sm-card__meta{ font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sage-500); margin-top:.15rem; }

/* Ankers per pagina. Chips en geen lijst: veertig regels onder elkaar leest
   niemand, veertig chips overzie je in één blik. */
.sm-ankers{ display:grid; grid-template-columns:1fr; gap:clamp(1.6rem, 3vw, 2.2rem); }
.sm-ankers__kop{
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
  margin:0 0 .8rem;
}
.sm-ankers__kop a{ transition:color .2s var(--ease); }
.sm-ankers__kop a:hover{ color:var(--brass-700); }
.sm-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sm-chip{
  display:inline-flex; align-items:center;
  padding:.42rem .85rem; border-radius:var(--r-pill);
  font-size:.86rem; font-weight:500; line-height:1.3;
  color:var(--ink-soft); background:var(--sage-50);
  border:1px solid var(--line);
  transition:color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.sm-chip:hover{ color:var(--brass-700); background:var(--brass-100); border-color:var(--brass-300); }

@media (min-width:768px){
  .sm-ankers{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,4vw,3.5rem); }
}
@media (min-width:992px){
  .sm-grid{ grid-template-columns:1fr 1.12fr; gap:clamp(3rem, 5vw, 5rem); }
  .sm-card{ grid-template-columns:132px 1fr; gap:1.3rem; padding:1rem; }
}

@media (prefers-reduced-motion:reduce){
  .err__routes a, .err__route-pijl,
  .sm-list a, .sm-pijl, .sm-card, .sm-chip{ transition:none; }
  .err__routes a:hover{ padding-left:.35rem; }
  .sm-list a:hover{ padding-left:.3rem; }
  .sm-card:hover{ transform:none; }
}