/* Falcon Tilburg · huisstijl web · Vivimus Visual Arts
   Palet en type staan vast in :root. Eén schakelpunt voor het font (--font)
   zodra de Noka-licentie rond is. */

/* Figtree staat hier zelf gehost en komt niet meer van fonts.googleapis.com.
   Twee redenen. Ten eerste privacy: bij de Google-variant haalt de browser van
   elke bezoeker een css- en een fontbestand bij Google op, waarmee zijn ip-adres
   daar terechtkomt zonder dat hij daar iets voor doet. Dat is voor een
   Nederlandse site een avg-risico dat je met twee bestanden van 30 kB weghaalt.
   Ten tweede snelheid: de Google-route kost twee extra dns- en tls-verbindingen
   naar twee losse domeinen, en het font wordt pas ontdekt nadat die css binnen
   is. Nu staat het op hetzelfde domein en wordt het in de head gepreload.
   Dit is de variabele versie (400 tot 900 in één bestand), gesplitst in latin en
   latin-ext zoals Google hem ook uitlevert; latin-ext laadt alleen als er een
   teken uit dat bereik op de pagina staat. Licentie: SIL Open Font License 1.1,
   de volledige tekst staat naast de fonts in assets/figtree-OFL.txt. */
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --lucht:#F7E7B4;
  --kobalt:#2545C4;
  /* Twee roden, allebei uit Falcons eigen materiaal gemeten, met een vaste
     rolverdeling: het logorood draagt tekst, het signaalrood draagt vorm.
     Reden: op het oude --vermiljoen #E2512E haalt geen enkele tekstkleur de
     leesbaarheidsnorm; wit is daar het maximum en blijft op 3.85:1 steken.
     --rood is het exacte logorood, gemiddeld over 164.681 kernpixels in het
     woordmerk en 174.154 in het beeldmerk, allebei #A83130 met een spreiding
     onder de 2. Met cream meet het 5.42:1, met room 6.02:1, met wit 6.67:1.
     --signaal is het rood uit artboard 5 van de logo-ideeen (53% van het rood
     daar). Het vervangt #E2512E omdat het er op vier na hetzelfde uitziet maar
     wel in het klantmateriaal staat. Het draagt nooit tekst; met inkt erop
     meet het 4.52:1, dus donkere tekst mag er wel op als dat ooit nodig is. */
  --rood:#A83130;
  --signaal:#DE4E30;
  --geel:#EEB428;
  --inkt:#17151A;
  --room:#FBF3DC;
  --grijs:#3a3630;
  /* was #8a857c: dat haalde 2.98:1 op lucht en 3.31:1 op room, onder de norm
     voor de bronregels en de klant-taken die er juist in staan. Deze tint
     houdt hetzelfde warme grijs en meet 4.62:1 op lucht, 5.14:1 op room. */
  --zacht:#6b665e;
  --lijn:#e2d8bd;
  --font:'Figtree',system-ui,-apple-system,sans-serif;
  --gut:6vw;
  --ruim:clamp(104px,11vw,196px);
  --ruim-half:clamp(56px,6vw,104px);
  --navh:78px;
}

*{box-sizing:border-box; margin:0; padding:0}
/* De nav is sticky en 78px hoog; zonder scroll-padding landt elk anker (#hoofd van de
   skip-link, de sectie-id's op de home voor deeplinks) mét smooth scroll onder de balk. */
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--navh) + 20px)}
body{
  font-family:var(--font); color:var(--inkt); background:var(--lucht);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto is hier geen nette-code-gewoonte maar de reparatie van een echt defect.
   Elke img draagt width en height als attribuut, tegen layoutverschuiving tijdens het
   laden. Chrome vertaalt die twee naar presentatie-hints. Zet je daarna in css alleen
   een breedte, dan blijft de hoogte-hint gewoon staan en wordt het beeld uitgerekt;
   de aspect-ratio uit de attributen springt pas bij als één van beide auto is.
   Gemeten gevolg vóór deze regel: 75 vervormde beelden op 36 pagina-breedtecombinaties.
   Het voetlogo stond op 288 bij 243 waar het 288 bij 50 hoort, factor 4,86, en op een
   telefoon 200 bij 243 in plaats van 200 bij 35, factor 7. De valk rechtsonder stond op
   432 bij 573 in plaats van 432 bij 354, en op mobiel 200 bij 573 tegen 200 bij 164.
   Juist het merk stond dus overal vervormd. Op de pandpagina liep gevel-lijn.jpg tot
   factor 8,84. Niet weghalen. */
img{display:block; max-width:100%; height:auto}
a{color:inherit}
/* Tekstselectie in het palet in plaats van browserblauw. Twee standen omdat één kleur
   ergens onzichtbaar wordt: kobalt valt weg op de kobalt footer, dus daar geel op inkt. */
::selection{background:var(--kobalt); color:var(--lucht)}
footer ::selection, .zwart ::selection{background:var(--geel); color:var(--inkt)}
section{position:relative}
.wrap{padding-left:var(--gut); padding-right:var(--gut)}
.smal{max-width:1480px; margin:0 auto}

/* ===== typografie ===== */
h1,h2,h3{letter-spacing:-.022em}
h1{font-weight:900; font-size:clamp(2.6rem,6.4vw,6.4rem); line-height:.9}
h2{font-weight:900; font-size:clamp(2.1rem,4.6vw,4.2rem); line-height:.94}
h3{font-weight:900; font-size:clamp(1.35rem,2.1vw,2rem); line-height:1.04}
/* Kopmaat los van kopniveau. Een kaart in een overzichtspagina is inhoudelijk een
   sectie onder de h1 en hoort dus een h2 te zijn, maar mag niet als h2 ogen. Deze
   klasse geeft de h3-maat aan elk niveau, zodat de koppenboom klopt zonder dat het
   beeld verandert. Voorleessoftware las anders h1 gevolgd door h3. */
.kopklein{font-weight:900; font-size:clamp(1.35rem,2.1vw,2rem); line-height:1.04; letter-spacing:-.022em}
.accent{color:var(--rood)}
.kick{
  font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  font-size:12.5px; color:var(--kobalt); margin-bottom:18px;
}
.lead{font-size:clamp(17px,1.35vw,21px); line-height:1.58; color:var(--grijs); max-width:44ch}
p{font-size:16.5px; line-height:1.62; color:var(--grijs)}
.bron{font-size:12px; color:var(--zacht); line-height:1.5}
/* Regelval: balance verdeelt koppen over gelijke regels, pretty voorkomt een los woord
   als laatste regel. De wipe-koppen breken per span en merken er niets van; browsers
   zonder text-wrap slaan de regel gewoon over. */
h1,h2,h3,.kopklein{text-wrap:balance}
p,.lead{text-wrap:pretty}
/* Tijden en data staan in kolommen en pillen naast elkaar; tabellencijfers houden
   8.00 en 16.00 even breed zodat de reeksen uitlijnen. */
.agdatum,.agtel,.lijst .tag{font-variant-numeric:tabular-nums}

/* ===== scrolleffecten ===== */
.voortgang{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:60;
  background:var(--signaal); transform:scaleX(var(--p,0)); transform-origin:0 50%;
}
.rv{opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms)}
.rv.zichtbaar{opacity:1; transform:none}
/* gordijn-wipe voor koppen. De verticale inset is NEGATIEF (-.45em): op 0
   knipt de inset exact op de regeldoos en vallen bij de strakke regelafstanden
   de staarten van g en j eraf (Dauji 03-09, telefoonfoto; onze metingen misten
   dit omdat reduced-motion de clip-path uitzet). De wipe-klasse staat soms op
   de kop zelf en soms op een omhullende div, dus beide vormen worden
   geselecteerd; zonder display:block plakken de regels aan elkaar. */
.wipe > span,
.wipe > :is(h1,h2,h3,.devise) > span{
  display:block; clip-path:inset(-.45em 101% -.45em 0);
  transition:clip-path 1s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms);
}
.wipe :is(h1,h2,h3,.devise) > span > span{display:inline; clip-path:none}
.zichtbaar.wipe > span, .zichtbaar .wipe > span,
.zichtbaar.wipe > :is(h1,h2,h3,.devise) > span,
.zichtbaar .wipe > :is(h1,h2,h3,.devise) > span{clip-path:inset(-.45em -1% -.45em 0)}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1; transform:none; transition:none}
  .wipe > span, .wipe > :is(h1,h2,h3,.devise) > span{clip-path:none; transition:none}
  html{scroll-behavior:auto}
  .voortgang{display:none}
}

/* ===== nav ===== */
/* Zwevende pil (Dauji 03-09): de balk hangt los van de randen en is rond,
   80vw breed en gecentreerd (10vw inzet per kant). --navh (78px) blijft de
   bezette topruimte: 14px lucht plus 64px balk, dus alle offsets
   (paginakoppen, scroll-padding, sticky) blijven kloppen. De balk draagt
   overal zijn eigen grond; een zwevend element zonder ondergrond leest als
   los zand op de hero. */
.nav{
  position:fixed; top:14px; left:10vw; right:10vw; z-index:50; height:calc(var(--navh) - 14px);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px 0 26px;
  background:rgba(247,231,180,.985);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(23,21,26,.16); border-radius:999px;
  box-shadow:0 10px 30px rgba(23,21,26,.08);
  transition:box-shadow .45s ease;
}
/* .985 en niet .94. Op .94 schoof de kop "Piushaven staat open" als leesbare schim
   onder de balk door, precies naast het woordmerk, en dat leest als een tweede
   logo in plaats van als glas. Gemeten oorzaak: de balk is fixed met blur(10px) en
   de h2 eronder is 632px breed, dus hij vult de hele zone links. Op .985 blijft de
   blur zichtbaar als diepte maar is de schim weg. */
.nav.vast{box-shadow:0 16px 36px rgba(23,21,26,.16)}
/* Het merk staat vanaf de eerste pixel in de balk, ook op de home. De oude
   verschijn-op-scroll liet de bovenkant van de homepage zonder logo achter. */
/* Het woordmerk is 19px hoog op mobiel, dus het raakvlak van de home-link mat
   109 bij 19 en zakte onder de 24x24 die WCAG 2.2 vraagt. De balk is 78px hoog en
   centreert zijn kinderen, dus verticale padding vergroot alleen het raakvlak:
   de letters zelf blijven op dezelfde hoogte staan. 19 plus 2 maal 13 is 45. */
.nav .brand{display:flex; align-items:center; gap:13px; text-decoration:none; padding:13px 0}
/* Eén merk in de balk. Het beeldmerk stond ernaast en het hero-merkteken stond er
   vlak onder: drie keer hetzelfde logo binnen honderd pixels. Het woordmerk draagt
   de naam en staat al in logorood #A83130, dus dat is de enige die blijft. */
/* Het woordmerk in de balk naar inkt (Dauji 03-09, "kleur mag anders"): in de
   zwevende pil naast de kobalt-knop las het logorood als derde kleurstem, en
   inkt sluit aan op de geschilderde FALCON-belettering op het gevelsilhouet.
   In de footer blijft het woordmerk wit (eigen filter daar), het beeldbestand
   zelf blijft het rode origineel. */
.nav .brand .woord{height:clamp(19px,1.7vw,25px); width:auto; transform:translateY(1px);
  filter:brightness(0); opacity:.92}
.nav .links{display:flex; gap:34px; font-weight:600; font-size:15px; align-items:center}
.nav .links a{text-decoration:none; position:relative; padding:4px 0}
.nav .links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--kobalt); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nav .links a:hover::after, .nav .links a[aria-current="page"]::after{transform:scaleX(1)}
.nav .links a[aria-current="page"]{color:var(--kobalt)}
.nav .cta{background:var(--kobalt); color:var(--lucht); font-weight:700; font-size:14px; padding:12px 22px; border-radius:100px; text-decoration:none; transition:background .3s ease}
.nav .cta:hover{background:var(--rood)}

/* mobiel menu: de linkrij verdwijnt onder 820px, dus daar neemt deze knop het over.
   Zonder dit is er op een telefoon geen route naar de subpagina's. */
.menuknop{display:none; width:44px; height:44px; padding:11px 8px; margin-right:-8px;
  background:none; border:0; cursor:pointer; flex-direction:column; justify-content:space-between}
.menuknop i{display:block; height:2px; background:var(--inkt); transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .2s ease}
body.menu-open .menuknop i:nth-child(1){transform:translateY(10px) rotate(45deg)}
body.menu-open .menuknop i:nth-child(2){opacity:0}
body.menu-open .menuknop i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
/* Open staat (Dauji 03-09, telefoonfoto): het paneel stond als plat vlak met
   een losse lijn tegen de pil aan en de pil viel weg tegen dezelfde kleur.
   Nu: het paneel dekt het hele venster (achter de pil, z 49 onder 50), de pil
   kleurt room zodat hij als pil op het lucht-paneel blijft liggen, en het
   paneel fade-t binnen in plaats van hard aan/uit te klappen. */
body.menu-open .nav{background:var(--room)}
.mobmenu{
  position:fixed; inset:0; z-index:49; background:var(--lucht);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  /* titels op de --gut-contentlijn: sinds de pil 21px naar buiten staat, valt
     het woordmerk óók op die lijn, dus alles (logo, titels, knop, bodytekst)
     deelt één linkerlijn (Dauji 04-09, blauwe lijnen op de screenshots) */
  padding:calc(var(--navh) + 10px) var(--gut) 10vh var(--gut);
  opacity:1; transition:opacity .28s ease, visibility 0s linear 0s;
}
/* geen display:none meer: anders valt er niets te faden. hidden blijft het
   schakelpunt voor de js en houdt het paneel onklikbaar en onzichtbaar. */
.mobmenu[hidden]{display:flex; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .22s}
@media (prefers-reduced-motion: reduce){
  .mobmenu, .mobmenu[hidden]{transition:none}
}
/* De paginatitels in hetzelfde formaat als het woordmerk (Dauji 03-09): het
   logo is 19px kapitaalhoogte, en 26px Figtree in kapitalen heeft dezelfde
   optische hoogte (kapitaal is ~72% van de letterrompmaat). Geen schreeuwende
   posterletters meer in het paneel: het menu leest als een rij woordmerken.
   De padding houdt elk raakvlak boven de 44px die WCAG vraagt (26 + 2x10 = 46). */
.mobmenu a{font-family:var(--font); font-weight:900; font-size:26px; text-transform:uppercase;
  line-height:1; letter-spacing:.02em; text-decoration:none; color:var(--inkt); padding:10px 0}
.mobmenu a[aria-current="page"]{color:var(--kobalt)}
/* de padding van .knop staat hier expliciet, anders wint de regel van .mobmenu a
   en zit de tekst strak tegen de rand van de pil */
.mobmenu a.knop{align-self:flex-start; margin-top:26px; padding:16px 28px;
  font-size:15px; letter-spacing:0; line-height:1; text-transform:none; color:var(--lucht)}
body.menu-open{overflow:hidden}

/* ===== home hero =====
   De brede illustratie (gebouw-breed.jpg, 3852x1536, ratio 2.508) is links met
   1100px lege lucht verlengd. Gemeten in dat bestand: het gebouw begint pas op
   ~37,6% van de breedte en de grondlijn in dat lege deel loopt van 78,3% hoogte
   (bij x=1100) naar 81,4% (bij x=0). Daarom is de linkerkolom tot 37vw breed en
   tot ruim 80% van de beeldhoogte gegarandeerd vrij: daar staat de copy, en die
   raakt het blauw dus nooit. De illustratie zelf is niet aangeraakt.
   min-height houdt de hero altijd minstens zo hoog als het beeld (39,9vw), zodat
   een breed-en-laag venster de zon en de toren niet afknipt. */
.hero{background:var(--lucht); min-height:max(100vh,44vw); overflow:hidden;
  display:flex; align-items:center; padding-top:var(--navh)}
.hero .beeld{position:absolute; left:0; right:0; bottom:0; will-change:transform}
.hero .beeld img{width:100%; height:auto}
.hero .copy{position:relative; z-index:10; width:100%;
  padding:0 var(--gut) clamp(60px,13vh,160px); max-width:calc(37vw + var(--gut)); will-change:transform}
.hero h1{font-size:clamp(2.3rem,3.9vw,4.6rem); max-width:12ch; margin-bottom:20px}
.hero .lead{max-width:34ch}
.acties{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,40px)}
.hero .pijl{position:absolute; left:var(--gut); bottom:36px; z-index:11; font-weight:700; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--kobalt); display:flex; align-items:center; gap:10px}
.hero .pijl b{display:block; width:1px; height:40px; background:var(--kobalt); animation:zak 1.9s ease-in-out infinite}
@keyframes zak{0%,100%{transform:scaleY(.4); transform-origin:0 0}50%{transform:scaleY(1); transform-origin:0 0}}
@media (prefers-reduced-motion: reduce){
  .hero .pijl b{animation:none}
}

/* ===== paginakop (subpagina's) ===== */
/* De onderrand draagt sinds de Romeo-ronde de daklijn plus de halve zon; de
   ondermarge is de hoogte van die tekening plus de oude ademruimte, zodat de
   lijn nooit door de laatste tekstregel loopt. */
/* Ruimer dan voorheen (fix 1+2, meetronde 02-09): de home-hero is een vol
   venster met het pand onderin en lucht erboven; de paginakoppen waren platte
   blokken van 604-832px zonder beeld. De bodempadding maakt nu plaats voor de
   gevel-lijntekening plus lucht erboven, en de gekleurde koppen halen daarmee
   ook het vol-venster kleurmoment (band van minstens ~650px) dat home per
   drie vensters heeft. --sil is de kleur van de sectie die onder de kop volgt
   (Dauji 03-09): het gevelsilhouet vult zich daarmee, zodat de gevel de
   overgang naar die sectie is en de zon er zichtbaar achter zakt. Onder elke
   subpaginakop volgt een room-band (marquee of eerste blok), dus --sil staat
   op room; de lichte koppen dragen daarom lucht als grond, anders valt het
   silhouet weg tegen de eigen achtergrond. */
.pkop{padding:calc(var(--navh) + clamp(70px,8vw,130px)) 0 clamp(190px,23vw,330px); overflow:hidden; --sil:var(--room)}
.pkop.blauw{background:var(--kobalt); color:var(--lucht)}
.pkop.rood{background:var(--rood); color:var(--lucht)}
.pkop.geel{background:var(--geel); color:var(--inkt)}
.pkop.zwart{background:var(--inkt); color:var(--lucht)}
.pkop.licht{background:var(--lucht); color:var(--inkt)}
/* nieuws draagt deze klasse in de markup; zelfde grond als .licht, zodat het
   room-silhouet zich ook daar aftekent */
.pkop.room{background:var(--lucht); color:var(--inkt)}
/* De typografische uitschieter (fix 3, meetronde 02-09): home piekt op 7.4vw
   (devise en stappenverhaal, 107px op 1440), de subpagina's bleven op de
   basis-h1 van 6.4vw hangen. De paginakop-h1 staat nu op dezelfde piekmaat. */
.pkop h1{font-size:clamp(2.6rem,7.4vw,7.4rem)}
/* ONDERGRENS .9 OP TEKST-OPACITY, sitebreed.
   Doorzichtigheid was hier het hiërarchiemiddel voor kleine labels: kicks, tags,
   nummers, kruimelpaden, de footerkopjes. Op een lichte achtergrond kan dat, op een
   verzadigde niet, en dat is precies waar deze labels staan. Een gewone
   contrastcontrole ziet het niet, want die vergelijkt de css-kleur met de
   achtergrond; de bezoeker ziet de mengkleur. Gemeten voorbeeld: lucht op rood haalt
   vol 5.42:1, maar op opacity .72 blijft er 3.54:1 over, en op kobalt 3.97:1. Dat is
   onder AA voor tekst van 12,5px.
   Daarom staat elke tekstdragende opacity nu op minimaal .9. Op rood geeft dat
   4.68:1 en op kobalt 5.36:1, allebei boven de norm. De hiërarchie zit toch al in
   grootte, gewicht en letterspatiëring; die blijven onaangeroerd, dus het verschil
   is subtiel en de leesbaarheid wint. Vlakken en beeld (de zon, de valk) houden hun
   eigen waarden, dat is geen tekst. */
.pkop .kick{color:inherit; opacity:.9}
.pkop .lead{color:inherit; opacity:.9; margin-top:26px}
.pkop .vorm{position:absolute; pointer-events:none}
/* Romeo-ronde 26-08: de zon lag als losse gele bal boven de kop ("bal op het dak").
   Nu volgt hij de compositie van de home-hero: de schijf zakt achter de daklijn
   aan de onderrand van de kop, dus de architectuur draagt hem in plaats van dat
   hij zweeft. De onderste helft valt weg in de overflow van de sectie. */
/* De zon staat niet meer op de sectiebodem maar op de daklijn van de getekende
   gevel (silhouet-top rond y44/220 van de svg-hoogte 15.3vw): de helft steekt
   boven het dak uit, de onderste helft valt weg achter het gevulde silhouet.
   Dat is de compositie van de home-illustratie. */
.pkop .zon{right:17vw; top:auto; bottom:12.5vw; transform:translateY(50%); z-index:0;
  width:clamp(180px,24vw,420px); aspect-ratio:1; border-radius:50%; background:var(--geel); opacity:.92}
.pkop.geel .zon{background:var(--signaal)}
.pkop .balk{right:8vw; bottom:-40px; width:clamp(120px,14vw,240px); height:clamp(120px,14vw,240px); background:var(--signaal)}
/* De gevel als gevuld silhouet op de onderrand van elke paginakop (Dauji
   03-09, opvolger van de lijntekening uit fix 1). Het vlak (path.dek) draagt
   de kleur van de sectie eronder (--sil) en loopt tot de sectiebodem door,
   dus de kop gaat zonder naad in die band over. Alleen de FALCON-belettering
   blijft op het gevelvlak staan, in inkt, als geschilderde letters
   (moodboard-pin: alleen de belettering vet). */
.pkop .gevel{position:absolute; left:0; right:0; bottom:-2px; width:100%; height:auto;
  z-index:1; pointer-events:none}
.pkop .gevel .dek{fill:var(--sil)}
/* Fragment-crops (fix 1): de detailpagina's tonen niet de hele gevel maar een
   uitsnede van de tekening, zodat niet elke kop dezelfde prent draagt. Makers
   zoomen in op de sheddak-tanden, artikelen op het gevelvlak met de
   belettering; vector-effect houdt de lijnen ook vergroot op 1.5px en de
   overflow-clip van de sectie vangt wat buiten het venster valt. */
.pkop.gzoom-shed{padding-bottom:30vw} /* opgezoomde sheds reiken hoger; kopij erboven houden */
.pkop.gzoom-shed .gevel{transform:scale(2.2); transform-origin:30% 100%}
.pkop.gzoom-shed .zon{bottom:20vw}
.pkop.gzoom-vlak .gevel{transform:scale(2); transform-origin:84% 100%}
.pkop.gzoom-vlak .zon{bottom:21vw; right:10vw}
.pkop .binnen{position:relative; z-index:2}
.kruimel{font-size:13px; font-weight:600; opacity:.9; margin-bottom:22px}
.kruimel a{text-decoration:none}
.kruimel a:hover{text-decoration:underline}

/* ===== marquee ===== */
/* Op home is het rood exclusief voor het citaatvlak en dragen de jaartallen het
   kobalt (AD-voorstel 4, 02-09). De marquee is de derde stem en zakt daarom terug
   naar een rustige baan op room met haarlijnen; geen volvlak kleur meer. */
.marquee{background:var(--room); color:var(--inkt); padding:20px 0; white-space:nowrap; overflow:hidden;
  border-top:1.5px solid var(--lijn); border-bottom:1.5px solid var(--lijn)}
.marquee .baan{display:inline-block; font-weight:800; font-size:clamp(1rem,1.5vw,1.3rem); letter-spacing:.06em; text-transform:uppercase; will-change:transform}
.marquee span{margin:0 28px}
.marquee .ster{color:var(--kobalt)}

/* ===== blokken ===== */
.blok{padding:var(--ruim) 0}
.blok.room{background:var(--room)}
.blok.lucht{background:var(--lucht)}
.blok.zwart{background:var(--inkt); color:var(--lucht)}
.blok.zwart h2{color:var(--lucht)}
.blok.zwart p{color:#b9b2a4}
/* Een gekleurde kaart in een zwarte sectie houdt zijn eigen tekstkleur. Zonder
   dit erft de alinea het gedempte grijs dat voor zwart bedoeld is; op vermiljoen
   komt dat uit op 1.83:1 en op kobalt op 3.65:1, allebei onleesbaar. */
.blok.zwart .mk p, .blok.zwart .kaart p{color:inherit}
.blok.zwart .kick{color:var(--geel)}
.kop2{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(40px,6vw,90px); align-items:end; margin-bottom:clamp(48px,6vw,86px)}

/* ===== makerkaarten ===== */
.raster{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.4vw,22px)}
/* twee kolommen als klasse en niet als inline style. Een inline
   grid-template-columns wint van elke media query, waardoor de twee
   uitgangspunt-kaarten op de pandpagina ook op een telefoon naast elkaar bleven
   staan: 98px breed, dertien tekens per regel, kop over de schermrand heen. Als
   klasse kan de regel onder 1000px wel worden teruggezet. */
.raster.twee{grid-template-columns:repeat(2,1fr)}
.mk{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(300px,25vw,400px); padding:30px 28px 26px; text-decoration:none; overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.mk:hover{transform:translateY(-8px)}
.mk .tag{font-weight:700; font-size:12px; letter-spacing:.11em; text-transform:uppercase; opacity:.9; margin-bottom:12px}
.mk :is(h2,h3){margin-bottom:12px}
.mk p{font-size:15.5px; line-height:1.52; color:inherit; opacity:.9; max-width:32ch}
.mk .lees{margin-top:22px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:9px}
.mk .lees i{display:block; width:20px; height:1.5px; background:currentColor; transition:width .4s cubic-bezier(.16,1,.3,1)}
.mk:hover .lees i{width:38px}
.mk.blauw{background:var(--kobalt); color:var(--lucht)}
.mk.rood{background:var(--rood); color:var(--lucht)}
.mk.geel{background:var(--geel); color:var(--inkt)}
.mk.zwart{background:var(--inkt); color:var(--lucht)}
.mk.room{background:var(--room); color:var(--inkt); outline:1.5px solid var(--lijn); outline-offset:-1.5px}
/* de hoogte van een makerkaart houdt ruimte vrij voor de foto die er nog komt.
   Een kaart die alleen tekst draagt heeft die ruimte niet nodig en krijgt hem niet. */
.mk.tekst{min-height:0; gap:34px}
/* de makerfoto vult die vrijgehouden ruimte: van rand tot rand boven het tekstblok.
   Kaarten zonder eigen beeld blijven een kleurvlak; daar wordt niets geleend of
   opgevuld. De hover schaalt binnen de kaart (overflow:hidden). Zwartwit is
   beeldwet N07: makers en pand monochroom, nooit kleur en zwartwit in een reeks. */
.mk .mkfoto{display:block; flex:1 1 0; min-height:120px; width:calc(100% + 56px);
  max-width:none; margin:18px -28px 22px; object-fit:cover; filter:grayscale(1);
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.mk:hover .mkfoto{transform:scale(1.04)}

/* ===== tijdlijn ===== */
.tijdlijn{border-left:3px solid var(--inkt)}
.tl{position:relative; padding:26px 0 26px 38px; border-bottom:1px solid var(--lijn)}
.tl:last-child{border-bottom:none}
.tl::before{content:""; position:absolute; left:-9px; top:34px; width:15px; height:15px; background:var(--signaal)}
.tl:nth-child(2)::before{background:var(--kobalt); border-radius:50%}
.tl:nth-child(3)::before{background:var(--geel)}
.tl:nth-child(4)::before{background:var(--inkt); border-radius:50%}
.tl:nth-child(5)::before{background:var(--signaal); border-radius:50%}
.tl .jaar{font-weight:900; font-size:clamp(26px,2.4vw,34px); letter-spacing:-.02em}
.tl p{margin-top:5px; max-width:44ch}

/* ===== plattegrond =====
   Het pand als lijntekening met kleurvlakken erin: twee bouwdelen met de overdekte
   binnenstraat ertussen, en per unit een blok in de kleur van die maker. De
   tekstkleur staat per vlak vast omdat cream op geel 1.9:1 meet en inkt op kobalt
   2.4:1; erven van de sectiekleur zou hier dus stilletjes onleesbaar worden. */
.pgrond{border:2px solid var(--inkt); background:var(--room); padding:clamp(13px,1.5vw,20px);
  display:grid; gap:clamp(9px,1vw,13px)}
.pg-deel{font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--grijs)}
.pg-rij{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(9px,1vw,13px)}
.pg-unit{position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:clamp(112px,11vw,158px); padding:13px 14px 12px; text-decoration:none;
  border:1.5px solid var(--inkt); transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pg-unit:hover{transform:translateY(-3px)}
/* stond op .75: cream op logorood zakt daarmee onder 4.5:1 en dit is 12px vet */
.pg-unit b{font-weight:900; font-size:12px; letter-spacing:.08em; opacity:.9}
.pg-unit span{font-weight:900; font-size:clamp(.95rem,1.15vw,1.15rem); line-height:1.1; margin-top:auto; letter-spacing:-.014em}
.pg-unit i{font-style:normal; font-weight:700; font-size:11px; letter-spacing:.11em; text-transform:uppercase; opacity:.9; margin-top:6px}
.pg-unit.geel{background:var(--geel); color:var(--inkt)}
.pg-unit.rood{background:var(--rood); color:var(--lucht)}
.pg-unit.blauw{background:var(--kobalt); color:var(--lucht)}
.pg-unit.zwart{background:var(--inkt); color:var(--lucht)}
/* Buurtcontext (havenmeester), geen maker: leeg vlak met stippellijn, geen kleur,
   geen hover-lift, zodat het zichtbaar geen aanklikbare unit is maar wel meetelt in
   het schema. */
.pg-unit.context{background:transparent; color:var(--grijs); border-style:dashed;
  border-color:var(--lijn)}
.pg-unit.context:hover{transform:none}
/* de binnenstraat is een gang, geen unit: geen vlak maar een baan met arcering */
.pg-straat{display:flex; align-items:center; justify-content:center; min-height:44px;
  border-top:1.5px solid var(--inkt); border-bottom:1.5px solid var(--inkt);
  background:repeating-linear-gradient(-45deg, transparent 0 7px, rgba(23,21,26,.09) 7px 8px)}
.pg-straat span{font-weight:800; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--grijs); background:var(--room); padding:3px 12px}
.pg-ingang{display:flex; align-items:center; gap:10px; justify-content:center;
  font-weight:800; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--grijs)}
.pg-ingang i{display:block; width:34px; height:3px; background:var(--rood)}

/* ===== quote ===== */
.citaat{background:var(--rood); color:var(--lucht); padding:var(--ruim) 0; overflow:hidden}
.citaat .zon{position:absolute; right:-90px; top:-90px; width:clamp(220px,24vw,340px); aspect-ratio:1; border-radius:50%; background:var(--geel); opacity:.92}
/* De home-zon is een svg-cirkel in plaats van een div: scherp op elke schaal en
   klaar om als vorm dienst te doen wanneer het geel het venster vult. Solide geel
   (niet .92) zodat het gegroeide veld naadloos aansluit op het gele voorblad waarin
   de makers verschijnen. De losse citaat-zon elders blijft een div en houdt .92. */
.citaat svg.zon{background:none; display:block}
.citaat svg.zon circle{fill:var(--geel)}
.citaat.vol svg.zon{opacity:1}
.citaat .devise{font-weight:900; font-size:clamp(2rem,5vw,4.4rem); line-height:1.02; letter-spacing:-.024em; max-width:17ch; position:relative; z-index:2}
.citaat cite{display:block; margin-top:30px; font-style:normal; font-weight:600; font-size:15px; opacity:.9; position:relative; z-index:2}

/* volle-schermvariant: de sectie neemt precies één venster en de snap-scroll uit
   falcon.js legt hem er in één beweging op. De zon komt uit het niets omhoog. */
.citaat.vol{min-height:100vh; padding:calc(var(--navh) + 40px) 0 40px;
  display:flex; align-items:center; position:relative}
.citaat.vol .binnen{width:100%; position:relative; z-index:2}
.citaat.vol .zon{right:-8vw; top:auto; bottom:-14vw; width:clamp(300px,42vw,720px);
  transform:scale(.55) translateY(24%); opacity:0;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1), opacity .9s ease}
.citaat.vol.aan .zon{transform:none; opacity:.92}
/* Overgang naar de volgende sectie: de zon groeit mee met de scroll en loopt het
   rode vlak uit. Zodra hij groeit gaat de transition eraf, anders loopt de cirkel
   ruim een seconde achter de vinger aan. De inhoud vervaagt in de eerste helft:
   cream op geel meet 1.9:1, dus meegroeien zonder fade maakt de tekst onleesbaar. */
.citaat.vol.aan .zon{will-change:transform}
/* Scroll-groei (.uit): NIET meer transform:scale. Een op rustgrootte gerasterde laag
   (ook een svg) die tot ~30x wordt opgeschaald houdt onvermijdelijk de pixelrand die
   Dauji zag; will-change eraf haalde dat niet weg, want de browser hertekent een
   getransformeerde svg niet per frame maar rekt de gecachete raster. Daarom groeit de
   zon nu als een cirkel-CLIP op een egaal geel vlak: clip-path wordt elke frame opnieuw
   scherp geknipt, dus scherp op elke maat, en clip-path-animatie loopt soepeler mee met
   de scroll dan een opgeschaalde compositorlaag. De cirkel start exact op de rustzon
   (--r = ruststraal, --cx/--cy = hart, door de js gemeten) zodat de overgang naadloos
   uit de binnenkomst doorloopt. (Romeo/26-08: "gele cirkel mag smoother en blijft
   pixelig".) */
/* width/height expliciet op 100%, niet auto: de zon is een svg met een vierkante
   viewBox, en een absoluut geplaatste svg met inset:0 en auto-maten lost op naar
   een VIERKANT van schermbreedte in plaats van de hele sectie. Op desktop
   (1440x1440 > venster) viel dat nooit op; op een telefoon van 390 stopte het
   geel op 390px hoogte en was de rest van het scherm rode sectie-achtergrond
   (Dauji's kapotte-animatie-screenshots 04-09). */
.citaat.vol.uit .zon{
  position:absolute; inset:0; width:100%; height:100%;
  transform:none; transform-origin:center; will-change:auto; transition:none;
  opacity:1; background:var(--geel); border-radius:0;
  -webkit-clip-path:circle(var(--r,0px) at var(--cx,50%) var(--cy,50%));
  clip-path:circle(var(--r,0px) at var(--cx,50%) var(--cy,50%))}
.citaat.vol.uit .binnen{opacity:var(--vaag,1)}
.citaat.vol .devise{font-size:clamp(2.4rem,7.4vw,7.4rem); max-width:14ch; line-height:.96}
/* zelfde negatieve verticale inset als bij .wipe: op 0 sneed de clip de
   staart van de g in "vermenigvuldigen." af (regelafstand .96) */
.citaat.vol .devise > span{display:block; clip-path:inset(-.45em 101% -.45em 0);
  transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.citaat.vol .devise > span:nth-child(2){transition-delay:.14s}
.citaat.vol.aan .devise > span{clip-path:inset(-.45em -1% -.45em 0)}
.citaat.vol .kick{color:var(--lucht); opacity:.9}
.citaat.vol .onder{color:var(--lucht); opacity:.9; max-width:46ch; font-size:clamp(16px,1.3vw,20px);
  line-height:1.6; margin-top:clamp(26px,3vw,40px);
  opacity:0; transform:translateY(20px); transition:opacity .8s ease .3s, transform .8s cubic-bezier(.16,1,.3,1) .3s}
.citaat.vol.aan .onder{opacity:.9; transform:none}
.citaat.vol .knop{margin-top:clamp(28px,3vw,42px);
  opacity:0; transform:translateY(20px); transition:opacity .8s ease .44s, transform .8s cubic-bezier(.16,1,.3,1) .44s}
.citaat.vol.aan .knop{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .citaat.vol .zon, .citaat.vol .onder, .citaat.vol .knop{opacity:.92; transform:none; transition:none}
  /* Geen groei bij reduced-motion: de zon blijft de kleine rustcirkel rechtsonder,
     niet het volle gele vlak. Anders staat er egaal geel achter cream-tekst (1.9:1)
     en wordt de kop onleesbaar. De clip-path/inset uit de .uit-regel hier terugdraaien. */
  .citaat.vol.uit .zon{position:absolute; inset:auto; right:-8vw; bottom:-14vw; top:auto; left:auto;
    width:clamp(300px,42vw,720px); height:auto; background:var(--geel);
    border-radius:50%; -webkit-clip-path:none; clip-path:none; transform:none; opacity:.92}
  .citaat.vol.uit .binnen{opacity:1}
  .citaat.vol .onder{opacity:.9}
  .citaat.vol .devise > span{clip-path:none; transition:none}
}

/* ===== volle-pagina-overgang naar de makers =====
   Het omhulsel is twee vensters hoog, de stage plakt aan de bovenrand. Daardoor
   staat de pagina een venster lang stil terwijl de overgang speelt: eerst vervaagt
   de tekst, dan groeit de zon tot hij het rode vlak vult, en pas als hij vol staat
   komt de volgende sectie omhoog en neemt de nieuwe kleur het beeld over.

   De sectie die omhoog komt is de echte volgende sectie. Een nagemaakt kleurvlak
   zou hier makkelijker zijn, maar dan zie je aan het eind van de overgang eerst
   een leeg vlak en daarna alsnog de echte sectie binnenschuiven, en dat leest als
   twee keer hetzelfde. Nu is het één beweging: falcon.js zet een negatieve marge
   van precies één venster op die sectie zodat hij de stage overlapt, en stuurt
   hem met transform, zodat de zon en de sectie elkaar niet in de weg zitten.

   Alle maten staan in javascript en niet hier, want ze hangen aan de vensterhoogte
   en moeten bij een resize opnieuw. Zonder javascript, met beweging uit of onder
   820px valt dit blok terug op een gewone sectie van één venster hoog: het
   omhulsel krijgt dan geen hoogte, dus de stage heeft geen reisweg en plakt nergens
   aan vast. */
.overgang{position:relative; z-index:1; background:var(--rood)}
.opkomend{position:relative; z-index:2; will-change:transform}
/* Het gele voorblad waarin de makers omhoog komen. falcon.js zet --veld op 1 zolang
   de sectie het gegroeide geel nog niet vult en laat het naar 0 lopen zodra ze het
   beeld overneemt; daaronder komt de eigen luchtkleur vandaan. Zo staat er nooit een
   leeg geel venster tussen de zon en de makers. Zonder javascript blijft --veld 0. */
.opkomend::before{content:''; position:absolute; inset:0; background:var(--geel);
  opacity:var(--veld,0); z-index:0; pointer-events:none}
.opkomend > .wrap{position:relative; z-index:1}
/* Dit stond in een min-width:821px-query, waardoor de hele overgang op een telefoon
   wegviel en er alleen een rood vlak overbleef. Er zit niets muisafhankelijks in:
   de stage plakt vast en de scroll is de partituur, en een veeg scrollt net zo goed
   als een wiel. De maten komen uit javascript en hangen aan de vensterhoogte, dus
   ze kloppen op elke breedte. Alleen zonder javascript of met beweging uit valt dit
   terug op een gewone sectie van één venster hoog, want dan krijgt het omhulsel geen
   hoogte en heeft de stage geen reisweg. */
.overgang .stage{position:sticky; top:0; height:100vh; overflow:clip}
.overgang .citaat.vol{height:100%; min-height:0}

/* ===== scrollverhaal (van regenjas naar maker) =====
   De linkerkolom blijft staan terwijl je scrollt; per scrollstap licht één jaar op.
   De sectie is daarom zo hoog als het aantal stappen; .stage plakt eraan vast. */
.stappenverhaal{background:var(--room); position:relative}
.stappenverhaal .stage{position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden}
.stappenverhaal .binnen{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,6vw,110px);
  align-items:center; width:100%}
.stappenverhaal .zijde .lead{margin-top:26px; max-width:36ch}
.stappenverhaal .railrij{display:flex; align-items:center; gap:clamp(16px,1.6vw,26px);
  margin:clamp(28px,3vw,42px) 0 clamp(26px,3vw,38px)}
.stappenverhaal .rail{display:flex; gap:8px}
.stappenverhaal .rail b{display:block; width:38px; height:3px; background:var(--lijn); position:relative; overflow:hidden}
.stappenverhaal .rail b::after{content:""; position:absolute; inset:0; background:var(--signaal);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s cubic-bezier(.16,1,.3,1)}
.stappenverhaal .rail b.aan::after{transform:scaleX(1)}
.stappenverhaal .teller{font-weight:800; font-size:13px; letter-spacing:.14em; color:var(--grijs)}
.stappenverhaal .teller b{font-size:13px; color:var(--rood)}
/* De rechterkolom is bijna een heel venster hoog terwijl er één stap in staat.
   Dat gat krijgt een taak: het spoor loopt van boven naar beneden mee met de
   scrollvoortgang, zodat de leegte de voortgang draagt in plaats van hem te tonen. */
.stappenverhaal .rechts{display:grid; grid-template-columns:3px 1fr;
  gap:clamp(24px,2.4vw,38px); align-items:stretch; min-height:clamp(340px,50vh,560px)}
.stappenverhaal .spoor{background:var(--lijn); position:relative}
.stappenverhaal .spoor i{position:absolute; left:0; right:0; top:0; height:100%;
  background:var(--signaal); transform:scaleY(var(--p,0)); transform-origin:50% 0}
.stappenverhaal .stappen{list-style:none; position:relative}
.stappenverhaal .stap{position:absolute; inset:0; opacity:0; transform:translateY(38px);
  transition:opacity .55s ease, transform .65s cubic-bezier(.16,1,.3,1); pointer-events:none}
.stappenverhaal .stap.aan{opacity:1; transform:none; pointer-events:auto}
.stappenverhaal .stap.weg{opacity:0; transform:translateY(-38px)}
/* jaartallen in kobalt, niet in rood: het rood is op home van het citaatvlak
   (AD-voorstel 4); twee rode schreeuwers boven elkaar vochten om de aandacht. */
.stappenverhaal .stap .jaar{font-weight:900; font-size:clamp(52px,7.4vw,116px); line-height:.86;
  letter-spacing:-.03em; color:var(--kobalt); margin-bottom:18px}
.stappenverhaal .stap :is(h2,h3){margin-bottom:12px}
.stappenverhaal .stap p{max-width:42ch; font-size:17px}
/* Scroll-aanwijzer onderin de tijdlijn-stage (klantvraag 31-08): het verhaal plakt
   een paar vensters vast en zonder aanwijzer leest dat als het einde van de pagina.
   Zelfde plek en typografie als de hero-pijl, maar met een echte pijlpunt eronder;
   de klant vroeg expliciet om meer dan alleen de dunne lijn. */
.stappenverhaal .pijl{position:absolute; left:var(--gut); bottom:28px; z-index:11;
  font-weight:700; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--kobalt); display:flex; align-items:center; gap:10px}
.stappenverhaal .pijl b{display:block; width:1px; height:34px; background:var(--kobalt);
  position:relative; animation:wenk 1.9s ease-in-out infinite}
.stappenverhaal .pijl b::after{content:""; position:absolute; left:-4.5px; bottom:0;
  width:9px; height:9px; border-right:1.5px solid var(--kobalt);
  border-bottom:1.5px solid var(--kobalt); transform:rotate(45deg)}
@keyframes wenk{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media (prefers-reduced-motion: reduce){
  .stappenverhaal{height:auto !important}
  .stappenverhaal .pijl{display:none}
  .stappenverhaal .stage{position:static; height:auto; padding:var(--ruim) 0}
  .stappenverhaal .rechts{display:block; min-height:0}
  .stappenverhaal .spoor{display:none}
  .stappenverhaal .stappen{min-height:0; display:grid; gap:34px}
  .stappenverhaal .stap{position:static; opacity:1; transform:none; transition:none;
    border-left:3px solid var(--signaal); padding-left:24px}
  .stappenverhaal .railrij{display:none}
}

/* ===== agenda =====
   Twee kaarten naast elkaar lazen als nieuws, niet als agenda. Een agenda leest
   als een agenda door de datumkolom links en de regels onder elkaar met een lijn
   ertussen. De kolom draagt de weekdag, want alleen de herhaling heeft een bron;
   javascript zet de eerstvolgende datum er in de browser bij. */
.aglijst{display:grid; border-top:1.5px solid currentColor}
/* De herkomstregel krijgt een vaste smalle kolom in plaats van auto: met auto
   kroop hij tegen de rechterrand en bleef er een dood gat van ruim 400px tussen
   de tekst en de bron. Nu vult de middenkolom de ruimte. */
.agrij{display:grid; grid-template-columns:clamp(94px,10vw,132px) minmax(0,1fr) 200px;
  gap:clamp(16px,2vw,34px); align-items:start;
  padding:clamp(22px,2.4vw,34px) 0; border-bottom:1.5px solid currentColor}
.agdatum{align-self:stretch; display:flex; flex-direction:column; justify-content:flex-start;
  padding:14px 12px 12px; text-align:center; min-height:100%}
.agrij.rood .agdatum{background:var(--rood); color:var(--lucht)}
.agrij.blauw .agdatum{background:var(--kobalt); color:var(--lucht)}
.agrij.geel .agdatum{background:var(--geel); color:var(--inkt)}
.agrij.zwart .agdatum{background:var(--inkt); color:var(--lucht)}
.agdatum b{display:block; font-weight:900; font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:.92;
  letter-spacing:-.03em; text-transform:lowercase}
/* 11.5px en niet 10.5. De projectvloer van 13px geldt alleen onder 820, en daaronder
   tilt de media-query deze klasse ook op. Op desktop stonden drie labelklassen op
   10.5px kapitaal met .12em spatiering, en dat is precies de combinatie die dichtslibt.
   Gemeten op de gedeployde build, 18 paden maal 1440: agherh, agtag en verwijs .lbl
   waren de enige drie onder de 11px. */
.agdatum .agherh{display:block; margin-top:9px; font-weight:800; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; opacity:.9}
.agdatum .agnext{display:block; margin-top:8px; padding-top:8px; font-weight:800; font-size:12px;
  letter-spacing:.03em; border-top:1.5px solid currentColor}
.agdatum .agnext[hidden]{display:none}
.agrij :is(h2,h3){margin:0}
.aginhoud p{color:inherit; opacity:.88; font-size:15.5px; line-height:1.55; max-width:62ch; margin-top:10px}
.agbij{margin-top:14px; font-weight:700; font-size:14.5px; display:flex; align-items:center;
  gap:12px; flex-wrap:wrap}
.agbij a{text-decoration:underline; text-underline-offset:3px}
.agtag{font-weight:800; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  border:1.5px solid currentColor; padding:4px 9px; opacity:.8}
.agherkomst{font-size:11.5px; line-height:1.5; opacity:.72; text-align:right}
/* kopregel boven een groep, met de teller rechts zoals een agenda die telt */
.agkop{display:flex; align-items:center; gap:18px; margin-bottom:18px}
.agkop i{flex:1; height:1.5px; background:currentColor; opacity:.35}
.agkop .kick{margin:0}
.agtel{font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.7}
.agleeg{border:1.5px dashed currentColor; padding:clamp(20px,2.4vw,30px);
  font-size:15px; line-height:1.6; max-width:58ch; opacity:.78}

@media (max-width: 900px){
  /* de herkomstregel rechts knijpt de tekstkolom dood op smal; hij zakt naar onder */
  .agrij{grid-template-columns:clamp(84px,22vw,110px) 1fr}
  .agherkomst{grid-column:1 / -1; text-align:left; max-width:46ch}
}
@media (max-width: 620px){
  .agrij{grid-template-columns:1fr; gap:16px}
  .agdatum{flex-direction:row; align-items:baseline; gap:12px; text-align:left;
    padding:10px 14px; min-height:0}
  .agdatum b{font-size:1.6rem}
  .agdatum .agherh{margin-top:0}
  .agdatum .agnext{margin-top:0; padding-top:0; padding-left:12px; border-top:0;
    border-left:1.5px solid currentColor}
}

/* ===== nieuwskaarten ===== */
.artraster{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(14px,1.4vw,22px)}
/* Vier verhalen in drie kolommen laat er één alleen achter op een lege rij.
   Twee kolommen geeft een sluitend blok en grotere, leesbaarder kaarten. */
.artraster.groot{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
@media (min-width: 900px){ .artraster.groot{grid-template-columns:1fr 1fr} }
/* Romeo-ronde 26-08: de kale kleurkolom las als bonnetje. De kaart draagt nu
   dezelfde bouwdoos-vorm rechtsboven als de makerkaarten; dat was volgens
   dezelfde ronde expliciet de richting ("rondjes en vierkantjes"). */
.art{position:relative; padding:32px 30px 28px; text-decoration:none; display:flex; flex-direction:column; gap:13px;
  min-height:clamp(260px,22vw,340px); transition:transform .5s cubic-bezier(.16,1,.3,1)}
.art .vorm{position:absolute; top:26px; right:26px; opacity:.9}
.art:hover{transform:translateY(-8px)}
.art.blauw{background:var(--kobalt); color:var(--lucht)}
.art.rood{background:var(--rood); color:var(--lucht)}
.art.geel{background:var(--geel); color:var(--inkt)}
.art.zwart{background:var(--inkt); color:var(--lucht)}
.art .rubriek{font-weight:800; letter-spacing:.11em; text-transform:uppercase; font-size:11.5px; opacity:.9}
.art :is(h2,h3){margin:0; max-width:18ch}
.art p{color:inherit; opacity:.9; font-size:15.5px; line-height:1.55; max-width:38ch}
.art .lees{margin-top:auto; padding-top:16px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:9px}
.art .lees i{display:block; width:20px; height:1.5px; background:currentColor; transition:width .4s cubic-bezier(.16,1,.3,1)}
.art:hover .lees i{width:38px}

/* Nieuwsoverzicht redactioneel (AD-voorstel 5, 02-09): het eerste verhaal groot
   op een vlak, de rest als register met haarlijnen; vier gelijke gekleurde
   kaarten naast elkaar lazen als bouwpakket. */
/* Venstervullend (fix 2, meetronde 02-09): het eerste verhaal is de cover van
   het nieuwsoverzicht en draagt meteen het vol-venster kleurmoment dat de
   pagina miste; de inhoud zakt naar de voet zoals op een omslag. */
.artlead{position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:flex-start; min-height:min(76vh,720px);
  padding:clamp(34px,4.5vw,62px) clamp(28px,4vw,56px); text-decoration:none; transition:transform .5s cubic-bezier(.16,1,.3,1)}
.artlead:hover{transform:translateY(-8px)}
.artlead.blauw{background:var(--kobalt); color:var(--lucht)}
.artlead.rood{background:var(--rood); color:var(--lucht)}
.artlead.geel{background:var(--geel); color:var(--inkt)}
.artlead.zwart{background:var(--inkt); color:var(--lucht)}
.artlead .rubriek{font-weight:800; letter-spacing:.11em; text-transform:uppercase; font-size:11.5px; opacity:.9}
.artlead h2{margin:14px 0 0; font-size:clamp(30px,3.8vw,52px); line-height:1.05; letter-spacing:-.022em; max-width:16ch}
.artlead p{margin:18px 0 0; color:inherit; opacity:.9; font-size:16.5px; line-height:1.6; max-width:52ch}
.artlead .lees{margin-top:28px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:9px}
.artlead .lees i{display:block; width:20px; height:1.5px; background:currentColor; transition:width .4s cubic-bezier(.16,1,.3,1)}
.artlead:hover .lees i{width:38px}
.artlijst{margin-top:clamp(24px,3vw,40px)}
.artrij{display:grid; grid-template-columns:150px 1fr auto; gap:clamp(16px,2.5vw,40px); align-items:baseline; padding:24px 0; border-top:1.5px solid var(--lijn); text-decoration:none; color:var(--inkt)}
.artrij:last-child{border-bottom:1.5px solid var(--lijn)}
.artrij .rubriek{color:var(--kobalt); font-weight:800; letter-spacing:.11em; text-transform:uppercase; font-size:11.5px}
.artrij .kopklein{margin:0}
.artrij p{margin:8px 0 0; color:var(--zacht); font-size:15px; line-height:1.55; max-width:56ch}
.artrij .lees{font-weight:700; font-size:14px; display:flex; align-items:center; gap:9px; white-space:nowrap}
.artrij .lees i{display:block; width:20px; height:1.5px; background:currentColor; transition:width .4s cubic-bezier(.16,1,.3,1)}
.artrij:hover .lees i{width:38px}

/* ===== maker-detail ===== */
.detail{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(44px,6vw,96px); align-items:start}
.detail .verhaal p + p{margin-top:20px}
.detail .verhaal p{font-size:17.5px; max-width:56ch}
.info{background:var(--room); padding:34px 32px; border-top:4px solid var(--inkt); position:sticky; top:calc(var(--navh) + 24px)}
.info .rij{padding:16px 0; border-bottom:1px solid var(--lijn)}
.info .rij:last-child{border-bottom:none; padding-bottom:0}
.info .lbl{font-weight:800; letter-spacing:.11em; text-transform:uppercase; font-size:11px; color:var(--kobalt); margin-bottom:7px}
.info .rij div:not(.lbl){font-size:15.5px; line-height:1.6; color:var(--grijs)}
.info .adres span{display:block}
.info a{font-weight:600; word-break:break-word}
.tijden{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; font-size:15px; line-height:1.5; color:var(--grijs)}
.tijden b{font-weight:600}
/* makerbeeld op de detailpagina: de eerste foto opent het verhaal (16/9, boven de
   alinea's), de rest staat als grid van staande 4/3-beelden onder de specials.
   Op een telefoon is 2x ~160px te klein om iets te zien: dan één kolom. */
.makerhoofdfoto{margin:0 0 clamp(26px,3vw,38px)}
.makerhoofdfoto img{width:100%; height:auto; display:block; object-fit:cover; aspect-ratio:16/9; border-radius:2px}
.makerfotos{margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.makerfotos figure{margin:0}
.makerfotos img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3; border-radius:2px}
@media(max-width:640px){ .makerfotos{grid-template-columns:1fr} }
.specials{display:flex; flex-wrap:wrap; gap:9px; margin-top:30px}
.specials li{list-style:none; border:1.5px solid var(--inkt); border-radius:100px; padding:8px 17px; font-weight:600; font-size:14px}

/* ===== agenda ===== */
.lijst{border-top:1px solid currentColor}
.lijst .item{display:grid; grid-template-columns:150px 1fr auto; gap:28px; align-items:center; padding:30px 0; border-bottom:1px solid currentColor}
.lijst .datum{font-weight:900; font-size:22px; color:var(--geel)}
.lijst .tag{border:1.5px solid currentColor; border-radius:100px; padding:9px 18px; font-weight:600; font-size:13px; opacity:.9; white-space:nowrap}

/* ===== plaatshouder / klant-taak ===== */
.plaatshouder{border:2px dashed var(--kobalt); padding:24px 28px; font-size:15px; line-height:1.6; color:var(--grijs); background:rgba(255,255,255,.4); max-width:74ch}
.plaatshouder b{color:var(--kobalt)}
.plaatshouder ul{margin:12px 0 0 20px}
.plaatshouder li{margin-top:5px}
.blok.zwart .plaatshouder{border-color:var(--geel); background:transparent; color:#b9b2a4}
.blok.zwart .plaatshouder b{color:var(--geel)}
/* de beeldbrief volgt op zwart dezelfde omkering als de plaatshouder; de
   inkt-rand en de grijs-op-donker tekst waren daar anders onzichtbaar
   (agenda-verhuur werd zwart in de meetronde 02-09) */
.blok.zwart .beeldbrief{border-color:var(--geel)}
.blok.zwart .beeldbrief .lbl{color:var(--geel)}
.blok.zwart .beeldbrief ol{color:#b9b2a4}

/* ===== volgende maker ===== */
.volgende{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:0}
.volgende a{position:relative; padding:clamp(36px,4vw,64px) clamp(28px,3vw,48px); text-decoration:none; display:block; transition:background .35s ease}
.volgende .lbl{font-weight:800; letter-spacing:.11em; text-transform:uppercase; font-size:11px; opacity:.7; margin-bottom:12px}
.volgende .nm{font-weight:900; font-size:clamp(1.5rem,2.6vw,2.4rem); letter-spacing:-.02em; line-height:1.02}
/* Romeo-ronde 26-08: de links/rechts-navigatie blijft, maar krijgt richtingspijlen
   in de 2px-lijnstijl van de site. Het linkerblok wijst naar links, het rechter
   naar rechts; op hover schuift de punt langs zijn eigen as naar buiten, dus uit
   het hoofdvlak weg. Tekst wijkt via de extra padding aan de pijlkant. */
.volgende a::after{content:""; position:absolute; top:50%; width:22px; height:22px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  right:clamp(26px,3.4vw,54px); transform:translateY(-50%) rotate(45deg);
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.volgende a:first-child::after{right:auto; left:clamp(26px,3.4vw,54px); transform:translateY(-50%) rotate(225deg)}
.volgende a:hover::after{transform:translateY(-50%) rotate(45deg) translate(7px,-7px)}
.volgende a:first-child:hover::after{transform:translateY(-50%) rotate(225deg) translate(7px,-7px)}
.volgende a:last-child{padding-right:clamp(78px,9vw,140px)}
.volgende a:first-child{padding-left:clamp(78px,9vw,140px)}
@media (prefers-reduced-motion: reduce){
  .volgende a::after{transition:none}
}

/* ===== slotstempel =====
   Romeo-ronde 26-08: de valk komt spaarzaam buiten de footer terug, als stempel
   onder een uitgelezen artikel. Klein en gecentreerd, zoals een colofonmerk. */
.stempel{margin-top:clamp(48px,5vw,76px); display:flex; justify-content:center}
.stempel img{width:clamp(38px,3.4vw,52px); height:auto; opacity:.85}

/* ===== beeldbrief ===== */
.beeldbrief{margin-top:clamp(56px,6vw,90px); border-top:3px solid var(--inkt); padding-top:26px}
.beeldbrief .lbl{font-weight:800; letter-spacing:.11em; text-transform:uppercase; font-size:11px; color:var(--kobalt); margin-bottom:12px}
.beeldbrief ol{margin-left:19px; font-size:15px; line-height:1.65; color:var(--grijs)}

/* ===== knop ===== */
.knop{display:inline-flex; align-items:center; gap:12px; background:var(--inkt); color:var(--lucht); font-weight:700; font-size:15px; padding:16px 28px; border-radius:100px; text-decoration:none; transition:background .3s ease, transform .3s ease, color .3s ease}
.knop:hover{background:var(--kobalt); transform:translateY(-2px)}
/* het drukmoment: de knop die op hover 2px zweeft, zakt bij de klik terug; de kortere
   duur maakt het een tik in plaats van een animatie */
.knop:active{transform:translateY(0); transition-duration:.1s}
.knop.blauw{background:var(--kobalt)}
.knop.blauw:hover{background:var(--rood)}
/* lege variant: alleen een ring, neemt de tekstkleur van zijn ondergrond over.
   De hover-omkering staat per ondergrond, want currentColor kan zichzelf niet omkeren. */
.knop.leeg{background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor}
.knop.leeg:hover{transform:translateY(-2px); box-shadow:none}
.hero .knop.leeg:hover{background:var(--inkt); color:var(--lucht)}
.citaat .knop.leeg:hover{background:var(--lucht); color:var(--rood)}
.pkop .knop.leeg:hover{background:var(--lucht); color:var(--inkt)}

/* ===== het pand als uitsnede =====
   De bronfoto is een uitgeknipt pand op een wit vlak. Op de cremekleurige sectie las
   dat wit als een kapotte lijst, met een rafelige diagonaal langs de onderkant waar
   de stoep was weggeknipt. Het wit is nu echt transparant gemaakt, dus het pand staat
   als vorm op de pagina. De gele cirkel erachter herhaalt de zon uit de hero en vult
   de lucht die door het uitknippen wegviel. */
.pandvlak{position:relative}
/* Onderrand schuin afgesneden (wens Dauji 26-08: mooi schuin, geen rechte lijn en geen
   gerafelde stoeprand). De cutout heeft onderaan een gescheurde stoep-/terrasrand met
   losse uitstulpsels; een rechte of gefadede snede liet die half zien. Een clip-path-
   diagonaal snijdt de ragged voet er strak af. De cutout is vol tot ~80% hoogte; daaronder
   wordt de linkerhelft transparant en steekt de gescheurde stoep-/lagepandenrand eruit.
   Daarom snijdt de diagonaal LINKS hoger (74%, door de massieve gevel) en RECHTS lager
   (95%, net onder het terras). Zo is de zichtbare onderrand de schone sneelijn zelf en
   niet de afgescheurde silhouetrand; FALCON-gevel en tafels blijven heel. De harde snede
   valt tegen de creme weg als een gewild vlak, zoals in de opzet. */
.pandvlak img{position:relative; z-index:1; display:block; width:100%; height:auto;
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 95%, 0 74%);
  clip-path:polygon(0 0, 100% 0, 100% 95%, 0 74%)}
.pandvlak .zonvlak{position:absolute; z-index:0; right:6%; top:-15%;
  width:min(44%,290px); aspect-ratio:1; border-radius:50%; background:var(--geel)}
@media(max-width:1000px){
  /* naast elkaar valt weg, dus de cirkel mag kleiner en dichter op de toren */
  .pandvlak .zonvlak{width:min(38%,200px); top:-11%}
}
/* Zwart-witvariant (klantvraag 31-08): de terrasfoto onderaan de home in grijs,
   zodat het fotomateriaal niet met het illustratiepalet vecht. Alleen de foto;
   de gele zonvlak-cirkel erachter blijft kleur. */
.pandvlak.zw img{filter:grayscale(1)}

/* ===== footer ===== */
/* De footer is een blok op de pagina en niet de onderrand van het venster: marge
   rondom, afgeronde hoeken, en zijn eigen binnenmaat. Zo eindigt de site met lucht
   in plaats van met een harde band tegen de vensterrand. */
footer{background:var(--kobalt); color:var(--lucht); position:relative;
  margin:0 clamp(14px,2vw,30px) clamp(14px,2vw,30px);
  border-radius:clamp(18px,2.2vw,32px);
  padding:clamp(56px,6vw,90px) clamp(26px,4vw,70px) 34px}
/* dezelfde maatlijn als .smal, anders staat de footer 200px breder dan de rest.
   z-index omdat de valk ná de kolommen in de html staat en er anders overheen
   schildert: dan tint hij de letters zelf mee in plaats van alleen de ondergrond. */
footer .boven, footer .onder{max-width:1420px; margin-left:auto; margin-right:auto;
  position:relative; z-index:1}
footer .boven{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px}
footer .merk .woord{width:clamp(200px,20vw,310px); filter:brightness(0) invert(1); opacity:.94}
/* De valk staat groot en half doorzichtig rechtsonder, als watermerk van het pand.
   Hij stond op right:-2%, en daarmee sneed de rechterrand precies door de twee armen
   van de F: het beeldmerk las als twee losse rechthoeken in plaats van als valk.
   Nu staat hij horizontaal helemaal binnen het blok en bloedt hij alleen onderlangs. */
/* Doorzichtigheid is hier een contrastknop, geen smaak: het watermerk licht de
   kobalt op waar het adres en de credit overheen lopen. Op .15 zakt creme op die
   lichtere blauwe vlek naar 4.4:1 en valt AA om; op .12 blijft er 4.7:1 over. */
footer .valk{position:absolute; right:clamp(12px,2vw,40px); bottom:-6%;
  width:clamp(240px,30vw,520px); filter:brightness(0) invert(1); opacity:.12; pointer-events:none}
footer .merk p{color:var(--lucht); opacity:.9; font-size:15px; margin-top:22px; max-width:30ch}
footer .kolom .lbl{font-weight:800; letter-spacing:.11em; text-transform:uppercase; font-size:11px; opacity:.9; margin-bottom:14px}
footer .kolom a, footer .kolom div{display:block; font-size:15px; line-height:1.85; text-decoration:none}
footer .kolom a:hover{text-decoration:underline}
footer .onder{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(44px,5vw,72px); padding-top:20px; border-top:1px solid rgba(247,231,180,.3); font-size:12.5px; opacity:.9}

/* ===== skip-link ===== */
.overslaan{position:absolute; left:-9999px; top:0; z-index:70;
  background:var(--inkt); color:var(--lucht); font-weight:700; font-size:14px;
  padding:14px 22px; text-decoration:none}
.overslaan:focus{left:12px; top:12px}

/* ===== focusstaat =====
   Deze site had er geen, op de skip-link na. De browserstandaard is een dunne ring
   die op kobalt, rood en inkt vrijwel wegvalt, en dat zijn hier hele secties.
   Eén kleur volstaat daarom niet: de ring is dubbel, cream met inkt eromheen.
   Die twee meten onderling 14.9:1, dus op élke ondergrond in dit palet is minstens
   één van de twee ringen hard zichtbaar. Alleen :focus-visible, zodat een muisklik
   geen ring achterlaat. */
:is(a,button,[role=button],input,select,textarea,summary):focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--lucht), 0 0 0 6px var(--inkt);
  border-radius:2px; position:relative; z-index:5;
}
/* de lege knop draagt zijn eigen rand al in een box-shadow; die moet mee, anders
   verdwijnt de omtrek van de knop op het moment dat hij focus krijgt */
.knop.leeg:focus-visible{box-shadow:inset 0 0 0 1.5px currentColor, 0 0 0 3px var(--lucht), 0 0 0 6px var(--inkt)}
.knop:focus-visible, .nav .cta:focus-visible, .mobmenu a.knop:focus-visible{border-radius:100px}
.mk:focus-visible, .art:focus-visible, .volgende a:focus-visible{border-radius:0}
/* Deze secties knippen hun decoratieve vormen af, en knipten daarmee ook de focusring
   van een link die tegen de rand staat. overflow:clip met een marge laat die ring door.

   Wat die 8px kost, exact gemeten op de gedeployde build, in vier standen naast elkaar
   (site zoals hij is / clip-margin op 0 / body overflow-x op clip / een echt blok van
   2000px als ijkpunt dat de meetmethode zelf deugt):

     venster 1440, geen mobiele emulatie   document 1440, over 0,  sleep 0
     venster 375,  mobiele emulatie        document 383,  over 8,  sleep 0
     venster 375,  geen mobiele emulatie   document 383,  over 8,  sleep 8
     ijkpunt met blok van 2000px           document 2000, over 560 tot 1625, sleep idem

   Drie dingen staan daarmee vast. Op desktopbreedte bestaat de 8px helemaal niet, want
   daar raken deze secties de vensterrand niet. Op een smal venster telt hij mee in
   scrollWidth en is hij, buiten mobiele emulatie, ook echt 8px sleepbaar; een eerdere
   notitie hier beweerde dat scrollX altijd op 0 blijft, en dat klopte alleen omdat er
   toen uitsluitend met mobiele emulatie gemeten was. En body{overflow-x:clip} in plaats
   van hidden verandert er niets aan, dus dat is niet de uitweg.

   Opgelost op 11-08-2026, en de conclusie hierboven bleek op één aanname te rusten die
   nooit gemeten was: dat er een focusbare link tegen de sectierand staat. Dat is
   nergens zo. Per sectie is de afstand gemeten van het dichtstbijzijnde focusbare
   element tot de dichtstbijzijnde sectierand, op vier pagina's en twee breedtes:

     pkop  op 1440   86px van de rand      pkop  op 375   26px
     hero  op 1440   82px van de rand      hero  op 375   26px
     footer op 1440  34px van de rand      footer op 375  26px

   De focusring is maximaal 6px breed, dus zelfs de krapste stand houdt 20px over. De
   marge van 8px beschermde niets en kostte wél echte horizontale scroll: de .vorm.zon
   in de .pkop loopt tot 86px voorbij de vensterrand, en de clipbox liep daardoor tot
   1448 in een venster van 1440. Dat gaf 8px sleep op elke pagina met een pkop (over,
   elke makerpagina, bezoek, agenda, nieuws). Met de marge op nul is dat op alle
   gemeten combinaties 0, zonder dat er zichtbaar iets afgeknipt wordt: de decoratieve
   vormen staken al veel verder uit dan die 8px en werden dus toch al geknipt. */
.hero, .pkop, .citaat, footer{overflow:clip; overflow-clip-margin:0}

/* ===== responsief ===== */
@media(max-width:1180px){
  .stappenverhaal .binnen{grid-template-columns:1fr; gap:clamp(28px,4vw,48px); align-items:start}
  .stappenverhaal .stage{align-items:center}
  /* één kolom binnen een sticky venster: de intro moet wijken voor de stappen zelf */
  .stappenverhaal .zijde .lead{display:none}
  .stappenverhaal .rechts{min-height:clamp(240px,32vh,340px)}
}
@media(max-width:1000px){
  .pg-rij{grid-template-columns:repeat(2,1fr)}
  .kop2, .detail, .raster, .raster.twee{grid-template-columns:1fr}
  .raster{gap:14px}
  .info{position:static}
  footer .boven{grid-template-columns:1fr 1fr}
  footer .merk{grid-column:1 / -1}
}
@media(max-width:820px){
  .pg-unit{min-height:96px}
  .pg-unit span{font-size:.98rem}
  /* Mobiele balk (Dauji 04-09, blauwe lijnen op de screenshots): er is maar één
     linkerlijn op de pagina en dat is --gut, waar kop, broodtekst en knoppen op
     staan. De FALCON-letters moeten op diezelfde lijn, dus de pil schuift 21px
     (rand 1 + pilpadding 20) naar buiten: de rand mag verspringen, de letters
     niet. Menuknop als kobalt-cirkel ín de pil rechts met een 4px room-ring.
     --navh 62: 10 lucht plus 52 pilhoogte; alle offsets rekenen met de variabele. */
  :root{--gut:7vw; --navh:62px}
  .nav .links{display:none}
  .nav .cta{display:none}
  .nav{top:10px; left:calc(var(--gut) - 21px); right:calc(var(--gut) - 21px);
    height:calc(var(--navh) - 10px);
    padding:0 4px 0 20px; background:rgba(251,243,220,.96)}
  .nav .brand .woord{height:19px}
  .menuknop{display:flex; width:44px; height:44px; margin:0; padding:13px 12px;
    background:var(--kobalt); border:0; border-radius:999px;
    transition:background .3s ease}
  .menuknop i{background:var(--room)}
  /* kruis-geometrie op de cirkel: binnenhoogte 18px, lijnen op 0/8/16 */
  body.menu-open .menuknop i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.menu-open .menuknop i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  /* op mobiel staat de smalle illustratie eronder in de flow, dus de copy krijgt
     de volle breedte terug en de hero is niet langer een vensterhoge compositie */
  .hero{min-height:0; display:block; padding-top:0}
  .hero .copy{max-width:100%; padding:calc(var(--navh) + 40px) var(--gut) 34px}
  /* Op mobiel staat de illustratie in de flow. Een transform op dít blok zou hem
     uit de bladspiegel trekken en een gat onder de hero laten, dus daar bleef de
     parallax weg. Nu beweegt de afbeelding binnen haar eigen kader: het kader knipt
     dicht, het beeld staat 12 procent groter vanuit het midden, en falcon.js schuift
     het maximaal 6 procent op en neer terwijl het kader door het venster loopt. Zo
     blijft het kader altijd gevuld en verschuift er niets in de layout. */
  .hero .beeld{position:static; overflow:hidden}
  .hero .beeld img{will-change:transform}
  .hero h1{max-width:14ch}
  .hero .pijl{display:none}
  /* De gevel op zakformaat: op de volle paginabreedte wordt de tekening 57px
     hoog en onleesbaar; 160% breed met de flanken buiten beeld houdt de
     volumes herkenbaar. De zon schaalt mee omlaag, de fragment-crops van de
     detailpagina's behouden hun eigen maat via de transform. */
  .pkop{padding-bottom:clamp(130px,38vw,190px)}
  .pkop .gevel{width:160%; left:-30%; right:auto}
  /* origin verder naar rechts dan op desktop: zo neemt de artikel-crop de
     trap in de daklijn en de schoorsteen mee, anders blijft er op de smalle
     viewport alleen een vlakke band over. */
  .pkop.gzoom-vlak .gevel{transform-origin:114% 100%}
  .pkop .zon{bottom:19vw}
  .pkop.gzoom-shed{padding-bottom:64vw}
  .pkop.gzoom-shed .zon{bottom:40vw}
  .pkop.gzoom-vlak .zon{bottom:26vw}
  .lijst .item{grid-template-columns:1fr; gap:9px}
  .artrij{grid-template-columns:1fr; gap:7px}
  .artrij .lees{margin-top:6px}
  /* De tijdenpil stond op white-space:nowrap. In één kolom duwde "Wo t/m za 8.00 tot
     16.00 · Zondag 8.00 tot 14.00" de 1fr-track naar 344px binnen een container van
     275px: op 320 liep bezoek daardoor 47px over de rand. Een 1fr-track heeft een
     automatisch min-content-minimum, dus een onbreekbaar kind duwt de track zelf
     breder. Hij mag hier over twee regels; met een capsule-radius leest dat als een
     ovaal, dus de radius gaat mee omlaag. */
  .lijst .tag{justify-self:start; white-space:normal; border-radius:14px; line-height:1.5}
  .volgende{grid-template-columns:1fr}
  footer .boven{grid-template-columns:1fr}
  footer .valk{width:200px; opacity:.10; right:16px; bottom:-3%}
  /* Hier stond de aanname dat een sticky stage om een muis vraagt, en daarmee viel
     op de telefoon precies de signatuurbeweging van deze site weg: het scrollverhaal
     werd een lijst met een streepje ervoor en de zon groeide niet meer. Scrollen is
     op een telefoon juist de meest directe beweging die er is. De stage blijft dus
     plakken, alleen korter van reisweg (70vh per stap in plaats van 85, zie
     falcon.js) en compacter van maat, zodat een stap binnen één venster past.
     Wat wél weggaat is de scrollinstructie: die verwijst naar een muis. */
  .alleenbreed{display:none}
  /* Het kader moet hoog genoeg zijn voor de langste stap, want de stappen staan
     absoluut over elkaar heen en een te laag kader knipt de laatste alinea weg.
     De langste stap meet 252px op 320px breed, dus 292 is de ondergrens met marge.
     Op 42vh werd dat op een telefoon 341 tot 391px en stond er onder de alinea ruim
     honderd pixels leegte, terwijl de stage het blok óók nog centreert: die twee
     gaten telden bij elkaar op tot een lege onderhelft. */
  .stappenverhaal .rechts{gap:16px; min-height:clamp(292px,36vh,352px)}
  .stappenverhaal .railrij{margin:20px 0 22px; gap:14px}
  .stappenverhaal .rail b{width:26px}
  .stappenverhaal .stap .jaar{font-size:clamp(44px,12vw,64px); margin-bottom:12px}
  .stappenverhaal .stap :is(h2,h3){margin-bottom:9px}
  .stappenverhaal .stap p{font-size:16px}

  /* ---- mobiele leesbaarheid en bedienbaarheid ----
     Alles hieronder is gemeten op 320, 375 en 430px, niet geschat. */

  /* Op de telefoon staat de zon van deze sectie achter de knop, en die knop is
     alleen een ring met cream tekst. Cream op geel meet 1.9:1, dus daar viel de
     tekst weg. Op mobiel wordt het een gevulde pil: cream vlak met logorood erop,
     5.42:1, en meteen ook een groter raakvlak. */
  .citaat.vol .knop.leeg{background:var(--lucht); color:var(--rood); box-shadow:none}

  /* De kaarthoogte houdt ruimte vrij voor de foto die nog komt. Op een telefoon
     is die reservering een gat van bijna honderd pixels onder de tekst, dus daar
     wordt hij kleiner. Hij verdwijnt niet: de ruimte is nog steeds bedoeld. */
  .mk{min-height:240px}

  /* Labelklassen stonden hier op 10,5 tot 12,5px. Dat leest op een telefoon niet,
     zeker niet in kapitalen met veel letterafstand. Ondergrens 13px. */
  .kick, .mk .tag, .agdatum .agherh, .agtag, .agtel, .agherkomst, .art .rubriek, .bron,
  .info .lbl, .volgende .lbl, .beeldbrief .lbl, footer .kolom .lbl,
  .verwijs .lbl, footer .onder, .lijst .tag{font-size:13px}
  /* Tweede ronde: de plattegrond en de agendadatum zijn ná die regel gebouwd en
     kwamen er dus nooit in. Gemeten op de gedeployde build: .lbl 10,5, .pg-unit i 11,
     .pg-straat span 11,5, .pg-ingang 11,5, .pg-deel 12, .pg-unit b 12, .agnext 12.
     Allemaal kapitalen met .11 tot .13em letterafstand, precies de combinatie die
     op een telefoon dichtslibt. Zelfde ondergrens. */
  .lbl, .pg-deel, .pg-unit b, .pg-unit i, .pg-straat span, .pg-ingang,
  .agdatum .agnext{font-size:13px}

  /* Raakvlakken. WCAG 2.2 vraagt 24x24px; deze links stonden op 15 tot 19px hoog
     omdat ze inline in een blok staan zonder eigen hoogte. Verticale padding met
     een negatieve marge erbij maakt het raakvlak groter zonder de regelval te
     verschuiven. */
  .kruimel a, .info a, .agbij a, footer a, .plaatshouder a{
    display:inline-block; padding:6px 0; margin:-6px 0}
  footer .kolom a{padding:7px 0; margin:0; line-height:1.4}
}

/* ===== verwijzingen in de zijkolom =====
   Staat bewust achteraan: .info .lbl en .info .rij div:not(.lbl) staan eerder in
   dit bestand en zouden bij gelijke specificiteit anders winnen. */
.verwijzingen{display:flex; flex-direction:column; gap:8px; margin-top:2px}
.verwijs{display:block; text-decoration:none; border:1.5px solid var(--lijn);
  padding:11px 15px; transition:border-color .3s ease, background .3s ease}
.verwijs:hover{border-color:var(--kobalt); background:rgba(37,69,196,.06)}
.verwijs .lbl{display:block; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  font-size:11.5px; color:var(--kobalt); margin-bottom:3px}
.verwijs .nm{display:block; font-weight:700; font-size:15px; line-height:1.35; color:var(--inkt)}

/* ===== mobiele ondergrens, laatste woord =====
   Deze regel hoort inhoudelijk in het 820px-blok hierboven en stond daar ook. Hij
   deed daar alleen niets: .verwijs .lbl staat bewust achteraan in dit bestand, dus
   bij gelijke specificiteit won die en bleef het label op 10,5px staan, op elke
   makerspagina, op alle drie de gemeten breedtes. Cascadevolgorde slaat een
   media-query niet over. Daarom staat de mobiele correctie hier, ná de bron. */
@media(max-width:820px){
  .verwijs .lbl{font-size:13px}
}

/* ===== cookiebalk =====
   On-brand toestemmingsbalk, linksonder verankerd zodat hij de inhoud en de
   sticky nav niet afdekt. Room-kaart met inkt-rand en het gele zon-motief dat op
   de home en in de citaten terugkomt. gtag.js laadt pas na Accepteren (zie de
   head), en Weigeren is even bereikbaar als Accepteren. */
.cookiebalk{
  position:fixed; left:clamp(14px,3vw,30px); bottom:clamp(14px,3vw,30px);
  z-index:60; width:min(380px,calc(100vw - 28px));
  background:var(--room); color:var(--inkt);
  border:1.5px solid var(--inkt); border-radius:clamp(16px,2vw,24px);
  box-shadow:0 18px 44px rgba(23,21,26,.20);
  padding:clamp(20px,2.4vw,26px); overflow:hidden;
  animation:cookie-op .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cookie-op{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.cookiebalk{animation:none}}
.cookiezon{
  position:absolute; right:-34px; top:-34px; width:96px; height:96px;
  border-radius:50%; background:var(--geel); opacity:.9; pointer-events:none;
}
.cookieinhoud{position:relative}
.cookiekop{font-weight:900; font-size:19px; line-height:1.1; letter-spacing:-.02em;
  color:var(--inkt); margin-bottom:8px}
.cookietekst{font-size:14px; line-height:1.55; color:var(--grijs); max-width:34ch}
.cookieknoppen{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.cookiebalk .knop{font-size:14px; padding:12px 20px}
.cookiebalk .knop.leeg{box-shadow:inset 0 0 0 1.5px rgba(23,21,26,.4)}
.cookiebalk .knop.leeg:hover{background:var(--inkt); color:var(--lucht); box-shadow:none; transform:translateY(-2px)}