/* ==========================================================================
   ERO Consult, gedeelde stijlen
   Het bouwplan voor groei, donkere blauwdruk-look met messing-accent
   ========================================================================== */

/* --- Fonts, zelf gehost --- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-v21-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-v21-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-v21-latin-600italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-v4-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-v4-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-v4-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* --- Basis, tokens --- */
:root {
  color-scheme: dark;
  --ink: #0f1216;
  --ink-2: #151b23;
  --ink-3: #1c242e;
  --papier: #f3efe7;
  --papier-2: #eae4d6;
  --dim: #a6a094;
  --dim-op-licht: #6e675c;
  --lijn: rgba(243, 239, 231, 0.08);
  --lijn-sterk: rgba(243, 239, 231, 0.14);
  --brass: #c7a668;
  --brass-diep: #a98a4e;
  --succes: #3f9e7d;
  --fout: #d16a5f;

  --font-kop: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-tekst: 62ch;

  /* Spacingschaal, Fibonacci: het ritme van het logo wordt het ritme van de site.
     Oude 8px-schaal vervangen door 13/21/34/55/89/144, optisch gekozen per rol.
     sp-3 en sp-8 zijn bewust gelijk aan hun buur (21 / 55): bij twijfel de
     kleinere Fibonacci-waarde, rustiger ritme boven schaalpuurheid. */
  --sp-1: 13px;
  --sp-2: 21px;
  --sp-3: 21px;
  --sp-4: 34px;
  --sp-6: 55px;
  --sp-8: 55px;
  --sp-12: 89px;
  --sp-14: 144px;

  /* Container-zijpadding: 55 desktop, 34 tablet, 21 mobiel */
  --pad-x: var(--sp-6);
  /* Sectie-padding: 144 desktop, 89 tablet, 55 mobiel, Fibonacci-schaal */
  --pad-y: var(--sp-14);

  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 900px) {
  :root {
    --pad-x: 34px;
    --pad-y: var(--sp-12);
  }
}
@media (max-width: 560px) {
  :root {
    --pad-x: var(--sp-2);
    --pad-y: var(--sp-6);
  }
}

* {
  box-sizing: border-box;
}
html {
  overflow-x: clip;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
}
body {
  overflow-x: clip;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Achtergrond-warmte: een zeer zachte champagne-gloed linksboven plus een
   nauwelijks zichtbare verticale verdieping, zodat de pagina ademt zonder
   dat je het op een screenshot meteen aanwijst. Bewust geen paars/blauw en
   geen felle overgang, dat leest als AI-gradientlook. Beide lagen zijn aan
   de root-achtergrond gehangen (niet background-attachment: fixed, dat
   geeft repaint-gedoe op mobiele Safari): de radiale gloed dooft ruim voor
   100vh uit, het verticale verloop loopt over de eerste 100vh en laat de
   rest van de pagina op de effen --ink liggen. */
body {
  background:
    radial-gradient(900px 900px at 6% -4%, rgba(199, 166, 104, 0.04), transparent 62%),
    linear-gradient(to bottom, #12151a 0, #0d1014 100vh, var(--ink) 100vh);
  color: var(--papier);
  font-family: var(--font-body);
  /* Bewuste uitzondering op de Fibonacci-typetrap: 17px valt niet op de rij
     13/21/34/55/89/144, maar is de leesbaarheidsgrens voor lopende tekst.
     Fibonacci regeert de compositie, niet de leesbaarheid van elke letter. */
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Anker-doelen: scroll-margin gelijk aan topbalk (34) + headerhoogte (~64) +
   extra marge, voor prettige smooth-scroll-landing. Sinds opdracht 2/3 (de-
   AI-ronde): topbalk erbij, header verdund van ~72 naar ~64px. */
[id] {
  scroll-margin-top: calc(34px + 64px + var(--sp-3));
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* Fotogrades, warme sepia-tint zodat alle beelden als 1 serie ogen.
   Statische beelden (nooit per-frame getransformeerd) krijgen de tint
   gewoon als CSS-filter, dat is goedkoop omdat er niets naast beweegt. */
.hero-achtergrond video,
.hero-achtergrond img,
.pagina-beeld img {
  filter: saturate(0.92) contrast(0.97) sepia(0.06);
}

/* Bewegende beelden (scroll-zoom, parallax-sticky) krijgen de grade NIET
   als filter op het element dat ook een per-frame transform krijgt: dat
   dwingt de browser om elk frame opnieuw te rasterizen boven op de
   transform-repaint, dubbel werk voor niets. In plaats daarvan ligt de
   warme tint als statische overlay-laag (::after) erbovenop: 1 keer
   getekend, blijft daarna gratis liggen terwijl alleen de laag eronder
   transformeert. Visueel gelijkwaardig aan de vorige filter-tint. */
.scroll-zoom-beeld,
.case-parallax-sticky {
  position: relative;
}
.scroll-zoom-beeld::after,
.case-parallax-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(199, 166, 104, 0.1);
  mix-blend-mode: multiply;
}
.scroll-zoom-beeld img,
.case-parallax-sticky img {
  filter: none;
}

a {
  color: inherit;
}

/* Links in lopende tekst: champagne underline, verdiept bij hover */
.faq-item-body a,
.subtitle a,
p a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brass);
}
.faq-item-body a:hover,
.subtitle a:hover,
p a:hover {
  color: var(--brass-diep);
  text-decoration-color: var(--brass-diep);
}

::selection {
  background: var(--brass);
  color: var(--ink);
}

/* Scrollbar, dunne variant, geen felle default (webkit) en geen paars/blauw
   systeemkleur. Track effen ink, thumb een iets lichter donkerblauwgrijs
   (#2a323e) dat bij hover naar --dim opklaart. */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ink);
}
::-webkit-scrollbar-thumb {
  background: #2a323e;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dim);
}
html {
  scrollbar-color: #2a323e var(--ink);
  scrollbar-width: thin;
}

/* Focus, zichtbaar overal */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --- Skip-link --- */
.skip-link {
  position: absolute;
  left: var(--sp-1);
  top: -60px;
  background: var(--brass);
  color: var(--ink);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 13px;
  font-weight: 600;
  font-size: 14px;
  z-index: 999;
  transition: top 0.2s var(--easing);
}
.skip-link:focus {
  top: 12px;
}

/* --- Typografie --- */
h1,
h2,
h3 {
  font-family: var(--font-kop);
  font-weight: 600;
  color: var(--papier);
  margin: 0;
  letter-spacing: 0;
}
/* h4 bewust NIET in Cormorant: bij deze kleine rol (kaartkoppen als
   "Nuchter", "Contentstrategie op maat", "E-mail") wordt de serif broos
   onder de 21px-Fibonacci-ondergrens. Regel: geen Cormorant onder 21px, dus
   h4 krijgt Instrument Sans 600 met iets ingehouden letter-spacing, dat
   leest steviger op kleine kaartkop-maat dan een dunne serif ooit zou doen. */
h4 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--papier);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Nette regelafbrekingen, progressive enhancement, oudere browsers negeren het */
h1,
h2,
h3 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* h1 op de Fibonacci-trap: standaard (subpagina-heroes en paginakoppen)
   loopt van 55 tot 89px. De homepage-hero krijgt een eigen, grotere top
   (zie .hero-copy h1 verderop), waar de kop bewust over het beeld mag vallen. */
h1 {
  font-size: clamp(55px, 7.4vw, 93px);
  line-height: 1.05;
  font-weight: 600;
}
h2 {
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.12;
}
h3 {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 600;
}
h4 {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
}

p {
  margin: 0;
}

.accent {
  color: var(--brass);
}
.accent-italic {
  color: var(--brass);
  font-style: italic;
  font-weight: 600;
}

/* Kernwoord-wrapper: houdt het accentwoord en zijn maatstreep-onderstreping samen */
.kernwoord {
  display: inline-block;
  position: relative;
}
.maatstreep {
  display: block;
  width: 100%;
  height: 0.22em;
  overflow: visible;
}
.maatstreep svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
h1 .kernwoord .maatstreep,
h2 .kernwoord .maatstreep {
  position: absolute;
  left: 0;
  bottom: calc(-0.16em - 4px);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--brass);
  display: inline-block;
}

.subtitle {
  font-size: 19px;
  color: var(--dim);
  max-width: var(--max-tekst);
  margin-top: var(--sp-2);
  line-height: 1.6;
}
.subtitle.tight {
  max-width: 52ch;
}

.papier .subtitle {
  color: var(--dim-op-licht);
}

/* --- Layout --- */
.wrap {
  width: 100%;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.section {
  padding-top: var(--pad-y);
  padding-bottom: var(--pad-y);
  position: relative;
}
.section-head {
  max-width: 720px;
  margin-bottom: var(--sp-8);
}
.section-head p.subtitle {
  margin-top: var(--sp-2);
}

.papier {
  background: var(--papier);
  color: var(--ink);
}
.papier h1,
.papier h2,
.papier h3,
.papier h4 {
  color: var(--ink);
}
.papier .eyebrow {
  color: var(--brass-diep);
}
.papier .eyebrow::before {
  background: var(--brass-diep);
}

/* --- Topbalk, boven de header (Nederparts-patroon) ---
   Vaste hoogte 34px (Fibonacci-token), normale documentflow (NIET sticky):
   scrollt gewoon met de pagina mee weg. De sticky header eronder heeft zijn
   eigen top: 0, dus zodra de balk voorbij is schuift de header vanzelf
   precies tegen de viewport-rand, zonder gat of sprong. */
.topbalk {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-2);
  border-bottom: 1px solid var(--lijn);
  padding: 0 var(--pad-x);
}
.topbalk-rij {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--dim);
  white-space: nowrap;
}
.topbalk-punt {
  color: var(--brass);
  font-size: 8px;
}
/* Mobiele variant: 1 samengevoegde regel, de losse items en punten verbergen */
.topbalk-mobiel {
  display: none;
}
@media (max-width: 700px) {
  .topbalk-rij {
    display: none;
  }
  .topbalk-mobiel {
    display: block;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  padding: var(--sp-1) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s var(--easing), border-color 0.25s var(--easing), padding 0.25s var(--easing);
}
.site-header.is-scrolled {
  background: rgba(15, 18, 22, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
  padding-top: var(--sp-1);
  padding-bottom: var(--sp-1);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  text-decoration: none;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 24px;
  color: var(--papier);
  letter-spacing: 0.01em;
  /* Eigen krappe line-height i.p.v. de geerfde 1.65 van body: bij de dunnere
     header (opdracht 3) telt elke overtollige px in de content-hoogte mee. */
  line-height: 1.2;
}
.logo .logo-beeldmerk {
  height: 29px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.logo .logo-tekst {
  display: flex;
  align-items: baseline;
  /* Bewuste uitzondering op de Fibonacci-gap-token: het logo moet als 1
     lockup lezen ("EROconsult"), niet als 2 losse woorden. 5px is de
     optisch juiste afstand, geen Fibonacci-waarde. */
  gap: 5px;
}
.logo .logo-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.main-nav ul {
  list-style: none;
  display: flex;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
}
.main-nav a:not(.btn) {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--papier);
  position: relative;
  padding-bottom: var(--sp-1);
  line-height: 1.2;
}
.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--brass);
  transition: right 0.25s var(--easing);
}
.main-nav a:not(.btn):hover::after,
.main-nav a:not(.btn).is-active::after {
  right: 0;
}
.main-nav a:not(.btn).is-active {
  color: var(--brass);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--papier);
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.hamburger svg {
  width: 22px;
  height: 22px;
}

/* --- Knoppen, pill-vorm ---
   border-radius 999px is een bewuste vormkeuze naast het Fibonacci-radius-
   systeem voor vlakken (5/8/13): knoppen zijn hier de enige pil-vorm op de
   site. .btn-primary: hairline brass rand, transparant vlak, rechts IN de
   knop een gevulde brass cirkel (34px) met een ink-pijl. Hover vult de hele
   pill zich brass en wordt de tekst ink, de pijl-cirkel schuift 3px mee naar
   rechts. .btn-quiet (secundair): dezelfde pill, alleen een hairline rand,
   geen cirkel, hover verandert enkel de randkleur. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background 0.25s var(--easing), color 0.25s var(--easing), border-color 0.25s var(--easing);
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: transparent;
  color: var(--papier);
  border: 1px solid var(--brass);
}
.btn-primary:hover {
  background: var(--brass);
  color: var(--ink);
}
.btn-primary:hover .btn-cirkel {
  transform: translateX(3px);
}

/* De brass cirkel zit ALTIJD gevuld, in rust en bij hover: alleen de pill
   eromheen verandert van transparant naar brass. Ink-pijl blijft dus op elke
   staat leesbaar tegen zijn eigen cirkel-achtergrond. */
.btn-cirkel {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s var(--easing), background 0.25s var(--easing);
}
.btn-primary:hover .btn-cirkel {
  /* Cirkel blijft brass, maar krijgt bij hover een klein contrastrandje zodat
     hij ook op de nu-brass pill-achtergrond zichtbaar afgebakend blijft. */
  background: var(--ink);
  color: var(--brass);
}
.btn-cirkel svg {
  width: 15px;
  height: 15px;
}

/* .btn-quiet (secundair): zelfde pill, alleen hairline rand, geen cirkel. */
.btn-quiet {
  background: transparent;
  color: var(--papier);
  border: 1px solid var(--lijn-sterk);
  padding: var(--sp-2) var(--sp-3);
}
.btn-quiet:hover {
  background: transparent;
  border-color: var(--brass);
}

.papier .btn-quiet {
  color: var(--ink);
  border: 1px solid rgba(15, 18, 22, 0.16);
}
.papier .btn-quiet:hover {
  background: transparent;
  border-color: var(--brass-diep);
}

/* .papier .btn-primary (opdracht 4-fix, menselijkheidsronde): op een lichte
   /papieren achtergrond (zoals de contactformulier-kaart) is de standaard
   --papier-tekstkleur van .btn-primary in rust onleesbaar, bijna wit-op-
   ivoor. Zelfde probleem als .btn-quiet hierboven al oploste voor de rustige
   variant: tekst naar --ink. De brass-cirkel blijft ongewijzigd (die
   contrasteert al op elke achtergrond), alleen de tekst ernaast wordt
   donker leesbaar. */
.papier .btn-primary {
  color: var(--ink);
}
.papier .btn-primary:hover {
  color: var(--ink);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.18s var(--easing);
}

.btn-sm {
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2);
}
.btn-sm .btn-cirkel {
  width: 28px;
  height: 28px;
}
.btn-sm .btn-cirkel svg {
  width: 13px;
  height: 13px;
}
.btn-quiet.btn-sm {
  padding: var(--sp-1) var(--sp-2);
}

/* Header-specifieke verdichting (opdracht 3, header dunner): de knop-
   component zelf is bewust ruim opgezet (34px cirkel op .btn-primary, 28px
   op .btn-sm) voor gebruik in hero/CTA-band/FAQ-kaarten, waar een steviger
   aanraakdoel gewenst is. In de dunne 13px-padding header zou zelfs de
   .btn-sm-maat de headerhoogte weer optrekken tot boven het beoogde ~64px
   (55px content + 26px headerpadding). Deze scoped override raakt alleen
   knoppen die daadwerkelijk in .site-header staan, .btn-sm blijft overal
   elders op zijn eigen, grotere maat. */
.site-header .btn {
  padding-top: 5px;
  padding-bottom: 5px;
}
.site-header .btn-cirkel {
  width: 24px;
  height: 24px;
}
.site-header .btn-cirkel svg {
  width: 12px;
  height: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover .btn-cirkel {
    transform: none;
  }
}

/* --- Header-CTA, stille variant ---
   Gebruikt op pagina's waar de hero al een gevulde primaire knop toont (index
   en de 4 dienstpagina's): de header-knop wordt dan een tekstlink met pijl en
   een hairline-onderstreping die intrekt bij hover, zodat er nooit 2 gevulde
   primaire knoppen in dezelfde eerste viewport concurreren. Geen achtergrond,
   geen rand, geen magnetisme (dat blijft voorbehouden aan .btn-primary). Op
   pagina's zonder hero-CTA (cases, contact) behoudt de header gewoon
   .btn-primary, zie de klasse op de <a> zelf per pagina. */
.header-cta-quiet {
  background: transparent;
  color: var(--papier);
  /* Asymmetrisch: alleen onder padding (ruimte voor de hover-underline
     ::after), boven geen padding nodig, de flex-container (.nav-actions,
     align-items: center) centreert de link toch al verticaal. Met padding
     boven EN onder werd de content-hoogte van deze link de bepalende factor
     voor de hele headerhoogte (opdracht 3: header dunner maken). */
  padding: 0 0 var(--sp-1);
  border-radius: 0;
  position: relative;
  /* Eigen krappe line-height i.p.v. de geerfde 1.65 van body: die was voor
     leesbare lopende tekst bedoeld, niet voor een 1-regelig label in de
     header. */
  line-height: 1.2;
}
.header-cta-quiet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--brass);
  transition: right 0.25s var(--easing);
}
.header-cta-quiet:hover {
  background: transparent;
  color: var(--papier);
  transform: none;
}
.header-cta-quiet:hover::after {
  right: 0;
}
.header-cta-quiet:active {
  transform: none;
}

/* --- Mobile nav overlay --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 300;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2) var(--pad-x);
  transform: translateY(-100%);
  transition: transform 0.32s var(--easing);
  visibility: hidden;
}
.nav-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
}
.nav-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* Ruimte reserveren rechts zodat de vast-gepositioneerde sluitknop nooit
     over het logo heen kan vallen op smalle schermen. */
  padding-right: 55px;
}
/* Sluitknop: 44x44px tap-gebied rechtsboven in de overlay met zelfgetekende
   X (2px strokes, papier-kleur). LET OP: position absolute, niet fixed. De
   overlay heeft een transform (slide-in), en fixed binnen een getransformeerde
   voorouder gedraagt zich als absolute t.o.v. die voorouder. Absolute maakt
   dat gedrag expliciet: de knop reist met de overlay mee en staat bij een
   open overlay (inset 0) altijd rechtsboven in beeld. */
.nav-overlay-close {
  position: absolute;
  top: var(--sp-2);
  right: var(--pad-x);
  z-index: 400;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-overlay-close::before,
.nav-overlay-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  background: var(--papier);
  border-radius: 1px;
}
.nav-overlay-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav-overlay-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.nav-overlay ul {
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
/* Bewust gescoped tot binnen de <ul> (i.p.v. het bredere ".nav-overlay
   a:not(.btn)"): die bredere selector matchte ook het logo-lockup boven de
   lijst (een <a class="logo">, dus ook geldig als "a:not(.btn)") en gaf het
   dan display: block met gelijke of hogere specificiteit dan .logo's eigen
   display: flex, wat het logo liet wrappen (beeldmerk boven tekst, opdracht
   12b). Deze regel hoort alleen bij de menu-links, dus scopen naar hun
   daadwerkelijke structurele plek lost het bij de bron op. */
.nav-overlay ul a:not(.btn) {
  text-decoration: none;
  font-family: var(--font-kop);
  font-size: 34px;
  font-weight: 500;
  color: var(--papier);
  display: block;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--lijn);
}
.nav-overlay ul a:not(.btn):hover,
.nav-overlay ul a:not(.btn):focus-visible {
  color: var(--brass);
}
.nav-overlay .btn {
  margin-top: var(--sp-4);
  align-self: flex-start;
}

@media (max-width: 860px) {
  /* Beide header-CTA-varianten (opdracht 3: .btn-primary op cases/contact,
     .header-cta-quiet op de andere 5 pagina's) verdwijnen op mobiel, de
     mobiele overlay heeft zijn eigen knop. .nav-actions > a dekt beide
     klassen in 1 regel i.p.v. ze los te moeten opsommen. */
  .main-nav ul,
  .main-nav .nav-actions > a.btn {
    display: none;
  }
  .main-nav {
    gap: 0;
  }
  .hamburger {
    display: inline-flex;
  }
}

/* --- Hero (fullbleed video-achtergrond) --- */
.hero-sectie {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 84vh;
  overflow: hidden;
}
@supports (height: 100svh) {
  .hero-sectie {
    min-height: 84svh;
  }
}
/* Hero-achtergrond (opdracht fase 6, concept-wissel): geen video/foto meer,
   de hero is nu volledig typografisch op --ink. Deze laag draagt alleen nog
   een zeer zachte eigen dieptegloed bovenop de bestaande body-gradient, zodat
   de sectie niet vlakker oogt dan de rest van de pagina. */
.hero-achtergrond {
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 700px at 82% 20%, rgba(199, 166, 104, 0.05), transparent 65%);
}
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  /* De-AI-ronde (opdracht 5): kop is fors verkleind (151px -> 89px max), de
     vrijgekomen ruimte gaat naar extra witruimte boven/onder zodat de
     compositie lucht houdt in plaats van dat de kop simpelweg dichter op de
     rand van de sectie komt te staan. */
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
}
/* Homepage-hero h1: kleiner en menselijker dan de vorige 151px-kop (opdracht
   5, de-AI-ronde). Maat nu gelijk aan de standaard-koppen elders (max 89px),
   met een iets krappere line-height omdat Cormorant Garamond op deze schaal
   anders optisch los oogt tussen de regels. */
.hero-copy h1 {
  max-width: 20ch;
  font-size: clamp(40px, 5.5vw, 89px);
  line-height: 1.05;
}
.hero-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}

/* Mobiel (opdracht 4): de 2 hero-knoppen wrapten voorheen naar eigen
   intrinsieke breedte (ongelijk duo, gemeld probleem). Nu expliciet
   full-width en onder elkaar, met hetzelfde ritme (gelijke breedte, gelijke
   gap als de rest van de compositie). */
@media (max-width: 560px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 980px) {
  .hero {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }
}

/* --- Vertrouwensregel / stats --- */
.trustline {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.trust-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.trust-stat .num {
  font-family: var(--font-body);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.trust-stat .label {
  font-size: 14px;
  color: var(--dim);
  line-height: 1.4;
}

@media (max-width: 860px) {
  .trustline {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }
}
@media (max-width: 480px) {
  .trustline {
    grid-template-columns: 1fr;
  }
}

/* --- Diensten-grid --- */
.diensten-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  overflow: hidden;
}
.dienst-kaart {
  background: var(--ink);
  padding: var(--sp-6) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  transition: background 0.22s var(--easing);
  min-height: 260px;
}
.dienst-kaart:hover {
  background: var(--ink-3);
}
.dienst-kaart svg {
  width: 30px;
  height: 30px;
  color: var(--brass);
  stroke-width: 1.25;
  transition: color 0.22s var(--easing);
}
.dienst-kaart:hover svg {
  color: var(--brass-diep);
}
.dienst-kaart h3 {
  color: var(--papier);
}
.dienst-kaart p {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.55;
  flex-grow: 1;
}
.kaart-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass);
  margin-top: auto;
}
.kaart-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.22s var(--easing);
}
.dienst-kaart:hover .kaart-link svg {
  transform: translateX(3px);
}

@media (max-width: 980px) {
  .diensten-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .diensten-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Werkwijze / bouwplan-fasen --- */
.bouwplan {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 var(--sp-4);
  max-width: 820px;
}
.bouwplan-lijn-track {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  width: 56px;
}
.bouwplan-lijn-track svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 100%;
}
/* Voortgangslijn: transform scaleY vanuit de top, gestuurd door main.js via
   de gedeelde rAF/LERP-lus (interactieDeelnemers), niet via een eigen scroll-
   listener. transform-box: fill-box zorgt dat scaleY vanaf de eigen bounding
   box van de <line> schaalt (i.p.v. de hele SVG-viewport), transform-origin
   top zorgt dat de groei van boven naar beneden gaat, zoals de hairline-track
   ernaast. Startwaarde 0 (nog niets gevuld), main.js zet 'm daarna elk frame. */
.bouwplan-lijn-progress {
  transform-box: fill-box;
  transform-origin: top;
  transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bouwplan-lijn-progress {
    transform: scaleY(1) !important;
  }
}
.fase {
  grid-column: 2;
  padding-bottom: var(--sp-8);
  position: relative;
}
.fase:last-child {
  padding-bottom: 0;
}
.fase-nummer {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass);
  margin-bottom: var(--sp-2);
  display: block;
  font-variant-numeric: tabular-nums;
}
.fase h3 {
  margin-bottom: var(--sp-1);
}
.fase p {
  color: var(--dim);
  max-width: 48ch;
}
.fase-punt {
  position: absolute;
  left: -60px;
  /* Verticaal exact op de baseline van de nummers 01-04 (opdracht 7: sinds
     de omzetting naar Instrument Sans liggen de font-metrics net iets
     anders dan bij het vorige mono-font): gemeten via
     Range.getBoundingClientRect() op de tekstnode, de glyph-onderkant
     (zonder descenders bij cijfers) valt op 18.5px vanaf de top van .fase,
     dus het rondje-center (halve hoogte 6px) staat op top: 12.5px. */
  top: 12.5px;
  width: 12px;
  height: 12px;
  border-radius: 5px;
  background: var(--ink);
  border: 1px solid var(--lijn-sterk);
  transition: background 0.3s var(--easing), border-color 0.3s var(--easing);
}
.fase.is-actief .fase-punt {
  background: var(--brass);
  border-color: var(--brass);
}

@media (max-width: 640px) {
  .bouwplan {
    grid-template-columns: 32px 1fr;
    gap: 0 var(--sp-3);
  }
  .bouwplan-lijn-track {
    width: 32px;
  }
  .bouwplan-lijn-track svg {
    width: 32px;
  }
  .fase-punt {
    left: -36px;
  }
}

/* --- Werkwijze, 2-koloms op desktop: sticky intro links, fasen rechts --- */
.werkwijze-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--sp-12);
  align-items: start;
}
.werkwijze-intro {
  position: sticky;
  top: calc(34px + 64px + var(--sp-6));
}
.werkwijze-intro .section-head {
  margin-bottom: 0;
}
.werkwijze-fasen {
  min-width: 0;
}

@media (max-width: 980px) {
  .werkwijze-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .werkwijze-intro {
    position: static;
  }
}

/* --- Cases (algemeen) --- */
.case-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass);
  padding: var(--sp-1) var(--sp-1);
  background: rgba(217, 164, 91, 0.1);
  border-radius: 5px;
  align-self: flex-start;
}
.case-voetnoot {
  font-size: 12px;
  color: var(--dim);
  opacity: 0.7;
  margin-top: auto;
}

/* --- Parallax-cases (homepage) --- */
.case-parallax {
  height: 150vh;
}
@supports (height: 100svh) {
  .case-parallax {
    height: 150svh;
  }
}
.case-parallax-sticky {
  position: sticky;
  top: 12px;
  height: calc(100vh - 24px);
  max-width: 1400px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
}
@supports (height: 100svh) {
  .case-parallax-sticky {
    height: calc(100svh - 24px);
  }
}
.case-parallax-sticky img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-parallax-scrim {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
}
.case-parallax-tekst {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: 0 var(--sp-3);
  opacity: 0;
  will-change: transform, opacity;
}
.case-parallax-tekst .case-label {
  align-self: center;
  background: rgba(15, 18, 22, 0.55);
}
.case-parallax-kop {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.1;
  color: var(--papier);
  max-width: 18ch;
}

/* Reuzecijfer-overlay: het resultaat van de case als typografisch beeld,
   niet als leestekst. Rechts uitgelijnd BINNEN het panel, met minimaal 34px
   marge tot de rechter- en onderrand: de sticky-container knipt af via
   overflow: hidden, dus het cijfer moet volledig binnen die grens vallen,
   niet erover heen hangen. De scroll-choreografie in main.js beweegt dit
   element alleen verticaal (translate3d(0, y, 0)), nooit horizontaal, dus
   het cijfer kan nooit uit beeld schuiven tijdens het scrollen. */
.case-parallax-cijfer {
  position: absolute;
  right: 34px;
  bottom: 34px;
  z-index: 0;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: clamp(89px, 11vw, 199px);
  line-height: 1;
  color: var(--papier);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  white-space: nowrap;
  text-align: right;
}
.case-parallax-tekst {
  z-index: 1;
}
.case-parallax-verhaal {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-8) 0 var(--sp-12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.case-parallax-verhaal p {
  color: var(--dim);
  line-height: 1.65;
}
.case-parallax-verhaal .kolom-2 {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

@media (max-width: 780px) {
  .case-parallax-verhaal {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-6) 0 var(--sp-8);
  }
}

/* --- Over / kernwaarden (papier) ---
   #over is de enige bewuste patroonbreuk op de homepage (opdracht 9): de
   werkplekfoto (.over-beeld) breekt op desktop rechts uit de .wrap-container,
   tot de viewport-rand. overflow-x: clip zit hier lokaal op de sectie zelf
   (niet op body/html, dat zou een globale overflow-fix nodig maken die niet
   past bij een oplossing die maar 1 sectie raakt) zodat de negatieve margin
   van .over-beeld nooit een horizontale scrollbar kan veroorzaken. */
#over {
  overflow-x: clip;
}
.over-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-6);
  align-items: center;
}
.over-grid .section-head {
  margin-bottom: 0;
}
.over-beeld {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 18, 22, 0.08), 0 18px 44px rgba(15, 18, 22, 0.14);
}
.over-beeld img {
  display: block;
  width: 100%;
  height: auto;
}

/* Bleed: alleen vanaf de desktop-breedte waar .over-grid ook echt 2-koloms
   is (900px, zelfde drempel als de grid-media-query verderop). .wrap heeft
   rechts --pad-x aan padding; een even grote negatieve margin-right trekt
   .over-beeld exact tot de viewport-rand, ongeacht de gekozen --pad-x-
   waarde op dat breakpoint. Rechterkant verliest zijn radius (bleed-rand
   hoort recht te zijn), links en de rest blijven gewoon afgerond. */
@media (min-width: 901px) {
  .over-beeld {
    margin-right: calc(-1 * var(--pad-x));
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media (max-width: 900px) {
  .over-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

.kernwaarden {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.kernwaarde {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.kernwaarde svg {
  width: 28px;
  height: 28px;
  color: var(--brass-diep);
  stroke-width: 1.25;
}
.kernwaarde h4 {
  color: var(--ink);
}
.kernwaarde p {
  color: var(--dim-op-licht);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 780px) {
  .kernwaarden {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* --- Oprichters-quote, ivoren band --- */
.oprichter-quote {
  max-width: 880px;
  margin: var(--sp-12) auto 0;
  text-align: center;
}
.oprichter-quote blockquote {
  margin: 0;
  font-family: var(--font-kop);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.35;
  color: var(--ink);
}
/* Handtekening (opdracht 10, herontworpen in opdracht 17): subtiele SVG-
   krabbel boven de naamregel, de enige plek op de site met iets menselijks-
   getekends bij een naam. Losse vloeiende pennenstreek, geen font, zie de
   SVG zelf in de HTML. Breedte 110px is een bewuste, kleine uitzondering op
   de Fibonacci-spacingschaal (13/21/34/55/89/144): dat systeem geldt voor
   layout-ruimte (marges, paddings, gaps), dit is een illustratieve
   iconenmaat waar de leesbaarheid van de "Erik"-vorm de doorslag geeft.
   Bij het dichtstbijzijnde Fibonacci-getal (89px) versmelten de r/i/k-
   lussen te veel om nog als losse letters te lezen. */
.oprichter-quote .handtekening {
  display: block;
  width: 110px;
  height: auto;
  margin: var(--sp-3) auto 0;
}
.oprichter-quote .handtekening path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
.oprichter-quote figcaption {
  margin-top: var(--sp-1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass-diep);
}
.oprichter-quote figcaption .naam {
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-style: normal;
}

/* --- Contact-CTA band --- */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: left;
}
.cta-band-bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
}
.cta-band-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.cta-band-content .subtitle {
  color: var(--dim);
}
.cta-band-content .btn {
  margin-top: var(--sp-4);
}

/* --- Footer --- */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--lijn);
  padding-bottom: var(--sp-4);
}
.footer-top,
.footer-bottom {
  position: relative;
  z-index: 1;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
}
.footer-brand .logo {
  margin-bottom: var(--sp-2);
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: 15px;
  color: var(--dim);
}
.footer-contact a {
  text-decoration: none;
  color: var(--dim);
}
.footer-contact a:hover {
  color: var(--brass);
}
.footer-nav {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.footer-nav-col h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-bottom: var(--sp-1);
}
.footer-nav-col a {
  text-decoration: none;
  font-size: 15px;
  color: var(--papier);
}
.footer-nav-col a:hover {
  color: var(--brass);
}
.footer-bottom {
  border-top: 1px solid var(--lijn);
  padding-top: var(--sp-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-size: 13px;
  color: var(--dim);
}
/* Juridische onderregel (opdracht 1, menselijkheidsronde): KVK, BTW en de
   Privacy/Voorwaarden-links, in dezelfde stijl als het copyright ernaast.
   Eigen sub-flex zodat de bullets nooit los aan het begin/eind van een
   regel kunnen komen te staan bij het afbreken op smalle schermen. */
.footer-juridisch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.footer-juridisch-punt {
  color: var(--brass);
  font-size: 8px;
}
.footer-bottom a {
  text-decoration: none;
  color: var(--dim);
}
.footer-bottom a:hover {
  color: var(--brass);
}

@media (max-width: 640px) {
  .footer-top {
    flex-direction: column;
  }
  .footer-nav {
    gap: var(--sp-4);
  }
}

/* --- Footer, statement-CTA-band ---
   De volledige band is 1 link naar contact.html. Rust: ink-achtergrond,
   papier-tekst. Hover: inverteert rustig (papier-achtergrond, ink-tekst),
   geen doorlopende marquee-animatie, wel een korte pijl-verschuiving. */
.footer-cta-band {
  display: block;
  text-decoration: none;
  background: var(--ink);
  color: var(--papier);
  border-bottom: 1px solid var(--lijn);
  transition: background 0.3s var(--easing), color 0.3s var(--easing);
}
.footer-cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}
.footer-cta-band-regel {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: clamp(34px, 5.6vw, 72px);
  line-height: 1;
}
.footer-cta-band-pijl {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  stroke-width: 1;
  transition: transform 0.3s var(--easing);
}
.footer-cta-band:hover {
  background: var(--papier);
  color: var(--ink);
}
.footer-cta-band:hover .footer-cta-band-pijl {
  transform: translateX(13px);
}

@media (max-width: 560px) {
  .footer-cta-band-regel {
    font-size: clamp(28px, 9vw, 40px);
  }
  .footer-cta-band-pijl {
    width: 30px;
    height: 30px;
  }
}

/* --- Footer, tijd in Emmen --- */
.footer-tijd {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* --- Footer, gigantisch ERO-woordmerk in outline ---
   Puur decoratief, alleen stroke (geen vulling), heel laag opzichtig, ligt
   half achter de onderste footer-rand. Breedte ongeveer 90% van de viewport,
   via een brede viewBox die op containerbreedte wordt geschaald. */
.footer-woordmerk {
  display: block;
  width: 90%;
  max-width: 1600px;
  height: auto;
  margin: 0 auto;
  /* De helft van de tekst mag onder de footer-rand vallen: negatieve
     margin trekt het merk half uit beeld, overflow: hidden op de footer
     zelf knipt de rest netjes af. */
  margin-bottom: -55px;
  pointer-events: none;
  opacity: 0.05;
}
.footer-woordmerk text {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 200px;
  fill: none;
  stroke: var(--papier);
  stroke-width: 1.25;
}

@media (max-width: 640px) {
  .footer-woordmerk {
    margin-bottom: -21px;
  }
  .footer-woordmerk text {
    font-size: 190px;
  }
}

/* --- Scroll-reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--easing), transform 0.55s var(--easing);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 {
  transition-delay: 0.07s;
}
.reveal.delay-2 {
  transition-delay: 0.14s;
}
.reveal.delay-3,
.reveal.delay-4 {
  transition-delay: 0.21s;
}

/* ==========================================================================
   V3, Compositie en choreografie
   Line-mask reveals, redactionele diensten-rijen, spec-sheets, blauwdrukken
   ========================================================================== */

/* --- Line-mask reveal, hergebruikt voor h1 en h2 ---
   JS wrapt elke regel in .lm-line (overflow hidden, het masker) met
   daarbinnen .lm-inner (translateY 110% -> 0). Zonder JS of bij reduced
   motion blijft de kop gewoon een normale, zichtbare tekstblok. */
.lm-line {
  display: block;
  overflow: hidden;
}
.lm-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.85s var(--easing);
}
.lm-ready .lm-inner {
  transition-delay: calc(var(--lm-i, 0) * 90ms);
}
.lm-ready.is-visible .lm-inner {
  transform: translateY(0);
}
/* Na afloop van de reveal is het masker niet meer nodig: overflow open
   zodat decoratie die buiten de regel steekt (bv. de maatstreep onder een
   kernwoord) niet blijvend wordt afgesneden. Duurt langer dan de langste
   transitie zodat er geen vroegtijdige clip-flits ontstaat. */
.lm-ready.is-visible .lm-line {
  overflow: visible;
  transition: overflow 0s linear 1s;
}
/* Geen JS: h1/h2 blijven gewoon zichtbaar, geen .lm-line-structuur aanwezig */

/* --- Hero-blauwdruk, dunne meetlijnen + mono-cijfers over de video --- */
.hero-blauwdruk {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.17;
}
.hero-blauwdruk svg {
  width: 100%;
  height: 100%;
}
.hero-blauwdruk .bd-lijn {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* Bewuste uitzondering: dit zijn technisch-tekening-sierdetails op de
   blauwdruk-laag, geen leesbaar label, vandaar kleiner dan de 13px-labeltrap. */
.hero-blauwdruk .bd-cijfer {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--brass);
}
.hero-blauwdruk .bd-tekenen path,
.hero-blauwdruk .bd-tekenen line,
.hero-blauwdruk .bd-tekenen rect {
  stroke-dasharray: var(--bd-lengte, 1000);
  stroke-dashoffset: var(--bd-lengte, 1000);
  animation: bd-teken 1.6s var(--easing) forwards;
}
/* Scène-labels (SC.01/SC.02) verschijnen rustig na de teken-fase, geen
   doorlopende beweging: een korte, eenmalige opacity-fade bij page-load. */
.hero-blauwdruk .bd-cijfer {
  opacity: 0;
  animation: bd-label-in 0.6s var(--easing) 1.4s forwards;
}

/* --- Blauwdruk-correcties (opdracht 16, menselijkheidsronde) ---
   2 heel subtiele "fouten" in de tekenlaag: een doorgestreept maatgetal met
   een gecorrigeerd getal ernaast (34 -> 55, Fibonacci-knipoog) en een losse
   potlood-krul in de marge. Beide zitten al binnen de 0.12-opacity van
   .hero-blauwdruk, deze eigen opacity (1.25) tilt ze naar het gevraagde
   "rond 0.15" voor die twee details specifiek, zonder de rest van de laag
   te verzwaren. Puur decoratief, geen leesbare claim, dus geen aria-label
   nodig (de hele .hero-blauwdruk is al aria-hidden). Op mobiel weg: op een
   kleine hero wordt de tekenlaag al snel druk, deze twee handgeschreven
   details zijn het eerste dat kan wijken. */
.bd-correctie,
.bd-potloodkrul {
  opacity: 1.25;
}
.bd-cijfer-doorgestreept {
  fill: var(--papier);
}
.bd-cijfer-nieuw {
  fill: var(--brass);
}
.bd-doorstreep {
  stroke: var(--papier);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bd-potloodkrul {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 700px) {
  .bd-correctie,
  .bd-potloodkrul {
    display: none;
  }
}

@keyframes bd-teken {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes bd-label-in {
  to {
    opacity: 1;
  }
}

/* --- Hoofdstuk-secties, donker/ivoor-ritme --- */
.scene-ivoor {
  background: var(--papier);
  color: var(--ink);
}
.scene-ivoor h1,
.scene-ivoor h2,
.scene-ivoor h3,
.scene-ivoor h4 {
  color: var(--ink);
}
.scene-ivoor .eyebrow {
  color: var(--brass-diep);
}
.scene-ivoor .eyebrow::before {
  background: var(--brass-diep);
}
.scene-ivoor .subtitle {
  color: var(--dim-op-licht);
}

/* --- Werkwijze, grote zachte blauwdruk-achtergrond achter de rechterkolom --- */
.werkwijze-blauwdruk {
  position: absolute;
  top: -5%;
  right: -8%;
  width: 62%;
  height: 110%;
  pointer-events: none;
  opacity: 0.06;
  z-index: 0;
}
.werkwijze-blauwdruk svg {
  width: 100%;
  height: 100%;
}
.werkwijze-blauwdruk .bd-lijn {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.werkwijze-fasen {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  .werkwijze-blauwdruk {
    display: none;
  }
}

/* --- Diensten-layout: rijen links, verankerd preview-raam rechts ---
   Vanaf 1024px 2 kolommen, het raam sticky en verticaal gecentreerd t.o.v.
   de lijst. Daaronder (of bij coarse pointer) valt het raam simpelweg weg
   via display: none, de rijen blijven dan full-width zoals voorheen. */
.diensten-layout {
  display: grid;
  grid-template-columns: 1fr;
}
.diensten-raam {
  display: none;
}

@media (min-width: 1024px) {
  .diensten-layout {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-8);
    align-items: center;
  }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .diensten-raam {
    display: block;
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* --- Diensten als redactionele rijen, geen kaarten --- */
.diensten-rijen {
  display: flex;
  flex-direction: column;
}
.dienst-rij {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  text-decoration: none;
  border-top: 1px solid rgba(15, 18, 22, 0.12);
  transition: background 0.25s var(--easing), padding-left 0.25s var(--easing);
}
.diensten-rijen .dienst-rij:last-child {
  border-bottom: 1px solid rgba(15, 18, 22, 0.12);
}
.dienst-rij-nummer {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass-diep);
  font-variant-numeric: tabular-nums;
}
.dienst-rij-midden {
  min-width: 0;
}
/* Vlaggenschip-signaal (opdracht fase 5): subtiel label boven de titel van
   rij 04, zelfde label-stijl als .eyebrow/.fase-nummer (13px, 0.06em) maar
   zonder het streepje-pseudo-element en zonder badge-achtergrond, dit is
   bewust géén chip, puur tekst zodat het niet als losse tab oogt. */
.dienst-rij-vlaggenschip {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass-diep);
  margin-bottom: var(--sp-1);
}
.dienst-rij-titel {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: clamp(21px, 3vw, 34px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  transition: transform 0.35s var(--easing);
  display: inline-block;
}
.dienst-rij-belofte {
  display: block;
  margin-top: var(--sp-1);
  color: var(--dim-op-licht);
  font-size: 16px;
  max-width: 56ch;
}
.dienst-rij-pijl {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--brass-diep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dienst-rij-pijl svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.25;
  transition: transform 0.35s var(--easing);
}
.dienst-rij:hover {
  background: var(--papier-2);
  padding-left: var(--sp-2);
}
.dienst-rij:hover .dienst-rij-titel {
  transform: translateX(8px);
}
.dienst-rij:hover .dienst-rij-pijl svg {
  transform: translateX(8px);
}

/* Mobiele dienst-rijen (opdracht 13): het nummer verhuist van een linker-
   kolom (die op smalle schermen weinig ruimte overliet voor titel/belofte)
   naar een eigen kleine label-regel BOVEN de titel. Titel en belofte krijgen
   daarmee de volle breedte, geen inspringing meer. 1-koloms grid i.p.v.
   losse breakpoint-specifieke kolombreedtes: nummer en midden worden losse
   grid-rows, in dezelfde volgorde als de bestaande HTML (nummer staat al
   voor .dienst-rij-midden), dus geen HTML-herordening nodig. */
@media (max-width: 768px) {
  .dienst-rij {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
  .dienst-rij-nummer {
    font-size: 12px;
  }
  .dienst-rij-pijl {
    display: none;
  }
}

/* --- Diensten-raam: verankerd preview-venster naast de dienst-rijen ---
   Vaste verhouding 21:13 (Fibonacci), radius op de 13px-trede. 4 beelden
   liggen gestapeld in de DOM (opacity-wissel via .is-actief, door main.js
   gezet op hover/focus van een rij), zodat er nooit een laadflits ontstaat.
   In rust toont het raam dienst 01, licht gedimd; bij wissel crossfadet het
   nieuwe beeld in met een lichte scale-settle (1.04 -> 1.0). Geen enkel
   cursor-volgend gedrag, de positie van het raam zelf staat vast (sticky). */
.diensten-raam-venster {
  position: relative;
  aspect-ratio: 21 / 13;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(15, 18, 22, 0.12);
}
.diensten-raam-venster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.97) sepia(0.06);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.4s var(--easing), transform 0.4s var(--easing);
  will-change: opacity, transform;
}
.diensten-raam-venster img.is-actief {
  opacity: 0.85;
  transform: scale(1);
  z-index: 1;
}
.diensten-raam-caption {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--dim-op-licht);
}
.diensten-raam-caption-nr {
  font-variant-numeric: tabular-nums;
  color: var(--brass-diep);
}

@media (prefers-reduced-motion: reduce) {
  .diensten-raam-venster img {
    transition: opacity 0.15s linear;
    transform: none;
  }
  .diensten-raam-venster img.is-actief {
    transform: none;
  }
}

/* --- Case-verhaal, spec-sheet in plaats van losse tekst --- */
.case-parallax-verhaal.spec {
  grid-template-columns: 1.15fr 0.85fr;
}
.case-spec-tabel {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--lijn);
}
.case-spec-rij {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--lijn);
  font-size: 13px;
}
/* .spec-key is de labelrol (bv. "resultaat", "aanpak"): Instrument Sans 500
   met de labelletter-spacing. .spec-waarde is de waarde ernaast (bv. "20 min
   offertetijd"): Instrument Sans 400, iets ingehouden letter-spacing. */
.case-spec-rij .spec-key {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.case-spec-rij .spec-waarde {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--papier);
  text-align: right;
}

@media (max-width: 780px) {
  .case-parallax-verhaal.spec {
    grid-template-columns: 1fr;
  }
}

/* --- Scroll-diepte op beelden: scale 1.06 -> 1.0, transform only --- */
.scroll-zoom-beeld {
  overflow: hidden;
}
.scroll-zoom-beeld img {
  will-change: transform;
  transform: scale3d(var(--zoom, 1.06), var(--zoom, 1.06), 1);
}

/* --- Eind-CTA, groot en typografisch --- */
.eind-cta {
  position: relative;
  text-align: left;
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
  overflow: hidden;
}
/* Watermerk-regel, geldt hier en bij .footer-watermerk: verticaal
   gecentreerd, rechts mag een derde van het merk buiten de rand vallen,
   de onderkant nooit afsnijden. De sectie heeft overflow: hidden, dus de
   rechterkant knipt netjes af zonder scrollbar of layout-schade. */
.eind-cta-watermerk {
  position: absolute;
  top: 50%;
  right: -15%;
  transform: translateY(-50%);
  height: 65%;
  width: auto;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.eind-cta-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.eind-cta-content h2 {
  font-size: clamp(34px, 7.4vw, 93px);
  line-height: 1.02;
}
.eind-cta-content .subtitle {
  margin-top: var(--sp-4);
}
.eind-cta-content .btn {
  margin-top: var(--sp-4);
}

/* --- Contactknoppen (bel/mail als echte knoppen) --- */
.contact-info-item .btn-sm {
  margin-top: var(--sp-1);
}

/* --- Dienstpagina-skelet, gedeeld --- */
.hero-dienst {
  position: relative;
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-8);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-6);
  align-items: center;
}
/* Subpagina-hero: iets sterkere gloed dan de body (0.06 i.p.v. 0.04) plus
   een verticale vignette onderaan naar de sectiegrens toe, voor diepte.
   Op z-index -1 zodat de hero-inhoud er gewoon overheen leest. */
.hero-dienst::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 680px at 8% -6%, rgba(199, 166, 104, 0.06), transparent 60%),
    linear-gradient(to bottom, transparent 70%, rgba(13, 16, 20, 0.5));
}
.hero-dienst-copy {
  max-width: 640px;
}
.hero-dienst .subtitle {
  font-size: 20px;
}
.hero-dienst-beeld {
  border-radius: 8px;
  overflow: hidden;
}
.hero-dienst-beeld img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  .hero-dienst {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-top: var(--sp-8);
  }
  .hero-dienst-beeld {
    max-width: 640px;
  }
}

/* --- Dienstpagina, groot beeld direct onder de hero ---
   Hergebruikt de bestaande .pagina-beeld-component (zelfde componentniveau
   als cases.html/contact.html), zodat de dienstpagina's niet losser/kaler
   ogen dan de rest van de site. Maatstreep-detail eronder zet het bouwplan-
   concept door: een mono-specregel met coördinaat-achtige labels, geen
   feitelijke claim, puur decoratief net als de blauwdruk-cijfers in de
   homepage-hero. */
.dienst-groot-beeld-wrap {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-8);
}
.dienst-spec-regel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--dim);
  min-width: 0;
}
.dienst-spec-regel .scheiding {
  color: var(--lijn-sterk);
}

/* --- Dienstpagina, pull-quote in Cormorant italic ---
   Donkere variant van .oprichter-quote (die is voor de papieren over-sectie
   op index), links uitgelijnd binnen de kolombreedte van de rest van de
   pagina i.p.v. gecentreerd, zodat het leest als een redactioneel accent
   tussen de secties in plaats van een geïsoleerd testimonial-blok. */
.dienst-quote {
  max-width: 760px;
  margin: 0 auto;
  /* Geen .section-klasse op deze sectie (die zou 144px padding geven,
     dubbelop met .dienst-groot-beeld-wrap ervoor): eigen, kleinere maat. */
  padding: var(--sp-8) 0 var(--sp-12);
  text-align: left;
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}
.dienst-quote blockquote {
  margin: 0;
  font-family: var(--font-kop);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.4;
  color: var(--papier);
}
/* --- Vlaggenschip (automatisering.html), blok "Eerst zelf bewezen" ---
   Ivoren scene tussen twee donkere secties, zelfde .scene-ivoor-basis als
   elders. Lopende tekst blijft binnen de leesbreedte-token, met iets meer
   ruimte tussen de alinea's dan de standaard .subtitle-marge omdat dit meer
   dan 1 alinea is (een kort statement-zinnetje ertussenin). */
.eerst-bewezen-tekst {
  max-width: var(--max-tekst);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.eerst-bewezen-tekst p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--dim-op-licht);
}

/* --- Vlaggenschip, blok "Wat er draait": 4 donkere glow-kaarten in 2x2 ---
   Bewust GEEN .papier/.scene-ivoor op de sectie: .glow-kaart is getekend als
   donkere-kaart-techniek (main.js meet pointer-afstand tegen de kaartrand
   en de conic-gradient is messing-op-donker), dus deze sectie blijft op de
   gewone --ink-achtergrond staan, net als .mini-case verderop op de pagina. */
.collega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.collega-kaart {
  position: relative;
  background-color: var(--ink-2);
  background-image: linear-gradient(to bottom, rgba(243, 239, 231, 0.02), transparent 45%);
  border: 1px solid var(--lijn);
  border-radius: 13px;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
}
.collega-nummer {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-3);
}
/* Kaartkop bewust NIET h4 (die staat op 17px): dezelfde regel als elders,
   geen Cormorant onder 21px, dus deze kop krijgt een eigen class op precies
   21px Instrument Sans 600 in plaats van de kale h4-stijl te hergebruiken. */
.collega-kop {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: var(--papier);
  margin: 0 0 var(--sp-2);
}
.collega-kaart p {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.6;
  flex-grow: 1;
}
.collega-spec {
  display: block;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--lijn);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--dim);
}

@media (max-width: 780px) {
  .collega-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Vlaggenschip, blok "Zo voelt het": horizontale stappenstrip van 4 ---
   Desktop: 4 kolommen, elk met een bovenrand-hairline die als lopende
   meetlijn tussen de stappen leest (zelfde hairline-token als overal, geen
   losse scroll-progress nodig voor zo'n korte statische strip). Het nummer
   is bewust tekst in de bestaande .fase-nummer/.dienst-rij-nummer-stijl
   (brass, 13px, tabular-nums), GEEN cijfer-in-rondje-badge: dat laatste zou
   als losse chip ogen, een tekstnummer past bij de rest van de site. */
.stappenstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.stap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--lijn-sterk);
}
.stap-nummer {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.stap-woord {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 21px;
  color: var(--papier);
}
.stap-regel {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.5;
  max-width: 32ch;
}

@media (max-width: 780px) {
  .stappenstrip {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

.krijgt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-4);
}
.krijgt-item {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}
.krijgt-item svg {
  width: 24px;
  height: 24px;
  color: var(--brass);
  stroke-width: 1.25;
  flex-shrink: 0;
  margin-top: var(--sp-1);
}
.krijgt-item h4 {
  margin-bottom: var(--sp-1);
}
.krijgt-item p {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 780px) {
  .krijgt-grid {
    grid-template-columns: 1fr;
  }
}

.aanpak-lijn {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 var(--sp-4);
  max-width: 720px;
}

.mini-case {
  background-color: var(--ink-2);
  background-image: linear-gradient(to bottom, rgba(243, 239, 231, 0.02), transparent 45%);
  border-radius: 8px;
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: center;
  position: relative;
}
.mini-case-cijfer {
  font-family: var(--font-body);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 600;
  color: var(--brass);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-2);
}
.mini-case-tekst p {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--sp-1);
}
.mini-case .case-voetnoot {
  margin-top: var(--sp-2);
}

@media (max-width: 780px) {
  .mini-case {
    grid-template-columns: 1fr;
    padding: var(--sp-4);
  }
}

/* --- FAQ --- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.faq-lijst {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  overflow: hidden;
}
.faq-cta-kaart {
  background-color: var(--ink-2);
  background-image: linear-gradient(to bottom, rgba(243, 239, 231, 0.02), transparent 45%);
  border-radius: 8px;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  position: sticky;
  top: calc(34px + 64px + var(--sp-6));
}
.faq-cta-kaart h3 {
  color: var(--papier);
}
.faq-cta-kaart p {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--sp-2);
}
.faq-cta-kaart-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

@media (max-width: 980px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .faq-cta-kaart {
    position: static;
    max-width: 640px;
  }
}
.faq-item {
  background: var(--ink);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--papier);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary svg {
  width: 18px;
  height: 18px;
  color: var(--brass);
  flex-shrink: 0;
  transition: transform 0.25s var(--easing);
}
.faq-item[open] summary svg {
  transform: rotate(45deg);
}
.faq-item-body {
  padding: 0 var(--sp-3) var(--sp-3);
  color: var(--dim);
  font-size: 15px;
  line-height: 1.65;
  max-width: 62ch;
}

/* --- Paginakop-varianten (voor pagina's zonder eigen hero) --- */
.paginakop {
  position: relative;
  padding-top: var(--sp-12);
}
/* Zelfde iets-sterkere gloed als .hero-dienst, deze pagina's hebben geen
   eigen hero-beeld dus de paginakop is de eerste indruk. */
.paginakop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 680px at 8% -6%, rgba(199, 166, 104, 0.06), transparent 60%),
    linear-gradient(to bottom, transparent 70%, rgba(13, 16, 20, 0.5));
}
/* Compacte paginakop-h1 (cases.html, contact.html): geen fullwidth hero,
   dus bewust op de kleinere Fibonacci-trede, gelijk aan h2. */
.paginakop h1 {
  font-size: clamp(34px, 4.2vw, 58px);
}
/* --- 404-pagina (opdracht 13, menselijkheidsronde) ---
   Zelfde .paginakop-basis als cases/contact, maar met een grotere, op
   zichzelf staande kop (het is het enige op de pagina) en een subtiel
   blueprint-detail op de achtergrond, gecentreerd en heel laag opzichtig,
   nooit fel genoeg om van de tekst af te leiden. */
.niet-gevonden {
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.niet-gevonden-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.niet-gevonden h1 {
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.05;
}
.niet-gevonden-blauwdruk {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
}
.niet-gevonden-blauwdruk svg {
  width: 100%;
  height: 100%;
}
.niet-gevonden-blauwdruk .bd-lijn {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 640px) {
  .niet-gevonden-blauwdruk {
    opacity: 0.05;
  }
}

.pagina-beeld {
  max-width: 1400px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
.pagina-beeld img {
  display: block;
  width: 100%;
  height: auto;
}
.eyebrow-los {
  margin-top: var(--sp-1);
  margin-bottom: 0;
}
.cases-lijst {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.case-voetnoot-blok {
  display: block;
  margin-top: var(--sp-2);
}

/* --- Cases-pagina, uitgebreide kaarten --- */
.case-uitgebreid {
  background-color: var(--ink-2);
  background-image: linear-gradient(to bottom, rgba(243, 239, 231, 0.02), transparent 45%);
  border-radius: 8px;
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--sp-6);
  position: relative;
}
.case-uitgebreid + .case-uitgebreid {
  margin-top: var(--sp-3);
}
.case-ux-kop {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  /* min-width: 0 nodig omdat dit een direct grid-kind is: zonder deze regel
     kan de grid-track niet kleiner worden dan de intrinsieke (niet-wrappende)
     breedte van de .dienst-spec-regel-flex-rij erin, wat op smalle schermen
     de hele kaart breder maakt dan de viewport (horizontale overflow). */
  min-width: 0;
}
.case-resultaten-rij {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  /* Hairline-scheiding boven de resultaten: zelfde componentniveau als de
     .case-spec-tabel op de homepage (ook daar scheidt een hairline de rijen
     van de rest van het verhaal), zodat de cases-pagina niet losser oogt. */
  border-top: 1px solid var(--lijn);
  flex-wrap: wrap;
}
.case-resultaat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.case-resultaat .num {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 600;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.case-resultaat .label {
  font-size: 13px;
  color: var(--dim);
}
.case-aanpak-regels {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.case-aanpak-regel {
  display: flex;
  gap: var(--sp-2);
  font-size: 15px;
  color: var(--dim);
  line-height: 1.6;
}
.case-aanpak-regel .stap-nr {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--brass);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .case-uitgebreid {
    grid-template-columns: 1fr;
    padding: var(--sp-4);
  }
}

/* --- Contactpagina --- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-8);
  align-items: start;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.contact-info-item {
  display: flex;
  gap: var(--sp-2);
}
.contact-info-item svg {
  width: 22px;
  height: 22px;
  color: var(--brass);
  stroke-width: 1.25;
  flex-shrink: 0;
  margin-top: var(--sp-1);
}
.contact-info-item h4 {
  margin-bottom: var(--sp-1);
}
.contact-info-item p,
.contact-info-item a {
  color: var(--dim);
  font-size: 15px;
  text-decoration: none;
}
.contact-info-item a:hover {
  color: var(--brass);
}
.contact-detail-lijst {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--lijn);
}
.contact-detail {
  display: flex;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--dim);
}
.contact-detail .dot {
  color: var(--succes);
}
/* Bewust geen Cormorant italic hier: op 16px valt dat onder de 21px-
   Fibonacci-ondergrens (broos, en er is geen echt italic Instrument Sans-
   font-face geladen, dus een faux-schuinte zou er slordig uitzien). Instrument
   Sans 600 upright, iets ingehouden letter-spacing voor het informele accent. */
.contact-menselijk {
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--dim);
  max-width: 40ch;
}

/* Ivoren kaart op de donkere contactpagina: warmer en uitnodigender dan een
   nog-donkerdere kaart-op-donker zou zijn. Gebruikt de .papier-klasse (in de
   HTML samen met .form-kaart) voor de cascade naar donkere tekstkleuren,
   plus een eigen radiale champagne-gloed rechtsboven, dezelfde soort gloed
   als de body-achtergrond elders, nu alleen warmer en zichtbaarder omdat hij
   op een klein, geïsoleerd vlak ligt in plaats van over de hele pagina. */
.form-kaart {
  position: relative;
  overflow: hidden;
  background-color: var(--papier);
  background-image:
    radial-gradient(480px 480px at 88% -10%, rgba(199, 166, 104, 0.14), transparent 60%),
    linear-gradient(to bottom, rgba(15, 18, 22, 0.03), transparent 45%);
  border-radius: 8px;
  padding: var(--sp-6);
  box-shadow: 0 2px 6px rgba(15, 18, 22, 0.1), 0 18px 44px rgba(15, 18, 22, 0.16);
}
.form-kaart .form-melding {
  color: var(--ink);
}
.form-kaart .form-veld label {
  color: var(--ink);
}
.form-kaart .form-veld input,
.form-kaart .form-veld select,
.form-kaart .form-veld textarea {
  background: var(--papier-2);
  border: 1px solid rgba(15, 18, 22, 0.16);
  color: var(--ink);
}
.form-kaart .form-veld input::placeholder,
.form-kaart .form-veld textarea::placeholder {
  color: var(--dim-op-licht);
}
.form-kaart .form-veld input:focus,
.form-kaart .form-veld select:focus,
.form-kaart .form-veld textarea:focus {
  border-color: var(--brass-diep);
}
.form-kaart .form-veld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e675c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
}
.form-veld {
  margin-bottom: var(--sp-3);
}
.form-veld label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--sp-1);
  color: var(--papier);
}
.form-veld input,
.form-veld select,
.form-veld textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--lijn-sterk);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-2);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--papier);
  transition: border-color 0.2s var(--easing);
}
.form-veld input::placeholder,
.form-veld textarea::placeholder {
  color: #6b6355;
}
/* Geen outline: none hier (opdracht 11, menselijkheidsronde): de globale
   :focus-visible-regel (brass, 2px, offset 3px) moet ook op formuliervelden
   gewoon zichtbaar blijven. De randkleur-wijziging hieronder is een extra
   accent bovenop die outline, geen vervanging ervan. */
.form-veld input:focus,
.form-veld select:focus,
.form-veld textarea:focus {
  border-color: var(--brass);
}
.form-veld textarea {
  resize: vertical;
  min-height: 120px;
}
.form-veld select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a6a094' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
  padding-right: var(--sp-6);
}

/* Microcopy onder de verzendknop (opdracht 8, menselijkheidsronde): de kaart
   zelf is .papier (ivoren, donkere tekst), dus --dim-op-licht i.p.v. --dim
   voor leesbaar contrast op die lichte ondergrond. */
.form-microcopy {
  margin-top: var(--sp-2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--dim-op-licht);
}
.form-microcopy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-microcopy a:hover {
  color: var(--brass-diep);
}

.form-melding {
  display: none;
  padding: var(--sp-2) var(--sp-2);
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--sp-3);
  border-left: 3px solid transparent;
}
.form-melding.is-fout {
  display: block;
  background: #f5e6e2;
  color: #7a3226;
  border-left-color: var(--fout);
}
.form-melding.is-succes {
  display: block;
  background: #e5efe6;
  color: #2b5c46;
  border-left-color: var(--succes);
}

.form-veld.heeft-fout input,
.form-veld.heeft-fout select,
.form-veld.heeft-fout textarea {
  border-color: var(--fout);
}
.veld-foutmelding {
  display: none;
  font-size: 13px;
  color: #d68e80;
  margin-top: var(--sp-1);
}
.form-veld.heeft-fout .veld-foutmelding {
  display: block;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .form-kaart {
    padding: var(--sp-3);
  }
}

/* --- Leestekst-pagina's (privacy, voorwaarden, opdracht 1) ---
   Sober lopende tekst, geen kaarten of illustraties: de kop in Cormorant
   (via de gedeelde h1/h2-regels), de rest gewoon leesbare body-tekst op de
   bestaande --max-tekst-breedte. Voorwaarden krijgt genummerde artikelen
   (h3 als artikelkop), privacy gewoon doorlopende alinea's. */
.leestekst {
  max-width: var(--max-tekst);
}
.leestekst p {
  color: var(--dim);
  margin-bottom: var(--sp-3);
}
.leestekst p:last-child {
  margin-bottom: 0;
}
.leestekst-bijgewerkt {
  font-size: 13px;
  color: var(--dim);
  opacity: 0.7;
  margin-bottom: var(--sp-6);
  display: block;
}
.artikel {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--lijn);
}
.artikel:last-child {
  padding-bottom: 0;
}
.artikel-nummer {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass);
  display: block;
  margin-bottom: var(--sp-1);
  font-variant-numeric: tabular-nums;
}
.artikel h3 {
  margin-bottom: var(--sp-2);
}
.artikel p {
  margin-bottom: 0;
}

/* --- Utility --- */
.mt-0 {
  margin-top: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   V4, Interactie-laag
   Preloader, paginagordijn, magnetische knoppen, smooth scroll
   ========================================================================== */

/* --- Preloader (alleen homepage, eerste bezoek per sessie) ---
   Volledig scherm ink-vlak boven alles. De SVG-tekenlaag (stroke) en de
   vullaag (brass, crossfade) liggen los in de DOM zodat main.js ze apart
   kan animeren: eerst tekenen (stroke-dashoffset), dan vullen (opacity). */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  transform: translateY(0);
}
.preloader.is-weg {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(-100%);
}
.preloader-merk {
  width: 144px;
  height: auto;
}
.preloader-merk .pl-lijn {
  fill: none;
  stroke: var(--brass);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.preloader-merk .pl-vlak {
  fill: var(--brass);
  opacity: 0;
  transition: opacity 0.4s var(--easing);
}
.preloader-merk.is-gevuld .pl-lijn {
  opacity: 0;
  transition: opacity 0.3s var(--easing);
}
.preloader-merk.is-gevuld .pl-vlak {
  opacity: 1;
}
.preloader-teller {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  /* Vaste breedte (3 tekens: "100" is de langste waarde) zodat de teller
     niet trilt/verspringt als tabular-nums ergens niet ondersteund wordt.
     Rechts uitgelijnd binnen die breedte, zodat het rechtsonder verankerd
     blijft net als voorheen. */
  min-width: 26px;
  text-align: right;
}

/* --- Paginagordijn (alle pagina's, klikovergangen) ---
   1 herbruikbaar element, door main.js zelf in de DOM gezet. Uitgang: van
   onder naar boven (dekt het scherm), ingang: schuift omhoog weg. */
.pagina-gordijn {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--ink);
  transform: translateY(100%);
  pointer-events: none;
}
.pagina-gordijn.gordijn-in {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(0);
}
.pagina-gordijn.gordijn-uit {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(-100%);
}

/* --- View transitions, progressive enhancement --- */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: veroudert-fade 0.25s var(--easing) both;
  }
  ::view-transition-new(root) {
    animation: verjongt-fade 0.25s var(--easing) both;
  }
}
@keyframes veroudert-fade {
  to {
    opacity: 0;
  }
}
@keyframes verjongt-fade {
  from {
    opacity: 0;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .case-parallax {
    height: auto;
  }
  .case-parallax-sticky {
    position: static;
    height: min(62vh, 620px);
    transform: none !important;
  }
  .case-parallax-scrim {
    opacity: 0.5 !important;
  }
  .case-parallax-tekst {
    opacity: 1 !important;
    transform: none !important;
  }
  .case-parallax-cijfer {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn:hover,
  .btn:hover svg,
  .dienst-kaart:hover .kaart-link svg {
    transform: none !important;
  }
  .lm-inner {
    transform: none !important;
  }
  .hero-blauwdruk .bd-tekenen path,
  .hero-blauwdruk .bd-tekenen line,
  .hero-blauwdruk .bd-tekenen rect {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .hero-blauwdruk .bd-cijfer {
    animation: none !important;
    opacity: 1 !important;
  }
  .dienst-rij:hover .dienst-rij-titel,
  .dienst-rij:hover .dienst-rij-pijl svg {
    transform: none !important;
  }
  .scroll-zoom-beeld img {
    transform: none !important;
  }
  /* Preloader en gordijn: bij reduced motion staat alles er direct, geen
     choreografie. main.js maakt deze elementen sowieso niet aan bij reduced
     motion, dit is het CSS-vangnet mocht dat toch gebeuren. */
  .preloader {
    display: none !important;
  }
  .pagina-gordijn {
    display: none !important;
  }
  /* Glow-border (opdracht 11): main.js voegt de laag sowieso niet toe bij
     reduced motion of coarse pointer, dit is het CSS-vangnet. */
  .glow-kaart::before {
    display: none !important;
  }
}

/* --- Glow-border op donkere kaarten ---
   Vertaling van het bekende Aceternity-"moving border"-idee naar vanilla CSS
   in 1 kleur (brass), geen regenboog. Techniek: een ::before-laag die de
   volledige kaart (inclusief padding) bedekt, met een conic-gradient die om
   --hoek (door main.js gezet, graden vanaf de kaart-center naar de muis)
   draait. De mask knipt die conic-gradient-laag terug tot alleen de 1px-
   rand: mask-composite "xor" tussen een volledig gevuld vlak (padding-box)
   en een naar binnen gekrompen vlak (border-box met 1px content-box inzet),
   het klassieke "alleen de rand overhouden"-masker-patroon. Rust: opacity 0,
   niets zichtbaar, geen kostbare repaint. Alleen op donkere kaarten (main.js
   voegt de class niet toe aan iets met .papier), nooit bij coarse pointer of
   reduced motion (main.js registreert de pointermove-listener dan niet, en
   het reduced-motion-vangnet hierboven verbergt de laag hard). */
.glow-kaart {
  --hoek: 0;
  --glow-opacity: 0;
}
.glow-kaart::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from calc(var(--hoek) * 1deg),
    transparent 0deg,
    rgba(199, 166, 104, 0.9) 30deg,
    transparent 60deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--glow-opacity);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s var(--easing);
}

/* --- Print, klein en verzorgd --- */
@media print {
  body {
    background: #fff;
    color: var(--ink);
  }
  .site-header,
  .nav-overlay,
  .hero-achtergrond video,
  .case-parallax-sticky img,
  .hero-dienst-beeld img,
  .pagina-beeld img,
  .over-beeld img,
  .btn svg,
  .kaart-link svg {
    display: none !important;
  }
  .over-beeld {
    box-shadow: none !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    color: var(--dim);
    font-size: 12px;
  }
}