/* ==========================================================================
   BOMMEL VISUALS — TIMECODE
   Huisstijl: Film #111110 · Papier #F5F2EA · Stof #8C877D · Opname #E5322D
   Koppen: Anton (uppercase, line-height .86–.9) · Tekst: IBM Plex Sans · Labels: IBM Plex Mono
   Rood is schaars: alleen de REC-stip, de snede en één vlak per pagina.
   ========================================================================== */

@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Anton-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('../fonts/IBMPlexSans-VF.ttf') format('truetype-variations'), url('../fonts/IBMPlexSans-VF.ttf') format('truetype'); }

:root {
  --film: #111110;
  --film-2: #1E1D1B;
  --film-3: #2A2926;
  --lijn: #2B2A27;
  --lijn-2: #3A3935;
  --papier: #F5F2EA;
  --papier-2: #E9E5DC;
  --papier-lijn: #C9C4B9;
  --papier-tekst: #5E5A53;
  --stof: #8C877D;
  --stof-licht: #BDB8AE;
  --tekst-zacht: #D9D4CA;
  --opname: #E5322D;

  --kop: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --tekst: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --ruler: 36px;
  --max: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--film);
  color: var(--papier);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--opname); }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--kop); font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
p { margin: 0; }
::selection { background: var(--opname); color: var(--film); }
:focus-visible { outline: 2px solid var(--opname); outline-offset: 3px; }

/* --- Typografie --- */
.h-xxl { font-size: clamp(110px, 21vw, 300px); line-height: .86; }
.h-xl  { font-size: clamp(56px, 9vw, 150px); line-height: .86; }
.h-l   { font-size: clamp(48px, 6.5vw, 96px); line-height: .9; }
.h-m   { font-size: clamp(36px, 4.5vw, 64px); line-height: .95; }
.h-s   { font-size: clamp(26px, 2.6vw, 34px); line-height: 1; }
.lede  { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--tekst-zacht); max-width: 620px; }
.groot { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; max-width: 560px; }
.zacht { color: var(--stof-licht); }
.rood { color: var(--opname); }

.label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stof-licht);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.label.klein { font-size: 12px; letter-spacing: .12em; }
.mono { font-family: var(--mono); }
.stip { width: 11px; height: 11px; border-radius: 50%; background: var(--opname); display: inline-block; flex: 0 0 auto; }
.stip.klein { width: 8px; height: 8px; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.knippert { animation: rec 1.2s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .knippert { animation: none; } html { scroll-behavior: auto; } }

/* --- De snede: een kop in twee helften, onderste helft verschoven, rode lijn ertussen --- */
.cut {
  position: relative;
  display: block;
  height: .86em;
  line-height: .86;
  white-space: nowrap;
  overflow: visible;
}
.cut > .cut-boven, .cut > .cut-onder {
  position: absolute; left: 0; width: 100%;
  height: calc(.43em - 5px);
  overflow: hidden;
}
.cut > .cut-boven { top: 0; }
.cut > .cut-onder { top: calc(.43em + 5px); }
.cut > .cut-boven > span { display: block; margin-left: -.03em; }
.cut > .cut-onder > span { display: block; margin-top: calc(-.43em - 5px); margin-left: .04em; }
.cut > .cut-lijn {
  position: absolute; left: -100vw; right: -100vw;
  top: calc(.43em - 5px); height: 10px;
  background: var(--opname);
}
.cut.lijn-papier > .cut-lijn { background: var(--papier); }
.cut.lijn-film > .cut-lijn { background: var(--film); }
/* Sectie met een snede: knipt de lijn af op de rand van de sectie, zodat de pagina niet breder wordt */
.cut-sectie { overflow: hidden; }
@media (max-width: 700px) {
  .cut > .cut-boven, .cut > .cut-onder { height: calc(.43em - 3px); }
  .cut > .cut-onder { top: calc(.43em + 3px); }
  .cut > .cut-onder > span { margin-top: calc(-.43em - 3px); }
  .cut > .cut-lijn { top: calc(.43em - 3px); height: 6px; }
}

/* --- Layout --- */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sectie { padding-top: clamp(72px, 9vw, 140px); padding-bottom: clamp(72px, 9vw, 140px); }
.sectie.strak { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
.lijn-boven { border-top: 1px solid var(--lijn); }
.lijn-onder { border-bottom: 1px solid var(--lijn); }
.papier { background: var(--papier); color: var(--film); }
.papier .label { color: var(--papier-tekst); }
.papier .lede, .papier .zacht { color: var(--papier-tekst); }
.papier a:hover { color: var(--opname); }
.opname { background: var(--opname); color: var(--film); }
.opname .label { color: var(--film); }
.opname a:hover { color: var(--film); }
.kop-rij { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.kop-rij > div { display: flex; flex-direction: column; gap: 12px; }
.kop-rij p { max-width: 440px; font-size: 17px; }
.rij-tc { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--stof-licht); text-transform: uppercase; }

/* Liniaal links (home): tijdlijn van de take */
.liniaal { position: relative; }
.liniaal::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--ruler);
  border-right: 1px solid var(--lijn);
  background:
    repeating-linear-gradient(to bottom, var(--stof) 0 1px, transparent 1px 80px) right top / 22px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--lijn-2) 0 1px, transparent 1px 16px) right top / 10px 100% no-repeat;
  pointer-events: none;
}
.liniaal > * { padding-left: var(--ruler); }
@media (max-width: 700px) { .liniaal::before { display: none; } .liniaal > * { padding-left: 0; } }

/* --- Kop (header) --- */
.kop {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 16px 28px;
  padding: 22px var(--gutter);
  position: relative; z-index: 20;
}
.kop-logo { display: flex; align-items: center; gap: 14px; }
.kop-logo svg, .kop-logo img { height: 42px; width: auto; }
.kop-logo span { font-family: var(--kop); font-size: 22px; text-transform: uppercase; }
.kop-nav { display: flex; align-items: center; gap: 8px 26px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.kop-nav a { padding: 12px 0; display: inline-flex; gap: 6px; }
.kop-nav a i { font-style: normal; color: var(--stof); }
.kop-nav a.actief i { color: var(--opname); }
.kop-nav .knop { padding: 14px 20px; }
.kop-rec { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 10px; }
.menu-knop { display: none; background: none; border: 1px solid var(--lijn-2); color: var(--papier); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; padding: 12px 16px; border-radius: 2px; }
@media (max-width: 900px) {
  .kop-nav { display: none; }
  .kop.open .kop-nav { display: flex; flex-direction: column; align-items: flex-start; width: 100%; order: 10; gap: 0; padding: 16px 0 8px; border-top: 1px solid var(--lijn); }
  .kop.open .kop-nav a { padding: 14px 0; font-size: 16px; }
  .kop.open .kop-nav .knop { margin-top: 12px; }
  .menu-knop { display: inline-block; }
  .kop-rec { display: none; }
}

/* --- Knoppen --- */
.knop {
  display: inline-block; font-weight: 600; font-size: 16px; line-height: 1.2;
  padding: 18px 28px; border-radius: 2px; border: 1px solid transparent;
  background: var(--papier); color: var(--film); white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.knop:hover { background: var(--opname); color: var(--film); border-color: var(--opname); }
.knop.lijn { background: transparent; color: var(--papier); border-color: var(--papier); }
.knop.lijn:hover { background: var(--papier); color: var(--film); }
.knop.film { background: var(--film); color: var(--papier); }
.knop.film:hover { background: var(--papier); color: var(--film); }
.papier .knop.lijn { color: var(--film); border-color: var(--film); }
.papier .knop.lijn:hover { background: var(--film); color: var(--papier); }
.knop.groot { font-size: 18px; padding: 20px 32px; }
.pijl { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 12px 0; border-bottom: 2px solid currentColor; display: inline-block; }
.pijl:hover { color: var(--opname); }
.opname .pijl:hover { color: var(--film); opacity: .7; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Hero home --- */
.hero { padding-top: clamp(40px, 5vw, 64px); padding-right: var(--gutter); }
.hero .wrap-l { padding-left: clamp(16px, 3vw, 40px); }
.hero h1 { margin-top: 24px; font-size: clamp(104px, 23vw, 400px); line-height: .86; }
.hero h1 .cut { font-size: inherit; }
.hero h1 .regel { display: block; margin-left: -.03em; }
.hero-onder { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 48px; padding-bottom: clamp(48px, 5vw, 72px); border-bottom: 1px solid var(--lijn); }

/* --- Filmstrip (werk op home) --- */
.strook { border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.perforatie { height: 28px; background: repeating-linear-gradient(to right, transparent 0 22px, var(--papier) 22px 40px, transparent 40px 62px) 0 7px / 62px 14px repeat-x; }
.strook-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 clamp(16px, 3vw, 40px); scroll-snap-type: x mandatory; scrollbar-width: none; }
.strook-scroll::-webkit-scrollbar { display: none; }
.strook-scroll > * { flex: 0 0 auto; width: clamp(280px, 32vw, 460px); scroll-snap-align: start; }

/* --- Take (projecttegel) --- */
.take {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--film-2); border: 1px solid var(--lijn); color: var(--papier);
}
.take img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; }
.take:hover img { transform: scale(1.03); }
.take::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,16,.85) 0%, rgba(17,17,16,.1) 45%, rgba(17,17,16,.25) 100%); pointer-events: none; }
.take-kop { position: absolute; left: 18px; top: 16px; right: 18px; z-index: 2; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.take-kop span { display: inline-flex; align-items: center; gap: 6px; }
.take-naam { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.take-naam b { font-family: var(--kop); font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); line-height: .92; text-transform: uppercase; }
.take-naam small { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--stof-licht); }
.take:hover { color: var(--papier); }
.take.leeg { display: flex; align-items: center; justify-content: center; }
.take.leeg::after { display: none; }
.take.leeg i { font-family: var(--mono); font-size: 12px; color: var(--stof); font-style: normal; }
.take.rood { background: var(--opname); color: var(--film); border-color: var(--opname); display: flex; align-items: flex-end; padding: 28px; }
.take.rood::after { display: none; }
.take.rood b { font-family: var(--kop); font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: .88; text-transform: uppercase; }
.take.rood:hover { color: var(--film); }
.takes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.takes-grid .take-naam b { font-size: clamp(26px, 2.4vw, 40px); overflow-wrap: anywhere; }
@media (max-width: 500px) { .takes-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .take-naam b { font-size: 24px; } .take-kop { font-size: 10px; left: 12px; right: 12px; top: 12px; } .take-naam { left: 12px; right: 12px; bottom: 12px; } }

/* --- Filters (werk) --- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 12px 18px; border-radius: 2px; border: 1px solid var(--lijn-2); background: transparent; color: var(--papier); display: inline-flex; align-items: center; gap: 8px; }
.filters button[aria-pressed="true"] { background: var(--papier); color: var(--film); border-color: var(--papier); }
.filters button:hover { border-color: var(--papier); }
.takes-grid .take[hidden] { display: none; }

/* --- REC / LIVE tweeluik --- */
.tweeluik { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border: 1px solid var(--lijn); }
.tweeluik > div { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 24px; min-height: 420px; }
.tweeluik > div:first-child { border-bottom: 1px solid var(--lijn); }
@media (min-width: 701px) { .tweeluik > div:first-child { border-bottom: 0; border-right: 1px solid var(--lijn); } }
.tweeluik h2 { font-size: clamp(64px, 8vw, 128px); line-height: .86; }
.tweeluik p { margin-top: auto; font-size: 17px; max-width: 420px; color: var(--tekst-zacht); }
.tweeluik .papier p { color: var(--film); }

/* --- Pakketrijen (home, rood vlak) --- */
.pak-rijen { margin-top: clamp(32px, 5vw, 56px); border-top: 2px solid var(--film); }
.pak-rij { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding: 30px 0; border-bottom: 2px solid var(--film); color: var(--film); }
.pak-rij:hover { color: var(--film); }
.pak-rij .nr { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; width: 90px; }
.pak-rij .naam { font-family: var(--kop); font-size: clamp(40px, 6vw, 96px); line-height: .9; text-transform: uppercase; flex: 1 1 300px; transition: transform .2s; }
.pak-rij:hover .naam { transform: translateX(12px); }
.pak-rij .prijs { font-family: var(--mono); font-size: clamp(22px, 3vw, 44px); font-weight: 500; white-space: nowrap; }

/* --- Pakketkaarten --- */
.pak-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 36px; }
.pak-grid:has(> .pak-kaart:nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }
.pak-grid:has(> .pak-kaart:nth-child(5)) .prijs { font-size: 26px; white-space: normal; }
.pak-grid:has(> .pak-kaart:nth-child(5)) .prijs small { display: block; margin-top: 2px; }
.pak-kaart { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--film-2); border: 1px solid var(--lijn); color: var(--papier); position: relative; transition: border-color .15s; }
.pak-kaart:hover { border-color: var(--papier); color: var(--papier); }
.pak-kaart .tag { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--stof-licht); }
.pak-kaart h3 { font-size: 30px; line-height: 1; }
.pak-kaart .prijs { font-family: var(--mono); font-size: 30px; font-weight: 500; white-space: nowrap; }
.pak-kaart .prijs small { font-size: 15px; font-weight: 400; color: var(--stof-licht); }
.pak-kaart .prijs i { font-style: normal; font-size: 16px; font-weight: 400; margin-right: 6px; }
.pak-kaart p { font-size: 15px; color: var(--tekst-zacht); }
.pak-kaart ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.55; color: var(--tekst-zacht); border-top: 1px solid var(--lijn); }
.pak-kaart li { padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.pak-kaart .pijl { margin-top: auto; align-self: flex-start; font-size: 13px; }
.pak-kaart.uitgelicht { background: var(--film); border-color: var(--film); }
.papier .pak-kaart { background: transparent; border-color: var(--film); color: var(--film); }
.papier .pak-kaart:hover { background: var(--film); color: var(--papier); }
.papier .pak-kaart p, .papier .pak-kaart ul { color: var(--papier-tekst); }
.papier .pak-kaart:hover p, .papier .pak-kaart:hover ul { color: var(--tekst-zacht); }
.papier .pak-kaart ul, .papier .pak-kaart li { border-color: var(--papier-lijn); }
.papier .pak-kaart .prijs small, .papier .pak-kaart .tag { color: var(--papier-tekst); }
.papier .pak-kaart:hover .prijs small, .papier .pak-kaart:hover .tag { color: var(--stof-licht); }
.papier .pak-kaart.uitgelicht { background: var(--film); color: var(--papier); border-color: var(--film); }
.papier .pak-kaart.uitgelicht p, .papier .pak-kaart.uitgelicht ul { color: var(--tekst-zacht); }
.papier .pak-kaart.uitgelicht li, .papier .pak-kaart.uitgelicht ul { border-color: var(--lijn-2); }
.papier .pak-kaart.uitgelicht .tag, .papier .pak-kaart.uitgelicht .prijs small { color: var(--stof-licht); }
.papier .pak-kaart.uitgelicht:hover { background: var(--opname); color: var(--film); border-color: var(--opname); }
.papier .pak-kaart.uitgelicht:hover p, .papier .pak-kaart.uitgelicht:hover ul, .papier .pak-kaart.uitgelicht:hover .tag, .papier .pak-kaart.uitgelicht:hover .prijs small { color: var(--film); }
.pak-kaart.licht { background: var(--papier); color: var(--film); border-color: var(--papier); }
.pak-kaart.licht p, .pak-kaart.licht ul { color: var(--papier-tekst); }
.pak-kaart.licht li, .pak-kaart.licht ul { border-color: var(--papier-lijn); }
.pak-kaart.licht .tag, .pak-kaart.licht .prijs small { color: var(--papier-tekst); }
.pak-kaart.licht:hover { background: var(--opname); border-color: var(--opname); color: var(--film); }
.pak-kaart.licht:hover p, .pak-kaart.licht:hover ul, .pak-kaart.licht:hover .tag, .pak-kaart.licht:hover .prijs small { color: var(--film); }
.pak-noot { margin-top: 24px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* --- FAQ --- */
.faq { max-width: 900px; }
.faq details { border-top: 1px solid var(--lijn); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--lijn); }
.faq summary { cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--stof); font-family: var(--mono); }
.faq details[open] summary::after { content: '–'; }
.faq p { margin-top: 14px; color: var(--stof-licht); max-width: 720px; }

/* --- Over / tweekolom met beeld --- */
.beeld-tekst { display: flex; flex-wrap: wrap; }
.beeld-tekst .beeld { flex: 1 1 400px; min-height: 520px; position: relative; background: var(--film-3); overflow: hidden; }
.beeld-tekst .beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.beeld-tekst .tekst { flex: 1 1 480px; padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(48px, 6vw, 96px) clamp(24px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.beeld-tekst .tekst p { max-width: 520px; font-size: 18px; color: var(--tekst-zacht); }
.frame-label { position: absolute; left: 24px; top: 22px; z-index: 2; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--papier); }
.frame-label.rechts { left: auto; right: 24px; display: inline-flex; align-items: center; gap: 6px; }
.portret { position: relative; aspect-ratio: 4 / 5; max-width: 560px; background: var(--film-3); overflow: hidden; flex: 1 1 380px; }
.portret img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.drieluik { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; margin-top: 40px; }
.drieluik > div { display: flex; flex-direction: column; gap: 14px; border-top: 3px solid var(--papier); padding-top: 22px; }
.drieluik > div.rood { border-top-color: var(--opname); color: inherit; }
.drieluik .nr { font-family: var(--mono); font-size: 13px; color: var(--stof-licht); }
.drieluik h3 { font-size: 34px; line-height: 1; }
.drieluik p { font-size: 16px; color: var(--tekst-zacht); }
.papier .drieluik > div { border-top-color: var(--film); }
.papier .drieluik > div.rood { border-top-color: var(--opname); }
.papier .drieluik p, .papier .drieluik .nr { color: var(--papier-tekst); }
.drieluik .cijfer { font-family: var(--kop); font-size: clamp(64px, 8vw, 112px); line-height: .9; }

.lijst { display: flex; flex-direction: column; border-top: 1px solid currentColor; font-size: 17px; margin: 0; padding: 0; list-style: none; }
.lijst li { padding: 14px 0; border-bottom: 1px solid var(--papier-lijn); }
.film .lijst li { border-bottom-color: var(--lijn); }

/* --- Case detail --- */
.meta-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; border-top: 1px solid var(--lijn); padding-top: 20px; }
.meta-grid > div { display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.meta-grid .label { font-size: 12px; }
.hoofdbeeld { position: relative; aspect-ratio: 16 / 9; background: var(--film-3); overflow: hidden; }
.hoofdbeeld img, .hoofdbeeld video, .hoofdbeeld iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.frame { position: relative; background: var(--film-3); overflow: hidden; aspect-ratio: 4 / 5; }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.frame.breed { aspect-ratio: 16 / 9; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.frame.breed { grid-column: 1 / -1; }
.frame .frame-label { color: var(--papier); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.prose { font-size: 17px; line-height: 1.7; color: var(--tekst-zacht); max-width: 720px; }
.prose p + p { margin-top: 1em; }
.prose h2 { font-size: clamp(32px, 4vw, 48px); margin: 2em 0 .5em; color: var(--papier); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--papier); border-bottom: 1px solid var(--stof); }
.prose a:hover { color: var(--opname); border-color: var(--opname); }
.papier .prose { color: var(--film); }
.papier .prose h2 { color: var(--film); }
.papier .prose a { color: var(--film); border-color: var(--papier-lijn); }
.volgende { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; border-top: 1px solid var(--papier); padding-top: 28px; }
.volgende span { display: flex; flex-direction: column; gap: 10px; }
.volgende b { font-family: var(--kop); font-weight: 400; font-size: clamp(44px, 7vw, 104px); line-height: .9; text-transform: uppercase; }
.citaat { display: flex; flex-direction: column; gap: 18px; max-width: 1000px; margin: 0; }
.citaat p { font-family: var(--kop); font-size: clamp(32px, 5vw, 64px); line-height: 1; text-transform: uppercase; }
.citaat footer { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--stof-licht); }

/* --- Formulieren --- */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 20px; }
.form .vol { grid-column: 1 / -1; }
.veld { display: flex; flex-direction: column; gap: 8px; }
.veld > span, .veld > label, .form legend { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stof-licht); }
.veld input, .veld select, .veld textarea {
  width: 100%; background: var(--film-2); border: 1px solid var(--lijn-2); color: var(--papier);
  padding: 16px; border-radius: 2px; font: inherit; font-size: 16px;
  transition: border-color .15s;
}
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 0; border-color: var(--papier); }
.veld textarea { min-height: 160px; resize: vertical; }
.veld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--stof-licht) 50%), linear-gradient(135deg, var(--stof-licht) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.veld input::placeholder, .veld textarea::placeholder { color: var(--stof); }
.veld input[type="date"] { color-scheme: dark; }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; }
.kz-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.kz { position: relative; }
.kz input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.kz span { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; padding: 11px 16px; border: 1px solid var(--lijn-2); border-radius: 2px; color: var(--papier); transition: all .15s; }
.kz input:checked + span { background: var(--papier); color: var(--film); border-color: var(--papier); }
.kz input:focus-visible + span { outline: 2px solid var(--opname); outline-offset: 2px; }
.kz:hover span { border-color: var(--papier); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-voet { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.form-voet small { font-size: 14px; color: var(--stof-licht); }
.fout { grid-column: 1 / -1; font-family: var(--mono); font-size: 14px; color: var(--opname); border: 1px solid var(--opname); padding: 14px 16px; border-radius: 2px; }
.form-tussenkop { grid-column: 1 / -1; font-size: 32px; margin-top: 16px; }
.dank { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.dank h2 { font-size: clamp(44px, 6vw, 80px); line-height: .9; }

/* Stappen (naast formulier) */
.stappen { display: flex; flex-direction: column; border-top: 1px solid var(--papier); }
.stappen .label { padding: 18px 0 6px; }
.stappen > div { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--lijn); font-size: 16px; line-height: 1.5; }
.stappen > div > i { font-family: var(--mono); font-size: 13px; color: var(--stof); width: 48px; flex: 0 0 48px; font-style: normal; }
.stappen > div > i.rood { color: var(--opname); }

/* Aanvraag-zijkant */
.aanvraag-grid { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.aanvraag-grid .form { flex: 999 1 520px; }
.aanvraag-zij { flex: 1 1 300px; max-width: 400px; display: flex; flex-direction: column; gap: 18px; border: 1px solid var(--lijn); padding: 28px; position: sticky; top: 24px; }
.aanvraag-zij .prijs { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1; }
.aanvraag-zij .prijs i { font-style: normal; font-size: 16px; font-weight: 400; margin-right: 6px; }
.aanvraag-zij .prijs small { font-size: 15px; color: var(--stof-licht); font-weight: 400; }
.aanvraag-zij small.noot { font-size: 13px; color: var(--stof-licht); line-height: 1.5; }

/* --- Afsluiter (groot rood of 'Draaien?') --- */
.afsluiter { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: clamp(64px, 8vw, 100px); padding-bottom: clamp(64px, 8vw, 100px); }
.afsluiter h2 { font-size: clamp(56px, 9vw, 140px); line-height: .86; }
.draaien h2 { margin-top: 24px; }
.draaien h2 .regel { display: block; font-size: clamp(56px, 9vw, 150px); line-height: .86; margin-bottom: .12em; }
.draaien h2 .cut { font-size: clamp(96px, 20vw, 340px); color: var(--opname); }
.draaien-onder { margin-top: clamp(32px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.draaien-onder .mail { font-family: var(--mono); font-size: 16px; }
.draaien-onder small { font-family: var(--mono); font-size: 13px; color: var(--stof); text-transform: uppercase; letter-spacing: .1em; }

/* --- Voet --- */
.voet { border-top: 1px solid var(--lijn); }
.voet-boven { padding-top: clamp(48px, 6vw, 72px); padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.voet-boven > svg, .voet-boven > img { width: 200px; height: auto; align-self: flex-start; }
.voet-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 40px; flex: 0 1 640px; font-size: 15px; line-height: 1.9; }
.voet-kolommen > div { display: flex; flex-direction: column; }
.voet-kolommen .label { font-size: 12px; margin-bottom: 8px; color: var(--stof); }
.voet-kolommen .zacht { color: var(--stof-licht); }
.voet-onder { padding-top: 20px; padding-bottom: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--stof); border-top: 1px solid var(--lijn); text-transform: uppercase; letter-spacing: .06em; }
.voet-onder a:hover { color: var(--papier); }

/* --- Reveal (subtiel, zonder library) --- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* --- Compat: oude klassen die offerte_accepteren.php en toestemming_tekenen.php nog gebruiken --- */
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); }
.site-header .mark { display: flex; align-items: center; gap: 14px; }
.site-header .mark svg { height: 42px; width: auto; fill: var(--papier); }
.mark-name { font-family: var(--kop); font-size: 22px; text-transform: uppercase; display: block; line-height: 1; }
.mark-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--stof); display: block; margin-top: 4px; }
.cursor, .page-transition { display: none; }
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); }
.page-hero h1 { font-size: clamp(48px, 8vw, 120px); line-height: .9; margin-top: 20px; }
.page-hero .lede { margin-top: 24px; }
.eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stof-licht); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--opname); }
.btn { display: inline-block; font-weight: 600; font-size: 16px; padding: 18px 28px; border-radius: 2px; border: 1px solid transparent; background: var(--papier); color: var(--film); }
.btn:hover { background: var(--opname); color: var(--film); }
.btn-outline { background: transparent; color: var(--papier); border-color: var(--papier); }
.btn-outline:hover { background: var(--papier); color: var(--film); }
.simple-footer { border-top: 1px solid var(--lijn); padding: 24px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--stof); text-transform: uppercase; letter-spacing: .06em; }
.contact-form { display: grid; gap: 20px; max-width: 640px; }
.contact-field { display: flex; flex-direction: column; gap: 8px; }
.contact-field label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stof-licht); }
.contact-field input, .contact-field textarea, .contact-field select { width: 100%; background: var(--film-2); border: 1px solid var(--lijn-2); color: var(--papier); padding: 16px; border-radius: 2px; font: inherit; }
.contact-honeypot { position: absolute; left: -9999px; }
.wrap.prose { padding-top: 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--stof-licht); font-weight: 500; }

/* --- Fotogalerij (galerij.php): masonry in kolommen + lightbox --- */
.foto-grid { columns: 3 320px; column-gap: 12px; }
.foto { display: block; position: relative; margin: 0 0 12px; break-inside: avoid; background: var(--film-3); overflow: hidden; cursor: zoom-in; }
.foto img { width: 100%; height: auto; display: block; transition: transform .5s ease, opacity .2s; }
.foto:hover img { transform: scale(1.02); }
.foto .frame-label { left: 14px; top: 12px; font-size: 11px; opacity: 0; transition: opacity .2s; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.foto:hover .frame-label, .foto:focus-visible .frame-label { opacity: 1; }
.foto.video { cursor: pointer; }
.foto.video .frame-label { opacity: 1; }
.foto .speel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(17,17,16,.7); border: 1px solid var(--papier); color: var(--papier); display: flex; align-items: center; justify-content: center; font-size: 20px; padding-left: 4px; }
.foto.video:hover .speel { background: var(--opname); border-color: var(--opname); color: var(--film); }
@media (max-width: 500px) { .foto-grid { columns: 2; column-gap: 8px; } .foto { margin-bottom: 8px; } }

.lightbox { padding: 0; border: 0; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; background: rgba(17,17,16,.97); color: var(--papier); }
.lightbox::backdrop { background: rgba(17,17,16,.97); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: calc(100vw - 160px); max-height: calc(100dvh - 120px); width: auto; height: auto; object-fit: contain; }
.lightbox button { position: absolute; background: transparent; color: var(--papier); border: 1px solid var(--lijn-2); font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; border-radius: 2px; }
.lightbox button:hover { border-color: var(--opname); color: var(--opname); }
.lb-sluit { top: 20px; right: 20px; }
.lb-vorige, .lb-volgende { top: 50%; transform: translateY(-50%); font-size: 20px !important; padding: 16px 18px !important; }
.lb-vorige { left: 20px; } .lb-volgende { right: 20px; }
.lb-tc { position: absolute; left: 24px; top: 30px; font-size: 13px; letter-spacing: .14em; color: var(--stof-licht); display: inline-flex; align-items: center; gap: 10px; }
.lb-tc::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--opname); }
@media (max-width: 700px) {
  .lightbox img { max-width: 100vw; max-height: calc(100dvh - 160px); }
  .lb-vorige, .lb-volgende { top: auto; bottom: 20px; transform: none; }
}

/* ==========================================================================
   EFFECTEN (assets/js/effects.js) — alleen actief als html.fx (beweging toegestaan, JS geladen)
   ========================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Lenis */
html.fx-glad, html.lenis, html.lenis body { height: auto; }
html.fx-glad, html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* Geen flits vóór de intro of na een overgang */
html.fx-intro-aan body::before, html.fx-dicht body::before { content: ''; position: fixed; inset: 0; background: var(--film); z-index: 9998; }

/* 01 REC-intro */
.fx-intro { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.fx-intro-boven, .fx-intro-onder { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--film); transition: transform .75s cubic-bezier(.8,0,.2,1); }
.fx-intro-boven { top: 0; } .fx-intro-onder { bottom: 0; }
.fx-intro-lijn { position: absolute; left: 0; right: 0; top: calc(50% - 4px); height: 8px; background: var(--opname); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.7,0,.3,1), opacity .3s .55s; }
.fx-intro-slate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--papier); transition: opacity .2s; }
.fx-intro-rec { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 10px; }
.fx-intro-rec i { width: 12px; height: 12px; border-radius: 50%; background: var(--opname); animation: rec 1s steps(1) infinite; }
.fx-intro-tc { font-family: var(--kop); font-size: clamp(64px, 12vw, 180px); line-height: .9; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.fx-intro-meta { display: flex; gap: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--stof-licht); }
.fx-intro-meta b { color: var(--papier); font-weight: 500; }
.fx-intro-meta em { font-style: normal; }
.fx-intro.knip .fx-intro-lijn { transform: scaleX(1); }
.fx-intro.knip .fx-intro-slate { opacity: 0; }
.fx-intro.weg .fx-intro-boven { transform: translateY(-101%); }
.fx-intro.weg .fx-intro-onder { transform: translateY(101%); }
.fx-intro.weg .fx-intro-lijn { opacity: 0; }

/* 02 Pagina-overgang */
.fx-wipe { position: fixed; inset: 0; z-index: 9990; pointer-events: none; }
.fx-wipe i { position: absolute; left: 0; right: 0; display: block; }
.fx-wipe-boven, .fx-wipe-onder { height: 50.2%; background: var(--film); transition: transform .42s cubic-bezier(.8,0,.2,1); }
.fx-wipe-boven { top: 0; transform: translateY(-101%); }
.fx-wipe-onder { bottom: 0; transform: translateY(101%); }
.fx-wipe-lijn { top: calc(50% - 4px); height: 8px; background: var(--opname); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.7,0,.3,1); }
.fx-wipe.sluit { pointer-events: auto; }
.fx-wipe.sluit .fx-wipe-lijn { transform: scaleX(1); }
.fx-wipe.sluit .fx-wipe-boven, .fx-wipe.sluit .fx-wipe-onder { transform: none; transition-delay: .16s; }
.fx-wipe.dicht i { transition: none !important; }
.fx-wipe.dicht .fx-wipe-boven, .fx-wipe.dicht .fx-wipe-onder { transform: none; }
.fx-wipe.dicht .fx-wipe-lijn { transform: scaleX(1); }
.fx-wipe.open .fx-wipe-lijn { transform: scaleX(0); transform-origin: right; transition-delay: .3s; }

/* 03 Snede-koppen */
html.fx .cut > .cut-boven > span, html.fx .cut > .cut-onder > span { transition: transform 1.05s cubic-bezier(.75,0,.15,1), opacity .5s; opacity: 0; }
html.fx .cut > .cut-boven > span { transform: translateX(-9%); }
html.fx .cut > .cut-onder > span { transform: translateX(9%); }
html.fx .cut > .cut-lijn { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.7,0,.2,1) .15s; }
html.fx .cut.fx-in > .cut-boven > span, html.fx .cut.fx-in > .cut-onder > span { transform: none; opacity: 1; }
html.fx .cut.fx-in > .cut-lijn { transform: scaleX(1); }

/* 04 Scroll-timecode */
.fx-hud { position: fixed; right: 18px; bottom: 16px; z-index: 60; display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--papier); background: rgba(17,17,16,.72); border: 1px solid var(--lijn-2); padding: 8px 12px; border-radius: 2px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none; }
.fx-hud-pct { color: var(--stof-licht); }
html.fx-gescrold .fx-hud { opacity: 1; transform: none; }
.fx-balk { position: fixed; left: 0; right: 0; top: 0; height: 2px; background: var(--papier); transform: scaleX(0); transform-origin: left; z-index: 61; pointer-events: none; }
.fx-kop { position: fixed; left: 0; top: 0; width: 36px; height: 2px; background: var(--opname); z-index: 61; pointer-events: none; }
.fx-kop::after { content: ''; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--opname); }
@media (max-width: 700px) { .fx-kop { display: none; } .fx-hud { right: 10px; bottom: 10px; font-size: 10px; } }

/* 05 Filmkorrel */
.fx-korrel { position: fixed; inset: -100px; z-index: 9000; pointer-events: none; opacity: .055; mix-blend-mode: overlay; animation: korrel .9s steps(6) infinite; }
@keyframes korrel { 0% { transform: translate(0,0); } 20% { transform: translate(-40px,30px); } 40% { transform: translate(30px,-50px); } 60% { transform: translate(-60px,-20px); } 80% { transform: translate(50px,60px); } 100% { transform: translate(0,0); } }

/* 06 Zoeker-cursor */
.fx-zoeker { position: fixed; left: 0; top: 0; z-index: 9500; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .2s; }
.fx-zoeker.zichtbaar { opacity: 1; }
.fx-zoeker i { position: absolute; width: 14px; height: 14px; border-color: var(--papier); border-style: solid; border-width: 0; transition: transform .35s cubic-bezier(.7,0,.2,1), opacity .25s; opacity: 0; }
.fx-zoeker i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; transform: translate(-10px,-10px); }
.fx-zoeker i:nth-child(2) { left: 0; top: 0; border-right-width: 2px; border-top-width: 2px; transform: translate(-4px,-10px); }
.fx-zoeker i:nth-child(3) { left: 0; top: 0; border-left-width: 2px; border-bottom-width: 2px; transform: translate(-10px,-4px); }
.fx-zoeker i:nth-child(4) { left: 0; top: 0; border-right-width: 2px; border-bottom-width: 2px; transform: translate(-4px,-4px); }
.fx-zoeker-punt { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--opname); transition: transform .25s; }
.fx-zoeker-label { position: absolute; left: 0; top: 52px; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--film); background: var(--papier); padding: 5px 8px; opacity: 0; transition: opacity .2s; }
.fx-zoeker.kader i { opacity: 1; }
.fx-zoeker.kader i:nth-child(1) { transform: translate(-58px,-40px); }
.fx-zoeker.kader i:nth-child(2) { transform: translate(44px,-40px); }
.fx-zoeker.kader i:nth-child(3) { transform: translate(-58px,26px); }
.fx-zoeker.kader i:nth-child(4) { transform: translate(44px,26px); }
.fx-zoeker.kader .fx-zoeker-label { opacity: 1; }
.fx-zoeker.kader .fx-zoeker-punt { animation: rec 1s steps(1) infinite; }
.fx-zoeker.link .fx-zoeker-punt { transform: scale(2.2); }
html.fx-js .take, html.fx-js .foto, html.fx-js .hoofdbeeld, html.fx-js .beeld, html.fx-js .portret { cursor: none; }

/* 08 Werkstrook */
.fx-pin { position: relative; }
.fx-pin-plak { position: sticky; top: 0; overflow: hidden; }
html.fx-pin-aan .strook-scroll { overflow: visible; scroll-snap-type: none; will-change: transform; }

/* 09 Rollende cijfers */
.fx-rol { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: -0.12em; font-variant-numeric: tabular-nums; }
.fx-rol-band { display: flex; flex-direction: column; transition: transform 1.5s cubic-bezier(.2,.8,.15,1); }
.fx-rol-band > span { display: block; height: 1em; line-height: 1; text-align: center; }
.fx-rol-in .fx-rol-band { transform: translateY(calc(var(--stappen) * -1em)); }

/* 10 Magneet */
.fx-magneet { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .15s, color .15s, border-color .15s; will-change: transform; }

/* 11 Parallax */
.fx-par { will-change: transform; transform: scale(1.14); }
.take:hover img.fx-par { transition: none; }

/* 13 Ticker */
.fx-ticker { overflow: hidden; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 18px 0; white-space: nowrap; }
.fx-ticker-band { display: inline-flex; gap: 0; will-change: transform; }
.fx-ticker-band span { font-family: var(--kop); font-size: clamp(36px, 5vw, 72px); line-height: 1; text-transform: uppercase; padding-right: .6em; display: inline-flex; align-items: center; gap: .6em; }
.fx-ticker-band span i { width: .28em; height: .28em; border-radius: 50%; background: var(--opname); display: inline-block; }
.fx-ticker-band span.hol { color: transparent; -webkit-text-stroke: 1px var(--papier); }
html:not(.fx-js) .fx-ticker-band { animation: ticker 40s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { html:not(.fx-js) .fx-ticker-band { animation: none; } }

/* Contact: direct WhatsApp / bellen */
.direct-contact { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.direct-contact .knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.direct-contact small { font-size: 14px; color: var(--stof-licht); }
.veld > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--stof); }
@media (max-width: 520px) { .direct-contact .knop { width: 100%; justify-content: center; text-align: center; } }

/* ---------- Showreel op de homepage (loopt stil in een loop, alleen als hij in beeld is) ---------- */
.showreel-frame { position: relative; aspect-ratio: 16 / 9; background: var(--film, #111110); border: 1px solid var(--lijn, #2B2A27); overflow: hidden; }
.showreel-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.showreel-knoppen { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.showreel-knop, .showreel-geluid { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(17,17,16,.72); color: var(--papier, #F5F2EA); border: 1px solid rgba(245,242,234,.25); border-radius: 2px; cursor: pointer; backdrop-filter: blur(6px); }
.showreel-knop:hover, .showreel-knop:focus-visible, .showreel-geluid:hover, .showreel-geluid:focus-visible, .showreel-geluid[aria-pressed="true"] { border-color: var(--opname, #E5322D); }