/* =====================================================================
   INFINITY RECYCLING — motion- & platformlaag (na uitfasering, aug 2026)

   Dit bestand bevat SINDS FASE 0-3 ALLEEN NOG wat niet in Bricks kan of
   hoort. Alle bewerkbare styling zit in de builder:
   - Design tokens (--bg, --orange, --pad, …)  → Bricks Variable Manager
   - Basis-typografie, kleurpresets, container → Theme Style "Infinity"
   - Sectie- en kaartstyling (77 classes)      → Global Classes
     (class selecteren → Style → CSS → Custom CSS)
   NIETS hieruit dupliceren in dit bestand — de builder is de bron.

   Wat hier WEL blijft (bewust, niet migreren):
   - @font-face self-hosted woff2 (AVG) + reset/base (html:root 100%!)
   - nav + navdrawer (JS-gestuurd off-canvas menu, infinity.js)
   - hero-visuals (orbs/grain/spot/video) — GSAP-hooks
   - pillars-legacy + pillar-plant (plant-oil.js, wacht op terugkeer)
   - mission-legacy (het .mission__dust-canvas is op 4 sep 2026 vervallen)
   - media-FACADE (poster/play/chip/ns): raw HTML + JS-injectie,
     geen Bricks-elementen → global classes emitten daar niets voor
   - intro-deco (SVG-net + canvas, hero-particles.js)
   - .word reveal-helper, animatie-gating (html.ir-js / html.ir-anim),
     reduced-motion en de WP/Bricks-reconciliatie onderaan
   Prototype-bron (historisch): Infinity-dev\prototype2\; oude versies in
   app\backups-claude\uitgefaseerd\.
   ===================================================================== */

/* ---------- fonts (self-hosted, AVG) ---------- */
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/woff2/montserrat-v31-latin-regular.woff2') format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/woff2/montserrat-v31-latin-italic.woff2') format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/woff2/montserrat-v31-latin-500.woff2') format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:italic; font-weight:500; font-display:swap;
  src:url('../fonts/woff2/montserrat-v31-latin-500italic.woff2') format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/woff2/montserrat-v31-latin-600.woff2') format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/woff2/montserrat-v31-latin-700.woff2') format('woff2'); }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/woff2/open-sans-v44-latin-regular.woff2') format('woff2'); }
@font-face{ font-family:'Open Sans'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/woff2/open-sans-v44-latin-italic.woff2') format('woff2'); }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/woff2/open-sans-v44-latin-600.woff2') format('woff2'); }

/* ---------- design tokens ----------
   VERPLAATST naar Bricks → Global Variables (fase 0 uitfasering, aug 2026).
   Beheer de tokens (kleuren/typografie/layout) voortaan in de builder via de
   Variable Manager; Bricks levert ze als :root-variabelen (inline én via
   uploads/bricks/css/global-variables.min.css). Namen zijn ongewijzigd
   (--bg, --orange, --pad, …), dus alle regels hieronder werken door.
   NIET hier opnieuw definiëren — dan wint dit bestand en doet de builder niets. */

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* Bricks 2.x (frontend-layer.min.css) zet html{font-size:62.5%} → 1rem=10px.
   Dit design system rekent (net als het prototype) op de browserstandaard 1rem=16px.
   html:root wint qua specificiteit van Bricks' html-regel, ongeacht laadvolgorde. */
html:root{ font-size:100%; }
body{
  margin:0; background:var(--bg); color:var(--paper);
  font-family:var(--body); font-size:1.0625rem; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--teal-light); color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.06; margin:0; letter-spacing:-.02em; color:var(--paper); }
em{ font-style:italic; color:var(--teal-light); }

/* ---------- layout ---------- */
/* ---------- layout-helpers & buttons ----------
   VERPLAATST naar Bricks → Global Classes (fase 1 uitfasering, aug 2026):
   wrap, section, section--alt, section-label, display, lead,
   btn (+ --primary/--orange/--ghost). Beheer in de builder: class
   selecteren → Style → CSS → Custom CSS. Zelfde selectors/specificiteit. */

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--pad); transition:padding .5s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{ padding-block:.85rem; background:rgba(10,37,67,.72); backdrop-filter:blur(16px); border-color:var(--line); }
/* (logo-vergroting 14-jul-feedback TERUGGEDRAAID 16 juli: blauw blok in het deck
   = klant denkt er nog over na; weer vergroten zodra de klant het bevestigt) */
.nav__brand img{ height:38px; width:auto; }
.nav.is-scrolled .nav__brand img{ height:32px; }
/* inline links are replaced by the hamburger on EVERY breakpoint */
.nav__links{ display:none; }
/* anker-offset (klantwens 22 aug): een doel van een #link of ?goto= mag nooit onder
   de vaste nav belanden. --nav-bottom = gemeten onderrand van de nav (infinity.js,
   incl. admin-bar/scrollstand) + wat lucht. Geldt voor de native browsersprong
   (herladen op /legal/#privacy, terug-knop, scrollIntoView); de Lenis-scroll
   gebruikt dezelfde waarde (anchorOffset() in infinity.js). */
html{ --anchor-gap:48px; }   /* lucht tussen nav en aangesprongen titel — één knop voor CSS én JS */
[id]{ scroll-margin-top:calc(var(--nav-bottom,74px) + var(--anchor-gap,48px)); }

/* ---------- hamburger toggle (visible on every screen size) ---------- */
.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0; border:0; background:none;
  color:var(--paper); cursor:pointer; position:relative; z-index:210;
  transition:color .3s var(--ease);
}
.nav__toggle:hover{ color:var(--teal-light); }
.nav__toggle-bars{ position:relative; display:block; width:26px; height:14px; }
.nav__toggle-bars b{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor;
  transition:transform .4s var(--ease), opacity .25s var(--ease), top .3s var(--ease);
}
.nav__toggle-bars b:nth-child(1){ top:0; }
.nav__toggle-bars b:nth-child(2){ top:6px; }
.nav__toggle-bars b:nth-child(3){ top:12px; }
body.nav-open .nav__toggle-bars b:nth-child(1){ top:6px; transform:rotate(45deg); }
body.nav-open .nav__toggle-bars b:nth-child(2){ opacity:0; }
body.nav-open .nav__toggle-bars b:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* ---------- off-canvas drawer: slides in from the right on all breakpoints ---------- */
body.nav-open{ overflow:hidden; }
.navdrawer{
  position:fixed; inset:0; z-index:190;
  background:rgba(6,20,38,0);
  visibility:hidden; pointer-events:none;
  transition:background .55s var(--ease), visibility .55s var(--ease);
}
body.nav-open .navdrawer{ background:rgba(6,20,38,.55); visibility:visible; pointer-events:auto; }
.navdrawer__panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(440px, 88vw);
  display:flex; flex-direction:column; justify-content:center; gap:3rem;
  padding:6.5rem clamp(1.6rem,5vw,3.4rem) 3rem;
  background:var(--bg-2); border-left:1px solid var(--line);
  box-shadow:-40px 0 90px rgba(0,0,0,.45);
  transform:translateX(100%);
  transition:transform .55s var(--ease);
}
body.nav-open .navdrawer__panel{ transform:translateX(0); }
.navdrawer__nav{ display:flex; flex-direction:column; gap:1.4rem; }
.navdrawer__nav a{ font-family:var(--display); font-weight:500; font-size:clamp(2.4rem,7vw,3.6rem); line-height:1; letter-spacing:-.02em; color:var(--paper); display:flex; align-items:baseline; gap:1rem; transition:color .3s var(--ease); }
.navdrawer__nav a:hover,.navdrawer__nav a:focus-visible{ color:var(--teal-light); }
/* ---- menu uit WordPress (Weergave → Menu's → "Hoofdmenu"), gerenderd door het
   Bricks nav-menu-element in de drawer. De items zijn dus geen raw HTML meer:
   - nummering 01/02/03 komt uit een CSS-counter (nieuwe items nummeren vanzelf);
   - een sub-item (in WP onder een hoofditem gesleept, bv. Careers onder People)
     is altijd zichtbaar als ingesprongen subregel — Bricks' dropdown-gedrag en
     de toggle-knop zijn hier uitgeschakeld. */
.navdrawer__nav .bricks-nav-menu{ display:flex; flex-direction:column; gap:1.4rem; list-style:none; margin:0; padding:0; counter-reset:navn; }
.navdrawer__nav .bricks-nav-menu > li{ margin:0; counter-increment:navn; }
.navdrawer__nav .brx-submenu-toggle{ display:block; }
.navdrawer__nav .brx-submenu-toggle button{ display:none; }
/* nummerkolom: min-width zodat alle labels (ook van sub-items) exact uitlijnen */
.navdrawer__nav .bricks-nav-menu > li > a::before,
.navdrawer__nav .bricks-nav-menu > li > .brx-submenu-toggle > a::before{
  content:counter(navn, decimal-leading-zero); font-family:var(--head); font-weight:600; font-size:.7rem; letter-spacing:.18em; color:var(--teal-light); min-width:2.6rem; }
/* sub-item (klantwens 31 juli, definitief): Careers als ingesprongen subregel
   onder People. Zelfde letter als de hoofditems, één maat kleiner en iets
   gedempt, uitgelijnd met de labelkolom; verder kaal (stippellijntje uit
   variant C op verzoek weer weggehaald). */
.navdrawer__nav .bricks-nav-menu .sub-menu{ position:static; display:block; opacity:1; visibility:visible; transform:none;
  background:none; color:inherit; line-height:inherit; min-width:0; white-space:normal; box-shadow:none;
  list-style:none; margin:.95rem 0 0; padding:0; transition:none; }
.navdrawer__nav .bricks-nav-menu .sub-menu li{ margin:0; }
.navdrawer__nav .bricks-nav-menu .sub-menu a{ font-family:var(--display); font-weight:500; font-size:clamp(1.35rem,3.6vw,1.9rem);
  color:rgba(234,242,249,.72); padding:0 0 0 3.6rem; display:block; letter-spacing:-.01em; transition:color .3s var(--ease); }
.navdrawer__nav .bricks-nav-menu .sub-menu a:hover,.navdrawer__nav .bricks-nav-menu .sub-menu a:focus-visible{ color:var(--teal-light); }
/* Bricks' hover-"brug" uitschakelen (bug "Portfolio niet klikbaar", 4 sep 2026).
   Bricks zet op li.menu-item-has-children:hover een ::before neer: een onzichtbaar
   blok (position:absolute; top:100%; 100% breed; net zo hoog als het item;
   z-index:1) ONDER het item, bedoeld om een dropdown open te houden terwijl de
   muis ernaartoe beweegt. In de drawer staat het sub-item (Careers) statisch ín
   het People-item, dus dat blok valt precies over het volgende item (Portfolio)
   en vangt daar alle muisklikken af; via het blok blijft People bovendien in
   :hover, dus het blok blijft staan tot de muis het menu verlaat. Alleen desktop
   (hover), niet op touch. Het sub-item is hier altijd zichtbaar: brug overbodig. */
.navdrawer__nav .bricks-nav-menu > li.menu-item-has-children:hover::before{ content:none; display:none; }
.navdrawer__meta{ display:flex; flex-direction:column; gap:.45rem; color:var(--muted); font-size:.92rem; }
.navdrawer__meta a{ color:var(--teal-light); }

/* ---------- hero ---------- */
/* flex-direction expliciet: Bricks' .brxe-section is standaard flex-column */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:row; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:-10% 0 0 0; z-index:0; }
.hero__bg::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 72% 18%,rgba(26,108,141,.45),transparent 60%),
             radial-gradient(70% 70% at 12% 92%,rgba(8,35,63,.92),transparent 70%),
             linear-gradient(180deg,rgba(8,35,63,.45) 0%,rgba(8,35,63,.62) 50%,rgba(8,35,63,.92) 100%); }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.20; }
/* Bricks video element: de wrapper vult het hero-vlak, de <video> erin ook.
   pointer-events uit: Bricks zet een onclick-play/pause op <video>, maar dit is een achtergrond. */
.hero__video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__video,.hero__video video{ pointer-events:none; }
/* film grain over the hero video */
.hero__grid{ position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncG type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncB type='linear' slope='1.7' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:150px 150px; opacity:.45; mix-blend-mode:overlay;
  animation:heroGrain .42s steps(4) infinite; }
@keyframes heroGrain{
  0%{ background-position:0 0; }
  25%{ background-position:-32px 12px; }
  50%{ background-position:22px -24px; }
  75%{ background-position:-12px 28px; }
  100%{ background-position:0 0; }
}
/* hero-sleep (gezet door infinity.js zodra de hero uit beeld is): grain-repaint
   stilzetten scheelt compositing-werk op de rest van de pagina (perf 22 aug) */
.hero--asleep .hero__grid{ animation-play-state:paused; }
.hero__orb{ position:absolute; border-radius:50%; filter:blur(64px); opacity:.5; }
.hero__orb--1{ width:380px; height:380px; right:8%; top:14%; background:radial-gradient(circle,rgba(90,169,199,.5),transparent 70%); }
.hero__orb--2{ width:300px; height:300px; left:6%; bottom:10%; background:radial-gradient(circle,rgba(26,108,141,.5),transparent 70%); }
.hero__orb--3{ width:240px; height:240px; right:30%; bottom:24%; background:radial-gradient(circle,rgba(244,123,32,.22),transparent 70%); }
/* orbs drift with the cursor (parallax); GSAP still floats each orb inside */
.hero__orbs{ position:absolute; inset:0; z-index:0; pointer-events:none;
  transform:translate(calc(var(--px,0) * 26px), calc(var(--py,0) * 26px)); transition:transform .6s var(--ease); }
/* soft teal light that follows the cursor over the hero */
.hero__spot{ position:absolute; z-index:1; left:0; top:0; width:44vmax; height:44vmax; margin:-22vmax 0 0 -22vmax;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(90,169,199,.28) 0%, rgba(90,169,199,0) 58%);
  transform:translate(var(--hx,50vw), var(--hy,40vh));
  transition:transform .5s var(--ease), opacity .6s var(--ease);
  mix-blend-mode:screen; will-change:transform,opacity; }
.hero.is-hovering .hero__spot{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero__orbs{ transition:none; } .hero__spot{ display:none; } }

/* ---------- hero-kleuren instelbaar in Bricks (klantwens 4 sep 2026) ----------
   De klant wil met de hero-kleuren experimenteren zonder code. De overlay, de
   drie orbs en de cursor-gloed lezen daarom Bricks-variabelen (Variable Manager,
   categorie "Kleuren"). Bestaat een variabele niet, dan geldt de huidige kleur:
     hero-glow           tint-gloed rechtsboven + orb 2      (standaard = --teal)
     hero-glow-strength  sterkte van die gloed, 0 t/m 1     (standaard .45)
     hero-shade          donkere schaduw linksonder + verloop (standaard = --ink)
     hero-light          lichte accentkleur: orb 1 + cursor-gloed (standaard = --teal-light)
     hero-accent         warme orb rechtsonder              (standaard = --orange)
     hero-video-opacity  zichtbaarheid van de video, 0 t/m 1 (standaard .2)
     hero-video-seconds  seconden voordat de video stilvalt (standaard 6; 0 = blijven loopen)
   De basiskleur van de hero zelf staat gewoon op de sectie (Bricks → Style →
   Background). De vaste rgba-regels hierboven blijven staan als fallback voor
   browsers zonder color-mix(); daar werken de variabelen dan niet. */
@supports (background: color-mix(in srgb, red 50%, transparent)){
  .hero__bg::before{ background:
    radial-gradient(80% 60% at 72% 18%,
      color-mix(in srgb, var(--hero-glow, var(--teal, #1A6C8D)) calc(var(--hero-glow-strength, .45) * 100%), transparent), transparent 60%),
    radial-gradient(70% 70% at 12% 92%,
      color-mix(in srgb, var(--hero-shade, var(--ink, #08233F)) 92%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--hero-shade, var(--ink, #08233F)) 45%, transparent) 0%,
      color-mix(in srgb, var(--hero-shade, var(--ink, #08233F)) 62%, transparent) 50%,
      color-mix(in srgb, var(--hero-shade, var(--ink, #08233F)) 92%, transparent) 100%); }
  .hero__orb--1{ background:radial-gradient(circle, color-mix(in srgb, var(--hero-light, var(--teal-light, #5AA9C7)) 50%, transparent), transparent 70%); }
  .hero__orb--2{ background:radial-gradient(circle, color-mix(in srgb, var(--hero-glow, var(--teal, #1A6C8D)) 50%, transparent), transparent 70%); }
  .hero__orb--3{ background:radial-gradient(circle, color-mix(in srgb, var(--hero-accent, var(--orange, #F47B20)) 22%, transparent), transparent 70%); }
  .hero__spot{ background:radial-gradient(circle, color-mix(in srgb, var(--hero-light, var(--teal-light, #5AA9C7)) 28%, transparent) 0%, transparent 58%); }
}
.hero__video{ opacity:var(--hero-video-opacity, .20); }
/* (rechts-uitlijning van titel+lead — deck p.3/4 — TERUGGEDRAAID 16 juli: blauw blok
   = klant beslist nog over de hele hero/globe-richting. Bij herinvoering: let op de
   late .wrap{display:block}-regel onderin; die vergt een .wrap.hero__inner-uitzondering) */
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:.8em; font-family:var(--head); font-weight:600; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--teal-light); margin-bottom:1.8rem; }
.hero__eyebrow::before{ content:""; width:48px; height:1px; background:var(--teal-light); opacity:.7; }
.hero__title{ font-family:var(--display); font-size:clamp(2.8rem,8.5vw,7.4rem); font-weight:700; line-height:.98; letter-spacing:-.015em; color:var(--paper); margin:0; text-transform:uppercase; }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title [data-split]{ display:block; }
.hero__lead{ margin-top:2rem; max-width:46ch; font-size:clamp(1.2rem,2vw,1.6rem); font-weight:600; color:var(--ice); line-height:1.5; }
.hero__actions{ margin-top:2.6rem; display:flex; gap:1rem; flex-wrap:wrap; }
/* (scroll-indicator in de hero verwijderd op 12 juli 2026 — besluit Joeri;
   .hero__scroll / .hero__scroll-line + @keyframes scrollPulse weggehaald) */

/* ---------- about / statement / stats ----------
   VERPLAATST naar Bricks → Global Classes (fase 3, aug 2026): statement,
   about-lead (incl. volle-breedte-statement, klantwens 2 aug), stats__grid/
   stat/stat__num/stat__label (alleen nog in template "Infinity - Home").
   VERWIJDERD (dood): about__grid, about__aside, about-lead__body/__problem/
   __solve/__arrow, problem__grid/__block/__arrow — nergens meer in gebruik. */

/* word reveal helper (JS-gestuurd, infinity.js splitWords) */
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; }

/* ---------- pillars (scroll-built graphics) ---------- */
.pillars__head{ margin-bottom:clamp(2.5rem,5vw,4rem); max-width:60ch; }
.pillar{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(2.5rem,5vw,4.5rem); border-top:1px solid var(--line); }
.pillars__list .pillar:last-child{ border-bottom:1px solid var(--line); }
.pillars__list .pillar:nth-child(even) .pillar__text{ order:2; }
.pillar__num{ font-family:var(--head); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-light); }
.pillar h3{ font-size:clamp(1.7rem,3vw,2.5rem); margin:.6rem 0 1rem; }
.pillar p{ color:var(--muted); margin:0; max-width:42ch; }
.pillar__graphic{ aspect-ratio:4/3; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); display:grid; place-items:center; padding:1.8rem; }
.pillar__graphic svg{ width:100%; height:100%; overflow:visible; }
.draw{ stroke-dasharray:600; }
html.ir-anim .draw{ stroke-dashoffset:600; }

/* --- each pillar fills (near) a full screen --- */
#pillars{ padding-block:0; }
#pillars .pillars__head{
  min-height:56svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(6rem,12vw,9rem) clamp(1.5rem,3vw,2.5rem);
  margin-bottom:0;
}
#pillars .pillar{
  min-height:100svh;
  align-content:center;
  padding-block:clamp(3rem,7vh,6rem);
}
#pillars .pillar h3{ font-size:clamp(2rem,4vw,3.4rem); }
#pillars .pillar p{ font-size:1.05rem; max-width:44ch; }
#pillars .pillar__num{ font-size:.82rem; }
#pillars .pillar__graphic{ padding:2.2rem; }

/* --- Pillar 01: recycling-plant blueprint, oil flows through the pipes on scroll --- */
#pillars .pillar--plant{
  display:block; min-height:0; height:230svh; padding:0; align-content:initial; border-top:0;
  width:100vw; position:relative; left:50%; margin-left:-50vw;   /* full-bleed break-out of .wrap */
  background:#083D67;
}
.pillar__plant-sticky{ position:sticky; top:0; height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.plant-stage{ position:relative; width:min(94vw, 90svh*2400/1792); aspect-ratio:2400/1792; }
.plant-img{ display:block; width:100%; height:100%; }
.plant-oil{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1; }
.plant-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(72deg, rgba(6,26,49,.92) 0%, rgba(6,26,49,.42) 26%, rgba(6,26,49,0) 52%),
             linear-gradient(0deg, rgba(6,26,49,.85) 0%, rgba(6,26,49,0) 26%); }
.pillar__text--over{ position:absolute; left:clamp(1.2rem,5vw,4rem); bottom:clamp(1.4rem,6vh,3.6rem); z-index:3; max-width:44ch; }
.pillar__text--over h3{ color:var(--paper); }
@media (max-width:900px){ #pillars .pillar--plant{ height:200svh; } .plant-stage{ width:96vw; } }

/* ---------- mission (LEGACY — sectie op 2 aug van de homepage verwijderd,
   verzoek Joeri; verloop + stofveld zijn naar Media verhuisd, zie hieronder.
   Regels blijven staan voor een eventuele terugkeer van de sectie.
   `.mission .statement` zit sinds fase 3 in de global class `mission`.) ---------- */
.mission--closer{ position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, #081d36 100%); }
.mission--closer .wrap{ position:relative; z-index:1; }
.mission--closer .statement{ font-size:clamp(2rem,4.8vw,3.8rem); max-width:20ch; }
/* (.mission__dust — het canvas van mission-dust.js — is op 4 sep 2026 vervallen:
   het script wordt niet meer geladen, zie functions.php) */

/* ---------- media (watch + listen) ----------
   Media = sinds 2 aug de AFSLUITER van de homepage. Sinds 4 sep 2026 een
   gewone sectie: geen stofveld (mission-dust.js vervallen) en geen vast
   verloop meer — de achtergrondkleur staat in Bricks op de sectie zelf
   (Style → Background); het verloop in de global class `media` is daar
   verwijderd. De sectie schuift nog wel over de pillars-stage heen
   (pillars-f.css), dus haar bovenrand is de naad met het navy canvas. */
/* Kaart-structuur (media, media__head/__grid/__card/__kicker/__frame(--video/
   --audio incl. iframe-maten)/__caption) → Bricks Global Classes (fase 3).
   De audio-frame-hoogte (352px = volledige Spotify-speler, geen layout-shift
   bij de klik-swap) en de video/Spotify-stapeling (klantwens 11 juli) zitten
   nu in die classes. Hieronder blijft alleen het facade-blok: die markup is
   raw HTML (html-element) + JS-injectie, geen Bricks-elementen. */

/* --- facade: donkere poster + merk-play-knop; de echte iframe laadt pas ná een klik --- */
.media__facade{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:var(--panel); display:block; }
/* (geen JS: de facade is sinds aug 2026 een gewone link naar YouTube/Spotify — geen noscript-iframe meer nodig) */
.media__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.62) contrast(1.05) brightness(.68); transition:filter .6s var(--ease), transform .9s var(--ease); }
.media__tint{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,108,141,.28),rgba(8,35,63,.72)); }
.media__frame--audio .media__tint{ background:linear-gradient(180deg,rgba(18,58,94,.52) 0%,rgba(8,35,63,.30) 42%,rgba(8,35,63,.90) 100%); }
.media__play{ position:absolute; top:50%; left:50%; width:76px; height:76px; transform:translate(-50%,-50%); border-radius:50%; background:var(--orange); display:grid; place-items:center; box-shadow:0 0 0 1px rgba(244,123,32,.35); transition:transform .4s var(--ease), background .4s var(--ease); }
.media__play svg{ width:34%; transform:translateX(2px); }
.media__play-halo{ position:absolute; inset:-10px; border:1px solid var(--orange); border-radius:50%; opacity:.4; transform:scale(.9); transition:transform .5s var(--ease), opacity .5s var(--ease); }
.media__chip{ position:absolute; left:16px; bottom:14px; font:600 .72rem/1 var(--head); letter-spacing:.12em; text-transform:uppercase; color:var(--paper); background:rgba(8,35,63,.55); padding:.5em .75em; border-radius:var(--r-sm); backdrop-filter:blur(4px); }
.media__meta{ position:absolute; left:18px; right:18px; bottom:16px; display:flex; flex-direction:column; gap:.2rem; text-align:left; }
.media__meta .media__show,.media__meta .media__ep{ text-shadow:0 1px 10px rgba(8,35,63,.6); }
.media__show{ color:var(--teal-light); font:600 .7rem var(--head); letter-spacing:.08em; text-transform:uppercase; }
.media__ep{ color:var(--paper); font:600 1.05rem/1.25 var(--head); letter-spacing:-.01em; }
@media (max-width:440px){ .media__meta{ left:14px; right:14px; } .media__ep{ font-size:.92rem; } }
.media__facade:focus-visible{ outline:2px solid var(--teal-light); outline-offset:4px; }
.media__ns{ position:absolute; inset:0; width:100%; height:100%; }
.media__ns--audio{ position:static; height:352px; }
.media__facade:hover .media__play{ background:var(--orange-dark); }
@media (prefers-reduced-motion:no-preference){
  .media__facade:hover .media__poster{ filter:brightness(.78) saturate(.7); transform:scale(1.03); }
  .media__facade:hover .media__play{ transform:translate(-50%,-50%) scale(1.06); }
  .media__facade:hover .media__play-halo{ transform:scale(1.15); opacity:0; }
}
@media (max-width:900px){
  .media__play{ width:68px; height:68px; }
}
@media (max-width:560px){
  .media__play{ width:60px; height:60px; }
}

/* ---------- portfolio & people kaarten ----------
   VERPLAATST naar Bricks → Global Classes (fase 2, aug 2026): proj + alle
   proj__*-classes, people__grid, member + alle member__*-classes. De kaarten
   zelf zijn Bricks query loops (portfolio_company / team_member).
   VERWIJDERD (dood): .portfolio__head, .people__head, .portfolio__grid,
   .page-hero — nergens meer in gebruik (oude home-portfolio-sectie). */

/* ---------- cta ---------- */
/* De CTA-sectie (gecentreerd paneel + knop) is op 12 juli 2026 verwijderd: stond niet
   in het klantontwerp. Home eindigt nu op "03 Mission" → footer. CSS bewust weggehaald
   zodat er geen dode regels blijven staan. */

/* ---------- footer ----------
   VERPLAATST (fase 3): footer, footer__top (incl. 900/560-collapse),
   footer__brand, footer__col, footer__addr (tekst, geen link — QA F9),
   footer__bottom → Bricks Global Classes. */

/* ---------- sub-page hero ----------
   VERPLAATST (fase 2): page-intro (padding + wrap-z-index) en page-hero__grid
   → Bricks Global Classes. .vision__title zat al in fase 1.
   VERWIJDERD (dood): .page-hero{...}, .page-hero h1, .page-hero .lead —
   de subpagina's gebruiken .page-intro (titel + lead onder elkaar,
   klantwens 1 aug). */

/* decorative constellation network (fills bare dark sections) */
.intro-deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
/* laat de deco (net + grain-glow) onderaan zacht uitdoven i.p.v. hard afgekapt op de
   sectiegrens — anders een zichtbare horizontale naad met de sectie eronder (QA F7) */
.page-intro .intro-deco{ -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 96%);
          mask-image:linear-gradient(to bottom,#000 62%,transparent 96%); }
.intro-deco__net{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.intro-deco__net .net{
  -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 30%, rgba(0,0,0,.55) 48%, #000 70%);
          mask-image:linear-gradient(to right, transparent 0%, transparent 30%, rgba(0,0,0,.55) 48%, #000 70%); }
.intro-deco__net .halo{ fill:url(#netHalo); }
.intro-deco__net .net-line{ stroke:var(--teal-light); stroke-width:1; fill:none; vector-effect:non-scaling-stroke; }
.intro-deco__net .net-line.faint{ stroke:rgba(206,222,237,.12); }
.intro-deco__net .nodes{ filter:blur(.4px); }
.intro-deco__net .node{ fill:var(--teal-light); }
.intro-deco__net .node.ice{ fill:var(--ice); }
.intro-deco__net .node.deep{ fill:var(--teal); }
.intro-deco__net .node.accent{ fill:var(--orange); }
/* interactive grain-field background (replaces the SVG net when JS + motion are on) */
.intro-deco__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.1s var(--ease); }
.intro-deco.is-ready .intro-deco__canvas{ opacity:1; }
.intro-deco.is-live .intro-deco__net{ display:none; }
.intro-deco.is-live::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, var(--bg-2) 0%, rgba(10,37,67,.7) 26%, rgba(10,37,67,0) 58%),
             linear-gradient(0deg, rgba(10,37,67,.5) 0%, rgba(10,37,67,0) 22%); }
/* people groups + member-details → Bricks Global Classes (fase 2):
   group/group__head/group__count, member__link, member--ph, member--dyn
   (incl. het persoon-icoon als achtergrond) en de hover:none-fallbacks. */

/* ---------- careers & internships (People) ----------
   VERPLAATST (fase 1): careers__grid/__card/__kicker/__actions/__linkedin →
   Bricks Global Classes. De h3/p-styling in de kaarten en de lead-marge in de
   header staan nu als element-instellingen op de elementen zelf (People-pagina
   én sectie-template "Careers"); careers__head is vervallen. */

/* portfolio-pagina (grid + hover-overlay + fund-filter) → Bricks Global
   Classes (fase 2): portfolio-page__grid (incl. 900/560-collapse),
   proj__hover/-in/logo/rule/intro/pills/country/visit (incl. touch-fallback)
   en proj-filter/__label/__options (incl. de brxe-filter-radio-override en
   de focus-visible-ring). */

/* ---------- legal ----------
   VERPLAATST (fase 1): legal__wrap/__toc/__body → Bricks Global Classes
   (incl. de 900px-collapse). De .legal-paddings staan als element-instelling
   op de sectie van de Legal-pagina; de class .legal is vervallen. */

/* ---------- reveal init states (JS animeert; alleen als ir-anim actief is) ---------- */
html.ir-anim [data-fade-up]{ opacity:0; transform:translateY(30px); }
/* hero intro pre-hide — infinity.js onthult; guard voorkomt flash op first paint */
html.ir-anim .hero__inner{ opacity:0; }
/* De nav wordt NIET meer vooraf verborgen (menu-bug 4 sep 2026: de header was
   onzichtbaar en onklikbaar tot alle JS onderaan de pagina geladen was, plus
   0,8 s GSAP-vertraging). Wél een korte entree, puur in CSS: start bij de eerste
   paint, heeft geen JS nodig en de nav blijft de hele tijd klikbaar.
   (Regels weghalen = geen entree; reduced-motion zet animaties sowieso uit.) */
@keyframes ir-nav-in{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }
html.ir-anim .nav{ animation:ir-nav-in .8s var(--ease) both; }

/* ---------- responsive ---------- */
/* (breakpoints van gemigreerde grids — people__grid, portfolio-page__grid,
   stats__grid, footer__top — zitten sinds fase 2/3 in hun global class) */
@media (max-width:900px){
  .pillar{ grid-template-columns:1fr; }
  .pillars__list .pillar:nth-child(even) .pillar__text{ order:0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  [data-fade-up]{ opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   WP / BRICKS RECONCILIATIE
   Kleine correcties zodat Bricks-elementen zich gedragen als de
   prototype-DOM. Nooit op brxe-id's stylen; alleen op classes.
   (Deze file laadt NÁ bricks frontend-CSS → gelijke specificiteit wint.)
   ===================================================================== */

/* WP admin bar: vaste nav eronder laten beginnen (alleen ingelogd) */
body.admin-bar .nav{ top:32px; }
@media (max-width:782px){ body.admin-bar .nav{ top:46px; } }

/* LET OP: hier NOOIT een generieke `.brxe-div{display:...}`-regel zetten —
   die staat ná de component-CSS en overschrijft dan display:none/flex/grid
   op elke div (bewezen bug: nav-links zichtbaar, hover-overlays niet
   gecentreerd). Bricks geeft .brxe-div zelf géén layout-regels, dus
   div-elementen zijn al gewoon block. */

/* Wees expliciet voor de belangrijkste grids/flex-containers, zodat een
   Bricks-default (of Theme Style) ze nooit kan overrulen. Alle grid-classes
   zijn in fase 1-3 naar global classes verhuisd en hebben hun display daar
   expliciet staan; alleen de nav (geen global class) blijft hier. */
.nav{ display:flex; }

@media (hover:none){
  .proj .proj__hover,
  .member .member__hover      { opacity:0; pointer-events:none; }
  .proj .proj__hover-in,
  .member .member__hover-in   { transform:translateY(14px); opacity:0; }

  .proj.is-open .proj__hover,
  .member.is-open .member__hover      { opacity:1; pointer-events:auto; }
  .proj.is-open .proj__hover-in,
  .member.is-open .member__hover-in   { transform:none; opacity:1; }

  .proj.is-open .proj__tag,
  .proj.is-open .proj__fund   { display:none; }
}