/* J&L Group · huisstijl v2
   Papier draagt, inkt spreekt, steen ordent, groen markeert. */

:root {
  --ink: #141413;
  --green: #1F4D3A;
  --paper: #F5F4F0;
  --stone: #D9D7D0;
  --light: #F2F1ED;   /* letters op donker */
  --mint: #7FB59A;    /* vierkant / accent op donker */

  /* Vloeiend tussen mobiel (390) en desktop (1440) */
  --pad-x: clamp(24px, -11.66px + 9.14vw, 120px);
  --pad-y: clamp(96px, 72.23px + 6.1vw, 160px);
  --h2: clamp(36px, 25.6px + 2.667vw, 64px);
  --body-lg: clamp(17px, 15.5px + 0.476vw, 22px);
  --label: clamp(11px, 10.6px + 0.1vw, 12px);
  --focus: var(--green);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
address { font-style: normal; }
input, textarea, button { font: inherit; color: inherit; }

a { color: var(--ink); }
a:hover { color: var(--green); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.on-dark, .mission, .contact, .footer { --focus: var(--mint); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: -1px; padding: 0; border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 16px; color: var(--paper); }

/* ---------- Basisstijlen ---------- */

.label {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
}

.h2 {
  font-size: var(--h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.section {
  padding: var(--pad-y) var(--pad-x);
}
.section--flush-top { padding-top: 0; }
.section--rule { border-top: 2px solid var(--stone); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 12px + 0.6vw, 20px);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  font-size: clamp(15px, 14.6px + 0.1vw, 16px);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}
.button--ink { background: var(--ink); color: var(--paper); }
.button--ink:hover { background: var(--green); color: var(--paper); }
.button--light { background: var(--light); color: var(--ink); }
.button--light:hover { background: var(--mint); color: var(--ink); }
.button--block { width: 100%; justify-content: center; padding: 12px 24px; text-align: center; }

/* ---------- Scroll-indicator (H) ---------- */

.progress {
  position: fixed;
  right: 24px;
  top: 120px;
  bottom: 120px;
  width: 10px;
  z-index: 40;
  pointer-events: none;
}
.progress__rail {
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 2px;
  background: var(--stone);
}
.progress__square {
  position: absolute;
  left: 0; top: 0;
  width: 10px; height: 10px;
  background: var(--green);
  will-change: transform;
}
.progress.is-dark .progress__square { background: var(--mint); }

/* ---------- Intro: hero (A, B) + missie (C) ---------- */

.intro { position: relative; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}

.nav {
  position: relative;
  z-index: 3;
  height: 96px;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink);
}
.nav__mono { display: none; }
.nav__toggle { display: none; }
.nav__menu { display: flex; gap: 4px; }
.nav__menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.nav__menu a:hover { color: var(--green); }

.hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 34.7px + 1.52vw, 56px);
  padding: 0 24px 64px;
  text-align: center;
}
.hero__mono {
  width: clamp(220px, 153px + 17.1vw, 400px);
  height: auto;
  aspect-ratio: 173 / 130;
  overflow: visible;
}
.mono-guide { opacity: 0; }
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 14.5px + 0.38vw, 20px);
}
.hero__title {
  font-size: clamp(44px, 27.66px + 4.19vw, 88px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.hero__lead {
  font-size: clamp(17px, 15.9px + 0.286vw, 20px);
  line-height: 1.5;
  max-width: 560px;
  text-wrap: pretty;
}

.hero__zoom {
  position: absolute;
  left: 0; top: 0;
  width: 10px; height: 10px;
  background: var(--green);
  z-index: 4;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 50%;
}

/* Scroll-hint: alleen zichtbaar zolang het logo nog moet worden opgebouwd */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  pointer-events: none;
}
.intro.is-stacked .scroll-hint { display: flex; }
.scroll-hint__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.scroll-hint__track {
  position: relative;
  width: 2px;
  height: 56px;
  background: var(--stone);
}
.scroll-hint__dot {
  position: absolute;
  left: -4px;
  top: 0;
  width: 10px;
  height: 10px;
  background: var(--green);
  animation: scroll-hint 1.8s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes scroll-hint {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  70%  { transform: translateY(46px); opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* Voorkomt een flits van de eindstand voordat GSAP de beginstand zet */
.anim-pending .hero__mono,
.anim-pending .hero__text { visibility: hidden; }

.mission {
  background: var(--green);
  color: var(--paper);
  padding: clamp(96px, 50px + 11.8vw, 180px) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 21.3px + 2.74vw, 64px);
}
.mission:focus { outline: none; }
.mission__text {
  font-size: clamp(36px, 18.17px + 4.571vw, 84px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 1180px;
  text-wrap: pretty;
}
.mission__text .word { transition: none; }

/* Desktop-pin: missie ligt als laag over de hero (B gaat naadloos over in C) */
.intro.is-stacked .mission {
  background: transparent; /* het zoom-vierkant levert het groen */
  position: absolute;
  inset: 0;
  z-index: 5;
  justify-content: center;
  visibility: hidden;
}

/* ---------- Ons verhaal (D) ---------- */

.story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.story__intro { display: flex; flex-direction: column; gap: clamp(20px, 16.6px + 0.88vw, 32px); }
.story__body { font-size: var(--body-lg); line-height: 1.55; text-wrap: pretty; }

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 28.6px + 0.88vw, 44px);
  padding: 8px 0 0 clamp(40px, 33px + 1.8vw, 64px);
}
.timeline::before,
.timeline__line {
  content: "";
  position: absolute;
  left: clamp(7px, 6.4px + 0.15vw, 9px);
  top: 18px;
  bottom: 40px;
  width: 2px;
  background: var(--ink);
  transform-origin: 50% 0;
}
.timeline.has-line::before { display: none; }
.milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.milestone__mark {
  position: absolute;
  left: calc(-1 * clamp(40px, 33px + 1.8vw, 64px));
  top: 2px;
  width: clamp(16px, 14.9px + 0.29vw, 20px);
  height: clamp(16px, 14.9px + 0.29vw, 20px);
  background: var(--ink);
}
.milestone--goal .milestone__mark { background: var(--green); }
.milestone__date {
  font-size: clamp(14px, 13.6px + 0.1vw, 15px);
  font-weight: 700;
  color: var(--green);
}
.milestone__text { font-size: clamp(17px, 15.1px + 0.48vw, 22px); line-height: 1.38; }
.milestone--goal .milestone__text { font-weight: 800; }

/* Animatiestanden voor D */
.is-animated .milestone__mark {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--stone);
  transition: none;
}
.is-animated .milestone.is-passed .milestone__mark { background: var(--ink); box-shadow: none; }
.is-animated .milestone.is-active .milestone__mark { background: var(--green); box-shadow: none; }
.is-animated .milestone.is-active .milestone__date { font-weight: 800; }

/* ---------- Wat we doen ---------- */

.services { display: flex; flex-direction: column; gap: clamp(32px, 25px + 1.83vw, 56px); }
.services__list { display: grid; grid-template-columns: 1fr; gap: 28px; }
.service {
  border-top: 2px solid var(--ink);
  padding-top: clamp(16px, 13px + 0.76vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 7.8px + 0.57vw, 16px);
}
.service__title {
  font-size: clamp(24px, 21.8px + 0.57vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.service p { font-size: clamp(17px, 16.6px + 0.1vw, 18px); line-height: 1.55; text-wrap: pretty; }

/* ---------- Werkwijze (E) ---------- */

.process { display: flex; flex-direction: column; gap: clamp(32px, 25px + 1.83vw, 56px); }

.steps { position: relative; display: flex; flex-direction: column; gap: 12px; }
.steps__track { position: relative; height: 16px; }
.steps__marker {
  position: absolute;
  top: 0;
  left: calc(4 * (100% - 16px) / 5 + 16px); /* eindstand: boven stap 5 */
  width: 16px; height: 16px;
  background: var(--green);
}
.steps__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.step { position: relative; }
.step__card {
  position: relative;
  height: 100%;
  min-height: 240px;
  background: var(--ink);
  color: var(--paper);
  padding: 28px clamp(12px, 1.67vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.step__body { display: flex; flex-direction: column; gap: 10px; }
.step__title {
  font-size: clamp(18px, 1.94vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  hyphens: auto;
  overflow-wrap: break-word;
}
.step__text { font-size: clamp(15px, 14.6px + 0.1vw, 16px); line-height: 1.45; }

/* Lege staat (alleen in animatie): omlijnde kaart onder de vulling */
.step__card--base {
  position: absolute;
  inset: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--stone);
}
.step__card--base .step__text { visibility: hidden; }
.step__card--fill { z-index: 1; }

.process__cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 64px;
  border-top: 2px solid var(--ink);
  padding-top: 40px;
}
.process__pitch {
  font-size: clamp(22px, 18.3px + 0.95vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 820px;
  text-wrap: pretty;
}
.process__cta .button { flex-shrink: 0; }

/* ---------- Merken (F) ---------- */

.brands {
  padding-right: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 20px + 3.05vw, 64px);
  overflow: hidden;
}
.brands__row {
  display: flex;
  gap: 32px;
  will-change: transform;
}
.brand-card {
  --card-w: min(560px, calc((100vw - var(--pad-x) - 32px - 56px) / 2));
  width: var(--card-w);
  flex-shrink: 0;
  border: 2px solid var(--ink);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.brand-card__logo {
  height: min(340px, 38vh);
  min-height: 200px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.brand-card__logo img { width: min(320px, 80%); height: auto; }
.brand-card__text { display: flex; flex-direction: column; gap: 12px; }
.brand-card__name {
  font-size: clamp(30px, 26.3px + 0.95vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand-card__text p { font-size: clamp(16px, 15.3px + 0.19vw, 18px); line-height: 1.5; text-wrap: pretty; }

.brand-card--next {
  border-color: var(--stone);
  background: repeating-linear-gradient(-45deg, var(--stone) 0 2px, var(--paper) 2px 18px);
}
.brand-card__tag {
  align-self: flex-start;
  background: var(--paper);
  padding: 4px 8px;
  margin: -4px -8px;
}
.brand-card__next { flex: 1; display: flex; align-items: center; justify-content: center; }
.brand-card__note {
  background: var(--paper);
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}
.brand-card__next-title {
  font-size: clamp(24px, 21px + 0.76vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.brand-card__note p { font-size: clamp(15px, 14.6px + 0.1vw, 16px); }


/* ---------- honezt uitgelicht ---------- */

.feature {
  background: var(--stone);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.feature__image {
  height: clamp(420px, 340px + 20vw, 720px);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 11.6px + 0.1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.feature__content { display: flex; flex-direction: column; gap: clamp(24px, 21px + 0.76vw, 32px); }
.feature__title {
  font-size: clamp(40px, 28.1px + 3.05vw, 72px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.feature__lead { font-size: clamp(17px, 15.9px + 0.286vw, 20px); line-height: 1.55; }

/* ---------- Formulieren ---------- */

.form { display: flex; flex-direction: column; gap: 24px; }
.form--light { gap: 12px; margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.input {
  width: 100%;
  height: clamp(52px, 50.5px + 0.38vw, 56px);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 0 16px;
  font-size: clamp(17px, 16.6px + 0.1vw, 18px);
  -webkit-appearance: none;
  appearance: none;
}
.input--area { height: auto; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.input:focus-visible { outline-offset: 2px; }
.form--dark .input {
  border-color: var(--light);
  background: var(--ink);
  color: var(--light);
}
.form--dark .button { align-self: flex-start; padding: 0 32px; }

.form__error {
  font-size: 16px;
  line-height: 1.5;
  border-left: 4px solid currentColor;
  padding: 4px 0 4px 12px;
}
.form--dark .form__error a { color: var(--light); }
.form__thanks {
  border: 2px solid currentColor;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(17px, 16.6px + 0.1vw, 18px);
}
.form__thanks:focus { outline: none; }
.form__thanks:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.form__thanks-title { font-size: clamp(22px, 20px + 0.5vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.feature .form__thanks { margin-top: 16px; border-color: var(--ink); }
.contact .form__thanks-title::before {
  content: "";
  display: inline-block;
  width: 0.5em; height: 0.5em;
  margin-right: 0.35em;
  background: var(--mint);
}
.feature .form__thanks-title::before {
  content: "";
  display: inline-block;
  width: 0.5em; height: 0.5em;
  margin-right: 0.35em;
  background: var(--green);
}

/* ---------- Wie we zijn ---------- */

.team { display: flex; flex-direction: column; gap: clamp(32px, 25px + 1.83vw, 56px); }
.team__list { display: flex; flex-direction: column; border-bottom: 2px solid var(--ink); }
.person { border-top: 2px solid var(--ink); }
.person__head { font-size: inherit; font-weight: inherit; }
.person__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px 40px;
  padding: clamp(20px, 16.6px + 0.88vw, 32px) 0 clamp(28px, 24.6px + 0.88vw, 40px);
  background: none;
  border: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.person__name {
  font-size: clamp(56px, 29.26px + 6.857vw, 128px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  transition: color 0.2s;
}
.person__toggle:hover .person__name { color: var(--green); }
.person__meta { display: flex; align-items: flex-end; gap: 20px; margin-left: auto; }
.person__role { font-size: clamp(11px, 10.25px + 0.19vw, 13px); line-height: 1.6; text-align: right; }
.person__role .sep, .br-mobile { display: none; }
.person__icon {
  position: relative;
  width: clamp(32px, 29px + 0.76vw, 40px);
  height: clamp(32px, 29px + 0.76vw, 40px);
  flex-shrink: 0;
  border: 2px solid var(--ink);
}
.person__icon::before,
.person__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 40%; height: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.person__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.25s; }
.person__toggle[aria-expanded="true"] .person__icon { background: var(--green); border-color: var(--green); }
.person__toggle[aria-expanded="true"] .person__icon::before { background: var(--paper); }
.person__toggle[aria-expanded="true"] .person__icon::after { transform: translate(-50%, -50%) rotate(0deg); background: var(--paper); }

/* Uitklappen via grid-rows: soepel zonder vaste hoogte */
.person__more {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}
.person__more.is-closed {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.4s;
}
.person__inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.person__photo {
  aspect-ratio: 4 / 5;
  max-width: 360px;
  background: var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  padding-bottom: clamp(32px, 25px + 1.83vw, 56px);
  font-size: clamp(17px, 15.9px + 0.286vw, 20px);
  line-height: 1.55;
}
.person__intro {
  font-size: clamp(22px, 18.3px + 0.95vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .person__inner { grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(40px, 6vw, 96px); }
  .person__bio { justify-content: flex-end; }
}

/* ---------- Vraag & antwoord ---------- */

.faq { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.faq__list { border-bottom: 2px solid var(--ink); }
.faq__item { border-top: 2px solid var(--ink); }
.faq__q { font-size: inherit; }
.faq__q button {
  width: 100%;
  min-height: clamp(64px, 55px + 2.29vw, 88px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 13px + 0.76vw, 24px);
  background: none;
  border: 0;
  padding: clamp(16px, 14.5px + 0.38vw, 20px) 0;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-size: clamp(19px, 16.3px + 0.67vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.faq__q button:hover { color: var(--green); }
.faq__icon {
  position: relative;
  width: clamp(32px, 29px + 0.76vw, 40px);
  height: clamp(32px, 29px + 0.76vw, 40px);
  flex-shrink: 0;
  border: 2px solid var(--ink);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 40%; height: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
[aria-expanded="true"] .faq__icon { background: var(--green); border-color: var(--green); }
[aria-expanded="true"] .faq__icon::before { background: var(--paper); }
[aria-expanded="true"] .faq__icon::after { display: none; }
.faq__a p {
  padding: 0 0 clamp(24px, 21px + 0.76vw, 32px);
  font-size: clamp(16px, 15px + 0.29vw, 19px);
  line-height: 1.55;
  max-width: 760px;
  text-wrap: pretty;
}

/* ---------- Contact ---------- */

.contact {
  background: var(--ink);
  color: var(--light);
  padding-bottom: clamp(96px, 57.6px + 9.85vw, 200px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 25px + 3.81vw, 80px);
}
.contact__title {
  font-size: clamp(44px, 24.69px + 4.952vw, 96px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.contact__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.contact .label { color: var(--light); }
.contact__mail {
  justify-self: start;
  font-size: clamp(34px, 22.86px + 2.857vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--light);
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: clamp(4px, 3.3px + 0.19vw, 6px);
  text-underline-offset: clamp(8px, 5.8px + 0.57vw, 14px);
  overflow-wrap: anywhere;
  padding: 4px 0 12px;
}
.contact__mail:hover { color: var(--mint); }

/* ---------- Footer (G) ---------- */

.footer {
  background: var(--ink);
  color: var(--light);
  padding: 80px var(--pad-x) clamp(40px, 34px + 1.52vw, 56px);
  border-top: 1px solid var(--light);
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 43px + 5.33vw, 120px);
  overflow: hidden;
}
.footer__mono-wrap { display: flex; justify-content: center; padding-top: clamp(0px, -29.7px + 7.62vw, 80px); }
.footer__mono { width: clamp(280px, 161px + 30.5vw, 600px); height: auto; aspect-ratio: 173 / 130; overflow: visible; }
.footer__details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  font-size: 16px;
  line-height: 1.6;
}
.footer__name { font-weight: 700; }
.footer__details a {
  color: var(--light);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer__details a:hover { color: var(--mint); }

/* ---------- Breakpoints ---------- */

@media (min-width: 768px) {
  .services__list { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

@media (min-width: 960px) {
  .story { grid-template-columns: 1fr 1fr; gap: clamp(64px, 6vw + 10px, 120px); }
  .timeline { padding-top: 8px; }
  .feature { grid-template-columns: 1.1fr 1fr; gap: clamp(56px, 6.7vw, 96px); }
  .faq { grid-template-columns: 1fr 2fr; gap: 80px; }
  .faq__a p { padding-right: 64px; }
  .contact__grid { grid-template-columns: 1fr 1fr; gap: clamp(56px, 6.7vw, 96px); }
  .contact__mail { padding-top: 28px; }
}

/* Mobiel · onder 768px */
@media (max-width: 767.98px) {
  .progress { right: 8px; top: 96px; bottom: 96px; width: 8px; }
  .progress__rail { left: 3px; }
  .progress__square { width: 8px; height: 8px; }

  .hero { min-height: 640px; height: 100svh; max-height: 900px; }
  .nav { height: 72px; padding: 0 12px 0 20px; }
  .nav__wordmark { display: none; }
  .nav__mono { display: block; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .nav__menu {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 72px;
    background: var(--ink);
    padding: 8px 20px 20px;
    flex-direction: column;
    gap: 0;
    --focus: var(--mint);
  }
  .nav.is-open .nav__menu { display: flex; }
  .nav__menu li + li a { border-top: 1px solid var(--light); }
  .nav__menu a {
    min-height: 56px;
    padding: 0;
    color: var(--light);
    font-size: 22px;
    font-weight: 800;
  }
  .nav__menu a:hover { color: var(--mint); }
  .hero__body { padding: 0 24px 56px; }

  .mission__text { line-height: 1.05; letter-spacing: -0.03em; }

  .steps { display: block; }
  .steps__track { display: none; }
  .steps__list { grid-template-columns: 1fr; padding-left: 24px; }
  .step__card { min-height: 0; padding: 18px; gap: 6px; justify-content: flex-start; }
  .step__body { gap: 6px; }
  .step__title { font-size: 22px; }
  .steps__list .step:last-child::before {
    content: "";
    position: absolute;
    left: -24px; top: 20px;
    width: 12px; height: 12px;
    background: var(--green);
  }
  .steps.is-animated .steps__list .step:last-child::before { display: none; }
  .steps.is-animated .steps__track { display: block; position: absolute; inset: 0; height: auto; pointer-events: none; }
  .steps.is-animated .steps__marker { width: 12px; height: 12px; left: 0; top: 0; }

  .process__cta { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 24px; }
  .process__cta .button { min-height: 52px; padding: 0 20px; }

  .brands { padding-right: var(--pad-x); }
  .brands__row { flex-direction: column; gap: 20px; }
  .brand-card { width: auto; padding: 20px; gap: 18px; }
  .brand-card__logo { height: 200px; padding: 24px; }
  .brand-card--next { height: 220px; background: repeating-linear-gradient(-45deg, var(--stone) 0 2px, var(--paper) 2px 16px); }
  .brand-card__note { padding: 14px 20px; gap: 4px; }

  .feature .label { margin-top: 12px; }
  .form--light { margin-top: 0; gap: 10px; }
  .form { gap: 20px; }
  .form--light { gap: 10px; }
  .input { padding: 0 14px; }
  .form--dark .button { align-self: stretch; }

  .person__toggle { flex-direction: column; align-items: flex-start; }
  .person__meta { margin-left: 0; width: 100%; justify-content: space-between; align-items: center; }
  .person__role { text-align: left; }
  .person__role .sep, .br-mobile { display: inline; }
  .br-desktop { display: none; }

  .footer { padding-bottom: 40px; }
  .footer__details {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-top: 1px solid var(--light);
    padding-top: 24px;
  }
  .footer__details .sep { display: none; }
  .footer__copy { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .person__more, .person__more.is-closed, .person__icon::after, .person__name { transition: none; }
  .scroll-hint__dot { animation: none; }
}