/*
Theme Name: MTW Media Vision
Description: One-pager thema voor MTW Media Vision
Version: 1.0
Text Domain: mtw
*/
:root{--bg:#10302c;--surface:#17403a;--mint:#97cfc1;--text:#f2efe8;--muted:#b9cdc8}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 "Segoe UI","Helvetica Neue",Arial,sans-serif}
img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3{font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0 0 .6em}
h2{font-size:clamp(2rem,5vw,3.4rem)}h3{font-size:1.3rem}
p{max-width:62ch;margin:0 0 1em;color:var(--muted)}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
section{padding:clamp(4rem,9vw,7rem) 0}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.btn{display:inline-block;background:var(--mint);color:var(--bg);font-weight:700;padding:.9rem 1.8rem;text-decoration:none;clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}
.btn:hover{background:var(--text)}
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--surface)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.site-header img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:1.5rem}.nav a:not(.btn){text-decoration:none;color:var(--muted)}.nav a:not(.btn):hover{color:var(--text)}
.nav .btn{padding:.55rem 1.2rem}
.bar{display:block;width:min(50%,380px);height:16px;background:var(--mint);clip-path:polygon(0 0,100% 0,96% 100%,0 80%);margin-bottom:1.6rem}
.hero h1{font-size:clamp(2.7rem,8.5vw,6.6rem);line-height:.95;letter-spacing:-.035em;font-weight:900;transform:skewX(-6deg);transform-origin:left;max-width:12ch}
.hero p{font-size:1.25rem;margin:1.5rem 0 2rem}
.grid{display:grid;gap:1.5rem}.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.dienst{border-left:4px solid var(--mint);padding-left:1.2rem}
.video{display:block;width:100%;border:0;padding:0;background:var(--surface);cursor:pointer;text-align:left;color:inherit;font:inherit}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 93%,0 100%);background:var(--surface)}
.thumb img,.thumb iframe{width:100%;height:100%;object-fit:cover;border:0}
.play{position:absolute;inset:0;display:grid;place-items:center}
.play span{width:68px;height:68px;background:var(--mint);clip-path:polygon(0 0,100% 50%,0 100%);transform:scale(.55)}
.vmeta{padding:.8rem 0 0}.vmeta strong{display:block}.vmeta small{color:var(--muted)}
.stappen{counter-reset:s;list-style:none;padding:0;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.stappen li{counter-increment:s;background:var(--surface);padding:1.5rem;clip-path:polygon(0 0,100% 0,100% 100%,4% 100%,0 96%)}
.stappen li::before{content:counter(s);display:block;color:var(--mint);font-size:2.4rem;font-weight:900;line-height:1}
.cta{background:var(--surface)}.cta h2{max-width:16ch}
.site-footer{padding:2rem 0;color:var(--muted);font-size:.95rem}
.page-head{padding-bottom:0}
@media(max-width:700px){.nav a:not(.btn){display:none}.site-header img{height:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* v1.1 */
:root{--sun:#f4b860}
.thumb{display:block}
.play{pointer-events:none}.play span{display:block}
.bar{background:var(--sun)}
.dienst{border-left-color:var(--sun)}
.hero .wrap{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1.15fr .85fr}
.portret{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}
.s-mint{background:var(--mint);color:var(--bg)}
.s-mint h2,.s-mint h3{color:var(--bg)}.s-mint>.wrap>p{color:#1d4a43}
.s-mint .stappen li{background:var(--bg);color:var(--text)}
.s-mint .stappen h3{color:var(--text)}.s-mint .stappen p{color:var(--muted)}
.s-mint .stappen li::before{color:var(--sun)}
.s-light{background:var(--text);color:var(--bg)}
.s-light h2{color:var(--bg)}.s-light p{color:#2c4a45}
.duo{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr 1.1fr}
.editfoto{width:100%;height:auto;clip-path:polygon(0 0,100% 0,100% 100%,6% 100%)}
.btn:hover{background:var(--sun)}
.cta{background:var(--surface);border-top:6px solid var(--sun)}
@media(max-width:800px){.hero .wrap,.duo{grid-template-columns:1fr}.portret{max-height:520px}}

/* v1.2 pakketten */
.pakket{position:relative;background:var(--surface);padding:2rem 1.6rem 1.6rem;clip-path:polygon(0 0,100% 0,100% 94%,94% 100%,0 100%)}
.pakket::before{content:"";position:absolute;left:0;top:0;width:45%;height:8px;background:var(--sun)}
.pakket h3{font-size:1.5rem}
.prijs{font-size:2rem;font-weight:900;line-height:1.1;color:var(--sun);margin:0 0 .8rem}.prijs small{font-size:1rem;font-weight:400;color:var(--muted)}
.pakket ul,.spelregels ul{padding-left:1.2rem;margin:0 0 1rem;color:var(--muted)}
.pakket li::marker,.spelregels li::marker{color:var(--mint)}
.spelregels{margin-top:3rem;max-width:62ch}.spelregels li{margin-bottom:.5rem}.spelregels .btn{margin-top:1rem}

/* v1.3 formulier */
.contact{display:grid;gap:3rem;grid-template-columns:1fr 1.1fr;align-items:start}
.formulier{display:grid;gap:1rem}
.formulier label{display:grid;gap:.35rem;font-weight:600}
.formulier input,.formulier textarea{width:100%;font:inherit;color:var(--text);background:var(--bg);border:2px solid var(--mint);border-radius:0;padding:.75rem .9rem}
.formulier input:focus,.formulier textarea:focus{outline:3px solid var(--sun);outline-offset:1px}
.rij{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.bijnaam{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.btn{border:0;cursor:pointer;font:inherit;font-weight:700;justify-self:start}
.privacy{font-size:.9rem;margin:0}.privacy a{color:var(--mint)}
.melding{padding:1rem 1.2rem;border-left:6px solid var(--mint);background:var(--bg);color:var(--text);margin:0 0 1rem}
.melding.fout{border-left-color:var(--sun)}
@media(max-width:800px){.contact,.rij{grid-template-columns:1fr}}

/* v1.4 footer */
.footer{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;align-items:baseline}
.gegevens{display:flex;flex-wrap:wrap;gap:.25rem 1.2rem;font-size:.85rem}
.gegevens a{color:var(--muted)}.gegevens a:hover{color:var(--text)}