/* ===========================================================================
   KVK motion — public styles for the /motion side of the site
   ---------------------------------------------------------------------------
   Standalone: does NOT extend portfolio.css, so nothing here can leak into
   the furniture pages and vice versa. Same two typefaces (Geist + DM Mono)
   so the two halves still read as one person.

   Structure borrowed from higgsfield.ai's studio UI:
     · cool near-black ground (#131416 — blue-leaning, not neutral grey)
     · surfaces made of translucent WHITE over that ground, never lighter greys
     · hairline borders at 8–16% white
     · text hierarchy by OPACITY (100 / 70 / 40 / 28), not by different colours
     · 8/12/16px radii, inset top sheen instead of drop shadows
   Accent is our own: a cool teal, the complement of the furniture side's
   warm brown. Change --mo-accent in one place to reskin.
   =========================================================================== */

:root {
  --mo-bg:            #131416;
  --mo-bg-alt:        #18191c;
  --mo-bg-deep:       #0e0f11;

  --mo-surface:       rgba(255, 255, 255, 0.05);
  --mo-surface-hover: rgba(255, 255, 255, 0.08);

  --mo-border:        rgba(255, 255, 255, 0.08);
  --mo-border-strong: rgba(255, 255, 255, 0.16);

  --mo-text:          #ffffff;
  --mo-text-soft:     rgba(255, 255, 255, 0.70);
  --mo-muted:         rgba(255, 255, 255, 0.40);
  --mo-faint:         rgba(255, 255, 255, 0.28);

  --mo-accent:        #2ed3c6;
  --mo-accent-soft:   rgba(46, 211, 198, 0.12);
  --mo-accent-line:   rgba(46, 211, 198, 0.35);

  --mo-sheen:         inset 0 1px 2px rgba(255, 255, 255, 0.05);

  --mo-display: 'Geist', system-ui, -apple-system, sans-serif;
  --mo-sans:    'Geist', system-ui, -apple-system, sans-serif;
  --mo-mono:    'DM Mono', 'SF Mono', ui-monospace, monospace;

  --mo-bar-h:   64px;
  /* Reading column for prose; media may widen to --mo-wide. */
  --mo-col:     740px;
  --mo-wide:    1100px;
}
@media (max-width: 640px) {
  :root { --mo-bar-h: 52px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.mo {
  background: var(--mo-bg);
  color: var(--mo-text-soft);
  font-family: var(--mo-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--mo-bar-h);
  /* Korte pagina — één project, of een over-pagina van drie alinea's —
     liet de voettekst halverwege het scherm eindigen met een gat eronder.
     Kolom-flex plus margin-top:auto duwt hem naar de onderrand, ongeacht
     hoeveel inhoud erboven staat. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Let op: een flex-item met `margin: 0 auto` rekt niet uit maar krimpt
   tot zijn inhoud — dat maakte het overzicht één klein postzegeltje.
   Daarom hier expliciet de volle breedte; de max-width binnenin doet de
   rest en de auto-marges centreren nog steeds. */
body.mo > main,
body.mo > .pf-footer,
body.mo > .mo-loading,
body.mo > .mo-not-found {
  width: 100%;
  /* Tell the browser this is a dark surface so form controls,
     scrollbars and the address bar match. */
  color-scheme: dark;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.mo-hidden, .hidden { display: none !important; }

/* ─── Top bar ────────────────────────────────────────────── */
.mo-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--mo-bar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.5rem;
  background: rgba(19, 20, 22, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
  z-index: 50;
}
.mo-bar.has-border { border-bottom-color: var(--mo-border); }
.mo-bar-title {
  grid-column: 2;
  font-family: var(--mo-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--mo-text);
  white-space: nowrap;
}
.mo-bar-left  { grid-column: 1; display: flex; gap: 1.25rem; align-items: center; }
.mo-bar-right { grid-column: 3; display: flex; gap: 1.25rem; align-items: center; justify-content: flex-end; }
.mo-bar-link {
  font-family: var(--mo-sans);
  font-size: 14px;
  color: var(--mo-muted);
  transition: color 0.2s;
  white-space: nowrap;
  /* De filterknop is een <button> en zou anders de standaard knop-
     achtergrond van de browser pakken. */
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.mo-bar-link:hover { color: var(--mo-text); }
@media (max-width: 640px) {
  .mo-bar { padding: 0 1rem; }
  .mo-bar-link { font-size: 12px; }
}

/* ─── Filter ─────────────────────────────────────────────── */
/* Zelfde plek en gedrag als op de meubelsite, in de donkere opmaak. */
.mo-filter-wrap { position: relative; }
.mo-filter-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 200px;
  padding: 6px;
  background: var(--mo-bg-alt);
  border: 1px solid var(--mo-border-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 60;
}
.mo-filter-wrap.open .mo-filter-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mo-filter-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--mo-text-soft);
  font-family: var(--mo-sans);
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.mo-filter-item:hover { background: var(--mo-surface); color: var(--mo-text); }
.mo-filter-item.active { color: var(--mo-accent); }
.mo-filter-item .count {
  font-family: var(--mo-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mo-faint);
  margin-left: 8px;
}
.mo-filter-divider { height: 1px; background: var(--mo-border); margin: 4px 0; }

.mo-active-filter {
  text-align: center;
  padding: 1rem 1.5rem 0;
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.mo-active-filter strong { color: var(--mo-accent); font-weight: 400; }
.mo-active-filter button {
  background: transparent;
  border: 0;
  color: var(--mo-muted);
  font-size: 14px;
  line-height: 1;
  margin-left: 6px;
  cursor: pointer;
  transition: color 0.15s;
}
.mo-active-filter button:hover { color: var(--mo-text); }

/* ─── Index grid ─────────────────────────────────────────── */
.mo-index {
  /* Zelfde maatvoering als de meubelsite: 3 kolommen, 32px tussenruimte,
     max 1400px. Zo staan de twee helften op dezelfde ruit. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 3rem 1.5rem;
}

/* Uitgevulde rijen: elke rij krijgt één hoogte, de breedtes volgen de
   beeldverhouding van het project. Zo staan 16:9 en 9:16 naast elkaar
   zonder dat er iets bijgesneden wordt, en lopen de rijen door tot beide
   randen. De maten worden in JS gezet — hier alleen de opmaak. */
.mo-rows { display: flex; flex-direction: column; gap: 32px; }
.mo-row  { display: flex; gap: 32px; }
@media (max-width: 900px) {
  .mo-rows, .mo-row { gap: 24px; }
}
@media (max-width: 540px) {
  .mo-index { padding: 1.5rem 1.75rem 3.5rem; }
  .mo-rows, .mo-row { gap: 20px; }
}

.mo-card { display: block; color: inherit; flex: 0 0 auto; }
.mo-card-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--mo-bg-alt);
}
.mo-card-media img,
.mo-card-media video,
.mo-card-still {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s;
}
.mo-card:hover .mo-card-media img { transform: scale(1.02); }
/* Een stilstaand tweede beeld hangt aan hover; een clip hangt aan een
   class, zodat hij ook kan wegfaden terwijl de muis er nog op staat. */
.mo-card-preview { position: absolute; inset: 0; opacity: 0; }
.mo-card:hover img.mo-card-preview { opacity: 1; }
.mo-card.clip-on video.mo-card-preview { opacity: 1; }
.mo-card-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mo-faint);
  padding: 1rem;
  text-align: center;
}
.mo-card-meta {
  position: absolute;
  left: 1.25rem; top: 1rem;
  font-family: var(--mo-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-text);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.mo-card-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
  font-family: var(--mo-display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--mo-text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.mo-card-meta {
  position: absolute;
  left: 1.25rem; top: 1rem;
  font-family: var(--mo-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-text);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
@media (hover: hover) {
  .mo-card:hover .mo-card-title,
  .mo-card:hover .mo-card-meta { opacity: 1; transform: translateY(0); }
}
/* Op touch is er geen hover, dus daar staat de titel gewoon vast. */
@media (hover: none) {
  .mo-card-title, .mo-card-meta { opacity: 1; transform: none; }
}

/* ─── Breakdown page ─────────────────────────────────────── */
.mo-case { padding-bottom: 7rem; }

.mo-col {
  max-width: var(--mo-col);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.mo-col-wide {
  max-width: var(--mo-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (max-width: 640px) {
  .mo-col, .mo-col-wide { padding-left: 1rem; padding-right: 1rem; }
}

.mo-case-head { padding-top: 3rem; padding-bottom: 0.5rem; }
.mo-case-meta {
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-muted);
  margin-bottom: 1.5rem;
}
.mo-case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.5rem; }
.mo-tag {
  font-family: var(--mo-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-accent);
  border: 1px solid var(--mo-accent-line);
  border-radius: 999px;
  padding: 3px 10px;
}

/* The finished film — top or bottom, set per project. */
/* ─── Blocks ─────────────────────────────────────────────── */
.mo-blocks > * + * { margin-top: 1.6rem; }

/* heading — the numbered section dividers that make a long
   breakdown navigable ("02 · Assets & Pre-production") */
.mo-h {
  margin-top: 4rem !important;
  padding-top: 2rem;
  border-top: 1px solid var(--mo-border);
}
.mo-h:first-child { margin-top: 1rem !important; border-top: 0; padding-top: 0; }
.mo-h-num {
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mo-accent);
  margin-bottom: 0.5rem;
}
.mo-h-text {
  font-family: var(--mo-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--mo-text);
}
/* Sub-heading inside a section. */
.mo-h3 {
  font-family: var(--mo-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--mo-text);
  margin-top: 2.5rem !important;
}

/* text */
.mo-text p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--mo-text-soft);
}
.mo-text p + p { margin-top: 1rem; }
.mo-text strong { color: var(--mo-text); font-weight: 600; }
.mo-text em { font-style: italic; }
.mo-text a { color: var(--mo-accent); border-bottom: 1px solid var(--mo-accent-line); }

/* Opmaak-varianten van het tekstblok. De pagina-titel is bewust een
   tekstblok en geen apart veld, zodat de volgorde van de hele breakdown
   uit één lijst komt. */
.mo-text.is-title p {
  font-family: var(--mo-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--mo-text);
}
.mo-text.is-title { margin-top: 2.5rem !important; }
.mo-text.is-title:first-child { margin-top: 0 !important; }

.mo-text.is-lead p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mo-text-soft);
}

.mo-text.is-small p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mo-muted);
}

/* callout — the grey left-ruled aside (loglines, caveats) */
.mo-callout {
  border-left: 2px solid var(--mo-border-strong);
  padding: 0.15rem 0 0.15rem 1.15rem;
  color: var(--mo-muted);
  font-size: 15px;
  line-height: 1.6;
}
.mo-callout strong { color: var(--mo-text-soft); font-weight: 600; }
.mo-callout.is-accent { border-left-color: var(--mo-accent); }

/* mono — asset naming conventions, prompt syntax, shot lists */
.mo-mono {
  font-family: var(--mo-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--mo-text-soft);
  background: var(--mo-surface);
  border: 1px solid var(--mo-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  white-space: pre;
  box-shadow: var(--mo-sheen);
}

/* media — image / video / gallery / compare share the figure shell */
.mo-fig { margin: 2.25rem auto; }
.mo-fig-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mo-bg-deep);
  border: 1px solid var(--mo-border);
}
.mo-fig-media img,
.mo-fig-media video { width: 100%; height: auto; }
.mo-fig-media.is-ratio img,
.mo-fig-media.is-ratio video,
.mo-fig-media.is-ratio iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
/* Two-line caption: asset id in mono, then its category — the detail
   that makes a breakdown read as a production document. */
.mo-cap { margin-top: 0.6rem; }
.mo-cap-id {
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mo-text-soft);
}
.mo-cap-kind {
  font-family: var(--mo-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-faint);
  margin-top: 2px;
}
.mo-cap-text { font-size: 13px; line-height: 1.5; color: var(--mo-muted); margin-top: 4px; }

/* Klik-laag over een ingesloten speler. Scrollen gaat hier gewoon
   doorheen naar de pagina; klikken start de film en haalt de laag weg. */
.mo-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.25s;
}
.mo-play:hover { background: rgba(0, 0, 0, 0.18); }
.mo-play-icon {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: rgba(19, 20, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: block;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s;
}
.mo-play:hover .mo-play-icon {
  transform: scale(1.06);
  background: var(--mo-accent);
}
/* Driehoekje, optisch iets naar rechts zodat hij gecentreerd oogt. */
.mo-play-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--mo-text);
  transition: border-color 0.25s;
}
.mo-play:hover .mo-play-icon::after { border-left-color: var(--mo-bg); }

/* gallery — grid of stills (expression sheets, frame grabs) */
.mo-gallery { display: grid; gap: 8px; }
.mo-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mo-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mo-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mo-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--mo-border);
  background: var(--mo-bg-deep);
}
@media (max-width: 640px) {
  .mo-gallery.cols-3, .mo-gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* compare — before/after drag slider */
.mo-compare {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--mo-border);
  background: var(--mo-bg-deep);
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.mo-compare img { width: 100%; display: block; }
.mo-compare-after {
  position: absolute; inset: 0;
  overflow: hidden;
  width: 50%;
}
/* The clipped layer needs its image at the FULL container width, or it
   squashes as the clip narrows. */
.mo-compare-after img {
  position: absolute; top: 0; left: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.mo-compare-handle {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  left: 50%;
  transform: translateX(-1px);
  pointer-events: none;
}
.mo-compare-handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(19, 20, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
}
.mo-compare-label {
  position: absolute;
  bottom: 10px;
  font-family: var(--mo-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-text);
  background: rgba(19, 20, 22, 0.7);
  border-radius: 6px;
  padding: 3px 7px;
  pointer-events: none;
}
.mo-compare-label.left  { left: 10px; }
.mo-compare-label.right { right: 10px; }

/* specs + credits — same two-column definition list */
.mo-specs { border-top: 1px solid var(--mo-border); }
.mo-spec-row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mo-border);
}
.mo-spec-label {
  font-family: var(--mo-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-muted);
  padding-top: 2px;
}
.mo-spec-value { font-size: 15px; line-height: 1.5; color: var(--mo-text-soft); }
@media (max-width: 520px) {
  .mo-spec-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ─── States ─────────────────────────────────────────────── */
.mo-loading, .mo-empty {
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mo-faint);
  padding: 5rem 0;
  text-align: center;
}
.mo-not-found { padding: 8rem 1.5rem; text-align: center; }
.mo-not-found h1 {
  font-family: var(--mo-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--mo-text);
  margin-bottom: 0.75rem;
}
.mo-not-found p { color: var(--mo-muted); margin-bottom: 1.5rem; }
.mo-not-found a { color: var(--mo-accent); }

.mo-footer {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mo-border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
.mo-footer-link {
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-muted);
  transition: color 0.2s;
}
.mo-footer-link:hover { color: var(--mo-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   Shared footer — site-init.js injects/populates a `.pf-footer` on every
   public page and styles the language toggle with `var(--pf-text, <light>)`
   fallbacks meant for the furniture side. We ship our own .pf-footer
   skeleton in the motion pages (injectFooter() no-ops when one exists) and
   re-point the --pf-* names at dark values so the injected CSS lands right.
   =========================================================================== */
:root {
  --pf-text:          #ffffff;
  --pf-text-soft:     rgba(255, 255, 255, 0.70);
  --pf-muted:         rgba(255, 255, 255, 0.40);
  --pf-border:        rgba(255, 255, 255, 0.08);
  --pf-border-strong: rgba(255, 255, 255, 0.16);
  /* De contact-overlay (contact.js en zijn twee varianten) is geschreven
     voor de meubelsite en gebruikt overal var(--pf-x, <lichte kleur>).
     Door diezelfde namen hier donker in te vullen kleurt hij op de
     motion-kant vanzelf mee, zonder een tweede overlay te onderhouden. */
  --pf-bg:          #131416;
  --pf-bg-alt:      #18191c;
  --pf-surface:     #1c1e21;
  --pf-accent:      #2ed3c6;
  --pf-accent-soft: rgba(46, 211, 198, 0.12);
  --pf-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --pf-mono: 'DM Mono', 'SF Mono', ui-monospace, monospace;
}

body.mo .pf-footer {
  /* auto duwt hem naar de onderrand; de lucht erboven is dus de lege
     ruimte van de pagina zelf, niet nog eens opvulling ín de balk. */
  margin-top: auto;
  border-top: 1px solid var(--mo-border);
  background: var(--mo-bg-alt);
}
body.mo .pf-footer-inner {
  max-width: var(--mo-wide);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Met benoemde vakken in plaats van losse kolommen: staan er geen
     pagina's in de voettekst, dan verbergt site-init die kolom en
     schoven contact en socials naar het midden. Nu houdt elke kolom
     zijn eigen plek, gevuld of niet. */
  grid-template-areas: "identity pages meta";
  gap: 2rem;
  align-items: start;
}
body.mo .pf-footer-identity { grid-area: identity; }
body.mo .pf-footer-pages    { grid-area: pages; }
body.mo .pf-footer-meta     { grid-area: meta; }
body.mo .pf-footer-col { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
body.mo .pf-footer-identity strong {
  font-family: var(--mo-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--mo-text);
}
body.mo .pf-footer-tagline,
body.mo .pf-footer-copyright { color: var(--mo-faint); font-size: 12px; }
body.mo .pf-footer-pages { align-items: center; }
body.mo .pf-footer-pages-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
body.mo .pf-footer-pages-sep { color: var(--mo-faint); }
body.mo .pf-footer a { color: var(--mo-muted); transition: color 0.2s; }
body.mo .pf-footer a:hover { color: var(--mo-accent); }
body.mo .pf-footer-meta { align-items: flex-end; text-align: right; }
body.mo .pf-footer-meta-socials { display: flex; gap: 10px; }
body.mo .pf-lang-toggle { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
@media (max-width: 700px) {
  body.mo .pf-footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "identity" "pages" "meta";
    gap: 1.5rem;
    padding: 2rem 1rem 2.5rem;
  }
  body.mo .pf-footer-pages, body.mo .pf-footer-meta { align-items: flex-start; text-align: left; }
  body.mo .pf-footer-pages-list { justify-content: flex-start; }
}

/* ===========================================================================
   Over-pagina (/motion/about)
   =========================================================================== */
.mo-about {
  max-width: var(--mo-col);
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}
.mo-about h1 {
  font-family: var(--mo-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--mo-text);
  margin-bottom: 1.5rem;
}
.mo-about h2 {
  font-family: var(--mo-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--mo-text);
  margin: 3rem 0 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mo-border);
}
.mo-about p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--mo-text-soft);
}
.mo-about p + p { margin-top: 1rem; }
.mo-about strong { color: var(--mo-text); font-weight: 600; }
.mo-about a { color: var(--mo-accent); }
.mo-about-contact { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mo-about-contact a {
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-accent);
  border: 1px solid var(--mo-accent-line);
  border-radius: 999px;
  padding: 8px 15px;
  transition: background 0.2s, color 0.2s;
}
.mo-about-contact a:hover { background: var(--mo-accent); color: var(--mo-bg); }
@media (max-width: 640px) {
  .mo-about { padding: 2.5rem 1rem 4rem; }
}

/* ===========================================================================
   Contact-overlay op de motion-kant
   ---------------------------------------------------------------------------
   De overlay is gedeeld met de meubelsite en tekent zich vrijwel helemaal
   met var(--pf-*), die hierboven donker staan. Op drie plekken zitten nog
   vaste meubel-kleuren; die worden hier omgezet. Alleen binnen body.mo, dus
   de meubelsite blijft precies zoals hij is.
   =========================================================================== */
body.mo .kvk-letter-foot {
  background: var(--mo-bg-alt) !important;
  border-top: 1px solid var(--mo-border) !important;
}
body.mo .kvk-letter-send,
body.mo .kvk-letter-trail {
  background: var(--mo-accent) !important;
  color: var(--mo-bg) !important;
}
body.mo .kvk-letter-send:hover { filter: brightness(1.08); }