/*
Theme Name: Mega Windforce
Theme URI: https://megawindforce.com/
Author: Mega Windforce
Description: De site van Mega Windforce als een pagina. Gegenereerd uit
  site/build.py met wp/maakthema.py -- bewerk het thema niet met de hand.
Version: 2026.09.18
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mwf-basis
*/

/* ═══ Mega Windforce — basis, huisstijl WhisperRing ═══════════════════
   Kleur, letter en ritme volgen whisperring.nl. Alle body-tekst en alle
   beelden zijn placeholders: zie de klassen .ph en .imgph onderaan. */

:root{
  color-scheme:light;
  --brand:#006D81; --brand-dp:#00505F; --brand-lt:#4FBBD1;
  /* B7: #4C7872 was groenig (H172) terwijl de merkkleur cyaan is (H189), dus
     de gedempte tekst trok naar een derde tint, en de marge was overal
     minder dan een halve punt: 4,96:1 op wit maar 4,43:1 op de beige en
     4,31:1 op de tint. Deze is gemeten tegen de DONKERSTE ondergrond die
     hem draagt: 5,78 op wit, 5,38 op de zachte band, 5,02 op de tint. */
  --alt:#59686F;
  /* PROEF 17 september: --soft was #F3F7F7, een groengrijs dat in dezelfde
     hoek ligt als de merkkleur, waardoor het accent nergens tegen afsteekt.
     De richting komt van de leikleur uit de rekentool (--slate-tint
     #F3F6FA), maar die op volle sterkte maakte de naad met de witte band
     harder: het hoogteverschil bleef gelijk (delta L 3,06 naar 3,23) maar
     het totale kleurverschil liep van 3,37 naar 3,96 op, omdat b* van
     -0,47 naar -2,27 sprong. Een tintverschil zie je bij deze lichtheden
     eerder dan een helderheidsverschil. Deze waarde houdt de blauwe
     richting en zet het verschil met wit op 3,68, dus tussen het oude
     groengrijs (3,37) en de eerste blauwe proef (3,96) in. Wessel wilde
     de band iets minder wit dan #F6F8FC, dat er een stap tussen zat. */
  --page:#FFFFFF; --soft:#F4F7FB; --tint:#E7F1F2;
  /* B6: de neutralen lagen zelf in de accenttint (S37% tot S7% richting
     groencyaan), dus er was geen grond meer waar het petrol tegen kon
     afsteken: een petrolknop op een petrolachtige band met petrolachtige
     randen. Nu volgen ze de blauwe kant van --soft. */
  --line:#DFE4EA; --line-2:#C0CAD4;
  /* De merkkleur is op wit een goede tekstkleur (5,99:1) maar als groot
     vlak te licht: witte tekst op .70 dekking haalt daar 3,78:1 en zakt
     dus onder AA. Alles wat een petrol VLAK is gebruikt daarom deze
     donkere variant, waar diezelfde tinten 5,3 tot 6,2:1 halen. De
     merkkleur zelf blijft wat hij goed kan: voorgrondkleur op licht. */
  --vlak-accent:#00505F; --vlak-accent-in:#003C48;
  /* een rand die je moet kunnen zien. --line-2 haalt op wit 1,68:1 en dat
     is te weinig voor een leeg invoerveld, dat alleen aan zijn rand te
     herkennen is. Deze haalt 3,25:1 op wit en 3,01:1 op de zachte band. */
  --rand-veld:#7E9391;
  /* korrel over de donkere vlakken: breekt de banding in de verlopen en geeft
     alle donkere banden dezelfde materie. feTurbulence van 180 bij 180 dat
     zichzelf naadloos herhaalt, geen extern bestand. */
  /* A6: de doorzichtige varianten stonden 36 keer met de hand uitgeschreven,
     dus --deep verschuiven liet zestien schaduwen en waasverlopen op de oude
     kleur staan. Als losse kanalen volgen ze het token wel. */
  --deep-rgb:5 39 48; --wit-rgb:255 255 255;
  --brand-rgb:0 109 129; --amber-edge-rgb:201 162 39;
  --stand-live-rgb:76 195 138; --stand-wacht-rgb:226 144 58;
  --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.15'/%3E%3C/svg%3E");
  /* het beige van Eyevestor, gemeten op hun campagnepagina en ook gebruikt
     in de graphic bij de aankondiging */
  --ey-beige:#F5F2EB;
  /* --plate verschilde 1,05:1 van --deep, onzichtbaar, onder twee namen.
     En --dark, het grootste donkere vlak van de site, stond op S48% terwijl
     de rest op S89% lag: de voet las als grijszwart en de hero als diep
     petrol, twee donkere families aan het eind van elke pagina. Nu drie
     trappen op een tint (wit haalt er 16,7:1 op). */
  --deep:#052730; --plate:#052730; --dark:#04212A;
  --ink:#131A1D; --body:#565E5E;
  --amber:#8A6D1B; --amber-edge:#C9A227; --amber-bg:#FAF5E6;
  /* A7: --brand-lt was de enige lichte trap van de merkkleur en werd nergens
     gebruikt, terwijl elk accent op donker wit werd omdat #006D81 op --deep
     maar 1,7:1 haalt. Dit is zijn rol: accent binnen een donker vlak. */
  --voet-ink:#8FA0A3;
  /* het stipje bij de stand van de campagne: oranje zolang hij nog moet
     openen, groen zodra hij loopt. Geen huisstijlkleuren maar de gangbare
     stoplichttaal, want dat leest iedereen meteen goed. */
  --stand-wacht:#E2903A; --stand-live:#4CC38A;
  /* dezelfde twee kleuren, donker genoeg om als kleine tekst op wit te
     lezen: het oranje haalt op wit maar 2,5:1 en dat is te weinig */
  --stand-wacht-tx:#A65E12; --stand-live-tx:#177A4D;
  /* Drie diepten in plaats van een. Een verspringing van 14px is op een
     portret van 78px bijna een vijfde van de eigen diameter en op een kaart
     van 400px niets, dus de zestien ronde portretten zweefden merkbaar
     hoger dan de kaarten eromheen terwijl ze juist het rustigst horen te
     zijn. Daarnaast stonden er negen losse waarden uit dezelfde familie in
     het blad, zodat er geen antwoord was op de vraag of de cookiemelding
     hoger ligt dan de dialoog. Nu wel: 1 raakt de pagina bijna, 2 ligt
     erop, 3 zweeft erboven. */
  --schaduw-1:0 4px 10px -6px rgb(var(--deep-rgb) / .34);
  --schaduw-2:0 14px 34px -18px rgb(var(--deep-rgb) / .4);
  --schaduw-3:0 24px 52px -22px rgb(var(--deep-rgb) / .5);
  /* Een uitgesneden render heeft geen doos, dus box-shadow werkt niet: die
     zou een rechthoek tekenen om een turbine heen. drop-shadow volgt het
     alfakanaal en dus de werkelijke vorm. Twee lagen en licht gehouden: de
     render moet nog steeds als render tegen de band staan en niet als een
     uitgeknipt plaatje dat erboven zweeft. */
  /* Een indrukdiepte voor alle knoppen. Drie dieptes maakten van een
     gebaar drie gebaren; een klein vlak dat minder lijkt te bewegen los je
     op met een kortere duur, niet met een diepere schaal. En twee
     focusringen, want die leert een toetsenbordgebruiker een keer. */
  --druk:.97;
  --schaduw-render:drop-shadow(0 5px 9px rgb(var(--deep-rgb) / .10))
    drop-shadow(0 16px 30px rgb(var(--deep-rgb) / .07));
  /* DE spatieringsschaal. Hiervoor stonden er 43 losse px-waarden in het
     blad, waarvan 22 niet deelbaar door 4: er was wel een impliciete maat
     maar die stond nergens vast en dreef dus weg, zodat geen twee
     componenten dezelfde binnenmaat deelden. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* Drie bandmaten met dezelfde groeisnelheid. Hiervoor groeide elk element
     met een eigen vw-snelheid mee met het venster (25 verschillende in 36
     clamps), dus wat op 1180px klopte, klopte op 1440px net niet meer.
     --band-m is exact de oude --bandrand: gewone banden veranderen niet. */
  --band-s:clamp(28px,2.9vw,44px);
  --band-m:clamp(42px,4.4vw,68px);
  --band-l:clamp(56px,5.9vw,90px);
  /* C8: er lagen zeven verschillende rastergoten in het blad en drie
     kolomtellingen, dus geen twee opeenvolgende secties deelden een
     verticale lijn. Twee goten: een voor kaartrasters, een voor de grote
     tweedeling tekst tegenover beeld. */
  --goot:clamp(18px,1.8vw,26px);
  --goot-l:clamp(32px,3.4vw,52px);
  /* De kromming is bij dit bedrijf niet decoratief maar het onderwerp zelf,
     en juist die vormtaal had als enige geen schaal: negen waarden door
     elkaar (0, 2, 3, 4, 5, 6, 14, 999px en 50%). Nu vier, plus de cirkel.
     De pil blijft bestaan als eigen betekenis: hij is de vorm van een
     TOESTAND, en draagt de stip die dat ook zonder kleur leesbaar maakt. */
  --r-1:3px;   /* knop, veld, chip, klein label */
  --r-2:6px;   /* kaart, beeld, video */
  --r-3:12px;  /* wat boven de pagina zweeft: plaat, dialoog, melding */
  /* H6: de kop van zes van de zeven pagina's stond op #223F46 -> #56696C ->
     #8A9895, drie waarden die nergens in :root voorkwamen: de uitgerekende
     uitkomst van een donkere waas over een lichte render. #8A9895 is een
     ontkleurd grijsgroen dat verder nergens op de site bestaat, de kleur die
     je krijgt als je iets uit een beeld pipet en niet de kleur die je kiest.
     Wat een bezoeker op zes pagina's als eerste ziet hoort de merkkleur te
     zijn. Wit haalt op de lichtste stop 6,1:1. */
  /* H6 AFGEWEZEN (17 september): de paginakop uit de merkkleur opbouwen.
     Te intens blauw, zei Wessel. Het oude verloop blijft, met de eindstop
     die op 17 september al van #8A9895 naar #4C6268 ging omdat wit daar
     maar 3,00:1 haalde. */
  --bandrand:var(--band-m); /* lucht boven en onder een band */
  --w:1180px;
  --f:"Maven Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --e:cubic-bezier(.22,.68,.28,1);
  --hh:92px;
  --anker:calc(var(--hh) + var(--s5)); /* een vaste kop, dus een ankermaat */
  /* E6: de portretten stonden op 104, 84 en 72px, en dat is geen reeks: er
     zat geen verhouding tussen, waardoor de ronde vorm een toevalligheid
     werd in plaats van een merkteken. Nu een schaal met een vaste stap. */
  --portret-l:104px;
  --portret-m:calc(var(--portret-l) * .78);
  --portret-s:calc(var(--portret-l) * .6);
  --t-h1:clamp(2.3rem,1.5rem + 3.2vw,3.9rem);
  /* D3: de trap miste een trede. Van h2 naar h3 was de sprong 2,07 en
     daarna naar de lopende tekst 1,12: een klif met een vlakte erachter.
     Deze h2 volgt de helling van h1, zodat de verhouding tussen die twee
     niet meer van de schermbreedte afhangt. */
  --t-h2:clamp(1.62rem,1.12rem + 2vw,2.44rem);
  --t-lead:clamp(1.05rem,1rem + .4vw,1.28rem);
  /* D8 en H10 botsten: kleiner maken omdat het getal de kop overstemde, of
     juist veel groter zodat ze niet langer om dezelfde rol vechten. Dit is
     H10: op een investeerderspagina ZIJN de getallen het argument. Ze waren
     43px tegen een kop van 40px, dus praktisch gelijk en daarmee twee
     elementen die om dezelfde rol streden. Nu is het getal een vlak en het
     label een onderschrift; de kop blijft de kop. */
  --t-metric:clamp(2.5rem,1.6rem + 3.2vw,4.2rem);
  /* DE typeschaal. Onder deze vier displaymaten lagen 27 losse waarden,
     met twaalf treden tussen .86 en 1.08rem. Een verschil van 0,3px is
     niet zichtbaar, dus die treden gaven geen rangorde: ze gaven alleen
     elk nieuw blok de vrijheid om opnieuw te kiezen. Dit zijn de zes
     treden die de site werkelijk nodig heeft. Kiezen kan niet meer. */
  --t-label:.72rem;   /* kleine kapitalen: kader, stand, jaartal, voetkop */
  --t-xs:.82rem;      /* datums en bijschriften */
  --t-sm:.9rem;       /* lopende tekst binnen een kaart of paneel */
  --t-base:1rem;      /* lopende tekst in de pagina */
  --t-md:1.08rem;     /* kop van een kaart, altijd boven de tekst eronder */
  --t-h3:clamp(1.18rem,1.04rem + .56vw,1.5rem);
  --ls-label:.12em;   /* kapitalen hebben lucht nodig naarmate ze krimpen */
}

/* De basis stond in px terwijl de hele schaal in rem is: 1rem was 16px en
   de lopende tekst 16,5px, dus geen enkele verhouding in dit blad klopte
   met wat er stond (.94rem was in werkelijkheid 0,91x de tekst). Erger:
   zet een bezoeker zijn standaardlettergrootte op 20px, dan groeide alles
   mee behalve de lopende tekst, en kantelde de hiërarchie precies bij wie
   hem het hardst nodig heeft. Nu is 1rem exact de lopende tekst.
   rem in een media query blijft 16px, dus de breekpunten schuiven niet. */
html{font-size:103.125%}
*{box-sizing:border-box}
/* Een knopbasis. Hiervoor stond background:none;border:0;font:inherit;
   cursor:pointer negen keer los in dit blad, elke keer net anders, en was
   er geen plek om :disabled of het indrukgebaar een keer voor alles te
   regelen. :where() weegt niets, dus geen bestaande regel hoeft te wijken. */
:where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* .li staat op display:flex; zonder !important wint dat van het hidden-attribuut
   en blijft een verborgen verwijzing gewoon staan. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--page);color:var(--body);font-family:var(--f);
  font-size:1rem;line-height:1.62;-webkit-font-smoothing:antialiased;padding-top:var(--hh)}
/* Een render die je per ongeluk kunt oppakken en over de pagina slepen leest
   als een losse afbeelding in plaats van als onderdeel van de pagina. */
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none}
a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:600}
/* balance verdeelt een korte kop gelijk over zijn regels en doet niets
   boven een regel of zes; pretty haalt alleen het weeskind weg. Koppen van
   een of twee regels krijgen dus balance, de 39 kaartkoppen pretty. */
h1,h2{text-wrap:balance} h3,h4{text-wrap:pretty}
/* Interlinie en letterafstand rekenen mee met de maat. De -.028em was voor
   62px uitgerekend; op een telefoon, waar de h1 36px wordt en over drie of
   vier regels breekt, plakten de letters daardoor aan elkaar en raakten de
   stokken de staarten van de regel erboven. Deze twee formules geven bij
   62px vrijwel dezelfde waarden als hiervoor en bij 36px lossere. */
h1{font-size:var(--t-h1);font-weight:500;
  line-height:calc(.93em + 7px);letter-spacing:calc(-.04em + .7px)}
h2{font-size:var(--t-h2);font-weight:500;max-width:24ch;
  line-height:calc(1.04em + 4.6px);letter-spacing:calc(-.032em + .45px)}
h2.lang{max-width:none}
.tekst{max-width:68ch}
/* De tekstkop erfde max-width:24ch (ongeveer 240px) van de globale h2 en de
   tracking die voor 38px displayformaat is uitgerekend. Op Privacy brak
   Where it is stored and how long daardoor over drie regels boven een alinea
   die op 630px doorloopt: het onrustigste element op de rustigste pagina.
   Een tekstkop is geen displaykop en krijgt dus zijn eigen definitie. */
.tekst h2{font-size:var(--t-h3);letter-spacing:0;max-width:none;margin-top:var(--s6)}
.tekst h2:first-child{margin-top:0}
.tekst p{margin-bottom:1em}
/* h3 stond in elf maten, waarvan zes op of onder de lopende tekst. Een kop
   die kleiner is dan zijn eigen alinea en alleen vetter, is geen kopniveau
   meer maar vette lopende tekst, en juist die zes droegen de onderverdeling
   op Company, Investors en WhisperRing. Er zijn er voortaan twee: deze voor
   een sectiekop, en --t-md voor de kop van een kaart. Die laatste blijft
   aantoonbaar boven de tekst eronder (17,8 tegen 16,5px). */
h3{font-size:var(--t-h3);line-height:1.28;letter-spacing:-.008em}
p{margin:0 0 1.1em} p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-1)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(18px,4vw,28px)}
.klein{font-size:var(--t-sm);line-height:1.6}
/* EEN recept voor het kleine kapitaallabel. Het stond op zeven plekken in
   zeven maten, twee gewichten en zes letterafstanden, en juist bij het
   kleinste type leest elk verschil in spatiëring als een ander lettertype.
   Bovendien stond het omgekeerd: de kleinste had de minste letterafstand,
   terwijl kapitalen juist meer lucht nodig hebben naarmate ze krimpen.
   Het verschil zit voortaan in de doos eromheen, niet in de typografie. */
.kader,.verhaal .label,.imgph b,.status,.model .jaar,footer.bot h4{
  font-size:var(--t-label);font-weight:600;letter-spacing:var(--ls-label);
  text-transform:uppercase;line-height:1.25}

/* ── kop ─────────────────────────────────────────────────────────── */
header.top{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--hh);
  background:var(--page);box-shadow:0 1px 0 var(--line)}
header.top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
header.top .logo{display:flex;align-items:center;flex:none}
header.top .logo img{height:calc(var(--hh) - 18px);width:auto}   /* zo groot als de witte band toelaat */
nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);margin-left:auto}
/* D9: in de balk die op elke pagina en bij elke scrollpositie in beeld staat
   stond de belangrijkste handeling in het KLEINSTE formaat. Nu delen de
   navigatie en de knop ernaast een maat. */
nav a{color:var(--body);font-weight:500;font-size:var(--t-sm);position:relative;padding:6px 0;white-space:nowrap;
  transition:color .18s var(--e)}
nav a:hover{color:var(--brand)}
nav a.on{color:var(--brand)}
nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);border-radius:var(--r-1)}
.ey-knop{flex:none;background:var(--brand);color:#fff;font-weight:600;font-size:var(--t-sm);
  padding:11px 18px;border:1px solid transparent;border-radius:var(--r-1);margin-left:6px;
  transition:background-color .18s var(--e)}
/* nav a:hover zet de kleur op --brand en is specifieker dan .ey-knop, dus
   werd de tekst op de knop bij hover donkerblauw op donkerblauw en leek hij
   te verdwijnen. Hier expliciet wit terugzetten. */
.ey-knop:hover{background:var(--brand-dp);color:#fff}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;padding:4px 6px}

/* ── secties ─────────────────────────────────────────────────────── */
/* Gebonden aan #main en niet los op .page. WordPress zet met body_class() een
   rij namen op de BODY, en bij een statische voorpagina zit daar letterlijk
   "page" tussen: class="home wp-singular page-template-default page page-id-52".
   Een losse .page pakte die body dus mee en zette hem op display:none. Dat is
   de hele site weg, een wit scherm zonder foutmelding. Onder #main kan dat
   niet meer gebeuren, want de body zit daar nooit in. */
#main > .page{display:none} #main > .page.on{display:block}
.band{padding:var(--bandrand) 0}
/* vaste maten voor de verticale ruimte, zodat elke sectie hetzelfde ademt */
h2 + .lead,h2 + .zin,h2 + p{margin-top:var(--s4)}
/* in een .stack zet de kop zelf al 14px onder zich, niet dubbelop */
.stack > h2 + :is(.lead,.zin,p){margin-top:0}
/* H12 AFGEWEZEN (17 september). Voorstel was een zogpatroon tussen de
   banden: stroomlijnen die links onregelmatig lopen en rechts recht en
   dicht, als eigen materiaal uit de natuurkunde van het product. Wessel
   wil het niet. Niet opnieuw voorstellen. */
/* C5 GEPROBEERD EN TERUGGEDRAAID (17 september). Het voorstel was de wissel
   structureel te maken met .band:nth-of-type(even). Dat werkt hier niet:
   nth-of-type telt ALLE sections, dus ook .phead en .cta, waardoor de
   telling per pagina anders uitkomt dan bedoeld en er twee zachte banden
   naast elkaar konden komen. Twee gelijke banden naast elkaar lezen als
   EEN band, en dan is de structuur juist weg in plaats van consequent.
   De per pagina meegegeven .soft is een bewuste keuze en blijft. */
.band.soft{background:var(--soft)}
/* de eerste band sluit dichter op de paginakop aan */
.phead + .band{padding-top:clamp(34px,3.6vw,52px)}
/* Grotere tekst heeft relatief minder interlinie nodig, niet evenveel: op
   1.6 viel de inleiding uiteen in losse regels in plaats van als blok te
   lezen, terwijl hij 24% groter is dan de tekst eronder. */
.lead{font-size:var(--t-lead);line-height:1.45;max-width:60ch}
/* Staat een inleiding alleen onder een kop, dan is er geen kolom die hem
   smal houdt. Zonder maat liep hij door tot de rand: ongeveer 105 tekens
   per regel, terwijl comfortabel lezen tussen de 45 en 75 ligt. 62ch is
   hier ongeveer 68 tekens, dus de inleiding stopt op tweederde van de band
   in plaats van op de helft. Bijgesteld naar 70ch op verzoek: onder een kop
   die over de volle breedte loopt las 62ch als een smalle kolom, zeker met
   een rafelrand ernaast. 70ch is ongeveer 82 tekens per regel: boven de
   comfortabele band van 45 tot 75, maar dit is displaytekst van 21px en
   ruim onder de 105 waar het mee begon. Binnen een kolom blijft hij
   sowieso begrensd. */
section:not(.hero):not(.phead) > .wrap > .lead,
section:not(.hero):not(.phead) > .wrap > .tussen{max-width:70ch}
/* En waar de kop zelf over de volle breedte loopt (h2.lang), loopt de tekst
   eronder mee: een kop van 1100px boven een lint van 950 leest als twee
   losse dingen. De maat komt dan van de band, niet van een ch-getal. */
.wrap:has(> h2.lang) > :is(.lead,.tussen){max-width:none}
/* en waar een alinea de breedte van het blok eronder moet aanhouden, zoals
   boven een rij van drie kaarten, zegt .breed dat expliciet */
section:not(.hero):not(.phead) > .wrap > :is(.lead,.tussen).breed{max-width:none}
/* De afstand tussen de tekst en de knoppen eronder is overal dezelfde. Dat
   gaat niet vanzelf: de ondermarge van een alinea hangt af van zijn eigen
   lettergrootte, en een knop als link (.btn-3) heeft zelf ruimte boven de
   tekst waar een gevulde knop een rand heeft. Dus: de marge van het blok
   erboven op nul, en hier één waarde voor alles. */
:where(p,ul,ol,h2,h3,h4,figure,.figs,.two,.checks,.tijdlijn):has(+ .row){margin-bottom:0}
.row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.row:has(.btn-3){margin-top:var(--s3)}
/* C3 + C4. Er waren twaalf .two-blokken met negen klassencombinaties en
   zeven kolomverdelingen (50/50, 62/100, 44/56, 38/62, max-content, 43rem).
   Geen van die verhoudingen viel op een gedeelde lijn, dus de rechterrand
   van de linkerkolom versprong tussen opeenvolgende secties met tientallen
   pixels; het oog leest dat als scheve uitlijning zonder te weten waarom.
   Nu putten ze alle vier uit hetzelfde raster van twaalf: 6/6, 7/5, 5/7 en
   8/4.
   C4 GEPROBEERD EN TERUGGEDRAAID (17 september): het voorstel was de
   standaard om te draaien naar start, omdat zeven van de twaalf blokken daar
   met een extra klasse om vragen. Systeemtechnisch klopt dat, in beeld niet:
   de vijf blokken ZONDER .boven zijn juist bewust gecentreerd, waaronder het
   logo naast About us dat op 17 september op verzoek precies verticaal is
   uitgelijnd, en de merkenplaat op de home. Die gingen er allemaal door
   hangen. Center blijft de standaard, .boven blijft de uitzondering. */
.two{display:grid;gap:var(--goot-l);align-items:center;margin-top:var(--s5);
  /* 22rem en niet 20: met 20rem sprongen twee kolommen al vanaf ongeveer
     700px naast elkaar, en dan is een tekstkolom 330px oftewel 35 tekens per
     regel. Boven het omslagpunt hieronder zet auto-fit er twee neer. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.two.rev>*:first-child{order:2}
@media (max-width:61rem){.two.rev>*:first-child{order:0}}
/* .boven is de standaard geworden; deze regel blijft staan zodat de klasse
   in de markup niets breekt, en is verder overbodig. */
.two.boven{align-items:start}
.two.beeldlinks>*:first-child{order:0}
@media (max-width:61rem){.two.beeldlinks>*:first-child{order:2}}
/* beeldkolom smaller dan de helft, zodat de tekst ernaast eerder begint. Het
   merk heeft die halve breedte niet nodig; de tekst wel. */
.two.smalbeeld{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:61rem){.two.smalbeeld{grid-template-columns:1fr}}
/* EEN omslagpunt, niet twee. De kolomverdelingen begonnen op 52rem terwijl
   de tabletopmaak tot 61rem loopt. Tussen 832 en 976 stond een blok dus al
   in twee kolommen terwijl het beeld ernaast al zijn tabletvorm had: de
   merkenplaat op de home lag daar horizontaal in een halve kolom naast een
   tekstkolom van 400px, met een gat ernaast. Vorm en plaats horen op
   hetzelfde moment om te klappen. Onder 61rem staat alles onder elkaar en
   geldt de tabletopmaak; daarboven de kolommen. */
@media (max-width:61rem){.two{grid-template-columns:1fr}}

/* inleidende zin met daaronder subkopjes: geeft rust en een vaste opbouw */
/* inleidende zin: gewoon een inleiding, niet een tweede kop. Het groen is
   voor de kleine dingen, zoals data en maten. */
.zin{font-size:var(--t-lead);line-height:1.45;color:var(--body);
  max-width:52ch;margin:16px 0 0;font-weight:400}
.onder{margin-top:var(--s5);width:100%}
.onder h3{font-size:var(--t-md);margin:22px 0 5px}
.onder h3:first-child{margin-top:0}
.onder p{max-width:54ch;margin-bottom:0}
/* het beeld is hoog, de tekst kort: rij dichter op elkaar zetten */
.two.strak{margin-top:var(--s5)}
.two.kloof,.two.strak.kloof{margin-top:clamp(76px,8.5vw,132px)}
/* ongelijke kolommen: bij het ene blok telt de tekst, bij het andere het beeld.
   Vanaf 61rem, hetzelfde omslagpunt als hierboven en als de tabletopmaak.
   61,0625rem en niet 61: max-width en min-width zijn allebei inclusief, dus op
   precies 976px golden ze samen. Deze verdelingen wonnen daar op specificiteit
   van de enkele kolom, terwijl de tabletopmaak ook nog gold: Your investment
   stond op die ene breedte in twee kolommen met drie cijfers naast elkaar in
   een kolom van 332px, en die liepen over elkaar heen. Een zestiende rem
   erbij legt de grens op 977 en laat 976 heel bij de tablet. */
@media (min-width:61.0625rem){
  /* 7/5 en niet 44/56: op 44% brak de kop What WhisperRing delivers over
     twee regels omdat de kolom 471px was en de kop er 488 nodig heeft. */
  .two.tekst-smal{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .two.beeld-smal{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  /* de linkerkolom is een blokje -- een merk met cijfers eronder -- en hoeft
     niet de halve breedte te vullen. Hij krimpt naar zijn inhoud, de tekst
     ernaast schuift op tot de gewone tussenruimte. */
  /* Deze linkerkolom is een blokje, geen halve pagina: een merk met drie
     cijfers eronder. Op een vaste 4 of 5 van de twaalf kolommen was hij veel
     breder dan zijn eigen inhoud, en al die leegte kwam bovenop de goot
     terecht: samen ruim 250px wit tussen de twee kolommen. Hij krimpt nu
     naar zijn inhoud, dus de tekst begint waar het blokje ophoudt. */
  .two.blokje{grid-template-columns:max-content minmax(0,1fr)}
  /* meer lucht tussen het blokje en de tekst, en een regellengte die niet
     verder loopt dan de kop erboven */
  /* was eerst 1.8x en daarna 1.15x de gewone goot; allebei gaven tussen het
     Eyevestor-blok en de tekst ernaast nog te veel lucht om als een blok te
     lezen */
  /* net iets ruimer dan de gewone goot, maar niet de 1,8x van hiervoor */
  .two.ruim{gap:calc(var(--goot-l) * 1.15)}
  /* inleiding en tekst lopen even breed door; ch zou per lettergrootte een
     andere maat geven, dus hier één vaste maat voor beide */
  /* Niet in ch maar in rem, want ch rekent met de lettergrootte van het
     element zelf: op 54ch werd de inleiding 737px en de alinea eronder 576,
     terwijl ze visueel dezelfde kolom horen te zijn. In rem landen ze allebei
     op 737px. Dat is 68 tekens voor de inleiding en 96 voor de lopende tekst;
     die laatste is lang, maar gelijke kolomranden wegen hier zwaarder. */
  .two.ruim .stack p{max-width:44.6rem}
  /* Deze drie cijfers staan naast een tekstkolom en niet op zichzelf, dus ze
     hoeven de pagina niet te dragen zoals bij Your investment. Op tweederde
     van de gewone metricmaat is de kolom precies zo hoog als de tekst
     ernaast: nagemeten 2px verschil tussen de onderkant van de knop en de
     onderkant van minimum investment. */
  .two.ruim .fig b{font-size:clamp(1.8rem,1.1rem + 2.1vw,2.8rem)}
  /* de cijfers zijn een smalle kolom, geen halve pagina. Ze schuiven op naar
     de rechterrand; de tekst ernaast krijgt de breedte die vrijkomt en de
     ruimte ertussen wordt de witruimte. */
  /* max-content in het tweede spoor liet de rechterrand van deze sectie
     bepalen door de langste labeltekst, tientallen pixels binnen de
     containerrand. Met een span staat hij op de kolomlijn.
     7/5 en niet 8/4: op 8 kolommen was de tekst 719px breed en 306px hoog,
     terwijl de drie cijfers 346px hoog zijn en er dus 40px onderuit staken.
     Een smallere tekstkolom maakt de tekst hoger en zet de twee gelijk. */
  .two.cijfers{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
/* de render is aan alle kanten door zijn eigen kader gesneden; met dit masker
   lost hij naar de randen toe op in de achtergrond */
/* De mast loopt onderaan door tot de rand van het beeld, en die harde
   afsnijding verraadt dat het een uitsnede is. Met dit verloop zakt hij de
   pagina in, alsof de turbine buiten beeld verder gaat.
   De translate hoort erbij: het VAK staat precies in het midden van zijn
   cel, maar door de fade zit de zichtbare massa in de bovenste helft, dus
   optisch hing de turbine te hoog. Dit zet het zwaartepunt op het midden. */
.foto.voetfade{
  translate:0 7%;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 58%,transparent 96%)}
/* De uitsnede kreeg tot nu toe alleen GEEN schaduw; dat was het hele
   verschil met een gewone foto. Deze render is bijna wit en verdween
   daardoor in de band. De filter komt voor het masker, dus de schaduw
   dooft onderaan netjes mee uit met de mast. */
/* E4: er waren vijf beeldtalen waarvan drie een keer gebruikt, en twee
   uitgesneden renders stonden als directe buren op dezelfde pagina met
   tegengestelde randlogica: de een eindigde hard op zijn alfarand, de ander
   loste op via een masker, en alleen de eerste kreeg diepte. Nu is een
   uitsnede een uitsnede: masker naar keuze, altijd dezelfde schaduw. */
.foto:is(.uitsnede,.vloeiend){filter:var(--schaduw-render)}
.foto.vloeiend{
  -webkit-mask-image:radial-gradient(circle at 42% 50%,#000 58%,transparent 88%),
    linear-gradient(to top,#000 86%,transparent 100%);
  mask-image:radial-gradient(circle at 42% 50%,#000 58%,transparent 88%),
    linear-gradient(to top,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

.stack{display:flex;flex-direction:column;align-items:flex-start}
.stack>h2,.stack>h3{margin-bottom:14px}

/* knoppen */
.btn .ext{width:.9em;height:.9em;fill:currentColor;margin-left:.55em;vertical-align:-.1em}
.ey-knop .ext{width:.9em;height:.9em;fill:currentColor;margin-left:.5em;vertical-align:-.1em}
/* Een maat-as in plaats van vier maten in drie boxmodellen. De rand is 1px
   zoals elke andere rand op de site, met 1px extra padding zodat de hoogte
   gelijk blijft; met 2px kwam de enige knop zonder rand nooit op dezelfde
   hoogte als een knop met rand. */
.btn{display:inline-block;font-weight:600;
  font-size:var(--btn-fs,var(--t-md));padding:var(--btn-py,14px) var(--btn-px,27px);
  border-radius:var(--r-1);border:1px solid transparent;cursor:pointer;
  transition:background-color .18s var(--e),color .18s var(--e),border-color .18s var(--e)}
.btn.compact{--btn-fs:var(--t-sm);--btn-py:11px;--btn-px:18px}
.btn-1{background:var(--brand);color:#fff} .btn-1:hover{background:var(--brand-dp)}
.btn-2{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-2:hover{background:var(--tint)}
.btn-3{padding:10px 0 6px;color:var(--brand);border-width:0 0 2px;
  border-bottom:2px solid var(--brand);border-radius:0;--btn-py:10px;--btn-px:0}
.btn-3:hover{color:var(--brand-dp);border-color:var(--brand-dp)}
.btn-w{background:#fff;color:var(--deep)} .btn-w:hover{background:var(--tint)}
.btn-wl{background:transparent;color:#fff;border-color:rgb(var(--wit-rgb) / .45)}
/* dezelfde handeling op donker verdient hetzelfde gebaar als op licht: een
   vulling erbij, niet alleen een rand die oplicht */
.btn-wl:hover{border-color:#fff;background:rgb(var(--wit-rgb) / .12)}

/* ── hero ────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;min-height:clamp(420px,58vh,620px);display:grid}
.hero .imgph{position:absolute;inset:0;height:100%;border-radius:0;z-index:-2}
.hero .imgph-in{position:absolute;right:18px;bottom:16px;z-index:3;max-width:24ch;text-align:right;
  background:rgb(var(--deep-rgb) / .55);border:1px solid rgb(var(--wit-rgb) / .2);border-radius:var(--r-1);padding:8px 12px;color:#BFD6DA}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--korrel),
    linear-gradient(100deg,rgb(var(--deep-rgb) / .88) 0%,rgb(var(--deep-rgb) / .62) 48%,rgb(var(--deep-rgb) / .3) 100%)}
.hero-in{align-self:center;padding:clamp(48px,7vw,84px) 0;width:100%}
.hero h1,.hero .lead{color:#fff}
.hero .lead{margin-top:var(--s4);color:rgb(var(--wit-rgb) / .9)}

/* paginakop */
/* Elke paginakop even hoog, ongeacht hoeveel tekst erin staat: een minimum
   plus verticaal centreren. Past de tekst er niet in, dan groeit de band mee. */
.phead{position:relative;background:var(--soft);border-bottom:1px solid var(--line);
  /* De kop hangt aan de BOVENkant, niet in het midden. Gecentreerd zakte hij
     mee met de lengte van de inleiding: drie regels gaf 76px, twee 92px en een
     108px, waardoor de titel op elke pagina op een andere hoogte begon. Nu
     staat hij overal even hoog en vangt de ondermarge het verschil op. */
  padding:clamp(48px,5.8vw,80px) 0 clamp(36px,4.6vw,62px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;
  min-height:clamp(230px,27vw,320px)}
/* De privacyverklaring is een formele pagina, geen etalage. Die kop hoeft
   niet even hoog te zijn als een pagina die iets moet laten zien: hier is
   de kop alleen een naambordje boven de tekst. */
.phead.beknopt{padding:var(--band-m) 0 var(--band-s);min-height:0}
/* .wrap heeft margin:0 auto; in een flexbox slokken die auto-marges de vrije
   ruimte op en krimpt het blok naar zijn inhoud. width:100% houdt hem breed,
   zodat de tekst links uitlijnt met de kopbalk. */
.phead > .wrap{width:100%}
.phead .lead{margin-top:var(--s4)}
.phead .mark{position:absolute;right:clamp(12px,3vw,40px);top:50%;transform:translateY(-50%);
  width:min(230px,24vw);opacity:.4;pointer-events:none}
/* donkere paginakop, in de kleur van de hero op de startpagina, met het ringmotief */
/* zelfde verloop als de hero op de startpagina. Die kleuren zijn het resultaat
   van de donkere waas over de lichte render; hier zijn ze uitgerekend en als
   vast verloop neergezet, zodat elke paginakop dezelfde overgang heeft. */
.phead.donker{background:var(--korrel),
    linear-gradient(100deg,#223F46 0%,#56696C 55%,#4C6268 100%);
  border-bottom:0;color:rgb(var(--wit-rgb) / .92)}
.phead.donker h1{color:#fff}
.phead.donker .lead{color:rgb(var(--wit-rgb) / .84)}
.phead.donker .wrap{position:relative;z-index:1}
/* de ring als motief: geen dunne cirkels maar een dikke band, zoals de naaf
   van de turbine. Zacht en neutraal, hij mag de tekst niet in de weg zitten. */
/* De ring hangt aan zijn LINKERrand, niet aan zijn rechter, zodat hij nooit
   achter de tekst kan komen. Die linkerrand is het maximum van twee grenzen:
   - 50% + 334px  telt vanaf het midden van de pagina. Zolang de tekstkolom
     gecentreerd staat (venster breder dan 1180px) schuift de langste regel met
     de helft van de vensterbreedte mee; deze grens doet dat ook.
   - 34vw + 540px  telt vanaf de linkerrand. Onder de 1180px vult de tekst de
     hele breedte en loopt de langste regel juist trager mee.
   Beide zijn gemeten aan de langste kop van alle pagina's (Company) van 760 tot
   1920px venster, met 60px marge erbij. Hoe smaller het venster, hoe verder de
   ring naar rechts schuift, tot hij er onder ~800px helemaal uit loopt.
   Vandaar ook geen breakpoints meer. */
.phead.donker::before{content:"";position:absolute;pointer-events:none;border-radius:50%;
  aspect-ratio:1;left:max(calc(50% + 334px),calc(34vw + 540px));top:50%;translate:0 -50%;
  /* vaste maat en vaste banddikte. Eerder schaalden allebei met de
     vensterbreedte mee, waardoor de ring bij het versmallen van kromming
     veranderde in plaats van alleen op te schuiven. */
  width:660px;
  /* H1: dit is het enige element op de site dat van dit bedrijf is en van
     geen ander, en het stond op 5,5% wit over een ondergrond die juist aan
     de rechterkant het lichtst was: een verschil van ongeveer twee waarden
     op 255. Dat is geen signatuur maar ruis, terwijl er wel code, een
     scrolltijdlijn en een reduced-motion-tak voor onderhouden worden. De
     twee scherpe randen zijn het punt: ze laten hem lezen als een gefreesd
     onderdeel en niet als een lichtvlek. */
  border:54px solid rgb(var(--wit-rgb) / .12);
  box-shadow:inset 0 0 0 2px rgb(var(--wit-rgb) / .30),0 0 0 2px rgb(var(--wit-rgb) / .22)}
/* H2: de ring verdween onder 992px volledig, dus voor bezoek dat via LinkedIn
   op een telefoon binnenkomt, precies het kanaal dat deze site voedt, bestond
   het merkteken niet. Hij schuift nu verder buiten beeld in plaats van weg:
   op deze plaatsing blijft de kromming zichtbaar en leest hij nog als ring. */
@media (max-width:62rem){
  .phead.donker::before{left:72%;width:min(150vw,560px);border-width:38px}
}
/* AFGEWEZEN (17 september): de ring ook in de hero. Daar staat al een foto
   van de machine zelf, dus het motief erbovenop is dubbelop. De ring blijft
   op de paginakoppen, waar geen beeld staat. */

/* een knop die eruitziet als een link: nodig waar de handeling geen navigatie is */
.alslink{background:none;border:0;padding:0;font:inherit;color:var(--brand);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.alslink:hover{color:var(--brand-dp)}

/* cta-band */
.cta{position:relative;view-timeline-name:--ctaband;view-timeline-axis:block;
  /* De afsluiting is het zwaarste moment van de compositie en kreeg tot nu
     toe minder lucht dan een gewone inhoudsband (50 tegen 66px). */
  background:var(--korrel),var(--vlak-accent);color:#fff;padding:var(--band-m) 0;text-align:center;overflow:hidden}
.cta h2,.cta b{color:#fff;max-width:none}
.cta .lead{color:rgb(var(--wit-rgb) / .92);margin:14px auto 0}
.cta .row{justify-content:center}
.cta .klein{margin-top:var(--s4);color:rgb(var(--wit-rgb) / .7)}
.cta .wrap{position:relative;z-index:1}
/* H11 + H1: hetzelfde ringmotief kwam vijf keer voorbij op een sterkte
   waarop niemand het ziet. Een keer gezien is herkenbaar, vijf keer gezien
   is behang. De slotband van de startpagina houdt hem, de rest wordt vlak. */
.cta::before{display:none}
#p-home .cta::before{content:"";display:block;position:absolute;right:-16vw;top:50%;translate:0 -50%;
  width:min(720px,64vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:1px solid rgb(var(--wit-rgb) / .14);
  background:radial-gradient(circle,transparent 60%,rgb(var(--wit-rgb) / .05) 61%,transparent 62%,
    transparent 74%,rgb(var(--wit-rgb) / .07) 75%,transparent 76%)}
/* linksom: zelfde band, maar tekst links zoals de rest van de pagina */
.cta.linksom{text-align:left}
.cta.linksom .lead{margin-left:0}
.cta.linksom .row{justify-content:flex-start}

/* cijfers: geen vakjes maar getallen op een lijn. Eén haarlijn erboven,
   het getal in het petrol van de huisstijl, het label eronder. */
.figs{display:grid;gap:var(--goot);margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
/* Dit is DE opmaak van een gepresenteerd getal. Elke metric op de site hoort
   hier doorheen te lopen, of het nu in .figs staat of ergens anders; zet dan
   class="metric" op het element. tabular-nums houdt de cijfers even breed,
   zodat getallen onder elkaar netjes uitlijnen. */
.metric,.fig b{display:block;font-size:var(--t-metric);font-weight:500;
  color:var(--brand);line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.fig span{display:block;font-size:var(--t-sm);margin-top:var(--s2);max-width:24ch}

/* GESCHRAPT 17 september: .tiles en .tile, een compleet kaartrecept met
   genummerd label dat nergens in de pagina stond, plus .nieuws en .voet.
   Het blad beschreef daarmee een componenttaal die de site niet spreekt,
   en dat maakt elk later oordeel over dit bestand onbetrouwbaar. */

/* lijstjes. Het bolletje is klein en gevuld: het moet de regel aanwijzen, niet
   om aandacht vragen. De lijst zelf staat ingesprongen ten opzichte van de
   kopjes, zodat je in één oogopslag ziet wat bij welk kopje hoort. De .71em
   zet het bolletje op het midden van de eerste regel (regelhoogte 1,72). */
.checks{list-style:none;margin:20px 0 0;padding:0 0 0 15px;
  display:flex;flex-direction:column;gap:var(--s3)}
.checks li{position:relative;padding-left:17px;font-size:var(--t-sm)}
/* B5: var(--brand) droeg 39 verwijzingen en drieentwintig rollen tegelijk.
   Als het bolletje voor een lijstpunt dezelfde kleur heeft als de link
   eronder, kun je aan de kleur niet meer aflezen wat aanklikbaar is en
   voelt de merkkleur niet kostbaar. Het accent houdt er drie: aanwijzer
   (link, knop, hover), toestand (focus, actief) en het cijfer. */
.checks li::before{content:"";position:absolute;left:0;top:.71em;width:5px;height:5px;
  border-radius:50%;background:var(--line-2)}
/* onder een tussenkopje staan de punten korter op elkaar dan los in de tekst */
.onder .checks{margin-top:var(--s2);gap:var(--s2)}
.onder .checks + h3{margin-top:var(--s5)}
/* tekstlink met pijl, rechts uitgelijnd onder een lijst. Geen lijn eronder zoals
   de knoppen elders: bij een nieuwsoverzicht leest de pijl rustiger. De maat is
   wel die van de knoppen. */
.meer{align-self:flex-end;display:inline-flex;align-items:center;gap:.55em;margin-top:var(--s4);
  font-weight:600;font-size:var(--t-md);color:var(--brand);text-decoration:none}
.meer:hover{color:var(--brand-dp)}
.meer .pijl{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--e)}
.meer:hover .pijl{transform:translateX(4px)}
/* kop van een sectie met rechts een link naar de hele pagina */
.sectiekop{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.sectiekop h2{max-width:none;margin-bottom:0}
.sectiekop .meer{align-self:auto;margin-top:0}
/* het merk van Eyevestor boven de cijfers, rechts uitgelijnd op die kolom in
   plaats van op de hele paginabreedte */
/* het merk van Eyevestor boven de cijfers in de linkerkolom */
/* Mega Windforce en Eyevestor onder elkaar, met een kruis ertussen. Staat op
   een lichte plaat zodat het merkenpaar zich losmaakt van de witte sectie. */
.duo{display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* H8 AFGEWEZEN (17 september): het beige vervangen door eigen materiaal.
     Deze kleur is juist typerend voor de crowdsharing-campagne en hoort hier
     te staan. Blijft dus de beige plaat met schaduw. */
  gap:clamp(16px,2vw,26px);background:var(--ey-beige);border-radius:var(--r-3);
  padding:clamp(32px,3.8vw,52px) clamp(22px,2.6vw,38px);box-shadow:var(--schaduw-2)}
.duo img{width:min(100%,clamp(180px,19vw,250px));height:auto}
.duo .ey-logo{width:min(100%,clamp(140px,15vw,196px))}
.duo .kruis{width:clamp(24px,2.7vw,36px);height:clamp(24px,2.7vw,36px);flex:none;display:block;
  fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;
  /* het woordmerk eronder is compact, het logo erboven heeft een payoff:
     optisch komt het kruis dan te laag te hangen */
  margin:-8px 0 8px}
/* Tekst en merkenpaar schalen samen mee. Een vaste maximumbreedte voor de
   tekst liet het merkenpaar doodknijpen zodra het scherm smaller werd: de
   tekst hield zijn 43rem en het blokje hield over wat er nog was, soms nog
   maar een paar tientallen pixels. Verhoudingen doen dat niet, en het
   merkenpaar heeft bovendien een ondergrens. Onder deze breedte stapelt het
   blok, dat regelt .two zelf al. */
@media (min-width:64rem){
  .two.merkduo{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
.eymerk{margin-bottom:clamp(18px,2vw,26px)}
.eymerk .ey-logo{width:clamp(168px,17vw,232px)}
.ey-logo{width:clamp(132px,13vw,168px);height:auto;flex:none}
/* het logo als woord in een knop: even hoog als de tekst ernaast */
.ey-merk{height:1.62em;width:auto;display:inline-block;vertical-align:-.46em;
  margin:0 .06em 0 .36em}
.ey-knop .ey-merk{height:1.44em;vertical-align:-.38em}

/* tijdlijn. Elke stap tekent zijn eigen stukje lijn, zodat het deel dat achter
   ons ligt in de huisstijlkleur staat en de toekomst grijs blijft. */
.tijdlijn{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));position:relative}
.tijdlijn li::after{content:"";position:absolute;left:0;right:0;top:11px;height:2px;
  background:var(--line-2);z-index:0}
.tijdlijn li.klaar::after{background:var(--brand)}
/* na het heden gaat het petrol over in de gewone lijn: de lijn loopt door,
   maar het afgelegde deel houdt op */
.tijdlijn li.nu::after{background:linear-gradient(to right,var(--brand) 24%,var(--line-2) 54%)}
/* De grijze lijn stopte hard op de rechterrand van het raster, alsof de
   laatste stap het einde is. Dit is het spiegelbeeld van de regel hierboven:
   hier houdt het bekende op, de tijdlijn niet. */
.tijdlijn li:last-child::after{background:linear-gradient(to right,var(--line-2) 55%,transparent)}
.tijdlijn li{position:relative;padding:34px 18px 0 0}
/* box-sizing:border-box uit de reset geldt niet voor ::before, dus hier los
   zetten. Anders is het bolletje 16px in plaats van 13 en loopt de lijn er
   anderhalve pixel boven langs. */
.tijdlijn li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;
  z-index:1;box-sizing:border-box;border-radius:50%;background:var(--page);border:2px solid var(--line-2)}
.tijdlijn li.klaar::before{background:var(--brand);border-color:var(--brand)}
.tijdlijn li.nu::before{background:var(--brand);border-color:var(--brand);
  box-shadow:0 0 0 4px rgb(var(--brand-rgb) / .16)}
.band.soft .tijdlijn li::before{background:var(--soft)}
.band.soft .tijdlijn li.nu::before{background:var(--brand)}
.tijdlijn b{display:block;font-size:var(--t-xs);letter-spacing:.04em;color:var(--alt);margin-bottom:6px}
.tijdlijn h3{font-size:var(--t-md);margin-bottom:5px}
.tijdlijn p{font-size:var(--t-sm)}

/* het merk van het bedrijf, groot */
.merk{display:flex;justify-content:center;margin:0;padding:clamp(16px,2.4vw,34px) 0}
.merk .mwf{width:min(100%,410px);height:auto}

/* modellen */
.modellen{display:grid;gap:var(--goot);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-top:var(--s5)}
.model{margin:0;position:relative}
.model .jaar{position:absolute;top:12px;left:12px;background:var(--brand);color:#fff;
  padding:5px 11px;border-radius:var(--r-1)}
/* GEPROBEERD EN TERUGGEDRAAID (17 september): object-fit:contain, omdat de
   bron vierkant is en cover er 12,5% boven en onder af haalt. In beeld is
   dat slechter: dit zijn fotografische renders met lucht en landschap, geen
   uitgesneden objecten, dus contain zet er twee witte stroken van 44px naast
   en het jaarlabel linksboven landt op wit in plaats van op het beeld. De
   snede zelf haalt alleen lucht en gras weg, niet de turbine. Wie dit toch
   wil oplossen doet dat met object-position of met een 4:3-render. */
.model .foto{aspect-ratio:4/3;object-fit:cover;object-position:50% 42%;background:var(--page)}
.model h3{margin:15px 0 5px;font-size:var(--t-md)} .model p{font-size:var(--t-sm)}
.model .maat{font-size:var(--t-sm);color:var(--alt);font-weight:600;margin-bottom:var(--s2)}
.tussen{margin-top:var(--s7);max-width:62ch}

/* hero met tekst over de foto: dieper verloop, want deze foto is licht */
.hero.diep::after{background:linear-gradient(100deg,rgb(var(--deep-rgb) / .92) 0%,rgb(var(--deep-rgb) / .78) 42%,
  rgb(var(--deep-rgb) / .42) 72%,rgb(var(--deep-rgb) / .22) 100%)}
.hero.diep .lead{max-width:46ch}
/* de tekst staat bovenaan, zodat de titel boven de ring uitkomt */
.hero.diep .hero-in{align-self:start;padding:clamp(34px,4.4vw,58px) 0 clamp(40px,5vw,64px)}
/* smal scherm: de tekst loopt over de volle breedte, dus het verloop moet van
   boven naar beneden gaan. Zijdelings zou de rechterkant onleesbaar worden. */
@media (max-width:56rem){
  .hero::after{background:linear-gradient(180deg,rgb(var(--deep-rgb) / .6) 0%,rgb(var(--deep-rgb) / .84) 55%,rgb(var(--deep-rgb) / .9) 100%)}
  .hero.diep::after{background:linear-gradient(180deg,rgb(var(--deep-rgb) / .66) 0%,rgb(var(--deep-rgb) / .88) 55%,rgb(var(--deep-rgb) / .93) 100%)}
}



/* team */
/* nieuwspagina: kaarten met beeld */
.berichten{display:grid;gap:var(--s7) var(--goot);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
/* elk beeld bij een bericht is even groot en staat vast op 16:9. Dat is de
   verhouding van de graphics die van LinkedIn komen, dus er gaat vrijwel niets
   verloren, en het geldt op de nieuwspagina en op de startpagina hetzelfde. */
.berichten article :is(.imgph,.foto),.berichtjes article :is(.imgph,.foto){
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:14px;
  min-height:0;overflow:hidden}
/* vaste hoogte, want de badge van een gebeurtenis is hoger dan een kale
   datum en anders begint de kop in die kaart lager dan in de kaart ernaast */
.berichten time,.berichtjes time{display:flex;align-items:center;flex-wrap:wrap;
  min-height:22px;font-size:var(--t-xs);letter-spacing:.04em;color:var(--alt)}
/* twee regels ruimte voor de kop, ook als de titel er maar één nodig heeft:
   anders begint de tekst in die kaart hoger dan in de kaarten ernaast */
.berichten h3{font-size:var(--t-md);margin:7px 0 8px;min-height:2.68em}
.berichten p{font-size:var(--t-sm);margin:0}
/* display:flex in plaats van inline-flex, want een kaart kan twee verwijzingen
   hebben -- ons eigen artikel en de post op LinkedIn -- en die horen onder
   elkaar, niet naast elkaar. */
/* Op de startpagina rekt de kop-link zich met een ::after over de hele kaart
   uit, zodat de hele tegel naar het nieuwsoverzicht gaat. Die laag lag over
   deze twee verwijzingen heen, dus een klik op Read the full story of op de
   post op LinkedIn kwam eerst bij het nieuwsoverzicht uit en pas daarna op
   de bestemming. Een eigen laag erboven laat ze direct doorgaan. */
.berichten .li,.berichtjes .li{position:relative;z-index:1;
  display:flex;width:fit-content;align-items:center;
  margin-top:var(--s3);font-size:var(--t-sm);font-weight:600;color:var(--brand);white-space:nowrap}
.berichten .li .ext,.berichtjes .li .ext{width:.9em;height:.9em;fill:currentColor;margin-left:.5em}
/* een verwijzing waarvan het adres nog moet komen: geel gearceerd, net als de
   tekstplaceholders, zodat je in één oogopslag ziet wat er nog niet klopt */
.li.nog{background:var(--amber-bg);box-shadow:0 0 0 1px rgb(var(--amber-edge-rgb) / .28) inset;
  border-radius:var(--r-1);padding:1px .34em;color:var(--amber)}
.li.nog .ext{fill:currentColor}
/* Een gebeurtenis die nog komt draagt een badge: het woord in een gevuld
   vlak, de datum ernaast, samen in een kader. De kleur is die van de stand
   van de campagne, oranje zolang het wacht en groen zolang het loopt, zodat
   de hele site daar dezelfde taal voor gebruikt. Bijna vierkante hoeken: een
   ronde pil hoort bij de stand op de donkere band, dit hoort bij een kaart. */
/* F8: .kader en .status zeiden hetzelfde en zagen er anders uit, dus de vorm
   hing af van WAAR iets stond in plaats van WAT het betekent. Ze delen nu
   wel een vorm, maar het RECHTE kader en niet de pil: ronde kaders passen
   niet bij deze site. De stip blijft, want die maakt de toestand ook zonder
   kleur leesbaar. De randkleur is de donkere tekstvariant, want het oranje
   haalt op wit maar 2,53:1 en dat is te weinig voor een rand. */
.kader{display:inline-flex;align-items:center;gap:var(--s2);flex:none;
  border:1px solid var(--stand-wacht-tx);border-radius:var(--r-1);
  padding:3px 9px;margin-right:.7em;color:var(--stand-wacht-tx)}
.kader::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--stand-wacht)}
.kader b{font-weight:inherit}
/* loopt hij, dan slaat het kadertje om naar groen */
.kader:has(.loopt:not([hidden])){border-color:var(--stand-live);color:var(--stand-live-tx)}

/* nieuws en events: drie korte berichten naast elkaar */
.berichtjes{display:grid;gap:var(--s5);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
/* Een kaart is een kolom: de tekst duwt alles wat erna komt naar beneden,
   zodat de verwijzingen onderaan op een rij staan in plaats van te zweven op
   de hoogte waar de tekst toevallig ophoudt. De ene kaart heeft twee links,
   de andere een, en de tekstlengte verschilt per bericht. */
.berichten article,.berichtjes article{display:flex;flex-direction:column}
.berichten article p,.berichtjes article p{margin-bottom:auto}
.berichtjes article{position:relative}
.berichtjes h3{font-size:var(--t-md);margin:7px 0 7px;min-height:2.68em}
.berichten h3 a,.berichtjes h3 a{color:var(--ink);text-decoration:none;
  transition:color .18s var(--e)}
.berichten h3 a:hover{color:var(--brand)}
.berichtjes h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-2)}
.berichtjes article:hover h3 a{color:var(--brand)}
/* Het beeld zit in een kader dat bijsnijdt. Bij hover zoomt het beeld een paar
   procent in en tilt het kader iets verder van de pagina af. De schaduw staat
   op het kader en niet op het beeld zelf, anders zou overflow:hidden hem
   afsnijden. Alleen op een echte muisaanwijzer: op een aanraakscherm vuurt
   hover bij het tikken en leest die beweging als een hapering. */
.kaartbeeld{position:relative;overflow:hidden;border-radius:var(--r-2);margin-bottom:14px;line-height:0;
  box-shadow:var(--schaduw-2);transition:box-shadow .28s var(--e)}
/* even zwaar als .berichten article :is(.imgph,.foto) en verderop in het
   blad, dus deze wint: de ondermarge zit nu op het kader, niet op het beeld */
article > .kaartbeeld :is(.foto,.imgph){margin-bottom:0;box-shadow:none;border-radius:0}
.kaartbeeld > .beeldlink{display:block;line-height:0}
@media (hover:hover) and (pointer:fine){
  .kaartbeeld :is(.foto,.imgph){transition:transform .5s var(--e)}
  /* De zoom op het beeld blijft: die wil Wessel houden. Wat eraf ging is de
     schaduwsprong van de kaart eronder en de lijn die daarvoor in de plaats
     kwam. Een gebaar per kaart, en dat gebaar zit in het beeld zelf. */
  article:hover > .kaartbeeld :is(.foto,.imgph){transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  article:hover > .kaartbeeld :is(.foto,.imgph){transform:none}
}
.berichtjes p{font-size:var(--t-sm);margin:0}

/* C10: boven de kop stond 48px en van de lijn tot de eerste rij portretten
   24+10: praktisch symmetrisch, dus de kop hoorde visueel bij niets. En de
   groepsscheiding was maar anderhalf keer de rijafstand binnen een groep,
   waar tweeeneenhalf tot drie nodig is: de drie teamgroepen liepen in
   elkaar over tot een veld gezichten. */
.groep{margin-top:var(--s8)}
.groep h3{font-size:var(--t-md);margin-bottom:0;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
/* C9: het raster sprong van vier kolommen naar twee terwijl het portret aan
   het VENSTER hing, dus op het breekpunt verdubbelde de cel (261 naar 455px)
   terwijl het portret kromp (100 naar 84px): een speldenknop in een leeg vak.
   Nu is het raster vloeiend en hangt het portret aan zijn eigen cel. De
   rij-afstand is groter dan de kolomafstand, zodat een rij een rij blijft. */
.mensen{display:grid;gap:var(--s6) var(--goot);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
@media (max-width:62rem){.mensen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:30rem){.mensen{grid-template-columns:1fr}}
.mens{margin:0}
.mens .foto{width:min(var(--portret-l),56%)}
.mens figcaption{margin-top:var(--s3)}
.mens b{display:flex;align-items:center;gap:var(--s2);color:var(--ink);font-size:var(--t-md)}
.li-ico{width:16px;height:16px;flex:none;border-radius:var(--r-1);display:block;
  opacity:.92;transition:opacity .18s var(--e)}
/* Het icoon is 16px, en in de voet 20. Een aanraakdoel moet minstens 24 bij 24
   zijn (WCAG 2.2, Target Size Minimum). De link om het icoon krijgt daarom een
   onzichtbare rand, met een even grote negatieve marge erbij zodat de naam
   ernaast geen millimeter opschuift. Gemeten: 16 wordt 24, 20 wordt 28. */
a:has(> .li-ico){display:inline-flex;align-items:center;justify-content:center;
  padding:4px;margin:-4px}
a:hover .li-ico{opacity:1}
.mens span{display:block;font-size:var(--t-xs);color:var(--alt)}
.mens p{margin:7px 0 0;font-size:var(--t-sm);line-height:1.55}

/* De verhalen achter het team: drie mensen groter uitgelicht dan in het
   raster erboven. Alles leunt op wat er al staat -- het ronde portret, de
   maten, de lijnkleur -- op een ding na: de eigen woorden van de persoon
   krijgen een lijn in de merkkleur, want dat is het enige stuk tekst op de
   pagina dat iemand zelf zegt. */
/* De band. Drie kaarten passen op een breed scherm precies naast elkaar, op
   een smal scherm veeg of klik je door. Het scrollvak doet het zware werk
   zelf: scroll-snap zorgt dat een kaart netjes aan de linkerrand uitkomt, en
   vegen op een telefoon werkt zonder een regel javascript. De knoppen komen er
   alleen bij als er echt iets te schuiven valt. */
.bandhoes{position:relative;margin-top:var(--s6)}
.verhalen{display:flex;gap:clamp(18px,2.2vw,26px);overflow-x:auto;
  scroll-snap-type:x proximity;
  /* overflow op een as knipt ook de andere af, dus de schaduw onder de
     kaarten liep tegen een harde rand aan. De negatieve ondermarge haalt
     de extra ruimte er weer af, zodat de band niet groeit. */
  padding-bottom:20px;margin-bottom:-14px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.verhalen:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-2)}
.verhaal{flex:0 0 clamp(268px,31.5%,360px);scroll-snap-align:start}
.bandknoppen{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s4)}
.bandknop{width:38px;height:38px;flex:none;display:grid;place-items:center;
  font-size:1.3rem;line-height:1;background:var(--page);color:var(--brand);
  border:1px solid var(--line-2);border-radius:50%;cursor:pointer;
  transition:border-color .18s var(--e),color .18s var(--e),transform .16s var(--e)}
.bandknop:hover{border-color:var(--brand)}
.bandknop:active{transform:scale(var(--druk))}
.bandknop[disabled]{opacity:.35;cursor:default}
.bandknop[disabled]:hover{border-color:var(--line-2)}
/* Portret links, met naam, functie en de ene zin ernaast; het verhaal en de
   eigen woorden daaronder over de volle kaartbreedte. De verhaalrij is 1fr,
   zodat het citaat in alle drie de kaarten op dezelfde hoogte tegen de
   onderrand staat, ook als de ene tekst langer is dan de andere. */
.verhaal{display:grid;
  grid-template-columns:clamp(62px,6.6vw,84px) minmax(0,1fr);
  grid-template-rows:auto auto auto 1fr auto;
  grid-template-areas:"portret naam" "portret rol" "portret zin"
                      "verhaal verhaal" "stem stem";
  column-gap:var(--s4);background:var(--page);border:1px solid var(--line);
  border-radius:var(--r-2);padding:clamp(16px,1.6vw,20px);box-shadow:var(--schaduw-2)}
.verhaal > .foto{grid-area:portret;align-self:start;width:100%}
.verhaal h3{grid-area:naam;align-self:start;font-size:var(--t-md);line-height:1.2;
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.verhaal .rol{grid-area:rol;margin:4px 0 0;font-size:var(--t-xs);color:var(--alt)}
.verhaal .tag{grid-area:zin;margin:8px 0 0;font-size:var(--t-sm);line-height:1.45;
  color:var(--ink);text-wrap:pretty}
.verhaal .achtergrond{grid-area:verhaal;align-self:start;margin-top:var(--s4)}
.verhaal .label{margin:0 0 5px;color:var(--alt)}
.verhaal .story{margin:0;font-size:var(--t-sm);line-height:1.55}
/* De eigen woorden van de persoon, als enige stuk tekst op de site cursief en
   met echte aanhalingstekens: het is het enige dat iemand zelf zegt. */
/* De tegel is zo hoog als zijn eigen quote. Even hoog maken liet onder de
   korte quotes een leeg gekleurd vlak staan, en dat valt meer op dan een
   tegel die niet even hoog is; de onderrand van de kaart lijnt ze toch uit. */
/* Geen tintvlak en geen streep links. Het tintvlak droeg ook de bevestiging
   na een verzonden formulier en betekende daardoor niets; een gekleurde
   verticale streep langs een quote is het meest gekopieerde blokje van het
   web en leest als sjabloon. Wat overblijft is een haarlijn over de volle
   kaartbreedte, zoals de scheiding op een gedrukte kaart: dezelfde lijn die
   de tijdlijn en de voet al gebruiken, dus uit de eigen taal van deze site.
   De cursief en de echte aanhalingstekens doen de rest. */
.verhaal .stem{grid-area:stem;align-self:end;margin:var(--s5) 0 0;
  padding:var(--s4) 0 0;border-top:1px solid var(--line)}
.verhaal .stem p{margin:0;font-style:italic;color:var(--ink);
  font-size:var(--t-sm);line-height:1.55}
/* D10: het teken stond in de tekststroom, dus de eerste regel begon een
   halve em verder naar rechts dan de rest, met een glyph die optisch bijna
   leeg is, in een kaart waar al het andere links op dezelfde padding
   uitlijnt. */
.verhaal .stem p{text-indent:-.36em}
@supports (hanging-punctuation:first){
  .verhaal .stem p{text-indent:0;hanging-punctuation:first}
}
.verhaal .stem p::before{content:"“"}
.verhaal .stem p::after{content:"”"}

/* kaart met persoon */
/* F16: een component met een vaste buitenmarge kan niet elders worden
   neergezet zonder die marge weg te poetsen. Dat het nu klopte kwam doordat
   elk van die componenten precies een keer voorkomt, niet doordat het
   systeem klopte. De marge staat nu op de relatie, zoals .two + .reeks. */
.kaart{display:flex;gap:var(--s4);align-items:center;background:var(--page);border:1px solid var(--line);
  border-radius:var(--r-2);padding:16px 18px;width:100%}
* + .kaart{margin-top:var(--s5)}
.kaart b{display:flex;align-items:center;gap:var(--s2);color:var(--ink)}
.kaart span{display:block;font-size:var(--t-sm);color:var(--alt)}

/* alleen voor schermlezers: houdt de kopstructuur heel zonder de pagina te
   vullen met een kop die de lezer niet nodig heeft */
.stil{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
/* het honeypot-veld: onzichtbaar voor mensen, wel invulbaar voor een robot */
.val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* een knop die naar een blok verderop op dezelfde pagina springt; de marge
   houdt het kopje onder de vaste balk vandaan */
[id^="blok-"]{scroll-margin-top:var(--anker)}

/* formulieren */
.form{display:flex;flex-direction:column;gap:var(--s4);width:100%}
.form.smal{max-width:26rem}
.form h2{margin-bottom:6px}
.form label{display:flex;flex-direction:column;gap:var(--s2);font-size:var(--t-sm);font-weight:600;color:var(--ink)}
/* De melding na het verzenden. Dit blok volgde eerst een eigen ontwerp: een
   randje links in de merkkleur met een vinkje ervoor. Dat is nergens anders op
   de site het patroon, en de merkkleur heeft al drie rollen (aanwijzer,
   toestand, cijfer) die verwateren als er een vierde bij komt. Nu leent hij
   van wat er al staat: het vlak van .kaart en de stip van .status, dus een
   witte kaart met een haarlijn en een gekleurd puntje dat de uitkomst draagt.
   Geen pop-up: die moet je wegklikken, onderbreekt het lezen en is met
   toetsenbord en schermlezer omslachtiger dan een melding op de plek waar je
   net op Send hebt gedrukt. De omleiding springt naar het id, dus hij staat na
   het verzenden meteen in beeld. */
.verzonden{display:flex;gap:var(--s3);align-items:flex-start;
  margin:0;padding:15px 18px;background:var(--page);
  border:1px solid var(--line);border-radius:var(--r-2);
  font-size:var(--t-sm);line-height:1.55;color:var(--ink);
  scroll-margin-block:100px}
/* de .71em zet de stip op het midden van de eerste regel, net als bij .checks */
.verzonden::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;
  margin-block-start:.71em;background:var(--stand-live);
  box-shadow:0 0 0 3px rgb(var(--stand-live-rgb) / .26)}
.verzonden.mis::before{background:var(--stand-wacht);
  box-shadow:0 0 0 3px rgb(var(--stand-wacht-rgb) / .26)}
/* de omleiding zet de focus op de melding; een muisgebruiker hoeft daar geen
   ring omheen te zien, een toetsenbordgebruiker wel */
.verzonden:focus:not(:focus-visible){outline:none}
.form input,.form select,.form textarea{font-family:inherit;font-size:var(--t-base);font-weight:400;color:var(--ink);
  background:var(--page);border:1px solid var(--rand-veld);border-radius:var(--r-1);padding:11px 13px;width:100%;
  transition:border-color .18s var(--e)}
.form textarea{resize:vertical}
/* eigen pijltje op het keuzeveld: het systeempijltje past niet bij de huisstijl */
.form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background-color:var(--page);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.4 1.6 7 7.2l5.6-5.6' fill='none' stroke='%23006D81' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:13px 9px;
  transition:border-color .18s var(--e)}
.form :is(input,textarea,select):hover{border-color:var(--brand)}
/* De ring lag op 3px afstand van het veld en raakte het veld zelf niet, en
   er was geen foutbeeld terwijl vijf velden verplicht zijn. :user-invalid
   slaat pas aan nadat iemand het veld verlaten heeft, dus niet tijdens het
   typen. De standkleur die we al hebben doet hier het werk. */
.form :is(input,textarea,select):focus-visible{outline:2px solid var(--brand);
  outline-offset:1px;border-color:var(--brand)}
.form :is(input,textarea,select):user-invalid{border-color:var(--stand-wacht-tx)}
.form .paar{display:grid;gap:var(--s4);grid-template-columns:1fr 1fr}
@media (max-width:30rem){.form .paar{grid-template-columns:1fr}}
.form button{align-self:flex-start;margin-top:var(--s1)}
address{font-style:normal;line-height:1.8;margin-top:var(--s4)}

/* ── footer ──────────────────────────────────────────────────────── */
footer.bot{background:var(--korrel),var(--dark);color:var(--voet-ink);padding:clamp(30px,3.4vw,42px) 0 24px;font-size:var(--t-sm)}
footer.bot .cols{display:grid;gap:var(--s6) var(--s7);grid-template-columns:1.4fr 1.2fr 1fr;align-items:start}
@media (max-width:52rem){footer.bot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:34rem){footer.bot .cols{grid-template-columns:1fr}}
/* Geen negatieve marges meer: het logo stond 3px links van en 6px boven de
   kolom, terwijl de kopjes ernaast juist 6px omlaag werden geduwd. Daardoor
   begon geen van de drie kolommen op dezelfde lijn. Nu starten alle drie op de
   bovenrand van het raster. */
footer.bot img{display:block;height:64px;width:auto;margin:0 0 18px}
footer.bot h4{color:#fff;margin:0 0 14px;padding-top:0}
footer.bot .cols p{max-width:42ch;margin:0}
footer.bot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
/* de zes paginalinks in twee kolommen van drie. Onder elkaar maakten ze de
   voetband anderhalf keer zo hoog als de twee kolommen ernaast, en een voet
   hoort niet de langste band van de pagina te zijn. Kolom vullen gaat per
   kolom, dus de volgorde van het menu blijft van boven naar beneden staan. */
footer.bot ul.paden{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);
  justify-content:start;gap:var(--s3) clamp(22px,2.6vw,40px)}
footer.bot a{color:var(--voet-ink)} footer.bot a:hover{color:#fff}
footer.bot .sociaal{display:flex;gap:var(--s3);margin-top:var(--s5)}
footer.bot .sociaal a{display:inline-flex}
/* kleiner dan de rest van de voet, maar wel op volle kleur: het merk van
   LinkedIn hoort in zijn eigen blauw te staan. */
footer.bot .sociaal .li-ico{width:20px;height:20px;border-radius:var(--r-2);opacity:1}
footer.bot .onder{margin-top:var(--s6);padding-top:18px;border-top:1px solid rgb(var(--wit-rgb) / .1);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);font-size:var(--t-xs)}
footer.bot .onder button{background:none;border:0;color:var(--voet-ink);font:inherit;cursor:pointer;padding:0}
footer.bot .onder button:hover{color:#fff}
/* In deze regel staan drie mededelingen, een link en een knop. Zonder
   onderstreping is niet te zien welke twee van de vijf iets doen, en op een
   aanraakscherm bestaat de hover niet die dat verschil nu moest dragen. */
footer.bot .onder :is(a,button){text-decoration:underline;
  text-decoration-color:rgb(var(--wit-rgb) / .32);text-underline-offset:.22em;
  transition:text-decoration-color .18s var(--e)}
footer.bot .onder :is(a,button):hover{text-decoration-color:currentColor}

/* ── cookiemelding ───────────────────────────────────────────────── */
#cookie{position:fixed;left:clamp(12px,3vw,26px);bottom:clamp(12px,3vw,26px);z-index:1200;
  max-width:min(30rem,calc(100vw - 24px));background:var(--page);border:1px solid var(--line);
  border-radius:var(--r-3);box-shadow:var(--schaduw-3);padding:var(--s5);display:none}
#cookie.show{display:block}
#cookie h3{font-size:var(--t-md);margin-bottom:8px}
#cookie p{font-size:var(--t-sm);margin-bottom:16px}
#cookie .acts{display:flex;gap:var(--s3);flex-wrap:wrap}
#cookie .klein{margin:14px 0 0}
#cookie .btn{--btn-py:11px;--btn-px:18px;--btn-fs:var(--t-sm)}

/* ══ vakwerk 1 · voortgangslijn ═══════════════════════════════════
   Een lijn van 2px onder de vaste kop die meeloopt met de scrollpositie.
   Nuttig op een lange pagina -- nieuws is ruim 7000 pixels -- waar je anders
   niet ziet hoe ver je bent. Geen markup, geen javascript.
   WEGHALEN: dit hele blok, tot en met @keyframes voortgang. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    header.top::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
      background:var(--brand);transform-origin:0 50%;scale:0 1;pointer-events:none;
      animation:voortgang linear both;animation-timeline:scroll(root block)}
  }
}
@keyframes voortgang{to{scale:1 1}}

/* ══ vakwerk 2 · kop en toetsenbord ═══════════════════════════════
   De kop heeft altijd een haarlijn; zodra je scrolt komt daar een zachte
   schaduw bij, zodat hij van de inhoud af lijkt te komen in plaats van erop
   te plakken. Daarnaast een sprong naar de inhoud die alleen verschijnt als
   je hem met de tabtoets bereikt.
   WEGHALEN: dit hele blok, plus de regel met class="skip" in de body. */
@supports (animation-timeline: scroll()){
  header.top{animation:kopdiepte linear both;animation-timeline:scroll(root block);
    animation-range:0 48px}
}
@keyframes kopdiepte{
  from{box-shadow:0 1px 0 var(--line)}
  to{box-shadow:0 1px 0 var(--line),0 14px 26px -22px rgb(var(--deep-rgb) / .55)}
}
.skip{position:fixed;top:10px;left:10px;z-index:1000;background:var(--page);
  color:var(--brand);font-weight:600;font-size:var(--t-sm);padding:10px 16px;border-radius:var(--r-1);
  box-shadow:var(--schaduw-3);translate:0 -200%;
  transition:translate .18s var(--e)}
.skip:focus-visible{translate:0 0}
#main{scroll-margin-top:var(--anker)}

/* ══ tablet en telefoon ═══════════════════════════════════════════
   Onder 61rem verandert een aantal onderdelen van VORM in plaats van alleen
   te krimpen. Een tijdlijn van vijf stappen in drie kolommen laat de laatste
   rij half leeg en de lijn ertussen loopt nergens naartoe; een kaart van
   697px breed met een beeld van 697x392 erboven is geen kaart meer. */
@media (max-width:61rem){
  /* B. de tijdlijn wordt verticaal: de lijn loopt van bolletje naar bolletje
     omlaag in plaats van over een rij die halverwege afbreekt */
  .tijdlijn{grid-template-columns:1fr}
  .tijdlijn li{padding:0 0 var(--s5) var(--s6)}
  .tijdlijn li:last-child{padding-bottom:0}
  .tijdlijn li::before{top:2px;left:0}
  .tijdlijn li::after{left:6px;right:auto;top:2px;bottom:0;width:2px;height:auto}
  .tijdlijn li.nu::after{background:linear-gradient(to bottom,var(--brand) 24%,var(--line-2) 54%)}
  .tijdlijn li:last-child::after{background:linear-gradient(to bottom,var(--line-2) 35%,transparent)}
}
/* C. Een rij van drie kaarten past op een tablet niet in drie kolommen en in
   twee laat hij er een alleen achter. In een kolom wordt de kaart 697px
   breed en dat is te veel. Daarom draait de kaart een kwartslag: beeld
   links, tekst rechts. Geen wees, en de breedte wordt gebruikt. */
@media (min-width:40rem) and (max-width:61rem){
  .berichtjes,.reeks,.modellen{grid-template-columns:1fr;gap:var(--s6)}
  /* Alleen een kaart MET beeld draait een kwartslag. De focusmarkten hebben
     een landsilhouet, maar de drie blokken onder How the turbines get built
     zijn dezelfde .reeks zonder beeld: die kregen een lege linkerkolom en
     stonden daardoor in de rechterhelft. Die blijven gewoon links staan. */
  .berichtjes article,.reeks > *:has(.land),.modellen .model{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:var(--s5);align-items:start}
  .berichtjes article > .kaartbeeld,.reeks > * > .land,.modellen .model > .foto{
    grid-column:1;grid-row:1 / span 99;margin-bottom:0;align-self:start}
  .berichtjes article > :not(.kaartbeeld),
  .reeks > *:has(.land) > :not(.land),
  .modellen .model > :not(.foto):not(.jaar){grid-column:2}
  /* Het silhouet heeft nu een eigen kolom van ongeveer 280px en mag dus veel
     groter. Wel met een bovengrens en height:auto, want de drie landen zijn
     op hun eigen omtrek gesneden en houden bewust hun onderlinge maat.
     Dubbele klasse om de regel verderop in dit blad te overstemmen. */
  .reeks.markten .land{max-width:min(100%,200px);max-height:200px;
    height:auto;margin-bottom:0;align-self:center}
}

/* ══ telefoon ═════════════════════════════════════════════════════
   Onder 40rem is er maar een kolom, dus hier gaat het niet meer om indelen
   maar om maat: wat op een groot scherm klein mag zijn, moet hier groeien,
   en wat naast elkaar stond gaat onder elkaar. */
@media (max-width:40rem){
  /* De verhaalkaart was 268px breed met daarin een portret naast een
     tekstkolom van 200px; de ene zin brak daar over vier regels. De kaart
     vult nu bijna het scherm, met een randje van de volgende kaart zodat je
     ziet dat er meer is, en de zin staat onder het portret in plaats van
     ernaast. */
  .verhaal{flex:0 0 86%}
  .verhaal{grid-template-areas:"portret naam" "portret rol" "zin zin"
                              "verhaal verhaal" "stem stem";
    grid-template-rows:auto auto auto 1fr auto}
  .verhaal .tag{margin-top:var(--s3)}
  /* de modelkaarten liepen in elkaar over: het beeld van de volgende kaart
     begon vlak onder de tekst van de vorige */
  .modellen{gap:var(--s7)}
  /* een silhouet van 80px naast een kop van 18px is geen beeld meer; op een
     kolom van 343px mag het ruim twee keer zo groot */
  .reeks.markten .land{max-width:min(60%,170px);max-height:170px;height:auto}
}

/* ══ vakwerk 3 · tekstvakwerk ═════════════════════════════════════
   Selectiekleur uit de huisstijl, geen weeskind op de laatste regel, en een
   link midden in een alinea die je ook ziet als je de kleur niet onderscheidt.
   WEGHALEN: dit hele blok. */
/* --tint haalt tegen wit 1,15:1 en tegen de zachte band 1,07:1, dus wie een
   bedrag of adres selecteerde zag niet wat hij te pakken had. Een selectie
   is tijdelijk en mag opvallen: hier mag het accent wel royaal zijn. */
::selection{background:color-mix(in oklab,var(--brand) 26%,#fff);color:var(--ink)}
:is(.phead.donker,.cta,footer.bot,.hero) ::selection{background:rgb(var(--wit-rgb) / .3);color:#fff}
p,li,figcaption,dd{text-wrap:pretty}
.lead,.zin{text-wrap:balance}
main p a:not(.btn,.li,.beeldlink){text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;transition:text-decoration-thickness .15s var(--e)}
main p a:not(.btn,.li,.beeldlink):hover{text-decoration-thickness:2px}

/* AFGEWEZEN (17 september): beelden die van hun eigen kant binnenschuiven.
   Wessel wil deze dynamiek nergens op de site. Ook de keyframes zijn weg. */

/* ── de ring schuift in ─────────────────────────────────────────── */
/* De ring in de blauwe band komt van rechts binnenschuiven terwijl de band in
   beeld komt. Draaien deed hij eerst ook; dat is eruit, want een gelijkmatige
   ring draaien vraagt om een oneffenheid in het licht en dat werd een tweede
   blikvanger naast de tekst.
   De tijdlijn is de band zelf. Let op: .cta heeft overflow:hidden en is daarmee
   zelf een scrollcontainer, dus een kale view() zou die als bron nemen en nooit
   bewegen. Vandaar de benoemde tijdlijn --ctaband op .cta. Het bereik is entry
   en niet cover: de band staat onderaan de pagina, met alleen de voet eronder,
   dus de cover-fase haalt zijn einde nooit. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .cta::before{animation:ringschuif linear both;animation-timeline:--ctaband;
      animation-range:entry 0% entry 100%}
  }
}
@keyframes ringschuif{from{translate:124px -50%}to{translate:0 -50%}}

/* ── secties komen op ───────────────────────────────────────────── */
/* Elk blok binnen een band schuift een klein stukje omhoog terwijl het in beeld
   komt. De tijdlijn is de scrollpositie zelf (animation-timeline: view()), dus
   geen JS, geen waarnemer en niets dat blijft draaien.
   Het bereik loopt van entry 8% tot entry 92%: de beweging is al klaar voordat
   het blok volledig in beeld staat. Met een bereik dat tot in de cover-fase
   loopt zou het onderste blok van een pagina blijven steken op halve dekking,
   want daar kan niet verder gescrold worden.
   Niet Baseline, dus achter @supports: zonder ondersteuning staat alles er
   gewoon meteen. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .band > .wrap > h2,
    .band > .wrap > p,
    .band > .wrap > .sectiekop,
    .band > .wrap > .two,
    .band > .wrap > .reeks,
    .band > .wrap > .berichten,
    .band > .wrap > .berichtjes,
    .band > .wrap > .figs,
    .band > .wrap > .tijdlijn,
    .band > .wrap > .checks,
    .band > .wrap > .groep{
      animation:opkomen linear both;
      animation-timeline:view();
      /* Een bereik in procenten loopt over de HOOGTE VAN HET BLOK zelf. Het
         nieuwsraster is 7378px hoog, dus entry 92% werd pas gehaald na bijna de
         hele pagina en bleef het raster al die tijd doorzichtig. Een vaste
         lengte maakt het bereik onafhankelijk van de hoogte: 240px scrollen en
         het staat er, of het blok nu 100 of 7000 pixels hoog is. */
      animation-range:entry 0% entry 240px}
  }
}
@keyframes opkomen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── indrukken ──────────────────────────────────────────────────── */
/* Alles wat je aanklikt zakt heel even in. Alleen transform, dus het draait op
   de compositor en kost geen herberekening van de opmaak. Kort: dit is de
   handeling die iemand het vaakst doet, daar hoort geen wachttijd bij. */
.btn,.ey-knop,.eybalk-knop,.eybalk-weg,.meer,.video .afspelen,.alslink{
  transition-property:background-color,color,border-color,opacity,transform;
  transition-duration:.18s,.18s,.18s,.18s,.16s;
  transition-timing-function:var(--e)}
.btn:active,.ey-knop:active,.eybalk-knop:active,.video .afspelen:active{transform:scale(.97)}
.meer:active,.alslink:active{transform:scale(var(--druk))}
@media (prefers-reduced-motion:reduce){
  .btn:active,.ey-knop:active,.eybalk-knop:active,.video .afspelen:active,
  .meer:active,.alslink:active{transform:none}
}

/* ── paginawissel ────────────────────────────────────────────────── */
/* De kop en de voet blijven staan, alleen de pagina eronder wisselt. Kort en
   zonder verschuiving: een langere of bewegende overgang laat een site traag
   aanvoelen juist op de handeling die iemand het vaakst doet. */
@view-transition{navigation:auto}
/* de oude pagina gaat sneller weg dan de nieuwe binnenkomt: twee lagen die
   even lang half doorzichtig over elkaar liggen leest als vuil, niet als een
   overgang */
::view-transition-old(root){animation:paginaweg .12s var(--e) both}
::view-transition-new(root){animation:paginaaan .2s var(--e) .05s both}
@keyframes paginaweg{to{opacity:0}}
@keyframes paginaaan{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ── het vaste balkje rechtsonder ───────────────────────────────── */
/* Komt pas in beeld na een halve schermhoogte scrollen: meteen bij het openen
   van de pagina zou het over de kop heen praten. Schuift in vanaf onder en is
   weg te klikken; die keuze blijft even lang staan als die van de pop-up. */
.eybalk{position:fixed;z-index:60;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);
  display:flex;align-items:stretch;background:var(--vlak-accent);color:#fff;border-radius:var(--r-2);
  box-shadow:var(--schaduw-3);
  transform:translateY(calc(100% + 32px));opacity:0;
  transition:transform .42s var(--e),opacity .42s var(--e),background-color .18s var(--e)}
.eybalk.in{transform:none;opacity:1}
.eybalk:hover{background:var(--vlak-accent-in)}
.eybalk-knop{display:flex;align-items:center;background:none;border:0;color:inherit;
  font:inherit;font-weight:600;font-size:var(--t-sm);padding:12px 4px 12px 16px;
  cursor:pointer;white-space:nowrap;text-decoration:none}
.eybalk-knop .ext{width:.9em;height:.9em;fill:currentColor;margin-left:.5em}
.eybalk-knop .ey-merk{height:1.44em;vertical-align:-.38em}
.eybalk-weg{background:none;border:0;color:#fff;opacity:.62;font-size:19px;line-height:1;
  padding:0 13px;cursor:pointer;transition:opacity .18s var(--e)}
.eybalk-weg:hover{opacity:1}
@media (prefers-reduced-motion:reduce){
  .eybalk{transform:none;transition:opacity .2s linear}
}

/* ── Eyevestor pop-up ────────────────────────────────────────────── */
/* F12: dit zijn de twee momenten waarop de site de bezoeker onderbreekt, en
   ze hadden twee anatomieen: twee koppen op verschillende maat, twee
   elevaties en twee manieren om nee aan te bieden. Straal, schaduw en
   kopmaat zijn nu gelijk; de merkstrook blijft het verschil. */
dialog#ey{border:0;border-radius:var(--r-3);padding:0;max-width:min(32rem,calc(100vw - 32px));
  box-shadow:var(--schaduw-3)}
dialog#ey::backdrop{background:rgb(var(--deep-rgb) / .5)}
#ey .strook{background:var(--vlak-accent);padding:18px 26px;display:flex;align-items:center;justify-content:space-between}
#ey .strook img{height:32px}
#ey .sluit{background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px}
#ey .in{padding:var(--s5)}
#ey h3{font-size:var(--t-md);font-weight:600;margin-bottom:var(--s2)}
#ey p{font-size:var(--t-sm)}
#ey .acts{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s5)}
/* dit is .alslink, geen vierde variant: zelfde kleur, zelfde onderlijn */
#ey .later{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
#ey .later:hover{color:var(--brand-dp)}

/* ── placeholders ────────────────────────────────────────────────── */
/* B8: zolang er placeholders in beeld staan betekent een warm lichtgeel vlak
   op deze site DIT IS NOG NIET AF. Dat botste met --ey-beige (1,03:1 ervan
   af), het vlak onder het merkenpaar dat juist vertrouwen moet wekken. De
   markering is nu een lijn in plaats van een vlak, en --amber-edge komt
   daarmee eindelijk in gebruik. */
.ph{background:none;box-shadow:0 2px 0 var(--amber-edge);
  border-radius:0;padding:0 .22em;color:#6B5310}
h1 .ph,h2 .ph,h3 .ph,.fig b .ph{color:inherit;background:rgb(var(--amber-edge-rgb) / .14)}
.hero .ph,.cta .ph,footer.bot .ph,#ey .strook .ph{background:rgb(var(--wit-rgb) / .1);
  box-shadow:0 0 0 1px rgb(var(--wit-rgb) / .18) inset;color:inherit}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r-2);overflow:hidden;background:var(--plate);
  box-shadow:var(--schaduw-2)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
/* Het hele posterbeeld is de knop. Het teken erbij staat midden op het beeld,
   waar iedereen een afspeelknop verwacht; het blijft wel hetzelfde kleine,
   rechte label in het petrol als het jaartal op de modelfoto's. Geen schijf. */
.video{cursor:pointer}
.video .afspelen{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:var(--brand);color:#fff;border:0;border-radius:var(--r-1);
  padding:6px 15px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--schaduw-1);
  transition:background .18s var(--e),transform .18s var(--e)}
/* de driehoek staat optisch pas in het midden als hij een haar naar rechts schuift */
.video .afspelen svg{width:14px;height:14px;fill:#fff;flex:none;transform:translateX(1px)}
.video:hover .afspelen{background:var(--vlak-accent);transform:translate(-50%,-50%) scale(1.06)}
/* het beeld wordt een tikje donkerder zodra je eroverheen gaat */
.video .poster{transition:filter .25s var(--e)}
.video:hover .poster{filter:brightness(.95)}
.video .afspelen:focus-visible{outline:2px solid #fff;outline-offset:3px}
.video.speelt .poster,.video.speelt .afspelen{display:none}
/* beeld over de volle breedte van de tekstkolom. Groter kader, dus ook een
   diepere schaduw: een haarscherpe laag vlak onder de rand en een brede zachte
   laag eronder, anders zweeft zo'n groot vlak op een lichte band. */
/* een reeks korte punten onder een breed beeld: drie kolommen, verder niets.
   Geen kaders, geen lijnen, geen nummers; de kopjes doen het werk. */
/* volgt de reeks op een beeldblok, dan iets minder lucht dan los in de tekst:
   het blok erboven eindigt al met een rustige onderrand */
/* GEPROBEERD EN TERUGGEDRAAID (17 september): de inleiding van de twee
   volle-breedte-secties naar de rechterhelft, om het links-rechts-ritme van
   de blokken eromheen door te trekken. In beeld werkt dat niet: een kop en
   inleiding die halverwege beginnen boven een rij die wel op de linkerrand
   staat, leest als een fout en niet als ritme. Links uitlijnen is hier
   gewoon goed. De klasse doet nu niets en verandert de opmaak dus niet. */
/* C7: een blok dat onder tekst volgt kreeg 6, 18, 20, 22, 26, 34, 40 of 47px,
   bijna een factor acht voor wat conceptueel een overgang is. Twee niveaus:
   --s5 na tekst, --s7 tussen twee blokken onderling. */
:is(.two,.reeks,.berichten,.berichtjes,.tijdlijn,.modellen) +
:is(.two,.reeks,.berichten,.berichtjes,.tijdlijn,.modellen){margin-top:var(--s7)}
.reeks{display:grid;gap:var(--goot);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
/* Drie kaarten horen naast elkaar of onder elkaar, nooit twee met een derde
   alleen op de tweede rij. Dat gebeurde op tabletbreedte, waar auto-fit
   precies twee kolommen overhield. Onder deze breedte dus in een kolom. */
@media (max-width:61rem){
  .reeks,.berichtjes{grid-template-columns:1fr}
  /* in een kolom wordt een kaart zo breed als de band; de tekst erin houden we
     op leesbare regellengte in plaats van hem mee te rekken */
  .reeks p,.berichtjes p{max-width:68ch}
}
/* de focusmarkten: geen kader, maar het silhouet van het land erboven.
   Een ruimere goot maakt de drie kolommen smaller zonder dat de rij smaller
   wordt: de tekst per land leest daardoor rustiger en de silhouetten staan
   verder uit elkaar, wat ze als drie losse dingen laat lezen. */
.markten{gap:calc(var(--goot) * 3.2)}
/* Na het trimmen verschilt de verhouding per land, dus een vaste hoogte zou
   het ene silhouet veel breder maken dan het andere. Twee bovengrenzen en
   height:auto houden ze binnen hetzelfde vak zonder ze te vervormen. Bewust
   NIET op inkt genormaliseerd: dit zijn landen, geen pictogrammen, dus hun
   onderlinge maat mag kloppen met de werkelijkheid. */
.markten .land{width:auto;max-width:clamp(88px,9vw,120px);
  max-height:clamp(76px,8vw,104px);height:auto;margin:0 0 var(--s4);
  border-radius:0;box-shadow:none;filter:none}
.reeks h3{font-size:var(--t-md);margin:0 0 6px}
.reeks p{font-size:var(--t-sm);margin:0}
.foto{width:100%;height:auto;border-radius:var(--r-2)}
/* E8 AFGEWEZEN (17 september): de contactfoto bijsnijden naar 16:9. Wessel
   wil het pand uitgezoomd in beeld houden, dus de vrije verhouding van de
   bron (1500x390) blijft. */
/* Een beeld met een harde rand komt met een lichte schaduw van het vlak af.
   Niet bij een uitgesneden render, het paginabrede beeld of het scherm met
   het verlopende masker: daar zou je een schaduw om niets heen zien. Het
   scherm van de rekentool heeft er al een, met drop-shadow, want die volgt
   de vorm in plaats van het kader. */
.foto:where(:not(.bleed,.vloeiend,.scherm,.uitsnede,.rond)){
  box-shadow:var(--schaduw-2)}
.foto.rond{box-shadow:var(--schaduw-1)}
/* E2: object-position kwam nergens in dit blad voor, dus alle drie de
   cover-beelden stonden op de fabrieksinstelling midden-midden. De hero-bron
   is 1700x1176 in een vak dat op een breed scherm 3,1:1 wordt, dus daar gaat
   ruim de helft van de hoogte weg, en de ring viel willekeurig. Dit zet het
   onderwerp in de rechterhelft, waar het verloop het lichtst is en de tekst
   links vrij blijft. */
.foto.bleed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 38%;border-radius:0;z-index:-2}
.foto.rond{border-radius:50%;aspect-ratio:1;object-fit:cover}
/* Geen filter:drop-shadow hier. Deze beelden dragen hun eigen schaduw, in
   hetzelfde gekantelde vlak; een filter legt daar een tweede, vlakke
   schaduw overheen. Zie media/schermshot.py. */
.foto.scherm{border:0;border-radius:0}
.foto.breed{aspect-ratio:3/2;object-fit:cover}
.cta .two{text-align:left;align-items:center;margin-top:0}
.cta .foto.scherm{max-width:min(100%,460px);justify-self:end}
/* Het Eyevestor-blok. Het venster is een licht beeld; op het petrol springt
   het eruit, op een lichte band viel het weg. De band blijft laag: de kop
   loopt over de volle breedte, zodat hij op een regel past, en eronder staat
   alleen nog de zin, het bedrag en de knop. */
/* De Eyevestor-slotband is een modifier op de cta en stond op 21px tegen
   66px voor een gewone band, een factor drie: dat las niet als band maar
   als een strook die tussen de inhoud en de voet is geklemd. */
.eyblok{padding:var(--band-s) 0}
.eyblok h2{max-width:none;margin-top:var(--s4)}
.eyblok .two{margin-top:0;align-items:center}
.eyblok .lead{margin-top:var(--s4)}
/* het merk bovenaan de tekstkolom, boven de stand van de campagne; het venster
   staat in de rechterkolom naar links, zodat het naar de tekst toe leunt in
   plaats van tegen de paginarand te plakken */
.eyblok .ey-logo{width:clamp(168px,17vw,214px);margin-bottom:16px}
.eyblok .eybeeld{display:grid}
.eyblok .foto.scherm{justify-self:start;max-width:min(100%,380px)}
/* de cijfers staan hier op een donkere ondergrond en lenen dus de kleuren
   van de band */
.cta .figs{border-top-color:rgb(var(--wit-rgb) / .22)}
.cta .fig b{color:#fff}
.cta .fig span{color:rgb(var(--wit-rgb) / .78)}
/* de stand van de campagne: een stip en twee woorden, meer niet */
.status{display:inline-flex;align-items:center;gap:var(--s2);flex:none;
  color:rgb(var(--wit-rgb) / .92);border:1px solid var(--stand-live);
  border-radius:var(--r-1);padding:5px 11px}
/* de rand loopt mee met het stipje: oranje zolang de campagne nog moet openen */
.status.wacht{border-color:var(--stand-wacht)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--stand-live);box-shadow:0 0 0 3px rgb(var(--stand-live-rgb) / .26)}
.status.wacht::before{background:var(--stand-wacht);box-shadow:0 0 0 3px rgb(var(--stand-wacht-rgb) / .26)}
.beeldrechts .foto.scherm{max-width:min(100%,430px);justify-self:center;align-self:start}
/* de cijfers onder elkaar, zodat ze naast een staand beeld passen */
/* C12: .figs.kaal stond na .onder-elkaar met gelijke specificiteit, dus de
   volgorde besliste en het cijferblok kwam 8px onder de tekst te staan,
   terwijl de haarlijn en het auto-fit-raster van .figs nergens te zien
   waren. Beide voorkomens in de markup zijn onder-elkaar EN kaal, dus hier
   staat nu wat er werkelijk gebeurt. */
.figs.onder-elkaar{grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s5);
  padding-top:22px}
.figs.onder-elkaar .fig span{max-width:34ch}
/* zonder haarlijn erboven, voor waar de cijfers naast een tekstkolom staan */
.figs.kaal{border-top:0;padding-top:0;margin-top:var(--s2)}
.imgph{position:relative;display:grid;place-items:center;min-height:220px;border-radius:var(--r-2);overflow:hidden;
  background:repeating-linear-gradient(135deg,#EDF3F3 0 12px,#E4ECEC 12px 24px);
  border:1px dashed var(--line-2);color:var(--alt);text-align:center;padding:22px}
.imgph.plate{background:repeating-linear-gradient(135deg,#0A323D 0 12px,#0C3947 12px 24px);
  border-color:rgb(var(--wit-rgb) / .16);color:#8FB2AD}
.imgph.rond{border-radius:50%;aspect-ratio:1;min-height:0}
.imgph.klein,.foto.klein{width:var(--portret-s);flex:none;padding:0}
.imgph.klein{padding:6px}
.imgph.klein b,.imgph.klein span,.imgph.klein i{display:none}
.imgph.bleed{min-height:100%}
.imgph-in{display:flex;flex-direction:column;gap:var(--s1);max-width:26ch}
.imgph b{opacity:.75}
.imgph span{font-size:var(--t-sm);line-height:1.45;color:inherit}
.imgph i{font-style:normal;font-size:var(--t-xs);opacity:.7}
.model .imgph{min-height:300px}
.bericht .imgph{min-height:180px}

/* ── mobiel ──────────────────────────────────────────────────────── */
@media (max-width:78rem){ header.top .logo img{height:58px} }
@media (max-width:60rem){
  .burger{display:block;order:3}
  nav{position:fixed;top:var(--hh);left:0;right:0;background:var(--page);flex-direction:column;
    align-items:stretch;gap:0;padding:var(--s2) 0 var(--s4);box-shadow:var(--schaduw-3);
    max-height:calc(100vh - var(--hh));overflow-y:auto;z-index:880}
  nav:not(.open){display:none}
  nav a{padding:13px clamp(18px,4vw,28px);border-bottom:1px solid var(--line)}
  nav a.on::after{display:none}
  .ey-knop{margin:14px clamp(18px,4vw,28px) 0;text-align:center}
  .phead .mark{display:none}
}
/* ══ tablet, onderdeel voor onderdeel ══════════════════════════════
   Staat met opzet achteraan in dit blad: bijna alles wat hier wordt
   bijgesteld is verderop gedefinieerd en zou anders op volgorde winnen. */
@media (min-width:40rem) and (max-width:61rem){
  /* About us: het logo groot linksboven, boven de kop. Rechts naast de kop
     werd het een klein merkje in een half lege kolom; hier draagt het het
     blok. Expliciete plaatsing en niet order, want er staat elders al een
     order-regel op .beeldlinks en twee ordes plus auto-plaatsing lieten de
     eerste kolom naar 0px klappen. */
  .two.beeldlinks.smalbeeld{grid-template-columns:1fr;row-gap:var(--s5)}
  .two.beeldlinks.smalbeeld > .merk{grid-area:1 / 1;order:0;justify-self:start}
  /* .merk is zelf een flexdoos die zijn inhoud centreert en 21,6px lucht
     boven en onder zet. Op een breed scherm klopt dat, want daar staat het
     logo op zichzelf; hier hoort het links tegen dezelfde lijn als de kop
     en de tekst, en de rij-goot levert de afstand al. */
  .two.beeldlinks.smalbeeld > .merk{justify-content:flex-start;padding:0}
  .two.beeldlinks.smalbeeld > .stack{grid-area:2 / 1;order:0}
  .merk .mwf{width:min(62%,320px)}

  /* WhisperRing: de render is hier geen paginabeeld maar een illustratie naast
     de tekst, dus veel kleiner en in een eigen smalle kolom */
  /* De kop en de inleiding lopen over de volle breedte; pas daaronder komt
     de tweedeling met de subsecties links en de render rechts. Daarvoor moet
     de stack ophouden een doos te zijn, zodat zijn kinderen zelf rijen van
     dit raster worden. De render kan daardoor ook groter: hij deelt de
     breedte niet meer met de inleiding. */
  .two.strak:not(.beeld-smal){grid-template-columns:minmax(0,1fr) minmax(0,300px);
    align-items:start;column-gap:var(--s5);row-gap:0}
  .two.strak:not(.beeld-smal) > .stack{display:contents}
  .two.strak:not(.beeld-smal) h2{grid-area:1 / 1 / 2 / 3}
  .two.strak:not(.beeld-smal) .zin{grid-area:2 / 1 / 3 / 3}
  .two.strak:not(.beeld-smal) .onder{grid-area:3 / 1}
  /* De render is een uitsnede waarvan de massa hoog zit: de rotor vult de
     bovenkant en de toren vaalt naar onder weg. Gemeten over het alfakanaal
     ligt het zwaartepunt op 29,7% van de hoogte, niet op de helft. Op het
     midden van de DOOS uitlijnen laat de rotor daardoor hoog hangen naast
     de drie subsecties. Deze verschuiving legt het zwaartepunt op het
     midden van die drie. De toren die er onderuit steekt vervaagt en valt
     in de goot naar het volgende blok, in een kolom waar verder niets staat.
     77px is gemeten en over het hele bereik gelijk: de render heeft een
     vaste maat van 300x322 in zijn eigen kolom, dus de afstand hangt niet
     af van hoe hoog de drie subsecties toevallig uitvallen. Gemeten op
     672, 768, 900 en 960: overal 77. */
  .two.strak:not(.beeld-smal) > .foto{grid-area:3 / 2;align-self:center;
    order:0;max-width:100%;translate:0 77px}

  /* De uitgeklapte ring sluit de sectie af in plaats van hem te openen:
     eerst lees je hoe het werkt, daarna zie je het uit elkaar. Een kolom,
     gecentreerd en begrensd. */
  .two.beeld-smal{grid-template-columns:1fr}
  .two.beeld-smal > .foto{order:2;max-width:min(100%,420px);margin-inline:auto;
    margin-top:var(--s6)}

  /* de personakaarten staan op een schuifband, dus die mogen hier breder */
  .verhaal{flex:0 0 56%}

  /* de cijfers naast elkaar in plaats van onder elkaar: op een tablet is daar
     ruimte voor en het scheelt een halve schermhoogte.
     Allebei de blokken staan onder 61rem als een kolom over de volle
     breedte, dus er is ruimte voor drie cijfers naast elkaar. */
  .two.cijfers .figs.onder-elkaar,
  .two.blokje .figs.onder-elkaar{grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--s5);margin-top:var(--s5)}
  .figs.onder-elkaar .fig span{max-width:none}

  /* de landsilhouetten subtieler; op 200px werden ze het zwaarste element */
  .reeks.markten .land{max-width:min(100%,130px);max-height:130px}
  /* Een kolom van 5 van de 12 is 280px breed terwijl het silhouet er 130 in
     staat: die 150px leegte kwam bovenop de goot. Een vaste kolom van net
     boven de bovengrens haalt dat weg en houdt de drie tekstkolommen op
     dezelfde lijn, ook al is elk land op zijn eigen omtrek gesneden. */
  .reeks.markten > *{grid-template-columns:140px minmax(0,1fr)}

  /* Eyevestor: logo linksboven, dan kop en tekst, dan de cijfers, dan de knop.
     Daarvoor moeten de twee omhulsels ophouden een doos te zijn; met
     display:contents worden hun kinderen zelf de rijen van deze kolom. */
  .two.blokje{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .two.blokje > div,.two.blokje .stack{display:contents}
  .two.blokje .eymerk{order:1;margin-bottom:var(--s5)}
  .two.blokje h2{order:2}
  .two.blokje .lead{order:3}
  .two.blokje .stack > p:not(.lead){order:4}
  .two.blokje .figs.onder-elkaar{order:5;width:100%}
  .two.blokje .row{order:6;margin-top:var(--s5)}

  /* de merkenplaat horizontaal: op een tablet is er breedte zat en twee
     logo's onder elkaar maakten er een hoge, vrijwel lege plaat van */
  /* De plaat hoeft de volle breedte niet: twee logo's naast elkaar vullen
     hem toch niet en dan wordt het een lege beige balk. Smaller en
     gecentreerd leest hij als een plaatje in plaats van als een band. */
  .duo{flex-direction:row;gap:clamp(20px,3vw,40px);
    max-width:min(100%,540px);margin-inline:auto;
    padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px)}
  .duo img{width:min(46%,210px)}
  /* De -8px op het kruis is een optische correctie voor de VERTICALE
     opstelling, waar het logo erboven een payoff heeft en het woordmerk
     eronder compact is. Naast elkaar klopt die correctie niet meer en hangt
     het kruis 8px te hoog; hier lijnt het gewoon op het midden uit. */
  .duo .kruis{margin:0;align-self:center}

  /* het schermbeeld in de slotband gecentreerd in plaats van links */
  .eyblok .eybeeld{justify-items:center}
  /* .cta erbij: het schermbeeld van de rekentool staat op een brede weergave
     met justify-self:end tegen de rechterrand van zijn kolom, want daar staat
     de tekst links ernaast. Onder 61rem is er maar een kolom en hangt het dan
     rechts, met 43px lucht rechts en 397 links. */
  .eyblok .foto.scherm,.beeldrechts .foto.scherm,
  .cta .foto.scherm{margin-inline:auto;justify-self:center}
}

/* ══ telefoon, twee renders subtieler ══════════════════════════════ */
@media (max-width:40rem){
  /* de uitgeklapte ring vult anders het hele scherm en overstemt de tekst */
  .foto.vloeiend{max-width:min(100%,290px);margin-inline:auto}
  .foto.uitsnede{max-width:min(100%,82%);margin-inline:auto}
}

/* ── inleidingen lopen mee met de kop ────────────────────────────── */
/* Op een breed scherm houdt een maat in tekens de inleiding leesbaar naast
   een kop die veel verder doorloopt. Op een tablet is de band zelf al smal:
   daar wordt diezelfde maat een smalle kolom met een rafelrand ernaast,
   terwijl de kop er wel de volle breedte pakt. Onder 61rem laat elke
   inleiding zijn maat dus los en volgt hij de band.
   Staat onderaan het blad met opzet: dezelfde selectoren als hierboven, dus
   bij gelijke specificiteit beslist de volgorde. */
@media (max-width:61rem){
  .lead,.tussen{max-width:none}
  .hero.diep .lead{max-width:none}
  .phead .lead{max-width:none}
  section:not(.hero):not(.phead) > .wrap > .lead,
  section:not(.hero):not(.phead) > .wrap > .tussen{max-width:none}
}

/* ── aanraakdoelen, helemaal onderaan met opzet ──────────────────── */
/* Een doel van 26 hoog is met een vinger niet zeker te raken. Dit staat als
   laatste in het blad omdat .video .afspelen verderop opnieuw wordt gezet
   en bij gelijke specificiteit de volgorde beslist. Twee media queries,
   want ze vangen twee gevallen: alles onder 61rem is in de praktijk een
   tablet of telefoon, en pointer:coarse vangt het grote aanraakscherm. */
@media (max-width:61rem){
  .video .afspelen{padding:11px 18px}
  footer.bot .onder :is(a,button){padding-block:7px}
}
@media (pointer:coarse){
  .video .afspelen{padding:11px 18px}
  footer.bot .onder :is(a,button){padding-block:7px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}