/* ===========================================================
   Héritier Tipo — editorial monochrome
   Papier + inkt + tally-rood (actie) + live-groen (status). Harde randen, haarlijnen, groot beeld.
   =========================================================== */

:root {
  --paper: #efebe3;
  --paper-2: #e6e1d7;
  --ink: #14130f;
  --ink-70: rgba(20, 19, 15, 0.62);
  --ink-40: rgba(20, 19, 15, 0.38);
  --rule: rgba(20, 19, 15, 0.22);
  --accent: #d63a0c;        /* tally: het rode lampje op de camera — actie */
  --accent-ink: #b8330f;    /* tally op papier (contrast) */
  --live: #c9f24c;          /* live: status, voortgang, 'nu' */
  --live-ink: #4d6b00;      /* live op papier (leesbaar) */

  --display: "Clash Display", "Archivo", system-ui, sans-serif;
  --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --rhythm: clamp(4.5rem, 11vh, 9rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--ink); color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 0; left: 0; z-index: 200; width: auto; height: auto;
  clip: auto; margin: 0; padding: 0.75rem 1.25rem;
  background: var(--ink); color: var(--paper);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- drie tekstniveaus, niets ertussen ---------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.2rem, 11.5vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.025em;
}
.display--md {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.display em { font-style: italic; }

.label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-70);
}

.body-lg { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.55; }
.body { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-70); }

/* ---------- structuur ---------- */

.wrap { padding-inline: var(--gutter); }
.section { padding-block: var(--rhythm); }
.rule { border-top: 1px solid var(--rule); }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sec-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; }

.more {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
  border-bottom: 1px solid var(--ink-40); padding-bottom: 2px; white-space: nowrap;
}
.more:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- header ---------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.875rem var(--gutter);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead__name {
  font-family: var(--display); font-size: 1.375rem; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap;
}
.masthead nav { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); }
.masthead nav a {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-70); padding-block: 2px;
}
.masthead nav a:hover { color: var(--ink); }
.masthead nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--ink); }

.tools { display: flex; align-items: center; gap: 0.75rem; }
.langs { display: flex; gap: 0.5rem; }
.langs a {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-40);
}
.langs a:hover { color: var(--ink); }
.langs a[aria-current="true"] { color: var(--ink); }
.burger { display: none; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; }

/* desktop: rode lijn die onder de link uitschuift */
.masthead nav a { position: relative; }
.masthead nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.masthead nav a:hover::after, .masthead nav a:focus-visible::after { transform: scaleX(1); }
.masthead nav a[aria-current="page"]::after { display: none; }
.masthead nav a[data-i]::before { display: none; }

@media (max-width: 860px) {
  .burger { display: block; position: relative; padding: .35rem 0; }
  .burger[aria-expanded="true"] { color: var(--accent); }
  .masthead nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: 3.25rem; z-index: 99;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
    padding: 1.5rem var(--gutter) 2rem; background: var(--paper);
    border-top: 1px solid var(--rule);
    visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear .28s;
    overflow-y: auto;
  }
  .masthead nav[data-open="true"] { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .masthead nav a {
    font-family: var(--display); font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.05;
    letter-spacing: -0.01em; text-transform: none; font-weight: 400; color: var(--ink);
    padding: .55rem 0; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; gap: .9rem;
    opacity: 0; transform: translateY(14px);
  }
  .masthead nav a::after { display: none; }
  .masthead nav a[data-i]::before {
    content: attr(data-i); display: inline-block; font-family: var(--sans); font-size: .6875rem; font-weight: 600;
    letter-spacing: .16em; color: var(--accent-ink); min-width: 1.6rem;
  }
  .masthead nav a[aria-current="page"] { border-bottom: 1px solid var(--rule); color: var(--accent-ink); }
  .masthead nav[data-open="true"] a { animation: menu-in .5s cubic-bezier(.2,.7,.2,1) forwards; }
  .masthead nav[data-open="true"] a:nth-child(1) { animation-delay: .05s; }
  .masthead nav[data-open="true"] a:nth-child(2) { animation-delay: .11s; }
  .masthead nav[data-open="true"] a:nth-child(3) { animation-delay: .17s; }
  .masthead nav[data-open="true"] a:nth-child(4) { animation-delay: .23s; }
  .masthead nav[data-open="true"] a:nth-child(5) { animation-delay: .32s; }
  .masthead nav .nav__cta {
    font-family: var(--sans); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
    margin-top: 1.75rem; padding: 1rem 1.4rem; border: 1px solid var(--ink); border-radius: 999px; border-bottom: 1px solid var(--ink);
    justify-content: center; width: 100%; display: flex; gap: 0; color: #fff; background: var(--accent); border-color: var(--accent);
  }
  .masthead nav .nav__cta::before { content: ""; min-width: 0; }
  .masthead nav .nav__foot { margin-top: auto; padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .masthead nav .nav__foot .chip, .masthead nav .nav__foot .label { white-space: nowrap; margin: 0; font-size: .625rem; }
  body[data-menu="open"] { overflow: hidden; }
  body[data-menu="open"] .masthead { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
}
@keyframes menu-in { to { opacity: 1; transform: none; } }
@media (min-width: 861px) { .masthead nav .nav__foot { display: none; } }

/* ---------- hero: gesplitst op desktop, overlay op mobiel ---------- */

.hero {
  position: relative; height: calc(100svh - 3.2rem); min-height: 32rem; overflow: hidden;
  background: var(--paper);
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.hero__img {
  grid-column: 2; grid-row: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 26%;
  filter: grayscale(100%) contrast(1.04);
}
.hero__scrim { display: none; }
.hero__foot {
  grid-column: 1; grid-row: 1; align-self: end;
  padding: 0 clamp(2rem, 4vw, 4rem) clamp(2rem, 5vh, 3.25rem) var(--gutter);
  color: var(--ink);
}
.hero__kicker { margin-bottom: 1rem; }
.hero__name { color: var(--ink); font-size: clamp(3rem, 6.4vw, 6.25rem); }
.hero__now {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem;
  margin-top: 1.75rem; padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem; color: var(--ink-70); max-width: 30rem;
}
.hero__now b { font-weight: 600; color: var(--ink); }
.hero__now a { border-bottom: 1px solid var(--ink-40); }
.hero__now a:hover { border-color: var(--ink); }

@media (max-width: 860px) {
  .hero { display: block; background: var(--ink); }
  .hero__img { position: absolute; inset: 0; object-position: 50% 24%; }
  .hero__scrim {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,19,15,0.62) 0%, rgba(20,19,15,0) 26%, rgba(20,19,15,0.84) 100%);
  }
  .hero__foot {
    position: absolute; inset: auto 0 0 0;
    padding: 0 var(--gutter) clamp(1.75rem, 4vh, 3rem); color: var(--paper);
  }
  .hero__kicker { color: rgba(239,235,227,0.82); }
  .hero__name { color: var(--paper); }
  .hero__now { color: rgba(239,235,227,0.86); border-top-color: rgba(239,235,227,0.34); }
  .hero__now b { color: var(--paper); }
  .hero__now a { border-bottom-color: rgba(239,235,227,0.5); }
}

/* ---------- lede / bio ---------- */

.lede { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lede__text > * + * { margin-top: 1.15rem; }
.lede__text .body-lg:first-of-type { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.18; color: var(--ink); letter-spacing: -0.01em; }
.lede figure { margin: 0; }
.lede img { width: 100%; height: auto; filter: grayscale(100%); }
.lede figcaption { margin-top: 0.75rem; }

@media (max-width: 860px) { .lede { grid-template-columns: 1fr; } }

/* ---------- quote-band ---------- */

.band { position: relative; min-height: 60svh; display: grid; align-items: end; background: var(--ink); overflow: hidden; }
.band img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 8%; filter: grayscale(100%) contrast(1.05);
}
.band__inner { position: relative; padding: clamp(3rem, 10vh, 7rem) var(--gutter) clamp(2rem, 5vh, 3.5rem); max-width: 46rem; }
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,15,0.1) 0%, rgba(20,19,15,0.78) 100%);
}
.band__inner { z-index: 2; color: var(--paper); }
.band blockquote { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -0.02em; }
.band cite { display: block; margin-top: 1.25rem; font-family: var(--sans); font-style: normal; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(239,235,227,0.72); }
.band cite a { border-bottom: 1px solid rgba(239,235,227,0.4); }

/* ---------- index (credits, pers, muziek) ---------- */

.index { border-top: 1px solid var(--rule); }
.index__group { padding-top: 1.5rem; margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.index__group:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.index__group > .label { display: block; margin-bottom: 0.75rem; }

.row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row__year { font-size: 0.75rem; font-weight: 500; color: var(--ink-40); font-variant-numeric: tabular-nums; }
.row__title { font-family: var(--display); font-size: clamp(1.125rem, 1.9vw, 1.5rem); line-height: 1.1; letter-spacing: -0.01em; }
.row__title span { display: block; font-family: var(--sans); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: var(--ink-70); margin-top: 0.3rem; }
.row__meta { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-40); text-align: right; }
.row--link { grid-template-columns: minmax(0, 1fr) auto; }
.row--link .row__title { font-size: clamp(1.125rem, 1.9vw, 1.5rem); }
a.row:hover .row__title { color: var(--accent); }
a.row:hover .row__meta { color: var(--ink-70); }

@media (max-width: 720px) {
  .row { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .row__meta { grid-column: 2; text-align: left; }
}

/* ---------- contactsheet ---------- */

.sheet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule); }
.sheet figure { position: relative; margin: 0; overflow: hidden; background: var(--paper-2); }
.sheet img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.sheet figure:hover img { transform: scale(1.03); }
.sheet--a { grid-column: span 4; aspect-ratio: 3 / 2; }
.sheet--b { grid-column: span 2; aspect-ratio: 2 / 3; }
.sheet--c { grid-column: span 2; aspect-ratio: 2 / 3; }
.sheet--d { grid-column: span 4; aspect-ratio: 3 / 2; }
@media (max-width: 720px) {
  .sheet { grid-template-columns: repeat(2, 1fr); }
  .sheet--a, .sheet--b, .sheet--c, .sheet--d { grid-column: span 2; aspect-ratio: 4 / 5; }
}
.credit { margin-top: 1rem; }

/* ---------- video ---------- */

.reel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.reel figure { margin: 0; }
.reel__frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.reel__frame iframe, .reel__frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.reel__play {
  position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--paper); background: rgba(20,19,15,0.28);
}
.reel__play span {
  border: 1px solid rgba(239,235,227,0.8); padding: 0.6rem 1.4rem;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em;
  background: rgba(20,19,15,0.35);
}
.reel__play:hover span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.reel figcaption { margin-top: 0.85rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.reel figcaption strong { font-family: var(--display); font-weight: 400; font-size: 1.125rem; letter-spacing: -0.01em; }

/* ---------- opdrachtgevers, kale kolommen ---------- */

.clients { columns: 4 11rem; column-gap: clamp(1.5rem, 3vw, 3rem); font-size: 0.875rem; }
.clients li { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }

/* ---------- boekingen / contact ---------- */

.mailto {
  display: block; font-family: var(--display);
  font-size: clamp(1.4rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  border-block: 1px solid var(--rule);
  word-break: break-word; overflow-wrap: break-word; hyphens: none;
}
.mailto:hover { color: var(--accent); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0; }
.facts div { padding: 1.25rem 0; border-top: 1px solid var(--rule); padding-right: 1.5rem; }
.facts dt, .facts .label { display: block; margin-bottom: 0.5rem; }
.facts p { font-size: 0.9375rem; line-height: 1.5; }

.bio-block { border-top: 1px solid var(--rule); padding: 1.5rem 0; }
.bio-block:last-of-type { border-bottom: 1px solid var(--rule); }
.bio-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.copy-btn { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-40); border-bottom: 1px solid var(--ink-40); }
.copy-btn:hover, .copy-btn[data-state="done"] { color: var(--accent); border-color: var(--accent); }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--rule); padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__grid ul li { padding: 0.3rem 0; font-size: 0.875rem; }
.footer__grid a:hover { color: var(--accent); }
.footer__name { font-family: var(--display); font-size: clamp(2rem, 7vw, 4.5rem); line-height: 0.9; letter-spacing: -0.025em; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-40); }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---------- motion ---------- */

.rise { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .sheet img { transition: none; }
}

/* ============================================================ v2: diepte */

.sec-sub {
  max-width: 40rem; color: var(--ink-2);
  margin: -0.75rem 0 2.5rem;
}
.sec-head--sm h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
.sec-head--light { border-color: rgba(239, 235, 227, 0.28); }
.sec-head--light h2, .sec-head--light .label { color: var(--paper); }

.pagehead {
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.pagehead__lead { max-width: 34rem; color: var(--ink-2); margin-top: 1.25rem; }

.hero__scroll {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  writing-mode: vertical-rl; padding: 0 0 1.5rem 1.4rem;
  color: var(--ink-3);
}
@media (max-width: 860px) { .hero__scroll { display: none; } }

/* uitgelicht werk */
.feats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
}
.feat {
  display: block; background: var(--paper);
  padding: 0; text-decoration: none; color: inherit;
  transition: background 220ms ease;
}
.feat:hover { background: #e7e2d8; }
.feat__img { overflow: hidden; aspect-ratio: 4 / 5; }
.feat__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.feat:hover .feat__img img { transform: scale(1.035); }
.feat__meta { padding: 1.25rem 1.25rem 1.75rem; }
.feat__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.05;
}
.feat__role { margin-top: 0.35rem; color: var(--ink); }
.feat__meta .label { margin-top: 0.85rem; display: block; }
.feat:nth-child(4) .feat__img, .feat:nth-child(5) .feat__img { aspect-ratio: 3 / 2; }
@media (max-width: 860px) {
  .feats { grid-template-columns: minmax(0, 1fr); }
  .feat__img, .feat:nth-child(4) .feat__img, .feat:nth-child(5) .feat__img { aspect-ratio: 3 / 2; }
}

/* traject */
.stories { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.story {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
}
.story:nth-child(even) .story__text { order: 2; }
.story__year { display: block; margin-bottom: 0.9rem; }
.story h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.08;
  margin-bottom: 0.9rem;
}
.story__text .body-lg { color: var(--ink-2); max-width: 32rem; }
.story__img { overflow: hidden; }
.story__img img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3; filter: grayscale(1);
}
@media (max-width: 860px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story:nth-child(even) .story__text { order: 0; }
}

/* logowand */
.wall {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.wall__item {
  background: var(--paper); min-height: 6.5rem;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; text-decoration: none;
  transition: background 200ms ease;
}
.wall__item:hover { background: #e7e2d8; }
.wall__item img {
  max-width: 100%; height: auto; max-height: 1.9rem; width: auto;
  filter: grayscale(1) contrast(0.9); opacity: 0.78;
  transition: opacity 200ms ease, filter 200ms ease;
}
.wall__item:hover img { opacity: 1; filter: grayscale(0); }
.wall__word {
  font-family: var(--display); font-size: 1.1875rem; line-height: 1.15;
  text-align: center; color: var(--ink-2);
}
.wall__item:hover .wall__word { color: var(--accent); }

/* boekingsblok */
.booking {
  background: var(--ink); color: var(--paper);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  margin-top: clamp(3.5rem, 8vw, 6rem);
}
.booking a { color: var(--paper); }
.booking .mailto { color: var(--paper); border-color: rgba(239, 235, 227, 0.28); }
.booking .mailto:hover { color: var(--accent-2, #ff7a4d); border-color: currentColor; }
.booking__lead { max-width: 38rem; color: rgba(239, 235, 227, 0.72); margin: 1.75rem 0 0; }
.booking__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.75rem; border-top: 1px solid rgba(239, 235, 227, 0.2);
}
.booking__grid p { color: rgba(239, 235, 227, 0.78); margin-top: 0.6rem; line-height: 1.55; }
.booking__grid .label { color: rgba(239, 235, 227, 0.55); }
.booking__grid--ink { border-top-color: var(--rule); }
.booking__grid--ink p { color: var(--ink-2); }
.booking__grid--ink .label { color: var(--ink-3); }
@media (max-width: 860px) { .booking__grid { grid-template-columns: minmax(0, 1fr); } }

/* volle breedte beeld */
.fullbleed { margin: clamp(3rem, 7vw, 5.5rem) 0; }
.fullbleed img {
  width: 100%; height: auto; display: block;
  max-height: 70svh; object-fit: cover; filter: grayscale(1);
}
.fullbleed figcaption { padding: 0.75rem 1.4rem 0; }

/* alle kleurbeelden worden ook in zwart-wit getoond */
.fullbleed--color img,
img.color-accent,
.color-accent img { filter: grayscale(1) !important; }


/* contact-opener */
.contact-hero {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.contact-hero__img img { width: 100%; height: auto; filter: grayscale(1); display: block; }
.contact-hero__text .body-lg { max-width: 30rem; color: var(--ink-2); margin: 1.25rem 0 0; }
.contact-hero__text .label { margin-top: 1rem; display: block; }
.mailto--tight { margin: 1.75rem 0 0; }
@media (max-width: 860px) {
  .contact-hero { grid-template-columns: minmax(0, 1fr); }
  .contact-hero__img { order: 2; }
}

/* reel-varianten */
.reel--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reel--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .reel--2, .reel--3 { grid-template-columns: minmax(0, 1fr); }
}
.feat:nth-child(5) { grid-column: span 2; }
.feat:nth-child(5) .feat__img { aspect-ratio: 21 / 9; }
@media (max-width: 860px) { .feat:nth-child(5) { grid-column: span 1; } }
.wall__item img { max-height: 2.2rem; }

/* correcties */
.feat:nth-child(5) .feat__img { aspect-ratio: 3 / 1; }
.wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1080px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feat, .feat__meta { display: flex; flex-direction: column; }
.feat__meta { flex: 1; }
.feat__meta .label { margin-top: auto; padding-top: 0.85rem; }
.wall__item img[alt="Ketnet"] { max-height: 3.1rem; }
.wall__item img[alt="RTBF"], .wall__item img[alt="VRT NWS"] { max-height: 2.6rem; }

/* ---- Clash Display: schreefloos, dus andere gewichten en spatiëring ---- */
h1, h2, h3, .display, .display--md, .hero__name, .feat__title, .row__title,
.sec-head h2, .band blockquote, .story h3, .wall__word, .lede__text .body-lg:first-of-type {
  font-weight: 600;
  letter-spacing: -0.03em;
}
.hero__name { font-weight: 700; letter-spacing: -0.025em; line-height: 0.95; padding-top: 0.08em; }
.band blockquote { font-weight: 500; letter-spacing: -0.03em; }
.wall__word { font-weight: 500; letter-spacing: -0.01em; }
.lede__text .body-lg:first-of-type { font-weight: 500; }
.row__title { font-weight: 500; }
.masthead__brand, .footer__brand { font-weight: 600; letter-spacing: -0.03em; }

/* ---- disciplines ---- */
.discs {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.disc {
  background: var(--paper); text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: background 220ms ease;
}
.disc:hover { background: #e7e2d8; }
.disc__img { overflow: hidden; aspect-ratio: 4 / 5; }
.disc__img img {
  width: 100%; height: 100%; object-fit: cover; filter: grayscale(1);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.disc:hover .disc__img img { transform: scale(1.04); filter: grayscale(1); }
.disc__meta { padding: 1.25rem 1.25rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.disc__title {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.05;
}
.disc__meta p { margin-top: 0.6rem; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.disc__go { margin-top: auto; padding-top: 1.1rem; color: var(--accent); }
.disc:hover .disc__go { text-decoration: underline; text-underline-offset: 0.25em; }
/* 7 disciplines: laatste kaart spant alle kolommen (breed) */
.discs .disc:last-child { grid-column: 1 / -1; }
.discs .disc:last-child .disc__img { aspect-ratio: 5 / 2; }
@media (max-width: 1240px) { .discs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .discs { grid-template-columns: minmax(0, 1fr); }
  .disc__img { aspect-ratio: 3 / 2; }
  .discs .disc:last-child .disc__img { aspect-ratio: 3 / 2; } }

.disc-intro {
  max-width: 44rem; color: var(--ink-2);
  margin: 0 0 2rem; padding-bottom: 1.75rem;
}
.index__group { scroll-margin-top: 5rem; }
.index__more { max-width: 44rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-2); }

.wall { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 900px){ .wall { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.wall__word { font-size: 0.9rem; text-align: center; line-height: 1.2; }
.disc__img img { object-position: 50% 22%; }
.disc:nth-child(2) .disc__img img { object-position: 50% 45%; }
.disc:nth-child(4) .disc__img img { object-position: 50% 45%; }
.disc:nth-child(6) .disc__img img { object-position: 50% 30%; }
h1, h2, h3, .display, .display--md, .hero__name, .disc__title,
.masthead__brand, .footer__brand, .wall__word, .row__title, .band blockquote {
  word-spacing: 0.14em;
}
.row__title span, .disc__meta p, .body, .body-lg { word-spacing: normal; }

/* ---- citaten ---- */
.quotes { columns: 3; column-gap: 1.5rem; }
.quote {
  break-inside: avoid; margin: 0 0 1.5rem;
  border-top: 2px solid var(--ink); padding-top: 1.1rem;
}
.quote blockquote {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.025em;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.2; text-indent: -0.4em;
}
.quote blockquote { color: var(--ink); transition: color 240ms ease; }
.quote:hover blockquote { color: var(--accent); }
.quote figcaption { margin-top: 0.9rem; font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); }
.quote figcaption a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.quote figcaption a:hover { color: var(--accent); border-color: currentColor; }
@media (max-width: 1000px) { .quotes { columns: 2; } }
@media (max-width: 620px) { .quotes { columns: 1; } }

/* citaten: gelijkmatig raster i.p.v. kolommen */
.quotes { columns: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 2rem; }
.quote { margin: 0; }
.quote blockquote { word-spacing: 0.1em; overflow-wrap: break-word; }
@media (max-width: 1000px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- merkteken ---------- */

.masthead__name { display: flex; align-items: center; gap: 0.6rem; }
.brandmark {
  width: 1.05em; height: 1.05em; flex: none; fill: var(--ink);
  overflow: visible;
}
.brandmark__accent {
  transform-origin: 88px 44px;
  transition: transform .5s cubic-bezier(.2,.9,.2,1), fill .5s ease;
}
.masthead__name:hover .brandmark__accent,
.masthead__name:focus-visible .brandmark__accent {
  transform: translateY(-9px) rotate(-8deg);
  fill: var(--accent);
}
.masthead__word { font-family: var(--display); letter-spacing: -0.01em; }
.masthead__back {
  margin-left: 0.75rem; padding-left: 0.75rem;
  border-left: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.75rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-70); opacity: .8;
  transition: color .2s ease, opacity .2s ease;
}
.masthead__name:hover .masthead__back,
.masthead__name:focus-visible .masthead__back { color: var(--accent); opacity: 1; }
@media (max-width: 700px) { .masthead__back { display: none; } }

/* het accent tikt zachtjes aan bij binnenkomst */
@keyframes accent-drop {
  0%   { transform: translateY(-26px) rotate(-14deg); opacity: 0; }
  60%  { transform: translateY(2px) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
.brandmark__accent { animation: accent-drop .85s cubic-bezier(.18,.9,.25,1) both; }

/* ---------- bewegende naamband ---------- */

.ticker {
  border-block: 1px solid var(--rule);
  overflow: hidden;
  padding-block: clamp(1.1rem, 2.4vw, 2rem);
  background: var(--paper);
}
.ticker__track {
  display: flex; width: max-content; gap: 0;
  animation: ticker 46s linear infinite;
}
.ticker__item {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  line-height: 0.94; letter-spacing: -0.025em;
  padding-right: clamp(1.6rem, 4vw, 3.4rem);
  white-space: nowrap; color: var(--ink);
}
.ticker__item em { font-style: normal; color: var(--accent); }
.ticker__item--ghost {
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 38%, transparent);
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; transform: none; }
  .brandmark__accent { animation: none; }
  .masthead__name:hover .brandmark__accent { transform: none; }
}

/* bron-label rechts op elke rij */
a.row .row__meta::after { content: " \2197"; opacity: .55; }
a.row:hover .row__meta { color: var(--accent); }

/* leesbaarheid: onderschriften groter en donkerder */
.row__title span {
  font-size: 0.9375rem; line-height: 1.55; color: var(--ink);
  opacity: .8; max-width: 62ch; margin-top: 0.45rem;
}
.row__year { font-size: 0.8125rem; color: var(--ink); opacity: .55; }
.row__meta { font-size: 0.6875rem; }

/* ================= 2026-laag ================= */

/* leesvoortgang — haarlijn bovenaan */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  transform-origin: left;
}

/* filmkorrel over de hele pagina */
.grain {
  position: fixed; inset: 0; z-index: 190; pointer-events: none;
  opacity: .055; mix-blend-mode: multiply;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 7s steps(6) infinite;
}
@keyframes grain-shift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}

/* live status in de kop */
.status {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
.status__dot {
  width: 5px; height: 5px; background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (max-width: 720px) { .status { display: none; } }

/* hero-naam: letters komen op */
[data-split] .ch {
  display: inline-block;
  transform: translateY(0.9em);
  opacity: 0;
  animation: ch-up .78s cubic-bezier(.16,.9,.24,1) both;
}
@keyframes ch-up { to { transform: translateY(0); opacity: 1; } }

/* beeld schuift open bij het scrollen */
.rise img, .rise picture {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(.2,.85,.2,1);
}
.rise.is-in img, .rise.is-in picture { clip-path: inset(0 0 0 0); }

/* rijen: accentbalk veegt binnen */
a.row { position: relative; }
a.row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .38s cubic-bezier(.2,.9,.2,1);
}
a.row:hover::before, a.row:focus-visible::before { transform: scaleY(1); }
a.row:hover .row__year { opacity: 1; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .status__dot { animation: none; }
  [data-split] .ch { animation: none; transform: none; opacity: 1; }
  .rise img, .rise picture { clip-path: none; transition: none; }
}

/* hero: beeld schuift open bij het laden + volgt de cursor licht */
.hero__img {
  clip-path: inset(0 0 0 100%);
  animation: hero-wipe 1.15s cubic-bezier(.16,.86,.22,1) .12s forwards;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
@keyframes hero-wipe { to { clip-path: inset(0 0 0 0); } }

/* scrollteken met levende lijn */
.hero__scroll { position: relative; }
.hero__scroll::after {
  content: ""; position: absolute; left: 50%; bottom: -2.4rem;
  width: 1px; height: 2rem; background: var(--ink);
  transform-origin: top; animation: scroll-line 2.2s ease-in-out infinite;
}
@keyframes scroll-line {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: .7; }
  100% { transform: scaleY(1) translateY(2rem); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__img { animation: none; clip-path: none; transition: none; }
  .hero__scroll::after { animation: none; opacity: .3; }
}

/* ---------------------------------------------- contactformulier */
.cform{border-top:1px solid var(--rule);padding-top:2.2rem}
.cform__lead{max-width:46ch;margin:0 0 2.6rem}
.cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem 2.6rem}
.field{margin:0;display:flex;flex-direction:column;gap:.55rem}
.field--wide{grid-column:1 / -1}
.field label{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60)}
.field__opt{text-transform:none;letter-spacing:.02em;opacity:.6}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1.02rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;padding:.6rem 0;width:100%;
  transition:border-color .25s ease,background .25s ease}
.field textarea{resize:vertical;min-height:7.5rem;line-height:1.55}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 11px) 1.15rem,calc(100% - 6px) 1.15rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.6rem}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-40)}
.field[data-bad] label{color:var(--accent)}
.field[data-bad] input,.field[data-bad] textarea{border-bottom-color:var(--accent)}
.cform__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem;margin-top:2.6rem}
.cbtn{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:0;
  padding:1rem 2.1rem;cursor:pointer;position:relative;overflow:hidden;
  transition:color .3s ease}
.cbtn::before{content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.cbtn:hover::before,.cbtn:focus-visible::before{transform:scaleX(1)}
.cbtn>*,.cbtn{z-index:0}
.cbtn span{position:relative;z-index:1}
.cbtn[disabled]{opacity:.45;cursor:progress}
.cform__alt{font-family:var(--sans);font-size:.9rem;color:var(--ink-60)}
.cform__msg{font-family:var(--sans);font-size:.92rem;margin:1.6rem 0 0;min-height:1.4em;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.cform__msg[data-show]{opacity:1;transform:none}
.cform__msg[data-state="err"]{color:var(--accent)}
.cform__msg::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--accent);vertical-align:middle;margin-right:.7rem}
@media (max-width:720px){.cform__grid{grid-template-columns:1fr;gap:1.8rem}}
@media (prefers-reduced-motion:reduce){
  .cbtn::before{transition:none}.cform__msg{transition:none}}

/* ---------------------------------------------- merklogo's in de rijen */
.row__logo{height:15px;width:auto;max-width:74px;object-fit:contain;
  vertical-align:-2px;margin-right:.62rem;
  filter:grayscale(1) contrast(1.05) brightness(.35);opacity:.62;
  transition:filter .4s ease,opacity .4s ease}
.row:hover .row__logo,.row:focus-visible .row__logo{
  filter:none;opacity:1}
@media (max-width:560px){.row__logo{height:13px;max-width:58px}}

/* merkenmuur: echte logo's monochroom, kleur bij aanraking */
.wall__item img{filter:grayscale(1) contrast(1.05) brightness(.3);opacity:.55;
  transition:filter .45s ease,opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.wall__item:hover img,.wall__item:focus-visible img{filter:none;opacity:1;transform:translateY(-2px)}
.wall__item--word{align-items:center;justify-content:center}
.wall__word{font-family:var(--display);font-weight:600;font-size:.98rem;
  letter-spacing:.01em;color:var(--ink);opacity:.6;
  border-bottom:1.5px solid var(--accent);padding-bottom:.18rem;
  transition:opacity .4s ease,letter-spacing .4s ease}
.wall__item--word:hover .wall__word,.wall__item--word:focus-visible .wall__word{
  opacity:1;letter-spacing:.035em}
@media (prefers-reduced-motion:reduce){
  .row__logo,.wall__item img,.wall__word{transition:none}}

/* ---------------------------------------------- traject: route en pull-quote */
.route{list-style:none;margin:2.2rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:0}
.route li{display:flex;align-items:baseline;gap:.55rem;padding:0 1.5rem 0 0;margin:0 1.5rem .4rem 0;
  position:relative}
.route li+li::before{content:"";position:absolute;left:-1.5rem;bottom:.5rem;
  width:1.5rem;height:1px;background:var(--rule)}
.route li:last-child{padding-right:0;margin-right:0}
.route__n{font-family:var(--display);font-weight:600;font-size:2.5rem;line-height:.85;
  color:var(--accent);letter-spacing:-.02em}
.route__l{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60)}
.story:hover .route__n{color:var(--ink)}
.route__n{transition:color .45s ease}

.pull{margin:2.4rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--rule);max-width:34ch}
.pull a{font-family:var(--display);font-weight:500;font-size:1.42rem;line-height:1.28;
  color:var(--ink);text-decoration:none;display:block;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .5s cubic-bezier(.2,.7,.3,1)}
.pull a:hover,.pull a:focus-visible{background-size:100% 1px}
.pull cite{display:block;margin-top:.7rem;font-family:var(--sans);font-style:normal;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40)}
@media (max-width:560px){.route__n{font-size:2rem}.pull a{font-size:1.2rem}}

/* ---------------------------------------------- agentschappen */
.agency{display:block;margin-bottom:1.15rem}
.agency:last-child{margin-bottom:0}
.agency__role{display:block;font-family:var(--sans);font-size:.78rem;
  letter-spacing:.02em;color:var(--ink-60);margin-top:.18rem}
@media (prefers-reduced-motion:reduce){.pull a,.route__n{transition:none}}

/* ---------------------------------------------- merkenmuur: correctie */
.wall{gap:0;background:var(--paper);border:0;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.wall__item{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  min-height:6.9rem}
.wall__item img{max-height:2.05rem;
  filter:grayscale(1) opacity(.82);opacity:1;
  transition:filter .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.wall__item:hover img,.wall__item:focus-visible img{filter:none;transform:translateY(-2px)}
.wall__item img[alt="JBC"],.wall__item img[alt="Kinepolis"]{max-height:2.45rem}
.wall__item img[alt="Ketnet"]{max-height:2.9rem}
.wall__item img[alt="De Mensen"],.wall__item img[alt="Leefmilieu Brussel"]{max-height:1.8rem}
@media (prefers-reduced-motion:reduce){.wall__item img{transition:none}}

/* ---- Persbeeld ---- */
.pers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
  margin-top: 2.5rem;
}
.pers__item { margin: 0; }
.pers__item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  filter: grayscale(1);
}
.pers__item figcaption {
  display: block;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-70);
}
.pers__credit {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.pers__credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pers__credit a:hover { color: var(--accent); }
@media (max-width: 700px) { .pers { grid-template-columns: 1fr; } }

/* --- Persbeeld als harde plaat, geen cards --- */
.pers {
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.pers__item { background: var(--paper); padding: 0 0 1rem; }
.pers__item img { border: 0; aspect-ratio: 4 / 3; object-fit: cover; }
.pers__item figcaption { padding-inline: 1rem; }

/* --- Kop: bovenregel als krantenkatern --- */
.hero__top {
  grid-column: 1; grid-row: 1; align-self: start;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  margin: 0 clamp(2rem, 4vw, 4rem) 0 var(--gutter);
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-40);
}
.hero__top-r { text-align: right; }

/* --- Index: leesbaarder, met accent bij hover --- */
.row__year { font-variant-numeric: tabular-nums; }
.row--link { transition: color 0.2s ease; }
.row--link:hover .row__title { color: var(--accent); }
.row--link:hover .row__meta { color: var(--ink); }
.sec-head .label { font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .hero__top {
    position: absolute; inset: 0 0 auto 0; margin: 0 var(--gutter);
    color: rgba(239, 235, 227, 0.9); border-bottom-color: rgba(239, 235, 227, 0.34);
  }
}

/* --- Werkwijze: brainstorm → project → oplevering --- */
.how {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; border-top: 1px solid var(--ink);
}
.how__step {
  position: relative;
  padding: 1.5rem 1.5rem 2rem 0;
  border-right: 1px solid var(--rule);
  display: grid; grid-template-rows: auto auto 1fr; gap: 0.9rem;
}
.how__step:last-child { border-right: 0; }
.how__num { color: var(--ink-40); font-variant-numeric: tabular-nums; }
.how__t {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.1;
  letter-spacing: -0.01em; margin: 0; color: var(--ink);
}
.how__step .body { color: var(--ink-70); font-size: 0.9375rem; }
.how__extra {
  margin-top: 1px;
  padding: 1.5rem 0 0 0;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 3fr; gap: 2rem;
}
.how__extra .how__t { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.how__extra .body { max-width: 62ch; color: var(--ink-70); }

@media (max-width: 900px) {
  .how { grid-template-columns: 1fr 1fr; }
  .how__step { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .how__step:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 1.5rem; }
  .how__step:last-child { border-bottom: 0; }
  .how__step:nth-child(odd):last-child { border-right: 0; }
  .how__extra { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 600px) {
  .how { grid-template-columns: 1fr; }
  .how__step { border-right: 0; padding-right: 0; }
  .how__step:nth-child(odd) { border-right: 0; padding-right: 0; }
}

/* Pers toggle: verberg items > 6 tot uitklap */
.pers__item--more { display: none; }
.pers.pers--open .pers__item--more { display: block; }
.pers-toggle {
  margin: 2rem 0 0;
  padding: 0.9rem 1.4rem;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  gap: 0.75rem;
  align-items: baseline;
  transition: background-color 180ms ease, color 180ms ease;
}
.pers-toggle:hover, .pers-toggle:focus-visible {
  background: currentColor;
}
.pers-toggle:hover span, .pers-toggle:focus-visible span {
  color: var(--paper);
}
.pers-toggle__meta {
  font-size: 0.8rem;
  opacity: 0.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------- clientwall: dynamischer, met logo-caption en categoriekleur --------- */
:root {
  --cat-omroep:     #d64545;
  --cat-fashion:    #b13ea8;
  --cat-merk:       #1f7a6d;
  --cat-cultuur:    #b8722c;
  --cat-onderwijs:  #3c6ecb;
  --cat-instelling: #4c5a72;
}
.wall__item {
  position: relative;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 8rem;
  padding: 1.15rem 0.9rem 0.95rem;
  overflow: hidden;
  transition: background 220ms ease, transform 240ms cubic-bezier(.2,.7,.2,1),
              box-shadow 240ms ease;
}
.wall__item::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--_cat, var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.wall__item:hover,
.wall__item:focus-visible {
  background: #ede8dd;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -18px rgba(15, 20, 30, 0.35);
}
.wall__item:hover::before,
.wall__item:focus-visible::before { transform: scaleX(1); }
.wall__item[data-cat="omroep"]     { --_cat: var(--cat-omroep); }
.wall__item[data-cat="fashion"]    { --_cat: var(--cat-fashion); }
.wall__item[data-cat="merk"]       { --_cat: var(--cat-merk); }
.wall__item[data-cat="cultuur"]    { --_cat: var(--cat-cultuur); }
.wall__item[data-cat="onderwijs"]  { --_cat: var(--cat-onderwijs); }
.wall__item[data-cat="instelling"] { --_cat: var(--cat-instelling); }

.wall__logo {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  width: 100%;
}
.wall__logo img {
  max-width: 100%; height: auto; max-height: 2.4rem; width: auto;
  filter: grayscale(1) contrast(0.9); opacity: 0.78;
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
}
.wall__item:hover .wall__logo img,
.wall__item:focus-visible .wall__logo img { opacity: 1; filter: grayscale(0); transform: scale(1.04); }
.wall__item[data-cat="fashion"] .wall__logo img,
.wall__item[data-cat="cultuur"] .wall__logo img { max-height: 2.6rem; }

.wall__cap {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  width: 100%; margin-top: 0.15rem;
  opacity: 0; transform: translateY(4px);
  transition: opacity 220ms ease, transform 240ms ease;
  pointer-events: none;
}
.wall__item:hover .wall__cap,
.wall__item:focus-visible .wall__cap { opacity: 1; transform: translateY(0); }
.wall__name {
  font-family: var(--display);
  font-size: 0.78rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); text-align: center; line-height: 1.15;
}
.wall__cat {
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--_cat, var(--ink-3));
}
.wall__item--word .wall__logo { min-height: 2.4rem; }
.wall__item--word .wall__logo .wall__word {
  font-family: var(--display); font-size: 1rem; line-height: 1.15;
  color: var(--ink-2); font-weight: 600; text-align: center;
}

/* mobiel: caption altijd zichtbaar (geen hover) */
@media (hover: none) {
  .wall__cap { opacity: 1; transform: none; }
  .wall__item::before { transform: scaleX(1); opacity: 0.5; }
}

/* externe kaarten in de reel (Instagram, concerten, festivals) */
.reel__frame--ext { display: block; text-decoration: none; color: var(--paper); }
.reel__frame--ext img { filter: grayscale(1) contrast(1.05); opacity: .85; transition: filter 320ms ease, opacity 320ms ease, transform 420ms ease; }
.reel__frame--ext:hover img, .reel__frame--ext:focus-visible img { filter: none; opacity: 1; transform: scale(1.03); }
.reel__ext {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: .9rem 1rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%);
}
.reel__frame--word .reel__ext { background: none; }
.reel__ext-host { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.reel__ext-go {
  align-self: flex-start; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: .32rem .7rem; border: 1px solid rgba(255,255,255,.7); border-radius: 999px;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.reel__frame--ext:hover .reel__ext-go, .reel__frame--ext:focus-visible .reel__ext-go { background: var(--paper); color: var(--ink); transform: translateX(3px); }
.reel__frame--word { background: var(--ink); }
.reel__frame--word .reel__ext-host {
  font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600;
  letter-spacing: -.02em; text-transform: none; opacity: 1; line-height: 1.05; max-width: 90%;
}
.reel__frame--word::after {
  content: ""; position: absolute; right: -18%; bottom: -35%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.reel__frame--word:hover::after { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .reel__frame--ext img, .reel__ext-go, .reel__frame--word::after { transition: none; } }


/* rijen zonder bronkolom: pijl bij linkrijen */
a.row { position: relative; }
a.row::after { content: "\2197"; position: absolute; right: 0; top: 1.15rem; font-size: 1rem; line-height: 1; color: var(--accent); opacity: 0; transform: translate(-6px, 6px); transition: opacity 200ms ease, transform 260ms cubic-bezier(.2,.8,.2,1); }
a.row:hover::after, a.row:focus-visible::after { opacity: .85; transform: none; }

/* merken: bewegende rijen */
.wall--marq { display: block; gap: 0; background: none; border: 0; border-top: 1px solid var(--rule); overflow: hidden; }
.marq { display: flex; overflow: hidden; border-bottom: 1px solid var(--rule); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marq__track { display: flex; flex: none; align-items: stretch; animation: marq var(--marq-dur, 50s) linear infinite; will-change: transform; }
.marq--rev .marq__track { animation-direction: reverse; }
.marq:hover .marq__track, .marq:focus-within .marq__track { animation-play-state: paused; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marq__item {
  flex: none; display: flex; align-items: center; justify-content: center;
  min-width: 12rem; height: 6.25rem; padding: 0 2.25rem;
  border-right: 1px solid var(--rule); text-decoration: none; position: relative;
  transition: background 220ms ease;
}
.marq__item::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--_cat, var(--ink)); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(.2,.8,.2,1); }
.marq__item:hover::before, .marq__item:focus-visible::before { transform: scaleX(1); }
.marq__item:hover, .marq__item:focus-visible { background: rgba(0,0,0,.035); }
.marq__item img { height: 2.1rem; width: auto; max-width: 9.5rem; object-fit: contain; filter: grayscale(1) contrast(1.05) brightness(.35); opacity: .6; transition: filter 260ms ease, opacity 260ms ease, transform 320ms cubic-bezier(.2,.8,.2,1); }
.marq__item:hover img, .marq__item:focus-visible img { filter: none; opacity: 1; transform: translateY(-3px) scale(1.06); }
.marq__item img[alt="Ketnet"], .marq__item img[alt="JBC"], .marq__item img[alt="Kinepolis"] { height: 2.8rem; }
.marq__item img[alt="RTBF"], .marq__item img[alt="VRT NWS"] { height: 2.5rem; }
.marq__item img[alt="De Mensen"], .marq__item img[alt="Leefmilieu Brussel"] { height: 1.8rem; }
.marq__item--word .wall__word { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color 220ms ease, transform 320ms cubic-bezier(.2,.8,.2,1); }
.marq__item--word:hover .wall__word { color: var(--accent); transform: translateY(-3px); }
.marq__item[data-cat="omroep"] { --_cat: var(--cat-omroep, var(--ink)); }
.marq__item[data-cat="fashion"] { --_cat: var(--cat-fashion, var(--ink)); }
.marq__item[data-cat="merk"] { --_cat: var(--cat-merk, var(--ink)); }
.marq__item[data-cat="cultuur"] { --_cat: var(--cat-cultuur, var(--ink)); }
.marq__item[data-cat="onderwijs"] { --_cat: var(--cat-onderwijs, var(--ink)); }
.marq__item[data-cat="instelling"] { --_cat: var(--cat-instelling, var(--ink)); }
@media (max-width: 640px) { .marq__item { min-width: 9rem; height: 5rem; padding: 0 1.4rem; } .marq__item img { max-height: 1.7rem; max-width: 7rem; } }
@media (prefers-reduced-motion: reduce) {
  .marq { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
  .marq__track { animation: none; flex-wrap: wrap; }
  .marq__track[aria-hidden="true"] { display: none; }
}
.marq__item img[alt="JBC"] { filter: grayscale(1) contrast(1.1); opacity: .75; height: 3.1rem; }
.marq__item img[alt="Ketnet"] { height: 3.4rem; }

/* ---- rustige homepage: zwart-wit video's, kleur enkel bij hover ---- */
.reel__frame img { filter: grayscale(1) contrast(1.05); transition: filter 320ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.reel__item:hover .reel__frame img, .reel__item:focus-within .reel__frame img { filter: none; transform: scale(1.03); }
.reel__frame iframe { filter: none; }

.lede--calm .lede__text .body-lg:first-of-type { max-width: 30ch; }
.arrow-link {
  display: inline-block; margin-top: 0.5rem; font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; transition: color 200ms ease, border-color 200ms ease;
}
.arrow-link span { display: inline-block; transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
.arrow-link:hover, .arrow-link:focus-visible { color: var(--accent); border-color: var(--accent); }
.arrow-link:hover span { transform: translateX(0.35em); }
.sec-foot { margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.booking .arrow-link { color: var(--paper); border-color: rgba(239,235,227,0.4); }

.quote--solo { max-width: 46rem; margin: clamp(2rem, 5vw, 3.5rem) auto 0; text-align: center; break-inside: auto; }
.quote--solo { border-top: 0; }
.quote--solo blockquote { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); text-indent: 0;
  font-size: clamp(1.6rem, 3.6vw, 2.75rem); line-height: 1.12; }
.quote--solo figcaption { justify-content: center; margin-top: 1.25rem; }
.section--tight{padding-top:0;padding-bottom:2.5rem}
.contact-compact{max-width:62ch;color:var(--ink-2);line-height:1.6;border-top:1px solid var(--rule);padding-top:1.4rem}
.contact-compact a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* =====================================================================
   2026-laag: duidelijker, dynamischer, speelser
   ===================================================================== */

/* paginaovergang (cross-document view transitions, progressief) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .28s ease both; }
  ::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* hero: roterend woord + belofte */
.rotor { display: inline-grid; grid-template-areas: "w"; vertical-align: bottom; min-width: 9ch; text-align: left; }
.rotor__word { grid-area: w; display: inline-block; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.rotor__word[data-out] { transform: translateY(-110%); opacity: 0; }
.rotor__word[data-in] { transform: translateY(110%); opacity: 0; transition: none; }
.rotor__word::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .55em; background: var(--accent); vertical-align: middle; border-radius: 50%; transform: translateY(-.05em); }
.hero__promise {
  margin-top: 1.1rem; max-width: 26rem;
  font-family: var(--display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.2; color: var(--ink);
}
@media (max-width: 860px) { .hero__promise { color: var(--paper); } .hero__promise.rise { opacity: 1; transform: none; } }

/* navigatie: boek-knop */
.nav__cta {
  margin-left: .5rem; padding: .5rem .95rem; border: 1px solid var(--ink) !important; border-radius: 999px;
  color: var(--ink) !important; background: transparent; position: relative; overflow: hidden; isolation: isolate;
  transition: color .3s ease !important;
}
.nav__cta::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .38s cubic-bezier(.2,.7,.2,1); z-index: -1; border-radius: inherit; }
.nav__cta:hover, .nav__cta:focus-visible { color: var(--paper) !important; }
.nav__cta:hover::before, .nav__cta:focus-visible::before { transform: translateY(0); }
.nav__cta[aria-current="page"] { border-bottom: 1px solid var(--ink) !important; }
@media (max-width: 860px) { .nav__cta { margin-left: 0; display: inline-block; width: max-content; } }

/* algemene knop */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink); padding: 1rem 1.6rem;
  text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: color .3s ease;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.2,.7,.3,1); z-index: -1; }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn span { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.btn:hover span { transform: translateX(.3em); }
.btn--ghost { color: var(--ink); background: transparent; }
.btn--ghost:hover { color: var(--paper); }

/* cijfers */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0; margin-top: calc(var(--rhythm) * -0.35);
}
.stat { padding: 0 1.5rem 0 0; border-right: 1px solid var(--rule); display: grid; gap: .5rem; align-content: start; }
.stat + .stat { padding-left: 1.5rem; }
.stat:last-child { border-right: 0; }
.stat__n { font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .95; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat__l { font-size: .875rem; color: var(--ink-2); line-height: 1.4; max-width: 16rem; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 2rem; }
  .stat:nth-child(2) { border-right: 0; } .stat:nth-child(3) { padding-left: 0; } }
@media (max-width: 480px) { .stats { column-gap: 1rem; } .stat { padding-right: .75rem; } .stat + .stat { padding-left: .75rem; } .stat__n { font-size: 2.4rem; } }

/* drie stappen */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--ink); }
.step { padding: 1.75rem 1.5rem 2.25rem 0; border-right: 1px solid var(--rule); display: grid; gap: .9rem; align-content: start; position: relative; }
.step + .step { padding-left: 1.5rem; }
.step:last-child { border-right: 0; }
.step__n { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--ink-40); transition: color .3s ease; }
.step:hover .step__n { color: var(--accent); }
.step__t { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.1; }
.step .body { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.step--go { align-content: end; padding-left: 1.5rem; }
.step::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.step:hover::after { transform: scaleX(1); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .step:nth-child(2) { border-right: 0; } .step:nth-child(3), .step--go { padding-left: 0; border-top: 1px solid var(--rule); } .step--go { padding-left: 1.5rem; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step, .step--go { border-right: 0; padding-left: 0; border-top: 1px solid var(--rule); } .step:first-child { border-top: 0; } }

/* disciplines: 8 cellen (7 + uitnodiging), vier kolommen */
.discs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.discs .disc:last-child { grid-column: auto; }
.discs .disc:last-child .disc__img { aspect-ratio: 4 / 5; }
.disc__img img, .disc:nth-child(2) .disc__img img, .disc:nth-child(4) .disc__img img, .disc:nth-child(6) .disc__img img { object-position: 50% 18%; }
.disc:nth-child(4) .disc__img img { object-position: 50% 35%; }
.disc:nth-child(3) .disc__img img { object-position: 50% 35%; }
.disc:nth-child(5) .disc__img img { object-position: 50% 10%; }
.disc:nth-child(6) .disc__img img { object-position: 50% 12%; }
.disc:nth-child(7) .disc__img img { object-position: 55% 30%; }
.disc--cta { background: var(--ink); color: var(--paper); justify-content: flex-end; min-height: 100%; }
.disc--cta .disc__meta { padding-top: 2rem; }
.disc--cta .disc__meta > .label { color: rgba(239,235,227,.55); margin-bottom: .75rem; }
.disc--cta .disc__meta p { color: rgba(239,235,227,.75); }
.disc--cta .disc__go { color: var(--paper); }
.disc--cta:hover { background: var(--accent); }
.disc--cta:hover .disc__meta > .label, .disc--cta:hover .disc__meta p { color: var(--paper); }
.disc__arrow { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.disc:hover .disc__arrow { transform: translateX(.35em); }
.disc__go::after { content: " \2192"; display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.disc--cta .disc__go::after { content: none; }
.disc:hover .disc__go::after { transform: translateX(.35em); }
.disc:hover .disc__img img { transform: scale(1.06) rotate(-.6deg); }
@media (max-width: 1240px) { .discs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* gestapelde reveal: kinderen komen na elkaar */
.rise.is-in > * { animation: kid-up .7s cubic-bezier(.16,1,.3,1) backwards; }
.rise.is-in > :nth-child(1) { animation-delay: .0s } .rise.is-in > :nth-child(2) { animation-delay: .07s }
.rise.is-in > :nth-child(3) { animation-delay: .14s } .rise.is-in > :nth-child(4) { animation-delay: .21s }
.rise.is-in > :nth-child(5) { animation-delay: .28s } .rise.is-in > :nth-child(6) { animation-delay: .35s }
.rise.is-in > :nth-child(7) { animation-delay: .42s } .rise.is-in > :nth-child(n+8) { animation-delay: .49s }
@keyframes kid-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise.lede__text.is-in > *, .rise.story.is-in > *, .rise.quote.is-in > *, .rise.hero__promise.is-in > * { animation: none; }

/* sectiekoppen: lijn tekent zichzelf */
.sec-head { position: relative; border-bottom-color: transparent; }
.sec-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.sec-head.is-in::after { transform: scaleX(1); }
.sec-head--light::after { background: rgba(239,235,227,.28); }

/* kaarten en pers: lichte lift */
.reel figure, .pers__item { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.reel figure:hover, .pers__item:hover { transform: translateY(-4px); }
.reel__frame img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.reel figure:hover .reel__frame img { transform: scale(1.05); }

/* band: parallax-hulpklasse */
.band img { will-change: transform; transform: translate3d(0, var(--py, 0px), 0) scale(1.12); }

/* mobiel: swipe-rijen met snap */
@media (max-width: 720px) {
  .swipe { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 0 var(--gutter) 1rem; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 82%; scroll-snap-align: start; max-width: 82%; }
  .swipe.discs { border: 0; gap: .75rem; }
  .swipe.discs .disc { border: 1px solid var(--rule); }
  .swipe.discs .disc__img { aspect-ratio: 4 / 5 !important; }
  .swipe-hint { display: flex; gap: .5rem; align-items: center; margin: .75rem 0 0; }
  .swipe-hint i { display: block; width: 1.2rem; height: 1px; background: var(--ink-40); }
  .rise.is-in.swipe > * { animation: none; }
}
.swipe-hint { display: none; }

/* juridisch */
.legal { max-width: 46rem; }
.legal__block { padding: 1.75rem 0; border-top: 1px solid var(--rule); scroll-margin-top: 5rem; }
.legal__block h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: .75rem; }
.legal__block .body + .body { margin-top: .75rem; }
.legal__block a { border-bottom: 1px solid var(--ink-40); }
.legal__block a:hover { border-color: var(--accent); color: var(--accent); }
.credit--soft { color: var(--ink-40); letter-spacing: .08em; text-transform: none; font-weight: 500; }
.credit--soft a { border-bottom: 1px solid var(--ink-40); }
.credit--soft a:hover { color: var(--accent); border-color: var(--accent); }

/* 404 */
.p404 { min-height: 100svh; display: grid; place-items: center; background: var(--paper); color: var(--ink); padding: var(--gutter); }
.p404__wrap { max-width: 44rem; display: grid; gap: 1.5rem; }
.p404 .display { font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -0.03em; }
.p404__alt { font-family: var(--sans); font-size: 1.05rem; color: var(--ink-40); margin-top: -.5rem; line-height: 1.4; }
.p404__links { display: flex; flex-wrap: wrap; gap: .75rem; }

/* nooit onzichtbaar blijven zonder scripts */
.no-js .rise, html:not(.js) .rise { opacity: 1; transform: none; }
html:not(.js) .rise img, html:not(.js) .rise picture { clip-path: none; }

/* story-kadrering per beeld */
.story__img[data-img="live-nodirection"] img { object-position: 50% 30%; }
.story__img[data-img="boom"] img { object-position: 50% 30%; }
.story__img[data-img="portret-close"] img { object-position: 50% 20%; }

/* ---------- dynamiek doorgetrokken naar alle pagina's ---------- */
.pagehead .ch { animation-duration: .7s; }
.pagehead__lead.rise.is-in > * { animation: none; }
.pagehead { position: relative; border-bottom-color: transparent; }
.pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; animation: line-draw 1.2s cubic-bezier(.2,.8,.2,1) .35s forwards; }
@keyframes line-draw { to { transform: scaleX(1); } }

/* lijsten: rij glijdt bij hover, jaar wordt rood */
.row { transition: background .3s ease; }
.row__title { transition: transform .35s cubic-bezier(.2,.7,.2,1); display: block; }
.row__year, .row__meta { transition: color .3s ease; }
a.row:hover .row__title, .row--link:hover .row__title { transform: translateX(.35em); }
a.row:hover .row__year, a.row:hover .row__meta, .row--link:hover .row__meta { color: var(--accent); }
.row--link .row__meta::after { content: " \2197"; display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.row--link:hover .row__meta::after { transform: translate(.2em, -.2em); }

/* volle-breedte beelden: parallax en zachte zoom */
.fullbleed { overflow: hidden; }
.fullbleed img { object-position: 50% 22%; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); will-change: transform; transition: transform .2s linear; }
.fullbleed figcaption { position: relative; z-index: 1; background: var(--paper); }

/* verhaal (Over): beeld ademt bij hover */
.story__img img { transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.story:hover .story__img img { transform: scale(1.04); }
.story__year { transition: color .3s ease; }
.story:hover .story__year { color: var(--accent); }

/* contact: hero-beeld schuift open */
.contact-hero__img { overflow: hidden; }
.contact-hero__img img { animation: img-open 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes img-open { from { clip-path: inset(0 0 100% 0); transform: scale(1.06); } to { clip-path: inset(0); transform: none; } }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field label { transition: color .3s ease; }
.field:focus-within label { color: var(--accent); }

/* pers-items en lidmaatschap: kleine lift */
.pers__item, .lede figure { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.lede figure:hover { transform: translateY(-4px); }

/* bio-blok en compact: reveal */
.contact-compact.rise.is-in > * { animation: none; }
.contact-compact a { transition: color .3s ease, border-color .3s ease; }
.contact-compact a:hover { color: var(--accent); border-color: var(--accent); }

/* index-groepen (Werk): titelnummer kleurt bij hover */
.index__group .sec-head .label { transition: color .3s ease; }
.index__group:hover .sec-head .label { color: var(--accent); }

/* mobiel: pers-grid ook swipebaar */
@media (max-width: 720px) {
  .pers[data-pers-grid] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; padding: 0 var(--gutter) 1rem; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
  .pers[data-pers-grid]::-webkit-scrollbar { display: none; }
  .pers[data-pers-grid] > * { flex: 0 0 78%; scroll-snap-align: start; max-width: 78%; }
  .rise.is-in.pers > * { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pagehead::after { animation: none; transform: none; }
  .contact-hero__img img { animation: none; }
  .fullbleed img { transform: none; }
}


/* ===========================================================
   2026 — kleurstrategie & spelelementen
   Beeld blijft zwart-wit. Kleur zit in de actie (tally-rood) en in de
   status (live-groen). Twee kleuren, altijd met dezelfde betekenis.
   =========================================================== */
/* labels blijven inkt; rood is voorbehouden aan actie */
.disc__go, .hero__now .label, .contact-hero__text .label { color: var(--accent-ink); }
.index__group:hover .sec-head .label { color: var(--accent-ink); }
.status__dot { background: var(--live-ink); box-shadow: 0 0 0 0 rgba(77,107,0,.45); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(77,107,0,.45); } 70% { box-shadow: 0 0 0 .5rem rgba(77,107,0,0); } 100% { box-shadow: 0 0 0 0 rgba(77,107,0,0); } }
.progress i { background: var(--accent); }
::selection { background: var(--live); color: var(--ink); }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; line-height: 1; }
.chip--live { color: var(--live-ink); margin-bottom: 1rem; }
.chip--live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--live-ink); animation: pulse 2.2s ease-out infinite; }
.booking__grid .chip--live, .contact-hero .chip--live { color: var(--live-ink); }
.booking .chip--live, .booking__grid--ink .chip--live { color: var(--live); }
.booking .chip--live i { background: var(--live); box-shadow: none; animation: pulse-l 2.2s ease-out infinite; }
@keyframes pulse-l { 0% { box-shadow: 0 0 0 0 rgba(201,242,76,.5); } 70% { box-shadow: 0 0 0 .5rem rgba(201,242,76,0); } 100% { box-shadow: 0 0 0 0 rgba(201,242,76,0); } }
.chip--now { display: inline-block; margin-left: .6rem; padding: .2rem .45rem .18rem; font-size: .5625rem; letter-spacing: .14em; background: var(--live); color: var(--ink); border-radius: 2px; vertical-align: middle; font-style: normal; }
.row__year { display: inline-flex; align-items: center; opacity: 1; }
a.row:hover .chip--now { background: var(--ink); color: var(--live); }

/* cijfers = scorebord */
.stat { position: relative; padding-bottom: 1.1rem; }
.stat__n { color: var(--ink); transition: color .4s ease; }
.stats.is-in .stat__n { color: var(--accent-ink); }
.stat__bar { position: absolute; left: 0; right: 1.5rem; bottom: 0; height: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.stat + .stat .stat__bar { left: 1.5rem; }
.stat:last-child .stat__bar { right: 0; }
.stat__bar::after { content: ""; position: absolute; inset: 0; background: var(--live-ink); transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.stats.is-in .stat:nth-child(1) .stat__bar::after { transform: scaleX(1); transition-delay: .1s; }
.stats.is-in .stat:nth-child(2) .stat__bar::after { transform: scaleX(1); transition-delay: .3s; }
.stats.is-in .stat:nth-child(3) .stat__bar::after { transform: scaleX(1); transition-delay: .5s; }
.stats.is-in .stat:nth-child(4) .stat__bar::after { transform: scaleX(1); transition-delay: .7s; }
@media (max-width: 900px) { .stat:nth-child(3) .stat__bar { left: 0; } .stat:nth-child(2) .stat__bar { right: 0; } }

/* stappen = levels */
.step__n { transition: color .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); display: inline-block; }
.steps.is-in .step:nth-child(1) .step__n { color: var(--accent-ink); transition-delay: .2s; }
.steps.is-in .step:nth-child(2) .step__n { color: var(--accent-ink); transition-delay: .6s; }
.steps.is-in .step:nth-child(3) .step__n { color: var(--accent-ink); transition-delay: 1s; }
.step:hover .step__n { transform: translateY(-.15em); }
.step::after { background: var(--accent); }

/* disciplinekaarten: inverteren bij hover */
.disc { transition: background .35s ease, color .35s ease; }
.disc:hover { background: var(--ink); color: var(--paper); }
.disc:hover .disc__title, .disc:hover .body { color: var(--paper); }
.disc:hover .disc__go { color: var(--live); }
.disc:hover .disc__meta > .label { color: rgba(239,235,227,.55); }
.disc--cta:hover .disc__go { color: var(--live); }
.disc__go { transition: color .3s ease; }

/* knoppen */
.nav__cta::before { background: var(--accent); }
.nav__cta:hover, .nav__cta:focus-visible { color: #fff !important; }
.btn::before { background: var(--accent); }
.btn:hover, .btn:focus-visible { color: #fff; }
.btn--ghost:hover { color: #fff; }
.arrow-link:hover { color: var(--accent-ink); }
.arrow-link:hover span { color: var(--accent-ink); }

/* video's: opnameknop */
.reel__play span { position: relative; padding-left: 2.1rem; }
.reel__play span::before { content: ""; position: absolute; left: .9rem; top: 50%; width: .55rem; height: .55rem; margin-top: -.275rem; border-radius: 50%; background: var(--accent); transition: transform .3s ease; }
.reel:hover .reel__play span::before { transform: scale(1.35); }
.reel__play:hover span { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* traject, pers, rijen */
.story__year { transition: color .3s ease; }
.story:hover .story__year { color: var(--accent-ink); }
.sec-head::after, .pagehead::after { background: var(--accent); }
.hero__promise { color: var(--ink); }
.hero__promise::after { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--accent); margin-top: 1rem; transform: scaleX(0); transform-origin: left; animation: draw .9s cubic-bezier(.2,.7,.2,1) 1.1s forwards; }
@keyframes draw { to { transform: scaleX(1); } }
.rotor { color: var(--accent-ink); }

/* formulier */
.field:focus-within .label, .field:focus-within label { color: var(--accent-ink); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent) !important; }
button[type="submit"]:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* footer & juridisch */
footer a:hover, .legal a:hover { color: var(--accent-ink); }
.footer .rise, footer .rise { transition-delay: .05s; }

/* 404 */
.p404 .display { color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .status__dot, .chip--live i, .hero__promise::after { animation: none; }
  .hero__promise::after { transform: none; }
  .stat__bar::after { transition: none; transform: scaleX(1); }
}

/* scorebord: wisselende feiten */
.stat .stat__n, .stat .stat__l { transition: opacity 0.36s var(--ease), transform 0.36s var(--ease); }
.stat.is-swap .stat__n, .stat.is-swap .stat__l { opacity: 0; transform: translateY(-10px); }
.stats.is-in .stat.is-swap .stat__bar::after { transform: scaleX(0); transition: transform 0.3s var(--ease); transition-delay: 0s; }
.stats.is-in .stat.is-fresh .stat__bar::after { transform: scaleX(1); transition-delay: 0s; }
.stat__l { min-height: 2.6em; }
@media (max-width: 900px) { .stat__l { min-height: 5.2em; } }
/* logo in de footer */
.footer__brand { display: inline-block; color: var(--ink); }
.brandmark--lg { width: clamp(56px, 8vw, 96px); height: auto; display: block; }
.footer__brand:hover .brandmark__accent { fill: var(--accent); }

.band--over img { object-position: 50% 35%; }
.footer .chip { margin-top: 0.5rem; }
@media (max-width: 480px) { .sec-head .label { text-align: right; max-width: 38%; flex-shrink: 1; } }

/* ---- premium motion: gestaggerde reveals, paginawissels, scorebord ---- */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }
html { scroll-behavior: smooth; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.rise { transform: translateY(22px); transition: opacity .85s ease, transform 1.05s var(--ease-out); }
.rise .row, .rise .disc, .rise .stat, .rise .reel__item, .rise .how__step,
.rise .pers__item, .rise .quote, .rise .step, .footer__grid.rise > *, .rise .story__text, .rise .story__img {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.rise.is-in .row, .rise.is-in .disc, .rise.is-in .stat, .rise.is-in .reel__item, .rise.is-in .how__step,
.rise.is-in .pers__item, .rise.is-in .quote, .rise.is-in .step, .footer__grid.rise.is-in > *, .rise.is-in .story__text, .rise.is-in .story__img {
  opacity: 1; transform: none;
}
.stat .stat__n, .stat .stat__l { transition: opacity .42s var(--ease-out), transform .42s var(--ease-out), filter .42s ease; }
.stat.is-swap .stat__n { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
.stat.is-swap .stat__l { opacity: 0; transform: translateY(-6px); }
.stat.is-fresh .stat__n { animation: stat-in .6s var(--ease-out) both; }
@keyframes stat-in { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
.btn { transition: transform .5s var(--ease-out), color .3s ease; will-change: transform; }
.btn.is-magnet { transition: transform .12s ease-out, color .3s ease; }
.rotor__word { transition: transform .6s var(--ease-out), opacity .45s ease, filter .45s ease; }
.rotor__word[data-out] { filter: blur(4px); }
.rotor__word[data-in] { filter: blur(4px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .rise, .rise .row, .rise .disc, .rise .stat, .rise .reel__item, .rise .how__step, .rise .pers__item,
  .rise .quote, .rise .step, .footer__grid.rise > *, .rise .story__text, .rise .story__img { opacity: 1; transform: none; transition: none; }
  .stat.is-fresh .stat__n { animation: none; }
  .rotor__word { filter: none; }
}