/* ============================================================
   MKM Video Productions — websiteconcept 2026 (meerdere pagina's)
   Huisstijl uit MKM/Marketing/Brand_Assets: blauw = merk,
   oranje = actie, goud = premium. Donker is de basis.
   ============================================================ */
/* Inter, zelf gehost. Via Google Fonts gaat het IP-adres van elke bezoeker naar
   Google; onder de AVG is dat een doorgifte waar toestemming voor nodig is, en
   die vraagt de cookiemelding niet. Dit is één variabel bestand van 48 kB dat
   alle gewichten dekt. font-display:swap laat de tekst meteen zien in de
   systeemletter en wisselt zodra Inter binnen is. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/inter-var.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
:root{
  --bg:#0a0c0f; --panel:#13171c; --panel2:#181d24; --line:#232a33;
  --txt:#eef1f4; --muted:#9aa3ad;
  --accent:#007FBC; --cta:#ff5436; --gold:#ffd166;
  /* Het merkblauw is prachtig als vlak, maar als tekst op donker haalt het
     maar 3,8 tot 4,4 op de WCAG-schaal; de norm voor gewone tekst is 4,5.
     Daarom een tweede blauw dat alleen voor tekst en icoontjes wordt gebruikt:
     dezelfde kleurfamilie, 6,2 tot 7,2, ruim boven de norm. Vlakken, randen en
     vullingen houden gewoon --accent. */
  --accent-txt:#5EA4D3;
  --logo-light:#5EA4D3; --logo-mid:#3897CB;
  --radius:14px; --pill:999px; --maxw:1180px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--txt); font-family:var(--font);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
/* height:auto is hier geen detail. De width- en height-attributen op een <img>
   zetten ook de css-hoogte, en zolang die vaststaat negeert de browser elke
   aspect-ratio. Een blogbeeld van 1376x768 werd daardoor 768 pixels hoog in een
   kolom van 290 breed. Met height:auto rekent de browser de hoogte zelf uit en
   blijft de verhouding kloppen — zonder dat de attributen weg hoeven, want die
   voorkomen juist dat de tekst tijdens het laden verspringt. */
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.1}
p{margin:0}
.wrap{width:min(100% - 40px, var(--maxw)); margin-inline:auto}

.display{font-size:clamp(34px,6vw,72px); font-weight:900; letter-spacing:-.035em}
.h2{font-size:clamp(26px,3.6vw,42px)}
.h3{font-size:clamp(18px,1.9vw,22px)}
.lead{color:var(--muted); font-size:clamp(16px,1.5vw,19px); max-width:64ch}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-txt); display:inline-flex; align-items:center; gap:9px; margin-bottom:16px}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent); opacity:.7}
.eyebrow.is-cta{color:var(--cta)} .eyebrow.is-cta::before{background:var(--cta)}
.eyebrow.is-gold{color:var(--gold)} .eyebrow.is-gold::before{background:var(--gold)}

/* concept-balk */
.conceptbar{background:linear-gradient(90deg,rgba(255,84,54,.16),rgba(0,127,188,.14));
  border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); padding:9px 0; text-align:center}
.conceptbar strong{color:var(--txt)}

/* navigatie */
.nav{position:sticky; top:0; z-index:60; backdrop-filter:blur(14px); background:rgba(10,12,15,.72);
  border-bottom:1px solid transparent; transition:border-color .25s, background .25s, padding .25s; padding:14px 0}
.nav.is-stuck{border-bottom-color:var(--line); background:rgba(10,12,15,.94); padding:9px 0}
.nav .wrap{display:flex; align-items:center; gap:26px; position:relative}
.nav .logo img{height:26px; width:auto; transition:height .25s}
.nav.is-stuck .logo img{height:22px}
.navlinks{display:flex; gap:22px; margin-left:auto; align-items:center; font-size:15px}
.navlinks>a,.navlinks .drop>a{color:var(--muted); text-decoration:none; transition:color .18s; position:relative; white-space:nowrap}
.navlinks>a:hover,.navlinks .drop>a:hover,.navlinks a.is-active{color:var(--txt)}
.navlinks a.is-active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent)}
.drop{position:relative}
.drop>a::after{content:"▾"; font-size:11px; margin-left:6px; opacity:.7}
.dropmenu{position:absolute; top:calc(100% + 14px); left:-16px; min-width:290px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:9px; display:none;
  box-shadow:0 28px 60px -24px rgba(0,0,0,.9)}
.drop:hover .dropmenu,.drop.is-open .dropmenu{display:block}
.dropmenu a{display:block; padding:10px 13px; border-radius:10px; text-decoration:none; color:var(--muted);
  font-size:14.5px; transition:background .18s, color .18s}
.dropmenu a:hover{background:var(--panel2); color:var(--txt)}
.dropmenu a b{display:block; color:var(--txt); font-weight:600}
.dropmenu a span{font-size:13px; opacity:.75}
.navtoggle{display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:8px 12px; font-size:14px; cursor:pointer; font-family:inherit}

.btn{display:inline-flex; align-items:center; gap:9px; border-radius:var(--pill); padding:13px 24px;
  font-weight:700; font-size:15px; text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-family:inherit; transition:transform .18s, box-shadow .22s, background .2s, border-color .2s}
.btn-primary{background:var(--cta); color:#14060a; box-shadow:0 10px 30px -12px rgba(255,84,54,.75)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(255,84,54,.85)}
.btn-ghost{border-color:var(--line); color:var(--txt); background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--accent); transform:translateY(-2px)}
.btn-sm{padding:10px 18px; font-size:14px}

/* hero */
.hero{position:relative; padding:clamp(56px,9vw,120px) 0 clamp(44px,6vw,80px); overflow:hidden}
/* Een subpagina-hero eindigt vlak boven de eerste sectie, en die sectie heeft
   zelf al ruimte aan de bovenkant. Samen werd dat op een groot scherm zo'n
   driehonderd pixels niets. De onderruimte hier is daarom klein: de sectie
   eronder bepaalt de afstand. */
.hero.is-sub{padding:clamp(44px,6vw,80px) 0 clamp(8px,1vw,16px)}
.hero::before{content:""; position:absolute; inset:-30% 0 auto 0; height:120%;
  background:radial-gradient(58% 62% at 50% 0%, rgba(0,127,188,.26), transparent 70%); pointer-events:none}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg,var(--line) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(72% 60% at 50% 12%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(72% 60% at 50% 12%, #000 0%, transparent 78%)}
.hero .wrap{position:relative; z-index:2}
.hero h1 em{font-style:normal; background:linear-gradient(96deg,var(--logo-light),var(--accent) 55%,var(--logo-mid));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{margin-top:22px}
.herobtns{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.herometa{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.tag{border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:var(--pill);
  padding:7px 15px; font-size:13.5px}
.tag b{color:var(--txt); font-weight:600}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:18px}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--accent-txt)}
.crumbs span{opacity:.5; margin:0 8px}

/* klantenband */
.marquee{border-block:1px solid var(--line); background:var(--panel); padding:18px 0; overflow:hidden; position:relative}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg,var(--panel),transparent)}
.marquee::after{right:0; background:linear-gradient(270deg,var(--panel),transparent)}
.marquee-track{display:flex; align-items:center; gap:64px; width:max-content; animation:slide 66s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
/* Logo's in kleur, op ware hoogte. De breedtelimiet houdt brede wordmarks
   (Microtechniek, Simon Loos) in toom zonder de vierkante logo's klein te
   maken. Achttien logo's passen niet naast elkaar; de band schuift door. */
.marquee img{height:44px; width:auto; max-width:170px; object-fit:contain; display:block; flex:none}
.marquee span{font-weight:700; font-size:16px; letter-spacing:.06em; color:var(--muted); white-space:nowrap; opacity:.75}
@keyframes slide{to{transform:translateX(-50%)}}
@media (max-width:700px){
  .marquee{padding:14px 0}
  .marquee-track{gap:38px}
  .marquee img{height:35px; max-width:136px}
}

/* secties */
section{padding:clamp(56px,7vw,96px) 0; position:relative}
.sec-alt{background:var(--panel)}
.sec-head{max-width:760px; margin-bottom:42px}
.sec-head .lead{margin-top:14px}

/* kaarten */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  position:relative; overflow:hidden; transition:transform .25s, border-color .25s}
.sec-alt .card{background:var(--bg)}
.card:hover{transform:translateY(-4px); border-color:rgba(0,127,188,.55)}
.card::after{content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent); opacity:0; transition:opacity .25s}
.card:hover::after{opacity:1}
a.card{text-decoration:none; display:block}
.card .ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  background:rgba(0,127,188,.13); border:1px solid rgba(0,127,188,.35); color:var(--accent-txt)}
.card .ic svg{width:21px; height:21px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted); font-size:15.5px}
.card ul{margin:14px 0 0; padding:0; list-style:none; color:var(--muted); font-size:14.5px}
.card ul li{padding-left:20px; position:relative; margin-top:7px}
.card ul li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%;
  background:var(--accent); opacity:.75}
.card .more{display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-size:14.5px;
  font-weight:700; color:var(--accent-txt)}
a.card:hover .more{gap:11px}
.badge{position:absolute; top:18px; right:18px; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cta); border:1px solid rgba(255,84,54,.45);
  background:rgba(255,84,54,.1); border-radius:var(--pill); padding:4px 10px}

/* uitgelicht */
.spot{display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center}
.spot .visual{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel2);
  aspect-ratio:16/10; display:grid; place-items:center; text-align:center; padding:26px; position:relative; overflow:hidden}
.sec-alt .spot .visual{background:var(--bg)}
.spot .visual::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 70% at 50% 0%, rgba(0,127,188,.18), transparent 72%)}
.ph{position:relative; z-index:2; color:var(--muted); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700}
.ph small{display:block; margin-top:10px; letter-spacing:0; text-transform:none; font-weight:400; font-size:13.5px; opacity:.8}
.ph .dot{width:54px; height:54px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  margin:0 auto 16px; background:rgba(255,255,255,.02)}
.ph .dot svg{width:20px; height:20px; color:var(--accent-txt)}

/* doel-ingang: bezoeker kiest op probleem in plaats van op productnaam */
.doelen{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.doel{display:flex; flex-direction:column; gap:8px; text-decoration:none; padding:22px 24px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel2);
  transition:transform .25s, border-color .25s, background .25s}
.sec-alt .doel{background:var(--bg)}
.doel:hover{transform:translateY(-3px); border-color:rgba(0,127,188,.55)}
.doel b{font-size:17px; font-weight:800; letter-spacing:-.015em; line-height:1.3}
.doel span{color:var(--muted); font-size:14.5px; line-height:1.5}
.doel em{margin-top:auto; padding-top:12px; display:inline-flex; align-items:center; gap:7px;
  font-style:normal; font-size:13.5px; font-weight:700; color:var(--accent-txt); transition:gap .25s}
.doel:hover em{gap:11px}

/* afnamevorm: geen soort video, maar hoe je het inkoopt */
.afname{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel2);
  padding:clamp(26px,3.6vw,48px); position:relative; overflow:hidden}
.sec-alt .afname{background:var(--bg)}
.afname::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 90% at 100% 0%, rgba(255,84,54,.12), transparent 68%)}
.afname>*{position:relative; z-index:2}
.afnamelijst{margin:0; padding:0; list-style:none; color:var(--muted); font-size:15px}
.afnamelijst li{padding:13px 0 13px 24px; position:relative; border-top:1px solid var(--line)}
.afnamelijst li:first-child{border-top:none; padding-top:0}
.afnamelijst li::before{content:""; position:absolute; left:0; top:20px; width:7px; height:7px;
  border-radius:50%; background:var(--cta); opacity:.8}
.afnamelijst li:first-child::before{top:7px}

/* tabs */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px}
.tab{border:1px solid var(--line); background:var(--panel2); color:var(--muted); border-radius:var(--pill);
  padding:10px 20px; font-size:14.5px; font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit}
.sec-alt .tab{background:var(--bg)}
.tab:hover{color:var(--txt); border-color:var(--accent)}
.tab.is-on{background:var(--accent); border-color:var(--accent); color:#fff}
.tabpanel[hidden]{display:none}

/* staffel: afnamevorm onder de tabs, alle bedragen tegelijk zichtbaar */
.staffel{margin-top:38px; padding-top:32px; border-top:1px solid var(--line)}
.staffel .tabelwrap{overflow-x:auto; margin:0 0 22px}
.staffel table{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
.staffel th, .staffel td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
  color:var(--muted); white-space:nowrap}
.staffel thead th{color:var(--txt); font-weight:700}
.staffel tbody th{color:var(--txt); font-weight:600}
.staffel td.nu{color:var(--txt); font-weight:700}
.staffel ul{margin:0; padding-left:20px; color:var(--muted); font-size:15px}
.staffel li{margin-bottom:8px}

/* prijzen */
.price{background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  display:flex; flex-direction:column; transition:transform .25s, border-color .25s}
.sec-alt .price{background:var(--bg)}
.price:hover{transform:translateY(-4px); border-color:rgba(0,127,188,.5)}
.price.is-premium{border-color:rgba(255,209,102,.42); background:linear-gradient(180deg,rgba(255,209,102,.06),transparent 42%)}
.price .kicker{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.price.is-premium .kicker{color:var(--gold)}
.price .amount{font-size:32px; font-weight:900; letter-spacing:-.03em; margin:14px 0 4px}
.price .per{color:var(--muted); font-size:14px}
.price ul{list-style:none; padding:0; margin:20px 0 24px; color:var(--muted); font-size:14.5px}
.price ul li{padding-left:22px; position:relative; margin-top:9px}
.price ul li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent-txt); font-weight:800; font-size:13px}
.price.is-premium ul li::before{color:var(--gold)}
.price .btn{margin-top:auto; justify-content:center}

/* stappen */
.steps{counter-reset:s; display:grid; gap:2px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.step{display:grid; grid-template-columns:64px 1fr; gap:22px; padding:24px 26px; background:var(--panel2); transition:background .22s}
.sec-alt .step{background:var(--bg)}
.step:hover{background:var(--panel)}
.step .n{counter-increment:s; font-size:30px; font-weight:900; color:transparent;
  -webkit-text-stroke:1px var(--accent); letter-spacing:-.03em}
.step .n::before{content:"0" counter(s)}
.step .stapkop{font-size:18px; margin-bottom:6px}
.step p{color:var(--muted); font-size:15px}

/* cijfers */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stat{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--panel2)}
.sec-alt .stat{background:var(--bg)}
.stat b{display:block; font-size:clamp(26px,3.2vw,38px); font-weight:900; letter-spacing:-.03em}
.stat span{color:var(--muted); font-size:14.5px; display:block; margin-top:6px}

/* citaat */
.quote{border-left:3px solid var(--accent); padding:6px 0 6px 26px; margin-top:26px;
  font-size:clamp(17px,2vw,21px); font-weight:600; letter-spacing:-.01em}
.quote cite{display:block; margin-top:12px; font-size:14px; font-weight:400; color:var(--muted); font-style:normal}

/* werk */
.works{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
/* position:relative is nodig: het casebeeld erin staat absoluut met inset:0 en
   moet zich aan deze tegel vasthouden, niet aan de pagina. */
.work{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel2);
  aspect-ratio:16/9; display:grid; place-items:center; text-align:center; padding:20px;
  position:relative; transition:transform .25s, border-color .25s}
.sec-alt .work{background:var(--bg)}
.work:hover{transform:translateY(-4px); border-color:var(--accent)}
.work.is-wide{grid-column:span 2; aspect-ratio:32/9}
/* showreel staat los van het raster: volle breedte, gewone 16:9 zodat een
   normale videoexport erin past zonder bijsnijden */
.work.is-showreel{aspect-ratio:16/9}
/* Verticaal materiaal (socials) krijgt een staand vak. In een vak van 16:9
   zie je van een 9:16-video alleen een strook uit het midden. */
.work.is-portret{aspect-ratio:9/16}
.work.is-vierkant{aspect-ratio:1/1}

/* Pauzeknop op beeld dat vanzelf speelt. site.js zet deze knop erin; zonder
   javascript is er geen knop en blijft alles zoals het was. */
.heeft-videoknop{position:relative}
.videoknop{position:absolute; right:12px; bottom:12px; z-index:4;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; padding:0;
  border:1px solid rgba(238,241,244,.28); background:rgba(10,12,15,.62);
  color:var(--txt); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .2s, background .2s, border-color .2s, transform .2s}
.videoknop svg{width:16px; height:16px; fill:currentColor}
/* Zichtbaar zodra je met de muis in de buurt bent, en altijd zodra hij op
   pauze staat — anders lijkt het beeld kapot in plaats van gepauzeerd. */
.heeft-videoknop:hover .videoknop,
.videoknop:focus-visible,
.videoknop[aria-pressed="true"]{opacity:1}
.videoknop:hover{background:var(--cta); border-color:var(--cta); transform:scale(1.06)}
.videoknop:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Op een touchscreen bestaat hover niet, dus daar staat de knop altijd aan. */
@media (hover:none){.videoknop{opacity:1}}

/* beeld dat uit een project komt: vult de plek en linkt naar de case */
.beeldlink{position:absolute; inset:0; display:block; text-decoration:none; overflow:hidden}
.visual .beeldlink,.work .beeldlink{position:absolute}
.beeldlink img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.beeldlink:hover img{transform:scale(1.04)}
.beeldbij{position:absolute; left:0; right:0; bottom:0; padding:34px 20px 16px; font-size:13.5px;
  color:var(--muted); line-height:1.35;
  background:linear-gradient(transparent,rgba(10,12,15,.9) 62%)}
.beeldbij b{display:block; color:var(--txt); font-size:15px; font-weight:700; margin-bottom:2px}
/* Beeld dat rechtstreeks uit een mediamap komt. Video hoort hier net zo goed
   bij als foto: zonder deze regel staat een <video> op zijn eigen 1920 pixels
   binnen een vak van pakweg 1100, en dan zie je alleen het midden — het lijkt
   dan sterk ingezoomd terwijl er in werkelijkheid uit het kader wordt gelopen. */
.visual>img,.visual>video,.work>img,.work>video{position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; background:#05070a}
/* De showreel is het enige beeld dat helemaal te zien moet zijn: daar mag
   niets afgesneden worden, ook niet als het vak ooit een andere verhouding
   krijgt. Vandaar contain in plaats van cover. */
.work.is-showreel>video{object-fit:contain}
/* Staand of vierkant beeld in een liggende beeldplek: helemaal tonen in plaats
   van de zijkanten eraf snijden. De donkere ondergrond maakt van de randen een
   kader in plaats van een gat. */
.visual>.is-passend,.work>.is-passend{object-fit:contain; background:var(--bg)}

/* faq */
.faq{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.faq details{border-bottom:1px solid var(--line); background:var(--panel2)}
.sec-alt .faq details{background:var(--bg)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer; padding:20px 24px; font-weight:700; font-size:16.5px; list-style:none;
  display:flex; justify-content:space-between; gap:18px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent-txt); font-size:22px; font-weight:400; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 24px 22px; color:var(--muted); font-size:15.5px; max-width:80ch}

/* cta-band */
.ctaband{background:var(--panel); border-block:1px solid var(--line); text-align:center; position:relative; overflow:hidden}
.ctaband::before{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 50% 0%, rgba(255,84,54,.14), transparent 70%)}
.ctaband .wrap{position:relative; z-index:2}
.ctaband .lead{margin:16px auto 28px}

/* ------------------------------------------------------------ videoadvies --
   Het vrije tekstvak op de homepage. Eigen band met een eigen achtergrond, dus
   los van het afwisselende licht/donker van de secties eromheen. */
.adviesband{background:var(--panel); border-block:1px solid var(--line); position:relative; overflow:hidden}
.adviesband::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 90% at 15% 0%, rgba(0,127,188,.16), transparent 68%),
             radial-gradient(50% 80% at 92% 100%, rgba(255,84,54,.10), transparent 70%)}
.adviesband .wrap{position:relative; z-index:2}
.advies{display:grid; gap:18px}
.adv-form{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
  padding:clamp(20px,2.4vw,30px)}
.adv-label{display:block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px}
.adv-form textarea{width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--txt);
  border-radius:12px; padding:15px 16px; font:inherit; font-size:16px; line-height:1.55; resize:vertical;
  min-height:118px; transition:border-color .2s}
.adv-form textarea:focus{outline:none; border-color:var(--accent)}
.adv-form textarea::placeholder{color:#6f7883}
.adv-onder{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; flex-wrap:wrap}
.adv-teller{color:var(--muted); font-size:13.5px}
.adv-teller.is-krap{color:var(--gold)}
.adv-mini{color:var(--muted); font-size:12.5px; line-height:1.5; margin-top:14px; max-width:74ch}
.adv-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.adv-chip{background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--muted);
  border-radius:var(--pill); padding:7px 14px; font:inherit; font-size:13px; cursor:pointer;
  text-align:left; transition:border-color .2s, color .2s}
.adv-chip:hover{border-color:var(--accent); color:var(--txt)}
/* Onzichtbaar veld tegen bots. display:none slaan sommige bots over, zo niet. */
.valstrik{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* het antwoord */
.adv-uit{display:block}
.adv-wacht{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:15px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); padding:20px 24px}
.adv-wacht::before{content:""; width:17px; height:17px; border-radius:50%; flex:none;
  border:2px solid var(--line); border-top-color:var(--accent); animation:advdraai .8s linear infinite}
@keyframes advdraai{to{transform:rotate(360deg)}}
.adv-vat{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
  padding:clamp(20px,2.4vw,30px)}
.adv-vat.is-fout{border-color:rgba(255,84,54,.45)}
.adv-kop{font-size:16.5px; line-height:1.6}
.adv-kop b{color:var(--accent-txt); display:block; font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:10px}
.adv-lijst{display:grid; gap:12px; margin-top:20px}
.adv-kaart{border:1px solid var(--line); border-radius:12px; background:var(--panel2); padding:20px 22px}
.adv-kaart h3{font-size:18px; margin-bottom:10px}
.adv-kaart p{color:var(--muted); font-size:15px; line-height:1.6}
.adv-stap{margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:14.5px}
.adv-stap b{color:var(--txt); font-weight:700}
.adv-kaart .btn{margin-top:16px}
.adv-slot{margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--muted); font-size:14.5px}
.adv-slot a{color:var(--accent-txt); font-weight:700}

/* contact */
.contact{display:grid; grid-template-columns:1fr .9fr; gap:44px; align-items:start}
.field{margin-top:16px}
.field label{display:block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px}
.field input,.field textarea,.field select{width:100%; background:var(--bg); border:1px solid var(--line);
  border-radius:11px; color:var(--txt); padding:13px 15px; font-family:inherit; font-size:15px; transition:border-color .2s}
.sec-alt .field input,.sec-alt .field textarea,.sec-alt .field select{background:var(--panel2)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent)}
.contactlist{list-style:none; padding:0; margin:22px 0 0}
.contactlist li{display:flex; gap:13px; align-items:flex-start; margin-top:16px; color:var(--muted); font-size:15.5px}
.contactlist svg{width:18px; height:18px; color:var(--accent-txt); flex:0 0 auto; margin-top:3px}
.contactlist a{text-decoration:none; color:var(--txt)}
.contactlist a:hover{color:var(--accent-txt)}

/* footer */
footer{border-top:1px solid var(--line); padding:52px 0 34px; background:var(--bg)}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px}
.footgrid img{height:52px; width:auto; margin-bottom:16px}
.footgrid .footkop{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin:0 0 14px; font-weight:700}
.footgrid ul{list-style:none; padding:0; margin:0}
.footgrid li{margin-top:9px}
.footgrid a{text-decoration:none; color:var(--muted); font-size:14.5px; transition:color .18s}
.footgrid a:hover{color:var(--txt)}
.footgrid p{color:var(--muted); font-size:14.5px}
.footbar{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; margin-top:38px;
  padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13.5px}

/* scroll-reveal */
.rv{opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.is-in{opacity:1; transform:none}

@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .doelen{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .spot{grid-template-columns:1fr; gap:28px}
  .afname{grid-template-columns:1fr; gap:28px}
  .spot .visual{order:-1}
  .contact{grid-template-columns:1fr}
  .works{grid-template-columns:repeat(2,1fr)}
  .footgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .navlinks{display:none; position:absolute; top:calc(100% + 14px); left:0; right:0; flex-direction:column;
    gap:0; align-items:stretch; background:rgba(10,12,15,.99); border:1px solid var(--line);
    border-radius:var(--radius); padding:10px 16px 16px}
  .navlinks.is-open{display:flex}
  .navlinks>a,.navlinks .drop>a{padding:12px 0; border-bottom:1px solid var(--line); display:block}
  .navlinks .btn{margin-top:12px; justify-content:center; border-bottom:none}
  .dropmenu{position:static; display:none; border:none; box-shadow:none; padding:0 0 10px; min-width:0; background:none}
  .drop.is-open .dropmenu{display:block}
  .drop:hover .dropmenu{display:none}
  .drop.is-open .dropmenu{display:block}
  .navtoggle{display:block}
  .g2,.g3,.g4,.doelen,.stats,.works,.footgrid{grid-template-columns:1fr}
  .work.is-wide{grid-column:span 1; aspect-ratio:16/9}
  .step{grid-template-columns:44px 1fr; gap:14px; padding:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
  /* Het draaiende rondje staat hier stil, dus laat het geen halve ring zijn.
     De tekst ernaast zegt al dat er gewacht wordt. */
  .adv-wacht::before{border-top-color:var(--line)}
}

/* ============================================================
   Formulier: verplichte velden, akkoordvinkje, meldingen
   ============================================================ */
.verplicht{color:var(--cta)}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown){border-color:rgba(255,84,54,.6)}

.akkoord{display:flex; gap:11px; align-items:flex-start; margin-top:20px;
  font-size:14px; color:var(--muted); line-height:1.5; cursor:pointer}
.akkoord input{margin-top:3px; flex:0 0 auto; width:17px; height:17px; accent-color:var(--accent-txt)}
.akkoord a{color:var(--accent-txt)}

/* Spamval: onzichtbaar voor mensen, wel invulbaar voor bots. Bewust niet
   display:none, want sommige bots slaan verborgen velden over. */
.honingpot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.formmelding{border-radius:11px; padding:13px 15px; font-size:14.5px; line-height:1.5;
  margin-bottom:20px; border:1px solid}
.formmelding.is-goed{background:rgba(0,127,188,.12); border-color:rgba(0,127,188,.5); color:var(--txt)}
.formmelding.is-fout{background:rgba(255,84,54,.11); border-color:rgba(255,84,54,.5); color:var(--txt)}

/* ============================================================
   Cookiemelding
   ============================================================ */
.cookiebanner{position:fixed; inset:auto 0 0 0; z-index:120; padding:0 20px 20px;
  display:flex; justify-content:center; pointer-events:none}
.cookiebanner[hidden]{display:none}
.cookiekaart{pointer-events:auto; width:min(100%, 640px); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.55); animation:cookie-in .3s ease both}
@keyframes cookie-in{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.cookiekaart h2{font-size:19px; margin-bottom:10px}
.cookiekaart p{color:var(--muted); font-size:14.5px; line-height:1.55}

.cookiekeuzes{margin-top:18px; display:grid; gap:12px}
.cookiekeuzes[hidden]{display:none}
.cookiekeuze{display:flex; gap:12px; align-items:flex-start; background:var(--panel2);
  border:1px solid var(--line); border-radius:11px; padding:13px 15px; cursor:pointer}
.cookiekeuze input{margin-top:3px; flex:0 0 auto; width:17px; height:17px; accent-color:var(--accent-txt)}
.cookiekeuze input:disabled{opacity:.55; cursor:not-allowed}
.cookiekeuze b{display:block; font-size:14.5px; font-weight:700}
.cookiekeuze small{display:block; color:var(--muted); font-size:13px; line-height:1.5; margin-top:3px}

.cookieknoppen{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.cookieknoppen .btn{flex:1 1 auto; justify-content:center; font-size:14px; padding:11px 16px}
.cookieknoppen .btn[hidden]{display:none}
.cookievoet{margin-top:15px; font-size:13px}
.cookievoet a{color:var(--accent-txt)}

/* knop in de footer om de keuze terug te draaien */
.footlinks{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center}
.footlinks a, .cookielink{color:var(--muted); font-size:13px; text-decoration:none}
.footlinks a:hover, .cookielink:hover{color:var(--txt)}
.cookielink{background:none; border:0; padding:0; font:inherit; font-size:13px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px}

/* plek van een externe video zolang er geen toestemming is */
.mediaslot{display:grid; place-items:center; gap:13px; text-align:center; padding:34px 22px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius)}
.mediaslot p{color:var(--muted); font-size:14px; max-width:44ch}

@media (max-width:560px){
  .cookiebanner{padding:0 12px 12px}
  .cookiekaart{padding:22px 19px 18px}
  .cookieknoppen .btn{flex:1 1 100%}
}

/* ============================================================
   Toegankelijkheid: overslaan-link en zichtbare focus
   ============================================================ */
/* Zonder deze link moet iemand die met het toetsenbord of een screenreader
   werkt op elke pagina eerst door de hele navigatie heen. Hij staat buiten
   beeld tot je hem met Tab bereikt. */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--cta); color:#fff;
  padding:12px 20px; border-radius:0 0 10px 0; font-weight:700; text-decoration:none}
.skip:focus{left:0}

/* De browserstandaard is op een donkere achtergrond nauwelijks te zien. */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}

/* ============================================================
   Feitenblok onder de kop van een dienstpagina
   ============================================================ */
/* Zoekmachines en AI-antwoordmachines lezen per passage. De eerste alinea's
   moeten de vraag dus beantwoorden in plaats van er naartoe te werken. */
.feiten{margin-top:34px; background:var(--panel2); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 26px; max-width:62ch}
.feiten b{display:block; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-txt); margin-bottom:12px}
.feiten ul{margin:0; padding-left:20px; color:#d7dde4}
.feiten li{margin-bottom:8px; font-size:15.5px}
.feiten li:last-child{margin-bottom:0}

/* ============================================================
   Klantcitaten
   ============================================================ */
.tkaarten{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.tkaart{position:relative; margin:0; background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 26px 24px; display:flex; flex-direction:column; gap:18px}
.tkaart blockquote{margin:0; color:#d7dde4; font-size:16.5px; line-height:1.62}
.tkaart blockquote::before{content:"\201C"; color:var(--accent-txt); font-size:44px; line-height:0;
  vertical-align:-14px; margin-right:4px}
.tkaart figcaption{display:flex; align-items:center; gap:13px; margin-top:auto}
.tavatar{width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none;
  display:grid; place-items:center; background:var(--panel);
  border:1px solid var(--line)}
.tavatar img{width:100%; height:100%; object-fit:cover}
.tavatar .init{font-size:14px; font-weight:800; letter-spacing:.02em; color:var(--accent-txt)}
.twie{display:flex; flex-direction:column; line-height:1.35}
.twie b{font-size:15px}
.twie small{color:var(--muted); font-size:13.5px}
.tgedaan{display:block; border-top:1px solid var(--line); padding-top:14px; color:var(--muted);
  font-size:13.5px}
.tlabel{position:absolute; top:14px; right:16px; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:800; color:var(--gold);
  border:1px solid rgba(255,209,102,.4); background:rgba(255,209,102,.1);
  border-radius:var(--pill); padding:4px 10px}

/* ----------------------------------------------- videorij op dienstpagina ---
   Op een dienstpagina is video het bewijsmateriaal. Alles even groot, alles
   16:9, niets ertussen dat niet beweegt: één rustig raster waarin de inhoud
   het verschil maakt in plaats van het formaat. */
.filmrij{display:grid; gap:18px}
.filmrij + .filmrij{margin-top:18px}
/* Elke vorm zijn eigen rij en zijn eigen tegelbreedte. Een staande video mag
   smaller: op dezelfde breedte als een liggende wordt hij belachelijk hoog. */
.filmrij.is-liggend{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.filmrij.is-vierkant{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.filmrij.is-staand{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.filmrij.is-liggend .filmtegel{aspect-ratio:16/9}
.filmrij.is-vierkant .filmtegel{aspect-ratio:1/1}
.filmrij.is-staand .filmtegel{aspect-ratio:9/16}
/* Terugvalrij met foto's houdt de oude, brede tegels. */
.filmrij:not([class*="is-"]){grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.filmtegel{position:relative; display:block; width:100%; padding:0; margin:0;
  aspect-ratio:16/9; overflow:hidden; cursor:pointer; font-family:inherit; text-align:left;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel2);
  transition:transform .22s, border-color .22s, box-shadow .22s}
.filmtegel.is-portret{aspect-ratio:9/16}
.filmtegel.is-vierkant{aspect-ratio:1/1}
/* De showreel op volle breedte: dezelfde tegel, groter uitgevoerd. */
.filmtegel.is-showreel{aspect-ratio:16/9; border-radius:var(--radius)}
.filmtegel.is-showreel .filmspeel{width:84px; height:84px}
.filmtegel.is-showreel .filmspeel svg{width:30px; height:30px}
.filmtegel.is-showreel .filmduur{right:16px; top:16px; padding:5px 14px; font-size:13px}
/* Foto-terugval: geen afspeelknop, wel dezelfde maat en hetzelfde gedrag. */
.filmtegel.is-stil{cursor:zoom-in}
.filmtegel>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s, opacity .3s}
.filmtegel:hover{transform:translateY(-4px); border-color:var(--accent);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.9)}
.filmtegel:hover>img{transform:scale(1.04); opacity:.72}
.filmtegel:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* Afspeelknop in het midden: het duidelijkste teken dat dit een video is. */
.filmspeel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,127,188,.9); color:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.8); transition:transform .22s, background .22s}
.filmspeel svg{width:22px; height:22px; margin-left:3px}
.filmtegel:hover .filmspeel{background:var(--cta); transform:translate(-50%,-50%) scale(1.09)}

.filmduur{position:absolute; right:12px; top:12px; z-index:2;
  background:rgba(10,12,15,.78); border:1px solid var(--line); border-radius:var(--pill);
  padding:3px 11px; font-size:12px; font-weight:700; color:var(--txt);
  font-variant-numeric:tabular-nums; backdrop-filter:blur(8px)}

/* Klantnaam onderaan, op een verloop zodat het leesbaar blijft op elk beeld. */
.filmnaam{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:36px 16px 14px; font-size:13px; color:var(--muted); line-height:1.35;
  background:linear-gradient(transparent,rgba(10,12,15,.92) 62%)}
.filmnaam b{display:block; color:var(--txt); font-size:15px; font-weight:700; margin-bottom:1px}

.filmrij.is-staand .filmspeel{width:50px; height:50px}
.filmrij.is-staand .filmspeel svg{width:18px; height:18px}
.filmrij.is-staand .filmnaam{padding:30px 12px 12px; font-size:12px}
.filmrij.is-staand .filmnaam b{font-size:13.5px}

@media (max-width:640px){
  .filmrij.is-liggend{grid-template-columns:1fr}
  .filmrij.is-vierkant,.filmrij.is-staand{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------- vergroten ---
   Eén beeld schermvullend, met een donkere laag eronder. Dicht met de knop,
   met Escape of door naast het beeld te klikken. */
.lichtbak{position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,56px);
  background:rgba(6,8,11,.92); backdrop-filter:blur(10px)}
.lichtbak[open],.lichtbak.is-open{display:flex}
.lichtbak img,.lichtbak video{max-width:100%; max-height:100%;
  width:auto; height:auto; border-radius:var(--radius); background:#05070a;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.lichtbak-dicht{position:absolute; right:18px; top:18px; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--line); background:var(--panel);
  color:var(--txt); font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center; font-family:inherit}
.lichtbak-dicht:hover{background:var(--cta); border-color:var(--cta)}
.lichtbak-dicht:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

@media (max-width:860px){
  .mediarij{grid-template-columns:repeat(2,1fr)}
  .mediarij>.work,.mediarij>.work.is-video{grid-column:span 1}
  .mediarij>.work.is-video:not(.is-portret):not(.is-vierkant){grid-column:span 2}
}