/* videograaf-werkwijze: werkwijze van de videograafpreview Kaderlicht (fictief).
   Bronnen: React Bits Pro Blocks/features-6 (block-port: vier kaarten met woordreveal en kleurvlek bij hover)
   en Blocks/bento-16 (block-port: isometrische lagenstapel die kantelt met de aanwijzer en uit elkaar schuift).
   Alles gescoped onder .msm-videograaf-werkwijze. */
.msm-videograaf-werkwijze{--vw-p:var(--m-primary,#e55b34);--vw-bg:var(--m-bg,#11130f);--vw-ink:var(--m-ink,#f5f2ea);--vw-s:var(--m-surface,#1a1d18);--vw-mu:var(--m-muted,#a9a596);--vw-a:var(--m-accent2,#e9dfc6);--vw-l:var(--m-line,#2b2e28);--vw-fd:var(--m-font-display,"Syne","Segoe UI",system-ui,sans-serif);--vw-fb:var(--m-font-body,"DM Sans","Segoe UI",system-ui,sans-serif);--vw-ease:cubic-bezier(.22,1,.36,1);position:relative;scroll-margin-top:112px;padding:48px 16px;background:var(--vw-bg);color:var(--vw-ink);font-family:var(--vw-fb);font-size:16px;line-height:1.5}
.msm-videograaf-werkwijze *{box-sizing:border-box}
.msm-videograaf-werkwijze [hidden]{display:none!important}
.msm-videograaf-werkwijze .vw-wrap{max-width:1400px;margin:0 auto;width:100%}
.msm-videograaf-werkwijze .vw-title{margin:0;max-width:48rem;font:500 clamp(30px,4vw,48px)/1.15 var(--vw-fd);letter-spacing:-.02em;color:var(--vw-ink);text-wrap:balance}

/* features-6: vier kaarten */
.msm-videograaf-werkwijze .vw-cards{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
.msm-videograaf-werkwijze .vw-card{position:relative;display:flex;flex-direction:column;min-height:360px;padding:24px;border-radius:16px;background:var(--vw-s);overflow:hidden;outline:none}
.msm-videograaf-werkwijze .vw-card:focus-visible{box-shadow:0 0 0 2px var(--vw-bg),0 0 0 4px var(--vw-ink)}
.msm-videograaf-werkwijze .vw-blob{position:absolute;left:50%;bottom:-96px;width:256px;height:256px;border-radius:50%;filter:blur(12px);background:radial-gradient(circle,var(--vw-blob) 0%,transparent 70%);opacity:0;transform:translateX(-50%) scale(.75);transition:opacity .3s ease-out,transform .3s ease-out;pointer-events:none}
.msm-videograaf-werkwijze .vw-card.is-hot .vw-blob,.msm-videograaf-werkwijze .vw-card:focus-within .vw-blob{opacity:.7;transform:translateX(-50%) scale(1)}
.msm-videograaf-werkwijze .vw-icon{position:relative;width:20px;height:20px;fill:none;stroke:var(--vw-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msm-videograaf-werkwijze .vw-desc{position:relative;margin:12px 0 0;max-width:220px;color:var(--vw-mu);font-size:13px;line-height:1.625;pointer-events:none}
.msm-videograaf-werkwijze .vw-w{display:inline-block;margin-right:.25em;opacity:0;transform:translateY(4px);filter:blur(3px);transition:opacity .3s var(--vw-ease),transform .3s var(--vw-ease),filter .3s var(--vw-ease);transition-delay:0s}
.msm-videograaf-werkwijze .vw-card.is-hot .vw-w,.msm-videograaf-werkwijze .vw-card:focus-within .vw-w{opacity:1;transform:none;filter:blur(0);transition-delay:calc(var(--i,0) * .03s)}
.msm-videograaf-werkwijze .vw-foot{position:relative;display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:32px}
.msm-videograaf-werkwijze .vw-card-title{color:var(--vw-ink);font-size:16px}
.msm-videograaf-werkwijze .vw-arrow{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--vw-ink) 12%,var(--vw-s));color:var(--vw-ink);transition:background-color .3s,color .3s}
.msm-videograaf-werkwijze .vw-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.msm-videograaf-werkwijze .vw-card.is-hot .vw-arrow,.msm-videograaf-werkwijze .vw-card:focus-within .vw-arrow{background:var(--vw-blob);color:var(--vw-blob-ink)}
.msm-videograaf-werkwijze .vw-card.is-hot .vw-arrow svg,.msm-videograaf-werkwijze .vw-card:focus-within .vw-arrow svg{transform:translateX(2px)}

/* bento-16: lagenstapel */
.msm-videograaf-werkwijze .vw-montage{scroll-margin-top:112px;margin-top:56px}
.msm-videograaf-werkwijze .vw-bento{position:relative;display:flex;flex-direction:column;width:100%;min-height:380px;border-radius:24px;border:1px solid var(--vw-l);background:var(--vw-s);overflow:hidden}
.msm-videograaf-werkwijze .vw-stage{position:relative;display:flex;flex-direction:column;flex:1;min-height:300px;overflow:hidden}
.msm-videograaf-werkwijze .vw-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,color-mix(in srgb,var(--vw-ink) 10%,transparent) 1px,transparent 1px);background-size:16px 16px;-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 70%)}
.msm-videograaf-werkwijze .vw-tiltwrap{position:relative;display:flex;align-items:center;justify-content:center;height:300px;padding:16px;perspective:900px;touch-action:pan-y}
.msm-videograaf-werkwijze .vw-tilt{position:relative;flex-shrink:0;width:240px;height:240px;margin-top:110px;transform-style:preserve-3d;transform:scale(.85) rotateX(var(--vw-rx,0deg)) rotateY(var(--vw-ry,0deg))}
.msm-videograaf-werkwijze .vw-glow{position:absolute;inset:34px;border-radius:50%;background:color-mix(in srgb,var(--vw-ink) 6%,transparent);filter:blur(40px);pointer-events:none}
.msm-videograaf-werkwijze .vw-stack{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.msm-videograaf-werkwijze .vw-layer{transform:translateY(var(--vw-y,0px));transition:transform .55s var(--vw-ease);cursor:pointer}
.msm-videograaf-werkwijze .vw-side-l{fill:color-mix(in srgb,var(--vw-ink) 22%,var(--vw-bg))}
.msm-videograaf-werkwijze .vw-side-r{fill:color-mix(in srgb,var(--vw-ink) 12%,var(--vw-bg))}
.msm-videograaf-werkwijze .vw-top{fill:var(--vw-bg);stroke:var(--vw-l);stroke-width:1;transition:fill .3s,stroke .3s}
.msm-videograaf-werkwijze .vw-grid{stroke:color-mix(in srgb,var(--vw-ink) 10%,transparent);stroke-width:.75;transition:stroke .3s}
.msm-videograaf-werkwijze .vw-layer-icon{fill:none;stroke:var(--vw-mu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:stroke .3s}
.msm-videograaf-werkwijze .vw-fill{opacity:.82;transition:opacity .3s}
.msm-videograaf-werkwijze .vw-rim{fill:none;stroke:var(--vw-l);stroke-width:1;transition:stroke .3s,stroke-width .3s}
.msm-videograaf-werkwijze .vw-layer.is-lit .vw-side-l{fill:color-mix(in srgb,var(--vw-ink) 72%,var(--vw-bg))}
.msm-videograaf-werkwijze .vw-layer.is-lit .vw-side-r{fill:color-mix(in srgb,var(--vw-ink) 84%,var(--vw-bg))}
.msm-videograaf-werkwijze .vw-layer.is-lit .vw-top{fill:var(--vw-ink);stroke:var(--vw-ink)}
.msm-videograaf-werkwijze .vw-layer.is-lit .vw-grid{stroke:color-mix(in srgb,var(--vw-bg) 20%,transparent)}
.msm-videograaf-werkwijze .vw-layer.is-lit .vw-layer-icon{stroke:var(--vw-bg)}
.msm-videograaf-werkwijze .vw-layer.is-lit .vw-fill{opacity:1}
.msm-videograaf-werkwijze .vw-layer.is-lit .vw-rim{stroke:var(--vw-ink);stroke-width:1.5}
.msm-videograaf-werkwijze .vw-pill{position:absolute;right:-32px;top:calc(144px + var(--vw-y,0px));display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--vw-l);border-radius:999px;background:var(--vw-bg);color:var(--vw-mu);font-size:11px;font-weight:500;line-height:1.2;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.25);opacity:.55;transform:translateZ(22px);transition:top .55s var(--vw-ease),opacity .55s var(--vw-ease),background-color .2s,color .2s,border-color .2s;pointer-events:none}
.msm-videograaf-werkwijze .vw-pill.is-lit{border-color:var(--vw-ink);background:var(--vw-ink);color:var(--vw-bg)}
.msm-videograaf-werkwijze .vw-pill.is-on,.msm-videograaf-werkwijze .vw-pill.is-lit{opacity:1}
.msm-videograaf-werkwijze .vw-meta{position:absolute;left:50%;bottom:0;padding:4px 10px;border-radius:999px;background:var(--vw-ink);color:var(--vw-bg);font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.25);opacity:0;transform:translateX(-50%) translateY(4px) translateZ(30px);transition:opacity .2s,transform .2s;pointer-events:none}
.msm-videograaf-werkwijze .vw-meta.is-on{opacity:1;transform:translateX(-50%) translateY(0) translateZ(30px)}
.msm-videograaf-werkwijze .vw-meta:empty{display:none}
.msm-videograaf-werkwijze .vw-float{position:absolute;left:-38%;top:12%;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--vw-l);border-radius:999px;background:var(--vw-bg);color:var(--vw-mu);font-size:11px;font-weight:500;line-height:1.2;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.25);transform:translateZ(22px);animation:vw-bob 4.2s ease-in-out infinite;will-change:transform}
.msm-videograaf-werkwijze .vw-float svg{width:12px;height:12px;fill:none;stroke:var(--vw-mu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes vw-bob{0%,100%{transform:translateZ(22px) translateY(0)}50%{transform:translateZ(22px) translateY(-5px)}}
.msm-videograaf-werkwijze .vw-aside{width:148px}
.msm-videograaf-werkwijze .vw-aside-left{display:none;position:absolute;left:24px;top:50%;transform:translateY(-50%)}
.msm-videograaf-werkwijze .vw-eyebrow{margin:0;color:var(--vw-mu);font-size:11px;font-weight:500}
.msm-videograaf-werkwijze .vw-aside-text{margin:8px 0 0;color:var(--vw-a);font-size:12px;line-height:1.625}
.msm-videograaf-werkwijze .vw-aside-right{display:flex;flex-wrap:wrap;gap:4px;width:auto;padding:0 16px 8px}
.msm-videograaf-werkwijze .vw-layer-btn{display:flex;align-items:flex-start;gap:8px;width:auto;padding:8px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s}
.msm-videograaf-werkwijze .vw-layer-btn:hover,.msm-videograaf-werkwijze .vw-layer-btn[aria-pressed="true"]{background:color-mix(in srgb,var(--vw-ink) 8%,transparent)}
.msm-videograaf-werkwijze .vw-layer-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--vw-mu)}
.msm-videograaf-werkwijze .vw-layer-btn svg{flex-shrink:0;margin-top:2px;width:14px;height:14px;fill:none;stroke:var(--vw-mu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msm-videograaf-werkwijze .vw-btn-label{display:block;color:var(--vw-ink);font-size:11px;font-weight:500}
.msm-videograaf-werkwijze .vw-btn-meta{display:block;margin-top:2px;color:var(--vw-mu);font-size:10px}
.msm-videograaf-werkwijze .vw-bento-foot{padding:8px 24px 24px}
.msm-videograaf-werkwijze .vw-bento-title{margin:0;font:600 16px/1.3 var(--vw-fd);letter-spacing:-.01em;color:var(--vw-ink)}
.msm-videograaf-werkwijze .vw-bento-text{margin:6px 0 0;color:var(--vw-mu);font-size:14px;line-height:1.625}

/* vlak en gegradeerd naast elkaar */
.msm-videograaf-werkwijze .vw-compare{display:grid;grid-template-columns:1fr;gap:16px;margin:20px 0 0}
.msm-videograaf-werkwijze .vw-compare-item img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;border:1px solid var(--vw-l)}
.msm-videograaf-werkwijze .vw-compare figcaption{margin-top:8px;color:var(--vw-mu);font-size:13px}

@media (min-width:640px){
.msm-videograaf-werkwijze{padding:64px 24px}
.msm-videograaf-werkwijze .vw-cards{grid-template-columns:repeat(2,1fr);margin-top:56px}
.msm-videograaf-werkwijze .vw-desc{font-size:14px}
.msm-videograaf-werkwijze .vw-card-title{font-size:18px}
.msm-videograaf-werkwijze .vw-tilt{transform:scale(1) rotateX(var(--vw-rx,0deg)) rotateY(var(--vw-ry,0deg))}
.msm-videograaf-werkwijze .vw-compare{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
.msm-videograaf-werkwijze{padding:64px 32px}
.msm-videograaf-werkwijze .vw-cards{grid-template-columns:repeat(4,1fr)}
.msm-videograaf-werkwijze .vw-stage{min-height:380px}
.msm-videograaf-werkwijze .vw-tiltwrap{position:absolute;inset:0;height:auto}
.msm-videograaf-werkwijze .vw-tilt{transform:scale(1.12) rotateX(var(--vw-rx,0deg)) rotateY(var(--vw-ry,0deg))}
.msm-videograaf-werkwijze .vw-aside-left{display:block}
.msm-videograaf-werkwijze .vw-aside-right{position:absolute;right:24px;top:50%;display:block;width:148px;padding:0;transform:translateY(-50%)}
.msm-videograaf-werkwijze .vw-layer-btn{width:100%}
}
@media (hover:none){
.msm-videograaf-werkwijze .vw-w{opacity:1;transform:none;filter:none}
}
@media (prefers-reduced-motion:reduce){
.msm-videograaf-werkwijze .vw-w{opacity:1;transform:none;filter:none;transition:none}
.msm-videograaf-werkwijze .vw-layer,.msm-videograaf-werkwijze .vw-pill,.msm-videograaf-werkwijze .vw-meta,.msm-videograaf-werkwijze .vw-blob{transition:none}
.msm-videograaf-werkwijze .vw-float{animation:none}
.msm-videograaf-werkwijze .vw-tilt{transform:scale(1)!important}
}