/* Rijnstad Marketing Solutions: wit-blauwe huisstijl met een Arnhemse signatuur.

   Opbouw
   1. Lettertype            8. Diensten op Home        15. Over RMS
   2. Tokens en thema's     9. Zichtbaarheidscheck     16. Privacy, slotblok, 404
   3. Basis                10. Waarom RMS              17. Voettekst en skyline
   4. Hulpklassen          11. Scrollscènes            18. Scroll-entrees
   5. Knoppen              12. Contact                 19. Minder beweging
   6. Kopbalk              13. Subpagina's
   7. Hero en Rijnlijn     14. Diensten-pagina

   Kleuren lopen altijd via tokens. Light mode is de standaard; dark mode
   staat op html[data-theme="dark"]. Donkerblauwe vlakken (check, paginakop,
   voettekst) gebruiken in beide thema's de context van "diep". */

/* ---------- 1. Lettertype ---------- */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens en thema's ---------- */

:root {
  /* Huisstijl */
  --navy: #071852;
  --white: #ffffff;
  --mist: #f5f7fb;
  --ice: #e9f0f8;
  --blue-mid: #3979b9;
  --blue: #4c8fd1;
  --blue-light: #b9d5f1;

  /* Arnhemse accenten: alleen voor de dienstpanelen op Home en kleine
     details. Witte iconen erop halen minimaal 4,5:1. */
  --rijn: #17616b;
  --sonsbeek: #2e6b4a;
  --baksteen: #a3412a;
  --oker: #94671f;
  /* Knipoog naar de Arnhemse voetbalkleuren, alleen in de voettekst. */
  --geel: #f2c200;
  --zwart: #111111;

  /* Thema: licht (standaard) */
  --bg: var(--white);
  --bg-alt: var(--mist);
  --bg-tint: var(--ice);
  --surface: var(--white);
  --text: var(--navy);
  --text-soft: rgba(7, 24, 82, 0.74);
  --heading: var(--navy);
  --line: var(--ice);
  --line-strong: var(--blue-light);
  --accent: var(--blue-mid);
  --focus: var(--blue-mid);
  --error: #b42318;

  /* Iconen: één regel per soort ondergrond.
     licht vlak: middelblauw | donker vlak: lichtblauw | gekleurd paneel: wit */
  --icon-light: var(--blue-mid);
  --icon-dark: var(--blue-light);
  --icon-on-color: var(--white);
  --icon: var(--icon-light);

  /* Lijnillustraties (Rijn, plattegrond) op het gewone paginavlak. */
  --line-art: var(--blue-mid);

  /* Knoppen */
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-hover-bg: var(--blue-mid);
  --btn-hover-fg: var(--white);
  --btn2-bg: var(--white);
  --btn2-fg: var(--navy);
  --btn2-border: var(--blue-mid);
  --btn2-hover-bg: var(--ice);

  /* Formulieren */
  --field-bg: var(--white);
  --field-hover: var(--mist);
  --field-border: var(--blue-mid);

  /* Donkerblauwe vlakken */
  --deep: var(--navy);
  --deep-raised: #132563;
  --deep-line: rgba(185, 213, 241, 0.18);
  --google-bg: var(--navy);
  --google-art: #16296c;
  --advice-bg: var(--blue-mid);

  --header-bg: rgba(255, 255, 255, 0.94);
  --shadow-card: 0 1px 2px rgba(7, 24, 82, 0.06), 0 10px 28px rgba(7, 24, 82, 0.06);
  --shadow-lift: 0 2px 4px rgba(7, 24, 82, 0.08), 0 18px 40px rgba(7, 24, 82, 0.12);

  /* Typografie */
  --font: "Manrope", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Ruimte (basis 4px) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 88px;
  --section-gap: clamp(64px, 6vw + 32px, 128px);
  --gutter: clamp(16px, 4vw, 32px);
  --content: 1200px;

  /* Vorm */
  --r-pill: 999px;
  --r-card: 16px;
  --r-panel: 24px;
  --r-input: 8px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 200ms;

  color-scheme: light;
}

/* Thema: donker. Geen omgekeerde kleuren: donkerblauw als basis, lichtere
   blauwe vlakken voor diepte, wit en ijsblauw voor tekst. */
[data-theme="dark"] {
  --bg: var(--navy);
  --bg-alt: #10215b;
  --bg-tint: #132666;
  --surface: #162969;
  --text: #e9f0f8;
  --text-soft: #b4c6db;
  --heading: var(--white);
  --line: rgba(185, 213, 241, 0.14);
  --line-strong: rgba(185, 213, 241, 0.32);
  --accent: #8ab8e6;
  --focus: var(--blue-light);
  --error: #ff9b91;

  --icon: var(--icon-dark);
  --line-art: #8ab8e6;

  --btn-bg: var(--white);
  --btn-fg: var(--navy);
  --btn-hover-bg: var(--ice);
  --btn-hover-fg: var(--navy);
  --btn2-bg: transparent;
  --btn2-fg: var(--white);
  --btn2-border: rgba(185, 213, 241, 0.7);
  --btn2-hover-bg: rgba(185, 213, 241, 0.12);

  --field-bg: #0d1e57;
  --field-hover: #112465;
  --field-border: #5b93cc;

  --deep: #061444;
  --deep-raised: #112361;
  --google-bg: #112772;
  --google-art: #193287;
  --advice-bg: #233e9a;

  --header-bg: rgba(7, 24, 82, 0.92);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

/* Donkerblauwe vlakken: in beide thema's dezelfde contextrollen. */
.check,
.page-hero,
.closing-panel,
.site-footer,
.channels,
.contact-aside,
.advice {
  --text: var(--white);
  --text-soft: var(--blue-light);
  --heading: var(--white);
  --focus: var(--blue-light);
  --line: var(--deep-line);
  --accent: var(--blue-light);
  --icon: var(--icon-dark);
  --line-art: var(--blue-light);
  --btn-bg: var(--white);
  --btn-fg: var(--navy);
  --btn-hover-bg: var(--ice);
  --btn-hover-fg: var(--navy);
  --btn2-bg: transparent;
  --btn2-fg: var(--white);
  --btn2-border: rgba(185, 213, 241, 0.7);
  --btn2-hover-bg: rgba(185, 213, 241, 0.12);
  color: var(--text);
}

.check,
.page-hero,
.closing-panel,
.site-footer,
.channels,
.contact-aside {
  background-color: var(--deep);
}

/* ---------- 3. Basis ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--heading);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--heading);
  font-weight: 650;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.12;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--blue-mid);
  color: var(--white);
}

/* ---------- 4. Hulpklassen ---------- */

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-pill);
  font-weight: 700;
}

.skip-link:hover {
  color: var(--white);
}

.skip-link:focus {
  top: var(--s3);
  color: var(--white);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-gap);
}

/* Ankers niet onder de vaste kopbalk laten vallen. */
[id] {
  scroll-margin-top: 96px;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 38em;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s5) var(--s8);
  align-items: end;
  margin-bottom: var(--s7);
}

.section-head .lead {
  justify-self: end;
}

.note {
  margin-top: var(--s6);
}

@media (max-width: 980px) {
  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .section-head .lead {
    justify-self: start;
  }
}

/* Placeholders: zichtbaar onaf, wacht op RMS. */
.todo {
  border: 2px dashed var(--accent);
  border-radius: var(--r-input);
  padding: var(--s3) var(--s4);
  color: var(--text-soft);
  background: var(--surface);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.todo strong {
  color: var(--heading);
  font-weight: 700;
}

.check .todo,
.page-hero .todo,
.site-footer .todo,
.closing-panel .todo,
.contact-aside .todo,
[data-theme="dark"] .todo {
  background: rgba(185, 213, 241, 0.06);
  border-color: rgba(185, 213, 241, 0.6);
}

/* ---------- 5. Knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 12px 28px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  cursor: pointer;
  transition:
    translate var(--t-fast) var(--ease),
    scale var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

/* Licht: donkerblauw met wit (18:1), hover middelblauw (4,6:1).
   Donker vlak of dark mode: wit met donkerblauw. */
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.btn-primary:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  translate: 0 -2px;
}

.btn-secondary {
  background: var(--btn2-bg);
  color: var(--btn2-fg);
  border-color: var(--btn2-border);
}

.btn-secondary:hover {
  background: var(--btn2-hover-bg);
  color: var(--btn2-fg);
  border-color: var(--btn2-fg);
  translate: 0 -2px;
}

.btn:active {
  translate: 0 0;
  scale: 0.98;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

/* Rustige tekstlink met pijl, voor secundaire acties. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--heading);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--line-strong);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.text-link::after {
  content: "→";
  transition: translate var(--t-fast) var(--ease);
}

.text-link:hover {
  color: var(--heading);
  border-bottom-color: var(--accent);
}

.text-link:hover::after {
  translate: 4px 0;
}

@media (max-width: 560px) {
  .btn {
    padding-inline: 18px;
  }
}

/* ---------- 6. Kopbalk, taalkeuze en themaknop ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

/* Desktop: logo | menu | NL EN | thema. Mobiel: logo | thema | NL EN | Menu. */
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 76px;
}

/* Logo uit de huisstijl: het beeldmerk (assets/img/rms-logo.svg) met de naam
   als echte tekst ernaast. In het logobestand is "Marketing Solutions" op
   kopbalkformaat te klein om te lezen. Volgt de tekstkleur: navy op licht,
   wit in donkere modus. */
.logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--s3);
  margin-right: var(--s3);
  color: var(--heading);
  text-decoration: none;
}

.logo:hover {
  color: var(--heading);
}

.logo-mark {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 46px;
  fill: currentColor;
}

.logo-text {
  display: grid;
  gap: 5px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
}

.logo-name {
  font-size: 1.25rem;
  letter-spacing: 0.3em;
}

.logo-sub {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
}

/* Alleen het beeldmerk waar de kopbalk vol is: naast het volledige menu
   (901-1100px) en op telefoons (tot 640px). */
@media (min-width: 901px) and (max-width: 1100px), (max-width: 640px) {
  .logo-text {
    display: none;
  }
}

.site-nav {
  order: 2;
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  color: var(--heading);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav-link:hover {
  color: var(--heading);
  background: var(--bg-alt);
}

/* Onderstreping die vanuit het midden groeit. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  scale: 0 1;
  transition: scale var(--t-fast) var(--ease);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
  scale: 1 1;
}

.nav-cta {
  margin-left: var(--s3);
  min-height: 46px;
  padding: 10px 22px;
}

.lang-switch {
  order: 3;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  list-style: none;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.lang-switch a {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  color: var(--heading);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lang-switch a:hover {
  background: var(--bg-tint);
  color: var(--heading);
}

.lang-switch a[aria-current="true"] {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

/* Themaknop: zon en maan in één schakelaar; het bolletje staat op de
   actieve modus. aria-pressed="true" betekent donkere modus aan. */
.theme-toggle {
  order: 4;
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: 72px;
  height: 40px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-soft);
  font: inherit;
  cursor: pointer;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--btn-bg);
  transition: translate 260ms var(--ease), background-color var(--t-fast) var(--ease);
}

.theme-toggle[aria-pressed="true"]::before {
  translate: 32px 0;
}

.theme-toggle svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  transition: color var(--t-fast) var(--ease);
}

.theme-toggle[aria-pressed="false"] .theme-sun,
.theme-toggle[aria-pressed="true"] .theme-moon {
  color: var(--btn-fg);
}

.theme-toggle:hover {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Zonder JavaScript kan er niet gewisseld worden: knop verbergen. */
html:not(.js) .theme-toggle {
  display: none;
}

.nav-toggle {
  display: none;
}

@media (max-width: 900px) {
  .lang-switch {
    order: 2;
  }

  .theme-toggle {
    order: 1;
    margin-left: auto;
  }

  .nav-toggle {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    padding: 10px 16px;
    border: 2px solid var(--btn2-border);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--heading);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .nav-toggle-bars {
    position: relative;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }

  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--t-fast) var(--ease);
  }

  .nav-toggle-bars::before {
    top: -6px;
  }

  .nav-toggle-bars::after {
    top: 6px;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars {
    background: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: var(--s4) var(--gutter) var(--s6);
    background: var(--bg);
    box-shadow: 0 1px 0 var(--line), 0 24px 48px rgba(7, 24, 82, 0.14);
  }

  /* Zonder JavaScript blijft het menu gewoon zichtbaar. */
  .js .site-nav[data-open="false"] {
    display: none;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-link {
    display: block;
    padding: 14px 16px;
    font-size: 1.125rem;
  }

  .nav-link::after {
    left: 16px;
    right: auto;
    width: 40px;
  }

  .nav-cta {
    margin: var(--s3) 0 0;
    width: 100%;
  }
}

/* Smalle telefoons: het woord "Menu" blijft voor schermlezers bestaan. */
@media (max-width: 420px) {
  .header-inner {
    gap: var(--s2);
  }

  .nav-toggle {
    padding-inline: 13px;
  }

  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lang-switch a {
    min-width: 38px;
    padding: 0 8px;
  }
}

/* ---------- 7. Hero en Rijnlijn ---------- */

.hero {
  position: relative;
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(104px, 10vw, 168px);
  background: var(--bg-alt);
}

/* Arnhemse signatuur over de volle breedte, direct boven de Rijnlijn.
   Dun en licht: ondersteunt de hero, concurreert er niet mee. */
.hero-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(26px, 3.6vw, 52px);
  width: 100%;
  height: clamp(48px, 6vw, 90px);
  pointer-events: none;
}

.hero-skyline path {
  fill: none;
  stroke: var(--line-art);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}

.hero .hero-grid {
  position: relative;
  z-index: 1;
}

/* Twee kolommen op gelijke hoogte: tekst links, netwerk rechts, beide
   verticaal gecentreerd zodat de illustratie niet schuin naast de kop hangt. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s8);
  align-items: center;
}

.hero-title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.hero-copy .lead {
  margin-top: var(--s5);
}

.hero-copy .btn-row {
  margin-top: var(--s6);
}

/* Merkthema's: één iconkleur, geen gekleurde rondjes. */
.pillars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s6) 0 0;
  padding: var(--s5) 0 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.pillars li {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--heading);
  font-weight: 700;
}

.pillars svg {
  width: 22px;
  height: 22px;
  color: var(--icon);
}

/* Donkerblauw paneel met het kanaalnetwerk; decoratief. */
.channels {
  position: relative;
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-lift);
}

.network {
  width: 100%;
  height: auto;
  padding: clamp(10px, 2vw, 24px);
}

.net-line {
  fill: none;
  stroke: rgba(185, 213, 241, 0.55);
  stroke-width: 2;
  stroke-dasharray: 4 7;
  stroke-linecap: round;
}

.net-orbit {
  fill: none;
  stroke: rgba(185, 213, 241, 0.14);
  stroke-width: 1.5;
}

.net-box {
  fill: var(--surface);
}

.net-icon {
  fill: none;
  stroke: var(--icon-light);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-theme="dark"] .net-icon {
  stroke: var(--icon-dark);
}

.net-label {
  fill: var(--navy);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
}

[data-theme="dark"] .net-label {
  fill: var(--white);
}

.net-card {
  transform-box: fill-box;
  transform-origin: center;
}

.hub-core {
  fill: var(--surface);
}

.hub-ring {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
}

.hub-pill {
  fill: var(--blue-mid);
}

.hub-text {
  fill: var(--white);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
}

/* Kanalen verschijnen een voor een, telkens als het netwerk in beeld komt. */
@keyframes net-card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.reveal-ready .channels:not(.is-visible) .net-card {
  opacity: 0;
}

.reveal-ready .channels.is-visible .net-card {
  animation: net-card-in 640ms var(--ease) both;
  animation-delay: var(--d, 0s);
}

@keyframes net-flow {
  to {
    stroke-dashoffset: -110;
  }
}

.channels.is-visible .net-line {
  animation: net-flow 10s linear infinite;
}

/* Rijnlijn: overgang van de hero naar de diensten. Golf in de kleur van het
   volgende vlak, met de rivierlijn erop. */
.rijn-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(28px, 4vw, 56px);
  pointer-events: none;
}

.rijn-divider .rijn-water {
  fill: var(--bg);
}

/* Eén lijnstijl voor de Rijn, overal op de site. */
.rijn-stroke {
  fill: none;
  stroke: var(--line-art);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s7);
  }

  .channels {
    width: 100%;
    max-width: 560px;
  }
}

@media (max-width: 560px) {
  .hero-copy .btn-row .btn {
    width: 100%;
  }

  .net-label {
    font-size: 19px;
  }
}

/* ---------- 8. Dienstenroute op Home ---------- */

/* Zeven stops langs één Rijnlijn, met een skyline die meegroeit. Drie
   standen: zonder script een lijst met dienstlinks (.route-fallback), bij
   minder beweging een gewone sectie (.route-static) en anders een
   scrollgestuurde route (.route-live, sticky stage in een hoge wrapper). */
.route {
  position: relative;
  background: var(--bg);
}

.route-stage {
  padding-block: var(--section-gap);
}

.route-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4) var(--s7);
  align-items: end;
}

.route-head .lead {
  margin-top: var(--s3);
}

.route-meta {
  display: grid;
  justify-items: end;
  gap: var(--s2);
}

/* Vaste kaartplek: alleen op desktop in de live route. */
.route-card-slot {
  display: none;
}

@media (min-width: 1024px) {
  .route-live .route-head {
    grid-template-columns: minmax(0, 1fr) min(380px, 34%);
    align-items: start;
  }

  .route-live .route-meta {
    grid-column: 1;
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
    align-items: center;
    gap: var(--s6);
    margin-top: var(--s5);
  }

  .route-live .route-card-slot {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 300px;
  }
}

.route-count {
  display: none;
  color: var(--heading);
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.route-count-total {
  color: var(--text-soft);
  font-size: 0.55em;
  letter-spacing: 0;
}

.route-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s3);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
}

.route-fallback a {
  display: block;
  padding: var(--s4);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 700;
  text-decoration: none;
}

/* Kleur per dienst: bestaande tokens. Google-diensten donkerblauw. */
.route-item[data-color="plan"] { --svc: var(--blue-mid); }
.route-item[data-color="brand"] { --svc: var(--oker); }
.route-item[data-color="web"] { --svc: var(--rijn); }
.route-item[data-color="google"] { --svc: var(--google-bg); }
.route-item[data-color="content"] { --svc: var(--baksteen); }
.route-item[data-color="social"] { --svc: var(--sonsbeek); }

/* Stop: rondje met het bestaande dienst-icoon. Nog niet bereikt: rustig en
   lijnvormig; bereikt: gevuld in de dienstkleur met een wit icoon. */
.route-stop {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  color: var(--text-soft);
  transition: background-color 240ms var(--ease), color 240ms var(--ease), box-shadow 240ms var(--ease), scale 240ms var(--ease);
}

.route-stop svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  transition: opacity 240ms var(--ease);
}

.route-stop svg text {
  fill: currentColor;
  stroke: none;
  font-family: var(--font);
  font-weight: 800;
}

.route-item.is-reached > .route-stop,
.route-static .route-stop {
  background: var(--svc);
  box-shadow: none;
  color: var(--icon-on-color);
}

.route-item.is-reached > .route-stop svg,
.route-static .route-stop svg {
  opacity: 1;
}

/* Donkerblauwe stop op een donkerblauwe pagina: dunne rand houdt hem zichtbaar. */
[data-theme="dark"] .route-item[data-color="google"].is-reached > .route-stop,
[data-theme="dark"] .route-static .route-item[data-color="google"] > .route-stop {
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.route-item.is-current > .route-stop {
  scale: 1.18;
  outline: 2px solid var(--svc);
  outline-offset: 3px;
}

.route-stop:hover {
  color: var(--heading);
}

.route-card h3 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.route-card p {
  margin-top: var(--s2);
  color: var(--text-soft);
  line-height: 1.5;
}

.route-card ul {
  display: grid;
  gap: 4px;
  margin: var(--s3) 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.45;
}

.route-card li {
  position: relative;
  padding-left: 18px;
}

.route-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: var(--svc);
}

.route-finale-title {
  color: var(--heading);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.route-finale-text {
  max-width: 34em;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Dark mode: de dienstkaartjes van de route zijn wit, met donkere tekst.
   De tokens worden lokaal teruggezet, zodat niets wit-op-wit erft. */
[data-theme="dark"] .route-live .route-card,
[data-theme="dark"] .route-static .route-item {
  --surface: var(--white);
  --heading: var(--navy);
  --text: var(--navy);
  --text-soft: rgba(7, 24, 82, 0.78);
  --accent: var(--blue-mid);
  --focus: var(--blue-mid);
  --line: var(--ice);
  --line-strong: var(--blue-light);
  --bg: var(--white);
  background: var(--white);
  color: var(--navy);
}

/* Skyline onderaan; groeit mee met de route (lengte per lijn = 1). */
.route-skyline {
  display: block;
  width: 100%;
  height: clamp(70px, 14vh, 150px);
  margin-top: var(--s6);
}

.route-skyline path {
  fill: none;
  stroke: var(--line-art);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Rustige context links en rechts van de groeiende skyline: een molen
   (Openluchtmuseum), de torens van de Walburgiskerk, huizen en bomen. */
.route-skyline .route-side path {
  stroke: var(--line-strong);
  stroke-dasharray: none;
}

/* Rijnlijn buiten de route, tot aan beide schermranden. */
.route-river-out {
  position: absolute;
  max-width: none;
  top: calc(77.3% - 6px);
  height: 20px;
  overflow: visible;
}

.route-river-left {
  right: 100%;
  width: calc(50vw - 50%);
}

.route-river-right {
  left: 97%;
  width: calc(50vw - 47%);
}

.route-river-out path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.route-river-out .river-out-water {
  stroke: var(--line-art);
  stroke-width: 2;
  opacity: 0.35;
}

.route-river-out .river-out-bank {
  stroke: var(--line-strong);
  stroke-width: 1;
}

/* Minder beweging: gewone sectie met alle diensten als lijst. */
.route-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s4);
  margin: var(--s7) 0 0;
  padding: 0;
  list-style: none;
}

.route-static .route-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--r-panel);
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px var(--line);
}

.route-static .route-finale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s6);
}

/* Scrollgestuurde route. */
.route-live .route-track {
  height: 400vh;
}

.route-live .route-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  padding-block: calc(76px + clamp(12px, 3vh, 40px)) 0;
}

.route-live .route-count {
  display: block;
}

.route-live .route-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

/* Routebeeld: altijd de volle breedte. De rivier ligt onderin; de brug
   gebruikt de vrije hoogte erboven. Op desktop staat het actieve kaartje op
   een vaste plek rechts naast de titel, zodat het de brug nooit afdekt. */
.route-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 140;
}

/* Brede schermen: de route mag breder zijn dan de tekstkolom. */
@media (min-width: 1500px) {
  .route-live .route-body {
    width: min(calc(100vw - 32px), 1664px);
    max-width: none;
    margin-left: 50%;
    translate: -50% 0;
  }
}

/* Heuvelrug achter de route: zeer licht, alleen sfeer. */
.route-hills {
  position: absolute;
  max-width: none;
  left: calc(50% - 50vw);
  top: -60%;
  width: 100vw;
  height: 90%;
  overflow: visible;
}

.route-hills path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}

.route-hills .hills-far {
  stroke-dasharray: 2 6;
  opacity: 0.6;
}

.route-lines,
.route-draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.route-v {
  display: none;
}

.route-guide {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* John Frostbrug: een eigen laag met eigen afmetingen. Desktop: 70% van het
   routebeeld breed en zo hoog als de vrije ruimte boven de rivier (--rise
   komt uit main.js). Een lichte schets is altijd zichtbaar; de volle lijn
   tekent zich van links naar rechts met de route mee. */
.route-bridge {
  position: absolute;
  pointer-events: none;
}

.route-bridge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  overflow: visible;
}

.route-bridge path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.route-bridge .bridge-base path {
  stroke: var(--line-strong);
}

.route-bridge .bridge-draw path {
  stroke: var(--line-art);
}

/* De hoofdvorm duidelijker dan de details. */
.route-bridge .br-arch {
  stroke-width: 3.5;
}

.route-bridge .br-arch-inner,
.route-bridge .br-deck,
.route-bridge .br-pier {
  stroke-width: 2.2;
}

.route-bridge .br-detail {
  stroke-width: 1.4;
}

.route-bridge-desktop {
  left: 15%;
  width: 70%;
  top: calc(-1 * var(--rise, 200px));
  bottom: 26.4%;
}

.route-draw .rijn-stroke {
  stroke-width: 3;
}

.route-stops {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-live .route-stop {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
}

/* Eén kaartje tegelijk, op de vaste kaartplek. Gepasseerde kaartjes klappen
   in. Kaartjes liggen boven alle lijnen. */
.route-live .route-card,
.route-live .route-finale {
  position: absolute;
  z-index: 3;
  left: var(--slot-x, 0);
  top: var(--slot-y, 0);
  width: var(--slot-w, 340px);
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  transition: opacity 260ms var(--ease), translate 260ms var(--ease), visibility 0s linear 260ms;
}

.route-live .route-card {
  padding: var(--s5);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 3px 0 var(--svc), inset 0 0 0 1px var(--line), var(--shadow-card);
}

.route-live .route-item.is-current .route-card,
.route-live.is-finale .route-finale {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

.route-live .route-finale {
  display: grid;
  justify-items: start;
  gap: var(--s4);
}

.route-end {
  position: absolute;
  left: 98%;
  top: 75.7%;
  translate: -25% -100%;
  color: var(--text-soft);
  transition: color 240ms var(--ease);
}

.route-end svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-live.is-finale .route-end {
  color: var(--accent);
}

.route-live .route-skyline {
  flex: none;
  height: clamp(56px, 10vh, 100px);
  margin-top: clamp(8px, 2vh, 24px);
}

/* Tablet en telefoon: verticale route. De brug ligt in een eigen band over
   de volle breedte tussen stop 4 en 5; het kaartje staat onderin naast de
   lijn en raakt de brug niet. */
@media (max-width: 1023px) {
  .route-head {
    grid-template-columns: 1fr;
  }

  .route-meta {
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  .route-live .route-track {
    height: 350vh;
  }

  .route-live .route-stage {
    padding-top: calc(76px + 12px);
  }

  .route-live .route-head h2 {
    font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
  }

  .route-live .route-head .lead {
    display: none;
  }

  .route-live .route-body {
    display: block;
    padding-block: var(--s3) var(--s2);
  }

  .route-live .route-canvas {
    width: 72px;
    height: 100%;
    aspect-ratio: auto;
  }

  .route-h {
    display: none;
  }

  .route-v {
    display: block;
  }

  .route-live .route-stop {
    left: var(--vx);
    top: var(--vy);
    width: 34px;
    height: 34px;
  }

  .route-live .route-stop svg {
    width: 18px;
    height: 18px;
  }

  .route-live .route-item.is-current > .route-stop {
    scale: 1.08;
  }

  .route-bridge-mobile {
    left: 0;
    width: calc(100vw - 2 * var(--gutter));
    max-width: 640px;
    top: 31%;
    height: 15%;
  }

  .route-live .route-card,
  .route-live .route-finale {
    left: calc(100% + var(--s4));
    top: auto;
    bottom: 0;
    width: min(420px, calc(100vw - 2 * var(--gutter) - 72px - var(--s4)));
    max-height: calc(54% - 10px);
    overflow: auto;
  }

  .route-live .route-card {
    padding: var(--s3) var(--s4) var(--s2);
  }

  .route-live .route-card h3 {
    font-size: 1.125rem;
  }

  .route-live .route-card h3 {
    font-size: 1.0625rem;
  }

  .route-live .route-card p {
    margin-top: var(--s1);
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .route-live .route-card ul {
    gap: 2px;
    margin-block: 6px;
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .route-live .route-card .text-link {
    min-height: 32px;
    font-size: 0.875rem;
  }

  .route-end {
    left: 50%;
    top: 100%;
  }

  .route-live .route-skyline {
    height: clamp(40px, 6vh, 64px);
    margin-top: var(--s1);
  }
}

/* Korte telefoons: te weinig hoogte voor brug én volledig kaartje. Het
   kaartje toont dan titel, omschrijving en de link naar de dienst; de
   bullets staan op de dienstenpagina. Onder 760px ook kleinere stops. */
@media (max-width: 1023px) and (max-height: 810px) {
  .route-live .route-card ul {
    display: none;
  }

  .route-live .route-finale {
    gap: var(--s2);
  }

  .route-live .route-finale-title {
    font-size: 1.125rem;
  }

  .route-live .route-finale-text {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .route-live .route-finale .btn {
    min-height: 44px;
    padding-block: 8px;
  }
}

@media (max-width: 1023px) and (max-height: 760px) {

  .route-live .route-stop {
    width: 28px;
    height: 28px;
  }

  .route-live .route-stop svg {
    width: 15px;
    height: 15px;
  }

  .route-live .route-item.is-current > .route-stop {
    scale: 1;
  }
}

/* ---------- 9. Zichtbaarheidscheck ---------- */

/* Rustig: één invoergroep, één percentage met balk, een kort overzicht in
   twee regels en één vervolgstap. */
.check-head {
  max-width: 46rem;
  margin-bottom: var(--s6);
}

.check-head .lead {
  margin-top: var(--s4);
}

.check-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s6);
  align-items: start;
}

.check-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.channel-grid li:last-child {
  grid-column: span 2;
}

/* Het hele vlak is het label van één selectievakje. */
.channel-tile {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 22px;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-card);
  background: rgba(185, 213, 241, 0.05);
  box-shadow: inset 0 0 0 1px var(--deep-line);
  cursor: pointer;
  transition: background-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

.channel-tile:hover {
  background: rgba(185, 213, 241, 0.1);
  box-shadow: inset 0 0 0 1px rgba(185, 213, 241, 0.45);
}

.channel-tile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tile-icon {
  color: var(--icon);
}

.tile-icon svg {
  width: 22px;
  height: 22px;
}

.tile-title {
  color: var(--white);
  font-weight: 700;
  line-height: 1.3;
}

/* Vinkvakje rechts: leeg of gevuld met een vinkje. */
.tile-box {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(185, 213, 241, 0.6);
  transition: background-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

.tile-box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--navy);
  border-width: 0 2.5px 2.5px 0;
  rotate: 45deg;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}

.channel-tile:has(input:checked) {
  background: rgba(185, 213, 241, 0.14);
  box-shadow: inset 0 0 0 2px var(--blue-light);
}

.channel-tile input:checked ~ .tile-box {
  background: var(--white);
  box-shadow: none;
}

.channel-tile input:checked ~ .tile-box::after {
  opacity: 1;
}

.channel-tile:has(input:focus-visible) {
  outline: 3px solid var(--blue-light);
  outline-offset: 3px;
}

.check-result {
  position: sticky;
  top: 100px;
  padding: var(--s6);
  border-radius: var(--r-panel);
  background: var(--deep-raised);
  box-shadow: inset 0 0 0 1px var(--deep-line);
}

.score-value {
  display: flex;
  align-items: baseline;
  color: var(--white);
  font-size: clamp(3.25rem, 2.6rem + 2.4vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.score-unit {
  margin-left: 4px;
  color: var(--blue-light);
  font-size: 0.5em;
  letter-spacing: 0;
}

.score-bar {
  position: relative;
  height: 10px;
  margin-top: var(--s4);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(185, 213, 241, 0.16);
}

.score-fill {
  position: absolute;
  inset: 0;
  background: var(--blue-light);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 450ms var(--ease);
}

.board-status {
  margin-top: var(--s5);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.result-lines {
  display: grid;
  gap: var(--s3);
  margin: var(--s4) 0 0;
}

.result-lines > div {
  display: grid;
  gap: 2px;
}

.result-lines > [hidden] {
  display: none;
}

.result-lines dt {
  color: var(--blue-light);
  font-size: var(--fs-small);
  font-weight: 700;
}

.result-lines dd {
  margin: 0;
  color: var(--white);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.result-cta {
  width: 100%;
  margin-top: var(--s5);
}

@media (max-width: 1080px) {
  .check-layout {
    grid-template-columns: 1fr;
  }

  .check-result {
    position: relative;
    top: 0;
  }
}

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

  .channel-grid li:last-child {
    grid-column: auto;
  }

  .check-result {
    padding: var(--s5);
  }
}

/* ---------- 10. Waarom RMS ---------- */

#aanpak {
  background: var(--bg-tint);
}

.approach-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s8);
  align-items: start;
}

.approach-statement {
  margin-top: var(--s5);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--heading);
}

.approach-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Geen kaarten: rijen met een lijn die bij hover donkerder wordt. */
.approach-list li {
  padding-top: var(--s5);
  border-top: 2px solid var(--line-strong);
  transition: border-color var(--t-fast) var(--ease);
}

.approach-list li:hover {
  border-top-color: var(--heading);
}

.approach-list h3 {
  font-size: 1.25rem;
}

.approach-list p {
  margin-top: var(--s3);
  color: var(--text-soft);
}

/* Over RMS: kop links, aanpakzin rechts op dezelfde hoogte. */
.approach-layout > div > .approach-statement:first-child {
  margin-top: 0;
}

@media (max-width: 980px) {
  .approach-layout {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}

@media (max-width: 560px) {
  .approach-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- 11. Scrollscènes op Home: Waarom RMS en werkwijze ---------- */

/* Korte sticky stage (220vh) waarin de voortgang de actieve stap bepaalt.
   Zonder .scene-live (geen script, minder beweging) een gewone sectie waarin
   alles zichtbaar en "actief" is. Elke scène heeft een eigen compositie:
   Waarom RMS is radiaal, de werkwijze een verticale tijdlijn. */
.scene-stage {
  padding-block: var(--section-gap);
}

.scene-live .scene-track {
  height: 220vh;
}

.scene-live .scene-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  padding-block: calc(76px + 16px) 16px;
}

@media (max-width: 767px) {
  .scene-live .scene-track {
    height: 200vh;
  }
}

/* Waarom RMS: drie pijlers rond de kern. */
.why {
  background: var(--bg-tint);
}

.why-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s8);
  align-items: center;
}

.why-visual svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.why-ring-guide {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
}

/* De ring om de kern loopt rond met de scrollpositie. */
.why-ring {
  fill: none;
  stroke: var(--line-art);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 1));
}

.why-link {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-dasharray: 3 5;
  transition: stroke 300ms var(--ease);
}

.why-core {
  fill: var(--navy);
}

[data-theme="dark"] .why-core {
  fill: var(--deep);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.why-core-text {
  fill: var(--white);
  font-family: var(--font);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  text-anchor: middle;
}

.why-node > circle {
  fill: var(--bg);
  stroke: var(--line-strong);
  stroke-width: 2;
  transition: fill 300ms var(--ease), stroke 300ms var(--ease);
}

.why-icon {
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 300ms var(--ease);
}

.why-label {
  fill: var(--text-soft);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}

.why-node {
  transform-box: fill-box;
  transform-origin: center;
  transition: scale 300ms var(--ease);
}

/* Bereikt en actief: gevuld rondje, wit icoon, doorgetrokken verbinding. */
.why:not(.scene-live) .why-link,
.why-link.is-done,
.why-link.is-active {
  stroke: var(--line-art);
  stroke-dasharray: none;
}

.why:not(.scene-live) .why-node > circle,
.why-node.is-done > circle,
.why-node.is-active > circle {
  fill: var(--blue-mid);
  stroke: var(--blue-mid);
}

.why:not(.scene-live) .why-icon,
.why-node.is-done .why-icon,
.why-node.is-active .why-icon {
  stroke: var(--icon-on-color);
}

.why-node.is-active {
  scale: 1.12;
}

.why-node.is-active .why-label {
  fill: var(--heading);
}

.why-lead {
  margin-top: var(--s4);
}

.why-list {
  display: grid;
  gap: var(--s2);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
}

.why-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-card);
  transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}

.why-num {
  padding-top: 3px;
  color: var(--text-soft);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.why-item h3 {
  font-size: 1.25rem;
}

.why-item p {
  margin-top: var(--s2);
  color: var(--text-soft);
}

/* Live: de actieve pijler krijgt een vlak en een accentlijn; de andere
   blijven leesbaar maar stiller. */
.scene-live .why-item h3 {
  color: var(--text-soft);
  transition: color 300ms var(--ease);
}

.scene-live .why-item.is-active {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-card);
}

.scene-live .why-item.is-active h3 {
  color: var(--heading);
}

.scene-live .why-item.is-active .why-num {
  color: var(--accent);
}

.why .note {
  margin-top: var(--s5);
}

@media (max-width: 1023px) {
  .why-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--s6);
  }
}

/* Mobiel en desktop zonder scène: icoon en stappenbalk alleen op mobiel. */
.why-item-icon,
.why-steps {
  display: none;
}

/* Telefoon: eigen compositie in plaats van een verkleinde desktopweergave.
   Kop, een grote kern met drie pijlers, een stappenbalk met namen en één
   duidelijk paneel voor de actieve pijler. */
@media (max-width: 767px) {
  .why-layout {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  .why-visual svg {
    max-width: min(320px, 82vw);
  }

  .why-num {
    display: none;
  }

  .why-item {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    padding: var(--s4);
    border-radius: var(--r-card);
  }

  .why-item-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--blue-mid);
    color: var(--icon-on-color);
  }

  .why-item-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .why-item h3 {
    padding-top: 10px;
    font-size: 1.25rem;
  }

  /* Live: kop bovenaan, dan de kern, de stappenbalk en de actieve pijler. */
  .why.scene-live .why-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s4);
  }

  /* Grotere pijlerrondjes, zodat de iconen op een telefoon herkenbaar zijn. */
  .why-node {
    scale: 1.3;
  }

  .why-node.is-active {
    scale: 1.45;
  }

  .why.scene-live .why-copy {
    display: contents;
  }

  .why.scene-live .why-copy h2 {
    order: -1;
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  }

  .why.scene-live .why-lead,
  .why.scene-live .note,
  .why.scene-live .why-label {
    display: none;
  }

  .why.scene-live .why-visual svg {
    width: min(82vw, 34svh, 320px);
    max-width: none;
  }

  .why.scene-live .why-steps {
    order: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .why-steps li {
    padding-top: var(--s2);
    border-top: 4px solid var(--line-strong);
    color: var(--text-soft);
    font-size: 0.9375rem;
    font-weight: 700;
    transition: border-color 300ms var(--ease), color 300ms var(--ease);
  }

  .why-steps li.is-done,
  .why-steps li.is-active {
    border-top-color: var(--accent);
    color: var(--heading);
  }

  .why-steps li.is-done::before {
    content: "✓ ";
    color: var(--accent);
  }

  .why.scene-live .why-list {
    order: 2;
    margin: 0;
  }

  /* Alleen de actieve pijler in beeld; de andere blijven voor schermlezers
     in de lijst staan. */
  .why.scene-live .why-item:not(.is-active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .why.scene-live .why-item.is-active {
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--accent), var(--shadow-card);
  }

  .why.scene-live .why-item.is-active h3 {
    font-size: 1.375rem;
  }

  .why.scene-live .why-item p {
    font-size: 1rem;
    line-height: 1.55;
  }
}

/* Werkwijze: verticale tijdlijn links, actieve stap groot rechts. */
.process {
  background: var(--bg);
}

.process-head {
  max-width: 40rem;
  margin-bottom: var(--s7);
}

.process-head .lead {
  margin-top: var(--s4);
}

.proc-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s8);
  align-items: center;
}

.proc-list {
  position: relative;
  display: grid;
  gap: var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lijn langs de stappen: grijze basis en een vulling die de scrollpositie
   volgt. Ligt onder de rondjes. */
.proc-list::before,
.proc-list::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  border-radius: 1px;
}

.proc-list::before {
  background: var(--line-strong);
}

.proc-list::after {
  background: var(--accent);
  transform-origin: center top;
  transform: scaleY(var(--p, 1));
}

.proc-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

.proc-dot {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  color: var(--text-soft);
  transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease), scale 300ms var(--ease);
}

.proc-dot svg {
  width: 22px;
  height: 22px;
}

/* Afgerond of actief (en zonder scène altijd): gevuld met wit icoon. */
.process:not(.scene-live) .proc-dot,
.proc-item.is-done .proc-dot,
.proc-item.is-active .proc-dot {
  background: var(--blue-mid);
  box-shadow: none;
  color: var(--icon-on-color);
}

.proc-item.is-active .proc-dot {
  scale: 1.15;
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.proc-text {
  padding-top: 10px;
}

.proc-text h3 {
  font-size: 1.25rem;
}

.proc-num {
  margin-right: var(--s3);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.proc-text p {
  margin-top: var(--s2);
  color: var(--text-soft);
}

.scene-live .proc-item:not(.is-active) h3 {
  color: var(--text-soft);
}

.scene-live .proc-item h3 {
  transition: color 300ms var(--ease);
}

/* Grote weergave van de actieve stap; alleen in de live scène. */
.proc-visual {
  display: none;
}

.scene-live .proc-visual {
  position: relative;
  display: block;
  min-height: 340px;
}

.proc-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: var(--s4) var(--s5);
  opacity: 0;
  translate: 0 14px;
  transition: opacity 300ms var(--ease), translate 300ms var(--ease);
}

.proc-slide.is-active {
  opacity: 1;
  translate: 0 0;
}

.proc-big {
  grid-column: 1 / -1;
  color: transparent;
  font-size: clamp(7rem, 4rem + 8vw, 12rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 2px var(--line-art);
}

.proc-badge {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--blue-mid);
  color: var(--icon-on-color);
}

.proc-badge svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proc-caption {
  display: grid;
  gap: 2px;
  color: var(--heading);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.proc-caption small {
  color: var(--text-soft);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0;
}

.process .note {
  margin-top: var(--s6);
}

@media (max-width: 900px) {
  .proc-layout {
    grid-template-columns: 1fr;
  }

  .scene-live .proc-visual {
    display: none;
  }

  /* Zonder grote weergave krijgt de actieve stap zelf een vlak. */
  .scene-live .proc-item {
    padding: var(--s3);
    border-radius: var(--r-card);
    transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
  }

  .scene-live .proc-item.is-active {
    background: var(--bg-alt);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  /* Middelblauw haalt op dit vlak geen 4,5:1. */
  .scene-live .proc-item.is-active .proc-num {
    color: var(--heading);
  }

  .scene-live .proc-list::before,
  .scene-live .proc-list::after {
    left: 35px;
    top: 36px;
    bottom: 36px;
  }
}

@media (max-width: 767px) {
  .scene-live .process-head {
    margin-bottom: var(--s5);
  }

  .scene-live .process-head h2 {
    font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
  }

  .scene-live .proc-list {
    gap: var(--s2);
  }

  .process.scene-live .note {
    display: none;
  }
}

/* ---------- 12. Contact ---------- */

/* Home: contactblok op een licht vlak. */
.contact {
  background: var(--bg-alt);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s8);
  align-items: start;
}

.contact-intro .lead {
  margin-top: var(--s5);
}

.contact-details {
  margin-top: var(--s6);
  display: grid;
  gap: var(--s3);
}

/* Bevestigde contactgegevens: label boven, gegevens eronder. Werkt op het
   lichte contactblok (Home) en het donkere vlak (Contact) via de tokens. */
.contact-list {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: grid;
  gap: 2px;
}

.contact-label {
  color: var(--text-soft);
  font-size: var(--fs-small);
  font-weight: 700;
}

.contact-list a {
  color: var(--heading);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

.contact-list a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.contact-list li > span:not(.contact-label) {
  color: var(--text);
  line-height: 1.5;
}

.contact-region {
  color: var(--text-soft);
  font-weight: 600;
}

/* Formulierpaneel; wit in light mode. De boog bovenaan verwijst naar de
   John Frostbrug. */
.contact-panel {
  position: relative;
  border-radius: var(--r-panel);
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift);
}

.panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.panel-head h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.panel-arch {
  flex: none;
  width: 112px;
  height: 36px;
  fill: none;
  stroke: var(--line-art);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
}

.field {
  display: grid;
  row-gap: 6px;
}

.field-full {
  grid-column: 1 / -1;
}

.field label,
.field legend {
  font-weight: 700;
  color: var(--heading);
  transition: color var(--t-fast) var(--ease);
}

.field:focus-within > label {
  color: var(--accent);
}

.field .hint {
  font-weight: 500;
  color: var(--text-soft);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-input);
  background: var(--field-bg);
  color: var(--heading);
  font: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:hover,
.field textarea:hover {
  background: var(--field-hover);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--heading);
  box-shadow: 0 0 0 3px var(--line-strong);
}

/* Dikkere rand via box-shadow: de randbreedte blijft 1px, dus niets verspringt. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

/* Fout: kleur plus uitroepteken en tekst. De regel houdt altijd zijn ruimte. */
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  color: var(--error);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
}

.field-error:not(:empty)::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--error);
  color: var(--bg);
  font-size: 11px;
  line-height: 1;
}

.form-required-note {
  font-size: var(--fs-small);
  color: var(--text-soft);
}

.req {
  color: var(--accent);
}

.interest {
  margin: 0;
  padding: 0;
  border: 0;
}

.interest legend {
  margin-bottom: var(--s3);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--field-bg);
  box-shadow: inset 0 0 0 1px var(--field-border);
  color: var(--heading);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.chip span:hover {
  background: var(--bg-tint);
}

.chip input:checked + span {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: inset 0 0 0 1px var(--btn-bg);
}

.chip input:checked + span::before {
  content: "✓";
  margin-right: 6px;
}

.chip input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.form-privacy {
  font-size: var(--fs-small);
  color: var(--text-soft);
}

/* Groeiende onderstreping voor tekstlinks. */
.form-privacy a,
.footer-grid a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.form-privacy a {
  background-size: 100% 1px;
}

.form-privacy a:hover,
.footer-grid a:hover,
.footer-grid a:focus-visible {
  background-size: 100% 2px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

.form-status {
  font-weight: 600;
}

/* Turnstile draait onzichtbaar en neemt geen ruimte in. Alleen als Cloudflare
   een interactieve controle vraagt (.is-active) verschijnt het boven de knop. */
.turnstile-slot:not(.is-active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.turnstile-slot.is-active {
  flex: 0 0 100%;
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  color: var(--error);
}

.form-status.is-info {
  color: var(--heading);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-input);
  background: var(--bg-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Contactpagina: donkerblauwe introductie met gestileerde plattegrond,
   formulier ernaast. Het paneel overlapt de introductie iets. */
.contact-page {
  position: relative;
  padding-block: clamp(32px, 4vw, 64px) var(--section-gap);
  background: var(--bg-alt);
}

.contact-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}

.contact-aside {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100%;
  padding: clamp(28px, 4vw, 56px);
  padding-right: clamp(48px, 7vw, 112px);
  border-radius: var(--r-panel);
}

.contact-aside .page-title {
  max-width: 10em;
}

.contact-aside .lead {
  margin-top: var(--s5);
}

/* Kaart van centraal Arnhem (OpenStreetMap-data, als statische SVG in
   assets/img). Achter de tekst, gedempt, zodat de inhoud voorgaat. De
   kaartkleuren zijn gemaakt voor dit donkerblauwe vlak, dat in beide thema's
   donker blijft. */
.city-map {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  max-width: none;
  height: auto;
  opacity: 0.75;
  pointer-events: none;
  /* Loopt boven zacht over in het effen vlak, zodat de titel rustig staat. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
}

.map-credit {
  margin-top: var(--s5);
  color: var(--blue-light);
  font-size: 0.8125rem;
}

.map-credit a {
  color: var(--white);
}

.map-credit a:hover {
  color: var(--blue-light);
}

.contact-next {
  display: grid;
  gap: var(--s4);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: next;
}

.contact-next li {
  position: relative;
  padding-left: 44px;
  color: var(--white);
  font-weight: 600;
  counter-increment: next;
}

.contact-next li::before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: -3px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--blue-light);
  color: var(--blue-light);
  font-size: var(--fs-small);
  font-weight: 800;
}

.contact-next-title {
  margin-top: var(--s7);
  color: var(--blue-light);
  font-size: var(--fs-small);
  font-weight: 700;
}

.contact-next-title + .contact-next {
  margin-top: var(--s4);
}

.contact-aside .contact-details {
  margin-top: var(--s6);
}

.text-link-row {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.contact-page .contact-panel {
  margin-top: var(--s7);
  margin-left: calc(-1 * clamp(32px, 5vw, 80px));
}

@media (max-width: 980px) {
  .contact-layout,
  .contact-page-layout {
    grid-template-columns: 1fr;
    gap: var(--s7);
  }

  /* Onderaan ruimte voor de kaart, zodat de Rijnbocht zichtbaar blijft. */
  .contact-aside {
    padding-right: clamp(28px, 4vw, 56px);
    padding-bottom: calc(var(--s7) + min(64vw, 380px));
  }

  .city-map {
    opacity: 0.85;
  }

  .contact-page .contact-panel {
    margin: calc(-1 * var(--s7)) var(--s3) 0;
  }

}

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

  .form-actions .btn {
    width: 100%;
  }

  .contact-page .contact-panel {
    margin-inline: 0;
  }

  .panel-arch {
    width: 84px;
  }
}

/* ---------- 13. Subpagina's ---------- */

/* Paginakop: donkerblauwe band zonder gloed of raster. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 6vw, 96px);
}

.page-title {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.06;
  font-weight: 750;
  letter-spacing: -0.035em;
  max-width: 14em;
}

.page-hero .lead {
  margin-top: var(--s5);
}

.page-hero-actions {
  margin-top: var(--s6);
}

@media (max-width: 560px) {
  .page-hero-actions .btn {
    width: 100%;
  }
}

/* ---------- 14. Diensten-pagina ---------- */

.services-band {
  background: var(--bg-alt);
}

.service-list {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Alle zeven dienstkaarten hebben dezelfde achtergrond: wit in light mode,
   hetzelfde donkere oppervlak in dark mode. */
.service-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s5) var(--s8);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card);
  scroll-margin-top: 100px;
  transition: translate var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.service-item:hover {
  translate: 0 -4px;
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-lift);
}

/* Lijnicoon los in de tekststroom, zonder eigen tegel; zelfde iconkleur
   voor alle diensten. */
.service-art {
  display: block;
  width: 52px;
  margin-bottom: var(--s4);
  color: var(--icon);
  transition: translate 300ms var(--ease);
}

.service-art svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-art text {
  fill: currentColor;
  stroke: none;
  font-family: var(--font);
  font-weight: 800;
}

.service-item:hover .service-art {
  translate: 0 -3px;
}

.service-item h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);
}

.service-channel {
  margin-top: var(--s3);
  color: var(--text-soft);
  font-weight: 700;
}

.service-body {
  display: grid;
  gap: var(--s5);
  align-content: start;
}

.service-need {
  line-height: 1.55;
}

.service-need strong {
  color: var(--heading);
}

/* Wat de dienst inhoudt: uit services-data.js (tools/dienstteksten.js). */
.service-detail {
  display: grid;
  gap: var(--s3);
}

.service-desc {
  color: var(--heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
}

.service-bullets {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-bullets li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  line-height: 1.5;
}

.service-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* Vervolgstap per dienst: een tekstlink met pijl. */
.service-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--heading);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--line-strong);
  transition: border-color var(--t-fast) var(--ease);
}

.service-cta::after {
  content: "→";
  transition: translate var(--t-fast) var(--ease);
}

.service-cta:hover {
  color: var(--heading);
  border-bottom-color: var(--accent);
}

.service-item:hover .service-cta::after {
  translate: 4px 0;
}

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

/* Adviessectie: middelblauw vlak, één keer op de pagina. */
.advice {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-gap);
  background: var(--advice-bg);
  --text-soft: var(--white);
  --focus: var(--white);
}

.advice-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s8);
  align-items: center;
}

.advice .lead {
  margin-top: var(--s5);
}

.advice .btn-row {
  margin-top: var(--s6);
}

.advice-art {
  width: 100%;
  height: auto;
  overflow: visible;
}

.advice-route {
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
}

.advice-node {
  fill: var(--advice-bg);
  stroke: var(--white);
  stroke-width: 3;
}

.advice-node-end {
  fill: var(--white);
}

.advice-check {
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.advice-chip {
  fill: var(--white);
}

.advice-text {
  fill: var(--navy);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
}

@media (max-width: 860px) {
  .advice-layout {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .advice-art {
    max-width: 420px;
  }
}

@media (max-width: 560px) {
  .advice .btn {
    width: 100%;
  }
}

/* ---------- 15. Over RMS ---------- */

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s7);
  align-items: end;
}

/* Kleine Arnhemse lijnillustratie in de paginakop. */
.about-art {
  width: 100%;
  max-width: 420px;
  height: auto;
  justify-self: end;
}

.city-line {
  fill: none;
  stroke: var(--blue-light);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
}

.themes li {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(185, 213, 241, 0.5);
  color: var(--white);
  font-weight: 700;
}

/* Wie we zijn: één tekstkolom met een prettige regellengte (geen fotoplek). */
.about-layout .prose {
  display: grid;
  gap: var(--s5);
  max-width: 44rem;
}

/* Traject: vier stappen langs één Rijnlijn (zelfde stappen als de werkwijze op Home). */
.traject {
  background: var(--bg-alt);
}

.traject-track {
  position: relative;
}

.traject-river {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 120px;
  /* Tekent mee met de scrollpositie (--p op .traject-track). */
  clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0);
}

.traject-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.traject-steps li {
  display: grid;
  justify-items: center;
  padding: 32px var(--s5) 0;
  text-align: center;
}

.traject-dot {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 2px var(--line-art);
  color: var(--icon);
}

.traject-dot svg {
  width: 24px;
  height: 24px;
}

.traject-steps h3 {
  margin-top: var(--s6);
  font-size: 1.25rem;
}

.traject-steps p {
  margin-top: var(--s3);
  max-width: 22em;
  color: var(--text-soft);
}

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

  .about-art {
    justify-self: start;
    max-width: 320px;
  }

  /* Verticaal: de rivier wordt een lijn langs de stappen. */
  .traject-river {
    display: none;
  }

  .traject-steps {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .traject-steps::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line-art);
  }

  .traject-steps li {
    grid-template-columns: 56px minmax(0, 1fr);
    justify-items: start;
    column-gap: var(--s5);
    padding: 0;
    text-align: left;
  }

  .traject-dot {
    position: relative;
    grid-row: 1 / span 2;
  }

  .traject-steps h3 {
    margin-top: 12px;
  }
}

/* ---------- 16. Privacy, slotblok en 404 ---------- */

.legal {
  max-width: 46rem;
}

.legal h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.legal h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal p {
  margin-top: var(--s4);
  line-height: 1.7;
}

/* Algemene voorwaarden: genummerde leden (1.1, 1.2 ...) met hangend nummer. */
.clauses {
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

.clauses li {
  position: relative;
  margin-top: var(--s3);
  padding-left: 3rem;
  line-height: 1.7;
}

.clause-num {
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.legal-note,
.legal-updated {
  color: var(--text-soft);
}

.legal-note {
  margin-bottom: var(--s6);
}

.closing {
  background: var(--bg);
}

.closing-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6);
  align-items: center;
  border-radius: var(--r-panel);
  padding: clamp(28px, 4vw, 56px);
}

.closing-panel .lead {
  margin-top: var(--s3);
}

@media (max-width: 760px) {
  .closing-panel {
    grid-template-columns: 1fr;
  }
}

/* 404: verdwaald, met de brug als wegwijzer terug. */
.lost {
  padding-block: var(--section-gap);
  background: var(--bg-alt);
}

.lost-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s7);
  align-items: center;
}

.lost .lead {
  margin-top: var(--s5);
}

.lost .btn-row {
  margin-top: var(--s6);
}

.lost-en {
  margin-top: var(--s6);
  color: var(--text-soft);
  font-size: var(--fs-small);
}

/* Middelblauw haalt op het lichte vlak geen 4,5:1; hover blijft donkerblauw. */
.lost-en a:hover {
  color: var(--heading);
}

.lost-art .city-line {
  stroke: var(--line-art);
}

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

  .lost-art {
    max-width: 360px;
  }
}

/* ---------- 17. Voettekst en skyline ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--s6);
}

/* Gestileerde Arnhemse skyline met de Rijn eronder. Geen exacte
   architectuurtekening. Bij scrollen wordt hij getekend. */
.skyline {
  display: block;
  width: 100%;
  height: clamp(120px, 14vw, 190px);
  margin-bottom: var(--s7);
}

.skyline path {
  fill: none;
  stroke: rgba(185, 213, 241, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Tekent mee met de scrollpositie (--p op .skyline); omhoog scrollen trekt
     de lijnen terug. Zonder script volledig getekend. */
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 1));
}

.skyline .skyline-river {
  stroke: var(--blue);
  stroke-width: 2;
}

.skyline .skyline-river-soft {
  stroke: rgba(76, 143, 209, 0.45);
}

.footer-name {
  line-height: 0;
  color: var(--white);
}

.footer-logo {
  display: block;
  width: auto;
  height: clamp(72px, 4vw + 48px, 120px);
  fill: currentColor;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  margin-top: var(--s7);
}

.footer-grid h2 {
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--blue-light);
}

.footer-grid ul {
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}

.footer-grid li + li {
  margin-top: var(--s2);
}

.footer-grid a {
  color: var(--white);
}

.footer-grid a:hover {
  color: var(--blue-light);
}

.footer-grid .todo {
  margin-top: var(--s3);
}

.footer-note {
  margin-top: var(--s3);
  color: var(--blue-light);
  font-size: var(--fs-small);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--deep-line);
  font-size: var(--fs-small);
  color: var(--blue-light);
}

.made-in {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-weight: 700;
}

/* Kleine geel-zwarte streep: knipoog naar de Arnhemse voetbalkleuren.
   Geen logo of embleem. Weglaten = deze span verwijderen. */
.stripes {
  display: inline-block;
  width: 26px;
  height: 10px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--geel) 0 5px, var(--zwart) 5px 8px);
}

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

  .skyline {
    margin-bottom: var(--s6);
  }
}

/* ---------- 18. Scroll-entrees ---------- */

/* De verborgen beginstand geldt alleen onder html.reveal-ready. main.js zet
   die klasse pas nadat de observers draaien; zonder script of bij een fout
   blijft alles zichtbaar. De entree volgt de scrollrichting: elementen komen
   van onderen binnen en worden alleen teruggezet als ze onderaan weer uit
   beeld gaan. Bij terugscrollen speelt dus geen entree opnieuw af.
   Lijnillustraties (skyline, Rijnlijn, werkwijze, route) volgen de
   scrollpositie via --p en zijn daardoor volledig omkeerbaar. */
.reveal-ready [data-reveal] {
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.reveal-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

/* Grote panelen: iets meer afstand en een lichte schaal. */
.reveal-ready .channels[data-reveal]:not(.is-visible),
.reveal-ready .contact-panel[data-reveal]:not(.is-visible),
.reveal-ready .advice-art[data-reveal]:not(.is-visible) {
  transform: translate3d(0, 36px, 0) scale(0.97);
}

/* Het resultaatpaneel van de check schuift van rechts in, alleen als het
   naast het formulier staat; anders zou het buiten de pagina steken. */
@media (min-width: 1081px) {
  .reveal-ready .check-result[data-reveal]:not(.is-visible) {
    transform: translate3d(32px, 0, 0);
  }
}

/* ---------- 19. Minder beweging ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  /* Vangnet: main.js zet reveal-ready niet bij minder beweging, maar mocht
     de voorkeur tijdens het bezoek veranderen, dan blijft alles zichtbaar. */
  .reveal-ready [data-reveal]:not(.is-visible),
  .reveal-ready .channels:not(.is-visible) .net-card {
    opacity: 1;
    transform: none;
  }

  /* Scrollgestuurde lijnen: volledig getekend. */
  [data-scrub] {
    --p: 1 !important;
  }
}