/* ── tokens ── */
:root{--zwart:#0a0a0b;--wit:#f2f1ed;--papier:#f3f2ee;--inkt:#0a0a0b;
  --bg:var(--zwart);--fg:var(--wit);--dim:rgba(242,241,237,.5);--lijn:rgba(242,241,237,.16);--vlak:#141416;--inv:1;
  --kop:"Instrument Sans",system-ui,sans-serif;--tekst:"Inter",system-ui,sans-serif;--label:"IBM Plex Mono",ui-monospace,monospace;
  --aurora:linear-gradient(90deg,#16e8ff 0%,#8ff5ff 12%,#fff29a 26%,#ffb3f0 40%,#ff3fd0 54%,#7a3bff 70%,#2c46ff 84%,#16e8ff 100%);
  --m:32px;--rood:#ff4b3e}
html[data-thema="licht"]{--bg:var(--papier);--fg:var(--inkt);--dim:rgba(10,10,11,.5);--lijn:rgba(10,10,11,.14);--vlak:#e9e8e3;--inv:0}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--tekst);font-weight:300;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.label{font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.label--fg{color:var(--fg)}
h1,h2,h3{font-family:var(--kop);font-weight:500;letter-spacing:-.01em;line-height:1.05}
.kop-xl{font-size:clamp(40px,7vw,104px)}
.kop-l{font-size:clamp(30px,4.6vw,64px)}
.kop-m{font-size:clamp(22px,2.6vw,34px)}
.kop-s{font-size:13px;letter-spacing:.34em;text-transform:uppercase;font-weight:500}
p.lees{font-size:17px;max-width:56ch;color:var(--fg)}
p.lees+p.lees{margin-top:1em}
.sig{height:16px;filter:invert(var(--inv))}
.aurora{height:2px;background:var(--aurora)}
.aurora--dik{height:6px}
.wrap{padding:0 var(--m)}
.sectie{padding:96px var(--m)}
.sectie--strak{padding:48px var(--m)}
.raster{display:grid;gap:24px}
.kolom2{grid-template-columns:1fr 1fr}
.kolom3{grid-template-columns:repeat(3,1fr)}
.kolom4{grid-template-columns:repeat(4,1fr)}
.lijn{border-top:1px solid var(--lijn)}
/* ── header / footer ── */
.balk{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px var(--m);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--lijn)}
.merk{display:inline-flex;align-items:center;font-family:var(--kop);font-weight:600;font-size:15px;letter-spacing:.18em;text-transform:uppercase}
.merk img{height:16px;filter:invert(var(--inv))}
.merk .h{font-family:var(--kop);font-weight:400;letter-spacing:0;text-transform:none}
.balk>nav{min-width:0}
.nav{list-style:none;display:flex;gap:28px}
.nav a{font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.nav a span{color:var(--dim);margin-right:8px}
.nav a.actief{border-bottom:1px solid var(--fg);padding-bottom:3px}
.balk__rechts{display:flex;justify-content:flex-end;align-items:center;gap:22px}
.balk__plek{font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.thema{font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;border:1px solid var(--lijn);padding:7px 10px;background:none;color:var(--fg);cursor:pointer}
.thema:hover{border-color:var(--fg)}
.voet{padding:64px var(--m) 40px;border-top:1px solid var(--lijn);display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:end}
.voet .sig{height:40px}
.voet__midden{text-align:center}
.voet__rechts{text-align:right}
.voet .label{line-height:2}
/* ── onderdelen ── */
.kaart{position:relative;background:var(--vlak);overflow:hidden}
.kaart img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,0,.1,1)}
.kaart:hover img{transform:scale(1.03)}
.kader{position:relative;--hoek:20px;--hoekl:22px}
.kader i{position:absolute;width:var(--hoekl);height:var(--hoekl);border:0 solid #f2f1ed;pointer-events:none;opacity:.95;z-index:2}
.kader i:nth-of-type(1){left:var(--hoek);top:var(--hoek);border-width:1.5px 0 0 1.5px}.kader i:nth-of-type(2){right:var(--hoek);top:var(--hoek);border-width:1.5px 1.5px 0 0}.kader i:nth-of-type(3){left:var(--hoek);bottom:var(--hoek);border-width:0 0 1.5px 1.5px}.kader i:nth-of-type(4){right:var(--hoek);bottom:var(--hoek);border-width:0 1.5px 1.5px 0}
.kader--fg i{border-color:var(--fg)}
.tabel{border-top:1px solid var(--lijn)}
.tabel div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--lijn);font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.tabel div span:first-child{color:var(--dim)}
.knop{display:inline-flex;align-items:center;gap:12px;font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;border:1px solid var(--fg);padding:14px 20px;transition:background .2s,color .2s}
.knop:hover{background:var(--fg);color:var(--bg)}
button.knop{background:none;color:var(--fg);cursor:pointer;font-weight:400;line-height:normal}
.knop.is-gedaan{background:var(--fg);color:var(--bg)}
.nummer{font-family:var(--kop);font-weight:300;font-size:clamp(64px,10vw,150px);line-height:.9;letter-spacing:-.03em}
.haken-groot{display:flex;align-items:center;justify-content:center}
.haken-groot .h{font-family:var(--kop);font-weight:300;line-height:1}
.haken-groot img{width:clamp(160px,26vw,420px);height:auto;filter:invert(var(--inv))}
.sticker{display:inline-grid;place-items:center;gap:4px;width:190px;height:118px;border-radius:10px;background:var(--aurora);background-size:200% 100%;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.sticker img{height:34px;filter:invert(1)}
.sticker span{font-family:var(--label);font-size:9px;letter-spacing:.26em;text-transform:uppercase}
.concept-nav{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;display:flex;gap:6px;background:color-mix(in srgb,var(--bg) 85%,transparent);border:1px solid var(--lijn);padding:6px;backdrop-filter:blur(10px)}
.concept-nav a{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:8px 12px}
.concept-nav a.actief{background:var(--fg);color:var(--bg)}
@media (max-width:800px){:root{--m:16px}.balk{grid-template-columns:1fr auto}.nav,.balk>nav{display:none}.kolom2,.kolom3,.kolom4{grid-template-columns:1fr}.voet{grid-template-columns:1fr;text-align:left}.voet__midden,.voet__rechts{text-align:left}.sectie{padding:56px var(--m)}.tabel div{grid-template-columns:96px 1fr}}

/* ── pagina-specifiek (uit de gekozen concepten) ── */
/* werk-3 */
.strook{padding:40px 0 24px;border-top:1px solid var(--lijn)}.strook__kop{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:20px}.strook__rij{display:flex;gap:18px;padding:0 var(--m) 24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.strook__rij::-webkit-scrollbar{display:none}.venster{flex:0 0 min(440px,78vw);aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--vlak);scroll-snap-align:start}.venster img{width:100%;height:100%;object-fit:cover}.venster__t{position:absolute;left:52px;right:52px;bottom:26px;display:flex;justify-content:space-between}.venster .label--fg{color:#f2f1ed}.venster .label{color:rgba(242,241,237,.6)}
/* project-2 */
.split{display:grid;grid-template-columns:420px 1fr;gap:48px;padding:48px var(--m) 96px}.split__l{position:sticky;top:96px;align-self:start}.split__r{display:grid;gap:24px}.split__r img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--vlak)}.split__r img:first-child{aspect-ratio:3/4}@media(max-width:900px){.split{grid-template-columns:1fr}.split__l{position:static}}
/* over-2 */
.feiten .nummer{font-size:clamp(56px,7vw,110px)}.tl{border-top:1px solid var(--lijn)}.tl__r{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--lijn);font-size:17px}
/* proces-1 */
.stap{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:40px 0;border-top:1px solid var(--lijn);align-items:start}.stap .nummer{font-size:clamp(56px,6vw,96px)}@media(max-width:800px){.stap{grid-template-columns:1fr;gap:8px}}
/* proces-2 */
.pt{padding:24px 0 48px}.pt__rij{display:flex;gap:24px;padding:0 var(--m);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.pt__rij::-webkit-scrollbar{display:none}.pt__s{flex:0 0 min(360px,78vw);scroll-snap-align:start}.pt__s img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--vlak)}
/* proces-3 */
.qa{border-top:1px solid var(--lijn)}.qa:last-child{border-bottom:1px solid var(--lijn)}.qa summary{list-style:none;display:grid;grid-template-columns:64px 1fr 32px;align-items:center;padding:24px 0;cursor:pointer}.qa summary::-webkit-details-marker{display:none}.qa__plus{font-family:var(--kop);font-weight:300;font-size:28px;text-align:right}.qa[open] .qa__plus{transform:rotate(45deg)}@media(max-width:800px){.qa summary{grid-template-columns:40px 1fr 24px}.qa p{padding-left:40px!important}}
/* notities-1 */
.noot{display:grid;grid-template-columns:120px 1fr 80px;gap:24px;padding:28px 0;border-top:1px solid var(--lijn);align-items:start}.noot:last-child{border-bottom:1px solid var(--lijn)}.noot:hover .kop-m{text-decoration:underline;text-underline-offset:6px}@media(max-width:800px){.noot{grid-template-columns:1fr;gap:6px}}
/* notities-3 */
.zij{position:sticky;top:96px}.zij__n{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--lijn);font-size:14px}.zij__n:hover span:last-child{text-decoration:underline;text-underline-offset:5px}@media(max-width:900px){.sectie.raster{grid-template-columns:1fr!important}.zij{position:static}}
/* contact-3 */
.kaartje{display:grid;place-items:center;gap:10px;width:min(420px,84vw);aspect-ratio:1.6;margin:0 auto;border-radius:18px;background:var(--aurora);background-size:200% 100%;color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:kaartje 12s linear infinite}.kaartje img{height:26%;filter:invert(1)}.kaartje span{font-family:var(--label);font-size:11px;letter-spacing:.3em;text-transform:uppercase}@keyframes kaartje{to{background-position:200% 0}}
/* home: hero met de planeet */
.hero{min-height:100vh;display:grid;place-items:center;position:relative;padding:120px 32px 80px}
.haken{display:flex;align-items:center;justify-content:center;gap:1.5vw;line-height:1}
.haken .h{font-family:var(--kop);font-weight:300;font-size:clamp(180px,34vw,520px);line-height:.8;transform:translateY(-.06em)}
.haken img{height:auto;object-fit:contain;width:clamp(160px,26vw,420px);filter:invert(1);opacity:.95}
.hero__onder{text-align:center;margin-top:36px}
.hero__onder h1{font-family:var(--kop);font-weight:500;font-size:13px;letter-spacing:.34em;text-transform:uppercase;margin-top:10px}
.hero__onder .streep{width:16px;height:1px;background:var(--wit);margin:24px auto 0}
.hero__hoek{position:absolute;font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);line-height:2}
.hero__hoek--lb{left:32px;bottom:40px}
.hero__hoek--rb{right:32px;bottom:40px;text-align:right}
.hero__hoek--rt{right:32px;top:100px;text-align:right}
.holo{height:2px;background:var(--holo);opacity:.9}
.wereld{position:relative;width:clamp(210px,31vw,480px);aspect-ratio:1;flex:none;margin:0 -2vw}
.wereld canvas{position:absolute;inset:-12%;width:124%;height:124%;display:block}
.wereld__gloed{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,rgba(126,232,255,.32) 0%,rgba(255,75,154,.18) 38%,rgba(59,108,255,.10) 58%,transparent 72%);filter:blur(18px);animation:gloed 14s ease-in-out infinite alternate}
@keyframes gloed{from{transform:rotate(0deg) scale(1)}to{transform:rotate(180deg) scale(1.08)}}
.wereld__terugval{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7ee8ff 0%,#3b6cff 30%,#ff4b9a 62%,#1a0b3a 100%);box-shadow:0 0 80px rgba(126,232,255,.35)}
.wereld.is-live .wereld__terugval{display:none}
.haken .wereld img{position:absolute;left:50%;top:50%;width:112%;max-width:none;transform:translate(-50%,-46%);filter:invert(1) drop-shadow(0 2px 14px rgba(5,0,30,.75));opacity:1;pointer-events:none}
@media (max-width:700px){.wereld{margin:0 -6vw}}

/* thema-eigen */
.overslaan{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);padding:8px 12px;z-index:99}.overslaan:focus{left:8px;top:8px}
.sig--voet{height:40px}
.buren{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.buur{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.buur--next{grid-template-columns:1fr 120px;text-align:right}
.buur--next .buur__beeld{order:2}
.buur__beeld{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--vlak)}
.buur__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,0,.1,1)}
.buur:hover .buur__beeld img{transform:scale(1.03)}
.buur__t .label{display:block;margin-bottom:6px}
.buur:hover .venster__titel{background-size:100% 1px}
@media (max-width:800px){.buren{grid-template-columns:1fr;gap:20px}.buur,.buur--next{grid-template-columns:88px 1fr;text-align:left}.buur--next .buur__beeld{order:0}.buren__alle{order:3}}
.hero{min-height:calc(100vh - 68px)}
.hero .haken{gap:0}
.hero .haken .h{color:var(--fg)}
.wereld__terugval{background:radial-gradient(circle at 35% 30%,#16e8ff 0%,#2c46ff 30%,#ff3fd0 62%,#1a0b3a 100%)}
.home-strook{border-top:1px solid var(--lijn)}
.inhoud p{font-size:17px;max-width:56ch}.inhoud p+p{margin-top:1em}.inhoud h2{margin:1.6em 0 .5em}.inhoud img{margin:1.5em 0}.inhoud a{text-decoration:underline;text-underline-offset:5px}
.pagina{padding:80px var(--m) 96px;max-width:1100px}
.zoek{display:flex;gap:12px}.zoek input{flex:1;min-width:0;background:none;border:0;border-bottom:1px solid var(--lijn);color:var(--fg);font:inherit;font-size:18px;padding:10px 0;outline:none}.zoek input:focus{border-color:var(--fg)}
.zoek input::-webkit-search-decoration,.zoek input::-webkit-search-cancel-button{-webkit-appearance:none}
@media (max-width:800px){.voet__zoek{margin:10px 0 0}}
.notitie-kop{padding:80px var(--m) 24px}
/* paginering van de notities (markup van WordPress) */
.screen-reader-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.navigation.pagination{margin-top:32px}.nav-links{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.page-numbers{display:inline-block;padding:8px 12px;border:1px solid var(--lijn);color:var(--dim)}a.page-numbers:hover{border-color:var(--fg);color:var(--fg)}.page-numbers.current{border-color:var(--fg);color:var(--fg)}.page-numbers.dots{border:0}
.buur--kaal{grid-template-columns:1fr}
.noot .label time{color:inherit}
@media (max-width:800px){.hero{min-height:auto;padding:80px var(--m) 60px}}
/* WordPress geeft beelden width/height mee; de verhouding komt uit de css */
.split__r img,.galerij img,.vol,.half,.pt__s img,.inhoud img{height:auto}
.wp-post-image{max-width:100%}
@media (max-width:800px){.hero{display:block;padding:72px var(--m) 40px}.hero__hoek{position:static;text-align:left;margin-top:14px}.hero__hoek--rt,.hero__hoek--rb{display:none}.hero__hoek--lb{text-align:center}.hero__onder{margin-top:28px}}

/* ── Imagine. Reimagine. ── */
.hero__onder h1.statement,.statement{font-family:var(--kop);font-weight:500;font-size:clamp(34px,5.6vw,72px);letter-spacing:-.02em;line-height:1;text-transform:none;margin-top:10px;display:inline-flex;align-items:baseline}
.statement__re{display:inline-block;overflow:hidden;max-width:0;opacity:0;white-space:nowrap;transition:max-width 1.1s cubic-bezier(.2,0,.1,1) .9s,opacity .6s ease 1s}
.statement.is-re .statement__re{max-width:2em;opacity:1}
.statement__w{display:inline-block}
.lus{display:inline-block;min-width:5.5em;text-align:left}
.principes{border-bottom:1px solid var(--lijn)}
.principe p{max-width:30ch}
/* opening: beelden komen open bij het scrollen (transformatie, geen fade) */
.open{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.2,0,.1,1)}
.open.is-open{clip-path:inset(-12px)}
@media (prefers-reduced-motion:reduce){.open{clip-path:none;transition:none}.statement__re{transition:none}}
/* herzien: ervoor en erna */
.herzien{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--vlak)}
.herzien img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.herzien__voor{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.herzien__na{position:absolute;inset:0}
.herzien input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.herzien::after{content:"";position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:#f2f1ed;pointer-events:none}
.herzien__l,.herzien__r{position:absolute;bottom:20px;color:#f2f1ed;pointer-events:none}.herzien__l{left:20px}.herzien__r{right:20px}

/* ── de wereld als gerenderde bol (Aurora Glass, 8 s loop) ── */
.wereld--video{perspective:900px}
.wereld--video .wereld__bol{position:absolute;inset:-6%;transform-style:preserve-3d;will-change:transform;border-radius:50%;overflow:hidden;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 70%)}
.wereld--video .wereld__video{position:absolute;inset:-14%;width:128%;height:128%;object-fit:cover;display:block;background:#000}
.wereld__licht{position:absolute;inset:0;background:radial-gradient(circle at var(--lx,40%) var(--ly,35%),rgba(255,255,255,.22),rgba(255,255,255,0) 32%);mix-blend-mode:screen;pointer-events:none;transition:background-position .2s}
.wereld--video .wereld__gloed{display:none}
.wereld--video img{transform:translate(-50%,-46%) translateZ(40px)}
html[data-thema="licht"] .wereld--video .wereld__bol{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 64%);mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 64%)}

/* ── ( Santen ): de handtekening staat altijd tussen de haakjes ── */
.merk-los{display:inline-flex;align-items:center;color:var(--fg)}
.merk-los .h{font-family:var(--kop);font-weight:300;line-height:1}
.merk-los img{height:var(--sigH,16px);width:auto;filter:invert(var(--inv))}
.kaartje .merk-los,.kaartje .merk-los .h{color:#fff}
.kaartje .merk-los img{filter:invert(1);height:var(--sigH)}
.kaartje img{height:auto}

/* ── ronde 2: centrering, lus, principes, werkkaarten, filters, notities, contact ── */
.sectie,.pagina,.split,.strook__kop{max-width:1320px;margin-inline:auto}
.kolom-smal{max-width:960px}
.hero__onder .label{margin:22px 0}
.hero__onder .statement{margin:0}
.statement.is-uit .statement__re{max-width:0;opacity:0;transition:max-width .9s cubic-bezier(.2,0,.1,1),opacity .4s}
.haakwoord{color:var(--k)}
.stip{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--k,var(--fg));margin-right:10px;vertical-align:1px}
.principe .haak{color:var(--k)}
.venster{display:block;flex:0 0 min(400px,78vw);scroll-snap-align:start;background:none;aspect-ratio:auto;overflow:visible}
.venster__beeld{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--vlak)}
.venster__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,0,.1,1)}
.venster:hover .venster__beeld img{transform:scale(1.03)}
.venster__status{position:absolute;left:52px;top:26px;color:#f2f1ed;padding:5px 8px;border:1px solid rgba(242,241,237,.5);z-index:2}
.status-concept .venster__status{border-style:dashed}
.venster__t{position:static;display:block;margin-top:14px}
.venster__titel{display:block;font-family:var(--kop);font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.25;color:var(--fg)}
.venster__t .label{display:block;margin-top:6px}
.status{border:1px solid var(--dim);padding:2px 6px}.status-concept.status{border-style:dashed}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;border:1px solid var(--lijn);background:none;color:var(--fg);padding:9px 12px;cursor:pointer}
.filter.is-actief{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.venster.is-weg{display:none}.strook.is-leeg{display:none}
.split__r{grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.split__r img{aspect-ratio:auto;height:auto;max-height:70vh;object-fit:cover}
.split__r img.eerste,.split__r .herzien,.split__r .video{grid-column:1/-1}
.split__r img.eerste{max-height:80vh;aspect-ratio:auto}
.noot--beeld{grid-template-columns:160px 120px 1fr 80px}
.noot__beeld{width:160px;aspect-ratio:4/5;object-fit:cover;background:var(--vlak)}
.pt__s img{aspect-ratio:4/5}
.hero--contact .haken{cursor:pointer}
.hero--contact .hero__onder{max-width:60ch;margin-inline:auto}
.voet{grid-template-columns:auto 1fr auto;align-items:center;padding:40px var(--m)}
.voet .label{line-height:1.6}
@media (max-width:800px){.noot--beeld{grid-template-columns:1fr}.noot__beeld{width:100%;aspect-ratio:16/9}.split__r{grid-template-columns:1fr}.voet{grid-template-columns:1fr;gap:12px}}
.hero__onder .label{margin:0}
.hero__onder h1.statement{margin:26px 0 18px;line-height:.95}

/* ── ronde 3 ── */
/* marge overal gelijk aan Proces: kolom van 1320 met de zijmarge; stroken lopen door maar beginnen op dezelfde lijn */
:root{--kolom:1320px;--rand:max(var(--m),calc((100% - var(--kolom)) / 2 + var(--m)))}
.strook__kop{padding:0 var(--rand) 22px;max-width:none}
.strook__rij,.pt__rij{padding-left:var(--rand);padding-right:var(--rand)}
.hero__hoek--rt,.hero__hoek--rb{right:var(--rand)}.hero__hoek--lb{left:var(--rand)}
.voet{max-width:none;padding-left:var(--rand);padding-right:var(--rand)}
.balk{padding-left:var(--rand);padding-right:var(--rand)}
/* werk 1 register */
.filters--tekst{display:flex;gap:12px;align-items:baseline}
.filters--tekst .filter{border:0;padding:0 2px 4px;letter-spacing:.26em;background:none;color:var(--dim)}
.filters--tekst .filter.is-actief{color:var(--fg);border-bottom:1px solid var(--fg);background:none}
.werk .venster__status{display:none}
/* werk 2 stil */
.stip--vol{background:var(--fg)}.stip--ring{background:none;border:1.5px solid var(--fg);box-sizing:border-box}.stip--video{background:none;font-size:9px;width:auto;height:auto;color:var(--fg);vertical-align:0}
.legenda{display:flex;align-items:center;gap:8px;margin-top:4px}
.venster__stip{position:absolute;left:52px;top:26px;z-index:2;background:#f2f1ed;margin:0}.venster__stip.stip--ring{background:none;border-color:#f2f1ed}
.venster__video{position:absolute;right:52px;top:22px;z-index:2;color:#f2f1ed;font-size:10px}
.venster__zweef{position:absolute;left:52px;right:52px;bottom:30px;z-index:2;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.venster__zweef .venster__titel{color:#f2f1ed}
.werk--2 .venster:hover .venster__zweef{opacity:1;transform:none}
/* fasen op proces: de wereld in de kleur van de fase */
.fasen{display:grid;gap:8px}
.fase{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:center;padding:36px 0;border-top:1px solid var(--lijn)}
.fase__bol{position:relative;width:220px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--vlak)}
.fase__bol img{width:126%;height:126%;position:absolute;left:-13%;top:-13%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(1.05)}
.fase__tint{position:absolute;inset:0;background:var(--k);mix-blend-mode:color}
.fase__t .kop-m{color:var(--k)}
.fase__t .lees{max-width:60ch}
@media (max-width:800px){.fase{grid-template-columns:1fr;gap:20px}.fase__bol{width:160px}}
/* contact: het pasje met de wereld erin */
.contact{max-width:none;text-align:center}
.wereld--kaart{perspective:1200px;width:min(520px,90vw);margin:28px auto 0}
.wereld--kaart .wereld__bol{position:relative;display:block;aspect-ratio:1.6;border-radius:18px;overflow:hidden;inset:auto;transform-style:preserve-3d;box-shadow:0 30px 80px rgba(0,0,0,.35);-webkit-mask-image:none;mask-image:none}
.wereld--kaart .wereld__video{position:absolute;inset:-30% -10%;width:120%;height:160%;object-fit:cover}
.kaartje__tekst{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;color:#fff;z-index:2}
.kaartje__tekst .label{color:#fff;letter-spacing:.3em}
.kaartje--bol .merk-los,.kaartje--bol .merk-los .h{color:#fff}.kaartje--bol .merk-los img{filter:invert(1)}
.strook__rij,.pt__rij{scroll-padding-left:var(--rand)}
.wereld--kaart{aspect-ratio:auto;height:auto}
.kaartje__tekst::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);z-index:-1}

/* ══ micro-animaties ══ */
/* leesbalk: de aurora groeit mee met hoe ver je bent */
.leesbalk{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--aurora);background-size:200% 100%;transform-origin:left;transform:scaleX(var(--p,0));z-index:40;pointer-events:none}
/* nav: nummer schuift, streep tekent zich van links */
.nav a{position:relative;display:inline-block;padding-bottom:4px;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--fg);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,0,.1,1)}
.nav a:hover::after,.nav a.actief::after{transform:scaleX(1);transform-origin:left}
.nav a.actief{border-bottom:0;padding-bottom:4px}
.nav a span{display:inline-block;transition:transform .35s cubic-bezier(.2,0,.1,1),color .25s}
.nav a:hover span{transform:translateX(-3px);color:var(--fg)}
/* het merk ademt: de haakjes gaan iets open als je erover gaat */
[data-merk] .h{display:inline-block;transition:transform .45s cubic-bezier(.2,0,.1,1)}
[data-merk]:hover .h:first-of-type{transform:translateX(-4px)}
[data-merk]:hover .h:last-of-type{transform:translateX(4px)}
/* knop: vult van links */
.knop{position:relative;overflow:hidden;isolation:isolate;transition:color .3s}
.knop::before{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,0,.1,1);z-index:-1}
.knop:hover{background:none;color:var(--bg)}
.knop:hover::before{transform:scaleX(1)}
/* thema-schakelaar: draait bij het wisselen */
.thema{transition:border-color .2s,transform .5s cubic-bezier(.2,0,.1,1)}
.thema.is-draai{transform:rotate(180deg)}
/* kaarten: hoekmerken schuiven naar buiten, beeld zoomt, titel krijgt een streep */
.kader i{transition:transform .5s cubic-bezier(.2,0,.1,1),opacity .3s}
.venster:hover .kader i:nth-of-type(1){transform:translate(-6px,-6px)}
.venster:hover .kader i:nth-of-type(2){transform:translate(6px,-6px)}
.venster:hover .kader i:nth-of-type(3){transform:translate(-6px,6px)}
.venster:hover .kader i:nth-of-type(4){transform:translate(6px,6px)}
.venster__titel{display:inline-block;background-image:linear-gradient(var(--fg),var(--fg));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s cubic-bezier(.2,0,.1,1)}
.venster:hover .venster__titel{background-size:100% 1px}
/* filters: kaarten vouwen dicht in plaats van verdwijnen */
.venster{transition:opacity .4s,transform .5s cubic-bezier(.2,0,.1,1),flex-basis .5s cubic-bezier(.2,0,.1,1),margin .5s}
.venster.is-weg{display:block;opacity:0;transform:scale(.96);flex-basis:0!important;min-width:0;overflow:hidden;margin-right:-18px;pointer-events:none}
.filter{transition:color .25s,border-color .25s}
/* vragen: het antwoord komt op */
.qa p{animation:opkomen .45s cubic-bezier(.2,0,.1,1) both}
.qa__plus{transition:transform .4s cubic-bezier(.2,0,.1,1)}
@keyframes opkomen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* principes: de stip klopt zacht */
.principe .stip{animation:klop 3.2s ease-in-out infinite}
.principe:nth-child(2) .stip{animation-delay:.8s}.principe:nth-child(3) .stip{animation-delay:1.6s}.principe:nth-child(4) .stip{animation-delay:2.4s}
@keyframes klop{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--k) 55%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
/* scroll-pijl */
.hero__hoek--rb{animation:wenk 2.6s ease-in-out infinite}
@keyframes wenk{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* cijfers tellen op (klasse gezet door site.js) */
.nummer[data-tel]{font-variant-numeric:tabular-nums}
/* pagina komt op, en vervaagt kort bij het verlaten */
/* paginawissel via een sluier bovenop, niet via opacity op body: opacity op body maakt een eigen stapelcontext
   en dan kan de bol niet meer met de pagina-achtergrond mengen */
body::before{content:"";position:fixed;inset:0;background:var(--bg);z-index:98;pointer-events:none;animation:sluierweg .5s ease both}
body.is-weg::before{animation:sluieraan .18s ease forwards}
@keyframes sluierweg{from{opacity:1}to{opacity:0}}
@keyframes sluieraan{from{opacity:0}to{opacity:1}}
/* cursor: een kleine stip die bij links een ( ) wordt — alleen met een echte muis */
@media (pointer:fine){
  .cursor{position:fixed;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--fg);pointer-events:none;z-index:99;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .3s;mix-blend-mode:difference;opacity:0}
  .cursor.is-aan{opacity:1}
  .cursor.is-link{width:34px;height:34px;background:transparent;border:1px solid #fff}
  .cursor.is-link::before,.cursor.is-link::after{content:"(";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--kop);font-weight:300;font-size:22px;color:#fff;line-height:1}
  .cursor.is-link::before{content:"(";margin-left:-9px}.cursor.is-link::after{content:")";margin-left:9px}
  .cursor.is-link{border:0}
}
@media (prefers-reduced-motion:reduce){
  .nav a::after,.nav a span,[data-merk] .h,.knop::before,.kader i,.venster,.venster__titel,.thema{transition:none}
  .principe .stip,.hero__hoek--rb,.qa p{animation:none}body::before{display:none}
  .cursor{display:none}
}

/* ── toegankelijkheid: zichtbare focus voor toetsenbord, en bij minder beweging staat álles stil ── */
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.zoek input:focus-visible{outline:none}
.venster:focus-visible,.buur:focus-visible,.noot:focus-visible{outline-offset:6px}
.thema:focus-visible,.filter:focus-visible,.knop:focus-visible{outline-offset:2px}
.kaartje--bol:focus-visible{outline-offset:8px;border-radius:18px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .kaartje,.wereld--kaart .wereld__bol,.wereld__gloed,.hero__hoek--rb,.principe .stip{animation:none!important}
  .statement .statement__re{max-width:2em;opacity:1}
  .open{clip-path:none}
  .kaart:hover img,.venster:hover .venster__beeld img,.buur:hover .buur__beeld img{transform:none}
  .strook__rij,.pt__rij{scroll-snap-type:none}
}

/* ── lichtbak: projectbeelden groot, zonder bibliotheek ── */
img[data-licht]{cursor:zoom-in}
.licht{border:0;padding:0;margin:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;inset:0;color:#f2f1ed}
.licht::backdrop{background:rgba(10,10,11,.94)}
.licht__kader{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto}
.licht__kop,.licht__voet{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--rand)}
.licht__kop .label,.licht__voet .label{color:rgba(242,241,237,.7)}
.licht__beeld{display:grid;place-items:center;overflow:hidden;padding:0 var(--m);touch-action:none;cursor:zoom-out}
.licht__beeld img{max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;transition:opacity .25s;user-select:none;-webkit-user-drag:none;cursor:default}
.licht__knop{border:1px solid rgba(242,241,237,.4);background:none;color:#f2f1ed;font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;padding:9px 12px;cursor:pointer;transition:border-color .2s}
.licht__knop:hover{border-color:#f2f1ed}
.licht__knop:focus-visible{outline:2px solid #f2f1ed;outline-offset:2px}
html.licht-open{overflow:hidden}
html.licht-open .cursor,html.licht-open .leesbalk{display:none}
@media (prefers-reduced-motion:no-preference){.licht[open]{animation:lichtaan .25s ease}}
@keyframes lichtaan{from{opacity:0}to{opacity:1}}
@media (max-width:600px){.licht__voet .label{display:none}}

/* ── transparante wereld: geen masker meer nodig, werkt op wit en zwart ── */
.wereld--video .wereld__bol,html[data-thema="licht"] .wereld--video .wereld__bol{-webkit-mask-image:none;mask-image:none;overflow:visible;border-radius:0}
.wereld--video .wereld__video{background:transparent;inset:-10%;width:120%;height:120%}
.wereld__licht{border-radius:50%;inset:6%}
/* het pasje: aurora-verloop als kaart, de transparante bol erop */
.wereld--kaart .wereld__bol{background:var(--aurora);background-size:200% 100%;animation:kaartje 14s linear infinite;overflow:hidden;border-radius:18px}
.wereld--kaart .wereld__video{inset:-32% auto auto 50%;width:auto;height:165%;aspect-ratio:1;transform:translateX(-50%)}
.fase__bol{background:none}.fase__bol img{filter:grayscale(1) contrast(1.2) brightness(1.1)}

/* vangnet: browser zonder video-alpha → ronde uitsnede, zodat er geen zwart vlak om de bol staat */
.wereld--video.is-ondoorzichtig .wereld__bol{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 56%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 56%)}
.wereld--kaart.is-ondoorzichtig .wereld__bol{-webkit-mask-image:none;mask-image:none}
.wereld--kaart.is-ondoorzichtig .wereld__video{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 33%);mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 33%)}
/* ── marge: één kolom voor alles, ook op brede schermen ── */
:root{--kolom:1520px}
.sectie,.pagina,.split,.strook__kop{max-width:var(--kolom)}
.kolom-smal{max-width:1040px}
.hero{max-width:none}
.hero__hoek--rt,.hero__hoek--rb{right:var(--rand)}.hero__hoek--lb{left:var(--rand)}
.principe p{max-width:34ch}

/* ── wereld per thema: mengmodus laat de gerenderde achtergrond wegvallen ── */
.wereld__video{mix-blend-mode:screen;background:transparent}
html[data-thema="licht"] .wereld__video{mix-blend-mode:multiply}
.wereld--video .wereld__bol{-webkit-mask-image:none!important;mask-image:none!important}
.wereld__licht{mix-blend-mode:screen}
html[data-thema="licht"] .wereld__licht{mix-blend-mode:soft-light}
.wereld--kaart .wereld__video{mix-blend-mode:normal;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 33.5%);mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 33.5%)}
.fase__bol img{filter:grayscale(1) contrast(1.2) brightness(1.1)}

/* mengmodus op de bol zelf (niet op de video): de bol vormt geen eigen stapelcontext meer via perspective,
   dus hij mengt met de pagina-achtergrond; de handtekening staat ernaast en mengt niet mee */
.wereld--video{perspective:none}
.wereld--video .wereld__bol{mix-blend-mode:screen}
html[data-thema="licht"] .wereld--video .wereld__bol{mix-blend-mode:multiply}
.wereld__video{mix-blend-mode:normal}
.wereld--kaart .wereld__bol,html[data-thema="licht"] .wereld--kaart .wereld__bol{mix-blend-mode:normal}
.wereld--video .wereld__sig{position:absolute;z-index:3}
/* lichte variant: de aurora-kleuren donkerder, anders lezen geel en cyaan niet op papier */
html[data-thema="licht"] .haakwoord,html[data-thema="licht"] .principe .haak,html[data-thema="licht"] .fase__t .kop-m{filter:brightness(.62) saturate(1.8)}
html[data-thema="licht"] .stip{filter:brightness(.7) saturate(1.6)}

/* zoekveld in de kop: klein, zonder knop (Enter zoekt); op smalle schermen weg */
.balk__rechts .zoek{gap:0}.balk__rechts .zoek input{width:120px;font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:6px 0}.balk__rechts .zoek input::placeholder{color:var(--dim)}.balk__rechts .zoek .knop{display:none}
@media (max-width:800px){.balk__rechts .zoek{display:none}}
/* laatste werk op de home: kop op de paginamarge, strook over de volle breedte */
.home-strook .strook__kop{padding:0 var(--m) 22px;max-width:none}
.home-strook .strook__rij{padding-left:var(--m);padding-right:var(--m);scroll-padding-left:var(--m)}

/* geen lichtvlek over de bol: die tekende buiten de gerenderde bol een grijze waas */
.wereld--video .wereld__licht{display:none}