/* Hallmark · shape: steigerklim, zeven verdiepingen onder elkaar · genre: ambacht-industrie (steigerbouw) · theme: custom · job: hire · idea: "Wie scrolt, klimt mee langs een steiger tot bovenaan, waar je de ploeg belt." · vibe: "hoog, rauw, precies, West-Vlaams nuchter"
 * paper: oklch(14% 0.004 100) · accent: oklch(97% 0.2 108) · display: Archivo (wdth 62, 800-900) · body: Hanken Grotesk · hero: staande werffoto als harde kolom rechts onder de balk, kop wit op asfalt en asfalt op de lucht, buizen en steigerbouwer ervoor (telefoon: foto over de volle breedte, kop in asfalt op de lucht, buizen ervoor) · nav: asfaltbalk bovenaan met woordmerk, telefoon en omlijnde knop · footer: slotverdieping in open lucht met oproep en gegevens · imagery: photographs (@sky_steigers) · signature: de kantplank waarop elke verdieping landt
 * axes: asfalt/archivo smal/fluo-geel · posture: rauw maar precies · contrast: pass · fold: pass · hero-review: fix · 5 findings · 4 resolved · finish-review: subagent · 8 findings · 8 resolved · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E3 S3 R4 V3 · weakest: E, tekstverdiepingen zijn voorlopig kaal; de beeldwerking volgt in taken 4 tot 7 */
/* Hallmark · verify (T8, 2 nov 2026): copy door humanizer · sloplint --render: 0 FAIL en 0 REFLEX in index.html en site.css (2 Floor-FAIL en 1 REFLEX enkel in de ongewijzigde engine scrollcraft.css, rulings 5 en 7) · impeccable detect 1440 en 390: 1 advisory (bounce op de ligger-klik, bedoeld) · shoot desktop, 390, reduced: geen dode scroll, contrast ok · JS uit: alles zichtbaar · gevoelscheck: werf aangepast · fix-ronde 1 (finish-review): opnieuw gecontroleerd, zelfde resultaat · fix-ronde 2 (branch-review, 2 nov): sloplint --render opnieuw 0 FAIL en 0 REFLEX in eigen bestanden */
/* Hallmark · waive 37 · enkel Archivo en Hanken Grotesk worden geladen, de andere families staan alleen in de ongewijzigde engine-css · de engine scrollcraft.css mag niet aangepast worden en de steigersite gebruikt geen van zijn letters */
/* Hallmark · waive 59 · gaten van 6 en 96px rond #contact · photo column starts at the kantplank; the deck holds 3xl above the ground */
/* Hallmark · waive 83 · foto vanaf de top slot.jpg rechts in #contact, tot de rechterrand · requested hero mirror, rulings 14 en 19 */

body { font-family: var(--font-text); background: var(--vlak) var(--korrel); color: var(--wit); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" 62; text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 1.05; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-section); }
h3 { font-size: var(--text-title); }

.verdieping { position: relative; padding: var(--section-gap-s) 0 var(--section-gap); background: var(--vlak) var(--korrel); color: var(--wit); }
.verdieping::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--kantplank); background: var(--fluo); }
.verdieping--licht { background: var(--beton); color: var(--asfalt); }
.verdieping--lucht { background: var(--wit); color: var(--asfalt); }
.verdieping__in { display: grid; gap: var(--space-lg); padding-block: var(--space-xl) 0; }
.verdieping p { font-size: var(--text-lead); max-width: 52ch; }
.verdieping a { text-decoration-color: currentColor; }
.verdieping--licht a, .verdieping--lucht a { color: var(--asfalt); }

.knop { display: inline-block; justify-self: start; padding: var(--space-md) var(--space-xl); background: var(--fluo); color: var(--asfalt); font-family: var(--font-text); font-weight: 600; font-size: var(--text-lg); text-decoration: none; border-radius: var(--radius-card); transition: transform var(--dur-micro) var(--ease-out); }
.knop:hover { transform: translateY(-2px); }
.knop:active { transform: translateY(0); }
.knop:focus-visible { outline-offset: 3px; }
.verdieping--licht :focus-visible, .verdieping--lucht :focus-visible { outline-color: var(--asfalt); }

/* Naar de inhoud: alleen zichtbaar bij toetsenbordfocus, boven de balk */
.naar-inhoud { position: fixed; z-index: var(--z-modal); top: var(--space-xs); left: var(--space-xs); padding: var(--space-sm) var(--space-md); background: var(--fluo); color: var(--asfalt); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.naar-inhoud:focus-visible { transform: none; }

/* Vaste balk: woordmerk, telefoon, de knop */
:root { --balk-hoogte: 72px; }
.balk { position: fixed; z-index: var(--z-sticky-nav); inset: 0 0 auto 0; height: var(--balk-hoogte); display: flex; align-items: center; gap: var(--space-lg); padding-inline: var(--gutter); background: var(--vlak) var(--korrel); color: var(--wit); }
.balk__merk { display: block; }
/* Hoofdnavigatie: op brede schermen een rij links naast het merk; smaller een knop Menu die een paneel onder de balk opent.
   Zonder JS staat de rij er alleen op brede schermen; smaller dragen de links in de footer de navigatie. */
.hoofdnav { margin-right: auto; }
.hoofdnav__lijst { list-style: none; margin: 0; padding: 0; }
.hoofdnav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--wit); font-weight: 600; text-decoration: none; }
.hoofdnav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--fluo); text-underline-offset: 0.3em; }
.hoofdnav__knop { display: none; }
@media (min-width: 75rem) {
  .hoofdnav__lijst { display: flex; gap: var(--space-lg); padding-left: var(--space-xl); }
  .hoofdnav a { font-size: var(--text-md); }
}
@media (max-width: 74.9375rem) {
  .balk__merk { margin-right: auto; }
  .hoofdnav { order: 1; margin-right: 0; }
  .hoofdnav__lijst { display: none; }
  .js .hoofdnav__knop { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; min-width: 44px; justify-content: center; padding: 0 var(--space-xs); border: 0; background: none; color: var(--wit); font: 600 var(--text-md) / 1 var(--font-text); cursor: pointer; }
  .hoofdnav__knop:focus-visible { outline: 2px solid var(--fluo); outline-offset: 2px; }
  .hoofdnav__streep, .hoofdnav__streep::before, .hoofdnav__streep::after { display: block; width: 20px; height: 2px; background: var(--fluo); transition: transform 200ms var(--ease-out); }
  .hoofdnav__streep { position: relative; }
  .hoofdnav__streep::before, .hoofdnav__streep::after { content: ""; position: absolute; left: 0; }
  .hoofdnav__streep::before { top: -6px; }
  .hoofdnav__streep::after { top: 6px; }
  .hoofdnav.is-open .hoofdnav__streep { background: transparent; }
  .hoofdnav.is-open .hoofdnav__streep::before { transform: translateY(6px) rotate(45deg); }
  .hoofdnav.is-open .hoofdnav__streep::after { transform: translateY(-6px) rotate(-45deg); }
  .hoofdnav.is-open .hoofdnav__lijst { position: fixed; top: var(--balk-hoogte); left: 0; right: 0; display: grid; max-height: calc(100svh - var(--balk-hoogte)); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-md) var(--gutter) var(--space-2xl); background: var(--vlak) var(--korrel); border-top: var(--kantplank) solid var(--fluo); }
  .hoofdnav.is-open .hoofdnav__lijst li { border-bottom: 1px solid color-mix(in oklab, var(--staal), transparent 55%); }
  .hoofdnav.is-open .hoofdnav__lijst a { width: 100%; padding-block: var(--space-sm); font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" 62; font-size: clamp(2rem, 7vw, 3rem); line-height: 1; text-transform: uppercase; }
}
@media (max-width: 74.9375rem) and (prefers-reduced-motion: no-preference) {
  .hoofdnav.is-open .hoofdnav__lijst { animation: menu-in 320ms var(--ease-out); }
}
@keyframes menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.balk__merk img { height: 44px; width: auto; }
.balk__tel { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-weight: 600; font-size: var(--text-lg); text-decoration: none; font-variant-numeric: tabular-nums; }
.balk__tel:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--fluo); }
.balk__icoon { color: var(--fluo); }
.knop--balk { padding: var(--space-xs) var(--space-lg); font-size: var(--text-md); white-space: nowrap; background: transparent; color: var(--wit); box-shadow: inset 0 0 0 2px var(--fluo); }
.knop--balk:hover { background: var(--fluo); color: var(--asfalt); }

/* Voetplaat: plaat achter, kop in het midden, steigerbouwer ervoor. Regelafstand 1: beide punten blijven vrij van de buizen.
   Alles volgt uit vier regels, zodat het op elk formaat klopt:
   - --kh: de grootste kop die in de hoogte past (twee regels, zin en knop eronder).
   - --kolom: de fotokolom. Basis 0.8 x de hoogte; op brede schermen breder, tot de kop links bij de inhoudsrand begint
     (--doel), maar nooit zo breed dat meer dan ~40% van de kop over de foto loopt, en nooit boven 1.25x de bron (1150px).
   - --raak: waar regel 2 eindigt, net in de pet (de pet staat op het midden van de kolom).
   - De foto schaalt mee met de kolom en schuift zo op dat de pet op de hoogte van regel 2 blijft (--beeld-y);
     staat de pet hoger, dan schuift de kop omhoog in plaats van de foto omlaag. */
.voetplaat { --h: max(100vh, 640px); --h: max(100svh, 640px); --hc: calc(var(--h) - var(--balk-hoogte));
  --kh: min(calc(var(--hc) * 0.24), calc((var(--hc) * 0.86 - 260px) / 2));
  --doel: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  --kolom: min(max(min(calc(var(--hc) * 0.8), 50vw), calc((100vw - var(--kh) * 5.72 - var(--doel)) * 2)), calc(var(--kh) * 5.1), 58vw, 1150px);
  --kop: min(var(--kh), calc((100vw - var(--kolom) * 0.5 - 128px) / 5.74));
  --raak: calc(var(--kolom) * 0.5 - var(--kop) * 0.44);
  --beeld-h: max(calc(var(--hc) * 1.252), calc(var(--kolom) * 1.565));
  --beeld-y: calc(var(--hc) * 0.14 + var(--kop) * 1.5 - var(--beeld-h) * 0.3514);
  height: var(--h); padding: 0; isolation: isolate; overflow: clip; }
.voetplaat__beeld { position: absolute; top: var(--balk-hoogte); right: 0; width: var(--kolom); height: var(--hc); overflow: hidden; background: var(--staal); }
.voetplaat__plaat, .voetplaat__man { position: absolute; top: min(0px, var(--beeld-y)); left: 0; width: 100%; height: var(--beeld-h); display: block; }
.voetplaat__plaat { z-index: 1; }
.voetplaat__man { z-index: 3; }
.voetplaat__plaat img, .voetplaat__man img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
.voetplaat__tekst { position: absolute; right: calc(var(--kolom) - var(--raak)); top: calc(var(--balk-hoogte) + var(--hc) * 0.14 - max(0px, var(--beeld-y))); display: grid; gap: var(--space-lg); justify-items: start; }
.voetplaat__kop { position: relative; z-index: 2; font-size: var(--kop); line-height: 1; letter-spacing: -0.005em; text-wrap: nowrap; }
.voetplaat__kop span { display: block; position: relative; }
/* Waar de kop over de foto loopt, wordt hij asfalt: wit op asfalt, asfalt op de lucht, met een harde grens op de rand van de kolom */
.voetplaat__kop span::after { content: attr(data-regel) / ""; position: absolute; inset: 0; color: var(--asfalt); clip-path: inset(-0.2em 0 -0.2em calc(100% - var(--raak))); pointer-events: none; }
.voetplaat .voetplaat__zin { position: relative; z-index: 4; max-width: 30ch; margin-top: var(--space-sm); font-size: var(--text-lead); }
.voetplaat .knop { position: relative; z-index: 4; }

@media (max-width: 47.5rem) {
  :root { --balk-hoogte: 60px; }
  .balk { gap: var(--space-sm); }
  .balk__merk img { height: 36px; }
  .balk__tel { justify-content: center; min-width: 44px; }
  .balk__nummer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .knop--balk { padding: var(--space-sm) var(--space-md); }
  .hoofdnav__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Telefoon en staande tablets tot 64rem: plaat over de volle breedte; de kop staat in asfalt op de lucht, de buizen en
   de man liggen ervoor. Dezelfde grens staat in het gordijn hieronder en in initHero. */
@media (max-width: 47.5rem), (max-width: 64rem) and (orientation: portrait) {
  .voetplaat { --kop: 15.5vw; height: auto; padding: var(--balk-hoogte) 0 var(--space-xl); }
  .voetplaat__beeld { position: relative; top: 0; width: 100%; height: 150vw; background: var(--vlak); }
  .voetplaat__plaat, .voetplaat__man { width: 155vw; height: 206.7vw; left: -4.9vw; top: -4.8vw; }
  .voetplaat__plaat img, .voetplaat__man img { object-fit: fill; }
  .voetplaat__tekst { position: static; display: grid; padding: var(--space-lg) var(--gutter) 0; }
  .voetplaat__kop { position: absolute; left: var(--gutter); top: calc(var(--balk-hoogte) + 5vw); line-height: 0.86; color: var(--asfalt); }
  .voetplaat__kop span::after { content: none; }
  .voetplaat .voetplaat__zin { margin-top: 0; }
}
/* Vanaf 54rem zou de uitsnede van 155vw de foto boven 1.25x zijn 1080px tonen: daar de hele foto op volle breedte */
@media (min-width: 54.0625rem) and (max-width: 64rem) and (orientation: portrait) {
  .voetplaat__beeld { height: 118vw; }
  .voetplaat__plaat, .voetplaat__man { width: 100%; height: 133.4vw; left: 0; top: 0; }
}
/* Smalste telefoons (320): kleiner merk en een compactere knop, zodat "Project bespreken" op één regel blijft */
@media (max-width: 22.5rem) {
  .balk { gap: var(--space-xs); }
  .balk__merk img { height: 28px; }
  .knop--balk { padding-inline: var(--space-xs); font-size: var(--text-sm); }
}

/* Gordijn: de voetplaat blijft staan en "Een vaste ploeg" schuift er als nieuwe vloer overheen, binnen de wikkel .gordijn.
   top laat een voetplaat die hoger is dan het scherm eerst helemaal zien. Op de telefoon niet: daar is de voetplaat
   hoger dan het scherm met een hoogte uit de inhoud, en de adresbalk verschuift het scherm. */
@media (prefers-reduced-motion: no-preference) and (min-width: 64.0625rem), (prefers-reduced-motion: no-preference) and (min-width: 47.5625rem) and (orientation: landscape) {
  /* Een anker naar een sticky blok mikt op zijn huidige (vastgeplakte of losgelaten) plek. De voetplaat staat
     bovenaan het document: met een ruime scroll-margin landt elke sprong ernaartoe op 0, ook met het toetsenbord. */
  .voetplaat { position: sticky; top: calc(100vh - var(--h)); top: calc(100svh - var(--h)); scroll-margin-top: 300vh; }
  .wie { z-index: var(--z-base); }
}

/* Opbouw-intro, één keer per sessie. De beginstand hangt aan html.intro (alleen met JS en zonder reduced motion),
   het spelen aan .intro-go. Elke eindstand is de gewone stand, dus het weghalen van de klassen springt niet.
   Tijden staan hier één keer (--intro-duur leest het script voor het opruimen); alles is binnen 1,6s klaar.
   Foto opent meteen vanuit een horizontale lijn, kopregels vanaf 150ms uit hun masker (de asfaltkopie zit in de regel en reist mee), de steigerbouwer
   zakt 24px op zijn plaats, als laatste de knoppen in de balk. */
:root { --intro-duur: 1600ms; }
@media (prefers-reduced-motion: no-preference) {
  .intro .voetplaat__beeld { clip-path: inset(49.6% 0 49.6% 0); }
  .intro-go .voetplaat__beeld { animation: intro-lijn 800ms cubic-bezier(.22, 1, .36, 1) both; }
  .intro .voetplaat__kop span { clip-path: inset(-0.15em -0.1em 100% -0.1em); transform: translateY(100%); }
  .intro-go .voetplaat__kop span { animation: intro-regel 750ms cubic-bezier(.19, 1, .22, 1) 150ms both; }
  .intro-go .voetplaat__kop span + span { animation-delay: 240ms; }
  /* Het telefoonnummer in de balk doet niet mee: dat staat altijd in beeld */
  .intro .voetplaat__zin, .intro .voetplaat .knop, .intro .knop--balk, .intro .voetplaat__man img { opacity: 0; }
  .intro-go .voetplaat__zin, .intro-go .voetplaat .knop { animation: intro-in 500ms var(--ease-out) 450ms both; }
  .intro-go .voetplaat__man img { animation: intro-man 560ms var(--ease-out) 600ms both; }
  .intro-go .knop--balk { animation: intro-in 400ms var(--ease-out) 1100ms both; }
}
@keyframes intro-lijn { from { clip-path: inset(49.6% 0 49.6% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes intro-regel { from { clip-path: inset(-0.15em -0.1em 100% -0.1em); transform: translateY(100%); } to { clip-path: inset(-0.15em -0.1em 0 -0.1em); transform: none; } }
@keyframes intro-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-man { 0% { opacity: 0; transform: translateY(24px); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* Verdieping 4: deze week op de werf. Eén grote tegel van 2x2, de rest 1x1, tegen elkaar als steigervakken */
.werf-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg) var(--gap-columns); align-items: end; }
.werf-kop__tekst { display: grid; gap: var(--space-lg); }
.werf-kop h2 { font-size: var(--text-display); line-height: 0.9; overflow-wrap: break-word; min-width: 0; }
.werf-volg { padding-bottom: var(--space-2xs); color: var(--fluo); font-size: var(--text-lg); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--space-2xs); text-underline-offset: var(--space-xs); }
.werf-volg:hover { color: var(--wit); }
.werf-volg__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.werf-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-lg); }
.tegel { position: relative; display: block; width: 100%; max-width: var(--max-w, none); aspect-ratio: 3 / 4; overflow: clip; background: var(--staal); color: var(--wit); text-decoration: none; }
.tegel:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* Op desktop bepaalt het raster de maat van een tegel, niet het beeld: een staande reel van 9:16 rekt geen tegel of rij op */
@media (min-width: 47.5625rem) { .tegel img, .tegel video { position: absolute; inset: 0; } }
.tegel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tegel:focus-visible { outline: 3px solid var(--fluo); outline-offset: 3px; z-index: var(--z-base); }
/* Reels met eigen video: de video vult het vak zoals een foto; rechtsboven twee knoppen (pauzeren, geluid) van 44px.
   Zonder JS staan de knoppen er niet en heeft de video de native bediening. */
.tegel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel-knoppen { display: none; }
.js .reel-knoppen { position: absolute; z-index: 2; top: var(--space-xs); right: var(--space-xs); display: flex; gap: var(--space-2xs); }
.reel-knop { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: color-mix(in oklab, var(--asfalt), transparent 20%); color: var(--wit); cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.reel-knop:hover { background: var(--fluo); color: var(--asfalt); }
.reel-knop:focus-visible { outline: 3px solid var(--fluo); outline-offset: 2px; }
.reel-knop svg { width: 22px; height: 22px; fill: currentColor; }
.reel-knop--speel[aria-pressed="false"] .i-speel, .reel-knop--speel[aria-pressed="true"] .i-pauze,
.reel-knop--geluid[aria-pressed="false"] .i-aan, .reel-knop--geluid[aria-pressed="true"] .i-stil { display: none; }
a.tegel__tekst { display: block; color: inherit; text-decoration: none; }
a.tegel__tekst:focus-visible { outline: 3px solid var(--fluo); outline-offset: -3px; }
.tegel__label { position: absolute; top: var(--space-xs); left: var(--space-xs); padding: var(--space-3xs) var(--space-xs); background: var(--fluo); color: var(--asfalt); font-size: var(--text-sm); font-weight: 600; }
.tegel__tekst { position: absolute; inset: auto 0 0 0; padding: var(--space-sm); background: var(--vlak); border-top: var(--kantplank) solid var(--fluo); font-size: var(--text-sm); line-height: 1.35; transition: transform var(--dur-short) var(--ease-out); }
.tegel:first-child .tegel__tekst { padding: var(--space-md) var(--space-lg); font-size: var(--text-md); }
/* Met een muis ligt de caption half onder de rand en schuift omhoog; zonder muis of met minder beweging staat hij gewoon open */
@media (hover: hover) and (min-width: 47.5625rem) {
  .tegel__tekst { transform: translateY(calc(100% - var(--kantplank))); }
  .tegel:hover .tegel__tekst, .tegel:focus-visible .tegel__tekst, .tegel:focus-within .tegel__tekst { transform: translateY(0); }
  /* De grote tegel toont zijn caption altijd: de eigen woorden van de ploeg zijn de warmte van deze verdieping */
  .tegel:first-child .tegel__tekst { transform: none; }
}
@media (hover: hover) and (min-width: 47.5625rem) and (prefers-reduced-motion: reduce) { .tegel__tekst, .tegel:first-child .tegel__tekst { transform: none; transition: none; } }
/* Desktop: één grote en vier kleine tegels, twee volle rijen op één scherm. De rij op de telefoon toont ze alle negen. */
@media (min-width: 47.5625rem) { .tegel:nth-child(n + 6) { display: none; } }

/* Spookletters: één regel reuzentekst in staal-rasterpunten achter de tegels, half eronder uit, die met de scroll
   zijwaarts meeloopt. Decoratief (aria-hidden), laag contrast, onder alle inhoud; de sectie knipt opzij. */
.werf { overflow-x: clip; isolation: isolate; }
.werf-spook { position: absolute; z-index: -1; left: 0; bottom: calc(var(--section-gap) - 0.37em); font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" 62; font-size: clamp(10rem, 24vw, 24rem); line-height: 0.74; letter-spacing: -0.01em; white-space: nowrap; pointer-events: none; user-select: none;
  color: var(--staal); -webkit-mask: radial-gradient(circle, var(--asfalt) 0 1.5px, transparent 2px) 0 0 / 7px 7px; mask: radial-gradient(circle, var(--asfalt) 0 1.5px, transparent 2px) 0 0 / 7px 7px; opacity: 0.5; transform: translateX(6vw); }
@media (max-width: 47.5rem) { .werf-spook { bottom: var(--space-2xs); font-size: 26vw; -webkit-mask-size: 5px 5px; mask-size: 5px 5px; -webkit-mask-image: radial-gradient(circle, var(--asfalt) 0 1.1px, transparent 1.5px); mask-image: radial-gradient(circle, var(--asfalt) 0 1.1px, transparent 1.5px); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .werf-spook { animation: spook-loop linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
  @supports not (animation-timeline: view()) {
    .js .werf-spook { transition: transform 2400ms var(--ease-out); }
    .js .werf:has(.werf-raster.blok-in) .werf-spook { transform: translateX(calc(-50% + 50vw)); }
  }
  /* De tegels komen gestapeld binnen, 60ms na elkaar */
  .js .werf-raster.blok-wacht > .tegel { transition: transform 700ms var(--ease-out) calc(var(--i, 0) * 60ms), opacity 500ms var(--ease-out) calc(var(--i, 0) * 60ms); }
  .js .werf-raster.blok-wacht:not(.blok-in) > .tegel { transform: translateY(40px); opacity: 0; }
}
@keyframes spook-loop { from { transform: translateX(6vw); } to { transform: translateX(calc(-100% + 94vw)); } }
/* Met een muis zoomt de foto van een tegel licht in */
@media (hover: hover) and (min-width: 47.5625rem) and (prefers-reduced-motion: no-preference) {
  .tegel img { transition: transform var(--dur-long) var(--ease-out); }
  .tegel:hover img, .tegel:focus-visible img { transform: scale(1.04); }
}


/* Kop uit de kantplank (alleen als het script een verdieping klaarzet): de kantplank trekt zich van links naar rechts,
   daarna schuiven de kopregels en de andere regels 70ms na elkaar van onder hun masker. Het masker knipt alleen
   onderaan; erboven en opzij houdt de letter ruimte. */
.schuif { display: block; clip-path: inset(-0.3em -0.2em 0 -0.2em); }
:root { --kop-wacht: 300ms; --kop-stap: 70ms; --kop-duur: 900ms; }
.schuif > span { display: block; transition: transform var(--kop-duur) cubic-bezier(.19, 1, .22, 1) calc(var(--kop-wacht) + var(--i, 0) * var(--kop-stap)); }
.is-wacht:not(.is-binnen) .schuif > span { transform: translateY(140%); }
.is-wacht:not(.is-binnen) h2 .schuif > span { transform: translateY(105%); }
.verdieping.is-wacht::before { transform-origin: left; transition: transform 500ms var(--ease-out); }
.verdieping.is-wacht:not(.is-binnen)::before { transform: scaleX(0); }

/* Verdieping 1: links de belofte (kop, zin, de vier droge feiten als liggers), rechts de ploeg zelf: het eerste beeld
   met meer dan één man van Sky. De foto is 1080 breed en blijft ruim onder 1.25x. */
.wie { padding-block: var(--section-gap) var(--section-gap-l); }
.wie__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; gap: var(--space-xl) var(--gap-columns); }
.wie h2 { grid-column: 1; font-size: clamp(3.25rem, 6.6vw, 7.75rem); line-height: 0.86; max-width: 11ch; }
.wie .wie__zin { grid-column: 1; font-size: var(--text-2xl); line-height: 1.3; font-weight: 600; max-width: 30ch; }
.wie__feiten { grid-column: 1; align-self: end; max-width: 34rem; list-style: none; margin: 0; padding: 0; font-size: var(--text-lead); font-weight: 600; }
.wie__feiten li { border-top: var(--rule-hair) solid var(--staal); padding-block: var(--space-sm); }
.wie__feiten li:last-child { border-bottom: var(--rule-hair) solid var(--staal); }
.wie__foto { grid-column: 2; grid-row: 1 / -1; display: block; position: relative; aspect-ratio: 3 / 4; max-height: 82svh; justify-self: end; width: 100%; overflow: hidden; }
.wie__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 47.5rem) {
  .wie__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--space-xl); }
  .wie .wie__zin { font-size: var(--text-xl); }
  .wie__foto { grid-column: 1; grid-row: auto; max-height: none; aspect-ratio: 4 / 5; }
}

/* Verdieping 2: de markten als steigervakken. Bouw leidt over de volle hoogte, events en industrie liggen erboven elkaar
   ernaast. Staanders van ongelijke hoogte: links en in het midden lopen ze door tot de volgende verdieping, rechts begint
   de staander pas bij events. Eén ligger scheidt events van industrie. Open vakken, geen kaders. */
.markten__in { display: grid; gap: var(--space-xl); }
.markten h2 { font-size: var(--text-display); line-height: 0.9; }
.markten__vakken { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 0 var(--space-2xs); padding-inline: var(--space-2xs); }
.markt { position: relative; display: grid; gap: var(--space-md); align-content: start; padding-bottom: var(--space-xl); }
.markt--lead { grid-row: 1 / span 2; grid-template-rows: minmax(0, 1fr) auto auto; }
.markt--industrie { padding-top: var(--space-md); }
.markt__beeld { aspect-ratio: 3 / 2; overflow: clip; background: var(--staal); }
/* De leidende foto vult de hoogte van de twee vakken ernaast (bron 1080x860, nooit meer dan 1.05x) */
.markt--lead .markt__beeld { aspect-ratio: auto; min-height: 30rem; }
.markt__beeld picture { display: block; height: 100%; }
.markt__beeld img { width: 100%; height: 100%; object-fit: cover; }
.markt__beeld--bouw img { object-position: 80% 50%; }
.markt--events .markt__beeld img { object-position: 50% 55%; }
.markt--industrie .markt__beeld img { object-position: 50% 65%; }
.markt h3, .markt__lijst { padding-inline: var(--space-lg); }
.markt h3 { font-size: var(--text-display-s); line-height: 0.9; margin-top: var(--space-sm); }
.markt--lead h3 { font-size: var(--text-display); }
.markt__lijst { list-style: none; margin: 0; font-size: var(--text-lead); line-height: 1.45; }
@media (max-width: 47.5rem) {
  .markten__vakken { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: 0; margin-inline: calc(-1 * var(--gutter)); }
  .markt--lead { grid-row: auto; grid-template-rows: none; }
  .markt + .markt { padding-top: 0; }
  .markt__beeld, .markt--lead .markt__beeld { aspect-ratio: 4 / 5; min-height: 0; }
  .markt h3, .markt__lijst { padding-inline: var(--gutter); }
}
/* Velden die inzwaaien: elk vak zwaait op zijn linkerrand dicht, van 14 graden naar plat, gescrubd op de scroll.
   Zonder scroll-timeline speelt hetzelfde één keer bij binnenkomst. Telefoon: geen 3D. */
@media (prefers-reduced-motion: no-preference) and (min-width: 47.5625rem) {
  .js .markten__vakken { perspective: 1800px; perspective-origin: 0 40%; }
  .js .markt { transform-origin: 0 50%; }
  @supports (animation-timeline: view()) {
    .js .markten__vakken { view-timeline: --vakken block; }
    .js .markt { animation: vak-zwaai linear both; animation-timeline: --vakken; }
    .js .markt--lead { animation-range: entry 16% entry 62%; }
    .js .markt--events { animation-range: entry 22% entry 58%; }
    .js .markt--industrie { animation-range: entry 40% entry 82%; }
  }
  @supports not (animation-timeline: view()) {
    .markten__vakken.blok-wacht .markt { transition: transform 1000ms var(--ease-out) calc(350ms + var(--i, 0) * 120ms); }
    .markten__vakken.blok-wacht:not(.blok-in) .markt { transform: rotateY(14deg); }
  }
}
@keyframes vak-zwaai { from { transform: rotateY(14deg); animation-timing-function: cubic-bezier(.25, .7, .35, 1); } to { transform: none; } }


/* Verdieping 3: de piek. De foto opent van een veld tot de volle schermhoogte; de zin staat ernaast op asfalt.
   Zonder script of met reduced motion: foto meteen open, zin zichtbaar, niets gepind. */
.piek { padding: 0; }
.piek::before { content: none; }
.piek__plaats { position: sticky; top: var(--balk-hoogte); height: calc(100vh - var(--balk-hoogte)); height: calc(100svh - var(--balk-hoogte)); min-height: 480px; overflow: clip; }
/* Desktop: de foto opent tot de volle breedte binnen de gutters, nooit breder dan 1.25x zijn 1080px */
.piek__beeld { --breed: min(calc(100% - 2 * var(--gutter)), 1350px); position: absolute; top: 0; bottom: 0; left: calc((100% - var(--breed)) / 2); width: var(--breed); background: var(--staal); }
.piek__foto, .piek__foto img { display: block; width: 100%; height: 100%; }
.piek__foto img { max-width: none; object-fit: cover; object-position: 50% 22%; transform-origin: 50% 22%; }
.piek .piek__zin { position: absolute; z-index: 2; left: var(--space-lg); bottom: var(--space-lg); right: var(--space-lg); font-size: clamp(2.25rem, 4.6vw, 5.5rem); line-height: 0.88; }
.piek__zin > span { display: block; width: fit-content; max-width: 100%; padding: var(--space-lg) var(--space-xl); background: var(--vlak); }
@media (max-width: 47.5rem) {
  .piek__beeld { --breed: 100%; left: 0; top: var(--space-2xs); }
  .piek .piek__zin { left: var(--gutter); right: var(--gutter); bottom: var(--gutter); font-size: clamp(2.25rem, 9vw, 4.5rem); }
  .piek__foto img { object-position: 50% 50%; transform-origin: 50% 50%; }
}
@media (prefers-reduced-motion: no-preference) {
  .piek.is-klaar { height: 220vh; }
  .piek.is-klaar .piek__beeld { clip-path: inset(8% 22%); } /* beginstand; het script schrijft de inset op dit beeld */
  .piek.is-klaar .piek__zin { overflow: clip; }
  .piek.is-klaar .piek__zin > span { transform: translateY(110%); transition: transform 600ms var(--ease-out); }
  .piek.is-klaar.is-zin .piek__zin > span { transform: none; }
}

/* Telefoon: één rij die zijwaarts schuift en vastklikt; de volgende tegel steekt er half bij uit */
@media (max-width: 47.5rem) {
  .werf-kop { grid-template-columns: minmax(0, 1fr); }
  .werf-volg { justify-self: start; }
  .werf-raster { display: flex; gap: var(--space-xs); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-xs) var(--gutter) var(--space-md); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--fluo) var(--asfalt); }
  .tegel, .tegel:first-child { flex: 0 0 min(68%, var(--max-w, 100%)); width: auto; aspect-ratio: auto; scroll-snap-align: start; }
  .tegel img, .tegel video { height: auto; aspect-ratio: 3 / 4; }
  .tegel__tekst, .tegel:first-child .tegel__tekst { position: static; padding: var(--space-sm) 0 0; background: none; border-top: 0; font-size: var(--text-md); transition: none; }
  .tegel { overflow: visible; background: none; }
}
@media (max-width: 40rem) { .knop { justify-self: stretch; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .knop { transition: none; } .knop:hover { transform: none; } .schuif > span, .is-wacht:not(.is-binnen) .schuif > span { transform: none; transition: none; } }

/* Verdieping 5: kom bij de ploeg. Fluo vlak, de tekst links in asfalt; de steigerbouwer staat rechts in een asfaltvak
   zodat zijn gele hoodie niet in het fluo oplost. Het vak loopt tot de volgende verdieping, zoals de fotokolom in de hero. */
.ploeg { padding-bottom: 0; background: var(--fluo); color: var(--asfalt); }
.ploeg :focus-visible { outline-color: var(--asfalt); }
.ploeg__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.ploeg__tekst { display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--section-gap); }
.ploeg h2 { font-size: clamp(3.25rem, 6vw + 1rem, 7.5rem); line-height: 0.86; }
.ploeg .ploeg__tekst p { max-width: 36ch; font-size: var(--text-xl); line-height: 1.4; }
.ploeg__link { display: inline-block; padding-block: var(--space-xs); color: var(--asfalt); font-size: var(--text-lg); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--space-2xs); text-underline-offset: var(--space-xs); }
.ploeg__link:hover { background: var(--asfalt); color: var(--fluo); box-shadow: 0 0 0 var(--space-xs) var(--asfalt); }
/* Het beeld is de onversneden werffoto (820x1020): cover in het vak, nooit groter dan 1.25x native */
.ploeg__beeld { position: relative; height: clamp(520px, calc(100vh - var(--balk-hoogte) - var(--section-gap-s)), 860px); height: clamp(520px, calc(100svh - var(--balk-hoogte) - var(--section-gap-s)), 860px); overflow: clip; background: var(--staal); }
.ploeg__beeld picture, .ploeg__beeld img { display: block; width: 100%; height: 100%; }
.ploeg__beeld img { max-width: none; object-fit: cover; object-position: 22% 30%; }
/* Op het gele vlak is de kantplank asfalt, zodat de kop uit de kantplank ook hier leest */
.ploeg::before { background: var(--asfalt); }
/* Lift: de foto onthult zich van onder naar boven, gescrubd terwijl het vak binnenkomt (anders één keer bij binnenkomst) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .ploeg__beeld { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
  @supports not (animation-timeline: view()) {
    .ploeg__beeld.blok-wacht { transition: clip-path 1100ms var(--ease-in-out); }
    .ploeg__beeld.blok-wacht:not(.blok-in) { clip-path: inset(100% 0 0 0); }
  }
}
@keyframes lift { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 47.5rem) {
  .ploeg__in { grid-template-columns: minmax(0, 1fr); }
  .ploeg__tekst { padding-bottom: 0; }
  .ploeg__beeld { height: min(125vw, 640px); margin-inline: calc(-1 * var(--gutter)); }
}

/* Verdieping 6: bovenaan. Rechts een steigerbouwer op het dek van een podium in open lucht, vanaf de kantplank naar beneden (het spiegelbeeld van de
   fotokolom in de hero). Links het hoogste platform: de oproep erin,
   en onderaan de gele kantplank met de asfalt vloer. Statisch. */
.contact { padding: 0; }
.contact__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); min-height: calc(100vh - var(--balk-hoogte)); min-height: calc(100svh - var(--balk-hoogte)); }
.contact__platform { position: relative; align-self: end; display: grid; gap: var(--space-xl); margin-block: var(--space-2xl) var(--space-3xl); margin-right: calc(-1 * var(--gap-columns)); padding: 0 calc(var(--space-xl) + var(--gap-columns)) var(--space-xl) var(--space-xl); border-bottom: var(--kantplank) solid transparent; box-shadow: 0 var(--space-md) 0 var(--asfalt); }
/* Kantplank en dek lopen door tot in de steiger op de foto */
.contact__platform::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--kantplank)); height: var(--kantplank); background: var(--fluo); }
.contact__oproep { display: grid; gap: var(--space-lg); justify-items: start; }
.contact h2 { font-size: clamp(3rem, 4.5vw + 1rem, 6.5rem); line-height: 0.86; }
.contact .contact__oproep p { font-size: var(--text-xl); line-height: 1.4; }
.contact .knop { margin-top: var(--space-xs); box-shadow: inset 0 0 0 2px var(--asfalt); }
.contact__gegevens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); margin: 0; }
.contact__gegevens > div { padding-top: var(--space-sm); border-top: 2px solid var(--asfalt); }
.contact__gegevens .contact__bellen { grid-column: 1 / -1; }
.contact__gegevens dt { font-size: var(--text-md); }
.contact__gegevens dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.contact__bellen dd { white-space: nowrap; font-size: clamp(var(--text-2xl), 2vw + 1rem, var(--text-3xl)); font-variant-numeric: tabular-nums; }
.contact__gegevens a { text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.contact__gegevens a:hover { text-decoration-thickness: var(--space-2xs); }
/* Vanaf het dek: de foto is 1080 breed, de kolom wordt nooit breder dan 1350 CSS-px (1.25x) */
/* De fotokolom loopt zoals in de hero door tot de rechterrand, nooit breder dan 1.25x de 1080px van de bron */
.contact { container-type: inline-size; }
.contact__beeld { position: relative; max-width: 1350px; margin-top: var(--kantplank); margin-right: calc(-1 * (var(--gutter) + max(0px, (100cqw - var(--container)) / 2))); overflow: clip; background: var(--beton); }
.contact__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 42% 50%; }
@media (max-width: 60rem) { .contact__gegevens { grid-template-columns: minmax(0, 1fr); } }
/* Laatste ligger, na de kop: eerst de kantplank van de verdieping en de kop (koponthulling), 600ms na de start van de
   kop schuift de kantplank onder het dek van links in. Het blok wacht ook op de kop van #contact als die nog moet komen.
   De knop klemt bij indrukken en een fluo rand flitst even op. */
:root { --dek-wacht: calc(var(--kop-wacht) + 600ms); }
@media (prefers-reduced-motion: no-preference) {
  .contact__platform.blok-wacht::after { transform-origin: 0 50%; transition: transform 480ms var(--ease-out) var(--dek-wacht); }
  .contact__platform.blok-wacht:not(.blok-in)::after, .contact.is-wacht:not(.is-binnen) .contact__platform.blok-wacht::after { transform: scaleX(0); }
  .contact .knop { position: relative; }
  .contact .knop::after { content: ""; position: absolute; inset: calc(-1 * var(--space-xs)); border: 3px solid var(--fluo); box-shadow: 0 0 0 1px var(--asfalt), inset 0 0 0 1px var(--asfalt); opacity: 0; transform: scale(1.05); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); pointer-events: none; }
  .contact .knop:active { transform: scale(0.97); }
  .contact .knop:active::after { opacity: 1; transform: none; transition-duration: 0s; }
}
@media (max-width: 47.5rem) {
  .contact__in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: var(--section-gap); }
  .contact .knop { padding-inline: var(--space-md); }
  .contact__beeld { height: min(125vw, 600px); margin-inline: calc(-1 * var(--gutter)); max-width: none; }
  .contact__platform { margin-block: var(--space-2xl) 0; margin-right: calc(-1 * var(--gutter)); padding: 0 calc(var(--space-lg) + var(--gutter)) var(--space-lg) var(--space-lg); }
}

/* Footer: geen verdieping, de grond onder de steiger. Logo, gegevens en de links naar de huidige site */
.voet { padding-block: var(--space-3xl) var(--space-2xl); background: var(--korrel), url(../assets/img/voet-bodem.jpg) center / cover, var(--vlak); color: var(--wit); }
.voet__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.voet__merk { display: grid; gap: var(--space-lg); justify-items: start; }
.voet__merk img { width: clamp(200px, 18vw, 260px); height: auto; }
.voet__merk p { font-size: var(--text-md); color: var(--beton); }
.voet__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--space-lg) var(--gap-columns); }
.voet__nav ul { list-style: none; margin: 0; padding: 0; }
.voet__nav a { display: inline-block; padding-block: var(--space-xs); font-size: var(--text-md); text-decoration: none; }
.voet__nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--fluo); }
@media (max-width: 60rem) {
  .voet__in { grid-template-columns: minmax(0, 1fr); }
}
/* Onthulling: de footer ligt sticky onder de pagina en het slot schuift er omhoog vanaf. Alleen als het script gemeten
   heeft dat de footer helemaal onder de balk past (html.voet-onthul); anders gewoon in de stroom. */
@media (prefers-reduced-motion: no-preference) {
  .voet-onthul main { position: relative; z-index: var(--z-base); background: var(--vlak); }
  .voet-onthul .voet { position: sticky; bottom: 0; z-index: 0; }
}