/* Kevmedia — site
   Strikt volgens het design system "Kevmedia":
   haaks (radius alleen op knoppen en de REC-stip), geen schaduwen, geen verlopen als vlakvulling,
   tally alleen voor REC / de ene hoofdactie / een actieve staat, haarlijnen als raster,
   display in Archivo 125% hoofdletters, serif-accent 1–3 woorden, mono voor timecode en cameradata. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--surface); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--surface); padding: var(--space-3) var(--space-4); }
.skip:focus { left: var(--space-4); top: var(--space-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--space-6); }
@media (max-width: 640px) { .wrap { padding-inline: var(--space-4); } }
.section { padding-bottom: var(--space-9); }

/* ── typografie ── */
.display-xl, .display-l, .display-m, .heading {
  margin: 0; font-family: var(--font-display); font-stretch: 125%; color: var(--ink);
}
.display-xl, .display-l, .display-m { text-transform: uppercase; }
.display-xl { font-size: clamp(72px, 17vw, 260px); line-height: .9; font-weight: 700; letter-spacing: -0.02em; }
.display-l { font-size: clamp(40px, 6.4vw, 96px); line-height: .92; font-weight: 700; letter-spacing: -0.015em; }
.display-m { font-size: clamp(28px, 3.2vw, 40px); line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
.heading { font-size: 22px; line-height: 28px; font-weight: 600; }
.serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-stretch: normal; text-transform: none; letter-spacing: -0.01em;
}
.serif-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; color: var(--ink); }
.body-l { font-size: 18px; line-height: 28px; color: var(--ink-soft); max-width: 65ch; }
.small { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }

/* TimecodeLabel: 00:01 — Introductie */
.tc {
  display: inline-flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.tc b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* RecIndicator */
.rec {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500;
  letter-spacing: .06em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.rec i { width: 8px; height: 8px; border-radius: var(--radius-dot); background: var(--tally); animation: blink 1.6s steps(2, jump-none) infinite; }
.rec span { color: var(--ink-muted); }
@keyframes blink { 50% { opacity: .25; } }

/* CameraData */
.cam {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.cam li + li::before { content: "·"; margin-right: var(--space-4); color: var(--ink-faint); }

/* ── knoppen ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-btn); border: 1px solid transparent; background: none;
  font-family: var(--font-display); font-stretch: 125%; font-size: 12px; line-height: 16px;
  font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn--solid { background: var(--ink); color: var(--surface); }
.btn--solid:hover { background: var(--ink-soft); color: var(--surface); }
.btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost.arrow::after { content: "→"; font-family: var(--font-sans); font-stretch: 100%; transition: transform .2s; }
.btn--ghost.arrow:hover::after { transform: translateX(3px); }
.btn--rec { background: var(--tally); color: var(--on-tally); }
.btn--rec:hover { color: var(--on-tally); filter: brightness(1.08); }
.btn--rec::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-dot); background: currentColor; }
.btn--text { padding-inline: var(--space-2); color: var(--ink-soft); }
.btn--text[aria-current='page'] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── header en menu ── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.site-header nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); }
.logo { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--ink); }
.logo .logo-mark { width: 26px; height: 26px; flex: none; }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 640px) { .hide-sm { display: none !important; } }

.menu {
  position: fixed; inset: 0; z-index: 30; background: var(--ground);
  display: flex; flex-direction: column; padding: var(--space-3) var(--space-6) var(--space-7);
  visibility: hidden; opacity: 0;
}
.menu.is-open { visibility: visible; opacity: 1; }
.menu-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); margin-inline: calc(var(--space-6) * -1); padding-inline: var(--space-6); }
.menu ol { list-style: none; margin: auto 0; padding: 0; display: flex; flex-direction: column; }
.menu li { border-bottom: 1px solid var(--line); }
.menu li a { display: flex; align-items: baseline; gap: var(--space-5); padding-block: var(--space-2); }
.menu li a .tc { min-width: 3.5em; }
.menu li a .display-l { color: var(--ink-faint); }
.menu li a:hover .display-l, .menu li a[aria-current='page'] .display-l { color: var(--ink); }
.menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); padding-top: var(--space-5); }
@media (max-width: 640px) { .menu { padding-inline: var(--space-4); } .menu-top { margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); } }

/* ── liquid (vervaagde blobs in amber / indigo op ground) ── */
.liquid { position: absolute; inset: -20%; filter: blur(80px); pointer-events: none; }
.liquid span { position: absolute; border-radius: 50%; animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8%, -6%) scale(1.15); }
  100% { transform: translate(-6%, 8%) scale(.95); }
}

/* ── FluidPanel: fluid-art foto met grain, het ene randmoment ── */
.fluid { position: relative; overflow: hidden; background: var(--ground); isolation: isolate; }
.fluid > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fluid::before { /* film-grain */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--grain); mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fluid::after { /* donkere zone voor leesbare tekst */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #0a0a0b8c 0%, #0a0a0b99 45%, #0a0a0bd9 80%, #0a0a0bf2 100%);
}
@media (max-width: 900px) {
  .fluid > img { filter: saturate(.8) brightness(.75); }
  .fluid::after { background: linear-gradient(180deg, #0a0a0bb3 0%, #0a0a0bbf 50%, #0a0a0bf2 100%); }
}

/* ── Viewfinder ── */
.vf { position: relative; padding: var(--space-4); }
.vf > .c { position: absolute; width: 20px; height: 20px; border: 0 solid var(--ink); pointer-events: none; z-index: 2; }
.vf > .c.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.vf > .c.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.vf > .c.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.vf > .c.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ── video speler ── */
.player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ground); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.player .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-5); text-align: center; }
.player .bar { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-3); display: flex; justify-content: space-between; gap: var(--space-3); }
.player .top { position: absolute; left: var(--space-4); right: var(--space-4); top: var(--space-3); display: flex; justify-content: space-between; gap: var(--space-3); }
.player.is-playing > :not(iframe) { display: none; }

/* ── home: hero ── */
.hero { position: relative; overflow: hidden; background: var(--ground); border-bottom: 1px solid var(--line); }
.hero .liquid { opacity: .55; }
/* headervideo: full-bleed achter de hero, film-grain erover en een donkere zone zodat ink leesbaar blijft */
.hero > .wrap { position: relative; z-index: 1; } /* tekst altijd boven de video-lagen */
.hero-reel { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ground) url("../img/header-poster.webp") center / cover no-repeat; }
@media (max-width: 900px) { .hero-reel { background-image: url("../img/header-poster-960.webp"); } }
.hero-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-reel::before { /* film-grain */
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: var(--grain); mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-reel::after { /* donkere zone: lichte shots mogen de titel niet opeten */
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* ≥ 0.55 achter de titel (3:1 op een wit shot), ≥ 0.65 achter de lopende tekst (4.5:1) */
  background: linear-gradient(180deg, #0a0a0b99 0%, #0a0a0b8c 40%, #0a0a0ba6 62%, #0a0a0bf2 100%);
}
/* Mobiel: de video vult hier bijna het hele scherm achter álle tekst. Daarom een veel donkerdere laag,
   rustiger beeld, en vanaf de introtekst effen ground zodat lopende tekst niet over bewegend beeld staat. */
@media (max-width: 900px) {
  .hero-reel video { filter: saturate(.75) brightness(.8); }
  .hero-reel::after {
    background: linear-gradient(180deg, #0a0a0bb3 0%, #0a0a0bb8 28%, #0a0a0bd9 40%, #0a0a0b 52%, #0a0a0b 100%);
  }
  .hero-title { padding-block: var(--space-8) var(--space-7); }
}
.hero-ctrl { display: flex; align-items: center; gap: var(--space-5); }
.vid-toggle {
  min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: #0a0a0b66;
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); cursor: pointer;
}
.vid-toggle:hover { border-color: var(--ink); }
.hero--video .hero-grid { border-top-color: var(--line-strong); }
.hero-top { position: relative; display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); }
.hero-title { position: relative; padding-block: var(--space-9) var(--space-8); }
.hero-title .serif { color: var(--ink); }
.hero-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); border-top: 1px solid var(--line); }
.hero-grid > div { padding: var(--space-5) var(--space-6) var(--space-7) 0; display: flex; flex-direction: column; gap: var(--space-4); }
.hero-grid > div + div { border-left: 1px solid var(--line); padding-left: var(--space-6); }
@media (max-width: 820px) { .hero-grid > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }
.hero-still { position: relative; display: block; width: 280px; max-width: 100%; aspect-ratio: 16 / 9; background: var(--surface-raised); }
.hero-still .btn { position: absolute; left: var(--space-3); bottom: var(--space-3); min-height: 32px; padding-inline: var(--space-3); }

/* ── statement ── */
.statement { padding-block: var(--space-10); }
.statement p { font-family: var(--font-display); font-stretch: 125%; font-weight: 500; font-size: clamp(26px, 3.3vw, 48px); line-height: 1.15; color: var(--ink); max-width: 22em; }
.statement p span { color: var(--ink-muted); }
.statement .btn { margin-top: var(--space-7); }
@media (max-width: 640px) { .statement { padding-block: var(--space-9); } }

/* ── sectiekop ── */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-5); padding-bottom: var(--space-5); }
.sec-head > div { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── klanten ── */
.clients { margin: 0; font-family: var(--font-display); font-stretch: 125%; font-weight: 600; text-transform: uppercase; font-size: clamp(26px, 4.2vw, 56px); line-height: 1.12; color: var(--ink-faint); text-wrap: balance; }
.clients em { font-style: normal; color: var(--ink); }
.clients i { font-style: normal; color: var(--line-strong); margin: 0 .25em; }
.clients span { white-space: nowrap; }
@media (max-width: 640px) { .clients { font-size: 24px; } .clients span { white-space: normal; overflow-wrap: anywhere; } }

/* ── diensten ── */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--line); }
.cols > * { margin: 0; padding: var(--space-5) var(--space-5) var(--space-7) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cols > * + * { border-left: 1px solid var(--line); padding-left: var(--space-5); }
@media (max-width: 900px) { .cols > * + * { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }
.cols p { color: var(--ink-muted); }

/* ── kaarten (home) en projecten (werk) ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-5); }
.thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-raised); }
.cards .thumb { aspect-ratio: 3 / 4; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a:hover .thumb img { transform: scale(1.03); }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-muted); }
.thumb .tc { position: absolute; left: var(--space-3); bottom: var(--space-3); }
.item { display: flex; flex-direction: column; gap: var(--space-3); }
.item .cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.item .cap .name { font-family: var(--font-display); font-stretch: 125%; font-weight: 600; font-size: 15px; text-transform: uppercase; color: var(--ink); }
.item-all { justify-content: space-between; aspect-ratio: 3 / 4; padding: var(--space-5); border: 1px solid var(--line); }
@media (max-width: 640px) { .cards .thumb, .item-all { aspect-ratio: 4 / 3; } }

/* ── CTA (FluidPanel) ── */
.cta { min-height: 600px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7); padding: var(--space-7) 0; }
.cta .wrap { width: 100%; }
.cta .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.cta .body { display: flex; flex-direction: column; gap: var(--space-5); max-width: 900px; }

/* ── footer ── */
.site-footer { background: var(--ground); border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-6); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer a { color: var(--ink-soft); }

/* ── werk ── */
.page-title { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-title .inner { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-8); }
.page-title .display-xl { margin-left: -0.04em; margin-bottom: -0.11em; white-space: nowrap; } /* mag de rand raken: het randmoment */
.page-title .meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-5); }

.featured-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.featured-main { padding: var(--space-5) var(--space-5) var(--space-5) 0; }
.featured-side { padding: var(--space-5) 0 var(--space-5) var(--space-5); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 1000px) {
  .featured-row { grid-template-columns: minmax(0, 1fr); }
  .featured-main { padding-right: 0; }
  .featured-side { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}
.featured-side .display-m { overflow-wrap: anywhere; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--line); }
.facts dt, .facts dd { margin: 0; padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.facts dt { padding-right: var(--space-5); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.featured-side .btn { margin-top: auto; align-self: flex-start; }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-7) var(--space-5); }
.filters .btn { transition: none; } /* harde cut */
.filters .btn[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-7) var(--space-5); }

/* ── contact ── */
.contact-head { padding-block: var(--space-8) var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.contact-main { padding: var(--space-7) var(--space-7) var(--space-7) 0; }
.contact-side { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
@media (max-width: 960px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-main { padding-right: 0; }
  .contact-side { border-left: 0; border-top: 1px solid var(--line); }
}

.form { display: flex; flex-direction: column; gap: var(--space-7); }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: var(--space-4); }
.lbl { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-btn); border: 1px solid var(--line-strong); color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-display); font-stretch: 125%; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.chip span:hover { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
@media (max-width: 640px) { .fields { grid-template-columns: minmax(0, 1fr); } }
.field-wrap { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field {
  width: 100%; min-height: 52px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: var(--radius-none);
  background: transparent; color: var(--ink); font: inherit; font-size: 17px; appearance: none; -webkit-appearance: none;
}
.field::placeholder { color: var(--ink-muted); }
.field:focus { outline: none; border-bottom-color: var(--ink); }
.field:focus-visible { box-shadow: 0 1px 0 0 var(--focus); }
select.field { background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 12px) 24px, calc(100% - 7px) 24px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
select.field option { background: var(--surface); color: var(--ink); }
input[type='date'].field { color-scheme: dark; }
textarea.field { resize: vertical; min-height: 140px; line-height: 1.5; }
.field[aria-invalid='true'] { border-bottom-color: var(--tally); }
.err { min-height: 18px; font-size: 13px; color: #ff8a7a; }
.check { display: flex; align-items: flex-start; gap: var(--space-3); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.check label { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
.submit-row .btn { min-height: 52px; padding-inline: var(--space-5); }
.form-alert { padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); color: var(--ink); font-size: 14px; }
.form-alert a { text-decoration: underline; }
.sent { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; padding-block: var(--space-6); }

.side-block { padding: var(--space-7) 0 var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.side-block + .side-block { border-top: 1px solid var(--line); }
@media (max-width: 960px) { .side-block { padding-left: 0; } }
.side-fluid { min-height: 320px; justify-content: flex-end; padding: var(--space-6); }
.side-fluid .mail { font-family: var(--font-display); font-stretch: 125%; font-weight: 600; font-size: 22px; color: var(--ink); overflow-wrap: anywhere; }
.copy { align-self: flex-start; background: none; border: 0; padding: 0; min-height: 32px; color: var(--ink-soft); font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ── motion: korte fade en 8px omhoog, geen bounce ── */
.js .rv { opacity: 0; transform: translateY(8px); transition: opacity .6s ease-out, transform .6s ease-out; }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .liquid span, .rec i { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .btn, .btn::after, .thumb img { transition: none; }
}

/* ───────── uitbreiding: echte content ───────── */
.hero-still { overflow: hidden; }
.hero-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }

/* tegels */
.thumb .tc { background: #0a0a0bb3; padding: 4px 6px; color: var(--ink-soft); }
.item .sub { color: var(--ink-muted); }
.item:hover .cap .name { color: var(--ink-soft); }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
.feat-grid .item--lead { grid-column: span 2; grid-row: span 2; }
.item--lead .thumb { flex: 1; aspect-ratio: auto; min-height: 320px; }
.item--lead .cap .name { font-size: 20px; }
@media (max-width: 900px) {
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid .item--lead { grid-column: 1 / -1; grid-row: auto; }
  .item--lead .thumb { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 640px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } }
.clients a { color: inherit; }
.clients a:hover { color: var(--ink); }

/* reviews */
.reviews blockquote { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.reviews figcaption { margin-top: var(--space-2); }

/* over */
.about { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-7); border-top: 1px solid var(--line); padding-top: var(--space-6); }
.about-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-raised); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-body { display: flex; flex-direction: column; gap: var(--space-5); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.steps li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-5) 0; border-bottom: 1px solid var(--line); }
.steps li:nth-child(even) { padding-left: var(--space-5); border-left: 1px solid var(--line); }
@media (max-width: 900px) { .about { grid-template-columns: minmax(0, 1fr); } .about-photo { aspect-ratio: 16 / 10; } }
@media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr); } .steps li:nth-child(even) { padding-left: 0; border-left: 0; } }

/* achter de schermen */
.bts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.bts-grid figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-raised); }
.bts-grid img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
  .bts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bts-grid figure:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) { .bts-grid { grid-template-columns: minmax(0, 1fr); } .bts-grid figure { aspect-ratio: 4 / 3; } }

/* footer */
.site-footer .foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--space-6); padding-block: var(--space-8) var(--space-7); }
.foot-brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 380px; }
.foot-col { display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; }
.foot-col .lbl { margin-bottom: var(--space-2); }
.foot-col .muted { color: var(--ink-muted); }
.site-footer .foot-bar { border-top: 1px solid var(--line); padding-block: var(--space-5); }
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
@media (max-width: 900px) { .site-footer .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.menu-foot a:hover { color: var(--ink); }

/* werk: filters */
.filter-bar { display: flex; flex-direction: column; padding-block: var(--space-7) var(--space-5); }
.filter-bar .filters { padding-block: var(--space-2); align-items: center; }
.filters .lbl { min-width: 44px; }
.filters .n { font-family: var(--font-mono); font-size: 11px; opacity: .7; margin-left: 6px; }
.filter-note { padding-bottom: var(--space-5); }
.filter-note a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink-soft); }
[data-empty] { padding-bottom: var(--space-5); }

/* projectpagina */
.project-head { padding-block: var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.project-head .display-l { overflow-wrap: anywhere; }
.back { align-self: flex-start; }
.back:hover, .back:hover b { color: var(--ink); }
.player--vertical { aspect-ratio: 9 / 16; }
.vf--vertical { max-width: 440px; margin-inline: auto; }
.reels { display: grid; gap: var(--space-6) var(--space-5); }
.reels + .reels { margin-top: var(--space-7); }
.reels--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reels--one { grid-template-columns: minmax(0, 1fr); }
.reels--tall { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }
.reel { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@media (max-width: 900px) { .reels--wide { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .reels--tall { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
  .reels--tall .reel { scroll-snap-align: start; }
}
.project-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-8); }
.project-text { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; color: var(--ink-soft); }
.project-text .body-l { color: var(--ink); }
.project-text .heading { margin-top: var(--space-4); }
.project-aside { display: flex; flex-direction: column; gap: var(--space-6); align-self: start; position: sticky; top: 96px; }
.project-aside .btn { align-self: flex-start; }
.deliv { display: flex; flex-direction: column; gap: var(--space-3); }
.deliv ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.deliv li { display: flex; gap: var(--space-3); align-items: baseline; padding-block: var(--space-3); border-bottom: 1px solid var(--line); font-size: 15px; }
@media (max-width: 900px) { .project-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); } .project-aside { position: static; } }

/* fotocarrousel */
.carousel { display: flex; flex-direction: column; gap: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-5); }
.carousel-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.carousel-head .btn-row { margin-left: auto; }
.carousel .btn[disabled] { opacity: .35; cursor: default; }
.carousel-track { position: relative; display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track figure { margin: 0; flex: none; height: clamp(320px, 62vh, 620px); scroll-snap-align: start; background: var(--surface-raised); }
.carousel-track img { height: 100%; width: auto; max-width: 88vw; object-fit: cover; user-select: none; }
@media (max-width: 640px) { .carousel-track figure { height: 440px; } }

.next-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-5); padding-block: var(--space-7) var(--space-9); border-top: 1px solid var(--line); }
.next-link { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); margin-left: auto; text-align: right; min-width: 0; }
.next-link .display-m { overflow-wrap: anywhere; }
.next-link:hover .display-m { color: var(--ink-soft); }

/* gear */
.gear-feature { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); align-items: end; margin-bottom: var(--space-8); }
.gear-feature figure { margin: 0; overflow: hidden; background: var(--surface-raised); }
.gear-feature img { width: 100%; height: 100%; object-fit: cover; }
.gear-feature .vf figure { aspect-ratio: 5 / 4; }
.gear-feature > figure { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .gear-feature { grid-template-columns: minmax(0, 1fr); } .gear-feature > figure { aspect-ratio: 4 / 3; } }
.refs a, .ulink { text-decoration: underline; text-underline-offset: 3px; color: var(--ink-soft); }
.gear-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 var(--space-7); border-top: 1px solid var(--line); }
.gear-group { padding-block: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.gear-group h3 { margin: 0; }
.gear-group ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gear-group li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.gear-group li .tc { flex: none; max-width: 48%; text-align: right; }

/* contact */
.side-photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-raised); }
.side-photo img { width: 100%; height: 100%; object-fit: cover; }

/* privacy en voorwaarden */
.prose { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-4); color: var(--ink-soft); }
.prose h2 { margin: var(--space-6) 0 0; display: flex; align-items: baseline; gap: var(--space-3); font-family: var(--font-display); font-stretch: 125%; font-weight: 600; font-size: 20px; line-height: 1.2; text-transform: uppercase; color: var(--ink); scroll-margin-top: 96px; }
.prose ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-2); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose address { font-style: normal; }
.prose strong { color: var(--ink); font-weight: 600; }
.toc { border-block: 1px solid var(--line); padding-block: var(--space-4); }
.toc ol { margin: 0; padding-left: 1.6em; columns: 2; column-gap: var(--space-7); }
.toc li { padding-block: 4px; break-inside: avoid; }
.toc a { text-decoration: none; color: var(--ink-soft); }
.toc a:hover { color: var(--ink); }
@media (max-width: 640px) { .toc ol { columns: 1; } }
.table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.reviews .serif-quote { color: var(--ink); }
/* lange Nederlandse woorden (Privacyverklaring, Voorwaarden) mogen afbreken in plaats van buiten beeld te lopen */
.contact-head .display-l, .project-head .display-l, .next-link .display-m { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }