/* ============================================================
   Muviews  |  livestream, broadcast & AV-facilitatie
   Palet: studio bij nacht. Koel antraciet met tungsten-amber.
   ============================================================ */

/* ---------- de letters ----------
   Deze staan in de map lettertype/ en worden meegeleverd met de site.
   Daarvoor leunde het ontwerp op Futura, en die heeft bijna niemand
   staan, dus zag negen van de tien bezoekers de standaardletter van
   hun eigen computer. Jost is de vrije tweelingzus van Futura en
   wordt nu altijd geladen, dus iedereen ziet hetzelfde. */
@font-face{font-family:"Jost";src:url("lettertype/jost-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("lettertype/jost-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("lettertype/jost-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("lettertype/jost-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("lettertype/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("lettertype/plexmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Tenor Sans";src:url("lettertype/tenorsans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#0A0E12;
  --ink-2:#0E141A;
  --panel:#131B22;
  --panel-2:#1A242D;
  --line:#26333D;
  --line-2:#35434F;
  --text:#E9EFF3;
  --text-2:#A3B1BC;
  --text-3:#76848F;
  --amber:#F2B04A;
  --amber-2:#FFC96B;
  --amber-ghost:rgba(242,176,74,.12);
  --live:#FF4F4F;
  --ok:#5BC08F;
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:20px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --display:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --body:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --mono:"Plex Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* kopbalk en voettekst. Aviano Sans als de bezoeker hem zelf heeft,
     anders Tenor Sans, dat dezelfde brede Romeinse letterbouw heeft en
     nu wel wordt meegeleverd. */
  --titel:"Aviano Sans","AvianoSans","Tenor Sans","Julius Sans One",var(--display);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:17.5px;
  line-height:1.68;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,1.25rem + 3.4vw,3.9rem);font-weight:700;letter-spacing:-.022em}
h2{font-size:clamp(1.6rem,1.05rem + 1.9vw,2.5rem);font-weight:600;letter-spacing:-.016em}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.006em}
.kop-klein{font-size:1.18rem;font-weight:600;letter-spacing:-.006em}
.card h2,.step h2{letter-spacing:-.006em}
p{margin:0}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--line)}
.section.flush{border-top:0}
.stack{display:flex;flex-direction:column;gap:18px}
.stack-s{display:flex;flex-direction:column;gap:10px}
.lede{color:var(--text-2);font-size:1.08rem;max-width:62ch}
.muted{color:var(--text-2)}
.tiny{font-size:.88rem;color:var(--text-3)}

.eyebrow{
  font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin:0 0 14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--amber);display:block}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:.95rem;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--amber);color:#1A1204}
.btn-primary:hover{background:var(--amber-2)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-sm{padding:9px 16px;font-size:.87rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:rgba(10,14,18,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand-mark{height:38px;width:auto;display:block;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.brand-name{font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:.14em}
.brand-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);display:block;margin-top:-2px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  font-family:var(--display);font-weight:600;font-size:.94rem;white-space:nowrap;
  text-decoration:none;color:var(--text-2);padding:8px 11px;border-radius:999px;
}
.nav a:hover{color:var(--text);background:var(--panel)}
.nav a[aria-current="page"]{color:var(--text);background:var(--panel-2)}
.header-cta{display:inline-flex;white-space:nowrap}
.burger{
  display:none;background:var(--panel);border:1px solid var(--line-2);color:var(--text);
  width:42px;height:42px;border-radius:11px;cursor:pointer;align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor}
.burger span::before{top:-5px}
.burger span::after{top:5px}

/* ---------- pagina's ---------- */
.page{display:none}
.page.is-active{display:block}

/* ---------- hero ---------- */
.hero{padding-block:clamp(42px,5vw,78px) clamp(48px,6vw,88px);position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:70%;pointer-events:none;
  background:radial-gradient(60% 60% at 70% 40%,rgba(242,176,74,.13),transparent 70%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,58px);align-items:center;position:relative;z-index:1}
.hero h1 span{color:var(--amber)}
.hero .lede{font-size:1.15rem}

.spec-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:34px}
.spec{padding:16px 12px 0;border-right:1px solid var(--line)}
.spec:first-child{padding-left:0}
.spec:last-child{border-right:0}
.spec b{display:block;font-family:var(--display);font-size:clamp(1.1rem,.85rem + .65vw,1.38rem);font-weight:600;color:var(--text);text-wrap:balance;letter-spacing:-.01em}
.spec small{font-family:var(--display);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);line-height:1.5;display:block}

/* ---------- monitorwand ---------- */
.wall{display:grid;grid-template-columns:1fr 168px;grid-template-rows:auto auto;gap:12px;align-items:stretch}
.mon{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);padding:10px;display:flex;flex-direction:column;gap:8px}
.mon-pgm{grid-column:1;grid-row:1}
/* het PGM-scherm groeit mee tot het paneel even hoog is als de shortskolom */
.mon-pgm .screen{flex:1 1 auto;min-height:0}
/* het beeld staat midden in het scherm en wordt niet afgesneden */
.mon-pgm .screen{display:flex;align-items:center;justify-content:center;background:#000}
.mon-pgm .screen iframe,.mon-pgm .screen video{
  position:absolute;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:auto;max-width:100%;max-height:100%;aspect-ratio:16/9;object-fit:contain;
}
.mon-pgm .screen img{object-fit:contain;background:#000}
.mon-vert{grid-column:2;grid-row:1;align-self:start}
.mon-vert .screen{aspect-ratio:9/16;width:100%;flex:none;min-height:0}
.mon-row{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mon-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mon-label{font-family:var(--display);font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.tally{
  font-family:var(--display);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--live);padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:6px;
}
.tally i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.6s steps(1,end) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.25}}
.thumb{display:block;position:relative}
.screen{display:block;border-radius:var(--radius-s);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.ar-16x9{aspect-ratio:16/9}
.ar-9x16{aspect-ratio:9/16}
.ar-1x1{aspect-ratio:1/1}
.ar-4x5{aspect-ratio:4/5}
.screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
}
.sc-a{background:linear-gradient(135deg,#1D3A4E 0%,#2E5A6B 45%,#8C6A3A 100%)}
.sc-b{background:linear-gradient(160deg,#3A2438 0%,#6B3B4A 60%,#C4823F 100%)}
.sc-c{background:linear-gradient(140deg,#182A33 0%,#2C4A42 55%,#5E7A4A 100%)}
.sc-d{background:linear-gradient(200deg,#231B33 0%,#43365C 50%,#9A6B8A 100%)}
.sc-e{background:linear-gradient(120deg,#0F2430 0%,#26505C 60%,#D1A05A 100%)}
.sc-f{background:linear-gradient(170deg,#2B1F18 0%,#5C3B24 55%,#B98A4A 100%)}
.mon-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tc{font-family:var(--mono);font-size:.82rem;color:var(--amber);font-variant-numeric:tabular-nums}
.meters{display:flex;align-items:flex-end;gap:3px;height:16px}
.meters i{width:3px;background:var(--ok);border-radius:1px;animation:vu 1.1s ease-in-out infinite alternate}
.meters i:nth-child(2){animation-delay:.12s}
.meters i:nth-child(3){animation-delay:.26s}
.meters i:nth-child(4){animation-delay:.05s}
.meters i:nth-child(5){animation-delay:.33s}
.meters i:nth-child(6){animation-delay:.18s}
.meters i:nth-child(7){animation-delay:.41s}
@keyframes vu{from{height:3px}to{height:16px}}

/* ---------- definitie ---------- */
.define{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:start}
.define-quote{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem);line-height:1.3;letter-spacing:-.01em}
.define-quote em{color:var(--amber);font-style:normal}

/* ---------- dienstenraster ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:22px;display:flex;flex-direction:column;gap:11px;
}
.card h3,.card h2{font-size:1.08rem}
.card p{color:var(--text-2);font-size:.97rem}
.card .price{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.82rem;color:var(--text-3)}
.card .price b{color:var(--amber);font-weight:500}
.icon-slot{
  width:38px;height:38px;border-radius:10px;background:var(--amber-ghost);color:var(--amber);
  display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
}

/* ---------- formaten ---------- */
.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end}
.format{display:flex;flex-direction:column;gap:10px}
.format .box{
  border:1px dashed var(--line-2);border-radius:var(--radius-s);display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);max-width:100%;width:100%;
}
.format .box span{font-family:var(--mono);font-size:.78rem;color:var(--amber)}
.format b{font-size:.95rem}
.format small{color:var(--text-2);font-size:.88rem;line-height:1.45;display:block}

/* ---------- stappen ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:22px 22px 0 0;border-top:2px solid var(--line);margin-right:20px;position:relative}
.step:last-child{margin-right:0}
.step-n{font-family:var(--mono);font-size:.74rem;color:var(--amber);letter-spacing:.12em;display:block;margin-bottom:8px}
.step h3,.step h2{font-size:1.02rem;margin-bottom:6px}
.step p{color:var(--text-2);font-size:.95rem}

/* ---------- klanten ---------- */
.clients{display:flex;flex-wrap:wrap;gap:10px}
.client{
  border:1px solid var(--line);border-radius:999px;padding:9px 17px;
  font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--text-2);
}

/* ---------- reviews ---------- */
.quote{
  background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--amber);
  border-radius:var(--radius-m);padding:24px;display:flex;flex-direction:column;gap:14px;
}
.quote p{font-size:1.02rem;line-height:1.55}
.quote footer{display:flex;align-items:center;gap:11px;margin-top:auto}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,#2C3B47,#1A242D);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;color:var(--text-2)}
.quote cite{font-style:normal;font-weight:600;font-size:.94rem;display:block}
.quote cite small{display:block;font-weight:400;color:var(--text-3);font-size:.84rem}
.chip-demo{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-family:var(--display);font-weight:500;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);border:1px dashed var(--line-2);border-radius:5px;padding:3px 8px;
}

/* ---------- cta-band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius-l);
  padding:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
}
.cta-band h2{max-width:20ch}

/* ---------- tarieven ---------- */
.rates{border-top:1px solid var(--line)}
.rate{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.rate b{font-weight:600;font-size:1rem}
.rate .dots{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-4px)}
.rate .amt{font-family:var(--mono);font-size:.95rem;color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap}
.rate small{display:block;color:var(--text-3);font-size:.85rem;font-family:var(--body)}

/* ---------- dienstdetail ---------- */
.svc{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,3vw,44px);padding-block:36px;border-top:1px solid var(--line)}
.svc ul{margin:0;padding-left:1.1em;color:var(--text-2);font-size:.98rem}
.svc li{margin-bottom:5px}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:4px 9px}
.tag.amber{color:var(--amber);border-color:rgba(242,176,74,.35);background:var(--amber-ghost)}

/* ---------- OTT ---------- */
.ott-hero{
  background:
    radial-gradient(70% 120% at 15% 0%,rgba(242,176,74,.16),transparent 60%),
    linear-gradient(180deg,var(--ink-2),var(--ink));
  border-bottom:1px solid var(--line);
  padding-block:clamp(40px,5vw,72px);
}
.live-feature{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;align-items:stretch}
.player{
  position:relative;border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line-2);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.player .overlay{position:relative;z-index:2;padding:20px;background:linear-gradient(180deg,transparent,rgba(5,8,11,.9))}
.player .bg{position:absolute;inset:0;z-index:0}
.player .bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.play-btn{
  position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(10,14,18,.6);border:1px solid rgba(255,255,255,.35);
  display:grid;place-items:center;backdrop-filter:blur(3px);
}
.play-btn::after{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.badge-live{position:absolute;z-index:3;top:14px;left:14px}
.badge-dur{
  position:absolute;z-index:3;bottom:10px;right:10px;font-family:var(--mono);font-size:.7rem;
  background:rgba(5,8,11,.78);border-radius:4px;padding:2px 6px;color:#E9EFF3;font-variant-numeric:tabular-nums;
}
.upnext{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px;display:flex;flex-direction:column;gap:14px}
.upnext-row{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.upnext-row:last-child{border-bottom:0;padding-bottom:0}
.upnext-row .thumb{width:74px;flex:none;border-radius:6px;overflow:hidden;position:relative}
.upnext-row b{display:block;font-size:.93rem;font-weight:600;line-height:1.3}
.upnext-row small{font-family:var(--mono);font-size:.7rem;color:var(--text-3)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filter{
  font-family:var(--display);font-weight:600;font-size:.88rem;
  background:var(--panel);border:1px solid var(--line);color:var(--text-2);
  padding:8px 15px;border-radius:999px;cursor:pointer;
}
.filter:hover{color:var(--text);border-color:var(--line-2)}
.filter[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#1A1204}

.vod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vod{display:flex;flex-direction:column;gap:9px;text-decoration:none}
.vod .thumb{position:relative;border-radius:var(--radius-s);overflow:hidden;border:1px solid var(--line)}
.vod .thumb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.vod b{font-size:.97rem;font-weight:600;line-height:1.35}
.vod .meta{font-family:var(--mono);font-size:.71rem;color:var(--text-3);letter-spacing:.04em}
a.vod:hover .thumb{border-color:var(--amber)}
a.vod:hover b{color:var(--amber)}

.rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.rail .vod{width:168px;flex:none;scroll-snap-align:start}

.screens-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.screen-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px;display:flex;flex-direction:column;gap:7px}
.screen-card b{font-size:.98rem}
.screen-card small{color:var(--text-2);font-size:.88rem;line-height:1.45}

/* ---------- over ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,56px);align-items:start}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden}
.fact{background:var(--panel);padding:20px}
.fact b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--amber)}
.fact small{font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.value{padding:20px 20px 0 0;margin-right:20px;border-top:1px solid var(--line)}
.value:last-child{margin-right:0}
.value h3{font-size:1rem;margin-bottom:6px}
.value p{color:var(--text-2);font-size:.95rem}
.datalist{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.95rem}
.datalist dt{font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);padding-top:3px}
.datalist dd{margin:0}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);align-items:start}
form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-l);padding:clamp(20px,3vw,32px)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-family:var(--display);font-weight:600;font-size:.9rem}
.field label span{color:var(--amber)}
.field input,.field select,.field textarea{
  background:var(--ink-2);border:1px solid var(--line-2);color:var(--text);
  border-radius:10px;padding:12px 14px;font-family:var(--body);font-size:1rem;width:100%;
}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field .hint{font-size:.82rem;color:var(--text-3)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--live)}
.err-msg{display:none;font-size:.84rem;color:var(--live)}
.field.err .err-msg{display:block}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--text-2);margin-bottom:18px}
.check input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--amber)}
.form-done{
  border:1px solid var(--ok);background:rgba(91,192,143,.08);border-radius:var(--radius-m);
  padding:22px;display:flex;flex-direction:column;gap:14px;
}
.form-done pre{
  font-family:var(--mono);font-size:.82rem;white-space:pre-wrap;word-break:break-word;
  background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:14px;margin:0;color:var(--text-2);
  max-height:230px;overflow:auto;
}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-l);padding:26px;display:flex;flex-direction:column;gap:18px}
.contact-line{display:flex;gap:13px;align-items:flex-start}
.contact-line .icon-slot{width:34px;height:34px;flex:none}
.contact-line b{display:block;font-size:.97rem}
.contact-line a{color:var(--amber);text-decoration:none}
.contact-line a:hover{text-decoration:underline}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber);font-family:var(--mono)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--text-2);font-size:.97rem;margin-top:10px;max-width:70ch}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--ink-2);padding-block:46px 30px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.footer-grid h4,.footer-grid h2{font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);font-weight:400;margin-bottom:12px}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{color:var(--text-2);text-decoration:none;font-size:.94rem}
.footer-links a:hover{color:var(--amber)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:34px;padding-top:20px;font-size:.85rem;color:var(--text-3)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid,.define,.about-grid,.contact-grid,.live-feature,.svc{grid-template-columns:1fr}
  .grid-3,.formats,.vod-grid,.screens-row{grid-template-columns:repeat(2,1fr)}
  .steps,.values{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--ink-2);border-bottom:1px solid var(--line);padding:12px 24px 18px;gap:2px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 14px}
  .burger{display:inline-flex}
  .header-cta{display:none}
  .wall{grid-template-columns:1fr 140px}
}
@media (max-width:620px){
  body{font-size:16px}
  .grid-3,.grid-2,.formats,.vod-grid,.screens-row,.steps,.values,.facts,.two-col,.footer-grid{grid-template-columns:1fr}
  .step,.value{margin-right:0;padding-right:0}
  .spec-strip{grid-template-columns:1fr 1fr}
  .spec{border-right:0;padding-left:0;padding-right:0}
  .wall{grid-template-columns:1fr}
  .mon-pgm{grid-column:1;grid-row:auto}
  .wall .mon-vert{display:none}
  .mon-row{grid-column:1;grid-row:auto}
  .cta-band{flex-direction:column;align-items:flex-start}
  .rail .vod{width:142px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- extra's voor de losse website ---------- */
[hidden]{display:none!important}
html{background:var(--ink)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:#1A1204;
  font-family:var(--display);font-weight:700;padding:11px 18px;border-radius:0 0 10px 0;text-decoration:none}
.skip-link:focus{left:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-done.is-error{border-color:var(--live);background:rgba(255,79,79,.08)}
.vod.is-placeholder{cursor:default}

/* ---------- eigen beeld en de speler ---------- */
.thumb img,.player .bg img,.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
button.vod{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer}
.play-mini{
  position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:rgba(10,14,18,.55);
  border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;
}
.play-mini::after{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.vod:hover .play-mini{background:var(--amber);border-color:var(--amber)}
.vod:hover .play-mini::after{border-left-color:#1A1204}
.play-btn[data-embed]{cursor:pointer}
.play-btn[data-embed]:hover{background:var(--amber);border-color:var(--amber)}
.play-btn[data-embed]:hover::after{border-left-color:#1A1204}

.speler-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(4,7,10,.9);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.speler-overlay.is-open{display:flex}
.speler-box{width:min(1040px,100%);display:flex;flex-direction:column;gap:12px}
.speler-kop{display:flex;align-items:center;justify-content:space-between;gap:16px}
.speler-titel{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--text)}
.speler-sluit{
  background:var(--panel);border:1px solid var(--line-2);color:var(--text);
  font-family:var(--display);font-weight:600;font-size:.88rem;padding:8px 16px;border-radius:999px;cursor:pointer;
}
.speler-sluit:hover{border-color:var(--amber);color:var(--amber)}
.speler-frame{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
}
.speler-frame.is-staand{aspect-ratio:9/16;max-width:min(400px,100%);margin-inline:auto}
.speler-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.tally.is-uit{background:var(--amber);color:#1A1204}
.upnext-row[data-embed]{cursor:pointer;border-radius:8px;transition:background .15s ease}
.upnext-row[data-embed]:hover{background:var(--panel-2)}
.upnext-row[data-embed]:hover b{color:var(--amber)}

/* ---------- video in de monitorwand ---------- */
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.screen.speelt iframe{pointer-events:none}
.screen::after{z-index:3}
.screen .play-mini{z-index:4}
.screen.is-klikbaar{cursor:pointer}
.screen.is-klikbaar:hover .play-mini{background:var(--amber);border-color:var(--amber)}
.screen.is-klikbaar:hover .play-mini::after{border-left-color:#1A1204}
.screen.is-klikbaar:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- opdrachtgeversstrip ---------- */
.klantenband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2);padding-block:26px}
.klantenband-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:0 0 16px}
.klantenband-voet{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--text-3);margin:16px 0 0}
.klanten{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
span.klant{
  font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:.01em;
  color:var(--text-2);opacity:.75;transition:opacity .2s ease,color .2s ease;white-space:nowrap;
}
span.klant:hover{opacity:1;color:var(--text)}
img.klant{height:26px;width:auto;object-fit:contain;filter:grayscale(1) brightness(1.7);opacity:.7;transition:filter .2s ease,opacity .2s ease}
img.klant:hover{filter:none;opacity:1}
@media (max-width:620px){
  .klanten{gap:12px 22px}
  span.klant{font-size:.92rem}
  img.klant{height:22px}
}

/* ---------- beeldformaten met echte crops ---------- */
.format .box{position:relative;overflow:hidden;border-style:solid;border-color:var(--line);background:var(--panel)}
.format .box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.format .box{display:block}
.format .box span{
  position:absolute;left:8px;bottom:8px;z-index:2;
  background:rgba(8,11,15,.8);color:var(--amber);
  padding:4px 10px;border-radius:6px;font-size:.72rem;letter-spacing:.08em;
}

@media (max-width:620px){
  .brand-mark{height:32px}
}
.site-footer .brand-mark{height:34px}

/* ---------- juridische pagina ---------- */
.juridisch{max-width:74ch}
.juridisch h2{font-size:1.5rem;margin-top:42px;padding-top:22px;border-top:1px solid var(--line)}
.juridisch h3{font-size:1.05rem;margin-top:24px;color:var(--amber)}
.juridisch p{color:var(--text-2);margin-top:12px;line-height:1.7}
.juridisch ul{color:var(--text-2);margin-top:12px;padding-left:1.15em;line-height:1.7}
.juridisch li{margin-bottom:9px}
.juridisch li b,.juridisch p b{color:var(--text);font-weight:600}
.juridisch a{color:var(--amber)}
.juridisch .datalist dd{color:var(--text-2)}

/* ---------- taalkeuze ---------- */
.taalkeuze{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;flex:none}
.taalkeuze button{
  background:none;border:0;cursor:pointer;border-radius:999px;padding:5px 10px;
  font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.06em;color:var(--text-3);
}
.taalkeuze button:hover{color:var(--text)}
.taalkeuze button[aria-pressed="true"]{background:var(--amber);color:#1A1204}
@media (max-width:980px){.taalkeuze{margin-left:auto;margin-right:8px}}
@media (max-width:420px){.taalkeuze button{padding:5px 7px;font-size:.72rem}}

/* ---------- opdrachtgevers als lopende banner ---------- */
.klanten-venster{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.klanten-spoor{display:flex;width:max-content}
.klanten-groep{display:flex;align-items:center;gap:44px;padding-right:44px}
.klanten-spoor.loopt{animation:klantenloop 36s linear infinite}
.klanten-venster:hover .klanten-spoor.loopt{animation-play-state:paused}
@keyframes klantenloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.klanten-groep span.klant{
  display:inline-flex;align-items:center;height:46px;padding:0 20px;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.02em;
  color:var(--text-2);opacity:.8;white-space:nowrap;
}
.klanten-groep span.klant:hover{border-color:var(--line-2);color:var(--text)}
.klanten-groep img.klant{height:30px;width:auto;object-fit:contain;filter:grayscale(1) brightness(1.8);opacity:.75}
.klanten-venster:hover span.klant,.klanten-venster:hover img.klant{opacity:1}
@media (prefers-reduced-motion:reduce){
  .klanten-spoor{animation:none!important}
  .klanten-venster{overflow-x:auto}
}
@media (max-width:620px){
  .klanten-groep{gap:28px;padding-right:28px}
  .klanten-groep span.klant{font-size:.95rem}
  .klanten-groep img.klant{height:24px}
}

/* ---------- tarievenrekenhulp ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:34px;align-items:start}
.calc-lijst{border-top:1px solid var(--line)}
.calc-kop{
  display:grid;grid-template-columns:minmax(0,1fr) 74px 96px;gap:14px;
  padding:10px 2px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.calc-kop span:nth-child(2),.calc-kop span:nth-child(3){text-align:right}
.calc-groep{
  margin:22px 0 2px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);
}
.calc-regel{
  display:grid;grid-template-columns:22px minmax(0,1fr) 74px 96px;align-items:center;gap:14px;
  padding:12px 2px;border-bottom:1px solid var(--line);
}
.calc-regel:hover{background:rgba(255,255,255,.015)}
.calc-regel>input[type="checkbox"]{width:17px;height:17px;accent-color:var(--amber);margin:0;cursor:pointer}
.calc-naam{font-weight:600;font-size:1rem;color:var(--text-2);cursor:pointer;line-height:1.35}
.calc-regel.aan .calc-naam{color:var(--text)}
.calc-naam small{display:block;color:var(--text-3);font-size:.85rem;font-weight:400;line-height:1.45;margin-top:2px}
.calc-aantal{
  width:100%;text-align:center;font-family:var(--mono);font-size:.9rem;
  color:var(--text);background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:6px 4px;
}
.calc-aantal:disabled{opacity:.35}
.calc-tarief{
  font-family:var(--mono);font-size:.92rem;color:var(--text-3);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
}
.calc-regel.aan .calc-tarief{color:var(--amber)}

.calc-uitkomst{
  position:sticky;top:96px;background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--amber);border-radius:var(--radius-m);padding:22px;
  display:flex;flex-direction:column;gap:14px;
}
.calc-uitkomst-kop{
  margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);
}
.calc-regels{display:flex;flex-direction:column;max-height:320px;overflow-y:auto}
.calc-rij{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px dotted var(--line);font-size:.95rem;color:var(--text-2);
}
.calc-rij em{display:block;font-style:normal;font-size:.8rem;color:var(--text-3)}
.calc-rij b{font-family:var(--mono);font-size:.9rem;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.calc-leeg{margin:0;padding:8px 0;color:var(--text-3);font-size:.95rem}
.calc-let-op{color:var(--amber)}
.calc-som{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;color:var(--text-2);padding:3px 0}
.calc-som b{font-family:var(--mono);font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.calc-totaal{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 16px;background:var(--amber-ghost);border-radius:var(--radius-s);
}
.calc-totaal-label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);
}
.calc-totaal-bedrag{
  font-family:var(--display);font-weight:700;font-size:1.7rem;letter-spacing:-.01em;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.calc-dagdelen{margin:0;font-family:var(--mono);font-size:.76rem;color:var(--text-3)}
.calc-dagdelen:empty{display:none}
.calc-btw{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.calc-btw input{width:17px;height:17px;accent-color:var(--amber);margin:2px 0 0;flex:none}
.calc-btw span{font-size:.92rem;font-weight:600;color:var(--text-2)}
.calc-btw small{display:block;font-weight:400;font-size:.82rem;color:var(--text-3);line-height:1.45}
.calc-uitkomst .btn-row{gap:10px;flex-wrap:wrap}
.calc-klein{margin:0;font-size:.8rem;line-height:1.5;color:var(--text-3)}

@media (max-width:980px){
  .calc{grid-template-columns:1fr;gap:26px}
  .calc-uitkomst{position:static}
}
@media (max-width:560px){
  .calc-kop{grid-template-columns:minmax(0,1fr) 58px 76px;gap:10px}
  .calc-regel{grid-template-columns:20px minmax(0,1fr) 58px 76px;gap:10px}
  .calc-naam{font-size:.95rem}
  .calc-naam small{font-size:.8rem}
  .calc-totaal-bedrag{font-size:1.45rem}
}


/* ============================================================
   Aviano Sans in de kopbalk en de voettekst
   ------------------------------------------------------------
   Aviano Sans is een betaald lettertype en staat niet bij Google.
   Heb je een weblicentie, zet dan aviano-sans.woff2 en
   aviano-sans-bold.woff2 naast de andere bestanden en haal de
   twee blokken hieronder uit hun commentaar. Zonder die bestanden
   valt de site terug op Tenor Sans, dezelfde brede Romeinse bouw.

@font-face{
  font-family:"Aviano Sans";
  src:url("aviano-sans.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Aviano Sans";
  src:url("aviano-sans-bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
   ============================================================ */
/* Alleen het woord Muviews krijgt de merkletter. De rest van de kopbalk
   en de voettekst staat gewoon in de letter van de hele site, zodat het
   een geheel blijft. */
.brand-name{font-family:var(--titel)}
.site-header .brand-name{letter-spacing:.14em}
.site-header .nav a,.site-header .header-cta{letter-spacing:.02em}
.site-footer h4,.site-footer h2{letter-spacing:.08em}


/* ---------- cases ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.case{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:24px;display:flex;flex-direction:column;gap:14px;
}
.case-soort{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);margin:0;
}
.case h3{font-size:1.22rem}
.case-lijst{margin:0;display:flex;flex-direction:column;gap:0}
.case-lijst dt{
  font-family:var(--display);font-weight:500;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin:16px 0 5px;
}
.case-lijst dt:first-child{margin-top:0}
.case-lijst dd{margin:0;color:var(--text-2);font-size:.95rem;line-height:1.55}
.case-chips{
  margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:7px;
}
.case-chips span{
  font-family:var(--mono);font-size:.72rem;color:var(--text-3);
  border:1px solid var(--line);border-radius:5px;padding:3px 8px;
}
@media (max-width:900px){ .cases{grid-template-columns:1fr} }
@media (min-width:900px){
  /* een losse case over de volle breedte: tekening links, tekst rechts */
  .case-breed{display:grid;grid-template-columns:330px minmax(0,1fr);column-gap:28px;align-items:start}
  .case-breed > .case-tekening{grid-column:1;align-self:start}
  .case-breed > details{grid-column:2}
  .case-breed .case-chips{margin-top:16px}
}



/* ---------- keuze van de sociale kanalen in de studio ---------- */
.studio-kanalen{
  border-top:1px solid var(--line);margin-top:18px;padding-top:16px;
  display:flex;flex-direction:column;gap:10px;
}
.kanaalrij{display:flex;flex-wrap:wrap;gap:8px}
.kanaal{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;padding:7px 11px;
  background:var(--panel-2);font-size:.92rem;color:var(--text-2);
}
.kanaal:hover{border-color:var(--line-2);color:var(--text)}
.kanaal input{accent-color:var(--amber);width:16px;height:16px;margin:0}
.kanaal input:checked + span{color:var(--text)}
.kanaal-schakel{align-self:flex-start;background:transparent;border-style:dashed}

/* ---------- caseillustraties ---------- */
.case-tekening{
  width:100%;height:auto;display:block;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--radius-s);
}
.tk-vlak{fill:var(--panel-2);stroke:var(--line);stroke-width:1}
.tk-vlak-sterk{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1.2}
.tk-lijn{fill:none;stroke:var(--line-2);stroke-width:1.4;stroke-linecap:round}
.tk-amber-lijn{fill:none;stroke:var(--amber);stroke-width:1.6;stroke-linecap:round}
.tk-amber{fill:var(--amber)}
.tk-amber-vlak{fill:var(--amber)}
.tk-punt{fill:var(--line-2)}
.tk-stippel{fill:none;stroke:var(--amber);stroke-width:1.2;stroke-dasharray:4 4;opacity:.65}
.tk-uit{fill:var(--amber-ghost);stroke:rgba(242,176,74,.38);stroke-width:1.2}
.tk-titel{fill:var(--text);font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.04em}
.tk-mini{fill:var(--text-3);font-family:var(--mono);font-size:10px;letter-spacing:.05em}
.tk-mini-amber{fill:var(--amber);font-family:var(--mono);font-size:10px;letter-spacing:.05em}


/* ---------- een case die je openklapt ---------- */
.klap-case{border-top:none}
.klap-case .klap-kop{padding:14px 0 12px;gap:14px}
.klap-case .klap-titel{gap:7px}
.klap-case .klap-pijl{width:32px;height:32px}
.klap-case .klap-pijl::after{width:7px;height:7px}
.klap-case .case-chips{margin:16px 0 0}
.case-breed>details{grid-column:2}

/* ---------- prijs op aanvraag, met keuzemenu ---------- */
.prijsvraag{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:22px;margin-top:4px;
}
.prijsvraag h3{font-size:1.08rem}
.prijsvraag p{color:var(--text-2);font-size:.95rem;margin:8px 0 18px}
.prijsvraag-rij{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.prijsvraag-rij .field{flex:1 1 230px;min-width:0;margin-bottom:0}
.prijsvraag-rij .btn{flex:0 0 auto;margin-bottom:1px}
@media (max-width:620px){ .prijsvraag-rij .btn{width:100%;justify-content:center} }


/* ---------- een case die open en dicht klapt ---------- */
.klap-case{border-top:none;margin-top:2px}
.klap-case .klap-kop{padding:10px 0;gap:14px}
.klap-case .klap-titel{display:flex;flex-direction:column;gap:6px}
.klap-case .klap-pijl{width:30px;height:30px}
.klap-case .klap-pijl::before{width:8px;height:8px}
.klap-case .klap-body{padding-bottom:4px}
.klap-case[open] .klap-kop{border-bottom:1px solid var(--line);margin-bottom:12px}
.case > details{display:flex;flex-direction:column}


/* ---------- chat, accountmuur en leadvelden ---------- */
.cm-chat{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cm-chatknop{
  display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(242,176,74,.4);
  background:var(--amber);color:#14110B;font-family:var(--display);font-weight:600;font-size:.92rem;
  border-radius:999px;padding:11px 18px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.cm-chatknop:hover{filter:brightness(1.06)}
.cm-bel{width:15px;height:13px;border:2px solid #14110B;border-radius:4px;position:relative;display:block}
.cm-bel::after{content:"";position:absolute;left:3px;bottom:-6px;border-top:5px solid #14110B;border-right:6px solid transparent}
.cm-paneel{
  width:min(340px,calc(100vw - 36px));background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--radius-m);padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:10px;
}
.cm-kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cm-kop b{font-family:var(--display);font-size:1rem}
.cm-dicht{background:none;border:0;color:var(--text-3);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 2px}
.cm-dicht:hover{color:var(--text)}
.cm-uitleg{color:var(--text-3);font-size:.86rem;margin:0}
.cm-veld{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--text-3)}
.cm-veld input,.cm-veld textarea{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);
  color:var(--text);font:inherit;font-size:.95rem;padding:9px 11px;width:100%;
}
.cm-veld textarea{resize:vertical;min-height:74px}
.cm-veld input:focus,.cm-veld textarea:focus{outline:2px solid var(--amber);outline-offset:1px}
.cm-uit{margin:2px 0 0;font-size:.85rem;color:var(--amber)}
.cm-uit.is-fout{color:#F2836A}

/* het gesprek zelf: jouw berichten rechts, die van ons links */
.cm-gesprek{
  display:flex;flex-direction:column;gap:9px;max-height:min(46vh,300px);
  overflow-y:auto;padding:2px 2px 2px 0;scroll-behavior:smooth;
}
.cm-bericht{
  max-width:86%;border-radius:var(--radius-s);padding:8px 11px;
  display:flex;flex-direction:column;gap:2px;
}
.cm-bericht.is-jij{align-self:flex-end;background:rgba(242,176,74,.14);border:1px solid rgba(242,176,74,.28)}
.cm-bericht.is-team{align-self:flex-start;background:var(--ink-2);border:1px solid var(--line)}
.cm-wie{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.cm-tekst{margin:0;font-size:.92rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-tijd{font-size:.68rem;color:var(--text-3);align-self:flex-end}
.cm-gegevens{display:flex;flex-direction:column;gap:10px}
.cm-stip{
  width:8px;height:8px;border-radius:50%;background:#14110B;display:none;
}
.cm-chatknop.heeft-nieuw .cm-stip{display:block;animation:cm-klop 1.6s ease-in-out infinite}
@keyframes cm-klop{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .cm-chatknop.heeft-nieuw .cm-stip{animation:none}
  .cm-gesprek{scroll-behavior:auto}
}
.cm-scherm{
  position:fixed;inset:0;z-index:80;background:rgba(6,9,12,.72);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.cm-doos{
  width:min(420px,100%);background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--radius-m);padding:24px;display:flex;flex-direction:column;gap:12px;
  max-height:calc(100dvh - 36px);overflow-y:auto;
}
.cm-wissel{background:none;border:0;color:var(--text-3);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;padding:0;text-align:left}
.cm-wissel:hover{color:var(--text)}
.cm-mailveld{flex:1 1 230px;min-width:0;margin-bottom:0}
@media (max-width:560px){
  .cm-chat{right:12px;bottom:12px;left:12px;align-items:stretch}
  .cm-chatknop{justify-content:center}
  .cm-paneel{width:100%}
}


/* ---------- leadlijst in de studio ---------- */
.leadlijst{display:flex;flex-direction:column;gap:10px;margin-top:12px;max-height:420px;overflow-y:auto}
.leadregel{border:1px solid var(--line);border-radius:var(--radius-s);padding:12px 14px;background:var(--ink-2)}
.leadregel b{font-size:.95rem}
.leadregel .lead-meta{font-family:var(--mono);font-size:.72rem;color:var(--text-3);margin-top:3px;display:block}
.leadregel p{margin:7px 0 0;color:var(--text-2);font-size:.9rem;white-space:pre-wrap}
.leadregel .lead-merk{color:var(--amber);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}

/* ---------- kansenlijst in de studio ---------- */
.kansfilter{display:flex;flex-wrap:wrap;gap:6px}
.kansfilter-knop{
  border:1px solid var(--line);background:var(--ink-2);color:var(--text-3);
  font:inherit;font-size:.78rem;border-radius:999px;padding:5px 12px;cursor:pointer;
}
.kansfilter-knop:hover{color:var(--text);border-color:var(--line-2)}
.kansfilter-knop.is-actief{background:var(--amber);border-color:var(--amber);color:#14110B;font-weight:600}
.kansfilter-knop:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.kanslijst{display:flex;flex-direction:column;gap:10px;max-height:560px;overflow-y:auto}
.kanskaart{border:1px solid var(--line);border-radius:var(--radius-s);padding:13px 15px;background:var(--ink-2);
  display:flex;flex-direction:column;gap:7px}
.kanskaart.is-gewonnen{border-color:rgba(122,200,140,.5)}
.kanskaart.is-niets{opacity:.55}
.kanskaart-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kanskaart-kop b{font-size:.98rem}
.kansmerk{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:2px 9px;color:var(--text-3);white-space:nowrap}
.kansmerk.niveau-hoog{color:var(--amber);border-color:rgba(242,176,74,.5)}
.kansmerk.niveau-laag{opacity:.7}
.kanskaart p{margin:0;font-size:.88rem;line-height:1.5;color:var(--text-2)}
.kanskaart .kansmeta{font-family:var(--mono);font-size:.7rem;color:var(--text-3);word-break:break-word}
.kanskaart a{color:var(--amber)}
.kansknoppen{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.kansknop{
  border:1px solid var(--line);background:none;color:var(--text-3);
  font:inherit;font-size:.74rem;border-radius:999px;padding:4px 10px;cursor:pointer;
}
.kansknop:hover{color:var(--text);border-color:var(--line-2)}
.kansknop.is-aan{background:var(--amber);border-color:var(--amber);color:#14110B;font-weight:600}
.kansknop:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.kanskaart textarea{
  background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-s);
  color:var(--text);font:inherit;font-size:.86rem;padding:7px 9px;width:100%;resize:vertical;min-height:40px;
}
.kanskaart textarea:focus{outline:2px solid var(--amber);outline-offset:1px}
.kansplak{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.studio-veld{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:var(--text-3)}
.studio-veld textarea{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);
  color:var(--text);font:inherit;font-size:.9rem;padding:9px 11px;width:100%;resize:vertical;
}
.studio-veld textarea:focus{outline:2px solid var(--amber);outline-offset:1px}

/* ---------- quotes van opdrachtgevers ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px}
.quote{
  margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:24px;display:flex;flex-direction:column;gap:16px;
}
.quote blockquote{
  margin:0;font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.5;
  color:var(--text);
}
.quote blockquote::before{content:"\201C";color:var(--amber);margin-right:2px}
.quote blockquote::after{content:"\201D";color:var(--amber);margin-left:2px}
.quote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.quote figcaption b{font-size:.92rem;font-weight:600}
.quote figcaption span{font-size:.85rem;color:var(--text-3)}

/* ---------- portret bij het team ---------- */
.team-foto:empty{display:none}
.team-foto img{
  width:76px;height:76px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line-2);display:block;
}

/* ---------- uitklapbare blokken ---------- */
.klap{border-top:1px solid var(--line)}
.klap-kop{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;cursor:pointer;list-style:none;
}
.klap-kop::-webkit-details-marker{display:none}
.klap-kop::marker{content:""}
.klap-titel{display:flex;flex-direction:column;gap:10px;min-width:0}
.klap-titel>*{margin:0}
.klap-titel .eyebrow{margin-bottom:0}
.klap-label{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--text)}
.klap-pijl{
  flex:none;position:relative;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-2);transition:background .18s ease,border-color .18s ease;
}
.klap-pijl::after{
  content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);
  transform:translateY(-2px) rotate(45deg);transition:transform .22s ease,border-color .18s ease;
}
.klap-kop:hover>.klap-pijl{border-color:var(--amber)}
.klap-kop:hover>.klap-pijl::after{border-color:var(--amber)}
.klap-kop:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:var(--radius-s)}
.klap[open]>.klap-kop>.klap-pijl{background:var(--amber);border-color:var(--amber)}
.klap[open]>.klap-kop>.klap-pijl::after{transform:translateY(2px) rotate(-135deg);border-color:#1A1204}
.klap-body{padding-bottom:30px;animation:klapOpen .28s ease both}
@keyframes klapOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.klap-body{animation:none}}

/* dienstenpagina: elke dienst is zelf al een rij met een lijn erboven */
.svc-klap{display:block;padding-block:0;border-top:0}
.svc-klap .klap-titel .tags{flex-direction:row}
@media (max-width:560px){
  .klap-kop{gap:14px;padding:20px 0}
  .klap-pijl{width:34px;height:34px}
}

/* ============================================================
   Productpagina-opzet voor de homepage
   ============================================================ */

/* ---------- meelopende sectiebalk ---------- */
html{scroll-behavior:smooth;scroll-padding-top:124px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sectiebalk{
  position:sticky;top:68px;z-index:40;
  background:rgba(10,14,18,.92);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.sectiebalk-in{display:flex;align-items:center;gap:18px;height:52px}
.sectiebalk-nu{
  display:none;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--text);padding:0;
}
.sectiebalk-pijl{
  width:9px;height:9px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
}
.sectiebalk-nu[aria-expanded="true"] .sectiebalk-pijl{transform:translateY(2px) rotate(-135deg)}
.sectiebalk-links{display:flex;align-items:center;gap:26px;flex:1;min-width:0;overflow:hidden}
.sectiebalk-links a{
  font-family:var(--display);font-weight:500;font-size:.88rem;letter-spacing:.01em;
  color:var(--text-3);text-decoration:none;white-space:nowrap;padding:4px 0;
  border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease;
}
.sectiebalk-links a:hover{color:var(--text)}
.sectiebalk-links a.aan{color:var(--amber);border-bottom-color:var(--amber)}
.sectiebalk-cta{flex:none}
@media (max-width:860px){
  .sectiebalk{top:64px}
  .sectiebalk-nu{display:flex}
  .sectiebalk-links{
    display:none;position:absolute;left:0;right:0;top:52px;flex-direction:column;
    align-items:stretch;gap:0;background:var(--ink-2);border-bottom:1px solid var(--line);
    padding:6px 20px 12px;overflow:visible;
  }
  .sectiebalk-links.open{display:flex}
  .sectiebalk-links a{padding:11px 0;border-bottom:1px solid var(--line);font-size:.95rem}
  .sectiebalk-links a.aan{border-bottom-color:var(--line)}
  .sectiebalk-in{position:relative;justify-content:space-between}
  .sectiebalk-cta{margin-left:auto}
}
@media (max-width:460px){.sectiebalk-cta{display:none}}

/* ---------- hero in het midden ---------- */
.hero-mid{padding-top:54px}
.hero-mid-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.hero-mid-in .eyebrow{justify-content:center}
.hero-mid h1{max-width:18ch;margin:16px auto 0}
.hero-sub{margin:18px auto 0;max-width:52ch;color:var(--text-2);font-size:1.08rem}
.hero-knoppen{margin-top:28px;justify-content:center}
.hero-mid .wall{margin-top:44px}
.platformstrip{margin-top:40px;text-align:center}
.platform-label{
  margin:0 0 14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);
}
.platform-rij{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;
}
.platform-rij span{
  font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--text-2);opacity:.7;
  transition:opacity .18s ease,color .18s ease;
}
.platform-rij span:hover{opacity:1;color:var(--text)}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:30px}
.bento-kaart{
  grid-column:span 2;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:26px 24px 0;display:flex;flex-direction:column;
  overflow:hidden;min-height:260px;
}
.bento-kaart.groot{grid-column:span 4}
.bento-kaart.wijd{grid-column:span 4}
.bento-kaart.staand{grid-row:span 2;grid-column:span 2}
.bento-kaart h3{margin:0 0 10px;font-size:1.45rem;line-height:1.2;letter-spacing:-.01em}
.bento-kaart h3 b{font-weight:700;color:var(--text)}
.bento-kaart h3 span{font-weight:600;color:var(--amber);display:block}
.bento-kaart p{margin:0;color:var(--text-2);font-size:.96rem;line-height:1.55}
.bento-beeld{margin:22px -24px 0;flex:1;min-height:130px;position:relative;overflow:hidden}
.bento-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bento-kaart.staand .bento-beeld{min-height:240px}
@media (max-width:980px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento-kaart,.bento-kaart.groot,.bento-kaart.wijd{grid-column:span 2}
  .bento-kaart.staand{grid-column:span 2;grid-row:auto}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr;gap:14px}
  .bento-kaart,.bento-kaart.groot,.bento-kaart.wijd,.bento-kaart.staand{grid-column:span 1;min-height:0}
  .bento-beeld{min-height:170px}
}

/* ---------- formaten met tabbladen ---------- */
.fmt-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 24px}
.fmt-tab{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--text-2);
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.fmt-tab:hover{color:var(--text);border-color:var(--line-2)}
.fmt-tab .fmt-ratio{font-family:var(--mono);font-size:.78rem;color:var(--text-3)}
.fmt-tab.aan{background:var(--amber);border-color:var(--amber);color:#1A1204}
.fmt-tab.aan .fmt-ratio{color:#1A1204;opacity:.7}
.fmt-paneel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:center;animation:klapOpen .3s ease both}
.fmt-beeld{position:relative;border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line)}
.fmt-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fmt-beeld span{
  position:absolute;left:14px;top:14px;z-index:2;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;color:var(--text);background:rgba(10,14,18,.7);border-radius:6px;padding:4px 9px;
}
.fmt-tekst h3{margin:0 0 12px;font-size:1.5rem}
.fmt-tekst p{margin:0;color:var(--text-2)}
@media (max-width:820px){.fmt-paneel{grid-template-columns:1fr}}

/* ---------- brede dienstblokken ---------- */
.breed{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(28px,4vw,52px);
}
.breed.om .breed-beeld{order:2}
.breed-beeld{position:relative;border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10}
.breed-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.breed-tekst h3{margin:0 0 14px;font-size:clamp(1.4rem,1rem + 1.4vw,2rem);letter-spacing:-.01em}
.breed-tekst p{margin:0 0 16px;color:var(--text-2)}
.breed-tekst .price{display:block;margin-bottom:18px}
@media (max-width:820px){
  .breed{grid-template-columns:1fr;gap:20px}
  .breed.om .breed-beeld{order:0}
}

/* ---------- vergelijkingstabel ---------- */
.tabel-schuif{overflow-x:auto;margin-top:28px;-webkit-overflow-scrolling:touch}
table.vergelijk{border-collapse:collapse;width:100%;min-width:680px}
table.vergelijk th,table.vergelijk td{
  padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem;
}
table.vergelijk thead th{
  font-family:var(--display);font-weight:700;font-size:1rem;color:var(--text);
  border-bottom:1px solid var(--line-2);white-space:nowrap;
}
table.vergelijk tbody th{
  font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap;
}
table.vergelijk td{color:var(--text-2)}
table.vergelijk tbody tr:hover td{color:var(--text);background:rgba(255,255,255,.015)}
table.vergelijk tbody tr:last-child td{color:var(--amber);font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- werkgrid ---------- */
.werkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.werkgrid a{
  position:relative;display:block;border-radius:var(--radius-s);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:16/9;background:var(--panel);
}
.werkgrid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease,opacity .2s ease;opacity:.82}
.werkgrid a:hover img{transform:scale(1.05);opacity:1}
.werkgrid b{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 12px 10px;
  font-size:.82rem;font-weight:600;line-height:1.35;color:var(--text);
  background:linear-gradient(transparent,rgba(10,14,18,.92));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* op de homepage zit de knop al in de sectiebalk */
@media (min-width:461px){
  body[data-pagina="index"] .site-header .header-cta{display:none}
}

/* ---------- megamenu ---------- */
.nav-item{display:flex;align-items:center;gap:2px}
.nav-klap{
  width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;flex:none;
  position:relative;color:var(--text-3);
}
.nav-klap::after{
  content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
}
.nav-item.open .nav-klap{color:var(--amber)}
.nav-item.open .nav-klap::after{transform:translateY(1px) rotate(-135deg)}
.nav-item.open>.nav-top{color:var(--text)}

.mega{
  position:absolute;left:0;right:0;top:100%;z-index:60;
  background:var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-raster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(230px,.8fr);
  gap:24px;padding-top:20px;padding-bottom:22px;align-items:start;
}
.mega-kop{
  margin:0 0 8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);
}
.mega-item{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:13px;align-items:center;
  padding:6px 9px;margin-left:-9px;border-radius:var(--radius-s);
  text-decoration:none;color:inherit;transition:background .16s ease;
}
.mega-item:hover,.mega-item:focus-visible{background:rgba(255,255,255,.04)}
.mega-item img{width:88px;height:56px;object-fit:cover;border-radius:7px;display:block;filter:saturate(.9)}
.mega-item:hover img{filter:none}
.mega-item b{display:block;font-size:.97rem;font-weight:600;color:var(--text);line-height:1.25}
.mega-item small{display:block;font-size:.82rem;color:var(--text-3);line-height:1.35;margin-top:1px}
.mega-item:hover small{color:var(--text-2)}
.mega-tegel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:17px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;
}
.mega-label{margin:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.mega-titel{font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.3}
.mega-tekst{margin:0;font-size:.85rem;line-height:1.5;color:var(--text-2)}
.mega-tegel .btn{margin-top:4px}

@media (max-width:980px){
  .nav-item{display:block;position:relative}
  .nav-item>.nav-top{display:block;padding-right:52px}
  .nav-klap{position:absolute;top:2px;right:4px;width:44px;height:44px;margin:0}
  .mega{
    position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    background:none;backdrop-filter:none;border:0;box-shadow:none;
    display:none;
  }
  .nav-item.open .mega{display:block}
  .mega-raster{grid-template-columns:1fr;gap:18px;padding:10px 0 16px}
  .mega-kolom{border-top:1px solid var(--line);padding-top:14px}
  .mega-item{margin-left:0;padding:8px 0}
  .mega-tegel{padding:16px}
}

/* de navigatiestijl mag niet in het paneel lekken */
.nav .mega a{padding:0;border-radius:0;background:none;color:inherit;font-size:1rem;font-weight:400}
.nav .mega a:hover{background:none}
.nav .mega .mega-item{padding:6px 9px;border-radius:var(--radius-s)}
.nav .mega .mega-item:hover{background:rgba(255,255,255,.04)}
.nav .mega .mega-item b{color:var(--text);font-size:.97rem;font-weight:600;line-height:1.25}
.nav .mega .btn{padding:10px 18px;border-radius:999px;font-weight:600;font-size:.88rem}
.nav .mega .btn-primary{background:var(--amber);color:#1A1204}
.nav .mega .btn-primary:hover{background:var(--amber-2);color:#1A1204}

@media (max-width:430px){
  .brand-sub{font-size:.6rem;letter-spacing:.1em;white-space:nowrap}
  .brand-name{font-size:1.02rem}
}

/* ---------- live vanuit de YoloBox ---------- */
.stream-blok{display:flex;flex-direction:column;gap:14px;margin-bottom:8px}
.stream-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stream-kop .badge-live{position:static;top:auto;left:auto}
.stream-titel{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--text)}
.stream-keuze{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.stream-knop{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;color:var(--text-3);font-family:var(--body);font-size:.85rem;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.stream-knop b{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}
.stream-knop:hover{color:var(--text);border-color:var(--line-2)}
.stream-knop[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#1A1204}
.stream-kader{display:flex;justify-content:center}
.stream-kader.staand .stream-vak{max-width:340px}
.stream-vak{
  position:relative;width:100%;background:#000;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-m);
}
.stream-vak iframe,.stream-vak video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.stream-uit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:20px;color:var(--text-2);font-size:.92rem}
.stream-uit a{color:var(--amber)}
.is-verborgen{display:none!important}
@media (max-width:620px){
  .stream-keuze{margin-left:0;width:100%}
  .stream-knop{flex:1;justify-content:center}
}

/* ---------- Muviews Studio ---------- */
.studio-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:30px;align-items:start}
.studio-vak{position:relative;width:100%;background:#000;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-m)}
.studio-beeld .studio-vak.ar-9x16{max-width:330px;margin:0 auto}
.studio-beeld .studio-vak.ar-1x1{max-width:520px;margin:0 auto}
.studio-vak video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.studio-vak video.aan{display:block}
.studio-leeg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:.95rem}
.studio-vak .badge-live{position:absolute;top:14px;left:14px}
.studio-klok{position:absolute;bottom:14px;left:14px;z-index:3;
  font-family:var(--mono);font-size:.8rem;color:var(--amber);
  background:rgba(10,14,18,.7);padding:4px 9px;border-radius:6px}
.studio-status{margin:12px 0 0;font-size:.9rem;color:var(--text-3)}
.studio-status.is-ok{color:var(--ok)}
.studio-status.is-fout{color:var(--live)}
.studio-paneel{display:flex;flex-direction:column;gap:16px}
.studio-blok{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px;
  display:flex;flex-direction:column;gap:12px}
.studio-kop{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.studio-uitleg{margin:0;font-size:.85rem;line-height:1.5;color:var(--text-3)}
.studio-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.studio-knoppen .btn{flex:none}
.studio-blok .field{margin-bottom:0}
.studio-keuze{display:flex;gap:6px;flex-wrap:wrap}
.studio-rol{display:flex;flex-wrap:wrap;gap:10px}
.studio-rol:empty{display:none}
.studio-foto{width:96px;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--ink-2)}
.studio-foto img{display:block;width:100%;height:68px;object-fit:cover}
.studio-foto-knoppen{display:flex;flex-wrap:wrap}
.studio-mini{flex:1;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;
  padding:5px 2px;text-align:center;font-family:var(--body);font-size:.68rem;color:var(--text-3);text-decoration:none}
.studio-mini:hover{color:var(--amber)}
.studio-hulp{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);max-width:74ch}
.studio-hulp h2{font-size:1.2rem;margin:0 0 14px}
.studio-hulp ol{margin:0 0 16px;padding-left:1.2em;color:var(--text-2);font-size:.95rem;line-height:1.6}
.studio-hulp li{margin-bottom:8px}
.btn.is-uit{border-color:var(--live);color:var(--live)}
@media (max-width:900px){
  .studio-grid{grid-template-columns:1fr;gap:22px}
  .studio-knoppen .btn{flex:1 1 auto}
}

/* met zes menu-items wordt het tussen 981 en 1100 pixels krap */
@media (min-width:981px) and (max-width:1240px){
  .header-inner{gap:12px}
  .nav{gap:0}
  .nav a{padding:8px 9px;font-size:.9rem}
  .header-cta{padding:9px 15px;font-size:.85rem}
  .taalkeuze button{padding:5px 8px;font-size:.73rem}
}
.studio-slot{border-color:var(--amber);border-width:1px}
.studio-blok.is-vergrendeld{opacity:.45;pointer-events:none}
.studio-uitleg.is-fout{color:var(--live)}
.studio-beheer{margin-top:26px;border-top:1px solid var(--line);padding-top:14px}
.studio-beheer summary{cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);list-style:none}
.studio-beheer summary::-webkit-details-marker{display:none}
.studio-beheer summary:hover{color:var(--amber)}
.studio-beheer-in{margin-top:14px;max-width:62ch;display:flex;flex-direction:column;gap:10px}
.studio-beheer .copybox{min-height:90px;white-space:pre-wrap}

/* ---------- fotogalerij ---------- */
.fotogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.fotogrid:empty{display:none}
.foto-tegel{position:relative;display:block;border-radius:var(--radius-m);overflow:hidden;
  border:1px solid var(--line);background:var(--panel)}
.foto-tegel img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s ease}
.foto-tegel:hover img{transform:scale(1.04)}
.foto-tegel span{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;
  font-size:.82rem;line-height:1.35;color:var(--text);
  background:linear-gradient(transparent,rgba(10,14,18,.9))}
/* tussen 981 en 1060 past de offerteknop er niet meer bij */
@media (min-width:981px) and (max-width:1060px){
  .site-header .header-cta{display:none}
}

/* ---------- monitorwand tijdens een uitzending ---------- */
.wall .tally.is-echt-live{background:var(--live);color:#fff}
.wall .screen.is-live{background:#000}
.wall .screen.is-live iframe{z-index:1}
.wall .screen.is-live::after{opacity:0}
.studio-wie{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 16px}
.studio-wie .studio-mini{flex:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.footer-links .team-link{color:var(--amber);opacity:.85}
.footer-links .team-link:hover{opacity:1}
.team-link:hover{color:var(--amber)}
.screen.is-live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.screen.is-live::after{display:none}
.mon .tally.is-aan i{animation:blink 1.1s steps(1,end) infinite}

/* ---------- delen ---------- */
.deel-knop{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line-2);border-radius:999px;
  padding:7px 15px;color:var(--text-2);font-family:var(--body);font-weight:600;font-size:.85rem;
  transition:color .16s ease,border-color .16s ease;
}
.deel-knop::before{
  content:"";width:13px;height:13px;flex:none;
  border:1.6px solid currentColor;border-radius:3px;border-top-color:transparent;
  transform:translateY(1px);
}
.deel-knop:hover{color:var(--amber);border-color:var(--amber)}
.speler-knoppen{display:flex;align-items:center;gap:10px;position:relative}
.deel-live{margin-left:auto}
.deel-rij{
  position:absolute;z-index:80;top:calc(100% + 8px);right:0;
  display:flex;flex-direction:column;min-width:170px;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius-m);
  box-shadow:var(--shadow);overflow:hidden;
}
.deel-rij a,.deel-rij button{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:10px 16px;color:var(--text-2);font-family:var(--body);font-size:.88rem;text-decoration:none;
}
.deel-rij a:last-child,.deel-rij button:last-child{border-bottom:0}
.deel-rij a:hover,.deel-rij button:hover{background:var(--panel);color:var(--amber)}
.stream-kop{position:relative}
.foto-houder{position:relative}
.deel-mini{
  position:absolute;right:8px;top:8px;z-index:2;cursor:pointer;
  background:rgba(10,14,18,.75);border:1px solid var(--line-2);border-radius:999px;
  padding:4px 11px;color:var(--text);font-family:var(--body);font-size:.72rem;
}
.deel-mini:hover{background:var(--amber);color:#1A1204;border-color:var(--amber)}
@media (max-width:560px){
  .deel-rij{right:auto;left:0}
}

/* ook op de andere monitoren past het beeld netjes in het kader */
.mon .screen{background:#000}
.mon-row .screen iframe,.mon-vert .screen iframe{object-fit:contain}

/* ---------- uploaden in de studio ---------- */
.studio-kies{cursor:pointer}
.studio-wachtrij{display:flex;flex-direction:column;gap:6px}
.studio-wachtrij:empty{display:none}
.upload-regel{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-s);
  font-size:.85rem;color:var(--text-3);background:var(--ink-2);
}
.upload-regel b{color:var(--text-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-regel.is-klaar{border-color:var(--ok)}
.upload-regel.is-klaar span{color:var(--ok)}
.upload-regel.is-fout{border-color:var(--live)}
.upload-regel.is-fout span{color:var(--live)}
.studio-rtmp{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.foto-tegel video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#000}

/* ---------- menu op de telefoon ---------- */
@media (max-width:980px){
  .nav.is-open{
    max-height:calc(100vh - 68px);
    max-height:calc(100dvh - 68px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:26px;
  }
  .nav.is-open .mega-raster{padding-bottom:6px}
  .nav.is-open .mega-tegel{margin-bottom:4px}
}

/* ---------- lange woorden netjes binnen het kader ---------- */
h1,h2,h3,h4,.vod b,.kaart b,.mega-item b,.klap-titel p,.define-quote{
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}
.vod b,.kaart b{overflow-wrap:anywhere}
.vod .meta,.kaart .meta{overflow-wrap:anywhere}

@media (max-width:400px){
  .brand-name{font-size:.94rem;letter-spacing:.1em}
  .brand-sub{font-size:.54rem;letter-spacing:.08em}
  .brand-mark{width:26px;height:33px}
  .header-inner{gap:10px}
  h1{font-size:clamp(1.7rem,8vw,2.2rem)}
}

/* op de telefoon een kort menu: geen miniaturen, en de knop bovenaan */
@media (max-width:620px){
  .nav.is-open .mega-item{grid-template-columns:minmax(0,1fr);gap:2px;padding:9px 0}
  .nav.is-open .mega-item img{display:none}
  .nav.is-open .mega-raster{display:flex;flex-direction:column;gap:14px}
  .nav.is-open .mega-tegel{order:-1}
}
@media (max-width:345px){
  .header-inner{gap:8px}
  .taalkeuze{padding:2px}
  .taalkeuze button{padding:4px 6px;font-size:.68rem}
  .burger{width:36px;height:36px}
}
.studio-server{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:9px}
.studio-uitleg.is-ok{color:var(--ok)}

/* ============================================================
   MODERNE LAAG, oktober 2026
   Alles hieronder is vormgeving. De indeling van de pagina's
   blijft precies zoals hij was. Wil je iets terugdraaien, dan
   haal je het blokje hieronder weg en verder niets.
   ============================================================ */

:root{
  --glas:rgba(19,27,34,.62);
  --rand-licht:rgba(255,255,255,.07);
  --gloed:0 0 0 1px rgba(242,176,74,.22), 0 10px 34px rgba(242,176,74,.14);
}

/* ---------- kopbalk, compacter en strakker ----------
   De menuletters waren groot en rond, met een pilletje eronder bij
   hover. Nu staan ze klein en breed uit elkaar, zoals de labels op
   een regietafel, met een streepje eronder in plaats van een vlak. */
.header-inner{height:64px;gap:14px}
.nav{gap:0}
.nav a{
  font-weight:500;font-size:.9rem;letter-spacing:.01em;text-transform:none;
  padding:8px 12px;border-radius:0;position:relative;color:var(--text-2);
  transition:color .18s ease;
}
.nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.nav a:hover{color:var(--text);background:transparent}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--text);background:transparent}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:1120px){.nav a{font-size:.85rem;padding:8px 9px}}

/* een haarlijn met kleurverloop onder de balk, de signaalstrook */
.site-header{border-bottom:0;background:rgba(10,14,18,.78);backdrop-filter:blur(18px) saturate(1.3)}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line) 12%,rgba(242,176,74,.5) 50%,var(--line) 88%,transparent);
}

/* het woord Muviews houdt de merkletter, de ondertitel is nu een lange
   regel dus die moet klein en rustig blijven staan */
.brand-name{letter-spacing:.16em;font-size:1.08rem;line-height:1.1}
.brand-sub{
  font-family:var(--display);font-weight:500;
  letter-spacing:.09em;font-size:.585rem;color:var(--text-3);
  margin-top:1px;
}
.site-header .brand{gap:10px}
/* op een smal scherm past de ondertitel niet naast het menu */
@media (max-width:780px){.site-header .brand-sub{display:none}}

.header-cta{box-shadow:0 0 0 1px rgba(242,176,74,.3), 0 6px 20px rgba(242,176,74,.18)}
.header-cta:hover{box-shadow:var(--gloed)}
.taalkeuze button{font-size:.72rem;letter-spacing:.06em}

/* ---------- knoppen met wat meer licht erin ---------- */
.btn{transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .2s ease}
.btn-primary{box-shadow:0 6px 22px rgba(242,176,74,.2)}
.btn-primary:hover{box-shadow:0 8px 30px rgba(242,176,74,.34);transform:translateY(-1px)}
.btn-ghost{backdrop-filter:blur(8px)}
.btn-ghost:hover{box-shadow:0 0 0 1px rgba(242,176,74,.35)}

/* ---------- hero, een fijn raster achter de tekst ----------
   Nauwelijks zichtbaar, maar het geeft het beeld diepte en het doet
   denken aan een monitorraster. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 74px);
  mask-image:radial-gradient(85% 70% at 50% 35%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(85% 70% at 50% 35%,#000 20%,transparent 78%);
}

/* ---------- de cijferstrook onder de hero ----------
   Stond scheef te breken over twee regels. Nu cijfers in de
   monospace, zodat ze uitlijnen, en een amberen tik erboven. */
.spec{position:relative}
.spec::before{
  content:"";position:absolute;top:-1px;left:0;width:18px;height:1px;background:var(--amber);
}
.spec b{font-size:clamp(1rem,.78rem + .52vw,1.2rem);font-variant-numeric:tabular-nums;letter-spacing:.004em}
.spec small{letter-spacing:.14em;font-size:.655rem}
.spec{padding-top:18px}

/* ---------- panelen met glas en een lichtrand ---------- */
.card,.mon,.step,.kaart,.vod{
  background:var(--glas);
  backdrop-filter:blur(10px);
  border-color:var(--rand-licht);
  transition:border-color .2s ease,transform .2s ease,box-shadow .25s ease;
}
.card:hover,.kaart:hover,.vod:hover{
  border-color:rgba(242,176,74,.32);
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(0,0,0,.4);
}

/* het hoekje linksboven op een kaart, als de merktekens op een
   beeldkader in de regie */
.card{position:relative;overflow:hidden}
.card::before{
  content:"";position:absolute;top:0;left:0;width:26px;height:26px;pointer-events:none;
  border-top:1px solid rgba(242,176,74,0);border-left:1px solid rgba(242,176,74,0);
  transition:border-color .25s ease;
}
.card:hover::before{border-top-color:var(--amber);border-left-color:var(--amber)}

/* ---------- on air, nu met een hartslag ---------- */
.tally i{animation:ademen 2.2s ease-in-out infinite}
@keyframes ademen{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .tally i{animation:none}
  .nav a::after{transition:none}
  .card:hover,.kaart:hover,.vod:hover{transform:none}
}

/* ---------- sociale kanalen als iconen ----------
   Stonden als gewone tekstlinks tussen de contactgegevens. Nu een
   compacte rij knoppen, zodat de voettekst rustiger wordt. */
.sociaal{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.sociaal a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--panel);color:var(--text-2);
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.sociaal a:hover{
  color:#1A1204;background:var(--amber);border-color:var(--amber);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(242,176,74,.26);
}
.sociaal svg{width:18px;height:18px;display:block;fill:currentColor}
@media (prefers-reduced-motion:reduce){.sociaal a:hover{transform:none}}

/* ---------- voettekst ----------
   Stond vol met kopjes in amber en een brede merkletter overal, dat werd
   onrustig. Nu staat alles in de gewone siteletter, alleen het woord
   Muviews houdt de merkletter, en de kopjes zijn weer stil grijs. */
.site-footer{
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);
  position:relative;overflow:hidden;
}
.footer-grid h2,.footer-grid h4{
  font-family:var(--display);font-weight:500;letter-spacing:.14em;
  font-size:.66rem;color:var(--text-3);opacity:1;
}
.footer-links a{font-size:.9rem;transition:color .16s ease,padding-left .16s ease}
.footer-links a:hover{padding-left:3px}
.site-footer .wrap{position:relative;z-index:1}
/* een haarlijn met kleurverloop boven de voettekst, spiegelbeeld van de kopbalk */
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,176,74,.42) 50%,transparent);
}

/* ============================================================
   CREATIEVE LAAG
   Strakker en technischer: minder ronde hoeken, kadertekens zoals
   in de regie, en een merkteken dat door de voettekst heen loopt.
   ============================================================ */

/* ---------- minder rond, meer apparaat ----------
   De pilvormen zagen er zacht uit. Een kleine straal leest als
   apparatuur in plaats van als een app. */
:root{--radius-s:6px;--radius-m:10px;--radius-l:14px}
.btn{border-radius:10px}
.btn-sm{border-radius:8px}
.taalkeuze{border-radius:10px;padding:3px}
.taalkeuze button{border-radius:7px}
.sociaal a{border-radius:9px}
.burger{border-radius:9px}

/* ---------- kadertekens ----------
   De vier hoekjes die je in een zoeker of op een regiemonitor ziet.
   Ze staan om het beeldscherm in de hero. */
.mon-pgm{position:relative}
.mon-pgm::before,.mon-pgm::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
  border-color:rgba(242,176,74,.55);border-style:solid;
}
.mon-pgm::before{top:9px;left:9px;border-width:1px 0 0 1px}
.mon-pgm::after{bottom:9px;right:9px;border-width:0 1px 1px 0}

/* ---------- de lichtbundel onder de kopbalk ----------
   Een smalle veeg die langzaam langs de haarlijn schuift, zoals een
   signaal dat doorloopt. Staat uit als iemand bewegende beelden
   heeft uitgezet in zijn systeem. */
.site-header::before{
  content:"";position:absolute;bottom:0;left:0;width:22%;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber-2),transparent);
  opacity:.85;animation:bundel 7s linear infinite;pointer-events:none;
}
@keyframes bundel{0%{transform:translateX(-100%)}100%{transform:translateX(560%)}}

/* ---------- merkteken door de voettekst ----------
   Het woord Muviews groot en nauwelijks zichtbaar achter de kolommen.
   Het vult de lege onderkant zonder iets te overschreeuwen. */
.site-footer::after{
  content:"MUVIEWS";position:absolute;right:-2%;bottom:-6%;
  font-family:var(--titel);font-size:clamp(5rem,15vw,13rem);letter-spacing:.08em;
  color:var(--text);opacity:.021;pointer-events:none;white-space:nowrap;line-height:1;
}

/* ---------- koppen krijgen een nummer ----------
   Elke sectie op een pagina telt door, zoals de blokken in een
   draaiboek. Het streepje dat er stond wordt het nummer. */
body{counter-reset:sectie}
.section{counter-increment:sectie}
.section .eyebrow::before{
  content:counter(sectie,decimal-leading-zero);
  width:auto;height:auto;background:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--amber);opacity:.6;
}
.section .eyebrow::after{
  content:"";width:18px;height:1px;background:var(--amber);opacity:.5;display:block;
}
.hero .eyebrow::before{content:"";width:22px;height:1px;background:var(--amber)}
.hero .eyebrow::after{display:none}

/* ---------- randen die oplichten ---------- */
.section{position:relative}
.section::before{
  content:"";position:absolute;top:-1px;left:0;width:84px;height:1px;
  background:linear-gradient(90deg,var(--amber),transparent);opacity:.45;
}
.section.flush::before{display:none}

@media (prefers-reduced-motion:reduce){
  .site-header::before{animation:none;opacity:.4}
}

/* ---------- dichtgeklapte secties compacter ----------
   Een sectie met een dichtgeklapt blok liet boven en onder evenveel
   ruimte staan als een sectie vol inhoud. Je zag dan een kop met
   tweehonderd pixels leegte eronder. Dicht is nu een smalle strook,
   open krijgt gewoon de volle ruimte. Zo leest de pagina als een
   inhoudsopgave die je openvouwt. */
.section:has(> .wrap > details.klap:not([open])){
  padding-block:clamp(24px,2.6vw,38px);
}
/* de haarlijn boven elk blok blijft staan, dat maakt de lijst leesbaar */
.section:has(> .wrap > details.klap[open]){
  padding-block:clamp(44px,5vw,78px) clamp(48px,6vw,88px);
}

/* ---------- partnerbalk met echte logo's ----------
   De logo's zijn al lichtgrijs gemaakt met een doorzichtige
   achtergrond, dus het grijsfilter dat er stond kan weg.

   Elk logo krijgt precies hetzelfde vak, 168 bij 52. Het logo zelf
   wordt daarbinnen zo groot mogelijk getekend zonder te vervormen.
   Een rond logo vult dus de hoogte, een lang woordmerk de breedte,
   en ze nemen allemaal evenveel ruimte in de rij. */
.klanten-groep img.klant{
  width:168px;height:52px;
  object-fit:contain;object-position:center;
  filter:none;opacity:.72;
  transition:opacity .2s ease;
}
.klanten-groep img.klant:hover{opacity:1}
@media (max-width:620px){
  .klanten-groep img.klant{width:128px;height:40px}
}

/* Namen zonder logo staan tussen de logo's in. Zonder kader en in
   hetzelfde lichtgrijs vallen ze niet uit de toon. Zodra het logo er
   is, verdwijnt de naam vanzelf. */
.klanten-groep span.klant{
  height:30px;padding:0;border:0;background:none;border-radius:0;
  font-weight:600;font-size:1.02rem;letter-spacing:.01em;
  color:#BEC9D3;opacity:.72;
}
.klanten-groep span.klant:hover{border-color:transparent;color:#BEC9D3;opacity:1}

/* Eén uitzondering. Het logo van AfroNet is een gestapeld geheel, de
   stippen horen boven de naam te blijven staan. Daardoor vult hij
   alleen de hoogte van het vak en blijft hij optisch kleiner dan de
   rest. Hij krijgt daarom wat meer hoogte, zodat hij even zwaar weegt
   zonder dat het logo uit elkaar getrokken wordt. */
.klanten-groep img.klant[src*="afronet"]{height:82px}
@media (max-width:620px){
  .klanten-groep img.klant[src*="afronet"]{height:62px}
}

.klanten-groep{gap:26px;padding-right:26px}
.klanten-groep span.klant{min-width:168px;justify-content:center;text-align:center}
@media (max-width:620px){
  .klanten-groep{gap:16px;padding-right:16px}
  .klanten-groep span.klant{min-width:128px;font-size:.92rem}
}

/* ============================================================
   TOESTEMMING VOOR EXTERNE VIDEO
   De balk onderin, en het vakje dat in de plaats komt van een
   video die nog niet geladen mag worden.
   ============================================================ */
.toestemming{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(14,20,26,.96);backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);
  box-shadow:0 -18px 44px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.toestemming[hidden]{display:none}
.toestemming::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,176,74,.5),transparent);
}
.toestemming-binnen{
  width:100%;max-width:1180px;margin-inline:auto;
  padding:16px max(16px,env(safe-area-inset-left,0px)) 16px max(16px,env(safe-area-inset-right,0px));
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.toestemming-tekst{flex:1 1 420px;min-width:0}
.toestemming-tekst b{display:block;font-family:var(--display);font-size:.95rem;margin-bottom:3px}
.toestemming-tekst p{color:var(--text-2);font-size:.88rem;line-height:1.5;max-width:68ch}
.toestemming-tekst a{color:var(--amber);text-underline-offset:3px}
.toestemming-knoppen{display:flex;gap:10px;flex-wrap:wrap;flex:none}
@media (max-width:620px){
  .toestemming-binnen{padding-block:14px;gap:12px}
  .toestemming-knoppen{width:100%}
  .toestemming-knoppen .btn{flex:1 1 auto;justify-content:center}
}

/* een videovak dat nog niet mag laden */
.mv-vak-uit{position:relative;min-height:90px}
.mv-aanzet{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 9px,transparent 9px 18px),var(--panel);
  border-radius:inherit;text-align:center;padding:12px;
}
.mv-aanzet span{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);
}
.mv-aanzet .btn{font-size:.8rem;padding:7px 14px}
.mv-wacht{visibility:hidden}
/* In een klein vak, zoals een miniatuur of een regiemonitor, past
   geen tekst. Daar wordt het een driehoekje. De woorden blijven wel
   in de code staan, zodat een schermlezer ze voorleest. */
.mon .mv-aanzet .mv-uit,
.thumb .mv-aanzet .mv-uit,
.screen .mv-aanzet .mv-uit{display:none}
.thumb .mv-aanzet .mv-woord,
.screen .mv-aanzet .mv-woord{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.thumb .mv-aanzet .btn::before,
.screen .mv-aanzet .btn::before{content:"\25B6";font-size:.72rem;line-height:1}
.thumb .mv-aanzet .btn,
.screen .mv-aanzet .btn{padding:8px 12px}

/* De partnerbalk bleef stilstaan zodra de muis erboven kwam. Dat was
   bedoeld om de logo's rustig te kunnen bekijken, maar in de praktijk
   staat je muis daar vaak gewoon en lijkt de balk stuk. Hij rolt nu
   altijd door. */
.klanten-venster:hover .klanten-spoor.loopt{animation-play-state:running}
.klanten-venster:focus-within .klanten-spoor.loopt{animation-play-state:paused}

/* ============================================================
   NIEUWE HOMEPAGE
   De opzet van een platformsite: een opening over de volle
   breedte, daaronder blokken die elk een vraag beantwoorden.
   Wie zijn jullie, wat doen jullie, voor wie, en wat kwam
   eruit. Alleen voor home-nieuw.html, de rest van de site
   verandert hier niet van.
   ============================================================ */

/* ---------- 1. de opening ---------- */
.kop-beeld{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(540px,78vh,760px);
  display:flex;align-items:flex-end;
  padding-block:clamp(70px,11vh,130px) clamp(54px,8vh,92px);
}
.kop-beeld-foto{
  position:absolute;inset:0;z-index:-2;
  background:url("fmt-16x9.jpg") center 38% / cover no-repeat;
  transform:scale(1.04);
  filter:saturate(.75) contrast(1.05);
}
.kop-beeld::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,14,18,.92) 0%,rgba(10,14,18,.6) 32%,rgba(10,14,18,.93) 78%,var(--ink) 100%),
    linear-gradient(90deg,rgba(10,14,18,.94) 0%,rgba(10,14,18,.5) 52%,rgba(10,14,18,.2) 100%),
    radial-gradient(70% 55% at 18% 72%,rgba(242,176,74,.16),transparent 70%);
}
.kop-beeld::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 86px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 86px);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.kop-beeld-binnen{position:relative;z-index:1}
.kop-beeld h1{
  font-size:clamp(2.6rem,1.4rem + 5.2vw,5.4rem);
  font-weight:700;letter-spacing:-.028em;line-height:.98;
  margin:0 0 20px;max-width:16ch;
}
.kop-beeld-regel{
  color:var(--text-2);font-size:clamp(1.02rem,.95rem + .35vw,1.26rem);
  line-height:1.55;max-width:56ch;margin-bottom:30px;
}
.kop-beeld .btn-row{gap:14px}
.kop-beeld-tally{
  position:absolute;top:clamp(22px,4vh,38px);right:max(24px,env(safe-area-inset-right,0px));z-index:1;
}
@media (max-width:760px){
  .kop-beeld{min-height:clamp(480px,68vh,620px)}
  .kop-beeld-tally{display:none}
  .kop-beeld .btn-row .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- 2. waar wij voor staan ---------- */
.uitspraak{padding-block:clamp(64px,8vw,116px)}
.uitspraak h2{
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.3rem);letter-spacing:-.022em;
  margin-bottom:34px;max-width:20ch;
}
.uitspraak-kolommen{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vw,54px);
  max-width:1000px;
}
.uitspraak-kolommen p{color:var(--text-2);font-size:1.04rem;line-height:1.72}
@media (max-width:760px){.uitspraak-kolommen{grid-template-columns:minmax(0,1fr)}}

/* ---------- 4. de pijlers ---------- */
.pijl{width:17px;height:17px;flex:none;transition:transform .2s ease}
.pijlers{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:34px;border-radius:var(--radius-m);overflow:hidden;
}
.pijler{
  background:var(--ink-2);padding:26px 22px 22px;
  display:flex;flex-direction:column;gap:12px;min-width:0;
  text-decoration:none;color:inherit;position:relative;
  transition:background .2s ease;
}
.pijler::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.pijler:hover{background:var(--panel)}
.pijler:hover::before{transform:scaleX(1)}
.pijler:hover .pijl{transform:translateX(4px)}
.pijler-icoon{width:30px;height:30px;color:var(--amber);flex:none}
.pijler h3{font-size:1.04rem;letter-spacing:-.004em;text-wrap:balance}
.pijler p{color:var(--text-2);font-size:.9rem;line-height:1.58;flex:1}
.pijler-voet{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding-top:12px;margin-top:4px;color:var(--text-3);
}
.pijler-voet em{font-family:var(--mono);font-style:normal;font-size:.76rem;letter-spacing:.02em}
.pijlers-voet{margin-top:22px;color:var(--text-3);font-size:.92rem}
.pijlers-voet a{
  color:var(--amber);text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.pijlers-voet a:hover .pijl{transform:translateX(4px)}
@media (max-width:1060px){.pijlers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pijlers{grid-template-columns:minmax(0,1fr)}}

/* ---------- 5. cijfers ---------- */
.cijfers-raster{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,4vw,64px);align-items:center;
}
.cijfer-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);margin-top:26px}
.cijfer{border-top:1px solid var(--line);padding-top:16px;position:relative}
.cijfer::before{content:"";position:absolute;top:-1px;left:0;width:26px;height:1px;background:var(--amber)}
.cijfer b{
  display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(2.1rem,1.3rem + 2.6vw,3.6rem);line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.cijfer small{
  display:block;margin-top:10px;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);line-height:1.6;
}
.cijfers-beeld{border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--rand-licht)}
.cijfers-beeld img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
@media (max-width:860px){
  .cijfers-raster{grid-template-columns:minmax(0,1fr)}
  .cijfers-beeld{max-height:300px}
}
@media (max-width:460px){.cijfer-rij{grid-template-columns:minmax(0,1fr)}}

/* ---------- 6. cases ---------- */
.zaken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.zaak{
  background:var(--glas);backdrop-filter:blur(10px);
  border:1px solid var(--rand-licht);border-radius:var(--radius-m);
  padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0;
  transition:border-color .2s ease,transform .2s ease;
}
.zaak:hover{border-color:rgba(242,176,74,.3);transform:translateY(-2px)}
.zaak-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:34px}
.zaak-logo{max-height:34px;max-width:124px;width:auto;height:auto;opacity:.78}
.zaak-soort{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(242,176,74,.3);border-radius:4px;padding:4px 8px;white-space:nowrap;
}
.zaak h3{font-size:1.16rem;letter-spacing:-.01em;text-wrap:balance}
.zaak p{color:var(--text-2);font-size:.92rem;line-height:1.6;flex:1}
.zaak-chips{display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid var(--line);padding-top:14px}
.zaak-chips span{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--text-3);
  border:1px solid var(--line);border-radius:4px;padding:4px 8px;
}
@media (max-width:900px){.zaken{grid-template-columns:minmax(0,1fr)}}

/* ---------- 7. recente producties ---------- */
.prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.prod{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;min-width:0;
}
.prod-beeld{
  display:block;border-radius:var(--radius-m);overflow:hidden;
  border:1px solid var(--rand-licht);aspect-ratio:4/5;background:var(--panel);
}
.prod-beeld img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .4s cubic-bezier(.3,0,.2,1);
}
.prod:hover .prod-beeld img{transform:scale(1.035)}
.prod-tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
}
.prod h3{font-size:1.1rem;letter-spacing:-.008em}
.prod p{color:var(--text-2);font-size:.9rem;line-height:1.55}
.prod-meer{
  display:inline-flex;align-items:center;gap:7px;color:var(--text-3);font-size:.86rem;margin-top:2px;
}
.prod:hover .prod-meer{color:var(--amber)}
.prod:hover .pijl{transform:translateX(4px)}
@media (max-width:860px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.prods{grid-template-columns:minmax(0,1fr)}.prod-beeld{aspect-ratio:16/10}}

/* ---------- 8. de afsluiting ---------- */
.slot{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(70px,10vw,130px);border-top:1px solid var(--line);
}
.slot-foto{
  position:absolute;inset:0;z-index:-2;
  background:url("fmt-9x16.jpg") center 30% / cover no-repeat;
  filter:saturate(.6);
}
.slot::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(10,14,18,.96) 0%,rgba(10,14,18,.82) 56%,rgba(10,14,18,.6) 100%),
    radial-gradient(60% 70% at 15% 50%,rgba(242,176,74,.14),transparent 70%);
}
.slot-binnen{position:relative;z-index:1}
.slot h2{font-size:clamp(1.8rem,1.1rem + 2.6vw,3.1rem);letter-spacing:-.022em;max-width:20ch;margin-bottom:14px}
.slot p{color:var(--text-2);font-size:1.04rem;max-width:52ch;margin-bottom:26px}
@media (max-width:620px){.slot .btn-row .btn{flex:1 1 100%;justify-content:center}}

/* de nieuwe homepage telt zijn eigen blokken, los van de oude */
body[data-pagina="index"] .kop-beeld ~ .section{counter-increment:sectie}

/* ---------- beweging op de nieuwe homepage ----------
   De klassen hieronder worden door animatie.js gezet. Draait dat
   script niet, dan staat alles er gewoon, zonder dat er iets
   verborgen blijft. */
.beweegt .op-komst{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.beweegt .op-komst.is-er{opacity:1;transform:none}

/* de foto in de opening zoomt heel langzaam in, zodat het beeld
   leeft zonder dat je het als beweging ziet */
.beweegt .kop-beeld-foto{animation:langzaam-in 26s ease-out forwards}
@keyframes langzaam-in{
  from{transform:scale(1.04)}
  to{transform:scale(1.13)}
}

/* het tellertje mag niet verspringen in breedte */
.cijfer b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .beweegt .op-komst{opacity:1;transform:none;transition:none}
  .beweegt .kop-beeld-foto{animation:none}
}