/*
Theme Name: MVH Visuals
Theme URI: https://www.mvhvisuals.nl
Author: Max van Hest
Description: Thema voor MVH Visuals: foto, video en drone. Alles is te bewerken via het menu MVH Visuals in het dashboard.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: mvh-visuals
*/
@font-face{font-family:"Manrope";src:url(assets/fonts/manrope-var.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"DM Mono";src:url(assets/fonts/dmmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(assets/fonts/dmmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --achtergrond:#F1F3F0;--vlak:#FFFFFF;--vlak-2:#E6EAE6;--lijn:#D5DCD7;
  --tekst:#0E1311;--tekst-zacht:#5A6660;--accent:#2F5240;--knop:#2F5240;--knop-tekst:#E8EDE9;
  --scene-lucht:#DCE3DD;--scene-1:#CBD7CE;--scene-2:#B8C9BC;--scene-3:#A3BAA9;--scene-4:#8FA898;--scene-5:#7C9887;
  --overlay:rgba(14,19,17,.0);
  --nacht:#0E1311;--mist:#E8EDE9;--varen:#9DB8A4;--dennen:#2F5240;
  --font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r1:4px;--r2:8px;--r3:16px;--r4:24px;--r5:40px;--r6:64px;--r7:104px;
  --hoek-s:2px;--hoek-m:6px;
  --max:1240px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --achtergrond:#0E1311;--vlak:#18201C;--vlak-2:#1F2925;--lijn:#26322C;
  --tekst:#E8EDE9;--tekst-zacht:#A3AEA7;--accent:#9DB8A4;--knop:#9DB8A4;--knop-tekst:#0E1311;
  --scene-lucht:#1B2621;--scene-1:#26322C;--scene-2:#2F4237;--scene-3:#3E5A4B;--scene-4:#2F5240;--scene-5:#0E1311;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --achtergrond:#0E1311;--vlak:#18201C;--vlak-2:#1F2925;--lijn:#26322C;
  --tekst:#E8EDE9;--tekst-zacht:#A3AEA7;--accent:#9DB8A4;--knop:#9DB8A4;--knop-tekst:#0E1311;
  --scene-lucht:#1B2621;--scene-1:#26322C;--scene-2:#2F4237;--scene-3:#3E5A4B;--scene-4:#2F5240;--scene-5:#0E1311;
  color-scheme:dark;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);background:var(--achtergrond)}
body{margin:0;background:var(--achtergrond);color:var(--tekst);font-family:var(--font-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--r5)}
@media (max-width:720px){.wrap{padding:0 var(--r4)}}
.mono{font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--tekst-zacht)}
h1,h2,h3{font-weight:600;margin:0;letter-spacing:-.015em}
h2{font-size:clamp(30px,4vw,44px);line-height:1.1}
h3{font-size:20px;line-height:1.3}
p{margin:0}
.lead{font-size:clamp(18px,1.6vw,20px);color:var(--tekst-zacht);max-width:58ch}
section{position:relative;padding:var(--r7) 0}
@media (max-width:720px){section{padding:var(--r6) 0}}
.kop{display:flex;justify-content:space-between;align-items:end;gap:var(--r4);flex-wrap:wrap;margin-bottom:var(--r5)}
.kop .lead{margin-top:var(--r3)}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px/1 var(--font-sans);text-decoration:none;padding:16px 24px;border-radius:var(--hoek-m);border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn-primair{background:var(--knop);color:var(--knop-tekst)}
.btn-primair:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-tweede{color:var(--tekst);border-color:var(--tekst-zacht);background:transparent}
.btn-tweede:hover{border-color:var(--accent);color:var(--accent)}
.btn svg{width:16px;height:16px}

.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--knop);color:var(--knop-tekst);padding:12px 16px;border-radius:var(--hoek-m);font-weight:600;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
/* header */
header.top{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .3s,border-color .3s,transform .35s;border-bottom:1px solid transparent}
header.top.vast{background:color-mix(in srgb,var(--achtergrond) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--lijn)}
header.top.weg{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:var(--r4)}
.logo-h{height:26px;width:auto;color:var(--tekst)}
.nav ul{display:flex;gap:var(--r5);list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:500;font-size:15px;color:var(--tekst-zacht);transition:color .2s}
.nav ul a:hover,.nav ul a.actief{color:var(--tekst)}
.nav-rechts{display:flex;align-items:center;gap:var(--r3)}
.icoonknop{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--lijn);background:transparent;color:var(--tekst);cursor:pointer;transition:border-color .2s}
.icoonknop:hover{border-color:var(--accent)}
.icoonknop svg{width:18px;height:18px}
.zon{display:none}
:root[data-theme="dark"] .zon{display:block}:root[data-theme="dark"] .maan{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .zon{display:block}:root:not([data-theme="light"]) .maan{display:none}}
.menuknop{display:none}
@media (max-width:900px){
  .nav ul{position:fixed;inset:0;top:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--r4);padding:var(--r5);background:var(--achtergrond);transform:translateX(100%);transition:transform .45s cubic-bezier(.65,0,.25,1);z-index:-1}
  .nav ul a{font-size:34px;font-weight:600;color:var(--tekst)}
  body.menu-open .nav ul{transform:none}
  .menuknop{display:grid}
  .nav-rechts .btn{display:none}
}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:grid;align-items:end;padding:120px 0 var(--r5);overflow:hidden;isolation:isolate}
.scene{position:absolute;inset:0;z-index:-2;background:var(--scene-lucht);transition:background .4s}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.hero-video{opacity:0;transition:opacity 1.2s ease}
.hero-video.speelt{opacity:1}
.hero-sluier{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--achtergrond) 88%,transparent) 0%,color-mix(in srgb,var(--achtergrond) 55%,transparent) 45%,color-mix(in srgb,var(--achtergrond) 10%,transparent) 100%),linear-gradient(0deg,var(--achtergrond) 0%,transparent 35%),linear-gradient(180deg,color-mix(in srgb,var(--achtergrond) 70%,transparent) 0%,transparent 22%);transition:background .4s}
@media (max-width:900px){.hero-sluier{background:linear-gradient(0deg,var(--achtergrond) 8%,color-mix(in srgb,var(--achtergrond) 70%,transparent) 60%,color-mix(in srgb,var(--achtergrond) 35%,transparent) 100%)}}
.scene svg{position:absolute;left:-5%;width:110%;max-width:none;bottom:0;height:auto;will-change:transform}
.scene .laag path{transition:fill .4s}
.scene .mist-band{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,var(--achtergrond),transparent)}
.zon-bol{position:absolute;width:min(16vw,200px);aspect-ratio:1;border-radius:50%;right:18%;top:24%;background:var(--accent);opacity:.14}
.drift{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(-3%)}}
.hero-inhoud{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--r5);align-items:end}
.hero-logo{width:min(300px,62vw);color:var(--tekst);margin-bottom:var(--r5)}
.hero-logo .lijn{fill:none;stroke:currentColor;stroke-width:12;stroke-miterlimit:40;stroke-dasharray:var(--n) var(--n);stroke-dashoffset:var(--n)}
.hero-logo .a{animation:teken 1.6s cubic-bezier(.65,0,.25,1) .3s forwards}
.hero-logo .b{animation:teken .45s cubic-bezier(.4,0,.2,1) 1.7s forwards}
.hero-logo .c{animation:teken .5s cubic-bezier(.4,0,.2,1) 1.9s forwards}
.hero-logo .woord{fill:currentColor;opacity:0;animation:verschijn 1s ease 2.3s forwards}
@keyframes teken{to{stroke-dashoffset:0}}
@keyframes verschijn{to{opacity:1}}
.hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.05;max-width:16ch}
.hero .lead{margin-top:var(--r3)}
.hero-acties{display:flex;gap:var(--r3);flex-wrap:wrap;margin-top:var(--r5)}
.hero-onder{display:flex;justify-content:space-between;align-items:center;margin-top:var(--r6);padding-top:var(--r4);border-top:1px solid var(--lijn);gap:var(--r3);flex-wrap:wrap}
.scroll-hint{display:flex;align-items:center;gap:10px}
.scroll-hint i{width:1px;height:34px;background:var(--tekst-zacht);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(-100%);animation:val 2s ease-in-out infinite}
@keyframes val{60%,100%{transform:translateY(100%)}}
.hero-fade{opacity:0;transform:translateY(16px);animation:omhoog .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes omhoog{to{opacity:1;transform:none}}
@media (max-width:900px){.hero-inhoud{grid-template-columns:1fr}.hero-zij{display:none}}

/* vliegroute die meetekent met scrollen */
.route{position:absolute;top:100vh;left:0;width:100%;pointer-events:none;z-index:0}
.route path{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.35;vector-effect:non-scaling-stroke}
.route .drone{fill:var(--accent)}
@media (max-width:1380px){.route{display:none}}
main{position:relative}
main>section,main>.band{z-index:1}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.65,0,.25,1)}
.wipe.in{clip-path:inset(0 0 0 0)}

/* werk */
.filters{display:flex;gap:var(--r1);background:var(--vlak);border:1px solid var(--lijn);padding:4px;border-radius:999px}
.filters button{font:500 14px/1 var(--font-sans);color:var(--tekst-zacht);background:transparent;border:0;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.filters button[aria-pressed="true"]{background:var(--knop);color:var(--knop-tekst)}
.grid-werk{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--r5) var(--r4);align-items:start}
.project{grid-column:span 4;text-decoration:none;color:inherit;cursor:pointer;display:block;background:none;border:0;padding:0;text-align:left;font:inherit}
.project.groot{grid-column:span 8}
.project.half{grid-column:span 6}
.project .beeld{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--hoek-s);background:var(--vlak)}
.project.groot .beeld{aspect-ratio:16/10}
.project.staand .beeld{aspect-ratio:4/5.05}
.project .beeld svg,.project .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.project:hover .beeld svg,.project:hover .beeld img{transform:scale(1.05)}
.project .tag{position:absolute;left:var(--r3);top:var(--r3);background:color-mix(in srgb,var(--nacht) 70%,transparent);color:var(--mist);backdrop-filter:blur(6px);padding:6px 10px;border-radius:var(--hoek-m);font:400 12px/1 var(--font-mono)}
.project .speel{position:absolute;right:var(--r3);bottom:var(--r3);width:48px;height:48px;border-radius:50%;background:var(--mist);color:var(--nacht);display:grid;place-items:center;transform:scale(.85);opacity:.9;transition:transform .3s}
.project:hover .speel{transform:scale(1)}
.project .info{display:flex;justify-content:space-between;align-items:baseline;gap:var(--r3);margin-top:var(--r3)}
.project h3{font-size:19px}
.project.verborgen{display:none}
.project-leeg .beeld{display:grid;place-items:center;border:1px dashed var(--tekst-zacht);background:transparent;text-align:center;padding:var(--r4)}
.project-leeg .beeld p{color:var(--tekst-zacht);max-width:26ch}
@media (max-width:900px){.project,.project.groot,.project.half{grid-column:span 12}}

/* diensten */
.band{background:var(--vlak);border-block:1px solid var(--lijn);transition:background .4s}
.wissel{display:inline-flex;background:var(--achtergrond);border:1px solid var(--lijn);border-radius:999px;padding:4px;margin-bottom:var(--r5)}
.wissel button{font:600 15px/1 var(--font-sans);border:0;background:transparent;color:var(--tekst-zacht);padding:14px 24px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.wissel button[aria-selected="true"]{background:var(--knop);color:var(--knop-tekst)}
.diensten{display:none;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--hoek-m);overflow:hidden}
.diensten.actief{display:grid;animation:omhoog .6s cubic-bezier(.2,.7,.2,1)}
.dienst{background:var(--vlak);padding:var(--r5) var(--r4);display:flex;flex-direction:column;gap:var(--r3);min-height:270px;transition:background .3s}
.dienst:hover{background:var(--vlak-2)}
.dienst svg{width:34px;height:34px;color:var(--accent)}
.dienst p{color:var(--tekst-zacht);font-size:16px}
.dienst .mono{margin-top:auto}
.prijsregel{display:flex;justify-content:space-between;align-items:center;gap:var(--r4);flex-wrap:wrap;margin-top:var(--r5);padding:var(--r4);border-radius:var(--hoek-m);border:1px solid var(--lijn);background:var(--achtergrond)}
.prijsregel p{max-width:60ch}

/* werkwijze */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--r4);counter-reset:s;position:relative}
.stappen::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--lijn)}
.stap{position:relative;padding-top:var(--r6)}
.stap::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--achtergrond);border:1px solid var(--accent);color:var(--accent);font:400 14px/1 var(--font-mono)}
.stap p{color:var(--tekst-zacht);font-size:16px;margin-top:var(--r2)}
@media (max-width:900px){.stappen{grid-template-columns:1fr 1fr;row-gap:var(--r5)}.stappen::before{display:none}}
@media (max-width:520px){.stappen{grid-template-columns:1fr}}

/* over mij */
.over{display:grid;grid-template-columns:5fr 7fr;gap:var(--r6);align-items:start}
.portret{position:sticky;top:110px}
.portret .beeld{aspect-ratio:4/5;border-radius:var(--hoek-s);overflow:hidden;position:relative;background:var(--vlak)}
.portret .beeld svg{width:100%;height:100%}
.portret .beeld span{position:absolute;left:var(--r3);bottom:var(--r3);color:var(--mist);font:400 12px/1 var(--font-mono);background:color-mix(in srgb,var(--nacht) 70%,transparent);padding:6px 10px;border-radius:var(--hoek-m)}
.over-tekst p+p{margin-top:var(--r3)}
.over-tekst>p{color:var(--tekst-zacht)}
.over-tekst>p:first-of-type{color:var(--tekst);font-size:20px}
.tijdlijn{list-style:none;margin:var(--r5) 0 0;padding:0;border-left:1px solid var(--lijn)}
.tijdlijn li{position:relative;padding:0 0 var(--r4) var(--r4)}
.tijdlijn li::before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--achtergrond);border:1px solid var(--accent)}
.tijdlijn li.nu::before{background:var(--accent)}
.tijdlijn h3{font-size:17px}
.tijdlijn p{color:var(--tekst-zacht);font-size:15px;margin-top:4px}
.invullen{border-bottom:1px dashed var(--accent);color:var(--tekst)}
@media (max-width:900px){.over{grid-template-columns:1fr}.portret{position:static;max-width:420px}}

/* kit */
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r4)}
.item{border:1px solid var(--lijn);border-radius:var(--hoek-m);padding:var(--r4);display:flex;flex-direction:column;gap:var(--r3);background:var(--achtergrond);transition:border-color .3s,transform .3s}
.item:hover,.item.speelt{border-color:var(--accent);transform:translateY(-3px)}
.item svg{width:100%;height:110px;color:var(--tekst)}
.item svg .acc{color:var(--accent);stroke:var(--accent)}
.item p{color:var(--tekst-zacht);font-size:15px}
.item:hover .prop,.item.speelt .prop{animation:draai .25s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes draai{to{transform:rotate(360deg)}}
.item .tel{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.65,0,.25,1)}
.item:hover .tel,.item.speelt .tel{transform:rotate(-90deg)}
.item .lens{transition:fill .2s}
.item:hover .l1,.item.speelt .l1{animation:glans 1.8s ease .6s infinite}.item:hover .l2,.item.speelt .l2{animation:glans 1.8s ease .75s infinite}.item:hover .l3,.item.speelt .l3{animation:glans 1.8s ease .9s infinite}
@keyframes glans{0%,100%{fill:transparent}15%{fill:var(--accent)}35%{fill:transparent}}
.item .flits{opacity:0}
.item:hover .flits,.item.speelt .flits{animation:flits 1.4s ease-out infinite}
@keyframes flits{0%,8%{opacity:0}10%{opacity:1}30%,100%{opacity:0}}
.item .sluiter{transform-box:fill-box;transform-origin:center;transition:transform .3s}
.item:hover .sluiter,.item.speelt .sluiter{animation:sluiter 1.4s ease-in-out infinite}
@keyframes sluiter{0%,8%{transform:scale(1)}12%{transform:scale(.25)}22%,100%{transform:scale(1)}}

@media (max-width:900px){.kit{grid-template-columns:1fr}}
@media (max-width:520px){.kit{grid-template-columns:1fr}}


.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r4)}
.cert{border:1px solid var(--lijn);border-radius:var(--hoek-m);padding:var(--r4);display:flex;flex-direction:column;gap:var(--r2);background:var(--vlak)}
.cert-top{display:flex;justify-content:space-between;align-items:start;margin-bottom:var(--r2)}
.cert svg{width:36px;height:36px;color:var(--accent)}
.cert p{color:var(--tekst-zacht);font-size:15px;flex:1}
.status{display:inline-flex;align-items:center;gap:6px;font:400 12px/1 var(--font-mono);padding:6px 10px;border-radius:999px;border:1px solid var(--lijn)}
.status svg{width:11px;height:11px}
.status.behaald{background:var(--knop);color:var(--knop-tekst);border-color:transparent}
.status.bezig{color:var(--accent);border-color:var(--accent)}
.status.gepland{color:var(--tekst-zacht)}
@media (max-width:900px){.certs{grid-template-columns:1fr}}
@media (max-width:520px){.certs{grid-template-columns:1fr}}
/* contact */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:var(--r6)}
.contact-zij p{color:var(--tekst-zacht);margin-top:var(--r3)}
.contact-lijst{list-style:none;padding:0;margin:var(--r5) 0 0;display:grid;gap:var(--r3)}
.contact-lijst a{display:flex;gap:var(--r3);align-items:center;text-decoration:none;font-weight:500}
.contact-lijst svg{width:20px;height:20px;color:var(--accent)}
form{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--hoek-m);padding:var(--r5);display:grid;gap:var(--r4)}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:var(--r4)}
.veld{display:grid;gap:var(--r2)}
.veld.breed{grid-column:1/-1}
label{font-size:14px;font-weight:600}
label small{font-weight:400;color:var(--tekst-zacht)}
input,select,textarea{font:400 16px/1.4 var(--font-sans);color:var(--tekst);background:var(--achtergrond);border:1px solid var(--lijn);border-radius:var(--hoek-s);padding:14px 14px;width:100%;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{min-height:130px;resize:vertical}
.akkoord{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--tekst-zacht)}
.akkoord input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.akkoord a{color:var(--accent)}
.zakelijk-veld{display:none}
form[data-soort="zakelijk"] .zakelijk-veld{display:grid}
.form-voet{display:flex;justify-content:space-between;align-items:center;gap:var(--r3);flex-wrap:wrap}
.form-voet p{font-size:13px;color:var(--tekst-zacht);max-width:40ch}
.bedankt{display:none;text-align:center;padding:var(--r6) var(--r4)}
.bedankt svg{width:56px;height:56px;margin:0 auto var(--r3);color:var(--accent)}
form.verzonden>*:not(.bedankt){display:none}
form.verzonden .bedankt{display:block}
@media (max-width:900px){.contact{grid-template-columns:1fr}.velden{grid-template-columns:1fr}form{padding:var(--r4)}}

/* footer */
footer{border-top:1px solid var(--lijn);padding:var(--r6) 0 var(--r5)}
.voet{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--r5)}
.voet .logo-v{width:180px;color:var(--tekst)}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--r2)}
.voet a{text-decoration:none;color:var(--tekst-zacht)}
.voet a:hover{color:var(--tekst)}
.onderregel{display:flex;justify-content:space-between;gap:var(--r3);margin-top:var(--r6);flex-wrap:wrap}
@media (max-width:720px){.voet{grid-template-columns:1fr 1fr}.voet>div:first-child{grid-column:1/-1}}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-logo .lijn{stroke-dashoffset:0}.hero-logo .woord{opacity:1}
  .rv,.hero-fade{opacity:1;transform:none}.wipe{clip-path:none}
}

/* ===== WordPress-specifiek ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.project .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.project:hover .beeld img{transform:scale(1.05)}
a.project{display:block}
.portret .beeld img{width:100%;height:100%;object-fit:cover}
.film-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:3}
.formulier-melding{border-radius:var(--hoek-m);padding:var(--r3) var(--r4);margin-bottom:var(--r4);border:1px solid var(--accent);background:var(--achtergrond)}
.formulier-melding.fout{border-color:#C0533F}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* losse pagina's */
.pagina-hoofd{padding:calc(76px + var(--r6)) 0 var(--r5)}
.pagina-hoofd h1{font-size:clamp(34px,5vw,56px);line-height:1.05;max-width:20ch}
.inhoud{max-width:68ch;padding-bottom:var(--r7)}
.inhoud h2{font-size:24px;margin:var(--r5) 0 var(--r3)}
.inhoud h3{font-size:19px;margin:var(--r4) 0 var(--r2)}
.inhoud p,.inhoud li{color:var(--tekst-zacht)}
.inhoud p{margin:0 0 var(--r3)}
.inhoud a{color:var(--accent)}
/* projectpagina */
.project-hero{position:relative;min-height:72vh;display:grid;align-items:end;padding:120px 0 var(--r5);isolation:isolate;overflow:hidden}
.project-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;max-width:none}
.project-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--achtergrond) 0%,color-mix(in srgb,var(--achtergrond) 40%,transparent) 45%,color-mix(in srgb,var(--achtergrond) 20%,transparent) 100%)}
.project-hero h1{font-size:clamp(36px,6vw,72px);line-height:1;letter-spacing:-.02em}
.project-body{display:grid;grid-template-columns:2fr 1fr;gap:var(--r6);padding:var(--r5) 0 var(--r6)}
.project-body .meta{display:grid;gap:var(--r3);align-content:start;border-left:1px solid var(--lijn);padding-left:var(--r4)}
.project-body .meta dt{font:400 12px/1 var(--font-mono);color:var(--tekst-zacht)}
.project-body .meta dd{margin:4px 0 0;font-weight:500}
.video-blok{position:relative;aspect-ratio:16/9;border-radius:var(--hoek-s);overflow:hidden;background:var(--vlak);margin-bottom:var(--r5)}
.video-blok img{width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,19,17,.25);border:0;cursor:pointer;transition:background .3s;width:100%}
.yt-play span{width:84px;height:84px;border-radius:50%;background:var(--mist);color:var(--nacht);display:grid;place-items:center;transition:transform .3s}
.yt-play:hover span{transform:scale(1.08)}
.yt-melding{position:absolute;right:var(--r3);bottom:var(--r3);background:color-mix(in srgb,var(--nacht) 70%,transparent);color:var(--mist);padding:6px 10px;border-radius:var(--hoek-m);font:400 12px var(--font-mono);z-index:1}
.galerij{display:grid;grid-template-columns:1fr 1fr;gap:var(--r3);padding-bottom:var(--r7)}
.galerij img,.galerij video{width:100%;height:100%;object-fit:cover;border-radius:var(--hoek-s);background:var(--vlak)}
.galerij .pano{grid-column:1/-1}
.volgende-project{display:flex;justify-content:space-between;align-items:center;gap:var(--r4);flex-wrap:wrap;border-top:1px solid var(--lijn);padding:var(--r5) 0 var(--r7)}
@media (max-width:900px){.project-body{grid-template-columns:1fr}.project-body .meta{border-left:0;padding-left:0;border-top:1px solid var(--lijn);padding-top:var(--r4)}.galerij{grid-template-columns:1fr}}
/* films */
.films-kop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--r3);margin:var(--r6) 0 var(--r3);padding-top:var(--r4);border-top:1px solid var(--lijn)}
.films{display:grid;grid-template-columns:repeat(3,1fr) .55fr;gap:var(--r4)}
.film{position:relative;aspect-ratio:16/9;border:1px solid var(--lijn);border-radius:var(--hoek-s);overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:var(--mist);padding:0;background:radial-gradient(120% 90% at 20% 0%,#3E5A4B,#18201C 60%,#0E1311)}
.film.kort{aspect-ratio:auto;min-height:100%}
.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.film-speel{position:absolute;right:var(--r3);top:var(--r3);width:40px;height:40px;border-radius:50%;background:var(--mist);color:var(--nacht);display:grid;place-items:center;z-index:1;transition:transform .3s}
.film:hover .film-speel{transform:scale(1.1)}
.film-info{position:absolute;left:var(--r3);right:var(--r3);bottom:var(--r3);display:grid;gap:2px;z-index:1}
.film-info .mono{color:#A3AEA7;font-size:12px}
.film-info strong{font-size:17px}
@media (max-width:900px){.films{grid-template-columns:1fr 1fr}.film.kort{aspect-ratio:16/9}}

/* ===== mobiel ===== */
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body.menu-open{overflow:hidden}
body.menu-open header.top{backdrop-filter:none;-webkit-backdrop-filter:none;transform:none!important;background:var(--achtergrond)}
@media (max-width:900px){
  .nav ul{height:100vh;height:100dvh;padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
  .nav ul a{display:block;padding:6px 0}
}
@media (max-width:720px){
  .hero{padding-top:104px}
  .hero-logo{width:min(210px,56vw);margin-bottom:var(--r4)}
  .hero h1{font-size:34px}
  .hero-acties .btn{flex:1 1 auto;justify-content:center}
  .hero-onder{margin-top:var(--r5)}
}
/* ===== pauze ===== */
.pauze-pil{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--font-mono);letter-spacing:.04em;padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--achtergrond) 80%,transparent);border:1px solid var(--accent);color:var(--accent);margin-bottom:var(--r3)}
.pauze-pil i{width:8px;height:8px;border-radius:50%;background:#D9963A;display:inline-block}
.pauze-kaart{border:1px solid var(--accent);border-radius:var(--hoek-m);background:var(--achtergrond);padding:var(--r4);margin-bottom:var(--r4)}
.pauze-kaart h3{display:flex;align-items:center;gap:10px}
.pauze-kaart h3 i{width:10px;height:10px;border-radius:50%;background:#D9963A;display:inline-block}
.pauze-kaart p{color:var(--tekst-zacht);margin-top:var(--r2)}
.pauze-pil{text-decoration:none}