/* ==========================================================================
   PFRM - Partners in progress
   Homepage prototype. Native CSS, design tokens op :root.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     KLEURSYSTEEM: twee merkkleuren (burgundy + mist) en functionele UI-kleuren.
     Overzicht met voorbeelden: ontwerp/kleuren.html
     --------------------------------------------------------------------- */

  /* Merkkleur: burgundy. 800 is de kleur uit het brandboek */
  --burgundy-950: #1F0A12;
  --burgundy-900: #33101D;
  --burgundy-800: #4F172A;
  --burgundy-700: #591A30;
  --burgundy-600: #7A2B45;
  --burgundy-500: #9C3F5E;
  --burgundy-400: #B4486B;
  --burgundy-300: #C8A3AF;
  --burgundy-100: #EFE4E7;
  --burgundy-50:  #F8F1F3;

  /* Steunkleur: mist. 200 is de steunkleur zelf; donkere tinten voor iconen en tekst.
     Wisselen = alleen deze schaal aanpassen */
  --support-900: #1E3436;
  --support-800: #2C4A4D;
  --support-700: #3F6B6E;
  --support-600: #5A8789;
  --support-500: #7FA6A8;
  --support-300: #B5CDCE;
  --support-200: #D6E4E5;
  --support-100: #E7EFF0;
  --support-50:  #F3F7F7;

  /* Neutralen */
  --white: #FFFFFF;
  --grey-50:  #F7F7F8;
  --grey-100: #F3F3F5;
  --grey-200: #E7E7EB;
  --grey-300: #D1D1D6;
  --grey-400: #A9A9B0;
  --grey-500: #7D7A80;
  --grey-600: #5E5658;
  --grey-900: #1C1719;

  /* Functionele UI-kleuren (alleen voor status, feedback en interactie) */
  --ui-success: #1E7A4C;  --ui-success-bg: #E7F4EC;
  --ui-warning: #9A5B00;  --ui-warning-bg: #FDF2E0;
  --ui-error:   #C62828;  --ui-error-bg:   #FDECEA;
  --ui-info:    #1F5BB8;  --ui-info-bg:    #E8F0FC;
  --ui-focus:   #2F6FEB;
  --ui-link:    var(--burgundy-800);
  --ui-link-hover: var(--burgundy-500);
  --ui-disabled: var(--grey-400);

  /* Rollen (worden in de componenten gebruikt) */
  --paper: var(--white);
  --stone: var(--grey-100);
  --stone-dark: var(--grey-200);
  --ink: var(--grey-900);
  --ink-muted: var(--grey-600);
  --line: rgba(28, 23, 25, 0.14);
  --line-light: rgba(255, 255, 255, 0.18);
  --accent: var(--burgundy-500);

  /* Logo-accent (de schuine snede in de M), vervangt het beige uit het brandboek */
  /* Het roze accent (#CF537C) is na de klantmeeting van 27-10 vervallen; bordeaux 600 staat altijd op bordeaux */
  --logo-accent: var(--burgundy-600);
  --logo-accent-dark: var(--burgundy-600);

  /* Typografie: Funnel Display voor koppen, Funnel Sans voor tekst */
  --font-display: "Funnel Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Funnel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-hero: clamp(3.25rem, 8vw, 8rem); /* 28-10: ruim 20% groter, de hero heeft alleen nog titel en knoppen */
  --fs-h2: clamp(2.125rem, 4.4vw, 4rem);
  --fs-statement: clamp(1.625rem, 3vw, 2.625rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Ruimte */
  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(5rem, 11vw, 10rem);
  --header-h: 88px; /* zwevende balk: 12px marge + 64px balk + 12px lucht */

  /* Vormtaal: zachte afronding zoals Metyis. Knoppen zijn pills. */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
/* Naar een verre sectie: korte overgang in plaats van een lange scroll (secties.js, springNaar). De inhoud schuift een klein
   stukje in de scrollrichting weg met blur, de sectie komt van de andere kant scherp in beeld; de header staat stil */
/* Alleen tijdens de overgang: een vaste view-transition-name maakt de header een eigen "backdrop root", waardoor de blur
   van de glasbalk de pagina erachter niet meer ziet */
html.vt-sectie [data-header] { view-transition-name: site-kop; }
html.vt-sectie::view-transition-group(site-kop) { animation: none; }
@keyframes vt-weg-omlaag { to { opacity: 0; transform: translateY(-56px); filter: blur(10px); } }
@keyframes vt-kom-omlaag { from { opacity: 0; transform: translateY(56px); filter: blur(10px); } }
@keyframes vt-weg-omhoog { to { opacity: 0; transform: translateY(56px); filter: blur(10px); } }
@keyframes vt-kom-omhoog { from { opacity: 0; transform: translateY(-56px); filter: blur(10px); } }
html.vt-sectie::view-transition-old(root) { animation: vt-weg-omlaag .42s cubic-bezier(.4, 0, 1, 1) both; }
html.vt-sectie::view-transition-new(root) { animation: vt-kom-omlaag .62s cubic-bezier(.16, .8, .3, 1) .08s both; mix-blend-mode: normal; }
html.vt-omhoog::view-transition-old(root) { animation-name: vt-weg-omhoog; }
html.vt-omhoog::view-transition-new(root) { animation-name: vt-kom-omhoog; }
.sluier { position: fixed; inset: 0; z-index: 300; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.sluier.is-aan { opacity: 1; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .deep :focus-visible, .deep:focus-visible, .model :focus-visible, .banner:focus-visible,
.cta :focus-visible, .site-footer :focus-visible, .mobile-menu :focus-visible,
.site-header__inner :focus-visible { outline-color: var(--white); }
.deep--support :focus-visible, .deep--support:focus-visible { outline-color: var(--ui-focus); }
a.text-link { color: var(--ui-link); text-decoration: underline; text-underline-offset: 3px; }
a.text-link:hover { color: var(--ui-link-hover); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--paper); color: var(--burgundy-800); padding: 12px 16px;
}
.skip-link:focus { top: 12px; }

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

/* Typografie ------------------------------------------------------------- */
.h2--brand { color: var(--burgundy-800); }
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy-800);
  margin-bottom: 1.75rem;
}
.statement {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.022em;
  max-width: 24ch;
}

/* Iconen ------------------------------------------------------------------ */
/* Heroicons v2, outline 24px, lijndikte 1.5 (heroicons.com, MIT-licentie). Als masker, zodat een
   icoon altijd de tekstkleur aanneemt. Gebruik: .hi.hi--naam, of mask-image: var(--hi-naam). */
:root {
  --hi-arrow-long-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3'/%3E%3C/svg%3E");
  --hi-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E");
  --hi-arrow-long-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18'/%3E%3C/svg%3E");
  --hi-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18'/%3E%3C/svg%3E");
  --hi-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
  --hi-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E");
  --hi-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14'/%3E%3C/svg%3E");
  --hi-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}
.hi {
  display: inline-block; flex: none; width: 1.25em; height: 1.25em; background: currentColor;
  -webkit-mask: var(--hi) center / contain no-repeat; mask: var(--hi) center / contain no-repeat;
}
.hi--arrow-long-right { --hi: var(--hi-arrow-long-right); }
.hi--arrow-right { --hi: var(--hi-arrow-right); }
.hi--arrow-left { --hi: var(--hi-arrow-left); }
.hi--arrow-long-left { --hi: var(--hi-arrow-long-left); }
/* Pijlen (10-11): de lange pijl achter tekst (links, knoppen, "Zo werken we samen", contactregels, terug-knoppen);
   de korte pijl alleen als icoon in een rond knopje (vorige/volgende, .circle-arrow, .reader__pijl) */
.hi--check { --hi: var(--hi-check); }
.hi--plus { --hi: var(--hi-plus); }
.hi--minus { --hi: var(--hi-minus); }
.hi--chevron-down { --hi: var(--hi-chevron-down); }

/* Knoppen en links ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.005em; white-space: nowrap;
  background: var(--burgundy-800); color: var(--paper);
  border: 1px solid var(--burgundy-800);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease);
}
.btn:hover { background: var(--burgundy-900); border-color: var(--burgundy-900); }
.btn:active { transform: translateY(1px); }
.btn--light { background: var(--paper); color: var(--burgundy-800); border-color: var(--paper); }
.btn--light:hover { background: transparent; color: var(--paper); border-color: var(--paper); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
  padding-block: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .4s var(--ease);
}
.link-arrow::after { content: ""; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--hi-arrow-long-right) center / contain no-repeat; mask: var(--hi-arrow-long-right) center / contain no-repeat; transition: transform .3s var(--ease); }
.link-arrow:hover::after, a:hover .link-arrow::after { transform: translateX(4px); }
.link-arrow--light { color: var(--paper); }

/* Pills: kleine afgeronde knoppen met pijl, zoals op Metyis */
.pill {
  display: inline-flex; align-items: center; gap: 0.55em;
  min-height: 38px; padding: 0 18px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pill::after { content: ""; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--hi-arrow-long-right) center / contain no-repeat; mask: var(--hi-arrow-long-right) center / contain no-repeat; transition: transform .3s var(--ease); }
.pill:hover::after, a:hover > .pill::after { transform: translateX(3px); }
.pill--dark { background: var(--burgundy-950); color: var(--paper); }
.pill--dark:hover, a:hover > .pill--dark { background: var(--burgundy-800); }
.pill--light { background: var(--paper); color: var(--burgundy-800); }
.pill--light:hover { background: #fff; }
.pill--outline { border-color: currentColor; color: var(--ink); }
.pill--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill--lg { min-height: 52px; padding: 0 26px; font-size: 0.9375rem; }

/* Ronde pijlknop voor lijstrijen */
.circle-arrow {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-grid; place-items: center;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.circle-arrow::after { content: ""; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: var(--hi-arrow-right) center / contain no-repeat; mask: var(--hi-arrow-right) center / contain no-repeat; }

/* Panelen en abstract beeld ------------------------------------------------ */
.panel { position: relative; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; }
.panel--soft { background: #FFFFFF; border: 1px solid var(--stone-dark); box-shadow: 0 1px 0 rgba(28, 23, 25, 0.04), 0 18px 40px -24px rgba(79, 23, 42, 0.18); }
.panel--stone { background: var(--stone); }


/* Header ----------------------------------------------------------------- */
/* Zwevende glasbalk (naar indicium.ai): los van de schermranden, altijd bordeaux.
   Boven de hero een lichtere glaslaag; daarna bijna effen, zodat de witte tekst
   ook boven witte secties leesbaar blijft. */
.site-header {
  --bar-h: 64px;
  --bar-top: 12px;
  position: fixed; top: var(--bar-top); left: 12px; right: 12px; z-index: 50;
  color: var(--paper);
}
.site-header__inner {
  position: relative; isolation: isolate;
  max-width: calc(1440px - 2 * var(--gutter) + 40px); height: var(--bar-h); margin-inline: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; /* 10-11: menu links naast het logo (was gecentreerd) */
  padding-inline: 20px 12px;
}
.site-header__glass {
  position: absolute; inset: 0; z-index: -1;
  border-radius: var(--radius);
  /* Boven de hero zo onopvallend mogelijk: geen kleur, een lichte waas die alleen de glasribbels
     achter de tekst verzacht, en een haarlijn. Na de hero wordt de balk effen bordeaux (.is-solid) */
  background: transparent;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-solid .site-header__glass {
  background: rgba(79, 23, 42, 0.8); /* burgundy-800 */
  /* Matglas na de hero: wat onder de balk door scrolt wordt een zachte vlek. brightness dimt de achtergrond, zodat de balk
     op wit stevig bordeaux blijft (niet flets oudroze) en boven foto's het glaseffect zichtbaar is */
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(.7); backdrop-filter: blur(28px) saturate(160%) brightness(.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px -24px rgba(31, 10, 18, 0.55);
}

.brand { display: block; justify-self: start; }
.brand__mark { display: block; width: auto; height: 20px; aspect-ratio: 617 / 162.3; fill: var(--paper); }

.nav { justify-self: start; margin-left: clamp(16px, 2.5vw, 40px); }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__list a, .nav__trigger {
  position: relative; display: inline-flex; align-items: center; gap: 0.5em;
  height: 40px; padding-inline: 14px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; /* 10-11: bolder in plaats van groter (06-11 was 15px/400): zelfde maat en gewicht als de knop Contact */
  color: rgba(255, 255, 255, 0.80);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav__list a:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--paper); background: rgba(255, 255, 255, 0.08); }
/* Actieve sectie: mist met een kort streepje eronder (10-11: was een vierkant puntje; streepje sluit aan op dat van de koppen).
   Elk item heeft het streepje al, onzichtbaar; wordt het item actief, dan groeit het vanuit het midden uit en vaagt het in */
.nav__list [aria-current] { color: var(--support-200); }
.nav__list a::before, .nav__trigger::before {
  content: ""; position: absolute; left: 50%; bottom: 5px;
  width: 14px; height: 1px; background: currentColor;
  transform: translateX(-50%) scaleX(0); opacity: 0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.nav__list [aria-current]::before { transform: translateX(-50%) scaleX(1); opacity: 1; }
.nav__trigger::before { margin-left: -8px; } /* midden van het label, niet van label + pijltje */

.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
/* In de hero is de knop onder de titel de hoofdactie; de headerknop is daar doorzichtig met een
   dunne rand. Na de hero (.is-solid) is hij de enige weg naar contact en wordt hij wit */
.btn--header {
  min-height: 40px; padding: 0 18px; font-size: 0.875rem;
  background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.55);
}
.btn--header:hover { background: var(--paper); color: var(--burgundy-800); border-color: var(--paper); }
.site-header.is-solid .btn--header { background: var(--paper); color: var(--burgundy-800); border-color: var(--paper); }
.site-header.is-solid .btn--header:hover { background: var(--burgundy-100); border-color: var(--burgundy-100); }

.menu-toggle {
  display: none; align-items: center; gap: 12px;
  height: 40px; padding-inline: 14px; border-radius: 999px;
  font-size: 0.875rem; background: rgba(255, 255, 255, 0.08);
  transition: background-color .25s var(--ease);
}
.menu-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.menu-toggle__icon { position: relative; width: 18px; height: 8px; }
.menu-toggle__icon::before, .menu-toggle__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { top: 6.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 3.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 3.25px; transform: rotate(-45deg); }

/* Mobiel menu: een kaart onder de balk, tot onderaan het scherm */
.mobile-menu {
  position: fixed; top: calc(var(--bar-top) + var(--bar-h) + 8px); left: 12px; right: 12px; bottom: 12px;
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--radius);
  background: var(--burgundy-800); color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  animation: menu-in .45s var(--ease);
}
.mobile-menu__inner { padding: 12px 24px 24px; }
.mobile-menu__list li { border-bottom: 1px solid var(--line-light); }
.mobile-menu__list a {
  display: block; padding: 18px 0;
  font-family: var(--font-display); font-size: 2rem; font-weight: 300; letter-spacing: -0.02em;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
body.menu-open { overflow: hidden; }
/* Menu open: de balk effen bordeaux, net als het paneel eronder. Met .site-header erin, anders wint de glasregel van
   .is-solid (drie classes) en blijft de balk doorzichtig: boven licht (mist, wit) werd hij dan grijzig (10-11) */
body.menu-open .site-header .site-header__glass { background: var(--burgundy-800); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }

/* Hero ------------------------------------------------------------------- */
/* Effen bordeaux met een bewegend patroon (standaard Bogen), getekend in assets/js/hero-pattern.js.
   Met ?opties in de url kies je een ander patroon (assets/js/hero-opties.js). */
.hero {
  position: relative; overflow: hidden;
  background: var(--burgundy-800); color: var(--paper);
  /* Kleur van de staafjes, links naar rechts. Wit blijft hierop goed leesbaar */
  --field-from: var(--burgundy-600);
  --field-to: var(--burgundy-500);
  /* Kleur van de lijnen bij Lijnen en Lijnen omhoog: bordeaux 600, op bordeaux */
  --field-accent: var(--burgundy-600);
}
.hero__field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.hero__field.is-ready { opacity: 1; }
/* Standaard hero Glas (assets/js/hero-glas.js): WebGL-canvas achter de tekst, meteen zichtbaar */
.hero__glas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Bij Lijnen omhoog staat de tekst bovenin en vullen de lijnen het vlak eronder, van rand tot rand.
   Het vlak is minstens 1/3,2 van de schermbreedte hoog, zodat de boog op lage schermen niet plat
   wordt gedrukt (de hero wordt dan iets hoger dan het scherm); op hoge schermen vult het de rest. */
.hero__visual { display: none; }
.hero:has(.hero__field[data-pattern="lijnen-op"]) .hero__inner { justify-content: flex-start; padding-top: calc(var(--header-h) + 8vh); padding-bottom: 0; }
.hero:has(.hero__field[data-pattern="lijnen-op"]) .hero__visual {
  display: block;
  flex: 1 0 auto;
  min-height: calc(100vw / 3.2);
  margin-inline: calc(50% - 50vw);
  margin-top: clamp(1rem, 3vw, 2.5rem);
}
@media (max-width: 767px) {
  .hero:has(.hero__field[data-pattern="lijnen-op"]) .hero__visual { min-height: calc(100vw / 1.5); }
}
/* Bij Lijnen gesplitst staat de tekst linksonder op effen bordeaux en vult rechts een vlak de volle
   hoogte: bordeaux 600 met lijnen in bordeaux. Op smalle schermen ligt het vlak bovenin, de tekst eronder. */
.hero:has(.hero__field[data-pattern="lijnen-split"]) .hero__inner { position: static; justify-content: flex-end; padding-bottom: 10vh; }
.hero:has(.hero__field[data-pattern="lijnen-split"]) .hero__title { font-size: min(var(--fs-hero), 5.4vw); max-width: 11ch; }
.hero:has(.hero__field[data-pattern="lijnen-split"]) .hero__visual {
  display: block;
  position: absolute; top: 0; right: 0; bottom: 0; left: 50%;
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero:has(.hero__field[data-pattern="lijnen-split"]) .hero__inner { padding-bottom: 7vh; }
  .hero:has(.hero__field[data-pattern="lijnen-split"]) .hero__title { font-size: var(--fs-hero); }
  .hero:has(.hero__field[data-pattern="lijnen-split"]) .hero__visual { left: 0; bottom: auto; height: 50%; }
}
.hero__sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 48px; }

.hero__inner {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  /* Titel, zin en knoppen staan als een groep bij elkaar, iets boven het midden */
  display: flex; flex-direction: column; justify-content: center; gap: clamp(1.75rem, 3vw, 2.75rem);
  padding-top: calc(var(--header-h) + 4vh);
  padding-bottom: 12vh;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.035em;
  max-width: 21ch;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line > span { display: inline-block; }
/* De punt achter de titel als vierkante pixel, even groot als het blokje bovenin de 'r' van Funnel Display.
   De echte punt blijft in de tekst staan (voor schermlezers en zoekmachines) maar is onzichtbaar. */
.hero__title .pixel-punt {
  display: inline-block;
  width: 0.084em; height: 0.084em;
  margin-left: 0.03em;
  overflow: hidden;
  text-indent: 1em; white-space: nowrap;
  background: currentColor;
}
.hero__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.75rem, 2.5vw, 2.25rem); }
.hero__actions { display: flex; align-items: center; gap: 32px; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 44ch; }

/* Secties ---------------------------------------------------------------- */
.section { padding-block: var(--section); }

/* Kleurvlakken: effen, volle kleur. Geen pastel en geen verloop (het verloop zit alleen in de hero) */
.deep { position: relative; isolation: isolate; overflow: hidden; color: var(--paper); background: var(--burgundy-800); }
.deep--support { background: var(--support-200); color: var(--burgundy-950); }
.deep.deep--support p, .deep.deep--support .tile__text { color: rgba(31, 10, 18, 0.78); }
.deep.deep--support .way__icon { color: var(--burgundy-800); }
.deep--support .pill--light { background: var(--burgundy-800); color: var(--white); }
.deep--support .pill--light:hover { background: var(--burgundy-900); }
.deep--dark { background: var(--burgundy-950); }

/* Contact en footer: effen bordeaux met een groot woordmerk (naar FRANCO) */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--burgundy-800); color: var(--paper);
  padding-top: clamp(5rem, 12vw, 10rem); padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.site-footer__cta { max-width: 40rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.site-footer__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 300; line-height: 1.04; letter-spacing: -0.035em; }
.site-footer__lead { margin: 1.25rem 0 2rem; font-size: var(--fs-lead); color: rgba(255, 255, 255, .86); max-width: 44ch; }
.site-footer__panel { padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(255, 255, 255, .16); }
.site-footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); }
/* Klein woordmerk boven de claim (vervangt het grote woordmerk onderin, zie website/archief/secties/10-footer-groot-woordmerk.html) */
.site-footer__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.site-footer__logo { display: block; color: var(--white); }
.site-footer__logo svg { display: block; width: 96px; height: auto; aspect-ratio: 617 / 162.3; fill: currentColor; }
.site-footer__claim { color: rgba(255, 255, 255, .72); max-width: 34ch; }
/* 10-11: "Part of Solid" onder de claim, als klein grijs label (zelfde stijl als de adreslabels) */
.site-footer__groep { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, .56); }
.site-footer__cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.site-footer__heading { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, .56); margin-bottom: 1rem; }
.site-footer__cols li + li { margin-top: 0.45rem; }
/* 09-11: adressen onder Contact, naast elkaar, met een klein grijs label erboven; de kolom Contact is daarvoor iets breder */
.site-footer__cols { grid-column: 5 / span 8; grid-template-columns: 1.15fr 0.7fr 1.6fr; }
.site-footer__adressen { display: flex; flex-wrap: wrap; gap: 0.9rem 1.25rem; margin-top: 1.1rem; } /* past het niet naast elkaar, dan vanzelf onder elkaar */
.site-footer__adres { color: rgba(255, 255, 255, .86); line-height: 1.5; }
.site-footer .adres:hover { color: var(--support-200); }
.site-footer__adres > span { display: block; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, .56); margin-bottom: 0.2rem; }
/* 09-11: LinkedIn en Instagram als ronde icoontjes */
.site-footer__social { display: flex; gap: 10px; margin-top: 1.25rem; }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; color: var(--white); transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); }
.site-footer__social a:hover { color: var(--support-200); border-color: var(--support-200); }
.site-footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.site-footer__social svg .vol { fill: currentColor; stroke: none; }
.site-footer__panel a { transition: opacity .3s var(--ease), color .3s var(--ease); }
/* Bij hover over een link vallen de andere links in dezelfde lijst terug */
.site-footer__panel ul:hover a { opacity: .4; }
.site-footer__panel ul a:hover { opacity: 1; color: var(--support-200); }
.site-footer__wordmark { display: block; margin-top: clamp(2.5rem, 6vw, 5rem); color: var(--white); }
.site-footer__wordmark svg { display: block; width: 100%; height: auto; aspect-ratio: 617 / 162.3; fill: currentColor; }
.site-footer__bottom {
  display: flex; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-small); color: rgba(255, 255, 255, .6);
}
.site-footer__bottom ul { display: flex; gap: 1.5rem; flex-wrap: wrap; }
/* Maker van de site, rechts in de onderste regel */
.site-footer__credit a { transition: color .25s; }
.site-footer__credit a:hover { color: var(--support-200); }

/* Adres als link naar de routebeschrijving (Google Maps): contactvenster en footer (10-11). Een los "Route →" eronder
   is geprobeerd en weer weggehaald; het adres zelf is de link, met een onderstreping bij hover */
.adres { display: inline-block; color: inherit; transition: color .25s var(--ease); }
.adres:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Beweging -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
    transition-delay: var(--delay, 0s);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
  /* Koppen komen scherp uit een blur */
  .js [data-reveal="blur"] { filter: blur(12px); transform: translateY(10px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
  .js [data-reveal="blur"].is-visible { filter: none; }


  .js .hero__title .line > span { transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; }
  .js .hero__title .line:nth-child(2) > span { animation-delay: .12s; }
  .js .hero__bottom { opacity: 0; animation: fade 1s var(--ease) .6s forwards; }
}
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

@media (max-width: 1023px) {
  .site-footer__brand, .site-footer__cols { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root { --header-h: 72px; }
  .site-header { --bar-h: 56px; --bar-top: 8px; left: 8px; right: 8px; }
  .site-header__inner { padding-inline: 16px 8px; }
  .mobile-menu { left: 8px; right: 8px; bottom: 8px; }
  .btn--header { display: none; }
  .brand__mark { height: 18px; }
  .hero__inner { padding-top: calc(var(--header-h) + 4vh); padding-bottom: 8vh; }
  .hero__actions { flex-wrap: wrap; gap: 20px 28px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__cols > div:last-child { grid-column: 1 / -1; } /* 09-11: Contact over de volle breedte, zodat de adressen niet raar afbreken */
}