/* Web-geregeld — site stylesheet
   Brand tokens from brandbook v1.1. Layout unit --u: one comp pixel of the
   approved 1024px homepage comp, scaled to the viewport on desktop. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --inkt: #1B2C45;
  --inkt-diep: #15233a;
  --papier: #FBF9F2;
  --papier-donker: #EFEAE0;
  --koper: #C56844;
  --steen: #C9C3B4;
  --groen: #46715D;
  --inkt-zacht: #4a5568; /* secondary text on papier: 7.0:1 */

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --u: calc(100vw / 390);           /* mobile: 1u = 1px at 390 */
  --gutter: 20px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --z-sticky: 10;
  --z-menu: 20;
}
@media (min-width: 900px) {
  :root { --u: calc(min(100vw, 1600px) / 1024); --gutter: calc(56 * var(--u)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 400 clamp(16px, calc(14.5 * var(--u)), 19px)/1.55 var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--koper); color: var(--papier); }
:focus-visible { outline: 3px solid var(--koper); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-menu);
  background: var(--papier); color: var(--inkt); padding: 10px 14px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 700 clamp(17px, calc(15 * var(--u)), 19px)/1 var(--font-display);
  letter-spacing: -0.005em;
  padding: 0.95em 1.4em; min-height: 48px;
  border: 2px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
/* Copper fill carries text only at large bold sizes (brandbook: wit op koper alleen groot en vet) */
.btn--koper { background: var(--koper); color: var(--papier); font-size: 19px; }
.btn--koper:hover { background: var(--inkt); }
.btn--inkt { background: var(--inkt); color: var(--papier); }
.btn--inkt:hover { background: #2b4166; }
.btn--kader { background: transparent; color: var(--papier); border-color: var(--koper); }
.btn--kader:hover { background: rgb(197 104 68 / .18); }
.btn--papier { background: var(--papier); color: var(--inkt); }
.btn--papier:hover { background: var(--papier-donker); box-shadow: inset 0 -3px 0 var(--koper); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--papier); color: var(--inkt);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding-inline: var(--gutter);
}
.site-header__logo { display: block; width: 190px; flex: none; }
.site-header__logo img { width: 100%; height: auto; }
.site-nav { display: flex; align-items: center; gap: calc(22 * var(--u)); }
.site-nav__links { display: flex; gap: calc(22 * var(--u)); list-style: none; margin: 0; padding: 0; }
.site-nav__links a {
  font: 500 calc(10.2 * var(--u))/1 var(--font-body);
  text-decoration: none; padding-block: 8px; border-bottom: 1px solid transparent;
}
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { border-bottom-color: var(--koper); }
.site-nav .btn { font-size: clamp(13px, calc(11.8 * var(--u)), 17px); padding: 0 1.1em; min-height: calc(34 * var(--u)); min-height: max(40px, calc(34 * var(--u))); }
.menu-toggle { display: none; }

@media (min-width: 900px) {
  .site-header__inner { height: calc(62 * var(--u)); padding-right: calc(56 * var(--u)); }
  .site-nav { gap: calc(13 * var(--u)); }
  .site-nav .btn {
    width: calc(137 * var(--u)); height: calc(31 * var(--u)); min-height: 0; padding: 0;
    font: 600 calc(9.4 * var(--u))/1 var(--font-body); letter-spacing: 0;
    position: relative; top: calc(-2 * var(--u));
  }
  .site-header__logo { width: calc(232 * var(--u)); }
}
@media (max-width: 899px) {
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--inkt);
    font: 600 16px/1 var(--font-body); padding: 12px 0; cursor: pointer;
  }
  .menu-toggle__bars { width: 22px; height: 14px; position: relative; }
  .menu-toggle__bars::before, .menu-toggle__bars::after, .menu-toggle__bars span {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
    transition: transform .3s var(--ease-out), opacity .2s;
  }
  .menu-toggle__bars::before { top: 0; } .menu-toggle__bars span { top: 6px; } .menu-toggle__bars::after { top: 12px; }
  .menu-open .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .menu-open .menu-toggle__bars span { opacity: 0; }
  .menu-open .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-menu);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); padding: 8px var(--gutter) 28px;
    border-top: 1px solid var(--steen); box-shadow: 0 24px 32px -24px rgb(27 44 69 / .35);
    display: none;
  }
  .menu-open .site-nav { display: flex; }
  .site-nav__links { flex-direction: column; gap: 0; }
  .site-nav__links a { display: block; font-size: 20px; font-family: var(--font-display); font-weight: 700; padding: 16px 0; border-bottom: 1px solid var(--steen); }
  .site-nav .btn { margin-top: 24px; font-size: 18px; min-height: 52px; }
}

/* ---------- Hero: de naad ---------- */
.hero { position: relative; }
.hero__split { display: grid; grid-template-columns: 1fr; }
.hero__offline, .hero__online { position: relative; margin: 0; }
.hero__offline img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 20%; }
.hero__label {
  position: absolute; bottom: 14px;
  font: 600 13px/1 var(--font-body); color: var(--papier);
  text-shadow: 0 1px 2px rgb(15 22 35 / .7), 0 0 12px rgb(15 22 35 / .45);
}
.hero__offline .hero__label { left: 16px; }
.hero__online .hero__label { right: 16px; }

.hero__online {
  overflow: clip;
  background: var(--inkt);
  padding: 44px 34px 56px 20px;
}
.site-preview { position: relative; margin-top: calc(6 * var(--u)); }
.site-preview__frame { position: relative; z-index: 1; background: var(--papier); box-shadow: 0 18px 40px -18px rgb(5 10 20 / .55); }
.site-preview__nav {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(21 * var(--u)); min-height: 16px; padding-inline: 4%;
}
.site-preview__nav i { display: block; height: 2px; background: #9aa0a8; }
.site-preview__nav i.site-preview__word { width: 10%; height: 2px; margin-left: 2.5%; margin-right: auto; background: #9aa0a8; }
.site-preview__nav i.site-preview__mark { width: 4.2%; height: auto; aspect-ratio: 1; background: var(--inkt); }
.site-preview__navbars { display: flex; gap: 6%; width: 40%; justify-content: flex-end; align-items: center; }
.site-preview__navbars i { width: 18%; }
.site-preview__navbars i:last-child { width: 26%; height: 8px; background: var(--inkt); }
.site-preview__hero { position: relative; aspect-ratio: 377 / 193; overflow: hidden; }
.site-preview__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.site-preview__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(15 22 35 / .55), rgb(15 22 35 / 0) 55%); }
.site-preview__copy { position: absolute; left: 5.8%; top: 44%; z-index: 1; color: var(--papier); }
.site-preview__title { font: 800 calc(24 * var(--u))/1.02 var(--font-display); letter-spacing: -0.02em; }
.site-preview__btn {
  display: inline-block; margin-top: calc(11 * var(--u)); background: var(--papier); color: var(--inkt);
  font: 600 calc(6.5 * var(--u))/1 var(--font-body); padding: calc(6 * var(--u)) calc(9 * var(--u));
}
.kader {
  position: absolute; z-index: 0; pointer-events: none;
  border: calc(3.2 * var(--u)) solid var(--koper);
  /* offset top-right over the preview: aansluiten */
  width: 38.7%; height: 60.5%; right: -6.1%; top: -11.8%;
}

.hero__statement {
  position: relative; background: var(--papier);
  padding: 28px var(--gutter) 8px;
}
.hero__title { font-size: clamp(40px, calc(54 * var(--u)), 88px); line-height: 0.95; letter-spacing: -0.025em; }
.hero__intro { margin-top: 18px; max-width: 46ch; font-size: clamp(16px, calc(13.6 * var(--u)), 20px); line-height: 1.45; }
.hero__actions { margin-top: 24px; }

@media (min-width: 900px) {
  .hero__split { grid-template-columns: 511fr 513fr; height: calc(373 * var(--u)); }
  .hero__offline img { height: 100%; aspect-ratio: auto; object-position: 0% 0%; }
  .hero__label { bottom: calc(19 * var(--u)); font-size: calc(9 * var(--u)); font-weight: 500; letter-spacing: 0; }
  .hero__offline .hero__label { left: calc(22 * var(--u)); }
  .hero__online .hero__label { right: calc(20 * var(--u)); }
  .hero__online { border-top: 0; padding: calc(63 * var(--u)) calc(71 * var(--u)) 0 calc(62 * var(--u)); }
  .hero__seam {
    position: absolute; z-index: 1; left: calc(509.5 * var(--u)); top: 0; width: calc(3.5 * var(--u));
    height: calc(298 * var(--u)); background: var(--koper);
  }
  .hero__statement {
    position: absolute; left: calc(100 * var(--u)); top: calc(298 * var(--u)); width: calc(584 * var(--u));
    padding: calc(23 * var(--u)) calc(33 * var(--u)) 0;
  }
  .hero__title { font-size: calc(54 * var(--u)); line-height: 0.917; letter-spacing: -0.04em; }
  .hero__intro { margin-top: calc(6 * var(--u)); max-width: none; width: calc(470 * var(--u)); font-size: calc(12.4 * var(--u)); line-height: 1.45; }
  .hero__intro .line { display: block; }
  .hero__actions { margin-top: calc(10 * var(--u)); margin-left: calc(3 * var(--u)); }
  .hero__actions .btn { font-size: calc(11.4 * var(--u)); min-height: 0; width: calc(168 * var(--u)); height: calc(31 * var(--u)); padding: 0; }
  .hero__spacer { height: calc(143 * var(--u)); } /* paper ground under the statement, comp y 435–578 */
}
@media (max-width: 899px) { .hero__seam { display: block; height: 3px; background: var(--koper); } }

/* ---------- Band: fotoband met inkt-vlak ---------- */
.band { position: relative; overflow: hidden; background: var(--inkt); }
.band__photo { width: 100%; height: 100%; object-fit: cover; }
.band__vlak { background: var(--inkt); color: var(--papier); }
.band__title { font-size: clamp(28px, calc(30.5 * var(--u)), 52px); line-height: 1.1; letter-spacing: -0.04em; }
@media (max-width: 899px) {
  .band__photo { aspect-ratio: 4 / 3; object-position: 75% 50%; }
  .band__vlak { margin: -56px 16px 0; position: relative; padding: 28px 24px 32px; }
}
@media (min-width: 900px) {
  .band { height: calc(470 * var(--u)); }
  .band__photo { position: absolute; inset: 0; object-position: 50% 90%; }
  .band__vlak {
    position: absolute; left: calc(56 * var(--u)); top: calc(67 * var(--u)); width: calc(516 * var(--u));
    padding: calc(42 * var(--u)) calc(24 * var(--u)) calc(44 * var(--u)) calc(40 * var(--u));
  }
}

.band__text { margin-top: 18px; max-width: 44ch; color: var(--papier); }
@media (min-width: 900px) { .band__text { margin-top: calc(16 * var(--u)); font-size: max(16px, calc(14 * var(--u))); } }

/* ---------- Shared section rhythm ---------- */
.section-pad { padding-block: clamp(72px, calc(110 * var(--u)), 180px); }
.link-arrow {
  display: inline-flex; align-items: center; gap: .55em;
  font: 700 clamp(17px, calc(15 * var(--u)), 21px)/1.2 var(--font-display);
  color: inherit; text-decoration: underline; text-decoration-color: var(--koper); text-decoration-thickness: 2px; text-underline-offset: .3em;
}
.link-arrow::after {
  content: ""; width: 1em; height: .7em; background: var(--koper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 7h17M11 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 7h17M11 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .35s var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Moments: W03 photo bands ---------- */
.moments { display: grid; gap: clamp(56px, calc(72 * var(--u)), 120px); padding-block: clamp(72px, calc(104 * var(--u)), 170px); }
.moment { display: grid; gap: 22px; }
.moment__photo { margin: 0; position: relative; }
@media (min-width: 900px) {
  .moment--flip .moment__photo::before { /* vlak: de klantfoto krijgt een inkt-ondergrond */
    content: ""; position: absolute; inset: 0; background: var(--inkt);
    transform: translate(calc(-1 * clamp(14px, calc(28 * var(--u)), 44px)), clamp(14px, calc(28 * var(--u)), 44px)); }
  .moment--flip .moment__photo img { position: relative; }
}
.moment__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.moment__copy { padding-inline: var(--gutter); max-width: 34rem; }
.moment__title { font-size: clamp(30px, calc(34 * var(--u)), 54px); line-height: 1.04; letter-spacing: -0.03em; }
.moment__copy p { margin-top: 14px; }
@media (min-width: 900px) {
  .moment { grid-template-columns: 64fr 36fr; align-items: end; gap: 0; }
  .moment__photo img { aspect-ratio: 16 / 9; }
  .moment__copy { padding: 0 var(--gutter) calc(10 * var(--u)) calc(48 * var(--u)); }
  .moment--flip { grid-template-columns: 36fr 64fr; }
  .moment--flip .moment__photo { order: 2; }
  .moment--flip .moment__copy { padding: 0 calc(48 * var(--u)) calc(10 * var(--u)) var(--gutter); justify-self: end; text-align: left; }
}

/* ---------- Model: het model als route ---------- */
.model { background: var(--papier-donker); padding: clamp(72px, calc(104 * var(--u)), 170px) var(--gutter); }
.model__head { display: grid; gap: 18px; }
.model__title { font-size: clamp(38px, calc(52 * var(--u)), 84px); line-height: .98; letter-spacing: -0.035em; }
.model__lead { max-width: 40ch; font-size: clamp(17px, calc(15.5 * var(--u)), 22px); }
@media (min-width: 900px) {
  .model__head { grid-template-columns: 1fr 1fr; align-items: end; gap: calc(48 * var(--u)); }
}
.route { list-style: none; margin: clamp(48px, calc(64 * var(--u)), 104px) 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.route__step { position: relative; padding: 0 0 36px 64px; }
.route__step::before { /* copper line connecting the stations */
  content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--koper);
}
.route__step:last-child::before { bottom: auto; height: 22px; }
.route__num {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--inkt); color: var(--papier);
  font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.route__step--eigendom .route__num { background: var(--papier-donker); color: var(--inkt); outline: 3px solid var(--koper); outline-offset: -3px; font-size: 26px; }
.route__title { font-size: clamp(22px, calc(20 * var(--u)), 32px); line-height: 1.1; padding-top: 9px; }
.route__step p { margin-top: 8px; max-width: 30ch; }
@media (min-width: 900px) {
  .route { grid-template-columns: repeat(4, 1fr); gap: calc(32 * var(--u)); }
  .route__step { padding: calc(76 * var(--u)) 0 0; }
  .route__step::before { left: 0; right: calc(-32 * var(--u)); top: calc(22 * var(--u)); bottom: auto; width: auto; height: 2px; }
  .route__step:last-child::before { right: 50%; height: 2px; }
  .route__num { width: calc(46 * var(--u)); height: calc(46 * var(--u)); font-size: calc(21 * var(--u)); }
  .route__step--eigendom .route__num { font-size: calc(28 * var(--u)); }
}
.model__more { margin-top: clamp(40px, calc(56 * var(--u)), 88px); }

/* ---------- Overstap: de naad, 's avonds | 's ochtends ---------- */
.overstap { position: relative; background: var(--inkt); color: var(--papier); }
.overstap__split { display: grid; position: relative; }
.overstap__half { position: relative; margin: 0; }
.overstap__half img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.overstap__label {
  position: absolute; left: 16px; top: 14px; font: 600 14px/1 var(--font-body); color: var(--papier);
  text-shadow: 0 1px 2px rgb(15 22 35 / .7), 0 0 12px rgb(15 22 35 / .45);
}
.overstap__seam { display: block; height: 3px; background: var(--koper); }
.overstap__vlak { padding: 36px var(--gutter) 56px; }
.overstap__title { font-size: clamp(32px, calc(40 * var(--u)), 66px); line-height: 1.02; letter-spacing: -0.035em; }
.overstap__vlak p { margin-top: 16px; max-width: 46ch; }
@media (min-width: 900px) {
  .overstap__split { grid-template-columns: 1fr 1fr; height: calc(470 * var(--u)); }
  .overstap__half img { height: 100%; aspect-ratio: auto; }
  .overstap__half:first-child img { object-position: 40% 50%; }
  .overstap__seam { position: absolute; left: 50%; top: 0; bottom: 0; width: calc(3.5 * var(--u)); height: auto; transform: translateX(-50%); z-index: 1; }
  .overstap__label { left: calc(22 * var(--u)); top: calc(20 * var(--u)); font-size: max(13px, calc(11 * var(--u))); }
  .overstap__half + .overstap__seam + .overstap__half .overstap__label { left: auto; right: calc(22 * var(--u)); }
  .overstap__vlak {
    position: relative; margin: calc(-120 * var(--u)) 0 0 var(--gutter); width: calc(560 * var(--u)); z-index: 2;
    background: var(--inkt); padding: calc(44 * var(--u)) calc(44 * var(--u)) calc(52 * var(--u));
  }
  .overstap { padding-bottom: calc(80 * var(--u)); }
}

/* ---------- Grip: eigendom in het kader ---------- */
.grip { padding: clamp(80px, calc(120 * var(--u)), 190px) var(--gutter); display: grid; gap: clamp(48px, calc(64 * var(--u)), 104px); }
.grip__kader { position: relative; padding: clamp(28px, calc(40 * var(--u)), 64px); border: 3px solid var(--koper); max-width: 60rem; }
.grip__kader::before { /* het vlak, linksonder verschoven: aansluiten op het kader */
  content: ""; position: absolute; z-index: -1; inset: 0; background: var(--inkt);
  transform: translate(calc(-1 * clamp(14px, calc(26 * var(--u)), 40px)), clamp(14px, calc(26 * var(--u)), 40px));
}
.grip { position: relative; isolation: isolate; }
.grip__title { color: var(--papier); font-size: clamp(28px, calc(38 * var(--u)), 62px); line-height: 1.08; letter-spacing: -0.03em; }
.grip__list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--steen); }
.grip__list > div { display: grid; gap: 4px; padding-block: 18px; border-bottom: 1px solid var(--steen); }
.grip__list dt { font: 800 clamp(18px, calc(15 * var(--u)), 23px)/1.2 var(--font-display); }
.grip__list dd { margin: 0; }
@media (min-width: 900px) {
  .grip { grid-template-columns: 58fr 42fr; align-items: center; gap: calc(80 * var(--u)); padding-left: calc(96 * var(--u)); }
  .grip__list > div { grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(20 * var(--u)); align-items: baseline; padding-block: calc(20 * var(--u)); }
}

/* ---------- Herkomst ---------- */
.herkomst { background: var(--papier-donker); padding: clamp(72px, calc(96 * var(--u)), 150px) var(--gutter); }
.herkomst__inner { max-width: 56rem; display: grid; gap: 18px; }
.nowrap { white-space: nowrap; }
.herkomst__title { font-size: clamp(28px, calc(34 * var(--u)), 56px); line-height: 1.06; letter-spacing: -0.03em; }

/* ---------- Slot: plan het eerste gesprek ---------- */
.slot { position: relative; overflow: hidden; background: var(--inkt); color: var(--papier); padding: clamp(80px, calc(120 * var(--u)), 190px) var(--gutter) clamp(48px, calc(64 * var(--u)), 100px); }
.slot__inner { position: relative; z-index: 1; display: grid; gap: 22px; max-width: 42rem; }
.slot__title { font-size: clamp(40px, calc(56 * var(--u)), 90px); line-height: .98; letter-spacing: -0.035em; }
.slot__text { max-width: 44ch; }
.slot__close {
  margin-top: clamp(64px, calc(96 * var(--u)), 150px);
  font: 800 min(96px, 16vw)/.85 var(--font-display); letter-spacing: -0.04em;
  color: var(--koper);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--inkt-diep); color: var(--papier); padding: clamp(56px, calc(72 * var(--u)), 110px) var(--gutter) 28px; }
.site-footer__inner { display: grid; gap: 36px; }
.site-footer__logo { display: block; width: 200px; }
.site-footer__payoff { margin-top: 18px; font: 700 18px/1.3 var(--font-display); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__nav a { text-decoration: none; border-bottom: 1px solid rgb(251 249 242 / .35); }
.site-footer__nav a:hover { border-bottom-color: var(--koper); }
.site-footer__note { max-width: 38ch; color: rgb(251 249 242 / .85); }
.site-footer__note a { color: var(--papier); }
.site-footer__base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(48px, calc(64 * var(--u)), 100px); padding-top: 20px; border-top: 1px solid rgb(251 249 242 / .18);
  font-size: 14px; color: rgb(251 249 242 / .85);
}
.site-footer__base a { color: var(--papier); }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 1.3fr 1fr 1.2fr; gap: calc(48 * var(--u)); align-items: start; }
  .site-footer__logo { width: calc(232 * var(--u)); }
}

/* ---------- Page head (inner pages): copy on papier, photo to the edge ---------- */
.page-head { display: grid; }
.page-head__copy { padding: 44px var(--gutter) 36px; display: grid; gap: 18px; align-content: end; }
.page-head__title { font-size: clamp(40px, calc(56 * var(--u)), 90px); line-height: .96; letter-spacing: -0.04em; }
.page-head__lead { max-width: 44ch; font-size: clamp(17px, calc(15.5 * var(--u)), 22px); }
.page-head__photo { margin: 0; position: relative; }
.page-head__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) {
  .page-head { grid-template-columns: 1fr 1fr; min-height: calc(470 * var(--u)); }
  .page-head__copy { padding: calc(72 * var(--u)) calc(56 * var(--u)) calc(64 * var(--u)) var(--gutter); }
  .page-head__photo img { height: 100%; aspect-ratio: auto; }
  .page-head__photo::before { /* de naad */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(3.5 * var(--u)); background: var(--koper); z-index: 1;
  }
  .page-head--wide { grid-template-columns: 1fr; position: relative; }
  .page-head--wide .page-head__photo img { height: calc(560 * var(--u)); }
  .page-head--wide .page-head__photo::before { display: none; }
  .page-head--wide .page-head__copy {
    position: absolute; left: var(--gutter); bottom: 0; width: calc(600 * var(--u));
    background: var(--papier); padding: calc(40 * var(--u)) calc(44 * var(--u)) calc(12 * var(--u));
  }
}

/* ---------- Stations: de overstap als route (werkwijze) ---------- */
.stations { padding: clamp(72px, calc(104 * var(--u)), 170px) var(--gutter); background: var(--papier-donker); }
.stations__list { list-style: none; margin: 0; padding: 0; }
.station { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; padding-bottom: 56px; }
.station::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--koper); transform-origin: top; }
.station:last-child::before { display: none; }
.station__marker { grid-row: span 2; }
.station__marker span {
  display: grid; place-items: center; width: 44px; height: 44px; position: relative; z-index: 1;
  background: var(--inkt); color: var(--papier); font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.station__marker--live span { background: var(--groen); }
.station--eigendom .station__marker span { background: var(--papier-donker); color: var(--inkt); outline: 3px solid var(--koper); outline-offset: -3px; font-size: 26px; }
.station__copy { display: grid; gap: 12px; align-content: start; padding-top: 6px; }
.station__title { font-size: clamp(26px, calc(30 * var(--u)), 48px); line-height: 1.05; letter-spacing: -0.03em; }
.station__copy p { max-width: 46ch; }
.station__who { padding-top: 12px; border-top: 1px solid var(--steen); font-size: .95em; }
.station__statement { font: 800 clamp(24px, calc(26 * var(--u)), 42px)/1.12 var(--font-display); letter-spacing: -0.025em; max-width: 22ch !important; }
.station__photo { margin: 22px 0 0; grid-column: 2; }
.station__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.station--avond .station__photo img { object-position: 30% 50%; }
@media (min-width: 900px) {
  .stations__list { max-width: calc(912 * var(--u)); }
  .station { grid-template-columns: calc(46 * var(--u)) 1fr 1.15fr; column-gap: calc(36 * var(--u)); padding-bottom: calc(96 * var(--u)); }
  .station::before { left: calc(22 * var(--u)); }
  .station__marker { grid-row: auto; }
  .station__marker span { width: calc(46 * var(--u)); height: calc(46 * var(--u)); font-size: calc(21 * var(--u)); }
  .station--eigendom .station__marker span { font-size: calc(28 * var(--u)); }
  .station__photo { grid-column: 3; margin: 0; }
  .station--eigendom .station__copy { grid-column: 2 / span 2; }
}

/* ---------- Vooraf / kompas: hairline lists ---------- */
.vooraf, .kompas { padding: clamp(80px, calc(112 * var(--u)), 180px) var(--gutter); display: grid; gap: clamp(32px, calc(48 * var(--u)), 80px); }
.vooraf__title, .kompas__title { font-size: clamp(36px, calc(46 * var(--u)), 76px); line-height: 1; letter-spacing: -0.035em; }
.vooraf__list, .kompas__list { margin: 0; border-top: 1px solid var(--steen); }
.vooraf__list > div, .kompas__list > div { display: grid; gap: 6px; padding-block: 22px; border-bottom: 1px solid var(--steen); }
.vooraf__list dt, .kompas__list dt { font: 800 clamp(20px, calc(18 * var(--u)), 28px)/1.15 var(--font-display); letter-spacing: -0.015em; }
.vooraf__list dd, .kompas__list dd { margin: 0; max-width: 52ch; }
@media (min-width: 900px) {
  .vooraf, .kompas { grid-template-columns: 38fr 62fr; gap: calc(64 * var(--u)); align-items: start; }
  .vooraf__list > div, .kompas__list > div { grid-template-columns: calc(200 * var(--u)) 1fr; gap: calc(24 * var(--u)); align-items: baseline; padding-block: calc(24 * var(--u)); }
}
.kompas__list dt { color: var(--inkt); }

/* ---------- Stukken (bewijs) ---------- */
.stukken { padding: clamp(80px, calc(112 * var(--u)), 180px) var(--gutter); display: grid; gap: clamp(40px, calc(56 * var(--u)), 90px); }
.stukken__head { display: grid; gap: 16px; max-width: 46rem; }
.stukken__title { font-size: clamp(36px, calc(46 * var(--u)), 76px); line-height: 1; letter-spacing: -0.035em; }
.stukken__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--steen); }
.stuk { display: grid; gap: 8px; padding-block: 28px; border-bottom: 1px solid var(--steen); }
.stuk__title { font-size: clamp(26px, calc(30 * var(--u)), 48px); line-height: 1.05; letter-spacing: -0.03em; }
.stuk__when { font: 600 15px/1.3 var(--font-body); color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
.stuk p:last-child { max-width: 52ch; }
.stuk--kader { border: 3px solid var(--koper); padding: 28px; margin-top: 28px; }
@media (min-width: 900px) {
  .stuk { grid-template-columns: calc(300 * var(--u)) calc(190 * var(--u)) 1fr; gap: calc(28 * var(--u)); align-items: baseline; padding-block: calc(34 * var(--u)); }
  .stuk--kader { padding: calc(34 * var(--u)) calc(28 * var(--u)); margin-inline: calc(-31 * var(--u)); }
}
.herkomst--vlak { background: var(--inkt); color: var(--papier); }

/* ---------- Wie (over ons) ---------- */
.wie { padding: clamp(80px, calc(112 * var(--u)), 180px) var(--gutter) 0; display: grid; gap: 28px; }
.wie__lead { font: 800 clamp(28px, calc(34 * var(--u)), 56px)/1.08 var(--font-display); letter-spacing: -0.03em; max-width: 22ch; }
.wie__text { display: grid; gap: 16px; max-width: 58ch; }
@media (min-width: 900px) { .wie { grid-template-columns: 1fr 1fr; gap: calc(64 * var(--u)); align-items: start; } }

/* ---------- Intake ---------- */
.intake { display: grid; }
.intake__vlak { background: var(--inkt); color: var(--papier); padding: 48px var(--gutter) 44px; display: grid; gap: 20px; align-content: start; }
.intake__title { font-size: clamp(40px, calc(52 * var(--u)), 84px); line-height: .98; letter-spacing: -0.04em; }
.intake__lead { max-width: 40ch; }
.intake__next { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: stap; display: grid; gap: 0; border-top: 1px solid rgb(251 249 242 / .2); }
.intake__next li { counter-increment: stap; position: relative; padding: 16px 0 16px 44px; border-bottom: 1px solid rgb(251 249 242 / .2); }
.intake__next li::before {
  content: counter(stap); position: absolute; left: 0; top: 15px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 2px solid var(--koper); font: 800 15px/1 var(--font-display);
}
.intake__form { padding: 44px var(--gutter) 72px; display: grid; gap: 36px; }
.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 20px; }
.fieldset__legend { font: 800 clamp(22px, calc(20 * var(--u)), 30px)/1.1 var(--font-display); letter-spacing: -0.02em; padding: 0; margin-bottom: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; }
.field__opt { font-weight: 400; color: var(--inkt-zacht); }
.field__hint { font-size: .92em; color: var(--inkt-zacht); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--inkt); background: #fff;
  border: 1.5px solid #8a8678; border-radius: 2px; padding: 13px 14px; min-height: 52px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231B2C45' stroke-width='2'/%3E%3C/svg%3E") right 16px center / 14px 9px no-repeat; }
.field input::placeholder { color: #6b6a64; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--inkt); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 3px var(--koper); }
.field [aria-invalid="true"] { border-color: #a3321e; background: #fff7f4; }
.field__error { color: #a3321e; font-weight: 600; font-size: .95em; display: flex; gap: 8px; align-items: baseline; }
.field__error::before { content: ""; flex: none; width: 10px; height: 10px; background: #a3321e; transform: translateY(1px); }
.form-alert { background: #fbe9e3; color: #7e2412; border: 1.5px solid #a3321e; padding: 14px 16px; font-weight: 600; }
.intake__submit { display: grid; gap: 14px; justify-items: start; }
.intake__submit .btn { min-height: 56px; }
.intake__submit .btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.intake__privacy { font-size: .92em; color: var(--inkt-zacht); max-width: 46ch; }
@media (min-width: 900px) {
  .intake { grid-template-columns: 42fr 58fr; align-items: start; }
  .intake__vlak { position: sticky; top: calc(62 * var(--u)); min-height: calc(100vh - 62 * var(--u)); padding: calc(64 * var(--u)) calc(52 * var(--u)) calc(56 * var(--u)) var(--gutter); }
  .intake__form { padding: calc(64 * var(--u)) var(--gutter) calc(96 * var(--u)) calc(64 * var(--u)); max-width: calc(620 * var(--u) + 120px); }
}

/* ---------- Bedankt: het aansluiten ---------- */
.bedankt { min-height: calc(100vh - 64px); padding: clamp(80px, calc(110 * var(--u)), 170px) var(--gutter); display: grid; align-content: center; gap: 24px; }
.bedankt__mark { position: relative; width: clamp(88px, calc(110 * var(--u)), 160px); aspect-ratio: 1; margin-bottom: 12px; }
.bedankt__vlak { position: absolute; left: 0; bottom: 0; width: 82%; height: 82%; background: var(--inkt); }
.bedankt__kader { position: absolute; right: 0; top: 0; width: 80%; height: 80%; border: max(4px, calc(5 * var(--u))) solid var(--koper); }
.bedankt__title { font-size: min(96px, 16vw); line-height: .9; letter-spacing: -0.04em; }
.bedankt__lead { max-width: 46ch; font-size: clamp(18px, calc(16 * var(--u)), 22px); }

/* ---------- Motion ----------
   Every default state is the final state; motion only enhances it. */

/* Signature: het aansluiten. Once per visit (html.wg-intro is set in <head>). */
@keyframes wg-aansluiten {
  from { transform: translate(38%, -46%); opacity: 0; }
  22%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes wg-verschijn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wg-opkomen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wg-intro .hero .kader { animation: wg-aansluiten 1100ms var(--ease-out) 250ms both; }
.wg-intro .hero .site-preview__frame { animation: wg-verschijn 500ms ease-out both; }
.wg-intro .hero__title { animation: wg-opkomen 700ms var(--ease-out) 900ms both; }
.wg-intro .hero__intro, .wg-intro .hero__actions { animation: wg-opkomen 700ms var(--ease-out) 1100ms both; }

/* Bedankt: het kader valt op zijn plek (the livegang moment). */
.bedankt__vlak { animation: wg-verschijn 450ms ease-out both; }
.bedankt__kader { animation: wg-aansluiten 1100ms var(--ease-out) 250ms both; }
.bedankt__title { animation: wg-opkomen 700ms var(--ease-out) 1150ms both; }

/* Route: the copper line draws with the scroll where supported. */
@supports (animation-timeline: view()) {
  @keyframes wg-lijn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes wg-lijn-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .station::before { animation: wg-lijn linear both; animation-timeline: view(); animation-range: entry 40% cover 60%; }
  .route__step::before { transform-origin: top; animation: wg-lijn linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
  @media (min-width: 900px) {
    .route__step::before { transform-origin: left; animation-name: wg-lijn-x; }
  }
  @keyframes wg-onthul { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .moment__photo img, .station__photo img { animation: wg-onthul linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .moment--flip .moment__photo img { animation-name: wg-onthul-l; }
  @keyframes wg-onthul-l { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}