/* videograaf-kennismaking: block-port van ReactBitsPro Blocks/contact-10 (twee kolommen, links kop, intro en vier
   punten, rechts een donkere kaart met het formulier) met React Bits Pro rising-lines (origineel, three) als
   achtergrond van de hele sectie. Tailwind vertaald naar gescopete CSS; kleuren alleen via --m-*-tokens. */
.msm-videograaf-kennismaking{--vgk-p:var(--m-primary,#e55b34);--vgk-bg:var(--m-bg,#11130f);--vgk-ink:var(--m-ink,#f5f2ea);--vgk-s:var(--m-surface,#1a1d18);--vgk-mu:var(--m-muted,#a9a596);--vgk-a:var(--m-accent2,#e9dfc6);--vgk-l:var(--m-line,#2b2e28);--vgk-ease:cubic-bezier(.22,1,.36,1);position:relative;scroll-margin-top:112px;padding:64px 16px;background:var(--vgk-bg);color:var(--vgk-ink);font-family:var(--m-font-body,"DM Sans",Arial,sans-serif);font-size:16px;line-height:1.55;overflow:hidden;isolation:isolate}
.msm-videograaf-kennismaking *{box-sizing:border-box}

/* rising-lines: host over de hele sectie, de inhoud ligt erboven */
.msm-videograaf-kennismaking .vgk-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--vgk-bg)}
.msm-videograaf-kennismaking .vgk-bg .rising-lines{position:absolute;inset:0;overflow:hidden}
.msm-videograaf-kennismaking .vgk-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.msm-videograaf-kennismaking .vgk-wrap{position:relative;z-index:1;width:min(1400px,100%);margin:0 auto}

/* Raster: één kolom met gap 40 px, vanaf lg 0,9fr en 1,1fr met gap 64 px, items-start */
.msm-videograaf-kennismaking .vgk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
.msm-videograaf-kennismaking .vgk-copy{display:flex;flex-direction:column;min-width:0}
.msm-videograaf-kennismaking .vgk-title{margin:0;font:700 clamp(36px,4.6vw,60px)/1.05 var(--m-font-display,"Syne","Arial Black",sans-serif);letter-spacing:-.025em;color:var(--vgk-ink)}
.msm-videograaf-kennismaking .vgk-intro{margin:24px 0 0;max-width:448px;color:var(--vgk-mu);font-size:16px;line-height:1.65;text-wrap:pretty}
.msm-videograaf-kennismaking .vgk-points{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 32px;margin-top:48px}
.msm-videograaf-kennismaking .vgk-point{display:flex;gap:16px}
.msm-videograaf-kennismaking .vgk-num{flex:0 0 auto;margin-top:3px;color:var(--vgk-mu);font:600 12px/1 var(--m-font-display,"Syne","Arial Black",sans-serif);letter-spacing:.08em}
.msm-videograaf-kennismaking .vgk-point-title{margin:0;color:var(--vgk-ink);font-size:16px;font-weight:600;line-height:1.4}
.msm-videograaf-kennismaking .vgk-point-text{margin:4px 0 0;color:var(--vgk-mu);font-size:14px;line-height:1.65}

/* De kaart: rounded-3xl, rand, --m-surface, p-6 tot p-10, zware schaduw */
.msm-videograaf-kennismaking .vgk-card{min-width:0;padding:24px;border:1px solid var(--vgk-l);border-radius:24px;background:var(--vgk-s);box-shadow:0 25px 50px -12px rgba(0,0,0,.45)}

/* De boekingsdemo neemt de velden en de knop van de bron over: radius 0,75 rem, --m-bg, rand, focusring op --m-ink 15 %,
   labels van 14 px erboven, een volle lichte knop die bij hover 1 px omhoog gaat en bij een tik 0,99 schaalt */
.msm-videograaf-kennismaking .ms-widget{max-width:none;color:var(--vgk-ink)}
.msm-videograaf-kennismaking .ms-widget .ms-eyebrow{color:var(--vgk-mu)}
.msm-videograaf-kennismaking .ms-widget .ms-title{font-family:var(--m-font-display,"Syne","Arial Black",sans-serif);letter-spacing:-.02em;color:var(--vgk-ink)}
.msm-videograaf-kennismaking .ms-widget .ms-intro,.msm-videograaf-kennismaking .ms-widget .ms-hint,.msm-videograaf-kennismaking .ms-widget .ms-privacy{color:var(--vgk-mu)}
.msm-videograaf-kennismaking .ms-widget .ms-label,.msm-videograaf-kennismaking .ms-widget label{color:color-mix(in srgb,var(--vgk-ink) 82%,var(--vgk-s));font-size:14px;font-weight:500}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] input,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] select,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] textarea{width:100%;border:1px solid var(--vgk-l);border-radius:12px;background:var(--vgk-bg);color:var(--vgk-ink);padding:12px 16px;font:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] input::placeholder,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] textarea::placeholder{color:var(--vgk-mu)}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] input:focus-visible,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] select:focus-visible,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] textarea:focus-visible{outline:none;border-color:color-mix(in srgb,var(--vgk-ink) 45%,var(--vgk-bg));box-shadow:0 0 0 2px color-mix(in srgb,var(--vgk-ink) 15%,transparent)}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] select option{color:var(--vgk-ink);background:var(--vgk-bg)}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-submit,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-step-next{width:100%;min-height:48px;padding:14px 24px;border:0;border-radius:999px;background:var(--vgk-ink);color:var(--vgk-bg);font-size:14px;font-weight:600;box-shadow:none;cursor:pointer;transition:transform .2s var(--vgk-ease),background-color .2s}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-submit:hover,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-step-next:hover{background:color-mix(in srgb,var(--vgk-ink) 86%,var(--vgk-s));filter:none;transform:translateY(-1px)}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-submit:active,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-step-next:active{transform:scale(.99);box-shadow:none}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-submit:focus-visible,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-step-next:focus-visible{outline:2px solid var(--vgk-ink);outline-offset:2px}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-step-back{border-radius:999px;color:var(--vgk-ink)}

@media (min-width:640px){
.msm-videograaf-kennismaking{padding:80px 24px}
.msm-videograaf-kennismaking .vgk-title{font-size:clamp(44px,4.8vw,60px)}
.msm-videograaf-kennismaking .vgk-intro{font-size:18px}
.msm-videograaf-kennismaking .vgk-points{grid-template-columns:repeat(2,minmax(0,1fr))}
.msm-videograaf-kennismaking .vgk-card{padding:32px}
}
@media (min-width:1024px){
.msm-videograaf-kennismaking{padding:96px 32px}
.msm-videograaf-kennismaking .vgk-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px}
.msm-videograaf-kennismaking .vgk-points{grid-template-columns:minmax(0,1fr)}
.msm-videograaf-kennismaking .vgk-card{padding:40px}
}
@media (min-width:1280px){
.msm-videograaf-kennismaking .vgk-points{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-submit,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-step-next,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] input,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] select,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] textarea{transition:none}
.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-submit:hover,.msm-videograaf-kennismaking .ms-widget[data-ms-theme] .ms-step-next:hover{transform:none}
}