/* Howie Doin' Design, sitebrede stijlen.
   Bouwt op de Webflow-tokens (--_theme---*, --_responsive---*).

   Systeem
   - Eén rand voor alles: .wrap (max 90rem, marge --gutter). Nav en footer volgen dezelfde rand.
   - Zes lettergroottes: --t-display, --t-h2, --t-h3, --t-lead, --t-body, --t-small. Plus één scriptgrootte.
   - Script alleen voor: logo, één emotionele regel per pagina, de rol in de werkdag.
   - Rood alleen voor een oordeel (doorstreept) of de actieve staat.
   - Zwart vlak: de footer (het einde) en het dienstenblok op dienstpagina's. Nergens anders. */

:root {
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --red: var(--brand--brand-1);
  --ink: var(--color--dark);
  --paper: var(--color--light);
  --soft: #f3f3f1;
  --line: color-mix(in srgb, currentColor 16%, transparent);
  --muted: color-mix(in srgb, currentColor 60%, transparent);

  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --maxw: 90rem;
  --col-gap: clamp(1rem, 2vw, 2rem);
  --nav-h: 6.5rem;
  --section: clamp(5rem, 8vw, 8rem);

  --t-display: min(clamp(2.5rem, 1rem + 7vw, 9rem), 15svh);
  --t-h2: min(clamp(2.1rem, 1.1rem + 3vw, 4.5rem), 10svh);
  --t-h3: clamp(1.3rem, 1.05rem + 0.8vw, 1.875rem);
  --t-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  --t-body: 1rem;
  --t-small: 0.8125rem;
  --t-script: min(clamp(2.2rem, 1rem + 3.6vw, 5rem), 10svh);
}

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }
.lenis-stopped { overflow: hidden; }

/* ---------- Basis ---------- */
html, body { overflow-x: clip; }
.main-wrapper:focus { outline: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.wrap > * { min-width: 0; }
.section { position: relative; padding-block: var(--section); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 2000; padding: 0.75rem 1.25rem; border-radius: 5rem; background: var(--ink); color: var(--paper); font-weight: 800; text-transform: uppercase; transition: top 0.3s var(--ease); }
.skip-link:focus-visible { top: 1rem; }
:where(a, button, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--red) !important; outline-offset: 3px; }
.hdd-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap; }
img { max-width: 100%; }
p, h1, h2, h3, h4, li, dd, dt, blockquote { overflow-wrap: break-word; }

/* ---------- Typografie ---------- */
.hdd-title { margin: 0; font-weight: inherit; }
.hdd-caps { display: block; font-family: var(--_typography---font--font-title); font-size: var(--t-h2); font-weight: 800; line-height: 0.98; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; overflow-wrap: normal; }
.hdd-script { display: block; font-family: Thistails, "Times New Roman", serif; font-size: var(--t-script); font-weight: 400; line-height: 1.1; text-transform: none; margin-top: 0.05em; padding-bottom: 0.1em; text-wrap: balance; }
.caps3 { font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.1; text-transform: uppercase; overflow-wrap: normal; }
.t-lead { font-size: var(--t-lead); line-height: 1.5; text-wrap: pretty; }
.t-muted { color: var(--muted); }
.t-label { font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 1.5rem var(--col-gap); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head__text { max-width: 30rem; color: var(--muted); justify-self: end; }
.more { margin-top: 2.5rem; }

/* Beginstaten: enkel met motion (html.hdd-anim). */
.hdd-anim [data-reveal="write"] { clip-path: inset(-25% 100% -25% -6%); }
.hdd-anim [data-reveal="up"]:not(.is-in), .hdd-anim [data-reveal-stagger]:not(.is-in) > * { opacity: 0; transform: translateY(2rem); }

/* ---------- Knoppen en links ---------- */
.hdd-btn { position: relative; display: inline-flex; align-items: center; gap: 0.7rem; min-height: 3.5rem; padding: 1rem 1.6rem 1rem 1.75rem; border: 0; border-radius: 5rem; background: var(--_theme---text-color--text-primary); color: var(--_theme---background--bg-primary); font-family: var(--_typography---font--font-title); font-size: var(--t-body); font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: transform 0.5s var(--ease); }
.hdd-btn.is-light { background: var(--paper); color: var(--ink); }
.hdd-btn svg { width: 1.2em; height: 1.2em; flex: none; transition: transform 0.5s var(--ease); }
.hdd-btn:hover svg { transform: translate(0.15em, -0.15em); }
.hdd-btn:active { transform: scale(0.97); }
.hdd-btn__label { overflow: hidden; display: inline-block; }
.hdd-btn__label span { display: inline-block; text-shadow: 0 1.3em currentColor; transition: transform 0.6s var(--ease); }
.hdd-btn:hover .hdd-btn__label span { transform: translateY(-1.3em); }
.hdd-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-family: var(--_typography---font--font-title); font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.hdd-link span { background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; padding-bottom: 0.15em; transition: background-size 0.5s var(--ease); }
.hdd-link:hover span { background-size: 0% 1px; background-position: right bottom; }
.hdd-link svg { width: 1.15em; height: 1.15em; flex: none; transition: transform 0.5s var(--ease); }
.hdd-link:hover svg { transform: translateX(0.25em); }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-bottom: 1.5rem; font-weight: 800; text-transform: uppercase; font-size: var(--t-small); }
.back-link svg { width: 1.1em; height: 1.1em; transform: rotate(180deg); }
.contact-line { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; width: fit-content; max-width: 100%; font-weight: 800; font-size: var(--t-body); }
.contact-line svg { width: 1.4em; height: 1.4em; flex: none; }
.contact-line span { overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat; transition: background-size 0.5s var(--ease); }
.contact-line:hover span { background-size: 100% 1px; }

/* ---------- Nav: zelfde randen als de inhoud, gewone tekstlinks ---------- */
.nav-container { padding-inline: max(var(--gutter), (100% - var(--maxw)) / 2) !important; }
.nav-logo { justify-self: start; }
.nav-center { justify-self: center; }
@media screen and (min-width: 768px) {
  .nav-center .btn-animate-chars__bg { background: transparent !important; }
  .nav-center .btn-animate-chars { color: var(--_theme---text-color--text-primary); padding-inline: 0.9rem; }
}
.nav-center__list-li { position: relative; }
.nav-center__list-li::after { content: ""; position: absolute; left: 50%; bottom: -0.3rem; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--red); translate: -50% 0; scale: 0; transition: scale 0.4s var(--ease); }
.nav-center__list-li.is-current::after { scale: 1; }

/* ---------- Hero: het logo met de kat, nooit doorgesneden ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding-top: var(--nav-h); padding-bottom: clamp(1.5rem, 4svh, 3rem); display: flex; }
.hero__inner { display: grid; grid-template-rows: 1fr auto; gap: clamp(1.5rem, 4svh, 3rem); }
.hero__lockup {
  /* lockup is ~0,56 zo hoog als breed; breedte volgt uit de hoogte die overblijft */
  position: relative; align-self: center; justify-self: center;
  width: min(100%, calc((100svh - var(--nav-h) - 12rem) / 0.58));
  display: grid; gap: clamp(0.5rem, 2svh, 1.25rem);
}
.hero__top, .hero__bottom { position: relative; width: 100%; height: auto; display: block; }
.hero__top { z-index: 1; }
.hero__bottom { z-index: 3; }
.hero__cat { position: absolute; z-index: 2; left: 50%; top: 58%; width: 100%; aspect-ratio: 16 / 9; translate: -50% -50%; pointer-events: none; }
.hero__cat canvas { width: 100%; height: 100%; display: block; }
.hero__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.25rem var(--col-gap); }
.hero__h1 { margin: 0; max-width: 34ch; font-family: var(--_typography---font--font-title); font-size: min(var(--t-h3), 4.2svh); font-weight: 800; line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

/* ---------- Herkenning ---------- */
.recog__label { margin-bottom: 2rem; color: var(--muted); }
.recog__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(0.5rem, 1.2vw, 1rem); }
.recog__item { max-width: 26ch; font-family: var(--_typography---font--font-title); font-size: var(--t-h2); font-weight: 800; line-height: 1.05; text-transform: uppercase; overflow-wrap: normal; }
.recog__item span, .pains__item span { background: linear-gradient(var(--red), var(--red)) left 56% / calc(var(--strike, 0) * 100%) 0.08em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.recog__turn { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 34rem; font-weight: 600; }

/* ---------- De werkdag ---------- */
.day { position: relative; background: var(--paper); }
.day__intro { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--col-gap); align-items: start; padding-bottom: clamp(3rem, 6vw, 5rem); }
.day__who { grid-row: 1 / span 2; width: clamp(3.5rem, 5vw, 5rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #e6e6e6; margin-top: 0.4rem; }
.day__who img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.day__lede { grid-column: 2; margin-top: 1.25rem; max-width: 40rem; }
.day__head, .day__col-h { display: none; }

/* Gestapeld (mobiel, lage schermen, reduced motion) */
.beats { display: grid; gap: clamp(4rem, 9vw, 6rem); }
.beat { display: grid; gap: 1rem; }
.beat__meta { display: flex; align-items: baseline; gap: 0.75rem; }
.beat__time { font-family: var(--_typography---font--font-title); font-size: var(--t-h2); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.beat__role { font-family: Thistails, "Times New Roman", serif; font-size: var(--t-h3); line-height: 1; }
.beat__main { display: grid; gap: 1rem; }
.beat__title { margin: 0; font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.beat__me { font-size: var(--t-lead); font-weight: 600; }
.beat__agency { padding: 1rem 0 0 1.25rem; border-left: 2px solid var(--line); color: var(--muted); }
.beat__agency-h { margin-bottom: 0.4rem; }
.beat__agency-t { font-size: var(--t-lead); font-weight: 600; line-height: 1.35; }
.beat__people { margin-top: 0.5rem; font-size: var(--t-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.beat__people span { font-variant-numeric: tabular-nums; }

/* Artefacten */
.art { position: relative; border-radius: 1.25rem; background: var(--soft); padding: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; }
.art-mail__from { font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.art-mail__text { margin-top: 0.75rem; font-size: var(--t-h3); font-weight: 600; line-height: 1.3; max-width: 30ch; }
.art-ai { display: grid; gap: 0.6rem; }
.art-ai__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.15rem; border-radius: 0.8rem; background: var(--paper); font-weight: 600; font-size: var(--t-lead); line-height: 1.35; }
.art-ai__row s { text-decoration: none; background: linear-gradient(var(--red), var(--red)) left 55% / calc(var(--strike, 0) * 100%) 2px no-repeat; }
.art-ai__row.is-cut { color: var(--muted); }
.art-ai__stamp { flex: none; padding: 0.4rem 0.75rem 0.35rem; border-radius: 0.4rem; background: var(--ink); color: var(--paper); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.art-ai__cat { display: none; }
.art-design { padding: 0; background: linear-gradient(135deg, #0b2a5b 0%, #1d63c9 55%, #5fb3ff 100%); color: #fff; aspect-ratio: 16 / 10; display: grid; grid-template-rows: auto 1fr; }
.art-design__nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; font-weight: 800; font-size: 0.875rem; }
.art-design__nav i { display: inline-block; width: 2.25rem; height: 0.5rem; margin-left: 0.4rem; border-radius: 1rem; background: rgba(255,255,255,0.45); }
.art-design__hero { align-self: center; padding: 0 clamp(1.25rem, 4%, 2.5rem) 1.5rem; text-align: center; container-type: inline-size; }
.art-design__h { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.4rem, 7cqi, 3.2rem); font-weight: 400; line-height: 1.05; }
.art-design__sub { margin-top: 0.75rem; font-size: clamp(0.8rem, 2.2cqi, 1.0625rem); opacity: 0.9; }
.art-design__btns { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; }
.art-design__btns span { padding: 0.5rem 0.9rem; border-radius: 2rem; background: #fff; color: #0b2a5b; font-size: 0.75rem; font-weight: 800; }
.art-design__btns span + span { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.art-code { background: #0d0d0d; color: #e8e8e8; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(0.8rem, 0.72rem + 0.3vw, 1rem); line-height: 1.75; }
.art-code pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.art-code .t { color: #8a8a8a; } .art-code .a { color: #bdbdbd; } .art-code .s { color: #fff; font-weight: 700; }
.art-live { padding: 0; background: #e9e9e7; aspect-ratio: 4 / 3; }
.art-live img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vastgepind vanaf 1024x640: twee kolommen, even zwaar */
.day.is-pinned .day__track { height: calc(var(--beats, 5) * 90svh + 100svh); }
.day.is-pinned .day__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.day.is-pinned .day__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  grid-template-rows: auto auto minmax(0, 1fr);
  height: calc(100svh - var(--nav-h) - 1.5rem); margin-top: var(--nav-h); padding-bottom: 1.5rem;
}
.day.is-pinned .day__head { display: grid; grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 1.5rem; padding-bottom: min(1.25rem, 2svh); }
.day__clock { display: flex; align-items: baseline; gap: 1rem; }
.day__time { font-family: var(--_typography---font--font-title); font-size: min(var(--t-display), 12svh); font-weight: 800; line-height: 0.9; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.day__role { min-width: 9ch; font-family: Thistails, "Times New Roman", serif; font-size: min(var(--t-script), 6svh); line-height: 1; }
.day__bar { align-self: center; height: 2px; background: var(--line); }
.day__bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.day.is-pinned .day__col-h { display: block; padding: 0.75rem 0; border-top: 1px solid var(--ink); color: var(--muted); }
.day.is-pinned .day__col-h--me { grid-column: 1 / span 8; }
.day.is-pinned .day__col-h--ag { grid-column: 9 / -1; }
.day.is-pinned .beats { grid-column: 1 / -1; position: relative; display: block; min-height: 0; }
.day.is-pinned .beat { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); visibility: hidden; }
.day.is-pinned .beat__meta { display: none; }
.day.is-pinned .beat__main { grid-column: 1 / span 8; grid-template-rows: auto minmax(0, 1fr) auto; gap: min(1rem, 2svh); min-height: 0; }
.day.is-pinned .beat__title { font-size: min(var(--t-h3), 4svh); }
.day.is-pinned .beat__body { align-self: stretch; min-height: 0; container-type: size; overflow: hidden; }
.day.is-pinned .art { width: 100%; max-height: 100cqh; }
/* tekstartefacten vullen hun vak, zodat er geen lege halve pagina hangt */
.day.is-pinned .art-mail, .day.is-pinned .art-ai, .day.is-pinned .art-code { height: 100cqh; display: flex; flex-direction: column; justify-content: center; }
.day.is-pinned .art-mail__text { font-family: var(--_typography---font--font-title); font-size: min(var(--t-h2), 7cqh, 5.5cqw); font-weight: 800; line-height: 1.1; text-transform: uppercase; max-width: 22ch; }
.day.is-pinned .art-ai { gap: min(0.8rem, 2cqh); }
.day.is-pinned .art-ai__row { font-size: min(var(--t-lead), 4cqh); padding-block: min(1.1rem, 3cqh); }
.day.is-pinned .art-code { font-size: min(1.15rem, 3.4cqh, 1.8cqw); }
.day.is-pinned .art-design { width: min(100cqw, 160cqh); }
.day.is-pinned .art-live { width: min(100cqw, 133cqh); }
.day.is-pinned .art-ai__cat { display: block; position: absolute; right: -1rem; bottom: -1.5rem; width: min(11rem, 24cqh); aspect-ratio: 1; overflow: hidden; }
.day.is-pinned .art-ai { padding-right: min(10rem, 22cqh); }
.art-ai__cat canvas { width: 100%; height: 100%; object-fit: cover; transform: scale(1.8); }
.day.is-pinned .beat__me { font-size: min(var(--t-lead), 2.6svh); }
.day.is-pinned .beat__agency { grid-column: 9 / -1; display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 0 var(--col-gap); color: var(--ink); }
.day.is-pinned .beat__agency-h { display: none; }
.day.is-pinned .beat__agency-t { font-family: var(--_typography---font--font-title); font-size: min(var(--t-h3), 4svh); font-weight: 800; line-height: 1.12; text-transform: uppercase; }
.day.is-pinned .beat__people { color: var(--muted); }
.day.is-pinned .beat__people span { display: block; font-family: var(--_typography---font--font-title); font-size: min(var(--t-display), 14svh); line-height: 0.9; color: var(--ink); }
.day.is-pinned .beat[data-beat="live"] .beat__agency-t { color: var(--red); }

/* ---------- Ontknoping ---------- */
.payoff__caps { font-size: var(--t-display); max-width: 14ch; }
.payoff__text { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 40rem; margin-left: auto; }

/* ---------- Bewijs: drie gelijke kaarten, één spec ---------- */
.proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3rem) var(--col-gap); }
.case-card { display: grid; align-content: start; gap: 0.6rem; }
.case-card__media { display: block; overflow: hidden; border-radius: 1rem; aspect-ratio: 4 / 3; margin-bottom: 0.6rem; }
.case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.case-card:hover .case-card__media img { transform: scale(1.04); }
.case-card__cats { color: var(--muted); }
.case-card__title { font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.case-card__line { font-size: var(--t-body); line-height: 1.5; color: var(--muted); }
.case-card__quote { margin-top: 0.4rem; padding-left: 1rem; border-left: 2px solid var(--ink); font-size: var(--t-body); font-weight: 600; line-height: 1.45; }
.case-card__quote em { display: block; margin-top: 0.3rem; font-style: normal; font-size: var(--t-small); color: var(--muted); }

/* ---------- Een maand ---------- */
.month__board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.month__week { display: grid; align-content: start; }
.month__wk { padding-bottom: 0.75rem; border-bottom: 2px solid var(--ink); font-weight: 800; text-transform: uppercase; font-size: var(--t-small); letter-spacing: 0.05em; }
.month__card { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--line); }
.month__card .t-label { color: var(--muted); }
.month__card p:last-child { margin-top: 0.35rem; font-weight: 600; line-height: 1.4; }
.month__note { margin-top: 1.5rem; font-size: var(--t-small); color: var(--muted); }

/* ---------- Bezwaren ---------- */
.objections { margin: 0; border-top: 1px solid var(--line); }
.objections__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0.75rem var(--col-gap); padding-block: clamp(1.5rem, 2.8vw, 2.25rem); border-bottom: 1px solid var(--line); }
.objections dt { font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.12; text-transform: uppercase; overflow-wrap: normal; }
.objections dd { margin: 0; font-size: var(--t-lead); line-height: 1.5; max-width: 38rem; }

/* ---------- Rijen met cursor-preview (diensten) ---------- */
.svc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.svc-row { border-bottom: 1px solid var(--line); }
.svc-row__link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: center; gap: 0.75rem var(--col-gap); padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.svc-row__name { font-family: var(--_typography---font--font-title); font-size: var(--t-h2); font-weight: 800; line-height: 1; text-transform: uppercase; transition: transform 0.7s var(--ease); overflow-wrap: normal; }
.svc-row__short { font-size: var(--t-lead); line-height: 1.45; color: var(--muted); transition: color 0.4s; }
.svc-row__short b { display: block; margin-bottom: 0.25rem; font-size: var(--t-small); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.svc-row__arrow svg { width: clamp(1.5rem, 2.5vw, 2rem); height: auto; transition: transform 0.6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .svc-row__link { transition: opacity 0.4s; }
  .svc-row__link:hover .svc-row__name { transform: translateX(0.75rem); }
  .svc-row__link:hover .svc-row__short { color: currentColor; }
  .svc-row__link:hover .svc-row__arrow svg { transform: translateX(0.4rem); }
  .svc-list:has(.svc-row__link:hover) .svc-row__link:not(:hover) { opacity: 0.35; }
}
.cursor-preview { position: fixed; left: 0; top: 0; z-index: 800; width: clamp(15rem, 22vw, 22rem); aspect-ratio: 4 / 3; pointer-events: none; }
.cursor-preview__inner { width: 100%; height: 100%; overflow: hidden; border-radius: 1rem; clip-path: inset(50% 50% 50% 50% round 1rem); transition: clip-path 0.55s var(--ease); }
.cursor-preview.is-on .cursor-preview__inner { clip-path: inset(0 0 0 0 round 1rem); }
.cursor-preview img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; transition: scale 0.8s var(--ease); }
.cursor-preview.is-on img { scale: 1; }
@media not ((hover: hover) and (pointer: fine)) { .cursor-preview { display: none; } }

/* ---------- Werklijst: altijd een beeld, naam in kapitalen ---------- */
.work-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.work-row { border-bottom: 1px solid var(--line); }
.work-row[hidden] { display: none; }
.work-row__link { display: grid; grid-template-columns: clamp(5rem, 8vw, 7.5rem) minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr) auto; align-items: center; gap: 0.75rem var(--col-gap); padding-block: clamp(1rem, 1.8vw, 1.5rem); }
.work-row__thumb { display: block; overflow: hidden; border-radius: 0.6rem; aspect-ratio: 4 / 3; }
.work-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.work-row__title { font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.1; text-transform: uppercase; transition: transform 0.7s var(--ease); }
.work-row__line { font-size: var(--t-body); font-weight: 600; line-height: 1.4; }
.work-row__cats { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.work-row__arrow svg { width: 1.5rem; height: 1.5rem; transition: transform 0.6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .work-row__link { transition: opacity 0.4s; }
  .work-list:has(.work-row__link:hover) .work-row__link:not(:hover) { opacity: 0.35; }
  .work-row__link:hover .work-row__title { transform: translateX(0.5rem); }
  .work-row__link:hover .work-row__arrow svg { transform: translateX(0.4rem); }
}

/* ---------- Citaat (casepagina) ---------- */
.quote { margin: 0 auto; max-width: 60rem; }
.quote__text { margin: 0; padding: 0; border: 0; font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.25; text-wrap: pretty; }
.quote__who { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.quote__who img { width: 3.5rem; height: 3.5rem; flex: none; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.quote__who strong { display: block; }
.quote__who span { color: var(--muted); font-size: var(--t-small); }

/* ---------- Testimonials (component uit de export) ---------- */
.testi .testimonial-lines { max-width: 60rem; margin-inline: auto; }

/* ---------- Footer: het enige einde ---------- */
.site-footer { position: relative; z-index: 1; padding-block: var(--section) 2rem; background: var(--ink); color: var(--paper); }
.site-footer__close { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
.site-footer__who { width: clamp(4.5rem, 7vw, 7rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #333; }
.site-footer__who img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.site-footer__h2 { font-size: var(--t-h2); }
.site-footer__lead { margin-top: 1.25rem; max-width: 36rem; color: var(--color--light-80); }
.site-footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 2rem; }
.site-footer__talk { position: relative; display: block; margin-top: clamp(4rem, 8vw, 6rem); }
.site-footer__talk img { width: 78%; height: auto; display: block; filter: invert(1); transition: transform 0.8s var(--ease); }
.site-footer__talk:hover img { transform: translateY(-0.35rem); }
/* De kop hing met zijn kin in de knop. Het vierkant stond midden op het
   LET'S TALK-blok, maar dat blok is veel lager dan het vierkant breed is, dus
   stak de kat er tot 207px onderuit en dekte de witte pil vanaf 1024px zijn
   muil en tong af. Nu hangt hij aan de onderkant van het blok met een vaste
   overhang van 35% van zijn eigen hoogte: die schaalt mee met de kat, terwijl
   een vaste translate dat niet deed.

   Let op: dit mag geen `translate` zijn. GSAP animeert dit element (scale en
   rotate bij het binnenkomen) en zet daarbij de losse translate/rotate/scale
   properties op none om conflicten met zijn eigen transform te vermijden. Een
   negatieve marge blijft wel staan, en procentuele marges rekenen tegen de
   breedte van het blok, dus de overhang schaalt mee met de kat: 7% van de
   blokbreedte is precies 35% van de kophoogte. */
.site-footer__cat { position: absolute; right: 0; top: auto; bottom: 0; width: 20%; aspect-ratio: 1; margin-bottom: -7%; overflow: hidden; pointer-events: none; }
.site-footer__cat canvas { width: 100%; height: 100%; object-fit: cover; transform: scale(1.8); }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); font-size: var(--t-small); color: var(--color--light-60); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.site-footer__nav a { min-height: 2rem; display: inline-flex; align-items: center; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--paper); }
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Subpagina's: hoofding ---------- */
.page-hero { padding-block: calc(var(--nav-h) + clamp(3rem, 8svh, 6rem)) clamp(3rem, 7vw, 5rem); }
.page-hero .hdd-caps { font-size: var(--t-display); }
.page-hero__intro { margin-top: 2rem; max-width: 40rem; color: var(--muted); }

/* ---------- Werk-index ---------- */
.work-index { padding-bottom: var(--section); }
.filters { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-bottom: 1.5rem; }
.filters__btn { position: relative; min-height: 2.75rem; padding: 0; border: 0; background: none; color: inherit; font-family: var(--_typography---font--font-title); font-size: var(--t-body); font-weight: 800; text-transform: uppercase; cursor: pointer; opacity: 0.4; transition: opacity 0.3s; }
.filters__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.filters__btn:hover { opacity: 0.8; }
.filters__btn[aria-pressed="true"] { opacity: 1; }
.filters__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.filters__btn sup { font-size: 0.6em; }

/* ---------- Case ---------- */
.case-hero { padding-top: calc(var(--nav-h) + clamp(2rem, 6svh, 4rem)); }
.case-hero__cats { margin-bottom: 1rem; color: var(--muted); }
.case-hero .hdd-caps { font-size: var(--t-display); }
.case-hero__media { margin-top: clamp(2.5rem, 5vw, 4rem); height: min(78svh, 54rem); min-height: 18rem; overflow: hidden; }
.case-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.case-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem var(--col-gap); padding-block: var(--section); }
.case-meta { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; display: grid; gap: 2rem; }
.case-meta dl { margin: 0; display: grid; gap: 1.25rem; }
.case-meta dt { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.case-meta dd { margin: 0.2rem 0 0; font-weight: 600; }
.case-meta a { text-decoration: underline; text-underline-offset: 0.2em; }
.case-meta .hdd-btn { justify-self: start; }
.case-story { display: grid; gap: clamp(3.5rem, 7vw, 5.5rem); }
.case-block__h { margin-bottom: 1rem; font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.case-block__lead { font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.25; text-wrap: pretty; }
.case-approach { margin: 0; border-top: 1px solid var(--line); }
.case-approach__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 0.75rem var(--col-gap); padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.case-approach dt { font-weight: 800; text-transform: uppercase; }
.case-approach dd { margin: 0; font-size: var(--t-lead); line-height: 1.45; }
.case-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.case-gallery__item { margin: 0; overflow: hidden; border-radius: 1rem; aspect-ratio: 4 / 3; }
.case-gallery__item.is-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.case-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.case-gallery__item:last-child:not(.is-wide):nth-child(3n + 2) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.case-related { padding-top: 3rem; font-size: var(--t-lead); }
.case-related a { font-weight: 800; text-decoration: underline; text-underline-offset: 0.2em; }
.next-case { display: block; margin-top: var(--section); padding-block: var(--section) 0; border-top: 1px solid var(--line); }
.next-case__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem var(--col-gap); align-items: center; }
.next-case__label { color: var(--muted); }
.next-case__title { display: block; margin-top: 0.5rem; font-family: var(--_typography---font--font-title); font-size: var(--t-display); font-weight: 800; line-height: 0.95; text-transform: uppercase; transition: transform 0.8s var(--ease); }
.next-case__line { display: block; margin-top: 0.75rem; font-weight: 600; font-size: var(--t-lead); }
.next-case__media { overflow: hidden; border-radius: 1rem; aspect-ratio: 4 / 3; }
.next-case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.next-case:hover .next-case__title { transform: translateX(0.5rem); }
.next-case:hover .next-case__media img { transform: scale(1.04); }

/* ---------- Dienstpagina ---------- */
.svc-hero { padding-top: calc(var(--nav-h) + clamp(2rem, 6svh, 4rem)); }
.svc-hero__name { margin-bottom: 1rem; font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.svc-hero .hdd-caps { font-size: var(--t-display); max-width: 16ch; }
.svc-hero__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 4rem; margin-top: 2rem; }
.svc-hero__intro { max-width: 40rem; color: var(--muted); }
.svc-hero__media { margin-top: clamp(3rem, 6vw, 5rem); height: min(70svh, 46rem); min-height: 16rem; overflow: hidden; }
.svc-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.pains { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(0.5rem, 1.2vw, 1rem); }
.pains__item { max-width: 28ch; font-family: var(--_typography---font--font-title); font-size: var(--t-h2); font-weight: 800; line-height: 1.05; text-transform: uppercase; overflow-wrap: normal; }
.u-theme-dark.deliver { background: var(--ink); color: var(--paper); }
.rows { margin: 0; border-top: 1px solid var(--line); }
.rows__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0.75rem var(--col-gap); padding-block: clamp(1.4rem, 2.6vw, 2.1rem); border-bottom: 1px solid var(--line); }
.rows dt { font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; text-transform: uppercase; line-height: 1.1; overflow-wrap: normal; }
.rows dd { margin: 0; font-size: var(--t-lead); line-height: 1.5; max-width: 38rem; }
.not-included { margin-top: 2.5rem; max-width: 44rem; font-size: var(--t-lead); line-height: 1.5; }
.not-included span { display: block; margin-bottom: 0.5rem; font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color--light-60); }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem var(--col-gap); margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps3__item { padding-top: 1.25rem; border-top: 2px solid var(--ink); counter-increment: s; }
.steps3__item::before { display: block; content: "0" counter(s); font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1; }
.steps3__item h3 { margin: 1rem 0 0.6rem; font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.steps3__item p { font-size: var(--t-body); line-height: 1.5; color: var(--muted); }

/* ---------- Werkwijze: fase per scherm, beeld en tekst om beurten -------
   De vorige versie was vijf rijen tekst onder elkaar. Dit is één fase per
   scherm met een echt artefact ernaast; het beeld draagt de helft van de
   breedte, zodat er iets te zien valt en niet alleen te lezen.             */
.fl__row { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 7rem) 0; }
/* De scheidingslijn is een element en geen border, want een border kan niet
   opentrekken. Hij vertrekt op scaleX(0) vanaf links en loopt vol bij binnenkomst. */
.fl__rule { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--line); transform-origin: 0 50%; }
.fl__row:first-child .fl__rule { display: none; }
.hdd-anim .fl__rule { transform: scaleX(0); }
.fl__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 4vw, 4rem) var(--col-gap);
  align-items: center;
}
/* Om beurten van kant: anders loopt de pagina als één kolom met plaatjes. */
.fl__row--flip .fl__text { order: 2; }
/* Spookcijfer: groot genoeg dat zijn verschuiving tijdens het scrollen echt te
   zien is. Een klein element dat 30 pixels opschuift over een hele pagina is
   onzichtbaar; dit is honderden pixels hoog en schuift mee met de rij. */
.fl__ghost {
  position: absolute; top: -0.26em; left: -0.4em; z-index: 0;
  font-family: var(--_typography---font--font-title); font-weight: 800; line-height: 0.78;
  font-size: clamp(6rem, 20vw, 17rem); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 2px var(--line-sterk, rgba(17, 17, 17, 0.13));
  pointer-events: none; user-select: none;
}
/* Het cijfer hangt over de buitenrand van de kolom, weg van de artefactkant.
   Eerst stond het midden achter de alinea en dat las als ruis over de tekst. */
.fl__row--flip .fl__ghost { left: auto; right: -0.4em; }
.fl__text { position: relative; }
.fl__text > :not(.fl__ghost) { position: relative; z-index: 1; }
.fl__n { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 1rem; font-family: var(--_typography---font--font-title); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fl__n > span:first-child { font-size: var(--t-h3); }
.fl__of { font-size: var(--t-small); color: var(--muted); }
.fl__name { margin: 0 0 1rem; font-family: var(--_typography---font--font-title); font-size: var(--t-h2); font-weight: 800; line-height: 1; text-transform: uppercase; }
.fl__line { margin: 0; max-width: 34ch; font-size: var(--t-lead); line-height: 1.45; }
.fl__yours { margin: 2rem 0 0; }
.fl__yours .t-label { display: block; margin-bottom: 0.4rem; color: var(--muted); }
.fl__yours > span:last-child { display: block; font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 400; line-height: 1.15; }

.fl__art { min-width: 0; }
/* Beginstaat van de veeg, zodat het artefact niet eerst heel even volledig
   zichtbaar staat voor GSAP eraan komt. */
.hdd-anim [data-fase-art] { clip-path: inset(0% 100% 0% 0% round 1.25rem); }
.hdd-anim .fl__row--flip [data-fase-art] { clip-path: inset(0% 0% 0% 100% round 1.25rem); }
/* De beelden zitten in een kader met overflow hidden en zijn zelf iets hoger,
   zodat er ruimte is om te schuiven zonder dat er een rand vrijkomt. */
.fl__shot { margin: 0; overflow: hidden; border-radius: 1.25rem; }
.fl__img { display: block; width: 100%; height: auto; }
/* Het beeld staat ruim in zijn kader zodat er 10% speling is om te schuiven.
   Met de vorige 4% kwam het beeld 28 pixels vooruit over zes meter scrollen,
   wat niemand ziet; op deze schaal is het wel merkbaar zonder te storen. */
@media (prefers-reduced-motion: no-preference) {
  .fl__shot img { will-change: transform; }
  [data-parallax="ruim"] img { transform: scale(1.22); }
}
.fl__card { padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid var(--line); border-radius: 1.25rem; }

.fl__quote-h { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.fl__quote-rows { margin: 0; padding: 0; list-style: none; }
.fl__quote-rows li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.fl__quote-rows li > span:last-child { color: var(--muted); }
.fl__quote-f { display: flex; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 0; font-family: var(--_typography---font--font-title); font-weight: 800; text-transform: uppercase; }

@media (max-width: 991px) {
  .fl__grid { grid-template-columns: minmax(0, 1fr); }
  /* Op smal altijd tekst boven beeld: de wisselkant zou de leesvolgorde breken. */
  .fl__row--flip .fl__text { order: 0; }
  .fl__name { font-size: var(--t-h3); }
}

/* ---------- Werkwijze: de afspraken ------------------------------------
   De enige harde toezeggingen op de pagina, dus geen raster van vier maar
   één per rij, uitgelijnd op de basislijn zoals de rest van het typesysteem. */
.pacts__list { display: grid; margin: 0; padding: 0; list-style: none; }
.pact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 0.5rem var(--col-gap);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
}
.pact:last-child { border-bottom: 1px solid var(--line); }
.pact__t { margin: 0; font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.pact__d { margin: 0; max-width: 62ch; font-size: var(--t-lead); line-height: 1.5; color: var(--muted); }

@media (max-width: 767px) {
  .pact { grid-template-columns: minmax(0, 1fr); }
}
.other-svc__h { margin-bottom: 1.5rem; font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* ---------- Over ---------- */
.about-hero { padding-top: calc(var(--nav-h) + clamp(2rem, 6svh, 4rem)); }
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem var(--col-gap); align-items: end; }
.about-hero__hi { font-size: var(--t-display) !important; }
.about-hero__copy .hdd-caps { margin-top: 0.5rem; }
.about-hero__intro { margin-top: 2rem; max-width: 36rem; }
.about-hero__media { position: relative; margin: 0; aspect-ratio: 3 / 4; max-height: 78svh; overflow: hidden; border-radius: 1rem; }
.about-hero__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.story__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem var(--col-gap); }
.story__h { font-family: var(--_typography---font--font-title); font-size: var(--t-h2); font-weight: 800; line-height: 1; text-transform: uppercase; }
.story__body { display: grid; gap: 1.5rem; }
.story__body p { font-size: var(--t-lead); line-height: 1.55; font-weight: 600; max-width: 40rem; }
.about-photos__h { font-family: var(--_typography---font--font-title) !important; font-size: var(--t-h2) !important; font-weight: 800; text-transform: uppercase; }
.about-photos__p { margin-top: 1.25rem; font-size: var(--t-lead); }
.section_about { position: relative; overflow: hidden; isolation: isolate; }
.section_about .about__component { position: relative; z-index: 2; }
.section_about .max-width-medium { max-width: 28rem; }

/* ---------- Contact ---------- */
.contact { padding-block: calc(var(--nav-h) + clamp(2rem, 6svh, 4rem)) var(--section); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3.5rem var(--col-gap); align-items: start; }
.contact__side .hdd-caps { font-size: var(--t-h2); }
.contact__what { display: grid; gap: 1rem; margin: 2.5rem 0; padding: 0; list-style: none; counter-reset: w; }
.contact__what li { counter-increment: w; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); font-size: var(--t-lead); line-height: 1.45; }
.contact__what li::before { content: "0" counter(w); font-family: var(--_typography---font--font-title); font-weight: 800; }
.person { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding-top: 2rem; border-top: 1px solid var(--line); }
.person__photo { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #e6e6e6; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.person__name { margin-bottom: 0.5rem; font-weight: 800; text-transform: uppercase; }
.form { position: sticky; top: calc(var(--nav-h) + 1rem); display: grid; gap: 1.4rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 1.25rem; background: var(--soft); }
.form__h { font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.05rem; border: 1.5px solid var(--ink); border-radius: 5rem; font-weight: 800; font-size: 0.9375rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.chip input:checked + span { background: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 3px; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.02em; }
.field label span { text-transform: none; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.field input, .field textarea { width: 100%; min-height: 3.25rem; padding: 0.85rem 1rem; border: 1.5px solid transparent; border-radius: 0.75rem; background: var(--paper); color: var(--ink); font: inherit; font-size: 1.0625rem; transition: border-color 0.3s; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.field__err { display: none; font-size: 0.875rem; font-weight: 600; color: #b30f12; }
.field.is-invalid input { border-color: #b30f12; }
.field.is-invalid .field__err { display: block; }
.form__submit { justify-self: start; }
.form__note { font-size: 0.875rem; color: var(--muted); }
.form.is-sent .form__note { color: var(--ink); font-weight: 600; }

/* ---------- 404 ---------- */
.lost { min-height: 80svh; display: grid; align-items: center; padding-block: calc(var(--nav-h) + 3rem) 4rem; }
.lost__p { margin-top: 2rem; font-size: var(--t-lead); }
.lost__links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1rem; }

/* ---------- Paginaovergangen ---------- */
/* geen native view transitions: Chrome breekt ze af ('Viewport size changed') en logt een fout. Zie initPageTransitions. */
::view-transition-old(root) { animation: vt-out 0.35s cubic-bezier(0.625, 0.05, 0, 1) both; }
::view-transition-new(root) { animation: vt-in 0.6s cubic-bezier(0.625, 0.05, 0, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(1.5rem); } }

/* ---------- Kleinere schermen ---------- */
@media screen and (max-width: 991px) {
  .section_about .about__overlay { display: none; }
  .section_about .padding-section-large.about { padding-block: var(--section); }
  .head { grid-template-columns: minmax(0, 1fr); }
  .head__text { justify-self: start; }
  .hero__bar { grid-template-columns: minmax(0, 1fr); }
  .proof__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .proof__grid .case-card:last-child { grid-column: 1 / -1; }
  .month__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-hero__grid, .story__grid, .contact__grid, .case-body, .next-case__grid { grid-template-columns: minmax(0, 1fr); }
  .case-meta, .form { position: static; }
  .work-row__link { grid-template-columns: clamp(5rem, 12vw, 7rem) minmax(0, 1fr) auto; }
  .work-row__title { grid-column: 2; }
  .work-row__line { grid-column: 2; grid-row: 2; }
  .work-row__cats { grid-column: 2; grid-row: 3; }
  .work-row__thumb { grid-row: 1 / span 3; }
  .work-row__arrow { grid-column: 3; grid-row: 1 / span 3; }
}
@media screen and (max-width: 767px) {
  :root { --nav-h: 5.5rem; }
  .hero__lockup { width: 100%; }
  .day__intro { grid-template-columns: minmax(0, 1fr); }
  .day__who { grid-row: auto; margin-bottom: 1rem; }
  .day__lede { grid-column: 1; }
  .svc-row__link { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-row__short { grid-column: 1; grid-row: 2; }
  .svc-row__arrow { grid-column: 2; grid-row: 1 / span 2; }
  .proof__grid, .month__board, .steps, .steps3, .principles, .case-gallery { grid-template-columns: minmax(0, 1fr); }
  .proof__grid .case-card:last-child { grid-column: auto; }
  .case-gallery__item, .case-gallery__item.is-wide, .case-gallery__item:last-child:not(.is-wide):nth-child(3n + 2) { grid-column: auto; aspect-ratio: 4 / 3; }
  .objections__row, .rows__row, .case-approach__row { grid-template-columns: minmax(0, 1fr); }
  .site-footer__close { grid-template-columns: minmax(0, 1fr); }
  .site-footer__talk img { width: 72%; }
  .site-footer__cat { width: 26%; }
}
@media screen and (max-width: 479px) {
  .person { grid-template-columns: minmax(0, 1fr); }
  .person__photo { width: 6rem; }
}
@media screen and (max-height: 700px) {
  :root { --section: clamp(4.5rem, 9vw, 7rem); }
}

/* ==========================================================
   Homepage op basis van de Webflow-site
   ========================================================== */

/* Hero en kat: de componenten uit de export, de helderheid zit in de frames */
.sticky__spline { filter: none; width: 100%; }
canvas.sticky__spline { display: block; }

/* Diensten rond de kat: links, rechts, links, rechts */
.section_services { position: relative; z-index: 2; }
/* Kolommen blijven buiten het midden, waar de kat staat (±32% van de breedte) */
.services-list__item.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36%; }
.svc__inner { grid-column: 1; container-type: inline-size; }
.svc.is-right .svc__inner { grid-column: 2; }
.svc__name { margin: 0; font-family: var(--_typography---font--font-title); font-size: min(14cqi, 5.5rem, 11svh); font-weight: 800; line-height: 0.95; text-transform: uppercase; white-space: nowrap; }
/* Rustiger: elke dienst is één naam en één zin, het geheel is de link */
a.services-list__item.svc { color: inherit; text-decoration: none; }
.svc__name { display: block; transition: transform 0.6s var(--ease); }
.svc__text { display: block; margin-top: 1rem; max-width: 24rem; color: var(--muted); }
a.svc:hover .svc__name { transform: translateX(0.5rem); }
.site-footer__close { grid-template-columns: minmax(0, 1fr) !important; }
.svc__img { display: block; width: clamp(7rem, 11vw, 10rem); aspect-ratio: 4 / 3; margin: 1.25rem 0; overflow: hidden; border-radius: 0.75rem; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; }
.svc__text { font-size: var(--t-lead); line-height: 1.5; font-weight: 600; margin-bottom: 0.75rem; }

/* Statement: vier vakken, één standaard */
.statement { position: relative; z-index: 3; background: var(--paper); padding-block: var(--section); }
.statement__title { margin: 0; }
.statement__caps { display: block; font-family: var(--_typography---font--font-title); font-size: var(--t-display); font-weight: 800; line-height: 0.95; text-transform: uppercase; }
.statement__script { display: block; font-family: Thistails, "Times New Roman", serif; font-size: min(clamp(2.75rem, 1rem + 5.5vw, 7.5rem), 13svh); line-height: 1.1; padding-bottom: 0.1em; }
.statement__text { max-width: 62rem; margin-top: clamp(2.5rem, 5vw, 4rem); font-family: var(--_typography---font--font-title); font-size: min(clamp(1.5rem, 1rem + 1.8vw, 2.75rem), 6svh); font-weight: 800; line-height: 1.2; }
.statement__face { display: inline-block; width: 1.9em; height: 1.1em; vertical-align: -0.15em; margin-inline: 0.1em; overflow: hidden; border-radius: 5rem; }
.statement__face { background: #d9d9d6; }
.statement__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.statement__text .sr-word { opacity: 0.18; }
.section_work .statement__caps, .section_work .statement__script { color: var(--paper); }

/* Werk: schuift als een kaart over de pagina, geen harde overgang naar zwart */
.section_work.u-theme-dark { border-radius: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0 0; margin-top: clamp(3rem, 6vw, 5rem); }
/* Werk: intro en afsluiter rond de stapelende kaarten */
.work-intro { padding-top: var(--section); padding-bottom: 2rem; }
.work-outro { padding-block: 3rem var(--section); }
.work-cards__gallery-wrapper { align-self: stretch; }
/* Elke kaart is dicht, zodat de volgende de vorige echt bedekt bij het stapelen. */
.section_work .work-cards__item { position: relative; background: var(--ink); }
/* De lightbox maakt onzichtbare klikvlakken per beeld; de knop "bekijk galerij" vervangt ze. */
[data-slider="container"] > [data-slider="thumbs-wrapper"] { display: none; }
.work-card__cats { margin-bottom: 1rem; font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color--light-60); }
.work-card__line { margin-top: 1rem; max-width: 32rem; font-size: var(--t-lead); line-height: 1.5; color: var(--color--light-80); }
.work-card__quote { margin-top: 1.5rem; max-width: 30rem; padding-left: 1rem; border-left: 2px solid var(--paper); font-weight: 600; line-height: 1.45; }
.work-card__quote span { display: block; margin-top: 0.3rem; font-size: var(--t-small); color: var(--color--light-60); }
.work-card__bottom { display: grid; gap: 1.5rem; }

/* Getuigenissen onder een reuzenkop */
.testi-big { padding-block: var(--section); }
.testi-big__title { margin: 0 0 clamp(2.5rem, 5vw, 4rem); font-family: var(--_typography---font--font-title); font-size: var(--t-display); font-weight: 800; line-height: 0.95; text-transform: uppercase; text-align: center; }

/* Over */
.about-hi { text-transform: none; }
.about-copy { margin-block: 1.5rem 1rem; font-size: var(--t-lead); line-height: 1.5; }
.section_about .hdd-link { color: var(--paper); }

@media screen and (max-width: 767px) {
  .services-list__item.svc { grid-template-columns: minmax(0, 1fr); }
  .svc.is-right .svc__inner { grid-column: 1; }
}

/* ==========================================================
   Rust en contrast (oktober 2026)
   Vijf maten op de homepage: XL (statements), L (namen/titels),
   M (statementtekst, procesblok), body, small. Script = 0,7 x XL.
   ========================================================== */
:root {
  --t-xl: min(clamp(3.25rem, 1rem + 10vw, 11.5rem), 19svh);
  --t-l: min(clamp(2rem, 1rem + 3.4vw, 4.75rem), 10svh);
  --t-m: min(clamp(1.375rem, 1rem + 1.3vw, 2.375rem), 5.5svh);
  --t-script-xl: min(clamp(2.4rem, 1rem + 7vw, 8rem), 13svh);
}
.statement__caps, .testi-big__title { font-size: var(--t-xl); line-height: 0.9; letter-spacing: -0.02em; }
.statement__script { font-size: var(--t-script-xl); }
.statement__text { font-size: var(--t-m); line-height: 1.25; max-width: 56rem; margin-top: clamp(3rem, 6vw, 5rem); }
.statement { padding-block: calc(var(--section) * 1.4); }
.day__intro .hdd-caps { font-size: var(--t-l); }
.day__intro .hdd-script { font-size: var(--t-l); }
.day__time { font-size: min(var(--t-xl), 14svh); }
.day.is-pinned .beat__title, .day.is-pinned .beat__agency-t { font-size: var(--t-m); }
/* Procesblok bijna de helft korter */
.day.is-pinned .day__track { height: calc(var(--beats, 5) * 55svh + 100svh); }
/* ruimte onderaan voor de zwevende pill */
.day.is-pinned .day__grid { height: calc(100svh - var(--nav-h) - 5.5rem); }

/* Diensten: alleen de naam, details bij hover (desktop). Op touch altijd zichtbaar. */
.svc__name { font-size: min(15cqi, var(--t-l)); }
.svc__more { display: grid; gap: 1rem; margin-top: 1.25rem; }
.svc__text { margin: 0; font-size: var(--t-body); font-weight: 600; line-height: 1.5; color: var(--muted); }
.svc__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .svc__more { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.45s var(--ease), transform 0.6s var(--ease); }
  a.svc:hover .svc__more, a.svc:focus-visible .svc__more { opacity: 1; transform: none; }
}

/* Werkkaarten: klant klein, resultaat groot */
.work-card__client { font-family: Thistails, "Times New Roman", serif; font-size: min(var(--t-l), 3.25rem); line-height: 1.1; }
.work-card__title { margin: 1rem 0 0; max-width: 16ch; font-family: var(--_typography---font--font-title); font-size: var(--t-l); font-weight: 800; line-height: 0.98; text-transform: uppercase; overflow-wrap: normal; }
.work-card__quote { margin-top: 2rem; }

/* Zwevende pill-navigatie */
.pill { position: fixed; left: 50%; bottom: 1.25rem; z-index: 950; display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem; border-radius: 5rem; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 14%, transparent); translate: -50% 0; transform: translateY(170%); opacity: 0; pointer-events: none; transition: transform 0.6s var(--ease), opacity 0.4s; }
.pill.is-on { transform: none; opacity: 1; pointer-events: auto; }
.pill__links { display: flex; }
.pill__links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 5rem; font-size: var(--t-small); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; transition: background-color 0.3s; }
.pill__links a:hover, .pill__links a[aria-current] { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.pill__cta { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 1.1rem 0 0.35rem; border-radius: 5rem; background: var(--paper); color: var(--ink); font-size: var(--t-small); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.pill__face { width: 2.1rem; height: 2.1rem; border-radius: 50%; overflow: hidden; background: #ddd; }
.pill__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.pill { transition: transform 0.6s var(--ease), opacity 0.4s, background-color 0.4s, color 0.4s; }
.pill.is-light { background: var(--paper); color: var(--ink); }
.pill.is-light .pill__cta { background: var(--ink); color: var(--paper); }
.pill.is-light .pill__links a:hover, .pill.is-light .pill__links a[aria-current] { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.nav { transition: transform 0.6s var(--ease); }
html.pill-on .nav { transform: translateY(-110%); }
@media screen and (max-width: 767px) {
  .pill__links { display: none; }
  .pill { left: auto; right: 1rem; translate: none; }
}

/* Overgang: in de kat vliegen (enkel als JS + motion actief, anders verborgen) */
.dive { display: none; }
html.dive-on .dive { display: block; position: relative; z-index: 2; height: 170svh; background: var(--paper); }
html.dive-on .dive__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
html.dive-on .dive__cat { width: min(70vw, 62svh * 1.78); height: auto; transform-origin: 49.8% 36.7%; will-change: transform; }
html.dive-on .dive__black { position: absolute; inset: 0; background: var(--ink); opacity: 0; }
/* het werk sluit naadloos aan op het zwart */
html.dive-on .section_work.u-theme-dark { margin-top: 0; border-radius: 0; }
html.dive-on .section_work .work-intro { padding-top: 14svh; }
@media (max-width: 767px) { html.dive-on .dive__cat { width: 100vw; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .statement__text .sr-word { opacity: 1; }
  .svc__more { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ==========================================================
   Oktober 2026, ronde 2: fases, model, stemmen, footer, intro
   ========================================================== */

/* Procesblok: fases in plaats van uren, bureaukolom in gewone zinnen */
.day.is-pinned .beat__agency-t { text-transform: none; font-size: min(var(--t-m), 4.2svh); line-height: 1.2; letter-spacing: -0.005em; }
.day.is-pinned .beat[data-beat="live"] .beat__agency-t { color: var(--ink); }

/* Het model: drie regels die oplichten terwijl je leest */
.model { margin-top: clamp(3rem, 7vw, 6rem); display: grid; gap: 0.1em; font-family: var(--_typography---font--font-title); font-size: var(--t-l); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.model__line { margin: 0; }
.model__line em { font-family: Thistails, "Times New Roman", serif; font-style: normal; font-weight: 400; text-transform: none; font-size: 1.25em; line-height: 0.8; margin-left: 0.1em; }
html.hdd-anim .model__line { opacity: 0.14; }

/* Werkkaarten: klant als kicker, het resultaat als kop op leesbare maat */
.work-card__client { font-size: min(var(--t-m), 2.5rem); }
.work-card__title { margin-top: 0.5rem; max-width: 18ch; font-size: min(clamp(1.75rem, 1rem + 1.9vw, 3.1rem), 7svh); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }

/* Stemmen: kop klein, de kernzin groot, het volledige citaat als bewijs */
.testi-big { padding-block: calc(var(--section) * 1.2); }
.voices__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.voices__title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em; }
.voices__caps { font-family: var(--_typography---font--font-title); font-size: var(--t-m); font-weight: 800; line-height: 1; text-transform: uppercase; }
.voices__script { font-family: Thistails, "Times New Roman", serif; font-size: calc(var(--t-m) * 1.25); line-height: 1; }
.voices__nav { display: flex; align-items: center; gap: 0.5rem; }
.voices__count { margin-right: 0.75rem; font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; color: var(--muted); }
.voices__btn { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.voices__btn svg { width: 1.1rem; height: 1.1rem; }
.voices__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.voices__stage { display: grid; padding-top: clamp(2.5rem, 6vw, 5rem); }
.voice { grid-area: 1 / 1; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(2rem, 4vw, 3.5rem); }
.voice[hidden] { display: grid; visibility: hidden; pointer-events: none; }
.voice__short { grid-column: 1 / span 11; margin: 0; padding: 0; border: 0; }
.voice__short p { margin: 0; max-width: 22ch; font-family: var(--_typography---font--font-title); font-size: var(--t-l); font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; text-indent: -0.4em; text-wrap: balance; }
.voice__body { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.voice__who { grid-column: 1 / span 4; display: flex; align-items: center; gap: 1rem; }
.voice__img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.voice__name { display: block; font-weight: 800; }
.voice__role { display: block; font-size: var(--t-small); color: var(--muted); }
.voice__full { grid-column: 6 / span 6; font-size: var(--t-body); line-height: 1.6; color: var(--muted); }
@media (max-width: 767px) {
  .voice__short { grid-column: 1 / -1; }
  .voice__who, .voice__full { grid-column: 1 / -1; }
  .voice__body { row-gap: 1.25rem; }
}

/* Footer: de vraag uit de presentatie, het antwoord groot, contact op één rij */
.site-footer { padding-block: calc(var(--section) * 1.1) 2rem; }
.foot__q { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3em; }
.foot__caps { font-family: var(--_typography---font--font-title); font-size: var(--t-m); font-weight: 800; line-height: 1; text-transform: uppercase; }
.foot__script { font-family: Thistails, "Times New Roman", serif; font-size: calc(var(--t-m) * 1.5); line-height: 1; }
.site-footer__talk { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.5rem; align-items: center; margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 1.75rem; border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); }
.foot__me { grid-column: 1 / span 3; margin: 0; }
.foot__name { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.foot__role { display: block; margin-top: 0.2rem; font-size: var(--t-small); color: var(--color--light-60); }
.foot__big { font-size: var(--t-lead); font-weight: 600; color: var(--paper); text-decoration: none; background: linear-gradient(currentColor, currentColor) left 100% / 0% 1px no-repeat; padding-bottom: 0.15em; transition: background-size 0.6s var(--ease); justify-self: start; }
.foot__big:hover { background-size: 100% 1px; }
.foot__grid > .foot__big:nth-of-type(1) { grid-column: 4 / span 3; }
.foot__grid > .foot__big:nth-of-type(2) { grid-column: 7 / span 3; }
.foot__cta { grid-column: 10 / -1; justify-self: end; }
.site-footer__base { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 991px) {
  .foot__me, .foot__grid > .foot__big:nth-of-type(1), .foot__grid > .foot__big:nth-of-type(2) { grid-column: 1 / -1; }
  .foot__cta { grid-column: 1 / -1; justify-self: start; }
}

/* Intro bij het laden: alles onzichtbaar tot GSAP de beginstand heeft gezet (max 2,5 s, zie <head>) */
html.intro .hero-content__top, html.intro .nav, html.intro #hero-sequence, html.intro .cat3d { visibility: hidden; }

/* 3D-kat: neemt de plek in van de frames. Zonder WebGL of met reduced motion blijven de frames. */
.cat3d { display: none; }
html.cat-3d .cat3d { display: block; }
html.cat-3d #hero-sequence { display: none; }
/* Grote kapitalen nooit midden in een woord breken: liever kleiner */
.statement__caps { font-size: min(var(--t-xl), 10.5vw); overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.voices { text-align: left; }
.voices__btn .testimonial-lines__arrow { width: 1rem; color: currentColor; }
.voice__short p { text-indent: 0; }
.voice__body { text-align: left; margin: 0; }
.voice__short p { line-height: 1.08; }
/* lijnmaskers van SplitText: ruimte voor onderstokken (g, j, p) */
.voice__short p > * { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.foot__q, .voices__title { column-gap: calc(var(--t-m) * 0.35); }
/* Procesblok-intro: één kolom (de foto ernaast is weg) */
.day__intro { grid-template-columns: minmax(0, 1fr); }
.day__lede { grid-column: 1; }
/* Volgende case: lange namen mogen breken tussen woorden, nooit buiten hun vak */
.next-case__title { font-size: min(var(--t-display), 8vw); white-space: normal; overflow-wrap: normal; text-wrap: balance; max-width: 100%; }
.next-case__grid > span:first-child { container-type: inline-size; }
.next-case__title { font-size: min(var(--t-display), 13cqi); }

/* ==========================================================
   Ronde 3: lockups, diensten achter de kat, werkkaarten, cursor
   Regels (research): script is accent (één woord of frase per sectie),
   schuin (-6deg) en overlappend, met een uitsparing in de achtergrondkleur.
   Grote kapitalen: lijnhoogte 0,88 tot 0,95, spatiëring -0,02em.
   ========================================================== */
:root {
  --t-giant: min(clamp(5rem, 25vw, 26rem), 42svh);
  --t-sec: min(clamp(2.75rem, 1rem + 6vw, 7rem), 12svh);
  --ease-reveal: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
body { font-size: 1.0625rem; }

.lk { position: relative; margin: 0; display: block; color: inherit; }
.lk__caps { display: block; font-family: var(--_typography---font--font-title); font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: normal; }
.lk__script { position: relative; z-index: 1; display: inline-block; font-family: Thistails, "Times New Roman", serif; font-weight: 400; line-height: 1; text-transform: none; letter-spacing: 0; white-space: nowrap;
  transform: rotate(-6deg); transform-origin: 0 100%;
  /* uitsparing: de script snijdt door de kapitalen zoals in het logo */
  -webkit-text-stroke: 0.14em var(--_theme---background--bg-primary); paint-order: stroke fill; }
.lk--xl .lk__caps { font-size: min(var(--t-xl), 10.5vw); }
.lk--xl .lk__script { font-size: calc(min(var(--t-xl), 10.5vw) * 0.62); margin: -0.32em 0 0 1.6em; }
.lk--giant .lk__caps { font-size: var(--t-giant); line-height: 0.82; letter-spacing: -0.03em; }
.lk--giant .lk__script { font-size: calc(var(--t-giant) * 0.32); margin: -0.5em 0 0 2.2em; }
.lk--l .lk__caps { font-size: var(--t-sec); max-width: 16ch; }
.lk--l .lk__script { font-size: calc(var(--t-sec) * 0.72); margin: -0.28em 0 0 1.2em; }
.lk--m .lk__caps { font-size: var(--t-m); }
.lk--m .lk__script { font-size: calc(var(--t-m) * 1.5); margin: -0.38em 0 0 2.6em; }
.lk--s { display: block; }
.lk--s .lk__caps { font-size: var(--t-m); }
.lk--s .lk__script { font-size: calc(var(--t-m) * 1.4); margin: -0.42em 0 0 3.2em; }
.u-theme-dark .lk__script, .section_work .lk__script { -webkit-text-stroke-color: var(--ink); }
.section_work .lk { color: var(--paper); }
.statement .model { margin-top: clamp(4rem, 8vw, 7rem); }
.statement { padding-block: calc(var(--section) * 1.1) var(--section); }
.day__intro { padding-top: var(--section); }
.voices__head { align-items: end; }
.foot__q { display: block; }
.foot__q .lk__script { -webkit-text-stroke-color: var(--ink); }

/* Diensten: groot en genummerd, de kat draait ervoor. Bij het passeren vult de omlijning zich. */
.svcx { position: relative; z-index: 0; padding-block: 10svh 20svh; }
.svcx__list { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; gap: clamp(5rem, 16svh, 12rem); }
.svcx__item { display: flex; }
.svcx__item.is-right { justify-content: flex-end; text-align: right; }
.svcx__link { display: grid; color: inherit; text-decoration: none; }
.svcx__n { font-size: var(--t-small); font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.svcx__name { display: block; margin-top: 0.25rem; font-family: var(--_typography---font--font-title); font-size: min(15.5vw, 24svh); font-weight: 800; line-height: 0.85; letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: max(1.5px, 0.012em) var(--ink);
  background: linear-gradient(90deg, var(--ink) 0 50%, transparent 50% 100%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; background-position: calc(100% - var(--fill, 0) * 100%) 0; }
.svcx__item.is-right .svcx__name { background-image: linear-gradient(270deg, var(--ink) 0 50%, transparent 50% 100%); background-position: calc(var(--fill, 0) * 100%) 0; }
html:not(.hdd-anim) .svcx__name { --fill: 1; }
.svcx__more { display: grid; gap: 0.6rem; margin-top: 1.25rem; max-width: 26rem; }
.svcx__item.is-right .svcx__more { margin-left: auto; }
.svcx__text { font-size: var(--t-lead); font-weight: 600; line-height: 1.35; }
.svcx__list2 { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: var(--t-small); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.svcx__item.is-right .svcx__list2 { justify-content: flex-end; }
@media (hover: hover) and (pointer: fine) {
  .svcx__more { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out); }
  .svcx__link:hover .svcx__more, .svcx__link:focus-visible .svcx__more { opacity: 1; transform: none; }
  .svcx__name { transition: letter-spacing 0.7s var(--ease-out); }
  .svcx__link:hover .svcx__name { --fill: 1 !important; letter-spacing: -0.01em; }
}
/* de kat staat boven de diensten (zoals boven het logo); klikken gaan erdoor */
.section_wrap .sticky__cat { z-index: 1; pointer-events: none; }

/* Werkkaarten: index, klant en vakken; dan het resultaat; dan groot beeld */
.wcard { position: relative; min-height: 100svh; background: var(--ink); color: var(--paper); }
.wcard__inner { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(1rem, 2.2svh, 1.75rem); height: 100svh; padding-block: calc(var(--nav-h) * 0.6) clamp(1.5rem, 4svh, 3rem); box-sizing: border-box; }
.wcard__head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 1.5rem; padding-bottom: 0.9rem; border-bottom: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); }
.wcard__n { font-family: var(--_typography---font--font-title); font-size: var(--t-m); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wcard__n span { font-size: 0.45em; color: var(--color--light-60); margin-left: 0.15em; vertical-align: 0.6em; }
.wcard__client { font-family: Thistails, "Times New Roman", serif; font-size: var(--t-m); line-height: 1; }
.wcard__cats { font-size: var(--t-small); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color--light-60); }
.wcard__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.wcard__title { margin: 0; max-width: 20ch; font-family: var(--_typography---font--font-title); font-size: min(clamp(2rem, 1rem + 3vw, 4.25rem), 8svh); font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: normal; }
.wcard .hdd-link { color: var(--paper); }
.wcard__media { position: relative; min-height: 0; border-radius: clamp(0.75rem, 1.5vw, 1.25rem); overflow: hidden; background: #111; isolation: isolate; }
.wcard__media [data-slider="slides-wrapper"] { position: absolute; inset: 0; }
.wcard__img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(var(--zoom, 1)); transition: transform 1.2s var(--ease-out); }
.wcard__media:hover .wcard__img { --zoom: 1.03; }
.wcard__hit { position: absolute; inset: 0; z-index: 2; }
.wcard__gallery { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 5rem; background: var(--paper); color: var(--ink); font-size: var(--t-small); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: transform 0.3s var(--ease-out); }
.wcard__gallery:hover { transform: scale(1.04); }
.wcard__gallery span { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; border-radius: 1rem; background: var(--ink); color: var(--paper); font-size: 0.7rem; }
.wcard__media > [data-slider="thumbs-wrapper"] { display: none; }
@media (max-width: 767px) {
  .wcard__inner { height: auto; min-height: 100svh; grid-template-rows: auto auto auto; }
  .wcard__media { aspect-ratio: 4 / 5; }
  .wcard__head { grid-template-columns: auto 1fr; }
  .wcard__cats { grid-column: 1 / -1; }
}

/* Cursor met label boven werk (enkel muis) */
.cursor { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; display: grid; place-items: center; width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: var(--t-small); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transform: scale(0); opacity: 0; transition: transform 0.45s var(--ease-out), opacity 0.3s; }
.cursor.is-on { transform: scale(1); opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
.wcard__hit[data-cursor] { cursor: none; }

/* Paginaovergang: zwart doek schuift over en weer weg (expo.inOut) */
::view-transition-old(root) { animation: vt-old 0.7s cubic-bezier(0.87, 0, 0.13, 1) both; }
::view-transition-new(root) { animation: vt-new 0.9s cubic-bezier(0.87, 0, 0.13, 1) both; }
@keyframes vt-old { to { transform: translateY(-12svh); opacity: 0.2; } }
@keyframes vt-new { from { clip-path: inset(100% 0 0 0); transform: translateY(8svh); } to { clip-path: inset(0 0 0 0); transform: none; } }
/* Vulling als tweede laag (geen background-clip: dat gaf dubbele randen) */
.svcx__name, .svcx__item.is-right .svcx__name { position: relative; background: none; color: transparent; -webkit-text-stroke: max(1.5px, 0.012em) var(--ink); }
.svcx__name::after { content: attr(data-text); position: absolute; inset: 0; color: var(--ink); -webkit-text-stroke: max(1.5px, 0.012em) var(--ink); clip-path: inset(-10% calc(100% - var(--fill, 0) * 100%) -10% -2%); }
.svcx__item.is-right .svcx__name::after { clip-path: inset(-10% -2% -10% calc(100% - var(--fill, 0) * 100%)); }
/* Script ongeveer zo hoog als de kapitalen (research: 1,1 tot 1,3 x kaphoogte), overlapt 20% */
.lk--xl .lk__script { font-size: calc(min(var(--t-xl), 10.5vw) * 0.92); margin: -0.48em 0 0 1.1em; }
.lk--l .lk__script { font-size: calc(var(--t-sec) * 1.02); margin: -0.5em 0 0 1em; }
.lk--giant .lk__script { font-size: min(calc(var(--t-giant) * 0.42), 12vw); margin: -0.62em 0 0 1.4em; }
.lk--m .lk__script { font-size: calc(var(--t-m) * 1.9); margin: -0.5em 0 0 2.2em; }
.lk--s .lk__script { font-size: calc(var(--t-m) * 1.7); margin: -0.5em 0 0 2.6em; }
.lk--giant .lk__script { font-size: min(calc(var(--t-giant) * 0.34), 8vw); margin: -0.55em 0 0 1.2em; }
/* 3D-kat in de duik en de footer; de oude beelden blijven tot het model klaar is */
.dive__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html.cat-3d-ready .dive.is-3d .dive__cat { display: none; }
html.cat-3d .site-footer__cat .cat3d { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
html.cat-3d-ready .site-footer__cat canvas[data-cat-look] { visibility: hidden; }
/* Kleine lockups: script hangt onder de kapitalen, raakt ze net (anders wordt de kleine kop onleesbaar) */
.lk--m .lk__script { margin: -0.18em 0 0 1.4em; }
.lk--s .lk__script { margin: -0.2em 0 0 1.8em; }
.lk--s .lk__caps { display: inline; }
.lk--s .lk__script { margin: 0 0 0 0.25em; vertical-align: -0.1em; }
/* Scriptfonts hebben uithalen buiten hun letterbreedte: ruimte geven zodat niets buiten zijn vak valt */
.lk__script { padding: 0.05em 0.3em 0.12em 0.15em; }
/* Lange woorden (PROSPECTIETOOL,) moeten op een gsm passen */
.lk--l .lk__caps { font-size: min(var(--t-sec), 8.6vw); }
.lk--l .lk__script { font-size: calc(min(var(--t-sec), 8.6vw) * 1.02); }
.lk__script { white-space: normal; max-width: calc(100% - 1.2em); }
.lk--l .lk__caps { max-width: 20ch; }
/* Kopgrootte volgt ook de kolom waarin de kop staat (smalle kolommen op contact en werkwijze) */
.lk { container-type: inline-size; }
.lk--l .lk__caps { font-size: min(var(--t-sec), 8.6vw, 9.5cqi); }
.lk--xl .lk__caps { font-size: min(var(--t-xl), 10.5vw, 12cqi); }
/* kleine lockups staan in flex-rijen: geen container (die zou ze tot 0 breed laten krimpen) */
.lk--s, .lk--m { container-type: normal; }
/* Hero-canvas enkel zo breed als nodig voor de kat (scheelt de helft van de pixels) */
html.cat-3d .sticky__cat .cat3d { left: 50%; right: auto; width: min(100%, 120svh); transform: translateX(-50%); }

/* ==========================================================
   Ronde 4: verfijning. Body regular, labels licht en luchtig,
   de afgeronde kapitalen enkel nog voor de grote koppen (700).
   Tweede niveau in Trade Gothic regular, zinsletters, krappe spatiëring.
   ========================================================== */
body, p, li, dd, .t-lead, .t-body { font-weight: 400; }
body { line-height: 1.55; letter-spacing: 0.002em; }
.t-lead { line-height: 1.5; }
.t-muted, .voice__full, .svcx__text, .day__lede, .foot__role { font-weight: 400; }

/* Labels: klein, regular, ruim gespatieerd */
.t-label, .svcx__n, .svcx__list2, .wcard__cats, .voices__count, .site-footer__nav a, .pill__links a, .pill__cta,
.beat__agency-h, .day__col-h, .art-mail__from, .work-card__cats, .next-case__label, .filters__btn {
  font-family: trade-gothic-next, sans-serif; font-weight: 400; letter-spacing: 0.12em; }
.t-label, .svcx__n, .wcard__cats, .voices__count { font-size: 0.75rem; }
.nav-center__list .btn-animate-chars__text { font-weight: 400; letter-spacing: 0.1em; }
.hdd-link { font-family: trade-gothic-next, sans-serif; font-weight: 700; letter-spacing: 0.08em; font-size: 0.8125rem; }
.hdd-btn { font-weight: 700; letter-spacing: 0.02em; }

/* Grote koppen: een tikje lichter en iets kleiner */
.lk__caps { font-weight: 700; letter-spacing: -0.015em; }
.lk--xl .lk__caps { font-size: min(calc(var(--t-xl) * 0.86), 9vw, 11cqi); }
.lk--l .lk__caps { font-size: min(calc(var(--t-sec) * 0.88), 7.8vw, 8.8cqi); }
.lk--giant .lk__caps { font-size: calc(var(--t-giant) * 0.88); }
.svcx__name { font-weight: 700; -webkit-text-stroke-width: 1px; }
.svcx__name::after { -webkit-text-stroke-width: 1px; }

/* Tweede niveau: redactioneel in plaats van schreeuwend */
.model { font-family: trade-gothic-next, sans-serif; font-weight: 400; text-transform: none; font-size: min(clamp(1.75rem, 1rem + 2.6vw, 3.75rem), 7svh); line-height: 1.15; letter-spacing: -0.02em; gap: 0.15em; }
.model__line em { font-size: 1.3em; margin-left: 0.05em; }
.wcard__title { font-family: trade-gothic-next, sans-serif; font-weight: 400; text-transform: none; font-size: min(clamp(1.75rem, 1rem + 2.2vw, 3.25rem), 7svh); line-height: 1.08; letter-spacing: -0.025em; max-width: 24ch; }
.wcard__n { font-family: trade-gothic-next, sans-serif; font-weight: 400; font-size: 1rem; letter-spacing: 0.04em; }
.wcard__n span { font-size: 0.75em; vertical-align: 0; }
.wcard__client { font-size: calc(var(--t-m) * 0.95); }
.voice__short p { font-family: trade-gothic-next, sans-serif; font-weight: 400; font-size: min(clamp(1.9rem, 1rem + 2.8vw, 4rem), 8svh); line-height: 1.12; letter-spacing: -0.025em; max-width: 26ch; }
.voice__name { font-weight: 700; }
.foot__name { font-weight: 700; letter-spacing: 0.08em; font-size: 0.875rem; }
.foot__big { font-weight: 400; }
.svcx__text { font-size: var(--t-lead); }

/* Procesblok: titels en bureaukolom in regular */
.beat__title, .day.is-pinned .beat__title { font-family: trade-gothic-next, sans-serif; font-weight: 400; text-transform: none; letter-spacing: -0.015em; font-size: min(var(--t-m), 4.4svh); line-height: 1.15; }
.day.is-pinned .beat__agency-t, .beat__agency-t { font-family: trade-gothic-next, sans-serif; font-weight: 400; font-size: min(calc(var(--t-m) * 0.85), 3.8svh); line-height: 1.3; color: var(--muted); }
.day.is-pinned .art-mail__text { font-family: trade-gothic-next, sans-serif; font-weight: 400; text-transform: none; letter-spacing: -0.02em; line-height: 1.2; max-width: 24ch; }
.day__time, .beat__time { font-family: trade-gothic-next, sans-serif; font-weight: 400; letter-spacing: -0.04em; }
.art-ai__row { font-weight: 400; }
.art-ai__stamp { font-weight: 700; }

/* Lijnen fijner */
.voices__head, .wcard__head, .foot__grid { border-color: color-mix(in srgb, currentColor 12%, transparent); }

/* ==========================================================
   Ronde 5: terug naar de merkletter. Tweede niveau in TGN Soft Round
   regular (400): dezelfde afgeronde vorm als de koppen, maar licht.
   Trade Gothic enkel voor lopende tekst en kleine labels.
   ========================================================== */
.model, .wcard__title, .beat__title, .day.is-pinned .beat__title, .voice__short p,
.day.is-pinned .art-mail__text, .day__time, .beat__time, .wcard__n, .day.is-pinned .beat__agency-t, .beat__agency-t {
  font-family: var(--_typography---font--font-title); font-weight: 400; }
.model, .wcard__title, .beat__title, .day.is-pinned .beat__title, .day.is-pinned .art-mail__text { text-transform: uppercase; letter-spacing: -0.005em; }
.wcard__title { line-height: 1.02; }
.voice__short p { letter-spacing: -0.015em; line-height: 1.12; }
.day.is-pinned .beat__agency-t, .beat__agency-t { line-height: 1.25; }

/* Script volgt de (kleinere) kapitalen weer: ongeveer kaphoogte, overlapt de onderste regel een kwart */
.lk--xl .lk__script { font-size: calc(min(calc(var(--t-xl) * 0.86), 9vw) * 0.78); margin: -0.36em 0 0 1.4em; }
.lk--l .lk__script { font-size: calc(min(calc(var(--t-sec) * 0.88), 7.8vw) * 0.9); margin: -0.4em 0 0 1.1em; }
.lk--giant .lk__script { font-size: min(calc(var(--t-giant) * 0.3), 7vw); margin: -0.5em 0 0 1.3em; }

/* Overal dezelfde 3D-kat: de oude frames verschijnen alleen nog als 3D niet kan (dan valt .cat-3d weg) */
html.cat-3d .site-footer__cat canvas[data-cat-look], html.cat-3d .art-ai__cat canvas[data-day-cat], html.cat-3d .dive.is-3d .dive__cat, html.cat-3d .dive__cat { visibility: hidden; }
html.cat-3d .art-ai__cat .cat3d { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
.art-ai__cat { position: relative; }

/* Uitsparing rond de script dikker: de script moet echt los komen van de kapitalen */
.lk__script { -webkit-text-stroke-width: 0.32em; }

/* ==========================================================
   Ronde 6: lockups netjes. De script hangt ónder de kapitalen en raakt ze
   enkel met zijn uithalen; de dikke uitsparing (sticker-rand) scheidt ze.
   ========================================================== */
.lk__script { -webkit-text-stroke-width: 0.3em; }
.lk--xl .lk__script { margin: -0.16em 0 0 1.2em; }
.lk--l .lk__script { margin: -0.2em 0 0 1em; }
.lk--giant .lk__script { margin: -0.18em 0 0 1.1em; }
.lk--m .lk__script { margin: -0.1em 0 0 1.4em; }
.lk--s .lk__script { margin: 0 0 0 0.3em; }
/* knoppen overal even zwaar */
.nav-end .btn-animate-chars__text, .pill__cta, .hdd-btn { font-weight: 700; letter-spacing: 0.04em; }

/* Paginaovergang (eigen versie): zwart doek */
.curtain { position: fixed; inset: 0; z-index: 2000; background: var(--ink); pointer-events: none; visibility: hidden; }
html.curtain-in::after { content: ""; position: fixed; inset: 0; z-index: 2001; background: var(--ink); }
/* Koppen die regel per regel binnenkomen: verborgen tot de fonts er zijn en ze gesplitst zijn (geen flits) */
.hdd-anim [data-reveal="caps"], .hdd-anim [data-reveal="lines"], .hdd-anim [data-fase-caps] { visibility: hidden; }
.hdd-anim [data-reveal="script"] { clip-path: inset(-40% 100% -40% -10%); }

/* ==========================================================
   Ronde 7: bugs uit een echte scroll met het muiswiel
   ========================================================== */
/* 1. Hover op een dienst: geen letterspatiëring meer (die liet omlijning en vulling uit elkaar lopen) */
.svcx__name, .svcx__link:hover .svcx__name { letter-spacing: -0.03em; transition: transform 0.7s var(--ease-out); }
.svcx__link:hover .svcx__name { transform: translateX(0.12em); }
.svcx__item.is-right .svcx__link:hover .svcx__name { transform: translateX(-0.12em); }
/* 3. Script hangt volledig onder de kapitalen: geen happen meer uit de letters */
.lk--xl .lk__script, .lk--l .lk__script, .lk--giant .lk__script { margin-top: 0.02em; }
.lk--m .lk__script { margin-top: 0.04em; }

/* ==========================================================
   Ronde 8: gewicht één stap omhoog.
   Tweede niveau: TGN Soft Round 700. Lopende tekst: Trade Gothic 400 met een
   haarfijne omlijning (= medium; de kit heeft enkel 400 en 700).
   ========================================================== */
.model, .wcard__title, .beat__title, .day.is-pinned .beat__title, .voice__short p,
.day.is-pinned .art-mail__text, .day.is-pinned .beat__agency-t, .beat__agency-t { font-weight: 700; }
body { -webkit-text-stroke: 0.02em currentColor; }
/* niet op koppen, knoppen, labels en script (die hebben hun eigen gewicht of omlijning) */
.lk__caps, .model, .wcard__title, .beat__title, .voice__short p, .day.is-pinned .art-mail__text, .beat__agency-t,
.hdd-btn, .btn-animate-chars, .pill, .t-label, .wcard__cats, .wcard__n, .svcx__n, .svcx__list2, .voices__count,
.site-footer__nav, .hdd-link, .day__time, .beat__time, .wcard__client, .model__line em, .beat__role, .day__role,
h1, h2, h3, .hero-content__wrapper, .about-hi { -webkit-text-stroke-width: 0; }
/* WERK: reuzenkop heeft een krappe regelhoogte, script iets lager zodat hij de letters niet raakt */
.lk--giant .lk__script { margin-top: 0.22em; }
.lk--m .lk__script { margin-top: 0.14em; }
/* Over-blok: lucht tussen tekst en link, tekst blijft van de foto's weg */
.section_about .about-copy { max-width: 30rem; margin-bottom: 1.75rem; }

/* ==========================================================
   Ronde 9: subpagina's in hetzelfde systeem als de home.
   Koppen TGN Soft Round 700 (nooit meer 800 buiten het logo),
   labels Trade Gothic regular gespatieerd, lopende tekst Trade Gothic in inkt.
   ========================================================== */
.hdd-caps, .caps3, .hero__h1, .recog__item, .case-card__title, .objections dt, .svc-row__name, .work-row__title,
.quote__text, .case-block__h, .case-approach dt, .next-case__title, .svc-hero__name, .pains__item, .rows dt,
.steps3__item h3, .steps__name, .other-svc__h, .principles__t, .story__h, .about-photos__h, .person__name, .form__h,
.month__wk, .steps__n, .steps3__item::before { font-weight: 700; }
/* labels en kleine meta: regular, ruim gespatieerd */
.case-meta dt, .work-row__cats, .case-hero__cats, .steps__time, .not-included span, .chip span, .field label,
.contact__what li::before, .back-link, .art-mail__from, .art-design__nav, .beat__people {
  font-family: trade-gothic-next, sans-serif; font-weight: 400; letter-spacing: 0.12em; -webkit-text-stroke-width: 0; }
.case-meta dt, .work-row__cats, .case-hero__cats, .steps__time { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; }
.back-link { font-size: 0.75rem; text-transform: uppercase; }
/* lopende tekst die in 800 grijs stond: Trade Gothic, inkt, ruime regel */
.case-block__lead, .statement__text, .work-row__line, .case-meta dd, .case-approach dd, .rows dd, .steps__text, .principles__item p,
.story__body, .page-hero__intro, .svc-hero__intro, .head__text, .about-hero__intro, .about-photos__p {
  font-family: trade-gothic-next, sans-serif; font-weight: 400; color: var(--_theme---text-color--text-primary); }
.case-block__lead { font-size: min(clamp(1.25rem, 1rem + 0.9vw, 1.75rem), 4svh); line-height: 1.45; letter-spacing: -0.005em; max-width: 38ch; }
.work-row__line { font-size: var(--t-body); }
.case-meta dd { font-size: var(--t-body); }
.contact-line { font-weight: 400; }
/* Laatste 600-gewichten (die renderden als vet 700) naar de lopende-tekststijl */
.recog__turn, .beat__me, .art-mail__text, .case-card__quote, .month__card p:last-child, .next-case__line, .story__body p,
.field label span, .field__err, .form.is-sent .form__note, .work-card__quote { font-weight: 400; }
.contact__what li::before { font-family: trade-gothic-next, sans-serif; font-weight: 400; color: var(--muted); }

/* ==========================================================
   Ronde 10: typografische layout van tekstblokken.
   Bronnen: Butterick (Practical Typography), Bringhurst, Every Layout,
   Utopia, Chrome text-wrap. Vaste rollen, maten en ritme:
   - body   1.0625rem / 1.55, maat 62ch
   - lead   clamp(1.25 → 1.625rem) / 1.4, maat 34ch, inkt (niet grijs)
   - label  0.75rem, +0.12em, 0.875rem boven zijn kop
   - kop → lead 1.5rem, lead → body 1.5rem, p + p 1em, body → knop 2.25rem
   - definitierijen: label | tekst, op de eerste basislijn
   ========================================================== */
:root {
  --measure: 62ch;
  --measure-lead: 34ch;
  --t-leadx: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  --space-s: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --space-l: clamp(2.5rem, 2rem + 2vw, 4rem);
  --space-xl: clamp(4rem, 3rem + 5vw, 8rem);
  --sec-muted: #5f5f5f;
}
.u-theme-dark { --sec-muted: color-mix(in srgb, var(--paper) 68%, transparent); }

/* Afbreking en regelval: koppen gebalanceerd, alinea's 'pretty', Nederlands afbreken in lopende tekst */
h1, h2, h3, .lk__caps, .t-lead, .page-hero__intro, .svc-hero__intro, .about-hero__intro, .case-block__lead, .head__text { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
p, dd, li { hyphens: auto; hyphenate-limit-chars: 8 4 4; }
h1, h2, h3, .lk *, .t-lead, .t-label, .hdd-link, .hdd-btn, [class*="__intro"], .case-block__lead { hyphens: manual; }

/* Lead-rol: elke intro onder een grote kop */
.page-hero__intro, .svc-hero__intro, .about-hero__intro, .case-block__lead, .head__text, .scrub-read, .not-included {
  font-family: trade-gothic-next, sans-serif; font-size: var(--t-leadx); font-weight: 400; line-height: 1.4; letter-spacing: -0.005em;
  max-width: var(--measure-lead); color: var(--_theme---text-color--text-primary); }
.page-hero__intro, .about-hero__intro { margin-top: var(--space-m); }
.svc-hero__row { margin-top: var(--space-m); align-items: end; }
.svc-hero__intro { max-width: var(--measure-lead); }
.head__text { justify-self: start; }

/* Body-rol */
.story__body p, .principles__item p, .steps__text, .steps3__item p, .rows dd, .objections dd, .case-approach dd, .about-photos__p, .month__card p:last-child {
  font-size: 1.0625rem; line-height: 1.55; max-width: var(--measure); }
.story__body { gap: 1em; }
.story__body p { font-size: 1.1875rem; }
.steps__text, .steps3__item p { color: var(--sec-muted); }

/* Labels (eyebrows) dicht bij wat ze benoemen */
.case-block__h, .svc-hero__name, .other-svc__h, .not-included span { margin-bottom: 0.875rem; font-family: trade-gothic-next, sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.12em; color: var(--sec-muted); -webkit-text-stroke-width: 0; }

/* Case: meta links als hangende labels, verhaal rechts op 5–12 */
.case-body { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 8fr); }
.case-meta { grid-column: 1; }
.case-story { grid-column: 3; gap: var(--space-l); }
.case-meta dl { gap: var(--space-s); }
.case-meta dd { margin-top: 0.25rem; line-height: 1.45; }

/* Definitierijen (aanpak, wat je krijgt, bezwaren): label | tekst op de eerste basislijn */
.case-approach__row, .rows__row, .objections__row { grid-template-columns: minmax(10rem, 4fr) minmax(0, 8fr); align-items: baseline; padding-block: 1.375rem; border-color: color-mix(in srgb, currentColor 15%, transparent); }
.case-approach dt, .rows dt { font-family: var(--_typography---font--font-title); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; text-transform: uppercase; }
.objections dt { font-size: min(var(--t-m), 1.5rem); line-height: 1.2; text-transform: none; letter-spacing: -0.01em; }

/* Stappen: nummer klein en tabulair boven de titel, alles op dezelfde lijn als de regel erboven */
.steps3__item, .steps__item { padding: 1.25rem 0 0; border-top-width: 1px; }
.steps3__item::before, .steps__n { font-family: trade-gothic-next, sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--sec-muted); -webkit-text-stroke-width: 0; }
.steps3__item h3, .steps__name { margin: 0.75rem 0 0.5rem; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); line-height: 1.15; }

/* Principes: titel + tekst, rustige kolommen */
.principles__t { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); margin-bottom: 0.5rem; }

/* Diensten-overzicht: afsluitende alinea op lead-maat, niet over de hele breedte */
.scrub-read { max-width: 30ch; font-size: min(clamp(1.5rem, 1rem + 1.6vw, 2.25rem), 5svh); line-height: 1.3; }
.svc-row__short { font-size: 1.0625rem; color: var(--sec-muted); }

/* Over: kop links 1–4, tekst 6–12 */
.story__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 7fr); }
.story__body { grid-column: 3; }

/* Contact: lijst en formulier */
.contact__what li { font-size: var(--t-leadx); line-height: 1.4; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; }
.contact__what li strong { font-weight: 700; }

/* Home: tekstblokken op dezelfde maten */
.day__lede { font-size: var(--t-leadx); line-height: 1.4; max-width: var(--measure-lead); }
.day__lede { margin-top: var(--space-m); color: var(--sec-muted); }
.voice__full { font-size: 1rem; line-height: 1.6; max-width: var(--measure); color: var(--sec-muted); }
.svcx__text { max-width: 28ch; line-height: 1.35; }
.about-copy { font-size: var(--t-leadx) !important; line-height: 1.4 !important; max-width: var(--measure-lead) !important; }

@media (max-width: 767px) {
  .case-body, .story__grid { grid-template-columns: minmax(0, 1fr); }
  .case-meta, .case-story, .story__body { grid-column: 1; }
  .case-meta { position: static; }
  .case-approach__row, .rows__row, .objections__row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}
/* Keuzechips in zinsletters: geen label-spatiëring */
.chip span { letter-spacing: 0.01em; font-size: 0.9375rem; }
.section_about .about-copy { margin-top: 1.25rem; }
/* Geen automatische afbreking: bij ragged-right overbodig en onrustig (QA ving 'verloren', 'gedocumenteerd') */
p, dd, li { hyphens: manual; }

/* ==========================================================
   Ronde 11: procesblok rustig. Per fase: links nummer, stap, titel en
   één zin; rechts één beeld. Geen bureaukolom, geen klok, geen balkjes.
   ========================================================== */
.day__head, .day__col-h, .beat__agency { display: none !important; }
.beat { display: grid; gap: var(--space-m); }
.beat__text { display: grid; gap: 0; align-content: center; }
.beat__meta { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1.25rem; }
.beat__time { font-family: var(--_typography---font--font-title); font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.beat__of { font-family: trade-gothic-next, sans-serif; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--sec-muted); -webkit-text-stroke-width: 0; }
.beat__role { margin-left: 0.4rem; font-family: Thistails, "Times New Roman", serif; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1; }
.beat__title, .day.is-pinned .beat__title { margin: 0; font-family: var(--_typography---font--font-title); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; max-width: 14ch; }
.beat__note { margin-top: 1.25rem; max-width: 30ch; font-size: var(--t-leadx); line-height: 1.4; color: var(--sec-muted); }

/* Vastgepind (desktop): tekst 1–4, beeld 6–12, beide verticaal gecentreerd */
.day.is-pinned .day__grid { display: block; height: calc(100svh - var(--nav-h)); margin-top: var(--nav-h); padding-bottom: 0; }
.day.is-pinned .beats { position: relative; height: 100%; }
.day.is-pinned .beat { position: absolute; inset: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: var(--col-gap); align-items: center; padding-block: clamp(1.5rem, 5svh, 3.5rem) clamp(5rem, 12svh, 7rem); }
.day.is-pinned .beat__text { grid-column: 1 / span 4; }
.day.is-pinned .beat__meta { display: flex; }
.day.is-pinned .beat__main { grid-column: 6 / -1; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr); gap: 0; }
.day.is-pinned .beat__body { align-self: center; height: min(100%, 34rem); container-type: size; overflow: visible; }
.day.is-pinned .art { max-height: 100cqh; }
.day.is-pinned .art-mail, .day.is-pinned .art-ai, .day.is-pinned .art-code { height: 100cqh; }
.day.is-pinned .art-mail__text { font-size: min(clamp(1.5rem, 1rem + 1.6vw, 2.5rem), 7cqh); }
.day.is-pinned .day__track { height: calc(var(--beats, 5) * 60svh + 100svh); }
.beat__title, .day.is-pinned .beat__title { max-width: 16ch; text-wrap: balance; }


}

/* ---------- Over: "Buiten het werk" -------------------------------------
   Vervangt de absoluut gepositioneerde sjabloonfoto's. Drie formaten, drie
   crops, één raster. De tekst staat in de compositie en niet in het midden
   van een leeg vlak.                                                       */
.buiten { padding-block: clamp(4rem, 9vw, 9rem); }
.buiten__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}
.buiten__copy { grid-column: 1 / span 4; align-self: center; }
.buiten__h { font-family: var(--_typography---font--font-title) !important; font-size: var(--t-h2) !important; font-weight: 800; text-transform: uppercase; }
.buiten__p { margin-top: 1.25rem; max-width: 34ch; font-size: var(--t-lead); line-height: 1.5; }

.buiten__f { margin: 0; overflow: hidden; border-radius: 1rem; }
.buiten__f img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* De verhoudingen staan vast zodat het raster niet door de beeldhoogtes
   gestuurd wordt; dat was precies wat de oude versie liet ontsporen. */
/* Twee beelden in een strakke diagonaal: het liggende rechtsboven, het
   staande eronder en naar links, met een overlap zodat ze één groep vormen in
   plaats van twee losse kaders met een gat ertussen. */
.buiten__f--wide { grid-column: 6 / span 7; aspect-ratio: 4 / 3; }
.buiten__f--tall { grid-column: 3 / span 4; aspect-ratio: 3 / 4; margin-top: clamp(-7rem, -6vw, -2rem); z-index: 2; }

@media (max-width: 767px) {
  .buiten__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buiten__copy { grid-column: 1 / -1; }
  .buiten__f--wide { grid-column: 1 / -1; }
  .buiten__f--tall { grid-column: 1 / -1; margin-top: 0; aspect-ratio: 4 / 3; }
}

/* ---------- Over: "Waarom één persoon?" --------------------------------
   De kop stond links in een kolom die verder leeg bleef: bijna de halve
   breedte dode ruimte naast drie alinea's. Hij blijft nu plakken terwijl de
   tekst eronder doorloopt, zodat de vraag in beeld blijft bij het antwoord
   en de kolom werk doet.                                                   */
@media (min-width: 992px) {
  .story__h { position: sticky; top: clamp(5rem, 12vh, 9rem); }
}

/* ---------- Over: hero ---------------------------------------------------
   Het portret draagt de helft van het beeld in plaats van een kadertje rechts
   te zijn, en de feiten staan los onder de claim. In de vorige versie zaten
   "sinds 2023" en "zeventien klanten" in een alinea van vier regels, waar
   niemand ze leest.                                                          */
/* De nav is vast gepositioneerd, dus de hero moet er onderlangs beginnen; de
   scriptregel stak anders onder de navigatie door en werd afgesneden. */
.ab-hero { padding-block: calc(var(--nav-h) + clamp(3rem, 8svh, 6rem)) clamp(3rem, 7vw, 6rem); }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem) var(--col-gap); align-items: end; }
.ab-hero__h { margin: 0; }
.ab-hero__lead { margin: 1.75rem 0 0; max-width: 34ch; font-size: var(--t-lead); line-height: 1.45; }
.ab-hero__media { margin: 0; overflow: hidden; border-radius: 1.25rem; aspect-ratio: 5 / 4; }
.ab-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ab-facts { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.ab-facts__i { display: grid; gap: 0.3rem; }
.ab-facts dt { font-size: var(--t-small); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ab-facts dd { margin: 0; font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1; text-transform: uppercase; }

/* ---------- Over: waarom één persoon ------------------------------------
   Drie genummerde redenen met een beeld ernaast, in plaats van drie alinea's
   lopende tekst naast een kop in een lege kolom.                            */
.ab-why__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 4rem) var(--col-gap); align-items: start; }
.ab-why__h { margin: 0 0 clamp(2rem, 4vw, 3rem); font-family: var(--_typography---font--font-title); font-size: var(--t-h2); font-weight: 800; line-height: 1; text-transform: uppercase; }
.ab-why__list { margin: 0; padding: 0; list-style: none; display: grid; }
.ab-why__i { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.4rem var(--col-gap); padding: clamp(1.5rem, 3vw, 2rem) 0; border-top: 1px solid var(--line); }
.ab-why__i:last-child { border-bottom: 1px solid var(--line); }
.ab-why__n { grid-row: span 2; margin: 0; font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.1; color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-why__t { margin: 0; font-family: var(--_typography---font--font-title); font-size: var(--t-h3); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.ab-why__d { margin: 0.5rem 0 0; max-width: 56ch; font-size: var(--t-body); line-height: 1.55; color: var(--muted); }
.ab-why__media { margin: 0; overflow: hidden; border-radius: 1.25rem; aspect-ratio: 4 / 5; position: sticky; top: clamp(5rem, 12vh, 9rem); }
.ab-why__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) {
  .ab-hero__grid, .ab-why__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-why__media { position: static; aspect-ratio: 16 / 10; }
  .ab-why__i { grid-template-columns: 2.5rem minmax(0, 1fr); }
}