/* =============================================================================
   sterk — design system
   White. Poppins. One ink. Motion does the talking.

   01 tokens        06 media & parallax
   02 base          07 projecten (rail, reeks)
   03 type          08 sections & blocks
   04 chrome        09 footer
   05 motion        10 responsive
   ============================================================================= */

/* 01 — tokens ------------------------------------------------------------- */
:root{
  --bg:        #ffffff;
  --bg-soft:   #f1f1ef;
  --bg-ink:    #0c0c0d;
  --ink:       #0c0c0d;
  --ink-2:     #55555b;
  --ink-3:     #6e6e76;   /* 5:1 op wit — labels zijn 11px, dus AA-drempel geldt */
  --line:      #e6e6e8;
  --line-2:    #cfcfd3;
  --ph:        #d5d5d3;   /* grijs van een lege beeldplek */

  --shell:     min(1600px, 90vw);
  --shell-mid: min(1180px, 88vw);
  --shell-nar: min(860px, 88vw);

  --t-hero: clamp(2.9rem, 1rem + 7.4vw, 9rem);
  --t-xl:   clamp(2.1rem, 1.1rem + 3.9vw, 5.25rem);
  --t-lg:   clamp(1.6rem, 1.1rem + 1.9vw, 2.9rem);
  --t-md:   clamp(1.15rem, 1rem + .7vw, 1.6rem);
  --t-body: clamp(1rem, .96rem + .18vw, 1.0625rem);
  --t-sm:   .875rem;
  --t-label:.6875rem;

  --gap:     clamp(1.25rem, 2.2vw, 2.25rem);
  --section: clamp(5.5rem, 11vw, 12rem);
  --nav-h:   4.5rem;

  --e:      cubic-bezier(.22,1,.36,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --e-in:   cubic-bezier(.7,0,.3,1);
}

/* een blok tussen twee haarlijnen — rust, zonder de witte grond te breken */
.band{ border-block:1px solid var(--line); }

/* Beschikbaar, niet gebruikt: zet deze klasse op een <section> voor een
   omgekeerd (zwart) blok. Alle componenten erven de tokens en klappen mee. */
.on-ink{
  --bg:     #0c0c0d;
  --bg-soft:#151517;
  --ink:    #ffffff;
  --ink-2:  #a4a4ab;
  --ink-3:  #6e6e76;
  --line:   #232326;
  --line-2: #33333a;
  --ph:     #232326;
  background:var(--bg); color:var(--ink);
}

/* 02 — base --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.lock{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd,fieldset{ margin:0; padding:0; border:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--ink); color:var(--bg); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; z-index:300; background:var(--ink); color:var(--bg); padding:.8rem 1.2rem; }
.skip:focus{ left:1rem; top:1rem; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.shell{ width:var(--shell); margin-inline:auto; }
.shell-mid{ width:var(--shell-mid); margin-inline:auto; }
.shell-nar{ width:var(--shell-nar); margin-inline:auto; }
.section{ padding-block:var(--section); }
.section-sm{ padding-block: clamp(3rem, 6vw, 6rem); }
.pt-0{ padding-top:0; } .pb-0{ padding-bottom:0; }
hr.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* 03 — type --------------------------------------------------------------- */
.hero-type{ font-size:var(--t-hero); line-height:.94; letter-spacing:-.045em; font-weight:500; }
/* langere kop (homepage): flink kleiner dan de andere pagina's. Gecentreerd
   werkt rustiger op deze maat — bij 104px werd het schreeuwen. */
.hero-type--long{ font-size:clamp(1.9rem, .9rem + 2.6vw, 4.25rem);
  line-height:1.02; letter-spacing:-.035em; text-wrap:balance; }
.t-xl{ font-size:var(--t-xl); line-height:1.02; letter-spacing:-.038em; font-weight:500; }
.t-lg{ font-size:var(--t-lg); line-height:1.12; letter-spacing:-.028em; font-weight:500; }
.t-md{ font-size:var(--t-md); line-height:1.35; letter-spacing:-.018em; font-weight:400; }
.lead{ font-size:var(--t-md); line-height:1.5; font-weight:300; color:var(--ink-2); max-width:34ch; letter-spacing:-.01em; }
.body-2{ color:var(--ink-2); }
.label{
  font-size:var(--t-label); font-weight:500; line-height:1;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.label-ink{ color:var(--ink); }
.num{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.w-40{ max-width:40ch; } .w-52{ max-width:52ch; } .w-24{ max-width:24ch; }

/* de naam, uitgelegd — woordenboekregel als voetnoot onder een kop */
.gloss{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  font-size:var(--t-md); line-height:1.45; letter-spacing:-.015em;
  color:var(--ink-2); max-width:68ch;   /* past op brede schermen op één regel */
}
.gloss b{ font-weight:500; color:var(--ink); }
.gloss i{ font-style:normal; color:var(--ink-3); }

.mt-1{ margin-top:.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.75rem; }
.mt-4{ margin-top:2.5rem; } .mt-6{ margin-top:clamp(3rem,6vw,5rem); }

/* een regel die uit zichzelf onderstreept wordt */
.link{ position:relative; display:inline-block; padding-bottom:.15em; }
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .55s var(--e);
}
.link:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

/* 04 — chrome (nav, menu, cursor, paginawissel) --------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--nav-h); display:flex; align-items:center;
  transition:transform .55s var(--e), background-color .4s var(--e-soft), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav.hide{ transform:translateY(-101%); }
.nav__in{ width:var(--shell); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand{ display:block; width:clamp(74px, 7vw, 96px); color:var(--ink); }
.brand svg{ width:100%; height:auto; display:block; }
.nav__links{ display:flex; align-items:center; gap:clamp(1.1rem, 2vw, 2rem); }
.nav__links a{ font-size:var(--t-sm); color:var(--ink-2); transition:color .3s var(--e-soft); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a[aria-current="page"]{ color:var(--ink); }
.nav__links a[aria-current="page"]::before{
  content:""; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--ink); margin-right:.5rem; vertical-align:middle;
}

/* De knop keert gewoon om: geen vulling die binnenschuift, geen halve
   toestand onderweg. De ring blijft staan, dus de vorm blijft rustig. */
.pill{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.35rem; border-radius:100px;
  background:var(--ink); color:var(--bg);
  box-shadow:inset 0 0 0 1px var(--ink);
  font-size:var(--t-sm); font-weight:400; white-space:nowrap;
  transition:background-color .4s var(--e-soft), color .4s var(--e-soft), box-shadow .4s var(--e-soft);
}
.pill:hover{ background:var(--bg); color:var(--ink); }
.pill--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.pill--ghost:hover{ background:var(--ink); color:var(--bg); box-shadow:inset 0 0 0 1px var(--ink); }
.pill--lg{ padding:1.05rem 2rem; font-size:1rem; }
.pill__arrow{ transition:transform .5s var(--e); }
.pill:hover .pill__arrow{ transform:translateX(.3rem); }

.burger{ display:none; align-items:center; gap:.55rem; font-size:var(--t-sm); }
.burger__bars{ display:grid; gap:5px; width:20px; }
.burger__bars i{ display:block; height:1px; background:var(--ink); transition:transform .45s var(--e), opacity .25s; }
.menu-open .burger__bars i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-open .burger__bars i:nth-child(2){ opacity:0; }
.menu-open .burger__bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:80; background:var(--bg);
  padding:calc(var(--nav-h) + 2rem) 0 2.5rem;
  display:flex; flex-direction:column;
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .75s var(--e);
}
.menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__list a{
  display:flex; align-items:baseline; gap:1rem;
  font-size:clamp(2rem, 9vw, 3.4rem); line-height:1.15; font-weight:500; letter-spacing:-.04em;
  padding-block:.25rem;
  opacity:0; transform:translateY(24px);
  transition:opacity .55s var(--e), transform .55s var(--e);
}

.menu.open .menu__list a{ opacity:1; transform:none; }
.menu.open .menu__list a:nth-child(1){ transition-delay:.08s }
.menu.open .menu__list a:nth-child(2){ transition-delay:.14s }
.menu.open .menu__list a:nth-child(3){ transition-delay:.20s }
.menu.open .menu__list a:nth-child(4){ transition-delay:.26s }
.menu.open .menu__list a:nth-child(5){ transition-delay:.32s }
.menu__foot{ margin-top:auto; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* voortgang van de pagina, als haarlijn */
.progress{
  position:fixed; top:0; left:0; z-index:95; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:0 50%;
}

/* paginawissel — de browser wisselt de twee documenten zelf uit, dus er komt
   geen wit tussenscherm meer aan te pas. */
@view-transition{ navigation:auto }

/* De balk bovenaan staat op elke pagina gelijk. Door hem een eigen naam te
   geven blijft hij staan en wisselt alleen de inhoud eronder. */
.nav{ view-transition-name:nav }

::view-transition-old(root){ animation:page-out .26s cubic-bezier(.7,0,.3,1) both }
::view-transition-new(root){ animation:page-in  .42s cubic-bezier(.22,1,.36,1) both }

@keyframes page-out{ to  { opacity:0; transform:translateY(-8px) } }
@keyframes page-in { from{ opacity:0; transform:translateY(12px) } }

/* Terugval: browsers zonder documentovergangen, en lokaal openen via file://
   (daar zijn de pagina's geen gedeelde origin, dus slaat de browser de
   overgang over).

   De binnenkomst is pure CSS en draait al bij de eerste paint — er is geen
   script dat te laat kan zijn en alsnog over de pagina heen klapt. Dat was
   precies wat er bij het oude doek misging.

   'backwards' in plaats van 'both', zodat de eindwaarde niet blijft hangen en
   .leaving straks gewoon kan overschrijven.

   Alleen een fade van het geheel: de inhoud heeft al eigen binnenkomst-
   animaties, daar willen we geen tweede beweging overheen. */
html.no-vt body{ animation:fade-in .38s var(--e) backwards }

@keyframes fade-in{ from{ opacity:0 } }

/* Vertrek: kort wegvloeien, dan pas navigeren. Alleen opacity — een
   transform op body zou een containing block maken en de vaste nav losrukken. */
html.no-vt.leaving body{ opacity:0; transition:opacity .2s var(--e-in) }

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none }
  html.no-vt body{ animation:none }
  html.no-vt.leaving body{ transition:none }
}

/* aanwijzer: een stip die boven een link een dunne ring wordt.
   Geen blend-modus meer — die legde een grijze vlek over knoppen. */
.dot{
  position:fixed; top:0; left:0; z-index:110; pointer-events:none;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);
  transition:width .4s var(--e), height .4s var(--e), margin .4s var(--e),
             background-color .3s var(--e-soft), opacity .3s;
  opacity:0;
}
.dot.on{ opacity:1; }
.dot.grow{ width:34px; height:34px; margin:-17px 0 0 -17px; background:transparent; }

/* 05 — motion primitieven -------------------------------------------------- */
html.js [data-anim]{ visibility:hidden; }
html.js [data-anim].ready{ visibility:visible; }

/* Laatste vangnet: start het script niet, dan staat er hoe dan ook iets. */
html.no-anim [data-anim],
html.no-anim [data-anim] > *,
html.no-anim .line__i,
html.no-anim .word__i,
html.no-anim .char{
  visibility:visible !important; opacity:1 !important;
  transform:none !important; clip-path:none !important;
}

/* het masker knipt de staarten van de letters niet af */
.line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.line__i{
  display:inline-block; will-change:transform;
  transform:translateY(102%);
  transition:transform 1.05s var(--e) var(--d,0ms);
}
.in .line__i{ transform:none; }

.word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }

/* letter voor letter — het woord blijft heel, de letters komen na elkaar op */
.char-word{ display:inline-block; white-space:nowrap; }
.char{
  display:inline-block;
  opacity:0; transform:translateY(.32em);
  transition:opacity .5s var(--e-soft) var(--d,0ms), transform .75s var(--e) var(--d,0ms);
}
.in .char{ opacity:1; transform:none; }
.word__i{
  display:inline-block;
  transform:translateY(102%); opacity:.001;
  transition:transform .85s var(--e) var(--d,0ms), opacity .5s var(--e-soft) var(--d,0ms);
}
.in .word__i{ transform:none; opacity:1; }

[data-anim="rise"]{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--e-soft) var(--d,0ms), transform .95s var(--e) var(--d,0ms); }
[data-anim="rise"].in{ opacity:1; transform:none; }
[data-anim="fade"]{ opacity:0; transition:opacity .9s var(--e-soft) var(--d,0ms); }
[data-anim="fade"].in{ opacity:1; }
[data-anim="clip"]{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--e) var(--d,0ms); }
[data-anim="clip"].in{ clip-path:inset(0 0 0 0); }
[data-anim="draw"]{ transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s var(--e) var(--d,0ms); }
[data-anim="draw"].in{ transform:scaleX(1); }
[data-anim="stagger"] > *{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--e-soft) var(--d,0ms), transform .9s var(--e) var(--d,0ms); }
[data-anim="stagger"].in > *{ opacity:1; transform:none; }

/* 06 — media --------------------------------------------------------------- */
.media{ position:relative; overflow:hidden; background:var(--ph); }
/* Leeg kader = beeldplek: effen grijs, zodat je ziet hoe het beeld binnenkomt.
   Zet er een <img> in en het grijs verdwijnt eronder. */
.media__in{
  position:absolute; inset:-10% 0;
  background:var(--ph);
  will-change:transform;
}
.media__in img{ width:100%; height:100%; object-fit:cover; }
/* staat er een foto in, dan geen grijs erachter: anders piept het als randje langs de kanten */
.media:has(img), .media:has(img) .media__in{ background:transparent; }
.r-wide{ aspect-ratio:16/9; }
.r-band{ aspect-ratio:2.4/1; }
.r-tall{ aspect-ratio:4/5; }
.r-sq{ aspect-ratio:1/1; }
.r-port{ aspect-ratio:3/4; }

/* 07 — kopregel + optionele tekstindex -------------------------------------- */
.index__head{ display:flex; justify-content:space-between; align-items:baseline; gap:2rem; padding-bottom:1.25rem; }
.index__head > :only-child{ margin-left:auto; }   /* staat er nog maar één ding, dan rechts */

/* tekstlijst met een beeld dat de muis volgt (werk, lijstweergave):
   <a class="row" data-peek="assets/foo.jpg">…</a> */
.row{
  display:grid;
  grid-template-columns: 3.5rem minmax(0,1.6fr) minmax(0,1fr) 5.5rem;
  align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.15rem, 2.4vw, 2rem);
  border-top:1px solid var(--line);
  position:relative;
}
.row:last-of-type{ border-bottom:1px solid var(--line); }
.row__title{ font-size:clamp(1.3rem, 2.4vw, 2.1rem); line-height:1.1; letter-spacing:-.03em; font-weight:400;
  transition:transform .55s var(--e); }
.row:hover .row__title{ transform:translateX(.7rem); }
.row__meta{ color:var(--ink-3); font-size:var(--t-sm); }
.row__year{ justify-self:end; color:var(--ink-3); font-size:var(--t-sm); }
.row::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--e);
}
.row:hover::after{ transform:scaleX(1); }

/* beeld dat de muis volgt op het overzicht */
.peek{
  position:fixed; top:0; left:0; z-index:60; pointer-events:none;
  width:min(24vw, 340px); aspect-ratio:4/5;
  margin:0; overflow:hidden;
  opacity:0; transform:translate(-50%,-50%) scale(.94);
  transition:opacity .4s var(--e-soft), transform .5s var(--e);
}
.peek.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.peek__i{ position:absolute; inset:0; background:var(--ph);
  opacity:0; transition:opacity .35s var(--e-soft); }
.peek__i.on{ opacity:1; }
.peek__i img{ width:100%; height:100%; object-fit:cover; }

/* 08 — blokken -------------------------------------------------------------- */

/* hero */
/* Eén gecentreerde stapel, midden in het beeld. Geen haarlijnen: die trekken
   de blik naar de randen en vechten met een gecentreerde as. Wat overblijft
   is puur typografie op één middellijn. */
.hero{ min-height:100svh; display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding-top:calc(var(--nav-h) + clamp(2rem,5vw,4rem)); padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.hero__top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }

/* De stapel neemt de ruimte die overblijft en gaat er in het midden in
   staan; de scroll-verwijzing blijft onderaan achter. */
.hero__mid{ margin-block:auto; display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:62rem; }

/* Het woord met zijn betekenis, klein boven de kop — eerst de betekenis,
   dan de claim die eruit volgt. */
.hero__word{ font-size:var(--t-sm); line-height:1.5; color:var(--ink-3);
  max-width:52ch; text-wrap:balance; }   /* balance: geen los woord op regel twee */
.hero__word i{ font-style:normal; margin-inline:.3rem .1rem; }
.hero__word b{ font-weight:500; color:var(--ink-2); }

.hero__claim{ margin-top:clamp(1.25rem,2.5vw,2rem); }

/* Het logo als woord in een zin. Gemeten tegen Poppins 500: bij .75em valt
   de x-hoogte van het logo precies samen met die van de letters ernaast
   (.564 tegen .563em), en de k komt op 1% na even hoog als een getypte k.
   max-width:none omdat img standaard 100% krijgt, en dat klapt in een
   krimpende inline-block in. De kleine negatieve vertical-align vangt de
   overshoot van de e onder de basislijn op. */
.mark-inline{ display:inline-block; height:.75em; width:auto; max-width:none; vertical-align:-.009em; }
.hero__dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ink);
  margin-right:.55rem; vertical-align:middle; animation:pulse 2.6s var(--e-soft) infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.55); opacity:.45 } }
/* De disciplines als stille rij onder de kop, op dezelfde middellijn. */
.hero__disc{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:.75rem clamp(1.5rem,3vw,2.75rem); margin-top:clamp(2.25rem,5vw,3.5rem); }

/* De scroll-verwijzing staat onderaan in het midden: woord boven, het
   tikkende lijntje eronder. */
.hero__scroll{ display:inline-flex; flex-direction:column; align-items:center; gap:.7rem; }
.hero__scroll i{ width:1px; height:1.6rem; background:var(--ink-3); overflow:hidden; position:relative; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; background:var(--ink); animation:tick 2.1s var(--e-soft) infinite; }
@keyframes tick{ 0%{ transform:translateY(-100%) } 50%{ transform:none } 100%{ transform:translateY(100%) } }

/* inhoudsopgave van de pagina — doet dienst als ruggengraat */
.toc{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); }
.toc a{ display:block; padding-top:1rem; border-top:1px solid var(--line); position:relative; }
.toc a::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--e);
}
.toc a:hover::before{ transform:scaleX(1); }
.toc__t{ display:block; font-size:var(--t-md); letter-spacing:-.02em; margin-top:.35rem; }

/* twee kolommen: klein label links, inhoud rechts */
.split{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(1.75rem,4vw,4.5rem); align-items:start; }
.split__side{ position:sticky; top:calc(var(--nav-h) + 2rem); }

/* horizontale proceslijn */
.track{ position:relative; }
.track__pin{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }

/* Rechterrand vervaagt naar de grond: wat half in beeld staat loopt uit
   in plaats van afgesneden te worden, en zegt zo dat er nog meer komt. */
.track__pin::after{
  content:""; position:absolute; inset:0 0 0 auto; z-index:2;
  width:clamp(6rem, 16vw, 18rem); pointer-events:none;
  background:linear-gradient(to right, transparent, var(--bg) 92%);
}
.track__rail{ display:flex; gap:clamp(1.5rem,3vw,3rem); padding-inline:calc((100vw - var(--shell))/2); will-change:transform; }
.step{ flex:0 0 min(30rem, 78vw); border-top:1px solid var(--line); padding-top:1.5rem; }
.step__n{ display:flex; align-items:center; gap:.75rem; }
.step__n b{ width:7px; height:7px; border-radius:50%; background:var(--ink); display:block; }
.step__t{ font-size:clamp(1.75rem,3.4vw,2.75rem); line-height:1.08; letter-spacing:-.035em; font-weight:500; margin-top:clamp(2rem,5vw,4rem); }

/* dezelfde stappen, maar naast elkaar in een rustige rij (homepage) */
.steps-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); }
.step--compact{ flex:none; }
.step--compact .step__t{ font-size:clamp(1.3rem,1.9vw,1.75rem); margin-top:1.5rem; }
.step--compact .step__x{ font-size:var(--t-sm); line-height:1.6; }
@media (max-width:1100px){ .steps-row{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:clamp(2rem,4vw,3rem); } }
@media (max-width:640px){ .steps-row{ grid-template-columns:1fr; } }
.step__x{ color:var(--ink-2); margin-top:.9rem; max-width:38ch; }
.step__list{ margin-top:1.5rem; display:grid; gap:.4rem; }
.step__list li{ font-size:var(--t-sm); color:var(--ink-3); }

/* ---- het pad (aanpak) ------------------------------------------------------
   De stappen als route die je al scrollend aflegt. Vooruit ligt het pad als
   stippellijn; achter je is het doorgetrokken in inkt. De punt zit op
   ooghoogte, dus je loopt zelf mee. De stappen staan om beurten links en
   rechts, en in de witruimte ertussen maakt het pad een bocht — geen rail
   van links naar rechts, maar haarspeldbochten naar beneden.
   De lijn zelf wordt in js/site.js berekend uit de gemeten posities van de
   knopen, dus hij klopt bij elke breedte en elke tekstlengte. */
.walk{ position:relative; --node-x:clamp(2rem,3.5vw,3.25rem);
  padding-block:clamp(3rem,7vw,6rem) clamp(5rem,10vw,9rem); }
/* als eerste sectie van de pagina: vrij van de vaste navigatie */
.walk--top{ padding-top:calc(var(--nav-h) + clamp(3.5rem,8vw,7rem)); }
.walk__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.walk__route{ fill:none; stroke:var(--line-2); stroke-width:2; stroke-linecap:round; stroke-dasharray:.01 8; }
.walk__line{ fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; }
.walk__pen{ fill:var(--ink); opacity:0; transition:opacity .3s var(--e-soft); }
.walk__pen.on{ opacity:1; }

/* Een stapel, geen raster: in een 12-koloms grid zet de browser een linker-
   en een rechterstap automatisch náást elkaar in dezelfde rij, en dan is er
   geen pad meer maar een zigzag. Dus elke stap krijgt zijn eigen regel, met
   breedte en inspringing uitgerekend op dezelfde 12 kolommen. */
.walk__list{ position:relative; z-index:1; display:flex; flex-direction:column;
  gap:clamp(7rem,15vw,13rem);
  --col:calc((100% - 11 * var(--gap)) / 12); }
.walk__step{ position:relative;
  width:calc(5 * var(--col) + 4 * var(--gap));
  margin-left:calc(var(--col) + var(--gap)); }
.walk__step:nth-of-type(even){ margin-left:calc(7 * var(--col) + 7 * var(--gap)); }
.walk__step .step__t{ margin-top:1.1rem; }

/* Een halte: een lege ring op het pad. Het wit binnenin onderbreekt de lijn,
   zodat hij leest als een stop en niet als een kruispunt. */
.walk__node{
  position:absolute; top:-.05rem; left:calc(-1 * var(--node-x)); margin-left:-.40625rem;
  width:.8125rem; height:.8125rem; border-radius:50%;
  background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line-2);
  transition:background-color .45s var(--e), box-shadow .45s var(--e), transform .6s var(--e);
}
.walk__end{
  width:.8125rem; height:.8125rem; border-radius:50%;
  background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line-2);
  transition:background-color .45s var(--e), box-shadow .45s var(--e), transform .6s var(--e);
}
/* aangekomen: de ring vult zich en zet zich even aan */
.walk__step.is-reached .walk__node,
.walk__end.is-reached{ background:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); transform:scale(1.15); }

/* en een kring die eenmalig uitdijt, als een voetstap die landt */
.walk__node::after, .walk__end::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 1px var(--ink); opacity:0; pointer-events:none;
}
.walk__end{ position:relative; }
.walk__step.is-reached .walk__node::after,
.walk__end.is-reached::after{ animation:walk-ping .9s var(--e) both; }
@keyframes walk-ping{ 0%{ opacity:.45; transform:scale(1) } 100%{ opacity:0; transform:scale(3.2) } }

/* De inhoud komt pas als je er bent — kop, tekst en lijst kort na elkaar.
   Hangt aan html.js: draait het script niet, dan staat alles gewoon. */
html.js .walk__body > *{
  opacity:0; transform:translateY(1.25rem);
  transition:opacity .7s var(--e-soft) var(--wd,0ms), transform .95s var(--e) var(--wd,0ms);
}
html.js .walk__step.is-seen .walk__body > *{ opacity:1; transform:none; }
.walk__body > :nth-child(2){ --wd:70ms; }
.walk__body > :nth-child(3){ --wd:140ms; }
.walk__body > :nth-child(4){ --wd:210ms; }
html.no-anim .walk__body > *{ opacity:1 !important; transform:none !important; }

/* Het einde van het pad: een stip in het midden, recht boven de disciplines. */
.walk__finish{ display:flex; flex-direction:column; align-items:center; }

/* ---- disciplines (aanpak) --------------------------------------------------
   Waar het pad landt, begint een gecentreerd blok: kop in het midden, de vier
   disciplines naast elkaar in gelijke kolommen, elk met een haarlijn erboven.
   Rustig en symmetrisch — het pad was de beweging, dit is de rust erna. */
.disc{ text-align:center; }
.disc__t{ margin-top:1.1rem; text-wrap:balance; }
.disc__x{ margin-top:.8rem; color:var(--ink-2); }
.disc__grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(2.5rem,5vw,3.5rem) var(--gap);
  margin-top:clamp(3rem,6vw,5rem); }
.disc__item{ border-top:1px solid var(--line); padding-top:clamp(1.5rem,3vw,2.25rem); }
.disc__item h3{ margin-top:1.1rem; font-size:var(--t-md); font-weight:500; letter-spacing:-.02em; line-height:1.25; }
.disc__item p{ margin:.65rem auto 0; max-width:28ch; font-size:var(--t-sm); line-height:1.65; color:var(--ink-2); text-wrap:balance; }
@media (max-width:900px){ .disc__grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .disc__grid{ grid-template-columns:minmax(0,1fr); } }

/* ---- vragen (aanpak) -------------------------------------------------------
   Subtiel: smalle kolom in het midden, lopende-tekstmaat in plaats van een
   grote kop, en het label als enige titel. */
.faq{ max-width:44rem; }
.faq__k{ text-align:center; margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.faq .qa summary{ font-size:var(--t-body); letter-spacing:-.01em; padding-block:clamp(.85rem,1.6vw,1.1rem); }
.faq .qa summary i{ transform:scale(.8); }
.faq .qa__a{ font-size:var(--t-sm); line-height:1.65; padding-bottom:1.1rem; }

/* ---- afsluiter (aanpak) ---------------------------------------------------- */
.cta-end{ text-align:center; }
.cta-end__t{ max-width:16ch; margin-inline:auto; text-wrap:balance; }
.cta-end__go{ margin-top:clamp(1.75rem,3vw,2.5rem); }

/* Klein scherm: alles in één kolom, het pad in de linkermarge. De knopen
   staan om beurten net iets verder of dichterbij, zodat het ook hier een
   pad blijft dat slingert in plaats van een rechte meetlat. */
@media (max-width:860px){
  .walk{ --node-x:1.5rem; }
  .walk__list{ padding-left:2.25rem; gap:clamp(4rem,14vw,5.5rem); }
  .walk__step, .walk__step:nth-of-type(even){ width:auto; margin-left:0; }
  .walk__step:nth-of-type(even) .walk__node{ left:-.85rem; }
  .walk__finish{ align-items:flex-start; text-align:left; }
  .walk__end{ margin-left:calc(-1 * var(--node-x) - .40625rem); }
}

/* ---- projecten als beeld -------------------------------------------------- */

/* Homepage: vier projecten die tijdens het scrollen één voor één van onderen
   opkomen en samen een rij vormen. Daarna schuift de rij door naar de
   verwijzing naar alle projecten. Alleen beeld — naam en jaar staan op de
   projectpagina zelf. */
.track__rail--pj{ --pj-gap:clamp(.75rem,1.6vw,1.35rem); gap:var(--pj-gap); align-items:center; }
.pj{ flex:0 0 calc((var(--shell) - 3 * var(--pj-gap)) / 4); display:block; will-change:transform,opacity; }
.pj .media__in{ inset:0 !important; transform:none !important; }
.pj .media__in img{ transition:transform 1.1s var(--e); }
.pj:hover .media__in img{ transform:scale(1.045); }

/* Beginstand vóór het eerste frame, zodat er niets opflitst. Hangt aan
   html.js: draait het script niet, dan staat alles gewoon zichtbaar. */
@media (min-width:861px){
  html.js .track--rise [data-rise]{ opacity:0; }
}

/* De randvervaging zegt "er komt nog meer". Tijdens het opbouwen is dat nog
   niet waar, dus hij verschijnt pas als de rij echt gaat schuiven. */
.track--rise .track__pin::after{ opacity:0; transition:opacity .5s var(--e); }
.track--rise.is-panning .track__pin::after{ opacity:1; }

/* ---- partners (homepage) ---------------------------------------------------
   sterk × merk. Het partnerlogo rolt als in een venster naar binnen, de ×
   draait bij elke wissel een kwartslag. Daaronder alle merken op een rij, het
   actieve in inkt, met een voortgangslijn op de haarlijn erboven. */
.partners{ text-align:center; --hold:1600ms; }
.partners__defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* Drie kolommen: de × staat altijd precies in het midden van de pagina.
   sterk lijnt rechts uit tegen de ×, het partnerlogo links — zo is de ruimte
   aan beide kanten gelijk, hoe breed het partnerlogo ook is. */
.partners__lock{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  column-gap:clamp(1.25rem,3vw,3rem); margin-top:clamp(2.5rem,6vw,4.5rem);
  --logo-h:clamp(2.25rem,4.6vw,4.25rem); }
.partners__us{ justify-self:end; height:var(--logo-h); width:auto; max-width:none; filter:url(#ink); }
.partners__x{ display:inline-block; font-size:clamp(1.75rem,3.4vw,3rem); font-weight:300; line-height:1;
  color:var(--ink-3); transition:transform .7s var(--e); }

/* het venster: vaste hoogte, zodat de lockup niet verspringt per logo */
.partners__slot{ justify-self:start; position:relative; width:100%; max-width:27rem;
  height:calc(var(--logo-h) * 1.3); overflow:hidden; }
.partners__slot .partner{ justify-items:start; }
.partners__logo{ position:absolute; inset:0; opacity:0; transform:translateY(40%);
  transition:opacity .4s var(--e-soft), transform .7s var(--e); }
.partners__logo.is-on{ opacity:1; transform:none; transition-delay:.08s; }
.partners__logo.is-off{ opacity:0; transform:translateY(-40%);
  transition:opacity .3s var(--e-soft), transform .55s var(--e-in); }

/* één logo: beeld als het er is, anders de naam */
.partner{ display:grid; place-items:center; width:100%; height:100%; }
/* De hoogte is een basismaat maal --f, die het script per logo zet: brede
   logo's worden lager, vierkante hoger, zodat ze even zwaar ogen. */
.partner img{ height:calc(var(--logo-h, 2rem) * var(--f, 1)); width:auto; max-width:100%;
  object-fit:contain; filter:url(#ink); }
.partner__name{ font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--ink); white-space:nowrap; }
.partners__slot .partner__name{ font-size:clamp(1.6rem,3.6vw,3.25rem); }
/* logo geladen: de naam blijft voor schermlezers, maar is niet te zien */
.partner.has-logo .partner__name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* de rij met alle merken */
.partners__index{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:0 var(--gap);
  margin-top:clamp(3.5rem,8vw,6.5rem); --logo-h:clamp(1.05rem,1.7vw,1.5rem); }
.partners__pick{ position:relative; display:block; width:100%; height:clamp(4.75rem,8vw,6.25rem);
  padding:1.35rem clamp(.25rem,1vw,1rem) .9rem; border-top:1px solid var(--line);
  opacity:.3; transition:opacity .45s var(--e-soft); }
.partners__pick:hover, .partners__pick:focus-visible, .partners__pick.is-on{ opacity:1; }
.partners__pick .partner__name{ font-size:var(--t-sm); font-weight:500; white-space:normal; }
/* voortgang op de haarlijn boven het actieve merk */
.partners__bar{ position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:left center; }
.partners__pick.is-on .partners__bar{ transform:scaleX(1); }
.partners__pick.run .partners__bar{ animation:partners-fill var(--hold) linear both; }
@keyframes partners-fill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

@media (max-width:640px){
  .partners__lock{ grid-template-columns:minmax(0,1fr); justify-items:center; row-gap:1rem; }
  .partners__us, .partners__slot{ justify-self:center; }
  .partners__slot{ max-width:18rem; }
  .partners__slot .partner{ justify-items:center; }
  .partners__index{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* liggende rail: je scrolt naar beneden, de foto's schuiven opzij */
.slide{ flex:0 0 auto; display:block; }
.slide .media{ height:clamp(17rem, 58vh, 38rem); width:auto; }
.slide .media__in{ transition:transform 1.1s var(--e); }
.slide:hover .media__in{ transform:scale(1.045); }
.slide__foot{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; margin-top:.9rem; }
.slide__t{ font-size:var(--t-md); letter-spacing:-.02em; }
.slide--end{
  display:flex; align-items:center; align-self:center;
  padding-inline:clamp(2rem,6vw,6rem);
  font-size:var(--t-lg); letter-spacing:-.03em; white-space:nowrap;
}
.slide--end span{ transition:transform .55s var(--e); display:inline-block; }
.slide--end:hover span{ transform:translateX(.5rem); }

/* werk: index van alle projecten. Vier smalle kolommen, de even kolommen
   zakken wat in — rustig overzicht, maar geen strak rooster. */
.wk__head{ border-bottom:1px solid var(--line); margin-bottom:clamp(2rem,4vw,3rem); }
.wk__view{ display:flex; gap:1.5rem; }
.wk__view button{ color:var(--ink-3); transition:color .3s var(--e-soft); }
.wk__view button:hover{ color:var(--ink); }
.wk__view button[aria-pressed="true"]{ color:var(--ink); }
.wk__view button[aria-pressed="true"]::before{ content:""; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--ink); margin-right:.5rem; vertical-align:middle; }

.wk{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(2.5rem,5vw,4.5rem) var(--gap); align-items:start; }
.wk__i{ display:block; }
/* stilstaand: geen parallax, geen zoom, geen slideshow. Foto vult het kader (cover);
   bij hover een grijze laag met bedrijf en jaar. */
.wk__i .media__in{ inset:0 !important; transform:none !important; }
.wk__i .media__in img{ object-fit:cover; object-position:center; }
.wk__ov{ position:absolute; inset:0; display:flex; justify-content:space-between; align-items:flex-end;
  padding:1.1rem 1.2rem; background:var(--ph); color:var(--ink); font-size:var(--t-sm);
  opacity:0; transition:opacity .35s var(--e-soft); pointer-events:none; }
.wk__i:hover .wk__ov, .wk__i:focus-visible .wk__ov{ opacity:1; }
.wk__foot{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem; align-items:baseline;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); position:relative; }
.wk__foot::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--e); }
.wk__i:hover .wk__foot::before{ transform:scaleX(1); }
.wk__n, .wk__y{ font-size:var(--t-sm); color:var(--ink-3); }
.wk__t{ font-size:var(--t-md); line-height:1.2; letter-spacing:-.02em; transition:transform .55s var(--e); }
.wk__i:hover .wk__t{ transform:translateX(.35rem); }
.wk__t small{ display:block; margin-top:.3rem; font-size:var(--t-sm); letter-spacing:0; color:var(--ink-3); }

[data-pane][hidden]{ display:none; }

/* eenvoudig raster (diensten, team, kaarten) */
.cases{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(2rem,5vw,5rem) var(--gap); }
.case__t{ font-size:var(--t-md); letter-spacing:-.02em; }

/* cijfers */
.figures{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); }
.figure__v{ font-size:clamp(2.5rem,5.5vw,4.75rem); line-height:1; letter-spacing:-.05em; font-weight:500; }
.figure__l{ margin-top:.75rem; }

/* kaarten */
.card{ border-top:1px solid var(--line); padding-top:1.25rem; }
.card__t{ font-size:var(--t-md); letter-spacing:-.02em; margin-top:.5rem; }
.card__x{ color:var(--ink-2); margin-top:.6rem; font-size:var(--t-sm); line-height:1.65; }

/* citaat */
.quote{ font-size:clamp(1.5rem,3.4vw,2.9rem); line-height:1.18; letter-spacing:-.035em; font-weight:400; }

/* lijstrijen voor contact / klanten */
.line-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding-block:clamp(.9rem,2vw,1.35rem); border-top:1px solid var(--line);
  font-size:var(--t-md); letter-spacing:-.02em;
  transition:padding-left .5s var(--e);
}
.line-row:last-child{ border-bottom:1px solid var(--line); }
a.line-row:hover{ padding-left:.9rem; }
.line-row span:last-child{ font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }

/* vraag & antwoord */
.qa{ border-top:1px solid var(--line); }
.qa:last-of-type{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding-block:clamp(1rem,2vw,1.4rem); font-size:var(--t-md); letter-spacing:-.02em; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary i{ position:relative; width:11px; height:11px; flex:0 0 auto; }
.qa summary i::before, .qa summary i::after{ content:""; position:absolute; background:var(--ink); inset:5px 0 5px 0; }
.qa summary i::before{ height:1px; top:5px; }
.qa summary i::after{ width:1px; left:5px; top:0; bottom:0; transition:transform .45s var(--e); }
.qa[open] summary i::after{ transform:scaleY(0); }
.qa__a{ color:var(--ink-2); max-width:60ch; padding-bottom:1.4rem; animation:qa .5s var(--e) both; }
@keyframes qa{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* formulier */
.field{ display:grid; gap:.5rem; margin-bottom:1.6rem; }
.field input, .field textarea, .field select{
  font:inherit; color:inherit; background:transparent;
  border:0; border-bottom:1px solid var(--line-2); padding:.7rem 0;
  transition:border-color .4s var(--e-soft);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-bottom-color:var(--ink); }
.field textarea{ resize:vertical; min-height:7rem; }
.choice{ display:flex; flex-wrap:wrap; gap:.5rem; }
.choice label{ cursor:pointer; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice span{
  display:inline-block; padding:.55rem 1.1rem; border-radius:100px;
  box-shadow:inset 0 0 0 1px var(--line-2); font-size:var(--t-sm); color:var(--ink-2);
  transition:box-shadow .3s, background-color .3s, color .3s;
}
.choice input:checked + span{ background:var(--ink); color:var(--bg); box-shadow:none; }
.choice input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:3px; }

/* contact: het formulier als genummerde vragen. Links de vraag, rechts het
   antwoord, elke vraag tussen haarlijnen — je ziet meteen hoe lang het is. */
.ask__row{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1.25rem var(--gap);
  padding-block:clamp(1.75rem,3.5vw,2.75rem); border-top:1px solid var(--line); }
.ask__row:last-child{ border-bottom:1px solid var(--line); }
.ask__q{ display:flex; gap:clamp(1rem,2.5vw,2.25rem); align-items:baseline; }
.ask__n{ color:var(--ink-3); font-size:var(--t-sm); min-width:1.6rem; }
.ask__t{ font-size:var(--t-lg); line-height:1.1; letter-spacing:-.03em; font-weight:500; }
.ask__t small{ display:block; max-width:30ch; margin-top:.7rem; font-size:var(--t-sm); line-height:1.5;
  letter-spacing:0; font-weight:400; color:var(--ink-3); }
.ask__a{ display:grid; gap:1.25rem; align-content:start; }
.ask__a input, .ask__a textarea{ width:100%; font:inherit; font-size:var(--t-md); letter-spacing:-.018em; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line-2); border-radius:0; padding:.35rem 0 .8rem;
  transition:border-color .4s var(--e-soft); }
.ask__a textarea{ resize:vertical; min-height:7.5rem; line-height:1.45; }
.ask__a input::placeholder, .ask__a textarea::placeholder{ color:var(--ink-3); opacity:.6; }
.ask__a input:focus, .ask__a textarea:focus{ outline:none; border-bottom-color:var(--ink); }

/* keuzes: een rijtje met bolletjes, het gekozen bolletje gevuld */
.opts{ display:flex; flex-wrap:wrap; gap:.9rem 2rem; padding-top:.35rem; }
.opts label{ position:relative; display:inline-flex; align-items:center; gap:.7rem; cursor:pointer;
  font-size:var(--t-md); letter-spacing:-.018em; color:var(--ink-3); transition:color .3s var(--e-soft); }
.opts input{ position:absolute; opacity:0; pointer-events:none; }
.opts i{ width:.7rem; height:.7rem; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line-2); flex:0 0 auto;
  transition:box-shadow .35s var(--e), background-color .35s var(--e-soft); }
.opts label:hover{ color:var(--ink); }
.opts label:hover i{ box-shadow:inset 0 0 0 1px var(--ink); }
.opts input:checked ~ span{ color:var(--ink); }
.opts input:checked ~ i{ background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.opts input:focus-visible ~ span{ outline:2px solid var(--ink); outline-offset:3px; }

/* lokveld voor spambots: buiten beeld, niet voor mensen */
.ask__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* een verplicht veld dat nog leeg of fout is */
.ask__a [aria-invalid="true"]{ border-bottom-color:var(--ink); box-shadow:inset 0 -1px 0 var(--ink); }
.ask__a [aria-invalid="true"]::placeholder{ color:var(--ink-2); }
/* melding naast de knop: grijs in rust, inkt zodra er iets te melden is */
.ask__status[data-state="ok"], .ask__status[data-state="error"]{ color:var(--ink); }
.ask__send .pill[disabled]{ opacity:.5; pointer-events:none; }

/* verzenden: knop onder de antwoordkolom */
.ask__send{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1.25rem var(--gap);
  margin-top:clamp(2rem,4vw,3rem); align-items:center; }
.ask__send .label{ line-height:1.6; }
.ask__send .pill{ justify-self:start; }
@media (max-width:860px){
  .ask__row, .ask__send{ grid-template-columns:1fr; }
  .ask__send .label{ order:2; }
}

/* contact: rechtstreekse gegevens op één rij */
.reach{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem var(--gap); }
.reach > *{ border-top:1px solid var(--line); padding-top:1.1rem; }
.reach__v{ margin-top:.8rem; font-size:var(--t-md); line-height:1.35; letter-spacing:-.018em; }
.reach__x{ display:block; margin-top:.7rem; font-size:var(--t-sm); letter-spacing:0; line-height:1.5; color:var(--ink-3); }
@media (max-width:860px){ .reach{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:560px){ .reach{ grid-template-columns:1fr !important; } }

/* volgende case */
.next{ display:flex; justify-content:space-between; align-items:baseline; gap:2rem; flex-wrap:wrap;
  padding-block:clamp(2.5rem,6vw,5rem); border-top:1px solid var(--line); }
.next__t{ font-size:var(--t-xl); letter-spacing:-.04em; line-height:1; font-weight:500; transition:transform .6s var(--e); }
.next:hover .next__t{ transform:translateX(.8rem); }

/* case-detail */
.case-meta{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:clamp(1.5rem,3vw,2.25rem); }
.case-meta dd{ margin-top:.5rem; }
.gallery{ display:grid; gap:var(--gap); }
.gallery-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* twee beelden van dezelfde hoogte, breedte volgt de verhouding (1200:720 = 5:3) */
.gallery-duo{ grid-template-columns:var(--cols, minmax(0,5fr) minmax(0,3fr)); }
.gallery-duo--flip{ grid-template-columns:minmax(0,3fr) minmax(0,5fr); }
.prose p + p{ margin-top:1.1rem; }
.prose{ color:var(--ink-2); max-width:56ch; }
.prose strong{ color:var(--ink); font-weight:500; }

/* uitleiding */
.cta__t{ max-width:16ch; }

/* 09 — footer --------------------------------------------------------------- */
.foot{ padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(1.5rem,3vw,2.5rem); border-top:1px solid var(--line); }
.foot__grid{ display:grid; grid-template-columns:minmax(0,2fr) repeat(3, minmax(0,1fr)); gap:2.5rem var(--gap); }
.foot__col a{ display:block; padding-block:.3rem; color:var(--ink-2); transition:color .3s, transform .45s var(--e); }
.foot__col a:hover{ color:var(--ink); transform:translateX(.25rem); }
.foot__mark{ margin-top:clamp(3rem,7vw,6rem); color:var(--ink); }
.foot__mark svg{ width:100%; height:auto; display:block; }
.foot__bar{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-top:1.25rem; margin-top:1.25rem; border-top:1px solid var(--line); }

/* taalwissel EN / NL */
.lang{ display:inline-flex; align-items:center; gap:.6rem; }
.lang a{ color:var(--ink-3); transition:color .3s var(--e-soft); }
.lang a:hover{ color:var(--ink); }
.lang a[aria-current]{ color:var(--ink); }
.lang i{ display:block; width:1px; height:.85em; background:var(--line-2); }

/* 10 — responsive ------------------------------------------------------------ */
@media (max-width:1100px){
  .figures{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:860px){
  :root{ --shell:min(1600px,88vw); --nav-h:4rem; }
  .nav__links{ display:none; }
  .burger{ display:inline-flex; }
  .nav .pill{ display:none; }
  .split{ grid-template-columns:1fr; gap:1.25rem; }
  .split__side{ position:static; }
  .split__side:empty{ display:none; }
  .cases, .gallery-2, .toc{ grid-template-columns:1fr; }
  /* Op smalle schermen breekt de disciplinerij; hij blijft gecentreerd. */
  .hero__disc{ gap:.75rem 1.25rem; }
  .row{ grid-template-columns:2.5rem minmax(0,1fr) 4rem; }
  .row__meta{ grid-column:2; }
  .peek{ display:none; }
  .dot{ display:none; }
  .track__pin{ height:auto; position:static; display:block; }
  .track__pin::after{ display:none; }   /* rail staat hier onder elkaar, niks om uit te laten lopen */
  .track__rail{ flex-direction:column; transform:none !important; }
  .step{ flex:1 1 auto; }
  .slide .media{ height:auto; width:100%; }
  .slide--end{ padding-inline:0; padding-block:1rem; }
  .wk{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .step__t{ margin-top:1.5rem; }
}
@media (max-width:560px){
  .figures{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  .case-meta{ grid-template-columns:1fr; }
  .gallery-duo, .gallery-duo--flip{ grid-template-columns:1fr; }
  .line-row{ flex-direction:column; gap:.2rem; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html.js [data-anim]{ visibility:visible; }
  [data-anim], [data-anim] > *, .line__i, .word__i, .char{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .media__in{ transform:none !important; }
  .dot, .peek{ display:none; }
  .walk__body > *, .walk__finish > *{ opacity:1 !important; transform:none !important; }
  .walk__node::after, .walk__end::after{ display:none; }
}

/* Projectrij op klein scherm: geen pin, geen zijwaartse beweging — gewoon
   twee naast elkaar. Staat na het blok op 860px zodat deze regels winnen. */
@media (max-width:860px){
  .track__rail--pj{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .track__rail--pj .pj{ flex:none; }
  /* beginstand vóór het eerste frame; site.js laat ze per kaart opkomen */
  html.js .track__rail--pj [data-rise]{ opacity:0; }
  .track__rail--pj .slide--end{ grid-column:1 / -1; padding-inline:0; padding-block:1.25rem; }
}

/* projectpagina's: geen parallax-uitsnede, dus niets wordt onder of boven afgesneden */
.r-hero{ aspect-ratio:3/2; }
[data-case] .media__in{ inset:0 !important; transform:none !important; }

/* werkraster: kadreer elk cover op het onderwerp, zodat het rustig blijft */
.wk__i img[src*="axis-01"]{ object-position:50% 50%; }
.wk__i img[src*="sotto-01"]{ object-position:62% 50%; }
.wk__i img[src*="loopvac-01"]{ object-position:47% 50%; }
.wk__i img[src*="rack-01"]{ object-position:50% 50%; }
.wk__i img[src*="layered-01"]{ object-position:50% 50%; }
.wk__i img[src*="smotspot-01"]{ object-position:50% 50%; }
.wk__i img[src*="flag-01"]{ object-position:50% 50%; }

/* homepage-rail: elk beeld gecentreerd op zijn onderwerp (kader is 3:4) */
.pj img[src*="loopvac-01"]{ object-position:45% 50%; }
.pj img[src*="sotto-01"]{ object-position:48% 50%; }
.pj img[src*="rack-01"]{ object-position:51% 50%; }
.pj img[src*="layered-01"]{ object-position:50% 50%; }
.pj img[src*="smotspot-01"]{ object-position:50% 50%; }
.pj img[src*="flag-01"]{ object-position:50% 50%; }

/* projectpagina's: elk beeld in zijn eigen verhouding, nooit bijgesneden */
[data-case] .media{ max-width:100%; }
[data-case] .gallery-2{ align-items:start; }
[data-case] .solo{ max-width:min(100%, 40rem); margin-inline:auto; }


/* studio: de twee portretten. Uitgeknipt, dus de pagina is hun achtergrond.
   Elk portret staat op een haarlijn en rijst daaruit op naarmate je scrolt:
   --p loopt van 0 (onder de lijn) naar 1 (staat erop), gezet door studio()
   in site.js. Zonder js is --p gewoon 1 en staan ze er meteen. */
.meet__duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3.5rem);
  width:min(100%, 44rem); margin:clamp(2.5rem,6vw,5rem) auto 0; }
.meet__stage{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.meet__stage::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink);
  transform:scaleX(clamp(.1, var(--p,1), 1)); transform-origin:50% 50%; }
/* komt licht gekanteld op en richt zich onderweg op; boven 1 (de veer
   schiet door) wipt het portret een haar boven de lijn en zakt terug */
.meet__stage img{ position:absolute; left:50%; bottom:0; width:90%; max-width:none;
  transform:translate(-50%, calc((1 - var(--p,1)) * 102%)) rotate(calc((1 - var(--p,1)) * var(--tilt,0deg)))
    scale(calc(.9 + .1 * var(--p,1)));
  transform-origin:50% 100%; will-change:transform; }
.meet__p--tijn{ --tilt:-7deg; }
.meet__p--andres{ --tilt:7deg; }
.meet__p--andres .meet__stage img{ width:86%; }

.meet__cap{ display:block; margin-top:1.1rem; }
.meet__cap > *{ opacity:0; transform:translateY(.6rem); transition:opacity .6s var(--e-soft), transform .8s var(--e); }
.meet__cap > :nth-child(2){ transition-delay:.08s; }
.meet__cap > :nth-child(3){ transition-delay:.16s; }
.meet__p.up .meet__cap > *, html.no-anim .meet__cap > *, .meet:not(.is-live) .meet__cap > *{ opacity:1; transform:none; }
.meet__name{ display:block; font-size:var(--t-md); letter-spacing:-.02em; line-height:1.2; }
.meet__bio{ grid-column:2; max-width:38ch; margin-top:.6rem; font-size:var(--t-sm); line-height:1.6; color:var(--ink-2); }
@media (max-width:560px){ .meet__duo{ gap:2.5rem 1rem; } .meet__bio{ grid-column:1 / -1; } }

/* studio: teamfoto naast de standpunten, in de originele staande verhouding (1153:2000) */
/* studio: de vier waarden. Een rij van vier onder haarlijnen; bij hover
   trekt er een inktlijn over de haarlijn. */
.vals{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.5rem var(--gap); }
.vals__i{ position:relative; padding-top:1.1rem; border-top:1px solid var(--line); }
.vals__i::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--e); }
.vals__i:hover::before{ transform:scaleX(1); }
.vals__t{ margin-top:clamp(1.5rem,3vw,2.5rem); font-size:var(--t-lg); line-height:1.1; letter-spacing:-.03em; font-weight:500; }
.vals__x{ margin-top:.9rem; max-width:32ch; font-size:var(--t-sm); line-height:1.65; color:var(--ink-2); }
@media (max-width:1100px){ .vals{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .vals{ grid-template-columns:1fr; } }

.duo{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,6vw,7rem); align-items:stretch; }
.duo__text{ display:flex; flex-direction:column; justify-content:flex-end; }
.duo .ask__row{ grid-template-columns:1fr; }
.duo .ask__q{ margin-bottom:.25rem; }
.duo__ph{ align-self:start; width:100%; }
.duo__ph .media__in{ inset:0 !important; transform:none !important; }
.duo__ph img{ object-position:50% 50%; }
@media (max-width:900px){
  .duo{ grid-template-columns:1fr; }
  .duo__ph{ order:-1; max-width:min(100%, 32rem); margin-inline:auto; }
}


/* privacy, cookies en voorwaarden: rustige leestekst */
.legal__body{ max-width:64ch; color:var(--ink-2); line-height:1.7; }
.legal__body h2{ margin:2.75rem 0 .8rem; font-size:var(--t-md); font-weight:500; letter-spacing:-.02em; line-height:1.25; color:var(--ink); }
.legal__body h2:first-child{ margin-top:0; }
.legal__body p + p, .legal__body ul + p, .legal__body p + ul{ margin-top:1rem; }
.legal__body ul{ padding-left:1.2rem; list-style:disc; }
.legal__body li + li{ margin-top:.5rem; }
.legal__body strong{ color:var(--ink); font-weight:500; }
.legal__body a{ color:var(--ink); }

.foot__bar .foot__reg{ flex:0 0 100%; color:var(--ink-3); text-transform:none; letter-spacing:.02em; line-height:1.7; }

/* 11 — cookie consent ------------------------------------------------------ */
.consent{ position:fixed; z-index:200; left:1rem; right:1rem; bottom:1rem; max-width:34rem; display:flex; flex-direction:column; gap:1rem; padding:1.25rem 1.4rem; background:var(--bg); color:var(--ink); box-shadow:0 0 0 1px var(--line-2), 0 12px 40px rgba(12,12,13,.12); font-size:var(--t-sm); line-height:1.55; }
.consent p{ margin:0; color:var(--ink-2); }
.consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:.2em; }
.consent__btns{ display:flex; gap:.6rem; flex-wrap:wrap; }
.consent .pill{ cursor:pointer; font:inherit; font-size:var(--t-sm); padding:.7rem 1.4rem; }
@media (min-width:640px){ .consent{ left:auto; right:1.5rem; bottom:1.5rem; } }