@font-face{font-family:'Agharti';src:url('assets/fonts/Agharti-BlackSemiCondensed.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Agharti Cond';src:url('assets/fonts/Agharti-BlackCondensed.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/fonts/space-mono-v17-latin-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/fonts/space-mono-v17-latin-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --paper:#EAE9E6;--ink:#161616;--orange:#F9460E;
  --mono:'Space Mono',monospace;--display:'Agharti',sans-serif;--logo:'Agharti Cond',sans-serif;
  --wmask:url("data:image/png;base64,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");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--mono);overflow-x:clip}

/* ===== shared motion primitives ===== */
.line{display:block;overflow:hidden}
.line-inner{display:block}
a .line,a .line-inner{display:inline-block}
.arrow-mask{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:middle;position:relative;top:.05em}
.arrow-mask .arrow{display:inline-block;animation:arrow-cycle 2.6s cubic-bezier(.16,1,.3,1) infinite}
/* The scroll arrow used to be a GSAP loop that accelerated downward and then
   snapped back to its start position — the snap is what read as cheap. Both
   ends of this cycle sit outside the 1em mask, so the wrap is never seen. */
@keyframes arrow-cycle{
  0%   {transform:translateY(-130%)}
  26%  {transform:translateY(0)}
  74%  {transform:translateY(0)}
  100% {transform:translateY(130%)}
}
@media (prefers-reduced-motion:reduce){.arrow-mask .arrow{animation:none}}

/* DE REGISTRATIE-PAS. The orange twin sits under the ink copy in the same box,
   offset a tenth of an em while the pass runs. Both layers live inside .line,
   which already clips, so a twin that has not printed yet shows nothing.
   Built in JS: with reduced motion or without it, neither of these rules has
   anything to match and the heading is one colour, printed once. */
.line.has-register{position:relative}
.reg-ghost{
  position:absolute;top:0;left:0;
  color:var(--orange);
  pointer-events:none;
  /* aria-hidden keeps it out of the accessibility tree; user-select keeps it
     out of the clipboard. Without this, selecting the heading copies it twice */
  -webkit-user-select:none;user-select:none;
  white-space:nowrap;
  will-change:transform,clip-path;
}
.has-register .line-inner{position:relative;z-index:1;margin-top:0}

.skip-link{position:absolute;top:-40px;left:0;background:var(--orange);color:var(--ink);padding:8px;text-decoration:none;z-index:100}
.skip-link:focus{top:0}

:focus-visible{outline:2px solid var(--orange)}

/* ============================================================ CUSTOM CURSOR (global — sits over every section) ============================================================ */
#vorm-cursor{
  position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--ink);border:1px solid var(--paper);
  pointer-events:none;z-index:9999;opacity:0;
  transform:translate3d(var(--cx,0),var(--cy,0),0) translate(-50%,-50%);
  transition:opacity .2s ease,width .22s cubic-bezier(.16,1,.3,1),height .22s cubic-bezier(.16,1,.3,1),background-color .16s ease,border-color .16s ease;
  will-change:width,height;
  display:flex;align-items:center;justify-content:center;
}
#vorm-cursor.is-visible{opacity:1}
#vorm-cursor.is-active{width:40px;height:40px;background:var(--paper);border:1px solid var(--ink)}
#vorm-cursor-label{font:400 9px/1 var(--mono);letter-spacing:.08em;color:var(--ink);text-transform:uppercase;opacity:0;transition:opacity .15s ease;white-space:nowrap}
#vorm-cursor.is-active #vorm-cursor-label{opacity:1}
@media (hover:hover) and (pointer:fine){
  body.vorm-cursor-on .proj-row,body.vorm-cursor-on .aanpak-row-head{cursor:none}
}
@media (hover:none),(pointer:coarse){#vorm-cursor{display:none}}
@media (prefers-reduced-motion:reduce){#vorm-cursor{transition:opacity .2s ease}}

/* ============================================================ LOADING SCREEN
   The page animates nothing but its orange blocks, so the loader is one too:
   a paper sheet with a spec-sheet readout, an orange rule that fills as the
   assets land, and then that same orange flooding the frame and wiping off to
   the right — the identical direction every orange panel on the page opens in.
   ============================================================ */
html.is-loading,html.is-loading body{overflow:hidden;height:100%}
html.is-loading #vorm-cursor{display:none}

#loader{
  position:fixed;inset:0;z-index:10000;background:var(--paper);color:var(--ink);
  --p:0;
}
/* Two identical sheets stacked on top of each other: the paper one, and an
   orange one clipped to nothing. The flood is that second sheet un-clipping
   from the bottom, so the type inverts to paper exactly along the rising
   edge instead of being swallowed by a blank orange field. */
.l-sheet{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(20px,3.2vw,54px);
}
.l-top,.l-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.l-bottom{align-items:flex-end;padding-bottom:clamp(14px,1.6vw,26px);border-bottom:1px solid currentColor}

.l-mark{
  font-family:var(--logo);font-size:clamp(26px,3.2vw,58px);line-height:.82;
  letter-spacing:.02em;text-transform:uppercase;
}
.l-cap,.l-meta{
  font:400 clamp(9px,.72vw,12px)/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;
}
.l-cap{text-align:right;max-width:40%}
.l-meta{padding-bottom:clamp(6px,.9vw,14px)}
/* A counter must not move while it counts.

   `font-variant-numeric:tabular-nums` was already declared here and was doing
   absolutely nothing: tnum is an OpenType feature the FONT has to contain, and
   Agharti does not. Measured 2026-07-30 with `_tools/.scratch-digits.mjs`: the
   ten digits span 21.6px of advance at 200px, about 11%, so the readout shifted
   on nearly every tick while the CSS looked correct.

   Fixed cells instead, which works whatever the face turns out to be. 1ch is by
   definition the advance of "0", and "0" is the widest digit in this font, so
   every digit fits its cell exactly and none of them shift. The declaration
   below stays for faces that do carry tnum. */
.l-count{
  font-family:var(--display);font-size:clamp(76px,19vw,300px);line-height:.74;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
  /* the readout is the one thing on the sheet that changes, so it gets the
     orange rather than the ink */
  color:var(--orange);
}

/* the progress rule, sitting on the hairline under the readout */
.l-bar{
  position:absolute;left:clamp(20px,3.2vw,54px);right:clamp(20px,3.2vw,54px);
  bottom:clamp(20px,3.2vw,54px);height:clamp(5px,.5vw,9px);background:var(--orange);
  transform:scaleX(var(--p));transform-origin:left center;
  will-change:transform;
}

.l-flood{
  background:var(--orange);color:var(--paper);
  clip-path:inset(100% 0 0 0);
  transition:clip-path .62s cubic-bezier(.16,1,.3,1);
  will-change:clip-path;
}
.l-flood .l-count{color:var(--paper)}
.l-digit{display:inline-block;width:1ch;text-align:center}
.l-flood .l-bar{background:var(--paper);transform:scaleX(1)}
#loader.is-flooded .l-flood{clip-path:inset(0 0 0 0)}

#loader{clip-path:inset(0 0 0 0);transition:clip-path .72s cubic-bezier(.16,1,.3,1)}
#loader.is-gone{clip-path:inset(0 0 0 100%)}

@media (max-width:700px){
  .l-cap{display:none}
  /* the vw-driven mark bottoms out at its floor on a phone, which leaves the
     top of the sheet too quiet against the readout: give it its own scale */
  .l-mark{font-size:clamp(34px,11vw,54px)}
  .l-count{font-size:clamp(64px,26vw,150px)}
}
@media (prefers-reduced-motion:reduce){
  .l-flood,#loader{transition:none}
  #loader.is-dismissed{opacity:0;transition:opacity .2s ease}
}

/* ============================================================ REGISTRATIEBALK
   The sticky bar is a press gauge, not a floating menu. Three rules govern it:
   it prints rather than slides (the plate wipes down from the top edge), the
   sheet name is eaten from the left and grows back from the left, and the run
   rule fills left to right. Ink ground, because the accent is only legible on
   ink: orange on paper is 2.93:1, orange on ink is 5.09:1.
   It lives outside #hero, so it cannot use cqw — the dock has no container. */
#dock{
  position:fixed;top:0;left:0;right:0;z-index:60;
  pointer-events:none;
  clip-path:inset(0 0 100% 0);
  /* visibility, not just the clip: a clipped element still hands the DOM probe
     a full set of line boxes, so six dock text runs were reported as occluded
     copy at the top of the page while nothing was painted. Delayed to the end
     of the wipe so the plate is still drawn while it lifts. */
  visibility:hidden;
  transition:clip-path .52s cubic-bezier(.16,1,.3,1),visibility 0s linear .52s;
}
#dock.is-docked{
  clip-path:inset(0 0 0 0);pointer-events:auto;visibility:visible;
  transition:clip-path .52s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s;
}

#dock-plate{
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;
  gap:clamp(14px,2.4vw,44px);
  padding:clamp(9px,.85vw,16px) clamp(16px,2vw,32px);
}

#dock-brand{display:flex;align-items:center;gap:clamp(7px,.65vw,12px)}

/* h3-wmark.webp is a photograph of the printed mark and it needs no filter at
   all: measured over the whole file, 67.8% of it is within 18 luma of the plate
   ink and 31.1% is paper. It is an ink field carrying a paper W, which is
   already the dock's own palette, so it drops onto the plate as a cut-out.
   Do not "fix" this with invert(1). Four corner samples read the thin paper
   margin and describe the file as the reverse of what it is; inverting on that
   basis puts a pale rectangle on the bar. The margin is the only thing that
   needs handling, hence the inset clip. Height is capped under the plate's
   content box so the bar height stays what the spec and the allowlist pin. */
#dock-wmark{
  height:clamp(13px,1.05vw,19px);width:auto;display:block;
  clip-path:inset(6%);
  flex:0 0 auto;
}

#dock-mark{
  font-family:var(--logo);
  font-size:clamp(13px,1.15vw,21px);
  line-height:1;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}

/* the readout. The swap is a clip, not a crossfade: the name is eaten from the
   left and grows back from the left, so the change reads as a wipe. */
#dock-sheet{
  flex:0 1 auto;display:flex;align-items:baseline;gap:.7em;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(9px,.6vw,12px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);white-space:nowrap;
}
/* the fixed prefix stays put while only the name changes, so the eye has an
   anchor to read the swap against */
#dock-sheet::before{
  content:'Vel';color:var(--paper);opacity:.45;
}
.dock-sheet-in{display:block}

#dock-nav{display:flex;gap:clamp(11px,1.5vw,28px);margin-left:auto}
#dock-nav a{
  position:relative;isolation:isolate;
  font-family:var(--mono);
  font-size:clamp(9px,.6vw,12px);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;white-space:nowrap;
  --ink-l:0%;--ink-r:100%;
  transition:color .16s cubic-bezier(.16,1,.3,1);
}
/* same plate mechanism as the CTAs, inverted: paper laid onto ink */
#dock-nav a::before{
  content:'';position:absolute;inset:-.45em -.6em;z-index:-1;pointer-events:none;
  background:var(--paper);
  clip-path:inset(0 var(--ink-r) 0 var(--ink-l));
  transition:--ink-r .3s cubic-bezier(.16,1,.3,1);
}
#dock-nav a:hover,#dock-nav a:focus-visible{color:var(--ink)}
#dock-nav a:hover::before,#dock-nav a:focus-visible::before{--ink-r:0%}
#dock-nav a.is-current{color:var(--orange)}
#dock-nav a.is-current:hover,#dock-nav a.is-current:focus-visible{color:var(--ink)}

#dock-run{height:2px;background:rgba(22,22,22,.16)}
#dock-run-fill{
  display:block;height:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}

/* anchor jumps must not land under the plate */
section[data-sheet],footer[data-sheet]{scroll-margin-top:clamp(44px,5vw,72px)}

@media (max-width:719px){
  #dock-sheet{display:none}
  #dock-nav{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  #dock{transition:none}
  #dock-nav a::before{transition:none}
}

/* ============================================================ HERO ============================================================ */
#hero{
  container-type:inline-size;
  position:relative;
  z-index:0;
  width:100%;
  aspect-ratio:2688/1520;
  background:var(--paper);
  margin:0;
  padding:0;
  overflow:hidden;
  --ratio:0.565476; /* 1520/2688 : converts a %-of-height value to cqw */
  font-family:var(--mono);
  color:var(--ink);
}

/* shared geometry marker: each element's own rule below sets its exact
   left/top(/width/height) as calc(<layout-map %> [* var(--ratio)] * 1cqw) —
   t/h values are multiplied by --ratio (1520/2688) since layout-map's
   top/height are %-of-image-HEIGHT while the container only exposes cqw. */
#hero .g{
  position:absolute;
}

#hero *{box-sizing:border-box;}

#hero .mono-label{
  font-family:var(--mono);
  font-weight:400;
  letter-spacing:0.08em;
  color:var(--ink);
  text-transform:uppercase;
  white-space:nowrap;
  margin:0;
  padding:0;
}

#hero .rule{
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:var(--ink);
  transform-origin:left center;
}

/* Bumped from the inherited label size and to 700: at 400 and roughly 9px these
   were the smallest, lightest type in the hero, which is the wrong end of the
   scale for the two things the hero is asking you to do. */
#hero .link-underline{
  font-family:var(--mono);
  font-size:.82cqw;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:calc(0.3 * 1cqw);
  display:inline-block;
}
#hero .link-underline .arrow{display:inline-block;transition:transform .2s ease;}
#hero-link-projects:hover .arrow{transform:translateX(-8%) scale(1);}

/* HEADER */
#hero-logo{
  left:calc(2.0 * 1cqw);
  top:calc(2.5 * var(--ratio) * 1cqw);
  font-family:var(--logo);
  font-size:calc(1.14 * 1cqw);
  font-weight:400;
  line-height:0.92;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

#hero-tagline{
  left:calc(43.5 * 1cqw);
  top:calc(3.9 * var(--ratio) * 1cqw);
  font-size:calc(0.65 * 1cqw);
}

#hero-nav a{
  position:absolute;
  top:calc(3.9 * var(--ratio) * 1cqw);
  font-family:var(--mono);
  font-weight:400;
  font-size:calc(0.65 * 1cqw);
  letter-spacing:0.08em;
  color:var(--ink);
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0% 1px;
  transition:background-size .3s cubic-bezier(.65,0,.35,1);
  padding-bottom:0.15em;
}
#hero-nav a:hover{background-size:100% 1px;}
#hero-nav a:nth-child(1){ left:calc(74.7 * 1cqw); }
#hero-nav a:nth-child(2){ left:calc(81.9 * 1cqw); }
#hero-nav a:nth-child(3){ left:calc(88.0 * 1cqw); }
#hero-nav a:nth-child(4){ left:calc(94.1 * 1cqw); }

#hero-sep-top{ top:calc(7.7 * var(--ratio) * 1cqw); }

/* H1 */
#hero-h1{
  left:calc(2.0 * 1cqw);
  top:calc(15.2 * var(--ratio) * 1cqw);
  width:calc(36 * 1cqw);
  font-family:var(--display);
  font-size:calc(8.1 * 1cqw);
  font-weight:400;
  line-height:0.9;
  letter-spacing:0.02em;
  text-transform:uppercase;
  margin:0;
  padding:0;
}

/* INTRO */
#hero-intro{
  left:calc(2.0 * 1cqw);
  top:calc(43.2 * var(--ratio) * 1cqw);
  width:calc(21 * 1cqw);
  font-size:calc(0.68 * 1cqw);
  font-weight:400;
  line-height:1.7;
  letter-spacing:0.02em;
  text-transform:none;
  margin:0;
  padding:0;
}

/* LINK PROJECTS */
#hero-link-projects{
  left:calc(2.0 * 1cqw);
  top:calc(51.4 * var(--ratio) * 1cqw);
  font-size:calc(0.68 * 1cqw);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* PHOTO A */
#hero-photo-a{
  left:calc(50.6 * 1cqw);
  top:calc(11.05 * var(--ratio) * 1cqw);
  width:calc(34.1 * 1cqw);
  height:calc(40.5 * var(--ratio) * 1cqw);
  overflow:hidden;
}
#hero-photo-a img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:100% 50%;
  transform:scale(1.08);
  transform-origin:center;
  display:block;
}

/* SPECIALISATIES */
#hero-specialisaties-label{
  left:calc(86.6 * 1cqw);
  top:calc(28.9 * var(--ratio) * 1cqw);
  font-size:calc(0.62 * 1cqw);
}
.hero-spec-item{
  position:absolute;
  left:calc(86.6 * 1cqw);
  font-size:calc(0.62 * 1cqw);
}
#hero-spec-1{ top:calc(33.6 * var(--ratio) * 1cqw); }
#hero-spec-2{ top:calc(36.5 * var(--ratio) * 1cqw); }
#hero-spec-3{ top:calc(39.4 * var(--ratio) * 1cqw); }
#hero-spec-4{ top:calc(42.3 * var(--ratio) * 1cqw); }

/* LINK MEER OVER ONS */
#hero-link-over{
  left:calc(86.6 * 1cqw);
  top:calc(50.2 * var(--ratio) * 1cqw);
  font-size:calc(0.62 * 1cqw);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* BOTTOM BAND */
#hero-orange-panel{
  left:calc(1.9 * 1cqw);
  top:calc(55.0 * var(--ratio) * 1cqw);
  width:calc(27.1 * 1cqw);
  height:calc(35.8 * var(--ratio) * 1cqw);
  background:var(--orange);
  color:var(--ink);
  padding:calc(1.1 * 1cqw);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
#hero-orange-text{
  font-size:calc(0.7 * 1cqw);
  font-weight:400;
  line-height:1.55;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:0;
  padding:0;
}
#hero-orange-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
#hero-orange-010{
  font-size:calc(0.62 * 1cqw);
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:calc(0.6 * 1cqw);
}
#hero-orange-010 span.dash{
  display:inline-block;
  width:calc(4.5 * 1cqw);
  height:1px;
  background:var(--ink);
}
#hero-orange-scroll{
  font-size:calc(0.62 * 1cqw);
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:inline-block;
}
#hero-orange-scroll .arrow{display:inline-block;}

/* PHOTO B */
#hero-photo-b{
  left:calc(30.3 * 1cqw);
  top:calc(55.0 * var(--ratio) * 1cqw);
  width:calc(39.4 * 1cqw);
  height:calc(35.8 * var(--ratio) * 1cqw);
  overflow:hidden;
}
#hero-photo-b img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 30%;
  display:block;
}

/* W-MARK */
#hero-wmark{
  left:calc(71.0 * 1cqw);
  top:calc(54.8 * var(--ratio) * 1cqw);
  width:calc(27.3 * 1cqw);
  height:calc(36.3 * var(--ratio) * 1cqw);
}
#hero-wmark img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

#hero-sep-bottom{ top:calc(93.5 * var(--ratio) * 1cqw); }

/* FOOT-STRIP */
#hero-footer-left{
  left:calc(2.0 * 1cqw);
  top:calc(95.3 * var(--ratio) * 1cqw);
  font-size:calc(0.62 * 1cqw);
}
#hero-footer-center{
  left:calc(50 * 1cqw);
  top:calc(95.3 * var(--ratio) * 1cqw);
  font-size:calc(0.62 * 1cqw);
  transform:translateX(-50%);
}
#hero-footer-right{
  left:calc(98.1 * 1cqw);
  top:calc(95.3 * var(--ratio) * 1cqw);
  font-size:calc(0.62 * 1cqw);
  transform:translateX(-100%);
}

/* Responsive: below 1000px viewport, flex-column stack, same order */
@media (max-width:999px){
  #hero{
    aspect-ratio:auto;
    height:auto;
  }
  #hero-header-wrap{
    position:relative !important;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:2cqw;
    left:0 !important; top:0 !important; width:100% !important; height:auto !important;
    padding:4cqw 4cqw;
    border-bottom:1px solid var(--ink);
  }
  #hero-sep-top{ display:none; }
  #hero-logo{ position:relative !important; left:0 !important; top:0 !important; font-size:5cqw; }
  #hero-tagline{ display:none; }
  #hero-nav{ position:relative !important; display:flex; gap:4cqw; }
  #hero-nav a{ position:relative !important; left:0 !important; top:0 !important; font-size:2.6cqw; }

  #hero-body-flow{
    position:relative !important;
    display:flex;
    flex-direction:column;
    gap:6cqw;
    padding:6cqw 4cqw;
    left:0 !important; top:0 !important; width:100% !important; height:auto !important;
  }
  #hero-h1, #hero-intro, #hero-link-projects, #hero-photo-a,
  #hero-specialisaties-label, .hero-spec-item, #hero-link-over{
    position:relative !important; left:0 !important; top:0 !important; width:100% !important; height:auto !important;
  }
  #hero-h1{ font-size:14cqw; }
  #hero-intro{ font-size:2.6cqw; }
  #hero-link-projects, #hero-link-over{ font-size:2.6cqw; }
  #hero-photo-a{ aspect-ratio:914/616; }
  #hero-specialisaties-label{ font-size:2.4cqw; }
  .hero-spec-item{ font-size:2.4cqw; margin-top:2cqw; }

  #hero-bottom-band{
    position:relative !important;
    display:flex;
    flex-direction:column;
    gap:3cqw;
    padding:0 4cqw 6cqw;
    left:0 !important; top:0 !important; width:100% !important; height:auto !important;
  }
  #hero-orange-panel, #hero-photo-b, #hero-wmark{
    position:relative !important; left:0 !important; top:0 !important; width:100% !important; height:auto !important;
  }
  #hero-orange-panel{ aspect-ratio:305/358; }
  #hero-orange-text{ font-size:3.2cqw; }
  #hero-orange-010, #hero-orange-scroll{ font-size:2.6cqw; }
  #hero-photo-b{ aspect-ratio:1048/544; }
  #hero-wmark{ aspect-ratio:734/552; }

  #hero-sep-bottom{ display:none; }
  #hero-footer-flow{
    position:relative !important;
    display:flex;
    flex-direction:column;
    gap:2cqw;
    padding:4cqw;
    left:0 !important; top:0 !important; width:100% !important; height:auto !important;
    border-top:1px solid var(--ink);
  }
  #hero-footer-left, #hero-footer-center, #hero-footer-right{
    position:relative !important; left:0 !important; top:0 !important; transform:none !important; font-size:2.6cqw;
  }
}

/* ============================================================ EXTENSIONS: PROJECTEN / AANPAK / MARQUEE ============================================================ */

/* ===== shared row/rule primitives ===== */
#projecten,#aanpak,#marquee{container-type:inline-size;position:relative;background:var(--paper)}
#projecten{z-index:2}
#aanpak{z-index:1}
#marquee{z-index:1}

#projecten .rule,#aanpak .rule{height:1px;background:var(--ink);width:100%;transform-origin:left center}

/* ===== PROJECTEN — interactive index ===== */
#projecten{padding:0 2cqw}

#projecten-head{display:flex;justify-content:space-between;align-items:baseline;padding:3.2cqw 0 1.4cqw}
#projecten-index{font:700 .85cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
#projecten-meta{font:.72cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.72}
#projecten-rules{display:flex;flex-direction:column;gap:3px;margin-bottom:.1cqw}

#projecten-list{position:relative}

/* ===== DE INKTGANG =====
   The row's ink is a plate that travels, not a background that switches. One
   mechanism serves two moments, which is why it reads as the row's own
   behaviour rather than as two effects that happen to share a colour:

     hover      the plate wipes IN from the left and sits under the pointer
     unhover    it retreats the way it came

   The old version switched `background-color`, which is a state change: it has
   no direction and no travel, so the row read as a colour toggle rather than as
   something being printed.

   This ran as the row's ENTRANCE too for a while, each row taking a full
   plate-in / hold / plate-out on arrival. It was removed on request and the
   request was right: a black bar stamping across a row nobody pointed at reads
   as the page highlighting itself. The plate is a reward for the pointer now.
   --ink-l survives because the mechanism is written to travel either way, which
   is what the entrance used; leaving it costs nothing and the day this wants a
   pass-through gesture again it is one tween.

   @property is what makes these interpolable at all: without the syntax
   declaration a browser treats `--ink-r` as an opaque string and the transition
   lands as a single jump at the end. */
/* inherits:true is load-bearing, not a default anyone should tidy away. The
   plate is a ::before, so the value has to travel one level down from the row.
   GSAP can only animate the property on the row itself, and with inherits:false
   the pseudo-element kept resolving to the 100% initial value: the entrance
   animated 39 distinct values of --ink-r that the plate never saw, so the ink
   pass was completely invisible while `is-inked` still flipped the type to
   paper, i.e. four rows of paper-coloured text on paper for half a second.
   Nothing threw and the DOM probe was green. */
@property --ink-l{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --ink-r{syntax:'<percentage>';inherits:true;initial-value:100%}

.proj-row{
  display:grid;grid-template-columns:4.6cqw 1fr 12cqw 15cqw 8cqw 5.5cqw 3cqw;
  align-items:center;column-gap:1.6cqw;min-height:7cqw;
  margin:0 -2cqw;padding:0 2cqw;
  position:relative;isolation:isolate;
  text-decoration:none;color:var(--ink);
  --ink-l:0%;--ink-r:100%;
  transition:color .16s cubic-bezier(.16,1,.3,1);
}
/* z-index:-1 rather than 0 plus z-index on every cell: `isolation:isolate` on
   the row makes -1 mean "behind my own content" instead of "behind the page",
   so the plate cannot slide under the section background. */
.proj-row::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--ink);
  clip-path:inset(0 var(--ink-r) 0 var(--ink-l));
  transition:--ink-r .34s cubic-bezier(.16,1,.3,1);
}
.proj-row:hover::before,.proj-row:focus-visible::before{--ink-r:0%}
.proj-row:hover,.proj-row:focus-visible{color:var(--paper)}
.proj-row:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}

/* DE INKTGANG ONDER DE DUIM. Half the visitors never get a pointer, and this
   is the page's flagship device — on touch it was simply absent. There it is
   scrubbed to the reader's own scroll instead: the plate arrives across the
   first half of the row's window and leaves across the second, so the hand
   moving the page is the hand pressing the row. That is the same argument the
   marquee is built on, and it is why this is not the automatic entrance that
   was cut: nothing here runs unless you move.

   The CSS transition has to go on touch, or it fights the scrub for every
   frame and the plate lags the finger by a third of a second. */
@media (hover:none),(pointer:coarse){
  .proj-row::before{transition:none}
  .proj-row.is-inked{color:var(--paper)}
  .proj-row.is-inked .proj-nr{color:var(--orange)}
}

.proj-name-in{display:block}

/* ===== CTA's =====
   Every call to action on this page was mono 400 at about 9px with a hover that
   faded it to opacity .6, so pointing at the one thing you are meant to press
   made it HARDER to read. Three of them, in the hero, in over-ons and in the
   footer, all quietly unreadable in the same way.

   They now run the same ink plate as the project rows. That is the point: this
   page has one gesture, so the thing you can press should answer with it. Heavier
   and wider-tracked at rest so it reads as an affordance before you touch it, and
   the plate bleeds around the text with a negative inset rather than padding, so
   nothing here can disturb the absolutely-positioned hero grid. */
#hero .link-underline,
#overons .link,
.footer-cta a,
#proj-footnote a,
.newsletter-link a{
  /* isolation alone, NOT position:relative. Two of these live on the hero grid
     as .g cells, which is position:absolute, and a blanket position:relative
     here silently dropped them back into normal flow while their left/top kept
     applying as relative offsets. #hero-link-over ended up 1247px to the right
     of where it should be, 101px past the right edge of a 1440 viewport.
     isolation:isolate is all the ::before needs: it makes the stacking context
     that lets z-index:-1 sit behind the type without falling through the page. */
  isolation:isolate;
  font-family:var(--mono);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  --ink-l:0%;--ink-r:100%;
  transition:color .22s cubic-bezier(.16,1,.3,1);
}
/* only the ones that are NOT already positioned by the grid */
.footer-cta a,
#proj-footnote a,
.newsletter-link a{position:relative}
#hero .link-underline::before,
#overons .link::before,
.footer-cta a::before,
#proj-footnote a::before,
.newsletter-link a::before{
  /* Flush with the type on the left, bleeding right. A symmetric bleed put the
     plate 8.3px outside the page's own text margin on every left-aligned CTA,
     which on this grid reads as a break rather than as trapping. Asymmetry is
     the honest object anyway: the plate is a printed tab that starts where the
     first letter starts and runs out past the arrow, in the one direction
     everything else on this page travels. */
  content:'';position:absolute;inset:-.5em -.9em -.5em 0;z-index:-1;pointer-events:none;
  background:var(--ink);
  clip-path:inset(0 var(--ink-r) 0 var(--ink-l));
  transition:--ink-r .34s cubic-bezier(.16,1,.3,1);
}
/* The one CTA that is flush RIGHT against its section margin. A tab that bleeds
   right would hang 8.5px outside it, so this one bleeds the other way; the wipe
   still runs left to right, only the tab is mirrored. */
#proj-footnote a::before{inset:-.5em 0 -.5em -.9em}
/* at 390 the footnote sits 7.8px from the page edge, so a left bleed puts the
   tab on the trim. Below the desktop grid it goes back to bleeding right. */
@media (max-width:719px){#proj-footnote a::before{inset:-.5em -.9em -.5em 0}}
#hero .link-underline:hover,#hero .link-underline:focus-visible,
#overons .link:hover,#overons .link:focus-visible,
.footer-cta a:hover,.footer-cta a:focus-visible,
#proj-footnote a:hover,#proj-footnote a:focus-visible,
.newsletter-link a:hover,.newsletter-link a:focus-visible{color:var(--paper)}
#hero .link-underline:hover::before,#hero .link-underline:focus-visible::before,
#overons .link:hover::before,#overons .link:focus-visible::before,
.footer-cta a:hover::before,.footer-cta a:focus-visible::before,
#proj-footnote a:hover::before,#proj-footnote a:focus-visible::before,
.newsletter-link a:hover::before,.newsletter-link a:focus-visible::before{--ink-r:0%}

/* The arrow travels with the plate rather than on its own timing, so the whole
   CTA is one movement instead of a background and a glyph doing separate things. */
#hero .link-underline .arrow,
#overons .link .arrow{transition:transform .34s cubic-bezier(.16,1,.3,1)}
#hero .link-underline:hover .arrow,
#overons .link:hover .arrow{transform:translateX(.35em)}

/* The old fade-out hovers, explicitly cancelled. Left in place they win on
   specificity in over-ons and the footer and take the type back to unreadable. */
#hero .link-underline:hover{opacity:1}
#overons .link:hover{opacity:1;gap:.6em}
.footer-cta a:hover{opacity:1}
#proj-footnote a:hover{opacity:1}

.proj-nr{font:.72cqw/1 var(--mono);letter-spacing:.08em;transition:color .12s linear}
.proj-row:hover .proj-nr,.proj-row:focus-visible .proj-nr{color:var(--orange)}
.proj-name{font:3.2cqw/.95 var(--display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-data-wrap{display:contents}
.proj-col{font:.72cqw/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.86}
.proj-thumb{display:none}
.proj-arrow{font:1cqw/1 var(--mono);text-align:right;display:inline-block;transition:transform .26s cubic-bezier(.16,1,.3,1)}
.proj-row:hover .proj-arrow,.proj-row:focus-visible .proj-arrow{transform:translateX(.55em)}

/* cursor-following photo preview (hover:hover + pointer:fine only) */
#proj-preview{
  position:fixed;top:0;left:0;width:18cqw;aspect-ratio:4/3;overflow:hidden;
  pointer-events:none;z-index:50;opacity:0;background:#d8d7d3;
  box-shadow:0 0 0 1px var(--ink);
  transform:translate3d(var(--px,0),var(--py,0),0) translate(-50%,-50%);
  transition:opacity .25s ease;
}
#proj-preview.is-visible{opacity:1}
/* Stacked layers. No transition here on purpose: row-to-row is an instant
   swap, and the only fade left is the plate itself entering and leaving. */
#proj-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0}
#proj-preview img.is-on{opacity:1}
@media (hover:none),(pointer:coarse){#proj-preview{display:none}}

/* full-bleed featured strip */
/* overflow:hidden is load bearing: the trek sheet ends its scrub at xPercent 101,
   which without a clip here adds 1454px of horizontal page overflow */
#proj-featured{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:56vh;min-height:320px;margin-top:2.6cqw;overflow:hidden}
#proj-featured-photo{position:absolute;inset:0;overflow:hidden;background:#d8d7d3}
/* Fills the box exactly. The old height:118%/margin-top:-9% was staging room for
   a parallax translate that no longer exists — and percentage margins resolve
   against the container's WIDTH, so on this full-bleed strip -9% of 100vw pulled
   the photo up further than the extra 18% of height could cover, leaving the
   container background showing as a grey bar along the bottom. */
#proj-featured-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* DE TREK. The sheet that lies over the featured plate and is pulled off to the
   right as you scroll. Created in JS so a reduced-motion or no-JS reader never
   gets a paper rectangle parked over the photograph. z-index sits under the
   chip, which lands after the sheet has cleared. */
#proj-featured-sheet{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--paper);
  border-right:1px solid var(--ink);
  will-change:transform;
}
#proj-featured-chip{position:absolute;left:2cqw;bottom:2cqw;background:var(--paper);color:var(--ink);padding:1cqw 1.3cqw;display:flex;flex-direction:column;gap:.4cqw;z-index:3;max-width:70cqw}
#proj-featured-chip div{font:.68cqw/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}

#proj-footnote{display:flex;justify-content:space-between;align-items:center;padding:1.6cqw 0 3.4cqw;font:.68cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
#proj-footnote a{color:var(--ink);text-decoration:underline;text-underline-offset:.3em;transition:opacity .15s ease}
#proj-footnote a:hover{opacity:.6}

/* ===== AANPAK — interactive spec-sheet / accordion ===== */
#aanpak{padding:6.4cqw 2cqw 5cqw}

#aanpak-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.1cqw}
#aanpak-index{font:700 .85cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
#aanpak-meta{font:.72cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.72}
#aanpak-rules{display:flex;flex-direction:column;gap:3px;margin-bottom:3.2cqw}
#aanpak-title{font:6cqw/.95 var(--display);letter-spacing:.02em;text-transform:uppercase;max-width:58%;margin:0 0 3.4cqw}

#aanpak-split{display:flex;gap:4cqw;align-items:stretch}
#aanpak-left{width:62%;position:relative;padding-left:1.6cqw}
/* ===== DE MAATLAT =====
   This hairline shipped as dead CSS: transform:scaleY(0), never touched by JS,
   so it was a measure line that measured nothing. It is now scrubbed against
   the left column's own travel, and each step's number turns orange at the
   moment the line reaches it. That is what makes it a device rather than a
   decorative rule: the drawing and the content are the same event, so the line
   tells you where in the process you are standing. */
#aanpak-progress{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--ink);transform-origin:top center;transform:scaleY(0)}
/* The passed mark is a tick, not a recolour. Orange type on paper measures
   2.93:1 and fails AA at this size, which is why the same orange is only ever
   used on the ink ground elsewhere on the page (5.09:1 there). Putting the
   colour on a square instead of on the digits keeps the accent doing the
   signalling without asking a 0.72cqw mono glyph to be legible in it, and the
   number carries its own second signal by coming up from .5 to full ink, so the
   state survives for anyone who cannot see the orange at all. */
.aanpak-nr{position:relative;opacity:.5;transition:opacity .28s cubic-bezier(.16,1,.3,1)}
.aanpak-nr::before{
  content:'';position:absolute;left:-1.1cqw;top:50%;
  width:.42cqw;height:.42cqw;margin-top:-.21cqw;
  background:var(--orange);
  transform:scale(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.aanpak-row.is-measured .aanpak-nr{opacity:1}
.aanpak-row.is-measured .aanpak-nr::before{transform:scale(1)}
#aanpak-rows{border-top:1px solid var(--ink);position:sticky;top:10vh}
#aanpak-right{width:34%;margin-top:.4cqw;display:flex;flex-direction:column;gap:1.4cqw}

.aanpak-row{border-bottom:1px solid var(--ink)}
.aanpak-row-head{
  all:unset;box-sizing:border-box;display:grid;grid-template-columns:6% 20% 1fr 6%;
  align-items:center;width:100%;padding:1.6cqw 1.4cqw;cursor:pointer;color:var(--ink);
  transition:background-color .16s cubic-bezier(.16,1,.3,1),color .16s cubic-bezier(.16,1,.3,1);
}
.aanpak-row-head:hover,.aanpak-row-head:focus-visible{background:var(--ink);color:var(--paper)}
.aanpak-row-head:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.aanpak-nr{font:.72cqw/1 var(--mono);letter-spacing:.08em;text-align:left}
.aanpak-name{font:1.5cqw/1 var(--display);letter-spacing:.04em;text-transform:uppercase;text-align:left}
.aanpak-spec{font:.7cqw/1.5 var(--mono);letter-spacing:.02em;text-align:left}
/* Was an ease-in-out — a rotate that starts slowly reads as reluctant. */
.aanpak-toggle{font:.9cqw/1 var(--mono);text-align:right;display:inline-block;transition:transform .34s cubic-bezier(.16,1,.3,1)}
.aanpak-row[data-open="true"] .aanpak-toggle{transform:rotate(45deg)}

.aanpak-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.16,1,.3,1);background:var(--paper)}
.aanpak-row[data-open="true"] .aanpak-detail{grid-template-rows:1fr}
.aanpak-detail-inner{overflow:hidden;min-height:0}
/* DE PROEFDRUK. The panel used to squeeze open with its text already at full
   opacity, so the copy read as crushed against the closing edge; the fix for
   that was a fade plus a 6px rise, which made this the one gesture on the page
   that dissolved instead of travelling. It prints now: the copy is clipped away
   to the right and the plate opens left to right behind the row, a beat after
   the height has started moving, and the meta line lands last so the panel
   finishes the way a sheet does. Closing skips the delays and outruns opening,
   which is how it already behaved and is right — you are dismissing it. */
.aanpak-detail-content{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .22s cubic-bezier(.16,1,.3,1);
}
.aanpak-row[data-open="true"] .aanpak-detail-content{
  clip-path:inset(0 0% 0 0);
  transition:clip-path .34s cubic-bezier(.16,1,.3,1) .1s;
}
.aanpak-detail-meta{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .2s cubic-bezier(.16,1,.3,1);
}
.aanpak-row[data-open="true"] .aanpak-detail-meta{
  clip-path:inset(0 0% 0 0);
  transition:clip-path .3s cubic-bezier(.16,1,.3,1) .18s;
}
@media (prefers-reduced-motion:reduce){
  .aanpak-detail{transition:none}
  .aanpak-detail-content,.aanpak-row[data-open="true"] .aanpak-detail-content,
  .aanpak-detail-meta,.aanpak-row[data-open="true"] .aanpak-detail-meta{clip-path:none;transition:none}
}
.aanpak-detail-content{padding:0 1.4cqw 1.8cqw calc(26% + 1.4cqw);display:flex;flex-direction:column;gap:.6cqw}
.aanpak-detail-text{font:.7cqw/1.6 var(--mono);letter-spacing:.02em;max-width:92%;margin:0}
.aanpak-detail-meta{font:.66cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.68;margin:0}

#aanpak-photo{aspect-ratio:752/1344;overflow:hidden;background:#d8d7d3}
#aanpak-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

#aanpak-orange{background:var(--orange);color:var(--ink);padding:2cqw 2.4cqw;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:2cqw;margin-top:3.2cqw}
#aanpak-counters{display:flex;flex-direction:row;gap:0}
.aanpak-counter{display:flex;flex-direction:column;align-items:flex-start;gap:.8cqw;border-left:1px solid var(--ink);padding:0 2.6cqw}
.aanpak-counter:first-child{border-left:none;padding-left:0}
.aanpak-counter-num{font:3.4cqw/1 var(--display);letter-spacing:.02em}
.aanpak-counter-label{font:.66cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
#aanpak-orange-tag{font:.92cqw/1.3 var(--mono);letter-spacing:.02em;text-transform:uppercase;margin:0}

/* ===== MARQUEE — main strip + reversed mono strip ===== */
#marquee-inner{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden}
/* Both bands are held still: the page animates nothing but its orange blocks.
   The track keeps its width:max-content and the strip keeps its overflow, so
   at rest it reads as a line of display type running off the right edge. */
/* ===== DE PERS =====
   Both tracks were duplicated for an infinite loop that no JS or @keyframes ever
   drove, so the section shipped as a statically double-printed sentence. It is
   not a CSS loop now either, on purpose: an auto-marquee runs at a speed the
   page picked, and this page's whole idea is a press whose bed moves because the
   sheet is moving. Scroll velocity drives it, so scrolling down runs the bed one
   way, scrolling up runs it the other, and at rest it keeps a slow drift so the
   section is never dead. `will-change` is declared because these two are the
   only elements on the page transformed every single frame. */
#marquee-track{display:flex;width:max-content;padding:1.9cqw 0;will-change:transform}
.marquee-group{display:flex;flex-shrink:0;white-space:nowrap}
.marquee-group span{font:2.95cqw/.95 var(--display);letter-spacing:.02em;text-transform:uppercase;padding-right:1.2em}

#marquee-inner-2{border-bottom:1px solid var(--ink);overflow:hidden}
#marquee-track-2{display:flex;width:max-content;padding:.85cqw 0;will-change:transform}
.marquee-group-mono{display:flex;flex-shrink:0;white-space:nowrap}
.marquee-group-mono span{font:400 .62cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding-right:1.6em;opacity:.78}

/* ===== responsive stack <1000px ===== */
@media (max-width:999px){
  #projecten-head{padding:6cqw 0 4cqw}
  #projecten-index{font-size:3cqw}
  #projecten-meta{font-size:2.4cqw}

  .proj-row{
    display:grid;grid-template-columns:1fr 10cqw;
    grid-template-areas:"nr thumb" "name thumb" "data thumb" "arrow thumb";
    column-gap:3cqw;row-gap:1.6cqw;align-items:start;
    min-height:0;margin:0;padding:6cqw 0;
  }
  .proj-nr{grid-area:nr;font-size:2.6cqw}
  .proj-name{grid-area:name;font-size:7cqw;white-space:normal}
  .proj-data-wrap{grid-area:data;display:flex;flex-wrap:wrap;gap:.6em 1em}
  .proj-col{font-size:2.4cqw}
  .proj-thumb{grid-area:thumb;display:block;width:10cqw;aspect-ratio:4/3;overflow:hidden;background:#d8d7d3;align-self:start}
  .proj-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .proj-arrow{grid-area:arrow;text-align:left;font-size:3.4cqw}

  #proj-featured{height:42vh;min-height:220px;margin-top:4cqw}
  #proj-featured-chip{left:4cqw;bottom:4cqw;max-width:80cqw}
  #proj-featured-chip div{font-size:2.4cqw}
  #proj-footnote{flex-direction:column;align-items:flex-start;gap:2cqw;font-size:2.4cqw;padding:4cqw 0 8cqw}

  #aanpak-index{font-size:3cqw}
  #aanpak-meta{font-size:2.4cqw}
  #aanpak-title{font-size:8cqw;max-width:100%}
  #aanpak-split{flex-direction:column;gap:8cqw}
  #aanpak-left,#aanpak-right{width:100%;margin-top:0;padding-left:0}
  #aanpak-rows{position:static}
  #aanpak-progress{display:none}
  .aanpak-row-head{grid-template-columns:10% 1fr 10%;padding:5cqw 2cqw}
  .aanpak-spec{display:none}
  .aanpak-nr,.aanpak-name,.aanpak-toggle{font-size:3.4cqw}
  .aanpak-detail-content{padding:0 2cqw 6cqw 2cqw}
  .aanpak-detail-text,.aanpak-detail-meta{font-size:2.8cqw;max-width:100%}
  #aanpak-orange{flex-direction:column;align-items:stretch;gap:5cqw;padding:6cqw 5cqw;margin-top:8cqw}
  #aanpak-counters{flex-direction:column;gap:0}
  .aanpak-counter{flex-direction:row;align-items:baseline;justify-content:space-between;border-left:none;padding:3cqw 0;border-bottom:1px solid var(--ink)}
  .aanpak-counter:first-child{padding-top:0}
  .aanpak-counter:last-child{border-bottom:none;padding-bottom:0}
  .aanpak-counter-num{font-size:6cqw}
  .aanpak-counter-label,#aanpak-orange-tag{font-size:2.8cqw}

  .marquee-group span{font-size:6cqw}
  .marquee-group-mono span{font-size:2.4cqw}
}

/* ============================================================ OVER ONS ============================================================ */
#overons{
  container-type: inline-size;
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1344 / 586.56;
  background: var(--paper);
  margin: 0;
  overflow: hidden;
  font-family: var(--mono);
  color: var(--ink);
}

#overons .g{ position:absolute; left:calc(var(--l)*1%); top:calc(var(--t)*1%); width:calc(var(--w)*1%); height:calc(var(--h)*1%); }

/* Kicker */
#overons .kicker{
  font-size: calc(0.65 * 1cqw);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  border-bottom: 1px solid var(--ink);
  display: inline-block;
  height: fit-content;
  line-height: 1.4;
  white-space: nowrap;
  width: auto !important;
}

/* H2 */
#overons h2{
  font-family: var(--display);
  font-size: calc(6.95 * 1cqw);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  width: auto !important;
}

/* Paragraphs */
#overons-paras{ display:flex; flex-direction:column; gap: calc(1.15 * 1cqw); }
#overons-paras p{
  font-size: calc(0.65 * 1cqw);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

/* Link AANPAK */
#overons .link{
  /* the only CTA in this section and it was the smallest type on the sheet.
     Sized against the section's own labels rather than under them. */
  font-size: calc(1.05 * 1cqw);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: calc(0.15 * 1cqw);
  height: fit-content;
  white-space: nowrap;
  width: auto !important;
  transition: gap .2s ease, opacity .2s ease;
}
#overons .link span.arrow{ display:inline-block; transition: transform .2s ease; }
#overons .link:hover{ gap: 0.6em; opacity: .72; }
#overons .link:hover span.arrow{ transform: translateX(3px); }
#overons .link:focus-visible{ outline: 2px solid var(--orange); outline-offset: 3px; }

/* Orange panel */
#overons-orange{
  background: var(--orange);
  color: var(--ink);
  padding: calc(1.2 * 1cqw);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#overons-orange p{
  font-size: calc(0.65 * 1cqw);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
#overons-orange-bottom{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: calc(0.65 * 1cqw);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#overons-orange-010{
  border-bottom: 1px solid var(--ink);
  padding-bottom: calc(0.25 * 1cqw);
  display: inline-block;
  width: calc(4.6 * 1cqw);
}

/* Photos */
#overons .photo{ overflow:hidden; background:#c9c8c4; }
#overons .photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Label + list */
#overons .label{
  font-size: calc(0.65 * 1cqw);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  width: auto !important;
}
#overons .list-wrap{ display: contents; }
#overons .list-item{
  font-size: calc(0.65 * 1cqw);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  width: auto !important;
}

/* Responsive: below 1000px viewport — flex-column stack, same order/style */
@media (max-width: 999px){
  #overons{
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 7cqw;
    padding: 10cqw 6cqw;
    box-sizing: border-box;
  }
  #overons .g{
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  #overons h2{ font-size: 12cqw; white-space: normal; }
  #overons .kicker,#overons .link{ font-size: 3cqw; }
  #overons-paras p{ font-size: 3.2cqw; }
  #overons-paras{ gap: 4cqw; width: 100% !important; }
  #overons-orange{ height: auto !important; gap: 6cqw; }
  #overons-orange p{ font-size: 3.4cqw; }
  #overons-orange-bottom{ font-size: 2.8cqw; }
  #overons-orange-010{ width: 16cqw; }
  #overons-photo-c,#overons-photo-d{ aspect-ratio: 3/4; }
  #overons-photo-e{ aspect-ratio: 16/6; }
  #overons .label,#overons .list-item{ font-size: 3cqw; }
  #overons .list-wrap{ display:flex; flex-direction:column; gap: 2.2cqw; margin-top: 2cqw; }
}

/* ============================================================ CONTACT / FOOTER ============================================================ */
#contact{
  container-type:inline-size;
  position:relative;
  z-index:0;
  margin:0;
  background:var(--paper);
  aspect-ratio:1344/752;
  overflow:hidden;
  font-family:var(--mono);
  color:var(--ink);
}
#contact *{box-sizing:border-box;}
#contact-wrapper{position:relative;width:100%;height:100%;}

/* ---------- H2 ---------- */
#contact h2{
  position:absolute;
  left:2.0cqw;
  top:11.302cqw;
  margin:0;
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  color:var(--ink);
  line-height:.95;
  letter-spacing:.02em;
  font-size:5.1cqw;
}
#contact h2 span{display:block;white-space:nowrap;}
/* `span+span` used to do this, which also matched the orange twin registerPass
   inserts inside a .line and pushed the ink copy down by a line's leading. */
#contact h2 > .line + .line{margin-top:1.4cqw;}

/* ---------- intro ---------- */
.footer-intro{
  position:absolute;
  left:2.2cqw;
  top:23.1cqw;
  width:24cqw;
  margin:0;
  font-size:.66cqw;
  line-height:1.65;
  letter-spacing:.02em;
}

/* ---------- CTA ---------- */
.footer-cta{
  position:absolute;
  left:2.0cqw;
  top:27.6cqw;
  font-size:.82cqw;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer-cta a{color:var(--ink);text-decoration:underline;text-underline-offset:.25em;transition:opacity .15s;}
.footer-cta a:hover{opacity:.6;}
.footer-cta a::before{content:"→ ";}

/* ---------- orange panel ---------- */
.orange-panel{
  position:absolute;
  left:1.9cqw;
  top:30.886cqw;
  width:35.2cqw;
  height:16.842cqw;
  background:var(--orange);
  padding:1.7cqw 1.9cqw;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.panel-top{font-size:.66cqw;line-height:2.15;letter-spacing:.06em;text-transform:uppercase;}
.panel-top a{color:var(--ink);text-decoration:none;transition:opacity .15s;}
.panel-top a:hover{opacity:.6;text-decoration:underline;}
.panel-bottom{display:flex;flex-direction:column;gap:.55cqw;}
.volg-ons{font-size:.58cqw;letter-spacing:.08em;text-transform:uppercase;}
.panel-bottom-row{display:flex;justify-content:space-between;align-items:baseline;}
.social-row{display:flex;gap:1.3cqw;list-style:none;margin:0;padding:0;}
.social-row a{color:var(--ink);text-decoration:none;font-size:.6cqw;letter-spacing:.08em;text-transform:uppercase;transition:opacity .15s;}
.social-row a:hover{text-decoration:underline;opacity:.7;}
.newsletter-link a{color:var(--ink);text-decoration:none;font-size:.6cqw;letter-spacing:.08em;text-transform:uppercase;display:inline-block;transition:transform .15s;}
.newsletter-link a span{display:inline-block;transition:transform .15s;}
.newsletter-link a:hover{text-decoration:underline;}
.newsletter-link a:hover span{transform:translateX(3px);}

/* ---------- vertical rule ---------- */
.vertical-rule{
  position:absolute;
  left:38.9cqw;
  top:11.19cqw;
  width:1px;
  height:36.369cqw;
  background:var(--ink);
  transform-origin:top;
}

/* ---------- link columns (STACKED single column at x40.8) ---------- */
.link-columns{
  position:absolute;
  left:40.8cqw;
  top:11.806cqw;
  width:20cqw;
  height:20cqw;
}
.link-group-header{
  position:absolute;
  left:0;
  margin:0;
  font-size:.62cqw;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-bottom:.55cqw;
  border-bottom:1px solid var(--ink);
  width:8.9cqw;
}
.link-columns nav{position:absolute;left:0;width:100%;}
.link-columns ul{list-style:none;margin:0;padding:0;}
.link-columns li{margin:0;padding:0;font-size:.6cqw;letter-spacing:.06em;text-transform:uppercase;}
.link-columns a{color:var(--ink);text-decoration:none;position:relative;}
.link-columns a::before{content:"+ ";}
.link-columns a span{position:relative;display:inline-block;}
.link-columns a span::after{content:"";position:absolute;left:0;right:0;bottom:-.2em;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;}
.link-columns a:hover span::after{transform:scaleX(1);}

.nav-header{top:0;}
.nav-list{top:3.189cqw;}
.nav-list li{line-height:1.818cqw;}

.spec-header{top:16.114cqw;}
.spec-list{top:18.912cqw;}
.spec-list li{line-height:1.641cqw;}

.legal-header{top:27.752cqw;}
.legal-list{top:30.662cqw;}
.legal-list li{line-height:1.762cqw;}

/* ---------- W photo (masked) ---------- */
.w-mark{
  position:absolute;
  left:62.2cqw;
  top:11.135cqw;
  width:35.6cqw;
  height:36.537cqw;
  overflow:hidden;
}
.w-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% 50%;
  -webkit-mask-image:var(--wmask);
  mask-image:var(--wmask);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}

/* ---------- legal strip ---------- */
.legal-strip{position:absolute;left:0;width:100%;}
.legal-rule{position:absolute;top:51.196cqw;left:0;width:100%;height:1px;background:var(--ink);transform-origin:left;}
.legal-text{
  position:absolute;
  top:53.49cqw;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:0 2cqw;
  font-size:.6cqw;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.legal-text a{color:var(--ink);text-decoration:none;transition:opacity .15s;}
.legal-text a:hover{opacity:.6;text-decoration:underline;}

/* ---------- Responsive: below 1000px, flex-column stack ---------- */
@media (max-width:999px){
  #contact{aspect-ratio:auto;height:auto;padding:14vw 6vw 8vw;}
  #contact-wrapper{display:flex;flex-direction:column;}
  #contact h2,.footer-intro,.footer-cta,.orange-panel,.vertical-rule,.link-columns,.w-mark,.legal-strip{
    position:static;
    left:auto;top:auto;width:auto;height:auto;
  }
  #contact h2{font-size:11vw;margin-bottom:5vw;}
  .footer-intro{width:100%;font-size:3.6vw;margin-bottom:6vw;}
  .footer-cta{font-size:3.4vw;margin-bottom:8vw;display:block;}
  .orange-panel{width:100%;height:auto;padding:6vw;margin-bottom:10vw;gap:8vw;}
  .panel-top{font-size:3.6vw;line-height:2.3;}
  .volg-ons{font-size:3.2vw;}
  .panel-bottom-row{flex-direction:column;align-items:flex-start;gap:4vw;}
  .social-row{gap:5vw;flex-wrap:wrap;}
  .social-row a,.newsletter-link a{font-size:3.2vw;}
  .vertical-rule{display:none;}
  .link-columns{width:100%;margin-bottom:8vw;}
  .link-group-header{width:auto;display:inline-block;font-size:3.4vw;}
  .link-columns nav{position:static;margin-top:3vw;margin-bottom:8vw;}
  .link-columns li{font-size:3.4vw;line-height:8vw !important;}
  .nav-header,.spec-header,.legal-header{position:static;margin-bottom:0;}
  .nav-list,.spec-list,.legal-list{position:static;}
  .w-mark{width:100%;height:80vw;margin-bottom:8vw;}
  .legal-strip{border-top:1px solid var(--ink);padding-top:5vw;}
  .legal-rule{display:none;}
  .legal-text{position:static;flex-direction:column;gap:2vw;padding:0;font-size:3.2vw;}
}