/* christ.tdgdigital.com: "Build it. Loved it. Time for more."
   Zwart-wit als zijn portret, één koperen draad. Imbue (gecondenseerde didone) voor uitspraken,
   Red Hat Display/Text voor de rest. Logo = gevectoriseerd echt logo (C + twee benen van de A). */
@font-face{font-family:"Imbue";src:url(/fonts/imbue.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"RHD";src:url(/fonts/rhd.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"RHD";src:url(/fonts/rhd-i.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:"RHT";src:url(/fonts/rht.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Hand";src:url(/fonts/hand.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --nacht:#0d0c0b; --inkt:#171513; --papier:#f3f0e9; --zand:#e7e1d5; --wit:#fbf9f4;
  --koper:#b48a55; --koper-licht:#d4ae78; --koper-diep:#8a6639; --grafiet:#5c5953; --mist:#a7a29a;
  --lijn:rgba(23,21,19,.14); --lijn-l:rgba(243,240,233,.16);
  --rand:clamp(1.25rem,4.4vw,4.5rem); --kop-h:4.5rem;
  --leg-l1:#8a8781; --leg-l2:#2e2d2b; --leg-r0:#2b2a28; --leg-r1:#cfcbc4; --leg-r2:#7e7b76; --logo:#171513;
  --zacht:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--kop-h);background:var(--nacht)}
/* Brede schermen: het 1440-ontwerp schaalt als geheel mee, geen smalle kolom (Joost 2026-10-10) */
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 1.0625rem/1.6 "RHT",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--koper);color:var(--nacht)}
img,video,svg{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
p,li,dd{hyphens:auto;overflow-wrap:break-word;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4}
h1,h2,h3,h4{hyphens:manual;overflow-wrap:normal;text-wrap:balance;margin:0}
:focus-visible{outline:2px solid var(--koper);outline-offset:3px}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--papier);padding:.5rem 1rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- typografie */
.label{font:600 .8125rem/1.3 "RHD",sans-serif;letter-spacing:.02em;color:var(--koper-diep);margin:0 0 1.1rem;display:flex;align-items:center;gap:.75rem}
.label::before{content:"";width:1.6rem;height:2px;background:linear-gradient(90deg,transparent,var(--koper));flex:none}
.nacht .label,.inkt .label,.pk-donker .label,.hero .label{color:var(--koper-licht)}
.kop-groot{font:600 clamp(2.4rem,1.5rem + 3.6vw,5.4rem)/.98 "Imbue",serif;font-variation-settings:"opsz" 100;letter-spacing:-.005em}
.kop-reus{font:600 clamp(3rem,1.6rem + 6vw,8.4rem)/.92 "Imbue",serif;font-variation-settings:"opsz" 100;letter-spacing:-.01em}
.intro{font-size:clamp(1.125rem,1rem + .4vw,1.375rem);line-height:1.5;max-width:36em;color:var(--grafiet)}
.nacht .intro,.inkt .intro,.pk-donker .intro{color:var(--mist)}
.koper-t{color:var(--koper-diep)}
.pijl{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;font:600 1rem/1.2 "RHD",sans-serif;text-decoration:none;border-bottom:1px solid currentColor;padding-top:.4rem}
.pijl::after{content:"";width:1.6rem;height:.55rem;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M0 4.5h24M20 .8l4 3.7-4 3.7' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M0 4.5h24M20 .8l4 3.7-4 3.7' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .4s var(--zacht)}
.pijl:hover::after{transform:translateX(.3rem)}

/* ---------- knoppen */
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0}
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.8rem 1.6rem;border-radius:999px;font:600 1rem/1.2 "RHD",sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--zacht)}
.knop:active{transform:scale(.98)}
.knop-klein{min-height:2.75rem;padding:.55rem 1.15rem;font-size:.9375rem}
.knop-koper{background:var(--koper);color:var(--nacht)}.knop-koper:hover{background:var(--koper-licht)}
.knop-inkt{background:var(--inkt);color:var(--papier)}.knop-inkt:hover{background:#2c2925}
.knop-lijn{border-color:currentColor;background:transparent;color:inherit}.knop-lijn:hover{background:rgba(180,138,85,.14)}

/* ---------- banden */
.band{padding:clamp(4.5rem,9vw,9rem) var(--rand);position:relative}
.papier{background:var(--papier)}.zand{background:var(--zand)}
.nacht{background:var(--nacht);color:var(--papier)}.inkt{background:var(--inkt);color:var(--papier)}
/* sectierand: de schuine snede van de A (logo-hoek ~52°) */
.band+.band::before,.hero+.band::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(1.2rem,3vw,2.6rem);transform:translateY(-99%);background:inherit;clip-path:polygon(0 100%,62% 100%,64% 0,64.4% 0,66.4% 100%,100% 100%);pointer-events:none}

/* ---------- logo */
.logo{width:100%;height:auto}.logo path,.mono path{fill-rule:evenodd}
.lg-c,.lg-deel,.lg-woord path,.lg-tagregel path{fill:var(--logo)}
.lg-deel{fill:var(--grafiet)}
.kop-donker,.voet,.opening,.pk-donker{--logo:#f3f0e9;--leg-l1:#9a968f;--leg-l2:#e4e0d8;--leg-r0:#f3f0e9;--leg-r1:#bdb8b0;--leg-r2:#7f7b75}

/* ---------- kop */
.kop{position:fixed;inset:0 0 auto;z-index:50;height:var(--kop-h);display:flex;align-items:center;gap:2rem;padding:0 var(--rand);color:var(--inkt);transition:background .4s,color .4s,transform .5s var(--zacht),box-shadow .4s}
.kop::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(243,240,233,.92);opacity:0;transition:opacity .4s}
.kop.is-vast::before{opacity:1}.kop.is-vast{box-shadow:0 1px 0 var(--lijn)}
.kop-donker{color:var(--papier)}
.kop-donker.is-vast{color:var(--inkt);--logo:#171513;--leg-l1:#8a8781;--leg-l2:#2e2d2b;--leg-r0:#2b2a28;--leg-r1:#cfcbc4;--leg-r2:#7e7b76}
.kop.is-weg{transform:translateY(-100%)}
.kop-logo{display:block;width:clamp(11.5rem,9rem + 6vw,15rem);flex:none;min-height:2.75rem;padding:.35rem 0}
.kop-nav{margin-left:auto}
.kop-nav ul{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
.kop-nav a{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem;padding:0 .8rem;font:500 .975rem/1 "RHD",sans-serif;text-decoration:none;position:relative}
.kop-nav a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.55rem;height:1.5px;background:var(--koper);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--zacht)}
.kop-nav a:hover::after,.kop-nav a[aria-current]::after{transform:none}
.kop-rechts{display:flex;align-items:center;gap:.6rem}
.kop-taal{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;font:600 .875rem/1 "RHD",sans-serif;text-decoration:none;opacity:.8}
.kop-taal:hover{opacity:1}
.kop-cta{background:var(--koper);color:var(--nacht)}
.kop-menu{display:none;width:2.9rem;height:2.9rem;flex-shrink:0;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;cursor:pointer;position:relative}
.kop-menu span:not(.vh){position:absolute;left:30%;right:30%;height:1.5px;background:currentColor;transition:transform .35s var(--zacht)}
.kop-menu span:nth-child(1){top:42%}.kop-menu span:nth-child(2){top:56%}
.kop-menu[aria-expanded=true] span:nth-child(1){transform:translateY(.2rem) rotate(45deg)}
.kop-menu[aria-expanded=true] span:nth-child(2){transform:translateY(-.2rem) rotate(-45deg)}
.lade{position:fixed;inset:0;z-index:45;background:var(--nacht);color:var(--papier);padding:calc(var(--kop-h) + 2rem) var(--rand) 2rem;display:flex;flex-direction:column;overflow-y:auto}
.lade ul{list-style:none;margin:0;padding:0}
.lade nav a{display:block;font:600 clamp(2.4rem,10vw,3.6rem)/1.15 "Imbue",serif;text-decoration:none;padding:.3rem 0;border-bottom:1px solid var(--lijn-l)}
.lade-voet{margin-top:auto;padding-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.lade-taal{display:inline-flex;align-items:center;min-height:2.75rem}
body.lade-open{overflow:hidden}
body.lade-open .kop{color:var(--papier);--logo:#f3f0e9;--leg-l1:#9a968f;--leg-l2:#e4e0d8;--leg-r0:#f3f0e9;--leg-r1:#bdb8b0;--leg-r2:#7f7b75}
body.lade-open .kop::before{opacity:0}
@media (max-width:1100px){.kop-nav,.kop-cta{display:none}.kop-menu{display:block}.kop-rechts{margin-left:auto}}

/* ---------- opening: de twee benen van de A vinden elkaar */
.opening{display:none}
.met-opening .opening{display:grid;place-items:center;position:fixed;inset:0;z-index:80;background:var(--nacht);transition:opacity .9s ease,visibility 0s .9s}
.met-opening .kop{opacity:0}
.op-logo{position:relative;width:min(78vw,46rem)}
.logo-op .lg-l{transform:translate(-55%,48%);opacity:0}
.logo-op .lg-r{transform:translate(42%,-62%);opacity:0}
.logo-op .lg-c{clip-path:inset(0 0 0 100%) fill-box}
.logo-op .lg-deel{transform:scaleY(0);transform-origin:50% 50%;transform-box:fill-box}
.logo-op .lg-woord{clip-path:inset(0 100% 0 0) fill-box}
.logo-op path,.logo-op g{transition:transform 1.05s var(--zacht),opacity .5s,clip-path .9s var(--zacht)}
.op-vonk{position:absolute;left:18.5%;top:37%;width:1.4rem;height:1.4rem;border-radius:50%;background:radial-gradient(closest-side,#f6d8a8,rgba(212,174,120,.6) 45%,transparent);transform:scale(0);opacity:0}
.opening.st1 .lg-l,.opening.st1 .lg-r{transform:none;opacity:1}
.opening.st2 .op-vonk{animation:vonk .9s ease-out forwards}
.opening.st2 .lg-c{clip-path:inset(0 0 0 0) fill-box}
.opening.st3 .lg-deel{transform:none}
.opening.st3 .lg-woord{clip-path:inset(0 0 0 0) fill-box}
.opening.uit{opacity:0;visibility:hidden}
.opening.uit .op-logo{transform:translateY(-6vh) scale(.92);transition:transform .9s var(--zacht)}
.op-sla{position:absolute;right:var(--rand);bottom:1.5rem;min-height:2.75rem;padding:0 1rem;background:none;border:1px solid var(--lijn-l);border-radius:999px;color:var(--mist);font:500 .875rem "RHD",sans-serif;cursor:pointer}
@keyframes vonk{0%{transform:scale(0);opacity:0}30%{transform:scale(2.6);opacity:1}100%{transform:scale(1);opacity:0}}
html:not(.met-opening) .opening{display:none}

/* ---------- hero */
.hero{position:relative;min-height:min(100svh,62rem);background:#000;color:var(--papier);display:grid;align-items:center;overflow:hidden;padding:calc(var(--kop-h) + 2rem) var(--rand) 4rem;isolation:isolate}
.hero-film{position:absolute;top:0;bottom:0;right:0;width:min(62%,calc(100svh * .7582));z-index:-1}
.hero-film::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0,rgba(0,0,0,.55) 14%,transparent 34%),linear-gradient(0deg,#000 0,transparent 22%)}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%}
.hero-video{opacity:0;transition:opacity 1.2s}
.hero-video.speelt{opacity:1}
.hero-tekst{max-width:min(46rem,56%)}
.hero-rollen{font:500 .9375rem/1.4 "RHD",sans-serif;color:var(--mist);margin:0 0 1.6rem}
.build{font:600 clamp(3.4rem,1.5rem + 7.6vw,9.6rem)/.86 "Imbue",serif;font-variation-settings:"opsz" 100;letter-spacing:-.01em;margin:0 0 2.2rem;display:flex;flex-direction:column}
.build span{display:block;white-space:nowrap}
.build .b3{color:var(--koper-licht)}
.js .hero .build span{opacity:0;transform:translateY(.25em);transition:opacity 1s,transform 1.2s var(--zacht)}
.js .hero.toon .build span{opacity:1;transform:none}
.js .hero.toon .build .b2{transition-delay:.45s}.js .hero.toon .build .b3{transition-delay:.9s}
.hero-h1{font:600 clamp(1.5rem,1.1rem + 1.3vw,2.35rem)/1.15 "RHD",sans-serif;letter-spacing:-.01em;max-width:22em}
.hero-lede{color:#cfcac2;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);max-width:32em;margin:1rem 0 0}
.js .hero .hero-h1,.js .hero .hero-lede,.js .hero .knoppen,.js .hero .hero-rollen{opacity:0;transition:opacity 1s 1.3s}
.js .hero.toon .hero-h1,.js .hero.toon .hero-lede,.js .hero.toon .knoppen,.js .hero.toon .hero-rollen{opacity:1}
.hero-bij{position:absolute;right:var(--rand);bottom:1.4rem;margin:0;font:italic 500 .8125rem/1.3 "RHD",sans-serif;color:#8d8880}
@media (max-width:900px),(orientation:portrait) and (max-width:1100px){
  .hero{display:block;padding:0;min-height:0}
  .hero-film{position:relative;width:100%;height:min(64svh,calc(100vw * 1.15));right:auto}
  .hero-film::after{background:linear-gradient(0deg,#000 0,rgba(0,0,0,.4) 22%,transparent 45%)}
  .hero-poster,.hero-video{object-position:42% 22%}
  .hero-tekst{max-width:none;padding:0 var(--rand) 3.5rem;margin-top:-34vw;position:relative}
  .build{font-size:clamp(3.2rem,15.5vw,7.4rem);margin-bottom:1.6rem}
  .hero-bij{position:static;padding:0 var(--rand) 1.4rem}
}
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:100svh;padding-top:calc(var(--kop-h) + .5rem);padding-bottom:1.5rem}
  .build{font-size:min(12vh,4.4rem);margin-bottom:.8rem}.hero-rollen{display:none}.hero-lede{display:none}.knoppen{margin-top:1rem}
  .hero-bij{display:none}
}

/* ---------- rollen (home) */
.rollen-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.rollen-kop .label{grid-column:1/-1}
.rollen-kop .intro{margin:0}
.rollen-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5.5rem);align-items:start}
.rol-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.rol-knop{width:100%;display:flex;align-items:baseline;gap:1.2rem;padding:.9rem 0;background:none;border:0;border-bottom:1px solid var(--lijn);color:var(--mist);cursor:pointer;text-align:left;position:relative;transition:color .4s}
.rol-knop::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--koper);transform:scaleX(0);transform-origin:left}
.rol-knop[aria-pressed=true]{color:var(--inkt)}
.rol-knop[aria-pressed=true]::after{animation:rolbalk var(--rolduur,6s) linear forwards}
.rollen.gepauzeerd .rol-knop[aria-pressed=true]::after,.rollen.handmatig .rol-knop[aria-pressed=true]::after{animation:none;transform:none}
@keyframes rolbalk{to{transform:none}}
.rol-knop:hover{color:var(--inkt)}
.rol-nr{font:600 .8125rem "RHD",sans-serif;color:var(--koper-diep);flex:none;width:1.6rem}
.rol-naam{font:600 clamp(2.2rem,1.4rem + 2.6vw,4.2rem)/1.02 "Imbue",serif;font-variation-settings:"opsz" 100}
.rol-teksten{padding-top:2rem;min-height:15rem}
.rol-tekst h3{font:600 1.6rem/1.15 "RHD",sans-serif;letter-spacing:-.01em;max-width:22em}
.rol-tekst p{max-width:34em;color:var(--grafiet)}
.rol-begint span{display:block;font:600 .8125rem "RHD",sans-serif;color:var(--koper-diep);margin-bottom:.15rem}
.rol-tekst:not([hidden]){animation:infaden .7s var(--zacht)}
@keyframes infaden{from{opacity:0;transform:translateY(.6rem)}}
.rollen-beelden{position:relative;aspect-ratio:3/2.15;background:var(--inkt);overflow:hidden}
.rol-beeld{position:absolute;inset:0;margin:0;opacity:0}
.rol-beeld.was{opacity:1;z-index:1}
.rol-beeld.is-aan{opacity:1;z-index:2;animation:wipe 1.1s var(--zacht) both}
@keyframes wipe{from{clip-path:polygon(0 0,0 0,-32% 100%,-32% 100%)}to{clip-path:polygon(0 0,132% 0,100% 100%,0 100%)}}
.rol-beeld img{width:100%;height:100%;object-fit:cover}
.rol-beeld figcaption{position:absolute;left:1.4rem;bottom:1.1rem;font:600 clamp(1.4rem,1rem + 1.2vw,2.2rem)/1.1 "Imbue",serif;color:var(--papier);text-shadow:0 1px 18px rgba(0,0,0,.6)}
.kern{margin:clamp(4rem,8vw,7rem) auto 0;text-align:center;font:600 clamp(1.9rem,1.2rem + 2.6vw,3.8rem)/1.08 "Imbue",serif;font-variation-settings:"opsz" 100;max-width:24em}
.kern span{display:block;color:var(--grafiet);font-size:.62em;font-family:"RHD",sans-serif;font-weight:500;letter-spacing:-.01em;line-height:1.4}
.kern em{font-style:normal;color:var(--koper-diep);display:inline-block;margin-top:.3rem}
@media (max-width:900px){
  .rollen-kop{grid-template-columns:minmax(0,1fr)}
  .rollen-grid{grid-template-columns:minmax(0,1fr)}
  .rollen-beelden{order:-1}
  .rol-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
  .rol-knop{padding:.7rem 0}.rol-naam{font-size:clamp(1.5rem,6.4vw,2.4rem);hyphens:manual}
  .rol-teksten{min-height:0;padding-top:1.4rem}
}

/* ---------- Brainport */
.brainport{padding:0;overflow:hidden;min-height:min(100svh,64rem);display:grid;grid-template-rows:1fr auto}
.bp-buhne{position:absolute;inset:0;overflow:hidden;container-type:size}
.bp-vlak{position:absolute;left:50%;top:50%;width:max(100cqw,176.47cqh);height:max(56.67cqw,100cqh);transform:translate(-50%,-50%)}
.bp-poster,.bp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bp-video{opacity:0;transition:opacity 1.2s}.bp-video.speelt{opacity:1}
.bp-buhne::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,11,.82) 0,rgba(13,12,11,.25) 30%,transparent 48%,rgba(13,12,11,.15) 66%,rgba(13,12,11,.92) 100%)}
.bp-draden{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.bp-draad{fill:none;stroke:var(--koper-licht);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:none;transition:stroke-dashoffset 1.6s var(--zacht),opacity .6s}
.bp-draad.aan{stroke-dashoffset:0;opacity:1}
.bp-eind circle{fill:#f6d8a8;opacity:0;transition:opacity .5s .9s}
.bp-eind.aan circle{opacity:1}
.bp-eind .bp-puls{fill:none;stroke:#f6d8a8;stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.bp-eind.aan .bp-puls{animation:puls 2.4s 1.2s ease-out infinite}
@keyframes puls{0%{transform:scale(1);opacity:.8}100%{transform:scale(4.5);opacity:0}}
.bp-tekst{position:relative;z-index:2;padding:calc(var(--kop-h) + 3rem) var(--rand) 0;max-width:min(60rem,72%)}
.bp-tekst .kop-groot{font-size:clamp(2rem,1.2rem + 3vw,4.6rem)}
.bp-onder{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 4rem;align-items:end;padding:3rem var(--rand) clamp(2.5rem,5vw,4rem)}
.bp-citaat{font:600 clamp(1.35rem,1rem + 1.1vw,2.1rem)/1.2 "Imbue",serif;font-variation-settings:"opsz" 60;margin:0;max-width:22em;color:var(--papier)}
.bp-paren{border-left:2px solid var(--koper);padding-left:1.4rem}
.bp-paar{margin:0;display:flex;flex-direction:column;gap:.35rem;font:600 clamp(1.05rem,.95rem + .45vw,1.4rem)/1.3 "RHD",sans-serif;min-height:5.6em;justify-content:flex-end}
.bp-paar i{display:block;width:3rem;height:2px;background:linear-gradient(90deg,var(--koper-licht),transparent);margin:.2rem 0}
.bp-paar span:last-child{color:var(--koper-licht)}
.bp-paar:not([hidden]){animation:infaden .6s var(--zacht)}
.bp-bedien{display:flex;align-items:center;gap:1rem;margin:1.2rem 0 .6rem}
.bp-tel{font:500 .875rem "RHD",sans-serif;color:var(--mist)}
.bp-bron{font-size:.875rem;color:var(--mist);margin:0}
.bp-bron a{display:inline-flex;min-height:2.75rem;align-items:center;color:var(--papier)}
@media (max-width:900px){
  .brainport{display:block;min-height:0}
  .bp-buhne{position:relative;height:auto;aspect-ratio:1920/1088;inset:auto}
  .bp-vlak{inset:0;width:100%;height:100%;transform:none;left:0;top:0}
  .bp-buhne::after{background:linear-gradient(180deg,transparent 60%,var(--nacht) 100%)}
  .bp-tekst{padding:2.5rem var(--rand) 0;max-width:none}
  .bp-onder{grid-template-columns:minmax(0,1fr);padding-top:2rem}
}
@media (max-width:900px) and (orientation:landscape){.bp-buhne{aspect-ratio:auto;height:80svh}.bp-vlak{width:max(100cqw,176.47cqh);height:max(56.67cqw,100cqh);left:50%;top:50%;transform:translate(-50%,-50%)}}

/* ---------- waarden */
.waarden-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 4rem;align-items:end;margin-bottom:3.5rem}
.waarden-kop .label{grid-column:1/-1}.waarden-kop .intro{margin:0}
.waarden-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--lijn)}
.waarden-lijst li{padding:2rem 2rem 2.4rem 0;border-bottom:1px solid var(--lijn);position:relative}
.waarden-lijst li:not(:nth-child(3n+1)){padding-left:2rem;border-left:1px solid var(--lijn)}
.w-nr{font:600 .8125rem "RHD",sans-serif;color:var(--koper-diep)}
.waarden-lijst h3{font:600 clamp(2rem,1.4rem + 1.8vw,3.3rem)/1 "Imbue",serif;font-variation-settings:"opsz" 100;margin:.6rem 0 .8rem}
.waarden-lijst p{margin:0;color:var(--grafiet);max-width:22em}
@media (max-width:900px){.waarden-kop{grid-template-columns:minmax(0,1fr)}.waarden-lijst{grid-template-columns:repeat(2,minmax(0,1fr))}
  .waarden-lijst li,.waarden-lijst li:not(:nth-child(3n+1)){padding:1.6rem 1.2rem 1.8rem 0;border-left:0}
  .waarden-lijst li:nth-child(2n){padding-left:1.2rem;border-left:1px solid var(--lijn)}}
@media (max-width:560px){.waarden-lijst{grid-template-columns:minmax(0,1fr)}.waarden-lijst li:nth-child(2n){padding-left:0;border-left:0}}

/* ---------- AI */
.ai-kop{max-width:52rem;margin-bottom:3rem}
.ai-vragen{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn-l)}
.ai-vragen li{display:grid;grid-template-columns:4rem minmax(0,1.5fr) minmax(0,1fr);gap:1rem 2rem;align-items:baseline;padding:1.8rem 0;border-bottom:1px solid var(--lijn-l)}
.ai-nr{font:600 .8125rem "RHD",sans-serif;color:var(--koper-licht)}
.ai-vraag{font:600 clamp(1.9rem,1.2rem + 2.4vw,4rem)/1.02 "Imbue",serif;font-variation-settings:"opsz" 100}
.ai-vragen p{margin:0;color:var(--mist)}
.ai-vraag[data-ruis] .rl{display:inline-block;transition:transform 1.1s var(--zacht),opacity 1.1s,filter 1.1s}
.ai-vraag[data-ruis].ruis .rl{opacity:.25;filter:blur(3px)}
.ai-advies{margin:3rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.6rem;font:600 clamp(1.15rem,1rem + .5vw,1.5rem)/1.3 "RHD",sans-serif}
.ai-advies span{color:var(--koper-licht)}
@media (max-width:760px){.ai-vragen li{grid-template-columns:minmax(0,1fr);gap:.5rem}}

/* ---------- over (home) + tijdlijn */
.over{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,6vw,7rem);align-items:start}
.over-links p{max-width:32em;color:var(--grafiet)}
.over-portret{margin:0 0 2.4rem;width:min(18rem,60%);aspect-ratio:4/5;overflow:hidden;background:#000}
.over-portret img{width:100%;height:100%;object-fit:cover;object-position:60% 35%}
.tijdlijn{position:relative;padding-left:2.6rem}
.tl-draad{position:absolute;left:.45rem;top:.4rem;bottom:.4rem;width:2px;background:var(--lijn)}
.tl-draad span{position:absolute;inset:0;background:linear-gradient(180deg,var(--koper),var(--koper-diep));transform-origin:top;transform:scaleY(var(--tl,0))}
.tl-fase{margin-bottom:2.6rem;position:relative}
.tl-fase::before{content:"";position:absolute;left:-2.6rem;top:1.1rem;width:1rem;height:1rem;border-radius:50%;background:var(--papier);border:2px solid var(--mist);transition:border-color .5s,background .5s;transform:translateX(-.05rem)}
.tl-fase.aan::before{border-color:var(--koper);background:var(--koper)}
.tl-kop{margin:0 0 .8rem;font:600 clamp(2.4rem,1.6rem + 2.8vw,4.6rem)/1 "Imbue",serif;font-variation-settings:"opsz" 100;color:var(--mist);transition:color .6s}
.tl-fase.aan .tl-kop{color:var(--inkt)}
.tl-fase:last-of-type.aan .tl-kop{color:var(--koper-diep)}
.tl-fase ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.tl-fase h4{font:600 1.125rem/1.3 "RHD",sans-serif}
.tl-fase li p{margin:.2rem 0 0;color:var(--grafiet);max-width:34em}
.tl-slot{margin:0;font:600 clamp(1.3rem,1rem + 1vw,1.9rem)/1.2 "Imbue",serif;max-width:22em}
@media (max-width:900px){.over{grid-template-columns:minmax(0,1fr)}}

/* ---------- ideeën */
.ih-kop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 3rem;margin-bottom:2.5rem}
.ih-kop .label{flex-basis:100%}
.ideeen-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.idee a{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;gap:.6rem 3rem;padding:2.1rem 0;border-bottom:1px solid var(--lijn);text-decoration:none;position:relative}
.idee a::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--koper);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--zacht)}
.idee a:hover::before,.idee a:focus-visible::before{transform:none}
.idee-meta{margin:.5rem 0 0;font:600 .8125rem/1.5 "RHD",sans-serif;color:var(--grafiet);grid-row:1/3}
.idee-datum{display:block;font-weight:500;color:var(--mist)}
.idee-titel{font:600 clamp(1.7rem,1.2rem + 1.5vw,2.8rem)/1.05 "Imbue",serif;font-variation-settings:"opsz" 100;max-width:20em;transition:color .4s}
.idee a:hover .idee-titel{color:var(--koper-diep)}
.idee-lede{margin:0;color:var(--grafiet);max-width:40em;grid-column:2}
.idee-lees{grid-column:3;grid-row:1/3;align-self:center;font:600 .9375rem "RHD",sans-serif;white-space:nowrap}
@media (max-width:760px){.idee a{grid-template-columns:minmax(0,1fr)}.idee-meta,.idee-lede,.idee-lees{grid-row:auto;grid-column:auto}.idee-lees{justify-self:start}.idee-datum{display:inline;margin-left:.5rem}}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.filter{min-height:2.75rem;min-width:2.75rem;padding:.4rem 1rem;border-radius:999px;border:1px solid var(--lijn);background:none;font:500 .9375rem "RHD",sans-serif;color:var(--inkt);cursor:pointer}
.filter[aria-pressed=true]{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.idee.weg{display:none}

/* ---------- tafel + servetje (signatuur) */
.tafel{background:var(--inkt);color:var(--papier);padding:clamp(4.5rem,9vw,8rem) 0 0;position:relative}
.tafel::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(1.2rem,3vw,2.6rem);transform:translateY(-99%);background:inherit;clip-path:polygon(0 100%,62% 100%,64% 0,64.4% 0,66.4% 100%,100% 100%)}
.tafel-kop{padding:0 var(--rand);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 4rem;align-items:end;margin-bottom:3rem}
.tafel-kop .label{grid-column:1/-1;color:var(--koper-licht)}.tafel-kop .intro{margin:0;color:var(--mist)}
.tafel-blad{position:relative;display:grid;place-items:center;min-height:min(56.25vw,64rem);padding:4rem var(--rand);overflow:hidden;isolation:isolate}
.tafel-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.kop-christ{position:absolute;left:12%;top:5%;font:600 1.6rem "Hand",cursive;color:rgba(243,240,233,.6);transform:rotate(-6deg)}
.servet{position:relative;width:min(34rem,100%);background:var(--wit);color:var(--inkt);padding:2.4rem 2.4rem 2rem;transform:rotate(2.2deg) translate(6%,4%);
  box-shadow:0 1.6rem 3rem -1.2rem rgba(0,0,0,.6),0 .2rem .4rem rgba(0,0,0,.25);
  background-image:linear-gradient(90deg,transparent 49.6%,rgba(0,0,0,.045) 50%,rgba(255,255,255,.6) 50.4%,transparent 51%),linear-gradient(0deg,transparent 49.6%,rgba(0,0,0,.04) 50%,rgba(255,255,255,.5) 50.4%,transparent 51%),radial-gradient(rgba(0,0,0,.035) 1px,transparent 1.2px);background-size:100% 100%,100% 100%,5px 5px;
  transition:transform 1.3s var(--zacht),opacity .6s}
.servet::before{content:"";position:absolute;inset:.7rem;border:1.5px dotted rgba(23,21,19,.2);pointer-events:none}
.servet.geschoven{transform:rotate(-14deg) translate(-62%,-48%) scale(.5);opacity:0;transition:transform 1.4s cubic-bezier(.5,0,.2,1),opacity .5s 1s}
.servet-kop{margin:0 0 1.2rem;font:600 1.35rem/1.25 "RHD",sans-serif}
.servet-kop small{display:block;font:400 .9375rem/1.45 "RHT",sans-serif;color:var(--grafiet);margin-top:.3rem}
.servet-ond{border:0;padding:0;margin:0 0 1rem;min-width:0;display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.servet-ond legend{font:600 .8125rem "RHD",sans-serif;color:var(--koper-diep);margin-bottom:.4rem;padding:0}
.vinkje{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;cursor:pointer;font:500 1.45rem/1.1 "Hand",cursive;color:var(--grafiet)}
.vinkje input{position:absolute;opacity:0;width:1px;height:1px}
.vinkje span{display:inline-flex;align-items:center;gap:.5rem}
.vinkje span::before{content:"";width:1.05rem;height:1.05rem;border:1.6px solid var(--grafiet);border-radius:.15rem;transform:rotate(-3deg);flex:none;background:center/90% no-repeat}
.vinkje input:checked+span{color:var(--inkt)}
.vinkje input:checked+span::before{border-color:var(--inkt);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 11l5 5L18 3' fill='none' stroke='%238a6639' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.vinkje input:focus-visible+span{outline:2px solid var(--koper);outline-offset:3px}
.regel{display:block;margin:0 0 .5rem;position:relative}
.regel>span{display:block;font:600 .8125rem "RHD",sans-serif;color:var(--koper-diep)}
.servet input:not([type=radio]),.servet textarea{width:100%;border:0;border-bottom:1.5px solid rgba(23,21,19,.28);background:transparent;padding:.15rem 0 .25rem;font:500 1.6rem/1.3 "Hand",cursive;color:var(--inkt);border-radius:0;min-height:2.75rem}
.servet textarea{resize:vertical;min-height:5.2rem;background:repeating-linear-gradient(180deg,transparent 0,transparent 2.03rem,rgba(23,21,19,.2) 2.03rem,rgba(23,21,19,.2) 2.1rem);border:0;line-height:2.08rem}
.servet input::placeholder,.servet textarea::placeholder{color:rgba(23,21,19,.32)}
.servet input:focus,.servet textarea:focus{outline:none;border-color:var(--koper)}
.teller{position:absolute;right:0;bottom:-.2rem;font:normal 500 .75rem "RHD",sans-serif;color:var(--mist)}
.servet-vragen{margin:.8rem 0 0}
.servet-vragen summary{display:inline-flex;align-items:center;min-height:2.75rem;cursor:pointer;font:600 .9375rem "RHD",sans-serif;color:var(--koper-diep)}
.servet-hint{margin:0 0 .3rem;font-size:.9rem;color:var(--grafiet)}
.servet-vragen ol{margin:0;padding-left:1.6rem;font:500 1.4rem "Hand",cursive}
.servet-fout{color:#a3361c;font-weight:600;margin:.8rem 0 0}
.servet-knop{margin-top:1.4rem;width:100%}
.servet-bij{margin:.7rem 0 0;font-size:.85rem;color:var(--grafiet);text-align:center}
.servet-klaar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(30rem,calc(100% - 2*var(--rand)));background:rgba(13,12,11,.88);padding:2rem;border-left:2px solid var(--koper);animation:infaden .8s .9s both}
.sk-kop{font:600 clamp(1.8rem,1.3rem + 1.6vw,2.8rem)/1.05 "Imbue",serif;margin:0 0 .6rem}
.servet-klaar p{margin:0 0 1rem;color:#d7d1c7}
.sk-knoppen{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 0!important}
.servet-klaar .knop-inkt{background:var(--koper);color:var(--nacht)}
.tafel-contact{list-style:none;margin:0;padding:2.6rem var(--rand) 3rem;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem 2rem}
.tafel-contact span{display:block;font:600 .8125rem "RHD",sans-serif;color:var(--koper-licht);margin-bottom:.2rem}
.tafel-contact a,.tafel-contact b{display:inline-flex;align-items:center;min-height:2.75rem;font:500 1rem "RHD",sans-serif;text-decoration:none;border-bottom:1px solid var(--lijn-l)}
.tafel-contact b{border:0;font-weight:500}
@media (max-width:1100px){.tafel-contact{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .tafel-kop{grid-template-columns:minmax(0,1fr)}
  .tafel-blad{padding:9rem 1rem 2.5rem;min-height:0;display:block}
  .tafel-foto{object-position:30% 0;height:22rem;bottom:auto}
  .tafel-blad::after{content:"";position:absolute;left:0;right:0;top:12rem;height:10rem;background:linear-gradient(180deg,transparent,var(--inkt));z-index:-1}
  .kop-christ{left:8%;top:2rem}
  .servet{transform:rotate(1deg);padding:1.8rem 1.4rem 1.6rem;margin:0 auto}
  .servet.geschoven{transform:rotate(-10deg) translate(-20%,-60%) scale(.5)}
  .tafel-contact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .body-contact .tafel{padding-top:calc(var(--kop-h) + 2.5rem)}
}
@media (max-width:420px){.tafel-contact{grid-template-columns:minmax(0,1fr)}}
.body-contact .tafel{padding-top:calc(var(--kop-h) + 4rem)}

/* ---------- CTA-band (subpagina's) */
.cta-band{position:relative;background:var(--nacht);color:var(--papier);padding:clamp(5rem,10vw,9rem) var(--rand);overflow:hidden;isolation:isolate}
.cta-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,12,11,.92) 0,rgba(13,12,11,.6) 55%,rgba(13,12,11,.2))}
.cta-in{max-width:44rem}.cta-in>p{color:#d7d1c7;max-width:34em}.cta-in .label{color:var(--koper-licht)}

/* ---------- paginakop */
.paginakop{padding:calc(var(--kop-h) + clamp(3rem,8vw,7rem)) var(--rand) clamp(3.5rem,7vw,6rem);background:var(--papier)}
.pk-donker{background:var(--nacht);color:var(--papier)}
.pk-in{max-width:min(70rem,100%)}
.pk-in .intro{margin-top:1.6rem}
.pk-index{list-style:none;margin:3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--lijn-l)}
.pk-index a{display:flex;flex-direction:column;gap:.3rem;padding:1.2rem 1rem 1.2rem 0;min-height:2.75rem;text-decoration:none;font:600 clamp(1.4rem,1rem + 1.2vw,2.2rem)/1.05 "Imbue",serif}
.pk-index span{font:600 .8125rem "RHD",sans-serif;color:var(--koper-licht)}
.pk-index a:hover{color:var(--koper-licht)}
@media (max-width:760px){.pk-index{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- wat ik doe: rollen */
.rol-sectie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.rol-om .rs-beeld{order:2}
.rs-beeld{margin:0;position:sticky;top:calc(var(--kop-h) + 2rem);aspect-ratio:3/2.4;overflow:hidden;background:var(--inkt);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.rs-beeld img{width:100%;height:100%;object-fit:cover}
.rs-beeld figcaption{position:absolute;left:1.4rem;bottom:1.1rem;font:600 clamp(1.4rem,1rem + 1.2vw,2.2rem)/1.1 "Imbue",serif;color:var(--papier);text-shadow:0 1px 18px rgba(0,0,0,.6)}
.rs-naam{font:600 clamp(3rem,1.8rem + 4.6vw,7rem)/.95 "Imbue",serif;font-variation-settings:"opsz" 100;margin-bottom:1rem}
.rs-kop{font:600 clamp(1.3rem,1rem + .9vw,1.9rem)/1.2 "RHD",sans-serif;letter-spacing:-.01em;margin:0 0 1rem}
.rs-tekst>p{color:var(--grafiet);max-width:34em}.rs-tekst>p.rs-kop{color:var(--inkt)}
.rs-dl{margin:2rem 0;display:grid;gap:1.4rem}
.rs-dl dt{font:600 .8125rem "RHD",sans-serif;color:var(--koper-diep);margin-bottom:.3rem}
.rs-dl dd{margin:0;max-width:34em}
.rs-dl ul{margin:0;padding-left:1.1rem}
.rs-dl li{margin-bottom:.35rem}.rs-dl li::marker{color:var(--koper)}
@media (max-width:900px){.rol-sectie{grid-template-columns:minmax(0,1fr)}.rol-om .rs-beeld{order:0}.rs-beeld{position:relative;top:0}}
.niet-lijst{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--lijn-l)}
.niet-lijst li{padding:1.3rem 0;border-bottom:1px solid var(--lijn-l);font:600 clamp(1.5rem,1rem + 1.8vw,3rem)/1.15 "Imbue",serif;font-variation-settings:"opsz" 100}
.niet-lijst span{background:linear-gradient(var(--koper-licht),var(--koper-licht)) 0 58%/0 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.2s var(--zacht),color 1.2s}
.niet-lijst li.aan span{background-size:100% 2px;color:var(--mist)}
.niet-lijst li:nth-child(2) span{transition-delay:.25s}.niet-lijst li:nth-child(3) span{transition-delay:.5s}.niet-lijst li:nth-child(4) span{transition-delay:.75s}

/* ---------- over christ */
.over-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#000;color:var(--papier);min-height:min(100svh,60rem)}
.ok-portret{margin:0;position:relative;overflow:hidden}
.ok-portret img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 30%}
.ok-tekst{padding:calc(var(--kop-h) + 3rem) var(--rand) 4rem;align-self:center}
.ok-tekst .intro{color:var(--mist)}
.build-klein{font-size:clamp(2.2rem,1.4rem + 2.6vw,4.2rem);margin:2.6rem 0 0}
.build-klein .b3{color:var(--koper-licht)}
@media (max-width:900px){.over-kop{grid-template-columns:minmax(0,1fr)}.ok-portret{height:min(70svh,110vw)}.ok-tekst{padding-top:2.5rem}}
.mensen blockquote{margin:0 auto;max-width:56rem;text-align:center}
.mensen .kop-groot{margin:0}
.mensen blockquote p:last-child{font-size:clamp(1.15rem,1rem + .6vw,1.6rem);color:var(--grafiet);max-width:30em;margin:1.4rem auto 0}
.kort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem 5rem}
.kort-tekst p{max-width:36em;color:var(--grafiet);font-size:1.125rem}
.kort-slot{font:600 clamp(1.5rem,1.1rem + 1.4vw,2.4rem)/1.15 "Imbue",serif!important;color:var(--inkt)!important}
@media (max-width:900px){.kort{grid-template-columns:minmax(0,1fr)}}
.drijft-lijst{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem}
.drijft-lijst h3{font:600 clamp(2rem,1.3rem + 2.2vw,3.6rem)/1 "Imbue",serif;font-variation-settings:"opsz" 100;margin-bottom:1rem}
.drijft-lijst p{color:var(--mist);margin:0;max-width:24em}
@media (max-width:900px){.drijft-lijst{grid-template-columns:minmax(0,1fr)}}
.onderweg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem clamp(2.5rem,6vw,7rem)}
@media (max-width:900px){.onderweg{grid-template-columns:minmax(0,1fr)}}
.sector-lijst{list-style:none;margin:2.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 0}
.sector-lijst li{font:600 clamp(1.5rem,1.1rem + 1.6vw,2.8rem)/1.3 "Imbue",serif;white-space:nowrap}
.sector-lijst li:not(:last-child)::after{content:"";display:inline-block;vertical-align:middle;width:.45rem;height:.45rem;margin:0 1.1rem;background:var(--koper);transform:rotate(45deg)}

/* ---------- artikel */
.art-kop{background:var(--papier);padding:calc(var(--kop-h) + clamp(2.5rem,6vw,5rem)) var(--rand) 3rem}
.terug{display:inline-flex;align-items:center;min-height:2.75rem;font:600 .9375rem "RHD",sans-serif;text-decoration:none;margin-bottom:2.5rem}
.terug::before{content:"←";margin-right:.5rem;color:var(--koper-diep)}
.art-titel{font-size:clamp(2.6rem,1.4rem + 4.6vw,6.6rem);max-width:16em}
.art-meta{font:500 .9375rem "RHD",sans-serif;color:var(--grafiet);margin:1.8rem 0 0}
.artikel{padding-top:2rem}
.art-tekst{max-width:42rem;margin:0 auto}
.art-lede{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);line-height:1.45;margin-top:0}
.art-tekst p{font-size:1.125rem;line-height:1.7}
.art-tekst blockquote{margin:3rem -3rem;padding:0 0 0 2.4rem;border-left:2px solid var(--koper)}
.art-tekst blockquote p{font:600 clamp(1.9rem,1.3rem + 2vw,3.2rem)/1.08 "Imbue",serif;font-variation-settings:"opsz" 100;margin:0}
.art-voet{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--lijn);padding-top:1.6rem;margin-top:3rem}
.art-naam{font:600 1.7rem "Hand",cursive;color:var(--koper-diep)}
@media (max-width:760px){.art-tekst blockquote{margin:2.4rem 0}}
.verder .kop-groot{margin-bottom:2rem}

/* ---------- voet */
.voet{background:var(--nacht);color:var(--papier);padding:clamp(4rem,7vw,6rem) var(--rand) 1.6rem}
.voet-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem 4rem;padding-bottom:3rem;border-bottom:1px solid var(--lijn-l)}
.logo-voet{width:min(24rem,100%)}
.voet-zin{font:600 clamp(1.5rem,1.1rem + 1.2vw,2.2rem)/1.15 "Imbue",serif;margin:2rem 0 0;max-width:16em}
.voet h2{font:600 .8125rem "RHD",sans-serif;color:var(--koper-licht);margin-bottom:.8rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li a{display:inline-flex;min-height:2.75rem;align-items:center;text-decoration:none;color:#d7d1c7}
.voet li a:hover{color:var(--papier)}
.voet-onder{display:flex;flex-wrap:wrap;gap:.5rem 2rem;padding-top:1.4rem;font-size:.875rem;color:var(--mist)}
.voet-onder a{margin-left:auto;display:inline-flex;min-height:2.75rem;align-items:center;color:var(--mist)}
@media (max-width:760px){.voet-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.voet-merk{grid-column:1/-1}.voet-onder a{margin-left:0}}

/* ---------- inloop */
.js .rv{opacity:0;transform:translateY(1.4rem);transition:opacity 1s var(--zacht),transform 1.1s var(--zacht)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- smalle telefoons: kop past op 320 px */
@media (max-width:400px){.kop{gap:.8rem}.kop-logo{width:9.6rem}.kop-taal{display:none}}
/* ---------- liggende telefoon: portret rechts, tekst links (niet gestapeld) */
@media (orientation:landscape) and (max-height:520px){
  .hero{display:grid;align-items:center;min-height:100svh;padding:calc(var(--kop-h) + .5rem) var(--rand) 1.2rem}
  .hero-film{position:absolute;top:0;bottom:0;right:0;height:auto;width:min(46%,calc(100svh * .7582))}
  .hero-film::after{background:linear-gradient(90deg,#000 0,rgba(0,0,0,.4) 20%,transparent 45%)}
  .hero-tekst{max-width:60%;margin-top:0;padding:0}
  .hero-h1{font-size:1.3rem}
}
@media (max-width:900px),(orientation:portrait) and (max-width:1100px){.hero-film::after{background:linear-gradient(180deg,rgba(0,0,0,.6) 0,transparent 20%),linear-gradient(0deg,#000 0,rgba(0,0,0,.4) 22%,transparent 45%)}}
@media (max-width:420px){.rol-knop{flex-direction:column;gap:.15rem}.rol-naam{font-size:clamp(1.45rem,7.4vw,2rem)}}