/* videograaf-footer 1.0.0 · 21st-port van @solaceui/footer-section-5 (21st.dev). Tailwind-maten uit de bron: footer
   w-full relative overflow-hidden; merknaam text-[120px] sm:160 md:210 font-semibold text-transparent
   [-webkit-text-stroke:1px] leading-[0.75] select-none -mb-4 md:-mb-6 in een vlak pt-24 md:pt-32 flex justify-center
   items-end z-0; gekleurd paneel relative z-10 min-h-[400px] met de FlutedGlass-shader absolute inset-0 pointer-events-
   none (hier CSS-ribbels van 12 px met highlight en schaduw en SVG-ruis op 6%); inhoud max-w-7xl px-6/12/24 py-16/24
   flex-col lg:flex-row justify-between gap-16 lg:gap-8; links flex-col justify-between max-w-sm (kop xl/22px font-medium
   leading-tight, onderaan gap-3 mt-12 lg:mt-auto pt-8, copyright font-light xs/13px op 80%); rechts flex gap-12
   md:gap-24 flex-wrap lg:flex-nowrap met kolommen gap-5, h3 font-semibold lg/xl, ul gap-3/4, links op 70% naar vol
   bij hover, sm/15px font-medium. Geen animatie in de bron. */
.msm-videograaf-footer {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--m-bg, #11130f);
  color: var(--m-ink, #f5f2ea);
  font-family: var(--m-font-body, 'DM Sans', ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.msm-videograaf-footer *,
.msm-videograaf-footer *::before,
.msm-videograaf-footer *::after { box-sizing: border-box; }
.msm-videograaf-footer p,
.msm-videograaf-footer h3,
.msm-videograaf-footer ul { margin: 0; }
.msm-videograaf-footer ul { padding: 0; list-style: none; }
.msm-videograaf-footer a { color: inherit; text-decoration: none; }
.msm-videograaf-footer a:focus-visible { outline: 2px solid var(--m-primary, #e55b34); outline-offset: 3px; border-radius: 3px; }

/* De reusachtige omlijnde merknaam, half achter het paneel. */
.msm-videograaf-footer .kf-mark-wrap {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  padding: 96px 0 0;
}
.msm-videograaf-footer .kf-mark {
  margin: 0 0 -16px;
  font-family: var(--m-font-display, 'Syne', ui-sans-serif, system-ui, sans-serif);
  font-weight: 600;
  font-size: 120px;
  line-height: .75;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--m-ink, #f5f2ea) 40%, transparent);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* Het gekleurde paneel in warm papier met het geribbelde glas als achtergrondlaag. */
.msm-videograaf-footer .kf-panel {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 400px;
  background: var(--m-accent2, #e9dfc6);
  color: var(--m-bg, #11130f);
}
.msm-videograaf-footer .kf-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 26%),
    linear-gradient(0deg, rgba(0, 0, 0, .14) 0, rgba(0, 0, 0, 0) 32%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 2px, rgba(255, 255, 255, 0) 2px 6px, rgba(0, 0, 0, .10) 6px 8px, rgba(0, 0, 0, 0) 8px 12px);
}
.msm-videograaf-footer .kf-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}
.msm-videograaf-footer .kf-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px;
}

/* Links: merknaam en tagline bovenaan, links en copyright onderaan. */
.msm-videograaf-footer .kf-left { display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-width: 24rem; }
.msm-videograaf-footer .kf-head { display: flex; flex-direction: column; gap: 10px; }
.msm-videograaf-footer .kf-brand {
  font-family: var(--m-font-display, 'Syne', ui-sans-serif, system-ui, sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}
.msm-videograaf-footer .kf-tagline { font-size: 20px; font-weight: 500; line-height: 1.25; }
.msm-videograaf-footer .kf-bottom { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; padding-top: 32px; }
.msm-videograaf-footer .kf-quick { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; font-weight: 500; }
.msm-videograaf-footer .kf-quick a { color: color-mix(in srgb, var(--m-bg, #11130f) 70%, transparent); transition: color .15s ease; }
.msm-videograaf-footer .kf-quick a:hover { color: var(--m-bg, #11130f); }
.msm-videograaf-footer .kf-copy,
.msm-videograaf-footer .kf-note { font-size: 12px; font-weight: 400; line-height: 1.5; color: color-mix(in srgb, var(--m-bg, #11130f) 80%, transparent); }
.msm-videograaf-footer .kf-copy { margin-top: 4px; }

/* Rechts: drie linkkolommen met koppen. */
.msm-videograaf-footer .kf-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.msm-videograaf-footer .kf-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.msm-videograaf-footer .kf-col-title {
  font-family: var(--m-font-display, 'Syne', ui-sans-serif, system-ui, sans-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
}
.msm-videograaf-footer .kf-list { display: flex; flex-direction: column; gap: 12px; }
.msm-videograaf-footer .kf-list a,
.msm-videograaf-footer .kf-list span { font-size: 14px; font-weight: 500; line-height: 1.4; color: color-mix(in srgb, var(--m-bg, #11130f) 70%, transparent); }
.msm-videograaf-footer .kf-list a { transition: color .15s ease; }
.msm-videograaf-footer .kf-list a:hover { color: var(--m-bg, #11130f); }
.msm-videograaf-footer .kf-list li { max-width: 22rem; }

@media (min-width: 640px) {
  .msm-videograaf-footer .kf-mark { font-size: 160px; }
}
@media (min-width: 768px) {
  .msm-videograaf-footer .kf-mark-wrap { padding-top: 128px; }
  .msm-videograaf-footer .kf-mark { margin-bottom: -24px; font-size: 210px; }
  .msm-videograaf-footer .kf-content { padding: 96px 48px; }
  .msm-videograaf-footer .kf-tagline { font-size: 22px; }
  .msm-videograaf-footer .kf-copy,
  .msm-videograaf-footer .kf-note { font-size: 13px; }
  .msm-videograaf-footer .kf-cols { gap: 96px; }
  .msm-videograaf-footer .kf-col-title { font-size: 20px; }
  .msm-videograaf-footer .kf-list { gap: 16px; }
  .msm-videograaf-footer .kf-list a,
  .msm-videograaf-footer .kf-list span { font-size: 15px; }
}
@media (min-width: 1024px) {
  .msm-videograaf-footer .kf-content { flex-direction: row; gap: 32px; padding: 96px 96px; }
  .msm-videograaf-footer .kf-bottom { margin-top: auto; }
  .msm-videograaf-footer .kf-cols { flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-videograaf-footer .kf-quick a,
  .msm-videograaf-footer .kf-list a { transition: none; }
}