/* ═══════════════════════════════════════════════
   SIRCLE V2 · designtokens & fundament
   Eén easing, één tokenpaar, één motief: de cirkel
   ═══════════════════════════════════════════════ */

:root {
  /* Kleur-DNA (uit het brand book) */
  --green-deep:  #06140A;
  --green-dark:  #0C180F;
  --cream:       #F3EFE8;
  --warm-white:  #FFF8EE;
  --gold:        #F2E2A4;
  --copper:      #B89A5A;

  /* Motion: één curve, drie snelheden */
  --ease:      cubic-bezier(0.625, 0.05, 0, 1);
  --dur-fast:  0.3s;
  --dur:       0.7s;
  --dur-slow:  1.1s;

  /* Typeschaal: vijf stappen, vloeiend */
  --t-display: clamp(3rem, 9vw, 8rem);
  --t-title:   clamp(2rem, 5vw, 4.25rem);
  --t-large:   clamp(1.25rem, 2vw, 1.625rem);
  --t-body:    clamp(1rem, 1.2vw, 1.125rem);
  --t-label:   0.8125rem;

  --font-sans:  'Kulim Park', sans-serif;
  --font-serif: 'Instrument Serif', serif;

  --container: min(94vw, 1780px);

  /* Aliassen voor overgenomen maatwerkblokken (employer branding,
     download-formulier). Die stukken komen uit het oude stijlbestand
     en verwijzen naar variabelen die daar stonden. */
  --dark-green: #0C180F;
  --mid-green:  #B89A5A;
  --soft-green: rgba(243, 239, 232, 0.72);
  --white:      #F3EFE8;
  --space-md:   clamp(2rem, 4vw, 3rem);
  --space-lg:   clamp(3rem, 6vw, 5rem);
  --space-xl:   clamp(4.5rem, 9vw, 8rem);
  --container-smal: min(94vw, 1180px);
  --radius: 1.25rem;

  /* Verticale ruimte: royaal en vloeiend van mobiel tot 27 inch.
     Opgehoogd (aug 2026) omdat secties meer moesten ademen. */
  --section-y: clamp(7.5rem, 13vw, 16rem);
  /* Ruimte tussen een sectiekop en wat eronder staat */
  --head-gap: clamp(3rem, 5.5vw, 5.5rem);

  /* Filmkorrel: één gedeelde textuur, als data-URI zodat er geen
     extra request voor nodig is. Sterkte per thema verschillend,
     want korrel valt op cream harder op dan op het diepe groen. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* Het tokenpaar dat per sectie omklapt */
[data-theme="dark"] {
  --bg: var(--green-dark);
  --fg: var(--cream);
  --accent: var(--gold);
  --deco: var(--gold);
  --line: rgba(243, 239, 232, 0.16);
  --noise-opacity: 0.055;
}
[data-theme="light"] {
  --bg: var(--cream);
  --fg: var(--green-dark);
  /* Tekstaccenten op licht = het merkgroen. Koper haalt maar 2,35:1
     op cream en is dus onleesbaar; een donkerder brons zou wél
     leesbaar zijn maar zit niet in de huisstijl. Het cursieve serif
     zorgt al voor het accent, de kleur hoeft dat niet te doen. */
  --accent: var(--green-dark);
  /* koper blijft voor decoratie: cirkels, stippen, lijnen */
  --deco: var(--copper);
  --line: rgba(12, 24, 15, 0.14);
  --noise-opacity: 0.032;
}

/* ── Reset & basis ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  background: var(--green-dark);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

section, header, article, .footer {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  transition: background var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}

/* ── Filmkorrel ────────────────────────────────
   Ligt over de achtergrond en gradient, onder de inhoud. Houdt de
   grote egale vlakken levend zonder dat je er bewust iets ziet.
   Alleen op secties met een eigen achtergrond, niet op alles, anders
   stapelt het op waar secties elkaar overlappen. */
section::after,
header::after,
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--noise);
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: var(--noise-opacity, 0.04);
  /* Geen mix-blend-mode meer: 'overlay' dwong browsers tot een aparte
     blendgroep per sectie en dat verdubbelde de frametijd bij scrollen
     (gemeten in Chromium; Safari lijdt hier het meest onder). Visueel
     is het verschil met een gewone korrel op deze opacity niet te zien. */
}
/* Secties met eigen canvas/video hebben de korrel niet nodig en
   krijgen 'm niet, anders vecht het met bewegend beeld. */
.hero::after,
.cta::after { content: none; }
/* Het afsluitblok heeft dus géén korrel en de footer wél. Op de naad
   tussen die twee gaf dat een zichtbare streep, ook al is de kleur
   aan beide kanten gelijk. De korrel van de footer komt daarom pas
   onder de naad op sterkte. */
.f2::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12rem);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12rem);
}

/* ── Paginaovergang en vloeiend scrollen ──
   Lenis zet zelf .lenis op <html>; native smooth scroll moet dan uit,
   anders vechten de twee om dezelfde scrollpositie. */
html.lenis, html.lenis body { scroll-behavior: auto; }
#swup { transition: opacity 0.32s var(--ease); }
html.is-changing #swup { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #swup { transition: none; }
  html.is-changing #swup { opacity: 1; }
}

.container { width: var(--container); margin-inline: auto; }
.section { padding-block: var(--section-y); }

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Reveal-systeem ────────────────────────────────
   Inhoud is standaard ZICHTBAAR. Alleen als het script
   draait wordt hij verborgen om daarna in te faden. Zo
   levert een falende waarnemer nooit een lege pagina. */
.reveal {
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js .reveal {
  opacity: 0;
  transform: translateY(2.5rem);
}
html.js .in .reveal,
html.js .reveal.in { opacity: 1; transform: none; }

/* ═══ NAV CAPSULE ═══════════════════════════════ */
.nav {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.6rem 0.6rem 0.6rem 1.4rem;
  border-radius: 999px;
  background: rgba(6, 13, 8, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(243, 239, 232, 0.1);
  color: var(--cream);
  transition: transform var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
.nav--hidden { transform: translateX(-50%) translateY(-140%); }
.nav__logo-img { height: 1.15rem; width: auto; }
.nav__links { display: flex; gap: 1.5rem; }
.nav__links a {
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__cta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--cream);
  color: var(--green-dark);
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__cta:hover { transform: scale(1.05); }
.nav__cta-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--copper);
}
/* binnen kantoortijd pulseert de stip: het bureau is open */
.nav--open .nav__cta-dot { background: var(--gold); animation: nav-puls 2.4s var(--ease) infinite; }
@keyframes nav-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 226, 164, 0.55); }
  60% { box-shadow: 0 0 0 0.45rem rgba(242, 226, 164, 0); }
}
@media (prefers-reduced-motion: reduce) { .nav--open .nav__cta-dot { animation: none; } }

/* ═══ HERO ══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  will-change: transform;
}
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(6, 13, 8, 0.55) 0%,
      rgba(6, 13, 8, 0.15) 40%,
      rgba(6, 13, 8, 0.78) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  width: var(--container);
  margin-inline: auto;
  padding-block: 9rem 3.5rem;
}
.hero__label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.pulse-dot {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 226, 164, 0.5); }
  50%      { box-shadow: 0 0 0 9px rgba(242, 226, 164, 0); }
}
.hero__title {
  font-size: var(--t-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.hero__line { display: block; overflow: hidden; }
.hero__line > span {
  display: inline-block;
  transform: none;
  transition: transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
html.js .hero__line > span { transform: translateY(110%); }
html.js .in .hero__line > span { transform: none; }
.hero__line--serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 0.92em;
  color: var(--gold);
  overflow: visible;
}
.circled { position: relative; display: inline-block; padding-inline: 0.1em; }
.circled__svg {
  position: absolute;
  inset: -12% -6%;
  width: 112%;
  height: 124%;
  overflow: visible;
  pointer-events: none;
}
.circled__svg ellipse {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 640;
  stroke-dashoffset: 0;
  transform: rotate(-2deg);
  transform-origin: center;
  transition: stroke-dashoffset 1.4s var(--ease) 0.9s;
}
html.js .in .circled__svg ellipse { stroke-dashoffset: 0; }
.hero__sub {
  margin-top: 2rem;
  font-size: var(--t-large);
  line-height: 1.45;
  max-width: min(38rem, 42vw);
  opacity: 0.9;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}
.hero__cta .btn { margin-top: 0; }
/* Social proof onderin de hero: rechts tegenover de scroll-cirkel, zodat het
   ruimte houdt van de knoppen en dezelfde voetregel-logica volgt als de footer. */
.hero__proof {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: rgba(243, 239, 232, 0.68);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.hero__proof:hover { color: var(--cream); }
.hero__proof strong { font-weight: 600; color: var(--cream); }
.hero__sterren {
  color: var(--gold);
  font-size: 0.92em;
  letter-spacing: 0.14em;
}
.hero__foot {
  position: relative;
  z-index: 1;
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2.5rem;
}
.hero__foot-note {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.scroll-circle {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.scroll-circle svg { width: 1.15rem; height: 1.15rem; }
.scroll-circle:hover {
  background: var(--cream);
  color: var(--green-dark);
  transform: scale(1.08);
}

/* ═══ SECTIE-KOP ════════════════════════════════ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  opacity: 0.85;
}
.eyebrow__circle {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--deco);
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  /* Eén token voor de ruimte onder elke sectiekop. Stond eerder op
     38 plekken met een inline style krapper gezet; die overrides zijn
     weg zodat het ritme door de hele site gelijk loopt. */
  margin-bottom: var(--head-gap);
}
.section-head .eyebrow { width: 100%; margin-bottom: 0; }
.section-title {
  font-size: var(--t-title);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
}
.section-title .serif { font-size: 1.04em; color: var(--accent); }
.section-head__link {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 0.3rem;
  transition: opacity var(--dur-fast) var(--ease);
}
.section-head__link:hover { opacity: 0.6; }

/* ═══ WERK ══════════════════════════════════════ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3.5vw, 4.5rem);
}
.work-card--offset { margin-top: clamp(2rem, 5vw, 4.5rem); }
.work-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
}
.work-card__media video,
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform var(--dur-slow) var(--ease);
}
.work-card:hover .work-card__media video,
.work-card:hover .work-card__media img { transform: scale(1.06); }
.work-card__badge {
  position: absolute;
  right: 1.25rem; bottom: 1.25rem;
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--cream);
  color: var(--green-dark);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.work-card__badge svg { width: 1.1rem; height: 1.1rem; }
.work-card:hover .work-card__badge { transform: scale(1); }
.work-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.15rem;
}
.work-card__meta h3 {
  font-size: var(--t-large);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.work-card__meta p { font-size: var(--t-label); opacity: 0.65; }

/* ═══ STATEMENT + MARQUEE ═══════════════════════ */
.statement { padding-bottom: 0; overflow: hidden; }
.statement__title {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.18;
  text-transform: none;
  max-width: 68rem;
}
.statement__title .serif { color: var(--gold); font-size: 1.06em; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 3rem;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 0.55rem 0.55rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color var(--dur-fast) var(--ease);
}
.btn:hover { border-color: var(--gold); }
.btn__circle {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--green-dark);
  transition: transform var(--dur-fast) var(--ease);
}
.btn__circle svg { width: 1rem; height: 1rem; }
.btn:hover .btn__circle { transform: rotate(45deg); }

.marquee {
  margin-top: clamp(5rem, 9vw, 8rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 1.6rem;
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  animation: marquee 40s linear infinite;
}
.marquee__half {
  display: inline-flex;
  align-items: center;
  gap: 2.75rem;
  padding-right: 2.75rem;
}
.marquee__half span {
  font-size: var(--t-large);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.marquee__half i {
  width: 0.8rem; height: 0.8rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  flex: none;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ═══ FOOTER ════════════════════════════════════ */
.footer {
  background: var(--green-deep);
  padding-top: clamp(4.5rem, 8vw, 7rem);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 4rem;
}
.footer__mark { width: 3.25rem; margin-bottom: 1.5rem; }
.footer__brand p {
  font-size: var(--t-large);
  line-height: 1.35;
  text-transform: uppercase;
  font-weight: 600;
}
.footer__brand .serif { color: var(--gold); text-transform: none; }
.footer__col { display: flex; flex-direction: column; gap: 0.8rem; }
.footer__col a {
  font-size: var(--t-body);
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease);
  width: fit-content;
}
.footer__col a:hover { opacity: 1; }
.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-block: 1.6rem;
  font-size: var(--t-label);
  opacity: 0.55;
}

.footer__base a {
  border-bottom: 1px solid rgba(243, 239, 232, 0.3);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease);
}
.footer__base a:hover { border-color: var(--gold); }

/* ═══ RESPONSIVE ════════════════════════════════ */
@media (max-width: 860px) {
  .nav { gap: 1rem; padding-left: 1.1rem; }
  .nav__links { display: none; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card--offset { margin-top: 0; }
  .footer__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer__base { flex-direction: column; }
}

/* ═══ REDUCED MOTION ════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero__line > span { opacity: 1; transform: none; transition: none; }
  .circled__svg ellipse { stroke-dashoffset: 0; transition: none; }
  .pulse-dot { animation: none; }
  .hero__media { transform: none !important; }
}

/* ═══ KLANTEN-MARQUEE ═══════════════════════════ */
.clients {
  background: var(--bg);
  color: var(--fg);
  padding-block: 2.4rem;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.clients__label {
  width: var(--container);
  margin-inline: auto;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1.5rem;
}
.clients__marquee {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.clients__track {
  display: inline-flex;
  align-items: center;
  gap: 3.25rem;
  padding-right: 3.25rem;
  animation: marquee 52s linear infinite;
}
.clients__track img {
  height: 2.1rem;
  width: 7.25rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  flex: none;
}

/* ═══ DIENSTEN ══════════════════════════════════ */
.services__list { display: flex; flex-direction: column; }
.service {
  display: grid;
  grid-template-columns: 4.5rem 1.2fr 1.6fr auto;
  align-items: center;
  gap: 2rem;
  padding-block: 1.9rem;
  border-top: 1px solid var(--line);
  transition: padding-left var(--dur-fast) var(--ease);
}
.service:last-child { border-bottom: 1px solid var(--line); }
.service:hover { padding-left: 0.9rem; }
.service__num, .service__icoon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  font-size: var(--t-label);
  letter-spacing: 0.05em;
  color: var(--deco);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.service__icoon svg { width: 1.35rem; height: 1.35rem; }
.service:hover .service__num,
.service:hover .service__icoon {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.service h3 {
  font-size: var(--t-large);
  font-weight: 600;
  text-transform: uppercase;
}
.service p { font-size: var(--t-body); opacity: 0.65; }
.service__arrow {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.service__arrow svg { width: 1.2rem; height: 1.2rem; }
.service:hover .service__arrow { opacity: 1; transform: none; }

/* ═══ WIE WE ZIJN ═══════════════════════════════ */
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.about__body {
  margin-top: 1.75rem;
  font-size: var(--t-large);
  line-height: 1.5;
  opacity: 0.88;
  max-width: 30rem;
}
.about__stats {
  list-style: none;
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.about__stats strong {
  display: block;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.about__stats span {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-label);
  letter-spacing: 0.05em;
  opacity: 0.65;
}
/* Ondertekening onder het verhaal: maakt het persoonlijk zonder de naam
   verderop op de site te herhalen. */
.about__signature {
  margin-top: 1.75rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.2;
  color: var(--accent);
}
.about__signature span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  color: var(--fg);
}
.about__photos { position: relative; }
.about__photo { border-radius: var(--radius); overflow: hidden; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__photo--main {
  aspect-ratio: 3 / 4;
  filter: grayscale(1);
}
.about__photo--small {
  position: absolute;
  left: -18%;
  bottom: -8%;
  width: 46%;
  aspect-ratio: 3 / 4;
  transform: rotate(-4deg);
  border: 4px solid var(--green-dark);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ═══ REVIEWS ═══════════════════════════════════ */
.reviews__badge {
  font-size: var(--t-body);
  letter-spacing: 0.04em;
  color: var(--accent);
}
.reviews__badge strong { color: var(--fg); }
/* ═══ REVIEW-SLIDER ═════════════════════════════
   Horizontale slider op scroll-snap: sleepbaar, met pijlen
   en een voortgangsspoor. Zonder JS is het gewoon een
   scrollbare rij, dus de reviews blijven altijd leesbaar. */
.reviews { position: relative; }
.reviews__slider {
  --kaart-gat: clamp(1rem, 1.8vw, 1.75rem);
  display: flex;
  gap: var(--kaart-gat);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* alleen verticaal lucht, zodat de schaduw niet wordt afgeknipt.
     Zijdelingse padding niet: die zet de snap-nulstand op 6px en dan
     staat de vorige-pijl nooit op uit. */
  padding-block: 0.5rem;
}
.reviews__slider::-webkit-scrollbar { display: none; }
.reviews__slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius); }
.reviews__slider.is-slepen { scroll-behavior: auto; cursor: grabbing; }
.reviews__slider.is-slepen .review { pointer-events: none; }
.reviews__slider > .review {
  /* precies drie naast elkaar: geen halve kaart die uit beeld piept,
     de pijlen schuiven per set van drie door */
  flex: 0 0 calc((100% - 2 * var(--kaart-gat)) / 3);
  scroll-snap-align: start;
}
.reviews__nav[hidden] { display: none; }
.reviews__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
.reviews__spoor {
  flex: 1;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.reviews__voortgang {
  display: block;
  height: 100%;
  width: 30%;
  background: var(--deco);
  border-radius: 2px;
  transform-origin: left;
  transition: width var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.reviews__knoppen { display: flex; gap: 0.6rem; flex: none; }
.reviews__knop {
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.reviews__knop svg { width: 1.15rem; height: 1.15rem; }
.reviews__knop:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.reviews__knop[disabled] { opacity: 0.3; pointer-events: none; }

/* ═══ REVIEW-KAART ══════════════════════════════
   Op een lichte sectie keert de kaart om naar het diepe groen:
   dat geeft het contrast dat een omlijnde kaart op cream mist. */
.review {
  --kaart-bg: var(--green-dark);
  --kaart-fg: var(--cream);
  --kaart-lijn: rgba(243, 239, 232, 0.16);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.6rem, 2.2vw, 2.15rem);
  border-radius: var(--radius);
  background: var(--kaart-bg);
  color: var(--kaart-fg);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(6, 20, 10, 0.08), 0 12px 28px -18px rgba(6, 20, 10, 0.5);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* op een donkere sectie zou groen-op-groen verdwijnen: daar een
   opgetild vlak met een zichtbare rand */
[data-theme="dark"] .review {
  --kaart-bg: rgba(243, 239, 232, 0.055);
  --kaart-lijn: rgba(243, 239, 232, 0.2);
  border-color: var(--kaart-lijn);
  box-shadow: none;
}
.review:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(6, 20, 10, 0.1), 0 22px 44px -22px rgba(6, 20, 10, 0.6); }
[data-theme="dark"] .review:hover { box-shadow: none; border-color: rgba(243, 239, 232, 0.34); }
.review__sterren {
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  line-height: 1;
}
.review p {
  font-size: clamp(1.02rem, 1.15vw, 1.14rem);
  line-height: 1.6;
  flex: 1;
}
.review footer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 1px solid var(--kaart-lijn);
  padding-top: 1.15rem;
  background: none;
}
.review footer strong { font-weight: 600; }
.review__circle {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  flex: none;
}

/* ═══ CTA MET DEELTJES-CIRKEL ═══════════════════ */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--green-deep);
}
.cta__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* De lichte gradient-afbeelding eindigde als harde streep tegen de footer.
   Laat 'm onder- en bovenaan oplossen in het diepgroen, dat de footer ook
   heeft; zo lopen afsluitblok en footer als één vlak in elkaar over.

   De uitfade moet ruim vóór de onderrand klaar zijn. De scroll-laag zet
   het beeld op scale 1.14 en laat het tot 6% driften, waardoor de
   onderkant tot ~14% van de sectiehoogte onder de rand zakt. De snijlijn
   van overflow:hidden valt dan rond 88% van het beeld; stond de fade op
   96%, dan werd een nog zichtbaar stuk recht afgesneden. Dat was de
   harde streep. Op 82% is hij altijd al weg. */
.cta .section-bg {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 46%, transparent 82%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 46%, transparent 82%);
}
/* de deeltjes zouden op dezelfde lijn worden afgekapt */
.cta__canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 60%, transparent 94%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 60%, transparent 94%);
}
.cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.cta__title {
  font-size: var(--t-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.cta__title .serif { color: var(--gold); text-transform: none; font-size: 0.95em; }
.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  margin-top: 3rem;
}
.btn--solid {
  background: var(--cream);
  color: var(--green-dark);
  border-color: var(--cream);
}
.btn--solid .btn__circle { background: var(--green-dark); color: var(--gold); }
.cta__mail {
  font-size: var(--t-body);
  opacity: 0.65;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
  transition: opacity var(--dur-fast) var(--ease);
}
.cta__mail:hover { opacity: 1; }
/* Twee secundaire acties naast elkaar onder de hoofdknop: boeken staat voorop,
   bellen blijft er direct naast. Op smal scherm breken ze netjes af. */
.cta__secundair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
}
.cta__of { opacity: 0.4; font-size: var(--t-body); }
.cta__mail--boek { opacity: 0.9; }

/* Contactpagina: agenda-link als eerste actie, boven mail en telefoon.
   Dit is de plek met de hoogste intentie, dus hier is boeken de hoofdknop. */
.ct-boek { margin-top: clamp(2rem, 4vw, 2.75rem); }
.ct-boek__noot {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.62;
}

/* ═══ RESPONSIVE (nieuwe secties) ═══════════════ */
@media (max-width: 1180px) and (min-width: 861px) {
  .reviews__slider > .review { flex-basis: calc((100% - var(--kaart-gat)) / 2); }
}

@media (max-width: 860px) {
  .service { grid-template-columns: 3.5rem 1fr auto; row-gap: 0.25rem; }
  .service p { grid-column: 2 / -1; font-size: var(--t-small, 0.9rem); }
  .about__grid { grid-template-columns: 1fr; }
  .about__photos { margin-top: 1rem; }
  .about__photo--small { left: auto; right: -4%; bottom: -10%; }
  /* op mobiel is er maar één kaart in beeld, dus gelijke hoogtes
     leveren alleen lege ruimte op onder de korte quotes */
  .reviews__slider { align-items: flex-start; }
  .reviews__slider > .review { flex-basis: 100%; }
  .reviews__nav { gap: 1.25rem; }
  .reviews__knop { width: 2.6rem; height: 2.6rem; }
  .clients__track { gap: 2.75rem; padding-right: 2.75rem; }
  .clients__track img { height: 1.35rem; }
}


/* ═══ GRADIENTS VAN DE DESIGNER + KORREL ════════ */
.section, .clients, .cta { position: relative; }
.section-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.section-bg--flip { transform: scaleX(-1); }
/* De scroll-laag schaalt achtergronden iets op om binnen die overmaat
   te kunnen driften. Zonder clipping steekt dat buiten de sectie uit.
   Scoped op secties die daadwerkelijk een achtergrond hebben, zodat
   overflow nergens anders stiekem wordt afgekapt.

   .statement--pin staat er bewust buiten: overflow op die sectie maakt
   'm een scroll-container en dan werkt de position:sticky erbinnen niet
   meer. Dat is hier eerder misgegaan, vandaar de expliciete uitzondering
   in plaats van vertrouwen op volgorde (deze selector is specifieker dan
   de losse .statement--pin-regel verderop en zou die anders overrulen). */
section:has(> .section-bg):not(.statement--pin),
header:has(> .section-bg) { overflow: hidden; }
.section > .container, .statement > .marquee, .cta > .cta__inner {
  position: relative;
  z-index: 1;
}
.cta__canvas { z-index: 1; }
.cta__inner { z-index: 2; }




/* ═══ GEPINDE STATEMENT ═════════════════════════ */
.statement--pin {
  height: 190vh;
  padding: 0;
  overflow: visible;   /* .statement zet overflow hidden en dat breekt sticky */
}
.statement__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  min-height: 100dvh;   /* volgt de adresbalk: geen lege strook onderaan */
  display: flex;
  flex-direction: column;
  z-index: 1;
  overflow: hidden;
}
.statement__sticky .container {
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 6rem;
}
.statement--pin .statement__title {
  font-size: clamp(2.4rem, 5.2vw, 5.6rem);
  max-width: min(80rem, 88vw);
}
.statement--pin .eyebrow { justify-content: center; }
.statement__sticky .marquee { margin-top: auto; }
.statement__title .w {
  opacity: 0.14;
  transition: opacity 0.4s var(--ease);
}
.statement__title .w.lit { opacity: 1; }

/* ═══ SIRCLE SOLUTIONS ══════════════════════════ */
.solutions__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.solutions__sub {
  margin-top: 1.75rem;
  font-size: var(--t-large);
  line-height: 1.5;
  opacity: 0.88;
  max-width: 30rem;
}
.solutions__proof {
  list-style: none;
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
}
.solutions__proof li {
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
}
.solutions__proof strong {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--t-body);
  letter-spacing: 0.03em;
}
.solutions__proof span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--t-body);
  opacity: 0.6;
}
.solutions .btn { margin-top: 2.25rem; }
.solutions__photo {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.solutions__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ JOURNAL ═══════════════════════════════════ */
.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 3rem);
}
.journal-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 248, 238, 0.35);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.journal-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.journal-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform var(--dur-slow) var(--ease);
}
.journal-card:hover .journal-card__img img { transform: scale(1.06); }
.journal-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: 1.75rem;
  flex: 1;
}
.journal-card:hover {
  transform: translateY(-0.35rem);
  box-shadow: 0 18px 44px rgba(12, 24, 15, 0.10);
}
.journal-card time {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}
.journal-card h3 {
  font-size: var(--t-large);
  font-weight: 600;
  line-height: 1.25;
  flex: 1;
}
.journal-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.journal-card__badge {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.journal-card__badge svg { width: 1rem; height: 1rem; }
.journal-card:hover .journal-card__badge {
  background: var(--fg);
  color: var(--bg);
  transform: rotate(45deg);
}

/* ═══ FAQ ═══════════════════════════════════════ */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.faq__sub { margin-top: 1.5rem; opacity: 0.75; line-height: 1.6; }
.faq__sub a { border-bottom: 1px solid var(--accent); color: var(--accent); }
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  padding-block: 1.4rem;
  font-size: var(--t-large);
  font-weight: 600;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus {
  position: relative;
  width: 2.4rem; height: 2.4rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
.faq__plus::before { width: 0.9rem; height: 1.5px; }
.faq__plus::after { width: 1.5px; height: 0.9rem; transition: transform var(--dur-fast) var(--ease); }
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__item p {
  padding-bottom: 1.6rem;
  max-width: 44rem;
  opacity: 0.8;
  line-height: 1.65;
}

@media (max-width: 860px) {
  .solutions__grid, .faq__grid { grid-template-columns: 1fr; }
  .journal__row { grid-template-columns: 1fr auto; }
  .journal__row time { grid-column: 1 / -1; }
}



/* ═══ FOOTER-SOCIALS ════════════════════════════ */
.footer__socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.footer__socials a {
  display: grid;
  place-items: center;
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer__socials svg { width: 1.05rem; height: 1.05rem; }
.footer__socials a:hover {
  background: var(--cream);
  color: var(--green-dark);
  transform: scale(1.08);
}
.footer__addr { font-size: var(--t-body); opacity: 0.45; }
.footer__col span:not(.footer__kop) { font-size: var(--t-body); }

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


/* ═══ REVIEWS + FAQ ALS ÉÉN GEHEEL ══════════════ */
.proof__faq {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.proof__faq-head h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}
.proof__faq-head h3 .serif { text-transform: none; color: var(--accent); }
.proof__faq-head p { margin-top: 1rem; opacity: 0.75; }
.proof__faq-head a { border-bottom: 1px solid var(--accent); color: var(--accent); }

/* CTA-subregel */
.cta__sub {
  margin-top: 1.75rem;
  font-size: var(--t-large);
  line-height: 1.5;
  opacity: 0.9;
}

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

/* ═══ PAGINA-HERO (subpagina's) ═════════════════ */
.page-hero {
  position: relative;
  padding: clamp(10rem, 18vh, 14rem) 0 clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__titel {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  max-width: 60rem;
}
.page-hero__titel .serif { text-transform: none; color: var(--gold); }
.page-hero__sub {
  margin-top: 1.75rem;
  font-size: var(--t-large);
  line-height: 1.5;
  max-width: 36rem;
  opacity: 0.88;
}
.page-hero .btn { margin-top: 2.25rem; }

/* ═══ MODEL-SECTIE ══════════════════════════════ */
.model__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.model__sub {
  margin-top: 1.75rem;
  font-size: var(--t-large);
  line-height: 1.5;
  opacity: 0.85;
  max-width: 30rem;
}
.model__nav { margin-top: 2.25rem; display: flex; flex-direction: column; }
.model__nav a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding-block: 0.95rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: padding-left var(--dur-fast) var(--ease);
}
.model__nav a:last-child { border-bottom: 1px solid var(--line); }
.model__nav a:hover { padding-left: 0.7rem; }
.model__nav a span { font-size: var(--t-label); color: var(--accent); }
.model__figuur img { width: 100%; height: auto; }
/* ═══ FASE-SECTIES ══════════════════════════════ */
.fase__kop {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.fase__nummer {
  display: none; /* iconen in plaats van nummers */
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 1;
  opacity: 0.16;
  letter-spacing: -0.02em;
}
.fase__tagline {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  color: var(--accent);
}
.fase__desc {
  margin-top: 0.9rem;
  font-size: var(--t-body);
  max-width: 34rem;
  opacity: 0.8;
}
.fase__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 2.25rem);
}
@media (min-width: 1500px) {
  .fase__cards { grid-template-columns: repeat(4, 1fr); }
}
.fase-card {
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.fase-card h3 {
  font-size: var(--t-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fase-card p { margin-top: 0.5rem; font-size: var(--t-body); opacity: 0.65; }
.fase-case {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease);
}
.fase-case:hover { background: rgba(255, 248, 238, 0.06); }
[data-theme="light"] .fase-case:hover { background: rgba(12, 24, 15, 0.04); }
.fase-case figure { border-radius: calc(var(--radius) * 0.6); overflow: hidden; aspect-ratio: 16 / 10; }
.fase-case figure img { width: 100%; height: 100%; object-fit: cover; }
.fase-case__label {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.fase-case__tekst h3 {
  margin-top: 0.5rem;
  font-size: var(--t-large);
  font-weight: 600;
  text-transform: uppercase;
}
.fase-case__tekst p { margin-top: 0.6rem; opacity: 0.75; max-width: 30rem; }
.fase-case__lees {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.1rem;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fase-case:hover .journal-card__badge {
  background: var(--fg);
  color: var(--bg);
  transform: rotate(45deg);
}

/* ═══ PARTNERSCHAP + SECTOREN ═══════════════════ */
.partner__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.partner__inner .eyebrow { justify-content: center; }
.partner__sub {
  margin-top: 1.5rem;
  font-size: var(--t-large);
  line-height: 1.5;
  max-width: 46rem;
  opacity: 0.85;
}
.benefits3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  width: 100%;
  max-width: 62rem;
  text-align: left;
}
.benefits3 .benefit {
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.benefits3 strong {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.benefits3 p { margin-top: 0.5rem; opacity: 0.7; }
.partner .btn { margin-top: 2.5rem; }

/* ── Pakketten ───────────────────────────────── */
.pakketten__lead {
  margin-top: 1rem;
  font-size: var(--t-body);
  max-width: 46rem;
  opacity: 0.75;
}
.pakketten__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.6vw, 1.75rem);
  align-items: stretch;
}
.pakketten__grid--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pakketten__grid--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 64rem; }
@media (max-width: 900px) { .pakketten__grid--twee { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  .pakketten__grid--drie { grid-template-columns: 1fr; }
}
.pakket {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pakket--advies {
  border-color: var(--copper);
  box-shadow: 0 0 0 1px var(--copper);
}
.pakket__badge {
  align-self: flex-start;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--green-dark);
  color: var(--gold);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pakket__naam {
  font-size: var(--t-large);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pakket__prijs {
  margin-top: 0.35rem;
  font-size: var(--t-body);
  font-weight: 600;
}
.pakket__prijs span {
  font-weight: 400;
  opacity: 0.6;
}
.pakket__voor {
  margin-top: 0.9rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-body);
  opacity: 0.75;
}
.pakket__lijst {
  margin-top: 1.1rem;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.pakket__lijst li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-body);
  opacity: 0.75;
}
.pakket__lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--copper);
}
.pakketten__projecten {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(3.5rem, 6vw, 6rem);
  padding-top: clamp(2.5rem, 4.5vw, 4rem);
  border-top: 1px solid var(--line);
}
.pakketten__projecten-tekst { max-width: 40rem; }
.pakketten__beeld {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.pakketten__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Iets opgerekt zodat de tegenbeweging uit scroll-fx.js binnen de
     lijst blijft en er geen rand in beeld schuift. */
  scale: 1.1;
}
.pakketten__projecten h3 {
  font-size: var(--t-large);
  font-weight: 600;
}
.pakketten__projecten p {
  margin-top: 0.75rem;
  font-size: var(--t-body);
  opacity: 0.75;
}
.pakketten__projecten .btn { margin-top: 1.75rem; }

/* ── Page-hero met abstract beeld ─────────────
   Variant voor routepagina's: een abstracte render als achtergrond
   in plaats van een gradient. De scrim houdt de tekst leesbaar en
   loopt schuin weg zodat het beeld rechts kan ademen. */
.page-hero--beeld > .section-bg { opacity: 1; }
.page-hero--beeld::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(105deg,
      rgba(6, 20, 10, 0.94) 0%,
      rgba(6, 20, 10, 0.82) 45%,
      rgba(6, 20, 10, 0.42) 74%,
      rgba(6, 20, 10, 0.58) 100%);
}
.page-hero--beeld > .container { position: relative; z-index: 1; }

/* ── Device-mockups ──────────────────────────── */
.mock-duo {
  display: block; /* anchors zijn inline; absolute phone rekent anders verkeerd */
  position: relative;
  /* ruimte rechtsonder voor de overlappende telefoon */
  padding-right: clamp(3rem, 7vw, 6.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.mock-browser {
  border-radius: clamp(0.6rem, 1vw, 0.9rem);
  overflow: hidden;
  background: #0e1a12;
  box-shadow: 0 24px 70px -28px rgba(6, 20, 10, 0.55);
  border: 1px solid var(--line);
}
.mock-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.9rem;
  background: rgba(12, 24, 15, 0.92);
}
.mock-browser__dots { display: flex; gap: 0.32rem; }
.mock-browser__dots i {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: rgba(243, 239, 232, 0.22);
}
.mock-browser__url {
  flex: 1;
  max-width: 18rem;
  margin-inline: auto;
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  background: rgba(243, 239, 232, 0.08);
  color: rgba(243, 239, 232, 0.55);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-browser__scherm { aspect-ratio: 16 / 10; background: #101d14; }
.mock-browser__scherm img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.mock-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(7.5rem, 17%, 12rem);
  border-radius: clamp(1.1rem, 2vw, 1.9rem);
  padding: clamp(0.3rem, 0.55vw, 0.5rem);
  background: #0b130d;
  box-shadow: 0 28px 60px -22px rgba(6, 20, 10, 0.65);
  border: 1px solid rgba(243, 239, 232, 0.12);
  z-index: 2;
}
.mock-phone::before {
  /* dynamic island */
  content: "";
  position: absolute;
  top: clamp(0.55rem, 1vw, 0.85rem);
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: clamp(0.5rem, 0.9vw, 0.7rem);
  border-radius: 999px;
  background: #0b130d;
  z-index: 2;
}
.mock-phone__scherm {
  border-radius: clamp(0.85rem, 1.6vw, 1.5rem);
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  background: #101d14;
}
.mock-phone__scherm img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.mock-meta {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding-top: clamp(0.9rem, 1.6vw, 1.25rem);
  border-top: 1px solid var(--line);
}
.mock-meta__num { font-size: var(--t-label); opacity: 0.45; letter-spacing: 0.06em; }
.mock-meta h3 { font-size: var(--t-large); font-weight: 600; }
.mock-meta__tags { margin-left: auto; font-size: var(--t-label); opacity: 0.55; letter-spacing: 0.02em; text-align: right; }
.mock-rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}
.mock-rij + .mock-rij,
.mock-solo + .mock-rij,
.mock-solo + .mock-solo,
.mock-rij + .mock-solo { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
@media (max-width: 860px) {
  .mock-rij { grid-template-columns: 1fr; }
  .mock-duo { padding-right: clamp(2rem, 12vw, 3.5rem); }
}

/* ── Hero-stats (routepagina's) ───────────────── */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.hero-stat strong {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero-stat span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ── Reel-strip: cases met video op routepagina's ── */
.reel-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
.reel-strip .cs__media { aspect-ratio: 4 / 5; }
/* Meta in de smalle strip: nummer + titel op één regel, tags er strak
   onder in kolom 2 — drie kolommen naast elkaar wordt hier te krap en
   liet de tags lelijk naar links onder het nummer vallen */
.reel-strip .cs__meta {
  grid-template-columns: auto 1fr;
  row-gap: 0.3rem;
}
.reel-strip .cs__tags {
  grid-column: 2;
  margin: 0;
  font-size: var(--t-label);
  opacity: 0.55;
  text-align: left;
}
@media (max-width: 860px) {
  .reel-strip { grid-template-columns: 1fr; }
  .reel-strip .cs__media { aspect-ratio: 16 / 10; }
}

/* ── Screenshot-showcase (websites) ───────────── */
.shot-rij {
  display: grid;
  /* minmax(0,…) is verplicht: zonder rekt de intrinsieke beeldbreedte
     de kolom op en scrollt de pagina horizontaal */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  /* start, niet stretch: stretch + aspect-ratio rekent breedtes circulair
     terug en duwt shots door hun track heen */
  align-items: start;
}
.shot-rij + .shot-rij { margin-top: clamp(1rem, 2vw, 2rem); }
.shot-rij--omgekeerd { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.shot {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.01);
  transition: transform 1.1s var(--ease);
}
.shot:hover img { transform: scale(1.045); }
.shot figcaption {
  position: absolute;
  left: 1.1rem; bottom: 1rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(12, 24, 15, 0.72);
  color: var(--cream);
  font-size: var(--t-label);
  letter-spacing: 0.03em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 860px) {
  .shot-rij, .shot-rij--omgekeerd { grid-template-columns: 1fr; }
}

/* ── Pakketkaart: categorieën binnenin (Care) ── */
.pakket__cat {
  margin-top: 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}
.pakket__cat:first-of-type { margin-top: 1.1rem; }
.pakket__cat + .pakket__lijst { margin-top: 0.6rem; }
.pakket__lijst li.is-uit {
  opacity: 0.35;
  text-decoration: line-through;
  text-decoration-color: rgba(128,128,128,0.5);
}
.pakket__lijst li.is-uit::before { background: transparent; border: 1px solid currentColor; }
.pakket__ideaal {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: var(--t-label);
  line-height: 1.5;
  opacity: 0.65;
}
.pakket__ideaal strong { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; opacity: 0.7; margin-bottom: 0.25rem; }
.pakket__jaar { margin-top: 0.2rem; font-size: var(--t-label); opacity: 0.55; }

/* ── Vergelijkingstabel ──────────────────────── */
.vgl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vgl {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: var(--t-body);
}
.vgl th, .vgl td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.vgl th { font-weight: 600; }
.vgl thead th { font-size: var(--t-label); letter-spacing: 0.04em; text-transform: uppercase; }
.vgl thead th span { display: block; font-weight: 400; opacity: 0.6; text-transform: none; letter-spacing: 0; margin-top: 0.2rem; }
.vgl td:not(:first-child), .vgl th:not(:first-child) { text-align: center; }
.vgl .vgl__groep td {
  padding-top: 1.75rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  border-bottom: none;
}
.vgl .ja { color: var(--accent); font-weight: 600; }
.vgl .nee { opacity: 0.3; }

/* ── Keuzehulp ───────────────────────────────── */
.keuze__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.75rem);
}
.keuze__kaart {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.keuze__kaart:hover {
  border-color: var(--deco);
  transform: translateY(-3px);
}
.keuze__num {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  opacity: 0.45;
}
.keuze__kaart h3 {
  margin-top: 0.75rem;
  font-size: var(--t-large);
  font-weight: 600;
}
.keuze__zin {
  margin-top: 0.9rem;
  font-size: var(--t-body);
  opacity: 0.8;
}
.keuze__meta {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-label);
  letter-spacing: 0.02em;
  opacity: 0.6;
}
/* Duwt de link naar de onderrand zodat alle kaarten gelijk uitlijnen,
   ongeacht hoe lang de zin erboven is. */
.keuze__pijl {
  margin-top: auto;
  padding-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.keuze__pijl svg { width: 1rem; height: 1rem; }

@media (max-width: 1100px) {
  .keuze__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .keuze__grid { grid-template-columns: 1fr; }
}

/* ── Fit / not fit ───────────────────────────── */
.fit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
.fit__kop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-large);
  font-weight: 600;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.fit__kop::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: none;
}
.fit__kop--ja::before { background: var(--deco); }
.fit__kop--nee::before {
  background: none;
  border: 1px solid currentColor;
  opacity: 0.45;
}
.fit__lijst {
  margin-top: 1.5rem;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}
.fit__lijst li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--t-body);
}
.fit__lijst--ja li { opacity: 0.85; }
.fit__lijst--nee li { opacity: 0.55; }
/* Vinkje en streepje in CSS, zodat er geen iconenset bij hoeft */
.fit__lijst--ja li::before,
.fit__lijst--nee li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}
.fit__lijst--ja li::before { content: "+"; color: var(--deco); }
.fit__lijst--nee li::before { content: "\2013"; }

/* ── Zo starten we ───────────────────────────── */
.start__wrap { max-width: 52rem; }

@media (max-width: 860px) {
  .fit__grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .pakketten__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pakketten__projecten { grid-template-columns: 1fr; }
  .pakketten__beeld { order: -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .pakketten__grid { grid-template-columns: 1fr; }
}
.chips { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.chip {
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chip:hover {
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-2px);
}
.cta__title--klein { font-size: clamp(2.2rem, 5vw, 4.2rem); max-width: 62rem; }

@media (max-width: 860px) {
  .model__grid { grid-template-columns: 1fr; }
  .fase__cards { grid-template-columns: 1fr; }
  .fase-case { grid-template-columns: 1fr; }
  .benefits3 { grid-template-columns: 1fr; }
}

/* ═══ TAALWISSELAAR ═════════════════════════════ */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  padding-inline: 0.25rem;
}
.nav__lang a {
  padding: 0.2rem 0.35rem;
  border-radius: 0.35rem;
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav__lang a:hover { opacity: 0.9; }
.nav__lang a[aria-current="true"] { opacity: 1; color: var(--gold); font-weight: 600; }
.nav__lang span { opacity: 0.28; }

.mobmenu__lang {
  display: flex;
  gap: 0.5rem;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity var(--dur) var(--ease) 380ms;
}
html.menu-open .mobmenu__lang { opacity: 1; }
.mobmenu__lang a { padding: 0.5rem 1rem; border: 1px solid rgba(243,239,232,0.2); border-radius: 999px; }
.mobmenu__lang a[aria-current="true"] { background: var(--cream); color: var(--green-dark); border-color: var(--cream); }

/* ═══ ZWEVENDE AFSPRAAK-KNOP ════════════════════ */
.fab {
  position: fixed;
  right: clamp(1rem, 2vw, 2.25rem);
  bottom: clamp(1rem, 2vw, 2.25rem);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1.35rem 0.55rem 0.55rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--green-dark);
  box-shadow: 0 14px 40px rgba(6, 13, 8, 0.35);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
  transform: translateY(1.5rem) scale(0.92);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fab.zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { transform: translateY(-2px); }
.fab__avatar {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.fab__dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: #4ac26b;
  flex: none;
  margin-left: -0.25rem;
}
html.menu-open .fab { opacity: 0; pointer-events: none; }

@media (max-width: 860px) {
  .nav__lang { display: none; }
  .fab__label { display: none; }
  .fab { padding: 0.5rem; gap: 0.4rem; }
}

/* ═══ VOLGENDE-STAP-LINK ════════════════════════ */
.volgende {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.volgende:hover { transform: translateY(-2px); }
[data-theme="light"] .volgende:hover { background: rgba(12, 24, 15, 0.04); }
.volgende__label {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  flex: none;
}
.volgende__titel {
  flex: 1;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}
.volgende:hover .journal-card__badge {
  background: var(--fg);
  color: var(--bg);
  transform: rotate(45deg);
}
.chips .chip { cursor: default; }
.chips span.chip:hover { background: transparent; color: inherit; transform: none; }

@media (max-width: 640px) {
  .volgende { flex-wrap: wrap; gap: 0.9rem; }
  .volgende__titel { flex: 1 0 100%; }
}

/* ═══ TAALWISSELAAR (desktop) ═══════════════════ */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  padding-inline: 0.3rem;
}
.nav__lang a {
  padding: 0.2rem 0.3rem;
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav__lang a:hover { opacity: 0.85; }
.nav__lang a[aria-current="true"] { opacity: 1; color: var(--gold); font-weight: 600; }
.nav__lang span { opacity: 0.25; }

/* ═══ ZWEVENDE AFSPRAAK-KNOP ════════════════════ */
.fab {
  position: fixed;
  right: clamp(1rem, 2vw, 2.25rem);
  bottom: clamp(1rem, 2vw, 2.25rem);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.35rem 0.7rem 0.85rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--green-dark);
  box-shadow: 0 14px 40px rgba(6, 13, 8, 0.35);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
  transform: translateY(1.5rem) scale(0.92);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fab.zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { transform: translateY(-2px); }
.fab__icon { display: grid; place-items: center; flex: none; }
.fab__icon svg { width: 1.15rem; height: 1.15rem; }
html.menu-open .fab { opacity: 0; pointer-events: none; }

/* ═══ MOBIEL MENU ═══════════════════════════════ */
.nav__burger {
  display: none;
  position: relative;
  width: 2.6rem; height: 2.6rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav__burger span {
  position: absolute;
  left: 50%;
  width: 1.2rem;
  height: 1.5px;
  background: var(--cream);
  transform: translateX(-50%);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger span:first-child { top: calc(50% - 0.28rem); }
.nav__burger span:last-child  { top: calc(50% + 0.28rem); }
html.menu-open .nav__burger span:first-child { transform: translateX(-50%) translateY(0.28rem) rotate(45deg); }
html.menu-open .nav__burger span:last-child  { transform: translateX(-50%) translateY(-0.28rem) rotate(-45deg); }

.mobmenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--green-deep);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7rem 1.6rem 2rem;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 3.2rem) 3.2rem);
  transition: clip-path 0.75s var(--ease);
  pointer-events: none;
}
html.menu-open .mobmenu {
  clip-path: circle(145% at calc(100% - 3.2rem) 3.2rem);
  pointer-events: auto;
}
html.menu-open { overflow: hidden; }

/* Cirkelmotief als achtergrond, groot en subtiel */
.mobmenu::after {
  content: "";
  position: absolute;
  right: -30%;
  top: 12%;
  width: 90vw; height: 90vw;
  border: 1px solid rgba(242, 226, 164, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.mobmenu__links { display: flex; flex-direction: column; position: relative; z-index: 1; }
.mobmenu__links a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 1.05rem;
  border-top: 1px solid rgba(243, 239, 232, 0.12);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms + 180ms);
}
.mobmenu__links a:last-child { border-bottom: 1px solid rgba(243, 239, 232, 0.12); }
html.menu-open .mobmenu__links a { opacity: 1; transform: none; }
.mobmenu__num {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  flex: none;
  width: 1.9rem;
}
.mobmenu__tekst {
  flex: 1;
  font-size: clamp(1.85rem, 8.5vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.08;
}
.mobmenu__pijl { opacity: 0.35; align-self: center; }
.mobmenu__pijl svg { width: 1rem; height: 1rem; }

.mobmenu__voet {
  position: relative;
  z-index: 1;
  padding-top: 2rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s var(--ease) 460ms, transform 0.5s var(--ease) 460ms;
}
html.menu-open .mobmenu__voet { opacity: 1; transform: none; }
.mobmenu__cta { width: 100%; justify-content: space-between; border-color: rgba(243,239,232,0.2); }
.mobmenu__contact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.5rem;
  font-size: var(--t-body);
  opacity: 0.6;
}
.mobmenu__onder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(243, 239, 232, 0.12);
}
.mobmenu__socials { display: flex; gap: 0.6rem; }
.mobmenu__socials a {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(243, 239, 232, 0.2);
}
.mobmenu__socials svg { width: 0.95rem; height: 0.95rem; }
.mobmenu__lang { display: flex; gap: 0.4rem; font-size: var(--t-label); letter-spacing: 0.1em; }
.mobmenu__lang a {
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(243, 239, 232, 0.2);
  border-radius: 999px;
  opacity: 0.6;
}
.mobmenu__lang a[aria-current="true"] {
  background: var(--cream);
  color: var(--green-dark);
  border-color: var(--cream);
  opacity: 1;
  font-weight: 600;
}

/* ═══ MOBIELE FINETUNING ════════════════════════ */
@media (max-width: 860px) {
  .nav__burger { display: block; }
  .nav { z-index: 100; gap: 0.6rem; padding: 0.55rem 0.55rem 0.55rem 1.1rem; }
  .nav__cta, .nav__lang { display: none; }
  .fab__label { display: none; }
  .fab { padding: 0.85rem; gap: 0; }

  /* overflow bij de bron opgelost, NIET met overflow-x:hidden op html:
     dat maakt html een scroll-container en breekt position:sticky */
  .about__photo--small { left: auto; right: 0; bottom: -6%; width: 42%; }
  .about__photos { overflow: hidden; border-radius: var(--radius); }

  /* sectiekoppen stapelen netjes */
  .section-head { align-items: flex-start; gap: 1rem; }
  .section-head__link { order: 3; }
  .reviews__badge { order: 3; }

  /* rustiger ritme, maar nog steeds ademend (opgehoogd aug 2026) */
  :root { --section-y: clamp(5.5rem, 15vw, 9rem); }
  .work-card--offset { margin-top: 0; }
  .hero__content { padding-block: 7rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mobmenu { transition: none; }
  .mobmenu__links a, .mobmenu__voet { transition: none; opacity: 1; transform: none; }
}

/* ═══ NAV: niets mag afbreken ════════════════════ */
.nav__links a,
.nav__cta,
.nav__lang,
.nav__lang a { white-space: nowrap; }
.nav__links { gap: 1.25rem; }
.nav { gap: 1.5rem; }
@media (max-width: 1100px) and (min-width: 861px) {
  .nav { gap: 1rem; padding-left: 1.1rem; }
  .nav__links { gap: 0.9rem; }
  .nav__cta { padding: 0.6rem 0.95rem; }
}


/* ═══ MOBIEL: MARQUEES SOEPEL EN ZICHTBAAR ══════ */
.clients__track, .marquee__track, .team-spoor {
  will-change: transform;
  backface-visibility: hidden;
}
@media (max-width: 860px) {
  /* korter pad = duidelijk zichtbare beweging op een smal scherm */
  .clients__track { animation-duration: 26s; }
  .marquee__track { animation-duration: 22s; }
  /* het verloopmasker is duur op mobiel; smallere rand volstaat */
  .clients__marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
}

/* ═══ MOBIEL: AANRAAKDOELEN MINSTENS 44px ═══════ */
@media (max-width: 860px) {
  .section-head__link,
  .cta__mail,
  .faq__sub a,
  .proof__faq-head a,
  .footer__col a,
  .mobmenu__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__col { gap: 0.1rem; }

  /* subregel hero: niet in vijf snippers breken */
  .hero__sub { max-width: 22rem; font-size: 1.05rem; line-height: 1.5; }
  .hero__sub br { display: none; }
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .hero__foot { gap: 1.25rem; }
  .hero__proof { letter-spacing: .04em; }
}

/* ═══ MOBIEL: MENU-OVERFLOW + GEPINDE SECTIE ════ */
/* de decoratieve cirkel steekt bewust buiten beeld; alleen hier
   afkappen, NIET op html (dat breekt sticky elders) */
.mobmenu { overflow-x: hidden; }

@media (max-width: 860px) {
  /* korter pad: minder dood scrollen na de tekst */

  /* tekstblok verticaal centreren, marquee strak op de onderrand:
     auto-marges op de container vullen de vrije ruimte gelijkmatig */
  .statement__sticky { padding-block: 5.5rem 0; }
  .statement__sticky > .container { margin-block: auto; }
  .statement__sticky .marquee { margin-top: 0; }

  /* titel past nu binnen één scherm i.p.v. tegen de marquee aan */
  .statement--pin .statement__title {
    font-size: clamp(1.7rem, 6.8vw, 2.3rem);
    line-height: 1.22;
  }
  .statement--pin .btn { margin-top: 2.25rem; }
  .marquee { padding-block: 1.1rem; }
  .marquee__half span { font-size: 1rem; }
}

/* ═══ MOBIEL MENU: PAST ALTIJD IN ÉÉN SCHERM ════ */
/* maten schalen mee met de schermhoogte (vh), zodat het menu
   ook op een kleine telefoon niet hoeft te scrollen */
.mobmenu {
  padding: clamp(4.5rem, 9vh, 6.5rem) 1.5rem clamp(1rem, 2.5vh, 2rem);
  justify-content: space-between;
  gap: clamp(0.75rem, 2vh, 2rem);
}
.mobmenu__links a { padding-block: clamp(0.5rem, 1.5vh, 1.05rem); }
.mobmenu__tekst { font-size: clamp(1.45rem, 4vh, 2.5rem); }
.mobmenu__num { font-size: clamp(0.6rem, 1.3vh, 0.7rem); }

.mobmenu__voet { padding-top: 0; }
.mobmenu__cta { padding-block: clamp(0.6rem, 1.6vh, 0.95rem); }

/* contact op één regel i.p.v. onder elkaar */
.mobmenu__contact {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
  margin-top: clamp(0.6rem, 1.8vh, 1.5rem);
  font-size: 0.95rem;
}
.mobmenu__contact a { min-height: 0; }

/* socials en taalwisselaar blijven altijd naast elkaar */
.mobmenu__onder {
  flex-wrap: nowrap;
  margin-top: clamp(0.7rem, 2vh, 1.75rem);
  padding-top: clamp(0.7rem, 1.8vh, 1.5rem);
}
.mobmenu__socials a {
  width: clamp(2.1rem, 5vh, 2.5rem);
  height: clamp(2.1rem, 5vh, 2.5rem);
}
.mobmenu__lang a { padding: clamp(0.3rem, 1vh, 0.45rem) 0.85rem; }

/* alleen als het écht niet past mag er gescrold worden */
@media (max-height: 600px) {
  .mobmenu { overflow-y: auto; }
}


/* ═══ GEPINDE SECTIE: MARQUEE STRAK ONDERAAN ════ */
/* de sectie moet de ECHTE schermhoogte volgen; met svh bleef er een
   lege strook over zodra de adresbalk van de telefoon wegschuift */
/* gegarandeerde lucht tussen knop en marquee, marquee tegen de onderrand */
.statement__sticky .marquee {
  margin-top: clamp(2rem, 6vh, 4.5rem);
  margin-bottom: 0;
}

@media (max-width: 860px) {
    .statement__sticky { padding-bottom: 0; }
}

/* ═══ MARQUEE HARD OP DE ONDERRAND VAN DE SECTIE ═ */
/* niet meer afhankelijk van auto-marges of schermhoogte-eenheden:
   absoluut op de onderrand, tekst gecentreerd in de ruimte erboven */
.statement__sticky {
  --marquee-h: 4.25rem;
  justify-content: center;
  padding-bottom: var(--marquee-h);
  position: sticky;
}
.statement__sticky > .container { margin-block: 0; }
.statement__sticky .marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background: inherit;
}
@media (max-width: 860px) {
  .statement__sticky { --marquee-h: 3.6rem; padding-top: 4.5rem; }
}

/* ═══ SIRCLE SOLUTIONS · LEVEND CODEPANEEL ══════ */
.codepaneel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, #0A140C 0%, #06140A 100%);
  border: 1px solid rgba(242, 226, 164, 0.14);
  box-shadow: 0 30px 80px rgba(6, 13, 8, 0.4);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--cream);
  min-height: 26rem;
  display: flex;
  flex-direction: column;
}
/* zachte gloed die traag ademt */
.codepaneel::before {
  content: "";
  position: absolute;
  top: -35%; right: -25%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(242, 226, 164, 0.16), transparent 68%);
  animation: adem 7s var(--ease) infinite;
  pointer-events: none;
}
@keyframes adem {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.15); }
}

.codepaneel__balk {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(243, 239, 232, 0.09);
  background: rgba(6, 20, 10, 0.4);
}
.codepaneel__dot {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: rgba(243, 239, 232, 0.22);
}
.codepaneel__dot:first-child { background: rgba(242, 226, 164, 0.55); }
.codepaneel__naam {
  margin-left: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.55;
}
.codepaneel__status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.codepaneel__stip {
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: #7FD48B;
  animation: pulse 2.4s var(--ease) infinite;
}

.codepaneel__code {
  flex: 1;
  margin: 0;
  padding: 1.35rem 1.4rem;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  z-index: 1;
}
.codepaneel__caret {
  display: inline-block;
  width: 0.5rem; height: 1em;
  margin-left: 0.12rem;
  background: var(--gold);
  vertical-align: text-bottom;
  animation: knipper 1s steps(2) infinite;
}
@keyframes knipper { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* syntaxkleuren, binnen de merkkleuren */
.cp-key  { color: #C9B6F5; }
.cp-str  { color: #9FD9A8; }
.cp-fn   { color: var(--gold); }
.cp-num  { color: #E8C07A; }
.cp-com  { color: rgba(243, 239, 232, 0.35); font-style: italic; }
.cp-ok   { color: #7FD48B; font-weight: 600; }

.codepaneel__voet {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.4rem 1.1rem;
  border-top: 1px solid rgba(243, 239, 232, 0.09);
}
.codepaneel__balkje {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(243, 239, 232, 0.12);
  overflow: hidden;
}
.codepaneel__balkje i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--copper), var(--gold));
  transition: width 0.35s linear;
}
.codepaneel__meta {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .codepaneel { min-height: 21rem; }
  .codepaneel__code { line-height: 1.7; }
}


/* ═══ GEPINDE SECTIE · DEFINITIEVE OPMAAK ═══════ */
.statement--pin { height: 165svh; height: 165dvh; }
.statement__sticky {
  --marquee-h: 5.5rem;
  position: sticky;
  top: 0;
  min-height: 100svh;
  min-height: 100dvh;
  justify-content: center;
  padding-bottom: var(--marquee-h);
}
/* ruime lucht onder de knop, marquee raakt hem nooit */
.statement--pin .btn { margin-bottom: clamp(3rem, 9vh, 7rem); }
.statement__sticky .marquee {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  background: inherit;
}

/* dienstenbaan exact even snel als de logobaan (gemeten px/s) */
.marquee__track { animation-duration: 62s; }

@media (max-width: 860px) {
  .statement--pin { height: 125svh; height: 125dvh; }
  .statement__sticky { --marquee-h: 4.4rem; padding-top: 4.5rem; }
  .marquee__track { animation-duration: 25s; }
}


/* ═══ MOBIEL MENU · ONDERBLOK STRAK UITGELIJND ══ */
/* alles op dezelfde marges, gelijke hoogtes, één ritme */
.mobmenu__voet { display: flex; flex-direction: column; }

.mobmenu__cta {
  width: 100%;
  justify-content: space-between;
  padding-inline: 1.5rem 0.5rem;
}

/* contact: links en rechts uitgelijnd met de rest, één regel */
.mobmenu__contact {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(0.9rem, 2.2vh, 1.6rem);
  font-size: 0.9rem;
  opacity: 0.55;
}
.mobmenu__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  white-space: nowrap;
}

/* onderste rij: socials en taal exact even hoog op één middellijn */
.mobmenu__onder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(0.8rem, 2vh, 1.4rem);
  padding-top: clamp(0.9rem, 2.2vh, 1.6rem);
}
.mobmenu__socials { gap: 0.5rem; }
.mobmenu__socials a,
.mobmenu__lang a {
  --knop: clamp(2.25rem, 5.2vh, 2.6rem);
  height: var(--knop);
  min-height: var(--knop);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-sizing: border-box;
}
.mobmenu__socials a { width: var(--knop); }
.mobmenu__lang { gap: 0.4rem; margin: 0; }
.mobmenu__lang a { padding: 0 1.05rem; letter-spacing: 0.12em; }

/* menublok vult de ruimte boven het voetblok en staat daarin gecentreerd,
   zodat de lege ruimte niet allemaal onder de items valt */
.mobmenu__links { flex: 1; justify-content: center; }

/* ═══ WERKPAGINA · RUIM PORTFOLIO ═══════════════ */
.werk-hero {
  position: relative;
  padding: clamp(10rem, 18vh, 14rem) 0 clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}
.werk-hero__inner { position: relative; z-index: 1; }
.werk-hero__titel {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: 60rem;
  margin-top: clamp(1.25rem, 3vh, 2rem);
}
.werk-hero__titel .serif {
  text-transform: none;
  color: var(--gold);
  font-size: 0.94em;
}
.werk-hero__voet {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(3rem, 8vh, 6rem);
}
.werk-hero__sub {
  font-size: var(--t-large);
  line-height: 1.5;
  opacity: 0.85;
  max-width: 40rem;
}

/* de cases zelf: veel lucht, volle breedte */
.cases {
  padding-block: clamp(6rem, 14vh, 12rem);
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 12vh, 11rem);
}
.cs-rij {
  width: min(94vw, 1780px);
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
}
.cs-rij--een { grid-template-columns: 1fr; }
.cs-rij--twee { grid-template-columns: repeat(2, 1fr); }

.cs { display: block; }
.cs__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(12, 24, 15, 0.06);
}
.cs--groot .cs__media { aspect-ratio: 16 / 9; }
.cs-rij--twee .cs__media { aspect-ratio: 4 / 3; }
.cs__media video,
.cs__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.1s var(--ease);
}
.cs:hover .cs__media video,
.cs:hover .cs__media img { transform: scale(1.05); }
.cs__badge {
  position: absolute;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  display: grid;
  place-items: center;
  width: clamp(3rem, 4.5vw, 4.25rem);
  height: clamp(3rem, 4.5vw, 4.25rem);
  border-radius: 50%;
  background: var(--cream);
  color: var(--green-dark);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.cs__badge svg { width: 1.2rem; height: 1.2rem; }
.cs:hover .cs__badge { transform: scale(1); }

.cs__meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1.25rem;
  padding-top: clamp(1.25rem, 2.5vh, 2rem);
  border-top: 1px solid var(--line);
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
}
.cs__num {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  color: var(--accent);
}
.cs__titel {
  font-size: clamp(1.35rem, 3.2vw, 2.9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.cs-rij--twee .cs__titel { font-size: clamp(1.2rem, 2vw, 1.8rem); }
.cs__tags {
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  opacity: 0.55;
  text-align: right;
}

@media (max-width: 860px) {
  .werk-hero__voet { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .cs-rij--twee { grid-template-columns: 1fr; }
  .cs--groot .cs__media, .cs-rij--twee .cs__media { aspect-ratio: 4 / 3; }
  .cs__meta { grid-template-columns: auto 1fr; row-gap: 0.4rem; }
  .cs__tags { grid-column: 1 / -1; text-align: left; }
}


/* alleen mét script krijgt de cirkel zijn tekenanimatie */
html.js .circled__svg ellipse { stroke-dashoffset: 640; }

/* ═══ JOURNAL-OVERZICHT · RUIME RIJEN ═══════════ */
.jr-lijst { padding-block: clamp(6rem, 14vh, 12rem); }
.jr-wrap {
  width: min(94vw, 1500px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
.jr {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
  border-top: 1px solid var(--line);
}
.jr:last-child { border-bottom: 1px solid var(--line); }
.jr__beeld {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
}
.jr__beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.1s var(--ease);
}
.jr:hover .jr__beeld img { transform: scale(1.06); }
.jr__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.jr__tag {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
}
.jr__datum { opacity: 0.5; }
.jr__titel {
  margin-top: 1.1rem;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  max-width: 30ch;
}
.jr__intro {
  margin-top: 0.9rem;
  font-size: var(--t-body);
  line-height: 1.6;
  opacity: 0.68;
  max-width: 52ch;
}
.jr__lees {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.5rem;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.jr__pijl {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.jr__pijl svg { width: 1rem; height: 1rem; }
.jr:hover .jr__pijl {
  background: var(--fg);
  color: var(--bg);
  transform: scale(1.08);
}

@media (max-width: 860px) {
  .jr { grid-template-columns: 1fr; gap: 1.5rem; }
  .jr__beeld { aspect-ratio: 16 / 9; }
}

/* ═══ WAARDEN-RASTER (over ons) ═════════════════ */
.waarden.waarden--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .waarden.waarden--vier { grid-template-columns: 1fr; } }
.waarden {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.waarde {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.waarde__num {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.waarde h3 {
  font-size: var(--t-large);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.waarde p { margin-top: 0.75rem; opacity: 0.68; line-height: 1.6; }
@media (max-width: 1100px) { .waarden { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .waarden { grid-template-columns: 1fr; } }

/* ═══ CONTACTPAGINA ═════════════════════════════ */
.ct-hero {
  position: relative;
  padding: clamp(10rem, 18vh, 14rem) 0 clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}
.ct-wrap {
  position: relative;
  z-index: 1;
  width: min(94vw, 1500px);
  margin-inline: auto;
}
.ct-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.ct-hero__titel {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: clamp(1.25rem, 3vh, 2.25rem);
}
.ct-hero__titel .serif { text-transform: none; color: var(--gold); font-size: 0.94em; }
.ct-hero__sub {
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
  font-size: var(--t-large);
  line-height: 1.5;
  opacity: 0.85;
  max-width: 34rem;
}
.ct-direct {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  padding-top: clamp(1.75rem, 3.5vh, 2.5rem);
  border-top: 1px solid var(--line);
}
.ct-direct a, .ct-adres {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--t-large);
}
.ct-direct span {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}
.ct-direct a { transition: color var(--dur-fast) var(--ease); }
.ct-direct a:hover { color: var(--gold); }
.ct-adres { opacity: 0.8; }

/* ── het formulier ── */
.ct-formulier {
  position: relative;
  background: rgba(243, 239, 232, 0.055);
  border: 1px solid rgba(243, 239, 232, 0.14);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.45rem; }
.form-group label,
.form-label-top {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.form-group input,
.form-group textarea {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(243, 239, 232, 0.2);
  padding: 0.65rem 0;
  color: var(--cream);
  font: inherit;
  font-size: var(--t-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.form-group textarea { resize: vertical; min-height: 6.5rem; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(243, 239, 232, 0.32); }
.form-group input:focus,
.form-group textarea:focus { outline: none; border-bottom-color: var(--gold); }
.form-group.error input,
.form-group.error textarea { border-bottom-color: #E08A7A; }
.form-line, .form-line-fill { display: none; }

.form-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(243, 239, 232, 0.16);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--t-body);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.form-checkbox:hover { border-color: rgba(243, 239, 232, 0.35); }
.form-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-custom {
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  border: 1.5px solid rgba(243, 239, 232, 0.35);
  flex: none;
  position: relative;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.form-checkbox input:checked + .checkbox-custom {
  background: var(--gold);
  border-color: var(--gold);
}
.form-checkbox input:checked ~ * { color: var(--cream); }
.form-checkbox:has(input:checked) {
  border-color: var(--gold);
  background: rgba(242, 226, 164, 0.08);
}

.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.9rem 1rem 0.9rem 1.6rem;
  border: none;
  border-radius: 999px;
  background: var(--cream);
  color: var(--green-dark);
  font: inherit;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.form-submit:hover { transform: translateY(-2px); }
.form-submit .btn-arrow {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--gold);
}

.form-success {
  display: none;
  text-align: center;
  padding-block: 2rem;
  color: var(--gold);
}
.form-success.visible { display: block; }
.form-success h3 { font-size: var(--t-title); font-weight: 700; text-transform: uppercase; color: var(--cream); margin-top: 1rem; }
.form-success p { margin-top: 0.6rem; opacity: 0.7; color: var(--cream); }

@media (max-width: 900px) {
  .ct-hero__grid { grid-template-columns: 1fr; }
  .form-checkboxes { grid-template-columns: 1fr; }
}


/* ═══ TEAM-CAROUSEL (over ons) ══════════════════ */
.team-baan {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  margin-top: clamp(2.5rem, 5vh, 4rem);
}
.team-spoor {
  display: inline-flex;
  animation: marquee 64s linear infinite;
  will-change: transform;
}
.team-helft {
  display: inline-flex;
  gap: clamp(0.75rem, 1.6vw, 1.4rem);
  padding-right: clamp(0.75rem, 1.6vw, 1.4rem);
}
.team-baan figure {
  flex: none;
  width: clamp(13rem, 21vw, 21rem);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
.team-baan img { width: 100%; height: 100%; object-fit: cover; }
.team-baan figure:nth-child(odd) { aspect-ratio: 3 / 4; width: clamp(10rem, 15vw, 15rem); }
@media (prefers-reduced-motion: reduce) { .team-spoor { animation-duration: 160s; } }

/* ═══ CASE: vorige / volgende ═══════════════════ */
.case-sprongen { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.case-sprongen__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 3rem); }
.case-sprong { display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.case-sprong--next { text-align: right; align-items: flex-end; }
.case-sprong__label { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.case-sprong--next .case-sprong__label { flex-direction: row-reverse; }
.case-sprong__naam { font-size: clamp(1.2rem, 2.2vw, 1.9rem); font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.case-sprong:hover { background: var(--fg); color: var(--bg); }
.case-generiek { display: flex; flex-direction: column; gap: 1.25rem; }
.case-los { border-radius: var(--radius); overflow: hidden; }
.case-los img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .case-sprongen__grid { grid-template-columns: 1fr; }
  .case-sprong--next { text-align: left; align-items: flex-start; }
  .case-sprong--next .case-sprong__label { flex-direction: row; }
}

/* ═══════════════════════════════════════════════
   CASE-PAGINA · probleem → aanpak → resultaat
   ═══════════════════════════════════════════════ */
.cs-hero {
  position: relative;
  min-height: 100svh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.cs-hero__media { position: absolute; inset: 0; z-index: 0; }
.cs-hero__media video, .cs-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,13,8,.62) 0%, rgba(6,13,8,.18) 38%, rgba(6,13,8,.9) 100%);
}
.cs-hero__inner { position: relative; z-index: 1; width: var(--container); margin-inline: auto; padding-block: 8rem 3rem; }
.cs-hero__terug {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  opacity: .7; transition: gap var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.cs-hero__terug:hover { opacity: 1; gap: .85rem; }
.cs-hero__titel {
  font-size: clamp(2.8rem, 8.5vw, 8.5rem); font-weight: 700; text-transform: uppercase;
  line-height: .95; letter-spacing: -.02em; margin-top: clamp(2rem, 6vh, 4rem);
}
.cs-hero__sub { margin-top: 1.5rem; font-size: var(--t-large); line-height: 1.45; max-width: 44rem; opacity: .92; }
.cs-hero__scroll {
  position: absolute; right: 0; bottom: 3.5rem;
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem;
  border-radius: 50%; border: 1px solid rgba(243,239,232,.28);
  animation: zak 2.6s var(--ease) infinite;
}
@keyframes zak { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.cs-feiten__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.cs-feiten__grid--drie { grid-template-columns: repeat(3, 1fr); }
.cs-feit span { display: block; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; opacity: .5; margin-bottom: .5rem; }
.cs-feit strong { font-size: var(--t-body); font-weight: 600; }

.cs-deel { padding-block: var(--section-y); }
.cs-deel__kop { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cs-label { display: flex; align-items: center; gap: .6rem; font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; opacity: .55; padding-top: .7rem; }
.cs-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid var(--deco); flex: none; }
.cs-deel__tekst { max-width: 46rem; }
.cs-deel__tekst > p { font-size: clamp(1.15rem, 1.85vw, 1.6rem); line-height: 1.55; opacity: .9; }
.cs-deel__tekst > p + p { margin-top: 1.25rem; }
.cs-deel__tekst h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 700; text-transform: uppercase; line-height: 1.1; margin: 2.5rem 0 1rem; }
.cs-lijst { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.cs-lijst li { position: relative; padding-left: 1.6rem; opacity: .82; }
.cs-lijst li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid var(--deco); }

.cs-media { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.cs-media--vol { border-radius: var(--radius); overflow: hidden; }
.cs-media--vol img { width: 100%; height: auto; display: block; }
.cs-media--duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 1.6vw, 1.5rem); }
.cs-media--duo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4/3; }
.cs-galerij { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.6vw, 1.5rem); }
.cs-galerij figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/2; margin: 0; }
.cs-galerij figure:first-child { grid-column: span 2; grid-row: span 2; }
.cs-galerij img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.cs-galerij figure:hover img { transform: scale(1.05); }

.cs-video { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.cs-video__label { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; opacity: .55; margin-bottom: .9rem; }
.cs-video__kader { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; background: var(--green-deep); cursor: pointer; }
.cs-video__kader img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); }
.cs-video__kader:hover img { transform: scale(1.03); opacity: .82; }
.cs-video__kader iframe { width: 100%; height: 100%; border: 0; display: block; }
.cs-video__play {
  position: absolute; inset: 0; margin: auto;
  width: clamp(3.6rem, 6vw, 5.2rem); height: clamp(3.6rem, 6vw, 5.2rem);
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--cream); color: var(--green-dark);
  transition: transform var(--dur-fast) var(--ease);
}
.cs-video__kader:hover .cs-video__play { transform: scale(1.1); }
.cs-video__play svg { width: 42%; height: 42%; margin-left: .1em; }
.cs-tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.cs-tegel__frame { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--green-deep); }
.cs-tegel__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.cs-tegel p { margin-top: .8rem; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; opacity: .6; }

.cs-resultaat { position: relative; overflow: hidden; }
.cs-cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.cs-cijfer { padding-top: 1.75rem; border-top: 1px solid var(--line); }
.cs-cijfer strong { display: block; font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 700; line-height: .95; color: var(--accent); letter-spacing: -.02em; }
.cs-cijfer span { display: block; margin-top: .9rem; font-size: var(--t-body); line-height: 1.45; opacity: .72; }

.cs-live {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1rem 1rem 1rem 1.6rem;
  border: 1px solid var(--line); border-radius: 999px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cs-live span:first-child { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.cs-live strong { font-weight: 600; }
.cs-live__pijl { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--fg); color: var(--bg); }
.cs-live__pijl svg { width: 1rem; height: 1rem; }
.cs-live:hover { background: var(--fg); color: var(--bg); }
.cs-live:hover .cs-live__pijl { background: var(--bg); color: var(--fg); }

.cs-quote { position: relative; overflow: hidden; text-align: center; }
.cs-quote__inner { max-width: 58rem; margin-inline: auto; position: relative; z-index: 1; }
.cs-quote__teken { font-family: var(--font-serif); font-size: clamp(4rem, 10vw, 8rem); line-height: .6; color: var(--accent); opacity: .5; }
.cs-quote blockquote { font-family: var(--font-sans); font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.35; margin: 1.5rem 0 0; }
.cs-quote cite { display: block; margin-top: 2rem; font-style: normal; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

.cs-credits { display: flex; flex-wrap: wrap; gap: .6rem 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--t-body); opacity: .55; }

@media (max-width: 860px) {
  .cs-hero__inner { padding-block: 7rem 2.5rem; }
  .cs-hero__scroll { display: none; }
  .cs-feiten__grid { grid-template-columns: 1fr 1fr; }
  .cs-deel__kop { grid-template-columns: 1fr; gap: 1rem; }
  .cs-media--duo, .cs-tegels { grid-template-columns: 1fr; }
  .cs-galerij { grid-template-columns: 1fr 1fr; }
  .cs-galerij figure:first-child { grid-column: span 2; grid-row: auto; }
  .cs-cijfers { grid-template-columns: 1fr; }
}

.cs-bovenkop { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-bottom: 1rem; }

/* ═══ CASE · DE FILM (groot, direct onder de hero) ═══ */
.cs-film { padding-block: clamp(3.5rem, 7vw, 6rem); }
.cs-film__kop { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cs-film__titel { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; }
.cs-film__kader { aspect-ratio: 16/9; box-shadow: 0 40px 100px rgba(6,13,8,.45); }

/* ═══ CASE · DISCIPLINEKAARTEN ══════════════════ */
.cs-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(.6rem, 1.2vw, 1rem);
}
.cs-kaart {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cs-kaart:hover { border-color: var(--deco); transform: translateY(-2px); }
.cs-kaart__icoon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; color: var(--deco); }
.cs-kaart__icoon svg { width: 100%; height: 100%; }
.cs-kaart__naam { font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; line-height: 1.25; }

/* smalle tekstkolom onder de kaarten: minder tekstmassa */
.cs-smal {
  max-width: 42rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--t-body);
  line-height: 1.65;
  opacity: .78;
}
.cs-smal p + p { margin-top: 1rem; }
.cs-smal h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 2rem 0 .75rem; opacity: 1; }
.cs-smal .cs-bovenkop { font-size: var(--t-label); letter-spacing: .14em; opacity: .5; }
.cs-smal .cs-lijst li { font-size: var(--t-body); }

/* ═══ CASE · RESULTAAT (strakker) ═══════════════ */
.cs-cijfers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: 0;
  border-top: 1px solid var(--line);
}
.cs-cijfer {
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.25rem) 0;
  border-top: 0; border-right: 1px solid var(--line);
}
.cs-cijfer:last-child { border-right: 0; }
.cs-cijfer:not(:first-child) { padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.cs-cijfer strong {
  display: block; font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 700; line-height: .92; color: var(--accent); letter-spacing: -.03em;
}
.cs-cijfer span { display: block; margin-top: 1.1rem; font-size: var(--t-body); line-height: 1.4; opacity: .65; max-width: 18rem; }

@media (max-width: 860px) {
  .cs-cijfers { grid-template-columns: 1fr; }
  .cs-cijfer { border-right: 0; border-bottom: 1px solid var(--line); padding-inline: 0 !important; }
  .cs-cijfer:last-child { border-bottom: 0; }
  .cs-kaarten { grid-template-columns: 1fr 1fr; }
  .cs-kaart { padding: .9rem 1rem; gap: .7rem; }
  .cs-kaart__icoon { width: 1.8rem; height: 1.8rem; }
}

/* ═══ CASE · HET VERHAAL (los van de iconen) ═════ */
.cs-verhaal { padding-block: clamp(3.5rem, 7vw, 6rem); }
.cs-verhaal__grid {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 44rem);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}
.cs-verhaal__tekst { font-size: var(--t-body); line-height: 1.7; opacity: .82; }
.cs-verhaal__tekst p + p { margin-top: 1.1rem; }
.cs-verhaal__tekst h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; margin: 2.25rem 0 .8rem; opacity: 1;
}
.cs-verhaal__tekst h3:first-child { margin-top: 0; }
.cs-verhaal__tekst .cs-bovenkop { font-size: var(--t-label); letter-spacing: .14em; opacity: .5; margin-top: 2rem; }
.cs-verhaal__tekst .cs-lijst { margin-top: .9rem; }
.cs-verhaal__tekst .cs-lijst li { font-size: var(--t-body); }

/* "wat we deden" is nu puur visueel: meer lucht rond de kaarten */
.cs-deel--aanpak .cs-kaarten + .cs-media,
.cs-deel--aanpak .cs-kaarten + .cs-video { margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 860px) {
  .cs-verhaal__grid { grid-template-columns: 1fr; gap: 1.25rem; }
}


/* ═══ TIJDLIJN (over ons) ═══════════════════════ */
.tijdlijn { margin-top: clamp(3rem, 6vh, 5rem); }
.tijdlijn__spoor { position: relative; padding-top: 2.25rem; }
.tijdlijn__lijn {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line);
}
.tijdlijn__lijn::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--deco);
  animation: tijdlijnVullen 2.4s var(--ease) forwards;
}
.in .tijdlijn__lijn::after { animation-play-state: running; }
@keyframes tijdlijnVullen { to { width: 100%; } }
.tijdlijn__punten {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 1rem;
}
.tijdlijn__punt { position: relative; padding-top: .25rem; }
.tijdlijn__punt::before {
  content: ""; position: absolute; top: calc(-2.25rem - 4px); left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--deco);
}
.tijdlijn__jaar {
  display: block; font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700; line-height: 1; color: var(--accent);
}
.tijdlijn__wat {
  display: block; margin-top: .5rem;
  font-size: var(--t-label); letter-spacing: .04em; opacity: .7; line-height: 1.35;
}

/* carousel over de volle paginabreedte.
   Bewust width:100% i.p.v. 100vw: 100vw telt de schuifbalk mee en
   duwt de hele pagina horizontaal open. Dit element staat al buiten
   de container, dus 100% IS de volle breedte. */
.team-baan--vol {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  background: var(--green-dark);
  padding-block: clamp(1rem, 2vw, 1.75rem);
  margin-top: 0;
}

@media (max-width: 860px) {
  .tijdlijn__punten { grid-auto-flow: row; gap: 1.75rem; }
  .tijdlijn__lijn { top: 0; bottom: 0; height: auto; width: 1px; right: auto; }
  .tijdlijn__lijn::after { inset: 0 0 auto 0; width: 100%; height: 0; animation-name: tijdlijnVullenY; }
  @keyframes tijdlijnVullenY { to { height: 100%; } }
  .tijdlijn__spoor { padding-top: 0; padding-left: 1.75rem; }
  .tijdlijn__punt::before { top: .35rem; left: calc(-1.75rem - 4px); }
}

/* ═══ NETWERK (over ons): kop en tekst als één blok ═══ */
.netwerk__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.netwerk__tekst .section-title { margin-top: 1rem; }
.netwerk__body {
  margin-top: 1.5rem;
  font-size: var(--t-large);
  line-height: 1.55;
  opacity: .85;
  max-width: 34rem;
}
.netwerk__body + .netwerk__body { margin-top: 1.1rem; }
.netwerk__foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.netwerk__foto img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .netwerk__grid { grid-template-columns: 1fr; }
  .netwerk__foto { aspect-ratio: 4 / 3; }
}


/* ═══ CAROUSEL: naadloos doorlopen ══════════════ */
/* De twee helften moeten exact even breed zijn, anders springt de
   lus. Vaste breedtes i.p.v. clamp voorkomt afrondingsverschil,
   en translate3d houdt de animatie op de GPU. */
.team-spoor { transform: translate3d(0,0,0); }
.team-baan figure { width: 20rem; }
.team-baan figure:nth-child(odd) { width: 14rem; }
@media (max-width: 1200px) {
  .team-baan figure { width: 16rem; }
  .team-baan figure:nth-child(odd) { width: 11.5rem; }
}
@media (max-width: 700px) {
  .team-baan figure { width: 12.5rem; }
  .team-baan figure:nth-child(odd) { width: 9rem; }
}

/* ═══ SECTORPAGINA'S ════════════════════════════ */
.page-hero__acties { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }

.sect-kop { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sect-sub { margin-top: 1.25rem; font-size: var(--t-large); line-height: 1.55; opacity: .8; }

.sect-kaarten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.sect-kaart {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease);
}
.sect-kaart:hover { border-color: var(--deco); }
.sect-kaart h3 { font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.sect-kaart p { margin-top: .75rem; font-size: var(--t-body); line-height: 1.6; opacity: .72; }

.sect-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.sect-feature { display: flex; gap: 1rem; align-items: flex-start; }
.sect-feature__icoon { flex: none; width: 1.6rem; height: 1.6rem; color: var(--deco); margin-top: .15rem; }
.sect-feature__icoon svg { width: 100%; height: 100%; }
.sect-feature strong { display: block; font-size: var(--t-body); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.sect-feature p { margin-top: .45rem; font-size: var(--t-body); line-height: 1.6; opacity: .72; }

.sect-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.sect-case { display: block; }
.sect-case__media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--green-deep);
}
.sect-case__media img, .sect-case__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.sect-case__media video { opacity: 0; }
.sect-case:hover .sect-case__media video { opacity: 1; }
.sect-case:hover .sect-case__media img { transform: scale(1.04); }
.sect-case__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.sect-case__meta h3 { font-size: var(--t-large); font-weight: 600; text-transform: uppercase; }
.sect-case__meta p { font-size: var(--t-label); opacity: .6; text-align: right; }

@media (max-width: 860px) {
  .sect-features { grid-template-columns: 1fr; }
  .sect-case__meta { flex-direction: column; gap: .25rem; }
  .sect-case__meta p { text-align: left; }
}
.sect-case__extra { margin-top: .5rem; font-size: var(--t-body); line-height: 1.55; opacity: .62; }
.sect-knop { margin-top: clamp(2rem, 4vw, 3rem); }

/* ═══ FOOTER: sectorenkolom ═════════════════════ */
.footer__inner { grid-template-columns: 1.4fr 1fr 1.1fr 1fr; }
.footer__kop {
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  opacity: .45; margin-bottom: .35rem;
}

@media (max-width: 1100px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer__inner { grid-template-columns: 1fr; } }

/* ═══ VIDEO-THUMBNAILS: strakker ════════════════ */
.cs-video__kader::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,13,8,.05) 0%, rgba(6,13,8,.42) 100%);
  transition: opacity var(--dur) var(--ease);
}
.cs-video__kader:hover::after { opacity: .55; }
.cs-video__kader iframe ~ *, .cs-video__kader:has(iframe)::after { display: none; }
.cs-video__play {
  z-index: 2;
  box-shadow: 0 10px 34px rgba(6, 13, 8, .38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cs-film__kader { box-shadow: 0 40px 110px rgba(6,13,8,.5); }

/* ═══ SECTOREN-OVERZICHT ════════════════════════ */
.sect-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.sect-tegel {
  position: relative; display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sect-tegel:hover { border-color: var(--deco); transform: translateY(-3px); }
.sect-tegel__icoon { width: 2.4rem; height: 2.4rem; color: var(--deco); }
.sect-tegel__icoon svg { width: 100%; height: 100%; }
.sect-tegel h2 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 700; text-transform: uppercase; }
.sect-tegel p { font-size: var(--t-body); line-height: 1.55; opacity: .68; }
.sect-tegel__pijl { position: absolute; top: clamp(1.75rem,3vw,2.5rem); right: clamp(1.75rem,3vw,2.5rem); width: 1.1rem; height: 1.1rem; opacity: 0; transform: translateX(-.4rem); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.sect-tegel:hover .sect-tegel__pijl { opacity: .7; transform: none; }

/* ═══ ARTIKEL ═══════════════════════════════════ */
.art-hero {
  position: relative;
  padding: clamp(10rem, 18vh, 14rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  min-height: clamp(24rem, 46vh, 34rem);
  display: flex;
  align-items: flex-end;
}
/* het eigen beeld van het artikel vult de hero, met een verloop
   eroverheen zodat de titel altijd leesbaar blijft */
.art-hero > .section-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1 !important;
}
.art-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,13,8,.55) 0%, rgba(6,13,8,.35) 45%, rgba(6,13,8,.9) 100%);
  /* de generieke korrelregel (header::after) gaf hier opacity .055 + overlay mee,
     waardoor de titel op het lichte beeld onleesbaar werd */
  opacity: 1; mix-blend-mode: normal;
}
.art-hero .container { position: relative; z-index: 1; }
.art-hero__tag {
  display: inline-block; margin-top: clamp(1.75rem, 4vh, 2.75rem);
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  padding: .45rem 1rem; border: 1px solid rgba(243,239,232,.22); border-radius: 999px;
}
.art-hero__titel {
  font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 700; line-height: 1.08;
  letter-spacing: -.01em; max-width: 44rem; margin-top: 1.25rem;
}
.art-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.75rem; font-size: var(--t-label); letter-spacing: .06em; opacity: .6; }

.art-body { padding-block: clamp(3.5rem, 7vw, 6rem); }
.art-kolom { max-width: 45rem; margin-inline: auto; }
.art-kolom > * + * { margin-top: 1.25rem; }
.art-kolom p { font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.75; opacity: .84; }
.art-kolom h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; line-height: 1.15;
  margin-top: clamp(2.75rem, 5vw, 4rem); letter-spacing: -.005em;
}
.art-kolom h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 700; margin-top: 2.25rem; }
.art-kolom ul, .art-kolom ol { padding-left: 1.35rem; }
.art-kolom li { font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.7; opacity: .84; margin-top: .5rem; }
.art-kolom a { color: var(--accent); border-bottom: 1px solid currentColor; }
.art-kolom strong { font-weight: 700; opacity: 1; }
.art-kolom img { width: 100%; height: auto; border-radius: var(--radius); margin-block: 2rem; }
.art-kolom blockquote {
  margin-block: 2.25rem; padding-left: 1.5rem;
  border-left: 2px solid var(--deco);
  font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.45;
}
.art-kolom table { width: 100%; border-collapse: collapse; margin-block: 2rem; font-size: var(--t-body); }
.art-kolom th, .art-kolom td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.art-kolom th { font-weight: 700; text-transform: uppercase; font-size: var(--t-label); letter-spacing: .06em; }

/* ═══ GERELATEERDE ARTIKELEN ════════════════════ */
.art-rels { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.art-rel {
  display: flex; flex-direction: column; gap: .85rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.art-rel:hover { border-color: var(--deco); transform: translateY(-2px); }
.art-rel__tag { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; opacity: .5; }
.art-rel h3 { font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 600; line-height: 1.3; }
.art-hero__lead { margin-top: 1.25rem; font-size: var(--t-large); line-height: 1.5; max-width: 42rem; opacity: .85; }
.sect-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.sect-chips span {
  font-size: var(--t-label); letter-spacing: .04em;
  padding: .5rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; opacity: .8;
}


/* ═══ MAATWERKBLOKKEN: erven het sectiethema ════ */
.eb-sector-section, .lm-section {
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
}
.eb-sector-section h2, .lm-section h2 { color: inherit; }

/* faq__head miste opmaak op de sectorpagina's */
.faq__head { position: sticky; top: clamp(6rem, 12vh, 9rem); }
@media (max-width: 860px) { .faq__head { position: static; } }

/* ═══ EMPLOYER BRANDING (sectorpagina's) ════════ */
.eb__kop { max-width: 46rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.eb__lead { margin-top: 1.25rem; font-size: var(--t-large); line-height: 1.55; opacity: .85; }
.eb__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.eb__pijn h3, .eb__aanpak h3 {
  font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
  opacity: .55; margin-bottom: 1.75rem; font-weight: 600;
}

/* het probleem: bewust ingetogen */
.eb__pijn ul { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; }
.eb-pijn { display: flex; gap: 1rem; align-items: baseline; font-size: var(--t-body); line-height: 1.55; opacity: .72; }
.eb-pijn__cijfer {
  flex: none; min-width: 4.5rem;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 700;
  color: var(--accent); line-height: 1.1; letter-spacing: -.02em;
}
.eb-pijn__streep { flex: none; width: 1.75rem; height: 1px; background: var(--line); margin-top: .7em; }

/* de oplossing: de vier fases van het model, verbonden door één lijn */
.eb-fases { list-style: none; position: relative; display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.25rem); }
.eb-fases::before {
  content: ""; position: absolute;
  left: calc(clamp(2.75rem, 4vw, 3.4rem) / 2); top: .9rem; bottom: .9rem;
  width: 1px; background: linear-gradient(to bottom, var(--deco), rgba(243,239,232,.12));
}
.eb-fase { position: relative; display: flex; gap: clamp(1.1rem, 2vw, 1.75rem); align-items: flex-start; }
.eb-fase__cirkel {
  flex: none; position: relative; z-index: 1;
  width: clamp(2.75rem, 4vw, 3.4rem); height: clamp(2.75rem, 4vw, 3.4rem);
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--deco);
  background: var(--green-dark);
  font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; color: var(--deco);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.eb-fase:hover .eb-fase__cirkel { background: var(--deco); color: var(--green-dark); }
.eb-fase__tekst { padding-top: .35rem; }
.eb-fase__tekst strong {
  display: block; font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .4rem;
}
.eb-fase__tekst p { font-size: var(--t-body); line-height: 1.6; opacity: .75; max-width: 34rem; }
.eb__acties { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(3rem, 6vw, 5rem); }

@media (max-width: 860px) {
  .eb__grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .eb-pijn__cijfer { min-width: 3.5rem; }
}

/* ═══ AUTEURSBLOK (artikelen): kleine avatar, geen groot vlak ═══ */
.author-box {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: fit-content;
}
.author-box__avatar {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--deco);
  padding: 2px;
}
.author-box__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0; /* de generieke .art-kolom img-marge duwde de foto uit het cirkeltje */
}
.author-box__info h4 {
  font-size: var(--t-body);
  font-weight: 700;
  margin-bottom: .2rem;
}
.author-box__info p {
  font-size: var(--t-label);
  line-height: 1.4;
  opacity: .6;
  max-width: 26rem;
}

@media (max-width: 600px) {
  .author-box { max-width: 100%; flex-wrap: wrap; }
}

/* ═══ LEAD MAGNET (checklist-download) ══════════ */
.lm__grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.lm__visual { position: relative; }
.lm__visual img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(6, 13, 8, .22);
  border: 1px solid var(--line);
}
.lm__badge {
  position: absolute;
  top: 1.1rem; left: 1.1rem;
  z-index: 1;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--green-dark);
  font-size: var(--t-label);
  letter-spacing: .05em;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(6, 13, 8, .18);
}
.lm__meta {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1.25rem;
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.lm__intro { margin-top: 1.25rem; font-size: var(--t-large); line-height: 1.55; opacity: .85; max-width: 34rem; }
.lm__features {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.5rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lm__features li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--t-body); opacity: .85; }
.lm__vink { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: #4F8B5A; }
.lm__vink svg { width: 100%; height: 100%; }

.lm-form { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.lm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: .85rem; }
.lm-form input[type="text"], .lm-form input[type="email"] {
  width: 100%;
  padding: .9rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.lm-form input[type="text"]:not([name="organisation"]) { margin-bottom: .85rem; }
.lm-form input::placeholder { color: var(--fg); opacity: .4; }
.lm-form input:focus { outline: none; border-color: var(--deco); }
.lm-form .btn { width: 100%; justify-content: space-between; margin-top: .35rem; }
.lm-form__msg { display: none; margin-top: 1rem; font-size: var(--t-body); }
.lm-form__msg--ok { color: #4F8B5A; }
.lm-form__msg--err { color: #C0524A; }
.lm-form.is-success .lm-form__msg--ok,
.lm-form.is-error .lm-form__msg--err { display: block; }
.lm-form__legal { margin-top: 1rem; font-size: var(--t-label); opacity: .5; line-height: 1.5; }
.lm-form__legal a { text-decoration: underline; text-underline-offset: .15em; }

@media (max-width: 860px) {
  .lm__grid { grid-template-columns: 1fr; }
  .lm__visual { max-width: 20rem; margin-inline: auto; }
  .lm__features { grid-template-columns: 1fr; }
  .lm-form__row { grid-template-columns: 1fr; }
}
.lm__content { min-width: 0; }


/* ═══ FOOTER · DE CIRKEL SLUIT (4 sep 2026) ═════════
   De site opent en sluit met dezelfde zin en dezelfde vorm.
   Element heeft class="footer f2": .footer levert thema, korrel
   en de .in-waarnemer uit home.js; .f2 levert het ontwerp. */
/* ── De footer zelf ── */
.f2 {
  position: relative;
  background: var(--green-deep);
  color: var(--cream);
  /* alleen zijwaarts knippen: de ring mag boven de footer uitsteken en
     zo het afsluitblok aan de footer hechten */
  overflow-x: clip;
  overflow-y: visible;
  padding-top: clamp(6rem, 12vw, 11rem);
  isolation: isolate;
}

/* De ring: één grote cirkel, half over de rechterrand, tekent zichzelf bij inscrollen. */
/* Hoog en groot geplaatst: de onderste boog eindigt boven de statusregel,
   zodat de ring achter de titel doorloopt en niet door de kleine tekst snijdt. */
.f2__ring {
  position: absolute;
  top: clamp(-24rem, -34vw, -14rem);
  right: -20vw;
  width: min(84vh, 66vw);
  height: min(84vh, 66vw);
  pointer-events: none;
  z-index: 0;
}
.f2__ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--ring, 1);
  /* ronde linecaps tonen twee stipjes bij dashoffset 1; fade de ring in over
     het eerste kwart van de tekening zodat die stipjes nooit los staan */
  opacity: calc(0.2 * min(1, (1 - var(--ring, 1)) * 4));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
/* tweede, stillere ring erbinnen: geeft diepte, tekent net iets later */
.f2__ring circle:nth-child(2) {
  stroke-dasharray: 1;
  stroke-dashoffset: var(--ring2, 1);
  stroke-width: 0.7;
  opacity: calc(0.09 * min(1, (1 - var(--ring2, 1)) * 4));
}

.f2__top { position: relative; z-index: 1; }
/* het merk komt onderaan nog één keer terug, rustig en op formaat */
.f2__logo { display: block; width: fit-content; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.f2__logo img {
  height: clamp(2.1rem, 3vw, 3.1rem);
  width: auto;
  opacity: 0.9;
  transition: opacity var(--dur-fast) var(--ease);
}
.f2__logo:hover img { opacity: 1; }
.f2__eyebrow { margin-bottom: 1.6rem; }

/* Titel: exact de hero-behandeling. Zo opent en sluit de site met dezelfde zin. */
.f2__title {
  font-size: var(--t-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width: 12ch;
}
.f2__line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.f2__line > span {
  display: inline-block;
  transition: transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
html.js .f2__line > span { transform: translateY(112%); }
html.js .f2.in .f2__line > span { transform: none; }
.f2__line--serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 0.92em;
  color: var(--gold);
  overflow: visible;
}

/* Middenblok: het mailadres is het op één na grootste ding op de pagina. */
.f2__mid {
  position: relative; z-index: 1;
  margin-top: clamp(3rem, 6vw, 5.5rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem 3rem;
}
/* Mailadres: klein en strak, in de sans. Het valt op door rust, niet door formaat. */
.f2__mail {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--cream);
  width: fit-content;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.f2__mail::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.08em;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.f2__mail:hover { color: var(--gold); }
.f2__mail:hover::after { transform: scaleX(1); }

.f2__status {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1.6;
}
.f2__status .pulse-dot { flex: none; }
.f2__status time { font-variant-numeric: tabular-nums; color: var(--gold); }
.f2__status .sep { opacity: 0.45; }

/* Links: één regel, geen kolommen. Hover vult het woord met goud, van links naar rechts. */
.f2__links {
  position: relative; z-index: 1;
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  display: flex; flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.f2__links a {
  position: relative;
  display: inline-block;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  opacity: 0.8;
  padding-block: 0.35rem;
  transition: opacity var(--dur-fast) var(--ease);
}
.f2__links a > span { position: relative; display: inline-block; }
.f2__links a > span::after {
  content: attr(data-t);
  position: absolute; inset: 0;
  color: var(--gold);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur) var(--ease);
}
.f2__links a:hover { opacity: 1; }
.f2__links a:hover > span::after { clip-path: inset(0 0 0 0); }
.f2__links a.is-lang { margin-left: auto; opacity: 0.5; }

/* Basis: socials links, legal midden, naar-boven rechts. */
.f2__base {
  position: relative; z-index: 1;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.6rem 2rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  font-size: var(--t-label);
}
.f2__socials { display: flex; gap: 0.6rem; }
.f2__socials a, .f2__up {
  display: grid; place-items: center;
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--cream);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.f2__socials svg, .f2__up svg { width: 1.05rem; height: 1.05rem; }
.f2__socials a:hover, .f2__up:hover {
  background: var(--cream); color: var(--green-dark); border-color: var(--cream);
  transform: scale(1.08);
}
.f2__legal { text-align: center; opacity: 0.5; }
.f2__legal a {
  border-bottom: 1px solid rgba(243, 239, 232, 0.3);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease);
}
.f2__legal a:hover { border-color: var(--gold); }
.f2__up { justify-self: end; }
.f2__up svg { transition: transform var(--dur-fast) var(--ease); }
.f2__up:hover svg { transform: translateY(-2px); }

/* Adres als stille regel onder de titel, niet in een kolom. */
.f2__adres {
  margin-top: 1.2rem;
  font-size: var(--t-body);
  opacity: 0.5;
}
.f2__adres a { border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease); }
.f2__adres a:hover { border-color: var(--gold); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .f2__ring { right: -45vw; width: 120vw; height: 120vw; top: 8vw; }
  .f2__mid { grid-template-columns: 1fr; align-items: start; }
  .f2__status { white-space: normal; }
  .f2__links a.is-lang { margin-left: 0; }
  .f2__base { grid-template-columns: 1fr auto; }
  .f2__legal { grid-column: 1 / -1; text-align: left; order: 3; }
}

/* ── Reduced motion: alles staat meteen ── */
@media (prefers-reduced-motion: reduce) {
  .f2__ring circle { stroke-dashoffset: 0 !important; }
  html.js .f2__line > span { transform: none; transition: none; }
  .f2__links a > span::after, .f2__mail::after { transition: none; }
}
  


/* ═══ CREW · foto's zonder namen, wel rollen ═══════ */
.crew { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.crew__kop { font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1rem; }
.crew__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; }
.crew__lid { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; width: 5.6rem; text-align: center; }
.crew__foto { display: block; width: 4.6rem; height: 4.6rem; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 0 0 0 var(--deco); transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.crew__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.crew__lid:hover .crew__foto { box-shadow: 0 0 0 3px var(--deco); transform: translateY(-2px); }
.crew__rol { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; line-height: 1.3; }
.crew--solo { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.crew--solo .crew__lijst { flex: none; }
.crew--solo .crew__lid { width: auto; }
.crew--solo .crew__kop { margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--t-body); opacity: 0.8; max-width: 26ch; }

/* ═══ Lijst i.p.v. kaarten: rijen zonder pijl-kolom ═══ */
.services__list--fase .service { grid-template-columns: 4.5rem 1.2fr 1.6fr; }
.services__list--fase .service:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .services__list--fase .service { grid-template-columns: 3.5rem 1fr; } }

/* ═══ Eén beeldbehandeling voor alle case-tegels ═══ */
/* Alleen stills. Een filter op <video> dwingt Safari per frame naar een software-pad en
   dat maakt de hele pagina traag; het verschil op bewegend beeld zie je toch niet. */
.cs__media img, .work-card__media img, .sect-case__media img { filter: saturate(0.88) contrast(1.03); }

/* ═══ WERKWIJZE · verticale tijdlijn ════════════
   Sitewide component voor elk stappenplan (over ons, contact, film,
   websites, groei, care). Links een gepinde kop, rechts de stappen
   aan een rail met ringnodes. Werkt op donker en licht via de
   tokens. Zonder JS staat alles gewoon: de rail is een haarlijn en
   de nodes rusten. GSAP (scroll-fx) vult de rail en schakelt nodes. */
.stappen {
  /* gloed en zachte vlakken volgen het accent van het thema */
  --stap-gloed: rgba(242, 226, 164, 0.35);
  --stap-gloed-zacht: rgba(242, 226, 164, 0.16);
  --stap-vlak: rgba(242, 226, 164, 0.06);
  --stap-stippel: rgba(242, 226, 164, 0.45);
  --node: clamp(3.1rem, 3.6vw, 3.9rem);
  --stap-gap: clamp(3.5rem, 7.5vw, 8.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: clamp(3rem, 7vw, 9rem);
  align-items: start;
}
.stappen .section-head { display: block; margin-bottom: 0; }
[data-theme="light"] .stappen {
  --stap-gloed: rgba(12, 24, 15, 0.22);
  --stap-gloed-zacht: rgba(12, 24, 15, 0.1);
  --stap-vlak: rgba(12, 24, 15, 0.05);
  --stap-stippel: rgba(12, 24, 15, 0.38);
}
.stappen__kop { position: sticky; top: clamp(5.5rem, 16vh, 9rem); }
.stappen__intro {
  margin-top: 1.5rem;
  max-width: 34ch;
  font-size: var(--t-large);
  line-height: 1.45;
  opacity: 0.72;
}

/* De lijst met rail */
.stappen__lijst {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--stap-gap);
  padding-top: 0.4rem;
}
.stappen__fill {
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: calc(var(--node) / 2 + 0.4rem);
  width: 2px;
  height: 0;
  background: linear-gradient(to bottom, var(--stap-gloed), var(--accent));
  pointer-events: none;
}
.stappen__fill::after {
  /* de kop van de lijn gloeit zacht: leest als 'hier ben je' */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, 50%);
  box-shadow: 0 0 0 0.35rem var(--stap-gloed-zacht), 0 0 1.6rem 0.25rem var(--stap-gloed);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.stappen--live .stappen__fill::after { opacity: 1; }

.stap {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 2.6vw, 2.75rem);
  align-items: start;
  transition: opacity var(--dur) var(--ease);
}
/* haarlijn per stap, van node tot volgende node: exact zonder JS */
.stap::before {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 0.5px);
  top: var(--node);
  bottom: calc(-1 * var(--stap-gap));
  width: 1px;
  background: var(--line);
}
.stap:last-child::before { display: none; }
/* zodra de scroll-laag stuurt, dimmen de stappen die niet aan de beurt zijn */
.stappen--live .stap { opacity: 0.5; }
/* op licht valt gedimde tekst sneller weg tegen de achtergrond */
[data-theme="light"] .stappen--live .stap { opacity: 0.62; }
.stappen--live .stap.is-actief,
.stappen--live .stap.is-gedaan { opacity: 1; }
.stappen--live .stap.is-gedaan:not(.is-actief) { opacity: 0.7; }

.stap__node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node); height: var(--node);
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--deco);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stap__node svg.stap__icoon { width: 38%; height: 38%; position: relative; z-index: 1; }
.stap__ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  transform: rotate(-90deg);
}
.stap__ring circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-slow) var(--ease);
}
.stap.is-actief .stap__ring circle,
.stap.is-gedaan .stap__ring circle { stroke-dashoffset: 0; }
.stap.is-actief .stap__node { transform: scale(1.08); }
.stap.is-gedaan .stap__node { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.stap.is-gedaan.is-actief .stap__node { background: var(--bg); color: var(--accent); }
/* de actieve node draagt een tweede, gestippelde ring die langzaam draait */
.stap__node::after {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border-radius: 50%;
  border: 1px dashed var(--stap-stippel);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stap.is-actief .stap__node::after { opacity: 1; transform: none; animation: stap-draai 22s linear infinite; }
@keyframes stap-draai { to { transform: rotate(360deg); } }

.stap__body { padding-top: calc(var(--node) / 2 - 0.75em); max-width: 40rem; }
.stap__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.stap__label::after { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.55; }
.stap:hover .stap__titel { color: var(--accent); }
.stap:hover .stap__node { transform: scale(1.08); }
.stap__titel {
  transition: color var(--dur-fast) var(--ease);
  font-size: clamp(1.5rem, 2.4vw, 2.35rem);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.stap__body p { margin-top: 1rem; font-size: var(--t-body); opacity: 0.72; max-width: 52ch; }
.stap__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.35rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stap__tag::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
.stap.is-actief .stap__tag { border-color: var(--stap-stippel); background: var(--stap-vlak); }

@media (max-width: 860px) {
  .stappen { grid-template-columns: 1fr; gap: 3rem; }
  .stappen__kop { position: static; }
  .stappen__intro { font-size: var(--t-body); }
  .stappen { --node: 2.6rem; --stap-gap: 2.75rem; }
  .stap { column-gap: 1.1rem; }
  .stap__body p { max-width: none; }
  .stap__node::after { inset: -0.4rem; }
  .stappen--live .stap { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stap.is-actief .stap__node::after { animation: none; }
  .stap__ring circle, .stap__node { transition: none; }
}

/* Safari 15 kent overflow: clip niet; dan liever de ring niet laten uitsteken
   dan een pagina die zijwaarts scrolt. */
@supports not (overflow: clip) { .f2 { overflow: hidden; } }