/* exp.tdgdigital.com — Exponent Finance. Concept "Tijd is de x." Zwart / wit / blauw (hun eigen kleurbetekenis).
   Darker Grotesque (koppen), Overpass (tekst, cijfers), STIX Two italic (de x als variabele). Maten in rem: vanaf 1440 schaalt alles mee. */
@font-face{font-family:"Display";src:url(/fonts/display.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"Tekst";src:url(/fonts/tekst.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Formule";src:url(/fonts/formule.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
:root{--zwart:#000;--nacht:#0b0b0d;--wit:#fff;--papier:#f4f4f2;--blauw:#000CFF;--blauw-l:#7a84ff;--grijs:#6a6a6a;--lijn:#d8d8d8;
  --rand:clamp(1rem,4.4vw,4.5rem);--kop:4.5rem;--accent:var(--blauw)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--kop)}
@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(--wit);color:var(--zwart);font-family:"Tekst",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;
  font-variant-numeric:tabular-nums}
img,video,svg{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
p,li,dd{hyphens:auto;overflow-wrap:break-word}
h1,h2,h3{hyphens:manual;overflow-wrap:normal;text-wrap:balance;margin:0}
::selection{background:var(--blauw);color:#fff}
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px}
a{color:inherit}
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:#fff;padding:.5rem 1rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-inline:var(--rand)}
.fx{font-family:"Formule",Georgia,serif;font-style:italic;font-weight:600;color:var(--blauw)}
.lab{display:flex;align-items:baseline;gap:.15em;margin:0 0 1rem;font-size:.95rem;font-weight:600;letter-spacing:.01em}
.lab-x{font-family:"Formule",serif;font-style:italic;font-weight:600;color:var(--blauw);font-size:1.1em;position:relative;top:-.55em;margin-right:.15em}
.lab-licht{color:#fff}.lab-licht .lab-x{color:var(--blauw-l)}
.h2{font-family:"Display",sans-serif;font-weight:850;font-size:clamp(2.6rem,7.2vw,6.4rem);line-height:.92;letter-spacing:-.01em;max-width:18ch}
.intro{hyphens:manual;font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:40ch;margin:1.2rem 0 0;line-height:1.5}
.knop{display:inline-flex;align-items:center;min-height:3rem;padding:.6rem 1.35rem;border:2px solid currentColor;font:inherit;font-weight:700;
  text-decoration:none;cursor:pointer;background:none;color:inherit;line-height:1.1}
.knop-blauw{background:var(--blauw);border-color:var(--blauw);color:#fff}
.knop-blauw:hover{background:#fff;color:var(--blauw);border-color:#fff}
.knop-lijn{color:#fff}.knop-lijn:hover{background:#fff;color:#000}
.knop-lijn-d{color:#000}.knop-lijn-d:hover{background:#000;color:#fff}
.knop-tekst{background:none;border:0;padding:.4rem 0;min-height:2.75rem;font:inherit;font-weight:700;color:inherit;text-decoration:underline;
  text-decoration-color:var(--blauw);text-decoration-thickness:2px;text-underline-offset:.3em;cursor:pointer}

/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:40;height:var(--kop);display:flex;align-items:center;gap:1.5rem;padding-inline:var(--rand);
  background:var(--zwart);color:#fff}
.kop-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-height:2.75rem;flex-shrink:0}
.kop-merk{width:auto;height:2.4rem}
.kop-woord{width:auto;height:.95rem;fill:#fff}
.m-euro{fill:#fff}.m-x{fill:var(--blauw)}
.kop-nav{margin-left:auto;display:flex;gap:1.6rem;align-items:center}
.kop-nav a{text-decoration:none;font-weight:600;min-height:2.75rem;min-width:2.75rem;justify-content:center;display:inline-flex;align-items:center;font-size:.98rem}
.kop-nav a:hover{color:var(--blauw-l)}
.kop-cta{border:2px solid #fff;padding:0 1rem}
.kop-knop{display:none;margin-left:auto;width:3rem;height:3rem;flex-shrink:0;background:none;border:0;color:#fff;cursor:pointer;position:relative}
.kop-streep,.kop-streep::before,.kop-streep::after{position:absolute;left:.7rem;right:.7rem;height:2px;background:currentColor;content:"";transition:transform .25s}
.kop-streep{top:50%}.kop-streep::before{top:-.45rem;left:0;right:0}.kop-streep::after{top:.45rem;left:0;right:0}
.kop-knop[aria-expanded=true] .kop-streep{background:transparent}
.kop-knop[aria-expanded=true] .kop-streep::before{transform:translateY(.45rem) rotate(45deg)}
.kop-knop[aria-expanded=true] .kop-streep::after{transform:translateY(-.45rem) rotate(-45deg)}
@media (max-width:860px){
  .kop-knop{display:block}
  .kop-nav{position:fixed;inset:var(--kop) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#000;padding:1rem var(--rand) 2rem;
    max-height:calc(100dvh - var(--kop));overflow-y:auto;transform:translateY(-110%);visibility:hidden;transition:transform .3s,visibility .3s;z-index:-1}
  .kop-nav.open{transform:none;visibility:visible}
  .kop-nav a{font-family:"Display";font-weight:800;font-size:2.2rem;border-bottom:1px solid #222;min-height:3.6rem;justify-content:flex-start}
  .kop-cta{border:0;padding:0}
}

/* ---------- hero: het logo op heroformaat, de x is het venster ---------- */
.hero{background:var(--zwart);color:#fff;position:relative;overflow:hidden}
.hero-in{--H:min(calc((100svh - var(--kop) - 6rem) / 1.62),calc(52vw / 1.555));display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.5rem,4vw,5rem);align-items:end;padding:clamp(1.5rem,4svh,3rem) var(--rand) clamp(2rem,6svh,4rem);min-height:calc(100svh - var(--kop))}
.hero-merk{position:relative;width:calc(var(--H) * 1.555);height:calc(var(--H) * 1.62)}
.hero-euro{position:absolute;left:0;top:calc(var(--H) * .62);width:calc(var(--H) * .783);height:var(--H);fill:#fff}
.hero-euro{opacity:0;animation:euroIn .7s .1s cubic-bezier(.2,.7,.2,1) forwards}
.hero-x{position:absolute;left:calc(var(--H) * .84);top:0;width:calc(var(--H) * .732);height:calc(var(--H) * .8);background:var(--blauw);
  -webkit-mask:url(/img/x-masker.svg) center/100% 100% no-repeat;mask:url(/img/x-masker.svg) center/100% 100% no-repeat;
  transform-origin:0 100%;
  animation:xOpX 1.6s .15s cubic-bezier(.3,.1,.3,1) both,xOpY 1.6s .15s cubic-bezier(.62,0,.32,1) both,xOpS 1.6s .15s cubic-bezier(.5,0,.3,1) both}
.hero-poster,.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero-film{opacity:0;transition:opacity .6s}.hero-film.speelt{opacity:1}
.hero-x::after{content:"";position:absolute;inset:0;background:var(--blauw);mix-blend-mode:multiply;opacity:.0;pointer-events:none}
@keyframes euroIn{from{opacity:0;transform:translateY(6%)}to{opacity:1;transform:none}}
/* de x klimt in één vloeiende beweging naar zijn exponentplek: zijwaarts gelijkmatig, omhoog eerst traag en dan versnellend
   (een e-macht), met een zachte landing; drie losse eigenschappen zodat elk zijn eigen curve heeft */
@keyframes xOpX{from{transform:translateX(calc(var(--H) * -.16))}to{transform:none}}
@keyframes xOpY{from{translate:0 calc(var(--H) * .82)}to{translate:0 0}}
@keyframes xOpS{from{scale:.42}to{scale:1}}
.hero-tekst{padding-bottom:.4rem;max-width:36rem}
.hero-h1{font-family:"Display";font-weight:800;font-size:clamp(2rem,3.9vw,3.6rem);line-height:.98;letter-spacing:-.005em}
.hero-punt{color:var(--blauw)}
.hero-fasen{display:grid;grid-template-columns:repeat(3,1fr);margin:1.6rem 0 0;font-size:.85rem;color:#8a8a8a;position:relative;padding-top:.7rem;max-width:26rem}
.hero-fasen span{transition:color .4s}.hero-fasen span.aan{color:#fff}
.hero-fasen span:nth-child(2){text-align:center}.hero-fasen span:nth-child(3){text-align:right}
.hero-balk{position:absolute;top:0;left:0;right:0;height:2px;background:#2a2a2a}
.hero-balk b{position:absolute;inset:0 auto 0 0;width:0;background:var(--blauw-l)}
.hero-zin{margin:1.2rem 0 0;font-size:1.15rem;color:#d7d7d7}
.hero-zin .fx,.rekenen .fx{color:var(--blauw-l)}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin:1.6rem 0 0}
@media (max-width:860px){
  .hero-in{--H:min(calc((100vw - 2 * var(--rand)) / 1.555),calc((100svh - var(--kop)) * .42 / 1.62));grid-template-columns:minmax(0,1fr);gap:1.4rem;
    align-items:start;min-height:0;padding-top:1.5rem}
  .hero-h1{font-size:clamp(1.85rem,7.6vw,3rem)}
  .hero-zin{font-size:1.05rem}
}
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  .hero-in{--H:min(calc((100vw - 2 * var(--rand)) / 1.555 * .86),calc((100svh - var(--kop)) * .5 / 1.62));padding-top:3rem;gap:2.2rem}
  .hero-h1{font-size:3.1rem}
}
@media (orientation:landscape) and (max-height:520px){
  .hero-in{--H:calc((100svh - var(--kop) - 2rem) / 1.62);grid-template-columns:auto minmax(0,1fr);align-items:center;padding-block:1rem;min-height:0}
  .hero-h1{font-size:1.7rem}.hero-fasen,.hero-zin{display:none}.hero-knoppen{margin-top:1rem}
}
@media (prefers-reduced-motion:reduce){.hero-euro,.hero-x{animation:none;opacity:1}}

/* ---------- zwart, wit, blauw ---------- */
.kleuren{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.kl{padding:clamp(2.5rem,6vw,6rem) var(--rand) clamp(3rem,7vw,7rem) clamp(1.5rem,3vw,3.5rem);min-height:clamp(22rem,60svh,40rem);display:flex;flex-direction:column;justify-content:flex-end}
.kl:first-child{padding-left:var(--rand)}
.kl-zwart{background:#000;color:#fff}.kl-wit{background:#fff;color:#000;border-block:1px solid var(--lijn)}.kl-blauw{background:var(--blauw);color:#fff}
.kl-naam{font-family:"Display";font-weight:900;font-size:clamp(3.4rem,8.6vw,8.5rem);line-height:.8;margin:0 0 auto;letter-spacing:-.02em}
.kl-a{hyphens:manual;font-family:"Display";font-weight:750;font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1.02;margin:2.5rem 0 0;max-width:16ch}
.kl-b{margin:1rem 0 0;max-width:30ch;opacity:.82}
@media (max-width:900px){.kleuren{grid-template-columns:1fr}.kl{min-height:0;padding:2.5rem var(--rand)}.kl-a{margin-top:1.2rem}}

/* ---------- de formule ---------- */
.aanpak{padding-top:clamp(4rem,9vw,9rem);background:#fff}
.formule{--g:clamp(.3rem,.9vw,.9rem);display:grid;grid-template-columns:repeat(5,minmax(0,1fr) auto) minmax(0,1fr) auto minmax(0,1.15fr);
  column-gap:var(--g);row-gap:0;margin:clamp(2.5rem,5vw,4.5rem) 0 0;position:relative;align-items:center}
.f-invoer,.f-rij{display:contents}
.formule::before{content:"";grid-row:3;grid-column:1/12;background:#c4c4c4;margin:calc(var(--g) * -1.6) calc(var(--g) * -1.6);height:calc(100% + var(--g) * 3.2);align-self:stretch;z-index:0}
.f-pijlen{display:none}
.f-in{grid-row:1;align-self:end;aspect-ratio:1/1.1;border:1.5px solid #000;background:#fff;font:inherit;font-weight:700;font-size:clamp(.8rem,1.15vw,1.15rem);
  line-height:1.15;padding:.5rem;cursor:pointer;position:relative;color:#000;hyphens:manual;transition:background .25s,color .25s}
.f-in[data-invoer=plan]{grid-column:5}.f-in[data-invoer=gebouw]{grid-column:7}
.f-in[aria-pressed=true]{background:#000;color:#fff}
.f-in::after{content:"";position:absolute;left:50%;top:calc(100% + .5rem);width:1.6rem;height:clamp(2.2rem,4vw,3.6rem);transform:translateX(-50%);background:var(--blauw);
  clip-path:polygon(32% 0,68% 0,68% 62%,100% 62%,50% 100%,0 62%,32% 62%);opacity:.18;transition:opacity .3s}
.f-in[aria-pressed=true]::after{opacity:1}
.formule .f-gat{grid-row:2;height:clamp(3rem,5.4vw,5rem)}
.f-t{grid-row:3;position:relative;z-index:1;aspect-ratio:1/1.1;border:1.5px solid #9a9a9a;background:#fff;color:#b0b0b0;font:inherit;font-weight:700;
  font-size:clamp(.82rem,1.3vw,1.35rem);line-height:1.12;padding:.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  text-align:center;transition:color .35s,border-color .35s,background .25s,transform .25s}
.f-t span{display:block;min-width:0;overflow-wrap:anywhere;hyphens:manual}
.f-eur{font-size:3.2em;font-weight:800;line-height:1}
.f-t.aan{color:#000;border-color:#000}
.f-t[aria-pressed=true]{background:var(--blauw);border-color:var(--blauw);color:#fff}
.f-t:hover{transform:translateY(-3px)}
.f-t[data-term="0"]{grid-column:1}.f-t[data-term="1"]{grid-column:3}.f-t[data-term="2"]{grid-column:5}.f-t[data-term="3"]{grid-column:7}.f-t[data-term="4"]{grid-column:9}.f-t[data-term="5"]{grid-column:11}
.f-plus:nth-of-type(1){grid-column:2}.f-plus:nth-of-type(2){grid-column:4}.f-plus:nth-of-type(3){grid-column:6}.f-plus:nth-of-type(4){grid-column:8}.f-plus:nth-of-type(5){grid-column:10}.f-is{grid-column:12}
.f-plus,.f-is{grid-row:3;position:relative;z-index:1;font-family:"Display";font-weight:800;font-size:clamp(1.1rem,2vw,2rem);color:#000;opacity:.25;transition:opacity .35s}
.f-plus.aan,.f-is.aan{opacity:1}
.f-uit{grid-row:3;grid-column:13;aspect-ratio:1/1.22;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;
  padding:8% 6% 7%;opacity:.15;transition:opacity .5s}
.f-uit.aan{opacity:1}
.f-merk{width:66%;height:auto}
.f-uitw{border-top:2px solid #fff;width:100%;padding-top:7%;display:flex;justify-content:center}
.f-woord{width:84%;height:auto;fill:#fff}
.f-uit.aan .m-x{animation:xKlein 1s cubic-bezier(.55,0,.25,1) both;transform-box:fill-box;transform-origin:0 100%}
@keyframes xKlein{0%{transform:translate(-30%,150%) scale(.5)}60%{transform:translate(-12%,70%) scale(.7)}100%{transform:none}}
.f-invoertekst{grid-row:4;grid-column:1/-1;margin:clamp(2rem,3vw,3rem) 0 0;font-weight:700;font-size:1.05rem;max-width:60ch}
.f-uitleg{grid-row:5;grid-column:1/-1;margin:1rem 0 0;border-top:2px solid #000;padding-top:1.2rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 2rem;min-height:9rem}
.f-uitleg blockquote{margin:0;hyphens:manual;font-family:"Display";font-weight:700;font-size:clamp(1.35rem,2.3vw,2.1rem);line-height:1.12;max-width:44ch}
.f-uitleg figcaption{font-size:.95rem;color:var(--grijs);white-space:nowrap}
@media (max-width:860px){
  .formule{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);row-gap:var(--g)}
  .formule::before{display:none}
  .f-in{grid-row:1;aspect-ratio:auto;min-height:4.2rem;font-size:.95rem}
  @media (max-width:400px){.f-in{font-size:.84rem;padding:.4rem .3rem}}
  .f-in[data-invoer=plan]{grid-column:1/3}.f-in[data-invoer=gebouw]{grid-column:4/6}
  .formule .f-gat{grid-row:2;grid-column:1/-1;height:3rem}
  .f-t{font-size:clamp(.82rem,3.4vw,1.05rem)}
  .f-t[data-term="0"]{grid-row:3;grid-column:1}.f-t[data-term="1"]{grid-row:3;grid-column:3}.f-t[data-term="2"]{grid-row:3;grid-column:5}
  .f-t[data-term="3"]{grid-row:4;grid-column:1}.f-t[data-term="4"]{grid-row:4;grid-column:3}.f-t[data-term="5"]{grid-row:4;grid-column:5}
  .f-plus{grid-row:3}.f-plus:nth-of-type(1){grid-column:2}.f-plus:nth-of-type(2){grid-column:4}.f-plus:nth-of-type(3){display:none}
  .f-plus:nth-of-type(4){grid-row:4;grid-column:2}.f-plus:nth-of-type(5){grid-row:4;grid-column:4}
  .f-is{grid-row:5;grid-column:1/3;justify-self:end;margin-right:1rem;font-size:2.4rem}
  .f-uit{grid-row:5;grid-column:3/6;max-width:11rem;justify-self:start;margin-top:var(--g)}
  .f-invoertekst{grid-row:6}.f-uitleg{grid-row:7;grid-template-columns:1fr}
}
.kurve{display:block;width:100%;height:clamp(3rem,10vw,10rem);margin-top:clamp(3rem,7vw,7rem)}
.k-donker{fill:#000;background:#fff}
.k-licht{fill:#fff;background:#000;margin-top:0;transform:scaleX(-1)}
@media (max-width:700px){.kurve{height:3.2rem}}

/* ---------- rekenvoorbeeld ---------- */
.rekenen{background:#000;color:#fff;padding:clamp(1rem,3vw,3rem) 0 clamp(3rem,7vw,7rem)}
.rekenen .intro{color:#d0d0d0}
.r-bord{margin-top:clamp(2rem,4vw,3.5rem);display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2rem clamp(2rem,4vw,4rem);
  grid-template-areas:"f s" "fz s" "g s" "u s" "fa fa" "a a" "c c"}
.r-formule{grid-area:f;margin:0;font-family:"Display";font-weight:800;font-size:clamp(1.9rem,4.4vw,4.2rem);line-height:1.05}
.r-fl,.r-fr{white-space:nowrap;display:inline-block}
.r-formule sup{font-size:.62em;margin-left:.04em;position:relative;top:-.15em}
.r-formule b{color:var(--blauw-l);font-weight:850}
.r-is{color:#777}
.r-fz{grid-area:fz;margin:-1.2rem 0 0;color:#a9a9a9;font-size:.95rem}
.r-grafiek{grid-area:g;position:relative;touch-action:pan-y;min-width:0}
.r-svg{width:100%;height:auto;overflow:visible}
.r-svg text{font-family:"Tekst";font-size:12px;fill:#9a9a9a}
.r-svg .as{stroke:#333;stroke-width:1}
.r-svg .lijn{fill:none;stroke:#fff;stroke-width:2.5;stroke-linejoin:round}
.r-svg .spook{fill:none;stroke:#777;stroke-width:1.5;stroke-dasharray:4 5}
.r-svg .vlak{fill:url(#r-verloop)}
.r-svg .vertr{fill:url(#r-arcering)}
.r-svg .fb{opacity:.9}
.r-svg .nul{stroke:#555;stroke-width:1}
.r-svg .jlabel{fill:#fff;font-weight:700}
.r-greep{position:absolute;top:0;width:3rem;height:3rem;margin-left:-1.5rem;display:flex;align-items:center;justify-content:center;background:var(--blauw);
  color:#fff;border-radius:50%;cursor:grab;touch-action:none;font-size:1.6rem;user-select:none;-webkit-user-select:none;box-shadow:0 0 0 6px rgba(0,12,255,.25)}
.r-greep .fx{color:#fff}
.r-greep:active{cursor:grabbing}
.r-greep::after{content:"";position:absolute;top:100%;left:50%;width:2px;height:var(--hoog,20rem);background:linear-gradient(var(--blauw-l),transparent);transform:translateX(-50%);pointer-events:none}
.r-uitkomst{grid-area:u;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1.5rem;border-top:1px solid #333;padding-top:1.4rem}
.r-u p{margin:0;hyphens:manual;font-size:.9rem;color:#a9a9a9}
.r-u b{display:block;font-family:"Display";font-weight:800;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.05;margin:.3rem 0 .2rem;white-space:nowrap}
.r-u-groot b{color:var(--blauw-l);font-size:clamp(2.2rem,3.8vw,3.8rem)}
.r-u small{font-size:.82rem;color:#7a7a7a}
.r-schuiven{grid-area:s;display:flex;flex-direction:column;gap:1.5rem;align-self:start;background:#111;padding:1.6rem;border:1px solid #222}
.r-sch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:baseline;font-size:.95rem}
.r-sch output{font-family:"Display";font-weight:800;font-size:1.5rem;white-space:nowrap}
.r-sch input{grid-column:1/-1;width:100%;margin:0;accent-color:var(--blauw);min-height:2.75rem;touch-action:pan-y}
.r-fasen{grid-area:fa;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.r-fase{margin:0}
.r-fbeeld{display:block;position:relative;overflow:hidden}.r-fbeeld::before{content:"";display:block;padding-top:42%}
.r-fbeeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-fase figcaption{font-size:.88rem;color:#a9a9a9;margin-top:.5rem}
.r-aanname{grid-area:a;border-top:1px solid #333;padding-top:1rem;color:#bdbdbd;max-width:62rem}
.r-aanname summary{cursor:pointer;font-weight:700;color:#fff;min-height:2.75rem;display:flex;align-items:center}
.r-aanname p{font-size:.95rem}
.r-cta{grid-area:c;margin:0}
@media (max-width:1100px){
  .r-bord{grid-template-columns:minmax(0,1fr);grid-template-areas:"f" "fz" "g" "u" "s" "fa" "a" "c"}
  .r-schuiven{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .r-formule{font-size:clamp(1.7rem,9vw,2.4rem)}.r-fr{display:block;margin-top:.15em}
  .r-schuiven{grid-template-columns:1fr;padding:1.2rem}
  .r-uitkomst{grid-template-columns:1fr 1fr}.r-u-groot{grid-column:1/-1}
  .r-fasen{gap:.5rem}.r-fase figcaption{font-size:.78rem}
}

/* ---------- woordenboek ---------- */
.woorden{background:#fff;padding-bottom:clamp(4rem,8vw,8rem)}
.w-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,6rem);align-items:start;padding-top:clamp(2rem,5vw,5rem)}
.w-beeld{margin:0;position:sticky;top:calc(var(--kop) + 2rem)}
.w-film{display:block;position:relative;overflow:hidden}.w-film::before{content:"";display:block;padding-top:62.5%}
.w-film img,.w-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.w-film video{opacity:0;transition:opacity .4s}.w-film video.speelt{opacity:1}
.w-beeld figcaption{margin-top:1rem;display:grid;gap:.4rem}
.w-q{hyphens:manual;font-family:"Display";font-weight:700;font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.12}
.w-wie{font-size:.9rem;color:var(--grijs)}
.w-boek{margin-top:2.5rem;border-top:3px solid #000}
.w-nav{display:flex;align-items:center;gap:1rem;padding:.6rem 0;font-weight:700;font-size:.95rem}
.w-pijl{width:2.75rem;height:2.75rem;border:1.5px solid #000;background:#fff;font:inherit;font-size:1.5rem;line-height:1;cursor:pointer}
.w-pijl:hover{background:#000;color:#fff}
.w-lemma{padding:1.2rem 0 0;min-height:24rem;touch-action:pan-y}
.w-lemma.wissel{animation:wIn .45s ease}
@keyframes wIn{from{opacity:0;transform:translateX(1.5rem)}to{opacity:1;transform:none}}
.w-taal,.w-def dt{font-family:"Formule",serif;font-style:italic;font-weight:600;color:var(--blauw);font-size:1.05rem;margin:0}
.w-zin{hyphens:manual;font-family:"Display";font-weight:850;font-size:clamp(2rem,3.6vw,3.3rem);line-height:.98;margin:.3rem 0 1.6rem;max-width:20ch}
.w-def{margin:0;display:grid;gap:1.2rem}
.w-def div{border-top:1px solid var(--lijn);padding-top:1rem;display:grid;grid-template-columns:11rem minmax(0,1fr);gap:1rem}
.w-def dd{margin:0}
.w-reken{margin:1.2rem 0 0}.w-reken a{font-weight:700;text-decoration-color:var(--blauw);text-decoration-thickness:2px;text-underline-offset:.3em;display:inline-block;padding:.6rem 0;min-height:2.75rem}
.w-noot{font-size:.82rem;color:var(--grijs);margin:1rem 0 0}
@media (max-width:900px){.w-grid{grid-template-columns:1fr}.w-beeld{position:static}.w-def div{grid-template-columns:1fr;gap:.2rem}.w-lemma{min-height:0}}

/* ---------- team ---------- */
.team{background:var(--papier);padding:clamp(4rem,8vw,8rem) 0}
.t-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,3rem);margin-top:clamp(2.5rem,5vw,4.5rem)}
.t-foto{display:block;position:relative;overflow:hidden;background:#ddd}.t-foto::before{content:"";display:block;padding-top:120%}
.t-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .8s}
.t-kaart:hover .t-foto img{transform:scale(1.03)}
.t-naam{font-family:"Display";font-weight:850;font-size:clamp(2rem,3.4vw,3.3rem);line-height:.9;margin:1.2rem 0 .8rem}
.t-q{margin:0 0 .4rem;max-width:34ch;hyphens:manual}
.t-dlg{border:0;padding:0;max-width:min(44rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow-y:auto;background:#fff;color:#000}
.t-dlg::backdrop{background:rgba(0,0,0,.75)}
.t-dlg-in{padding:clamp(1.5rem,4vw,3rem);position:relative}
.t-sluit{position:sticky;top:0;float:right;width:2.75rem;height:2.75rem;border:0;background:#000;color:#fff;font-size:1.6rem;cursor:pointer;margin:-.5rem -.5rem 0 1rem}
.t-dnaam{font-family:"Display";font-weight:850;font-size:clamp(2rem,4vw,3rem);line-height:.95}
.t-rol{color:var(--blauw);font-family:"Formule";font-style:italic;font-weight:600;margin:.3rem 0 1.2rem}
@media (max-width:900px) and (min-width:600px){.t-rij{grid-template-columns:repeat(3,minmax(0,1fr))}.t-naam{font-size:1.8rem}.t-q{font-size:.95rem}}
@media (max-width:599px){.t-rij{grid-template-columns:1fr;gap:3rem}.t-foto::before{padding-top:100%}}

/* ---------- voor wie ---------- */
.wat{background:var(--blauw);color:#fff;padding:clamp(4rem,8vw,8rem) 0}
.p-zin{hyphens:manual;font-family:"Display";font-weight:800;font-size:clamp(2rem,4.8vw,4.6rem);line-height:1.02;margin:0;max-width:24ch}
.p-plus{color:#000;font-weight:900}
.p-land{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.ex-lijst{margin:clamp(3rem,6vw,5rem) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,3vw,3rem)}
.ex{border-top:2px solid #fff;padding-top:1rem}
.ex dt{font-family:"Display";font-weight:800;font-size:1.7rem;line-height:1}
.ex dd{margin:.5rem 0 0;font-size:.98rem;opacity:.9}
@media (max-width:900px){.ex-lijst{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ex-lijst{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{background:#000;color:#fff;padding:clamp(4rem,8vw,8rem) 0}
.c-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem)}
.c-h2{max-width:10ch}
.c-mail{font-family:"Display";font-weight:800;font-size:clamp(1.6rem,2.8vw,2.7rem);margin:2rem 0 0}
.c-mail a{text-decoration-color:var(--blauw-l);text-decoration-thickness:3px;text-underline-offset:.2em}
.c-adres{color:#bbb;margin:1.5rem 0 0}
.c-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.2rem;align-content:start}
.c-ft{grid-column:1/-1;margin:0 0 .5rem;font-family:"Display";font-weight:800;font-size:1.7rem}
.c-form label{display:grid;gap:.35rem;font-size:.9rem;color:#cfcfcf}
.c-form input,.c-form select,.c-form textarea{font:inherit;color:#fff;background:#111;border:1px solid #444;padding:.7rem .8rem;min-height:3rem;width:100%;border-radius:0}
.c-form select{-webkit-appearance:none;appearance:none;background:#111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") right .9rem center/.75rem no-repeat;padding-right:2.4rem;height:3rem}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{border-color:var(--blauw-l);outline:none}
.c-breed,.c-vink,.c-form>p{grid-column:1/-1}
.c-form label.c-vink{display:flex;align-items:center;gap:.7rem;min-height:2.75rem;cursor:pointer}
.c-vink input{width:1.3rem;height:1.3rem;min-height:0;accent-color:var(--blauw)}
.c-form>p{margin:0}
.c-melding{color:#ffb4b4;min-height:1.2em;font-size:.9rem}
.c-noot{font-size:.82rem;color:#8a8a8a}
@media (max-width:860px){.c-grid{grid-template-columns:1fr}}
@media (max-width:520px){.c-form{grid-template-columns:1fr}}

/* ---------- voet ---------- */
.voet{background:#000;color:#bdbdbd;border-top:1px solid #222;font-size:.92rem}
.voet-in{padding:3rem var(--rand) 3.5rem;display:grid;grid-template-columns:1.2fr 1fr 1fr 1.3fr;gap:2rem}
.voet-merk{display:flex;flex-direction:column;gap:.8rem}
.voet-m{width:4rem;height:auto}.voet-w{width:9rem;height:auto;fill:#fff}
.voet-t{color:#fff;font-weight:700;margin:0 0 .6rem}
.voet p{margin:0 0 .5rem}.voet ul{list-style:none;margin:0;padding:0}
.voet a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}.voet a:hover{color:#fff;text-decoration:underline}
.voet li a{min-height:2.5rem}
@media (max-width:900px){.voet-in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.voet-in{grid-template-columns:1fr}}

/* ---------- juridisch ---------- */
.jur{padding:clamp(3rem,7vw,6rem) 0}
.jur-in{max-width:52rem}
.jur h1{margin-bottom:2rem;font-size:clamp(2.4rem,6vw,4.5rem)}
.jur h2{font-family:"Display";font-weight:800;font-size:1.6rem;margin:2rem 0 .4rem}
.jur p{max-width:68ch}

/* inloop */
.rv{opacity:0;transform:translateY(1.5rem);transition:opacity .8s,transform .8s}.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}
  .rv{opacity:1;transform:none}}