@charset "UTF-8";
/* =========================================================================
   Solutit — designsysteem V3
   Richting: licht, redactioneel en precies. Grote Plus Jakarta Sans-koppen,
   veel wit, hairlines in plaats van kaders, en het roze (#ff0060) als
   scalpel — niet als verfkwast. Donkere momenten: hero, cijfers, CTA, footer.
   Opbouw: 1 tokens · 2 basis · 3 utilities · 4 navigatie · 5 hero's
           6 componenten · 7 secties · 8 formulieren · 9 footer · 10 motion
   ========================================================================= */

/* Zachte paginawissels in browsers die cross-document view transitions kennen. */
@view-transition { navigation: auto; }

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  /* Merk */
  --accent:      #ff0060;
  --accent-dark: #d60052;
  --accent-ink:  #a8003f;
  --accent-wash: color-mix(in srgb, var(--accent) 7%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, white);
  --accent-line: color-mix(in srgb, var(--accent) 30%, white);

  /* Inkt & vlak — licht */
  --ink:       #0b0b10;
  --ink-2:     #1c1c23;
  --body-c:    #4c4c56;
  --muted:     #767680;
  --line:      #e8e8ee;
  --line-2:    #f0f0f4;
  --paper:     #fdfdfe;
  --paper-2:   #f6f6f8;
  --paper-3:   #efeff3;

  /* Nacht — donkere secties */
  --night:     #0a0a0f;
  --night-2:   #111117;
  --night-3:   #17171f;
  --night-line:rgba(255,255,255,.09);
  --night-body:rgba(255,255,255,.66);
  --night-mute:rgba(255,255,255,.44);

  /* Typografie */
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-disp: 'Plus Jakarta Sans', var(--font);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Alleen voor de wenk in het scanvenster — staat los in index.html */
  --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;

  --fs-hero: clamp(2.6rem, 1.35rem + 4.6vw, 5.15rem);
  --fs-h1:   clamp(2.45rem, 1.5rem + 3.6vw, 4.4rem);
  --fs-h2:   clamp(1.9rem, 1.35rem + 2.2vw, 3.15rem);
  --fs-h3:   clamp(1.16rem, 1.05rem + .45vw, 1.42rem);
  --fs-lead: clamp(1.06rem, 1rem + .3vw, 1.25rem);

  /* Maatvoering */
  --wrap:    1280px;
  --wrap-sm: 800px;
  --gutter:  clamp(1.2rem, 4vw, 2.75rem);
  --pad-y:   clamp(4.5rem, 9vw, 8.5rem);
  --pad-y-s: clamp(3rem, 6vw, 5.5rem);
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  /* Schaduw */
  --sh-1: 0 1px 2px rgba(11,11,16,.04), 0 3px 10px rgba(11,11,16,.04);
  --sh-2: 0 6px 16px rgba(11,11,16,.06), 0 18px 42px rgba(11,11,16,.08);
  --sh-3: 0 14px 30px rgba(11,11,16,.10), 0 38px 90px rgba(11,11,16,.14);
  --sh-accent: 0 10px 28px color-mix(in srgb, var(--accent) 34%, transparent);

  --ease:   cubic-bezier(.22,.68,.28,1);
  --ease-b: cubic-bezier(.34,1.45,.5,1);
  --hdr-h:  76px;
  --tb-h:   40px;   /* topbalk; 0 als hij uitstaat, zie .zonder-topbar */

  /* Fijne korrel voor donkere vlakken — inline SVG, dus geen extra request. */
  /* De ruistextuur als base64 in plaats van als leesbare svg.
     Reden: in de svg verwijst het rechthoekje met filter='url(#n)' naar het
     filter ernaast. Een css-minifier ziet dat url(...) staan, houdt het voor
     een bestandspad en plakt er het cachepad voor -- dan vindt de svg zijn
     eigen filter niet meer, valt de ruis weg en blijft er een dekkend zwart
     vlak over dat de roze band bedekt. In base64 valt er niets te herkennen
     en te herschrijven. Bewerken? Decodeer, pas aan, codeer terug. */
  --noise: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzInLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIC4wNSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE0MCcgaGVpZ2h0PScxNDAnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
}

/* =========================================================================
   2. BASIS
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 1.5rem);
  /* `clip` in plaats van `hidden`: knipt horizontale uitschieters
     (zoals reveal-elementen vóór hun animatie) zonder een scrollcontainer
     te maken — anders breekt position: sticky. */
  overflow-x: clip;
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--body-c);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` en niet `hidden`: hidden maakt van body een scrollcontainer en
     dat breekt position: sticky op de header. */
  overflow-x: clip;
}

::selection { background: var(--accent); color: #fff; }
/* Op de accentvlakken zou een selectie roze op roze worden en dus onzichtbaar.
   Daar keert hij om: donker vlak, witte letters. */
.redenenband::selection, .redenenband ::selection,
.antwoordband::selection, .antwoordband ::selection { background: var(--night); color: #fff; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-disp);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.024em; }
h3 { font-size: var(--fs-h3); line-height: 1.24; }
h4 { font-size: 1.04rem; line-height: 1.35; letter-spacing: -0.012em; }

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

ul, ol { padding-left: 1.15rem; }
li { margin-block: .3rem; }

strong, b { color: var(--ink-2); font-weight: 650; }
small { font-size: .82rem; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; display: block; width: 100%; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600; font-size: .9rem;
}
.skip-link:focus { left: 0; }

/* Alleen voor schermlezers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Iconen — erven de tekstkleur, maat via context te overschrijven. */
.ico {
  width: 1.12em; height: 1.12em;
  stroke: currentColor; stroke-width: 1.9;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* =========================================================================
   3. UTILITIES
   ========================================================================= */
.container { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.container.narrow { max-width: var(--wrap-sm); }
.center { text-align: center; }
@media (max-width: 760px) { .hide-md { display: none !important; } }

.section { padding-block: var(--pad-y); position: relative; }
.section--tight { padding-block: var(--pad-y-s); }
.section--soft { background: var(--paper-2); }
.section--ink {
  background: var(--night);
  color: var(--night-body);
  position: relative;
}
.section--ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--noise), radial-gradient(52rem 30rem at 82% -10%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 62%);
}
.section--ink > * { position: relative; }
.section--ink :is(h1,h2,h3,h4) { color: #fff; }
.section--ink strong { color: #fff; }
/* Een lichte kaart in een donkere sectie houdt zijn eigen tekstkleuren */
.section--ink .card :is(h2,h3,h4) { color: var(--ink); }
.section--ink .card strong { color: var(--ink-2); }

/* Rendert secties onder de vouw pas wanneer ze in beeld komen. */
.defer-paint { content-visibility: auto; contain-intrinsic-size: auto 640px; }

.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--body-c); }
.section--ink .lead { color: var(--night-body); }

/* Eyebrow — mono, kaal, met een accentstreepje ervoor. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 1.05rem;
}
.eyebrow::before { content: ""; width: 1.35rem; height: 2px; background: var(--accent); flex: none; }
.eyebrow--plain::before { display: none; }
.section--ink .eyebrow, .cta-panel .eyebrow, .hero .eyebrow { color: var(--accent); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.section-head.center { margin-inline: auto; }
.section-head > p:not(.eyebrow) { margin-top: 1rem; font-size: var(--fs-lead); }
.section-head--split {
  max-width: none;
  display: grid; gap: 1.2rem 4rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  align-items: end;
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.section-head--split .sh-aside { padding-bottom: .5rem; }

/* Introzin naast de kop: verticale accentlijn met vette eerste zin. */
.sh-aside--lijn { border-left: 3px solid var(--accent); padding-left: 1.25rem; padding-bottom: 0; align-self: center; }
.sh-aside--lijn .lead { font-size: 1.02rem; }
@media (max-width: 820px) {
  .section-head--split { grid-template-columns: 1fr; }
  .section-head--split .sh-aside { padding-bottom: 0; }
}

.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Tekst + media naast elkaar */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split--wide-text { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.split--top { align-items: start; }
.split h2 { margin-bottom: .95rem; }
.split p + p, .split p + ul { margin-top: .85rem; }
@media (max-width: 900px) { .split, .split--wide-text { grid-template-columns: 1fr; } }

.split-media { position: relative; }
.split-media img {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
@media (max-width: 900px) { .split--flip .split-media { order: 2; } }
.split-badge {
  position: absolute; left: -1.1rem; bottom: 1.6rem;
  display: flex; align-items: center; gap: .9rem;
  background: var(--ink); color: #fff;
  border-radius: var(--r);
  padding: 1rem 1.3rem;
  box-shadow: var(--sh-3);
  max-width: min(84%, 21rem);
}
.split-badge .num {
  font-family: var(--font-disp); font-size: 2.1rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: var(--accent);
  white-space: nowrap;
}
.split-badge .num sup { font-size: .55em; }
.split-badge .lbl { font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.72); }
@media (max-width: 640px) { .split-badge { left: .8rem; right: .8rem; bottom: .9rem; } }

/* =========================================================================
   4. KNOPPEN & LINKS
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .95rem 1.55rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .25s, color .25s, border-color .25s;
}
.btn .ico { width: 1em; height: 1em; }
.ico--arrow { transition: transform .35s var(--ease); }
.btn:hover .ico--arrow, .arrow-link:hover .ico { transform: translateX(4px); }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--sh-accent); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-2); transform: translateY(-2px); }

.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-ghost.on-dark { border-color: rgba(255,255,255,.3); color: #fff; }
.btn-ghost.on-dark:hover { border-color: #fff; }

.btn-sm { padding: .72rem 1.25rem; font-size: .88rem; }
.btn-lg { padding: 1.12rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn-row--center { justify-content: center; }
/* De knop onder de probleemtekst hangt anders tegen de laatste alinea aan. */
.probleem-tekst .btn-row { margin-top: 1.6rem; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; font-size: .93rem; color: var(--ink);
  padding-block: .25rem;
}
.arrow-link .ico { color: var(--accent); transition: transform .35s var(--ease); }
.arrow-link:hover { color: var(--accent-ink); }
.arrow-link.stretch::after { content: ""; position: absolute; inset: 0; }

.pill-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .87rem; font-weight: 550; color: var(--ink-2);
  background: #fff;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
a.pill:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }

/* =========================================================================
   5. NAVIGATIE
   ========================================================================= */
.zonder-topbar { --tb-h: 0px; }
.topbar {
  background: var(--night);
  color: rgba(255,255,255,.72);
  font-size: .8rem;
  position: relative; z-index: 60;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 40px; padding-block: .3rem;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 1.3rem; }
.topbar a { display: inline-flex; align-items: center; gap: .42rem; transition: color .2s; }
.topbar a:hover { color: #fff; }
.topbar .ico { width: .95em; height: .95em; opacity: .75; }
.topbar-right span { display: inline-flex; align-items: center; gap: .42rem; }
.tb-pill {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding: .28rem .7rem; border-radius: 999px;
}
@media (max-width: 720px) { .topbar-right { display: none; } }

/* De header start donker (één geheel met de topbalk en de hero) en klapt
   bij het scrollen om naar een lichte glasbalk. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--night);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: border-color .35s, background .35s, box-shadow .35s;
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-color: var(--line);
  box-shadow: 0 8px 26px rgba(11,11,16,.05);
}

/* Overlay-variant (homepage): de herofoto loopt achter het menu door.
   De hero wordt één headerhoogte omhoog getrokken; de balk zelf is
   transparant totdat er gescrold wordt. */
.site-header--overlay:not(.is-stuck) {
  background: transparent;
  border-color: transparent;
}
/* De extra pixel voorkomt een subpixel-naadje tussen topbalk en foto. */
.site-header--overlay ~ main .hero { margin-top: calc(-1 * var(--hdr-h) - 1px); padding-top: 1px; }
.site-header--overlay ~ main .hero .hero-inner {
  padding-top: calc(clamp(3.6rem, 7.5vw, 6.2rem) + var(--hdr-h));
  min-height: min(56rem, calc(100svh - 40px));
}

.nav {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto;
  height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* Twee logo's op elkaar (zelfde canvas): wit bovenaan, donker na scroll. */
.brand { flex: none; display: inline-grid; }
.brand img { grid-area: 1 / 1; width: 92px; height: auto; transition: opacity .3s var(--ease); }
.brand .logo-op-donker { opacity: 1; }
.brand .logo-op-licht  { opacity: 0; }
.site-header.is-stuck .logo-op-donker { opacity: 0; }
.site-header.is-stuck .logo-op-licht  { opacity: 1; }
/* Zachte witte gloed achter het logo, alleen als de balk wit-transparant is.
   In die stand schuift de pagina-inhoud door de balk heen: een donkere foto
   of een zwart vlak maakt de zwarte letters dan slecht leesbaar. Op de donkere
   balk hoeft het niet -- daar staat het witte logo toch al vrij.

   De gloed loopt naar de randen weg, zodat het geen wit blokje wordt maar
   alleen de ondergrond kalmeert. isolation houdt de stapeling binnen .brand,
   anders zou de gloed achter de balk zelf verdwijnen. */
.brand { position: relative; isolation: isolate; }
.brand img { position: relative; z-index: 1; }
.brand::after {
  content: ""; position: absolute; z-index: 0;
  /* Ruimer dan het logo, vooral opzij: de gloed hoort voorbij de letters door
     te lopen en daar pas op te houden. */
  inset: -1rem -2.1rem;
  /* De stralen blijven onder de 50% van het vlak, want een percentage telt
     hier vanaf het midden tot de rand. Boven de 50% loopt de gradiënt buiten
     het vlak en knipt de browser hem af -- dat gaf de harde boven- en
     onderkant. Nu is hij overal doorzichtig vóór de rand. */
  background: radial-gradient(46% 42% at 50% 50%,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.74) 55%,
    rgba(255,255,255,0) 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.site-header.is-stuck .brand::after { opacity: 1; }


.nav-links { display: flex; align-items: center; gap: .35rem; }
.nav-links > a, .nav-item > button {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  font-size: .93rem; font-weight: 560;
  color: rgba(255,255,255,.78);
  transition: background .2s, color .2s;
}
.nav-links > a:hover, .nav-item > button:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-links > a.active, .nav-item > button.active { color: #fff; }
.nav-links > a.active { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.site-header.is-stuck .nav-links > a, .site-header.is-stuck .nav-item > button { color: var(--ink-2); }
.site-header.is-stuck .nav-links > a:hover, .site-header.is-stuck .nav-item > button:hover { background: var(--paper-3); color: var(--ink); }
.site-header.is-stuck .nav-links > a.active, .site-header.is-stuck .nav-item > button.active { color: var(--accent-ink); }
.site-header.is-stuck .nav-links > a.active { background: var(--accent-wash); }
.nav-item > button .ico { width: .85em; height: .85em; transition: transform .25s var(--ease); }
.nav-item[data-open="true"] > button .ico { transform: rotate(180deg); }

/* Uitklappaneel Diensten */
.nav-item { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  translate: -50% 8px;
  width: 24rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: .6rem;
  display: grid; gap: .1rem;
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), translate .28s var(--ease), visibility 0s .28s;
}
.nav-item[data-open="true"] .nav-panel { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
.nav-panel::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.np-link {
  display: flex; align-items: center; gap: .85rem;
  padding: .68rem .75rem; border-radius: var(--r-sm);
  transition: background .2s;
}
.np-link:hover { background: var(--paper-2); }
.np-link:hover .icon-badge { background: var(--accent); color: #fff; }
.np-link strong { display: block; font-size: .92rem; font-weight: 640; color: var(--ink); letter-spacing: -.01em; }
.np-link small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; }

.nav-cta { display: flex; align-items: center; gap: 1rem; flex: none; }
.nav-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .92rem; font-weight: 620; color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color .25s;
}
.nav-phone .ico { color: var(--accent); }
.nav-phone:hover { color: var(--accent); }
.site-header.is-stuck .nav-phone { color: var(--ink); }
.site-header.is-stuck .nav-phone:hover { color: var(--accent-ink); }

.burger { display: none; position: relative; z-index: 130; width: 44px; height: 44px; border-radius: 999px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s, background .25s; }
.site-header.is-stuck .burger span, body.menu-open .burger span { background: var(--ink); }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-links, .nav-phone { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .nav-cta .btn { display: none; }
  .nav { gap: .8rem; }
  .brand img { width: 84px; }
}

/* Mobiel menu — volledig scherm, grote regels */
.mobile-menu {
  position: fixed; inset: 0; z-index: 120;
  background: var(--paper);
  padding: calc(var(--hdr-h) + 2.2rem) var(--gutter) 2.2rem;
  display: flex; flex-direction: column; gap: .1rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden; translate: 0 -8px;
  transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s .3s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.mobile-menu > a {
  font-family: var(--font-disp);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  padding: .55rem 0;
  border-bottom: 1px solid var(--line-2);
}
.mobile-menu > a.sub { font-family: var(--font); font-size: 1.02rem; font-weight: 560; color: var(--ink-2); padding-left: .15rem; }
.mm-label {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink);
  margin-top: 1.6rem; padding-bottom: .4rem;
}
.mm-cta { margin-top: auto; padding-top: 2rem; display: grid; gap: .7rem; }

/* =========================================================================
   6. HERO — home
   ========================================================================= */
.hero {
  position: relative;
  background: var(--night);
  color: var(--night-body);
  overflow: clip;
}
/* Fotolaag: schermvullend, met Ken Burns en crossfade. */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; scale: 1.07;
  transition: opacity 1.1s var(--ease), scale 8s linear;
}
.hero-slide.is-active { opacity: 1; scale: 1; }
/* De eerste dia is in WordPress een echte <img>, zodat de browser op een
   telefoon zelf de kleine uitvoering kiest. Vullen zoals cover dat deed. */
.hero-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Waas: donker links (leesbaarheid van de kop) en subtiel boven en onder. */
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,15,0.846) 0%, rgba(10,10,15,0.702) 34%, rgba(10,10,15,0.342) 62%, rgba(10,10,15,0.495) 100%),
    linear-gradient(180deg, rgba(10,10,15,0.54), transparent 26%, transparent 72%, rgba(10,10,15,0.648));
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    var(--noise),
    radial-gradient(46rem 30rem at 12% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
  opacity: .8;
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: center;
  min-height: min(52rem, calc(100svh - var(--hdr-h) - var(--tb-h)));
  padding-block: clamp(3.6rem, 7.5vw, 6.2rem) clamp(2.8rem, 6vw, 5rem);
}
.hero-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  padding: .5rem 1rem; border-radius: 999px;
  margin-bottom: 1.7rem;
}
.hero-pill .ico { width: .95em; height: .95em; color: var(--accent); }

.hero h1 {
  font-size: var(--fs-hero);
  color: #fff;
  line-height: 1.04;
  letter-spacing: -.033em;
  margin-bottom: 1.45rem;
  max-width: 19ch;
}

/* Doordraaiend woord — alle woorden staan in de DOM en zijn indexeerbaar.
   Blokniveau: het woord krijgt altijd een eigen regel, zodat de kop niet
   verspringt wanneer een korter woord actief is. */
/* Eén kolom over de volle breedte, zodat de belofte gewoon afbreekt in
   plaats van uit de kop te lopen. */
.rotator { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.rotator-item {
  grid-area: 1 / 1; min-width: 0;
  /* align-content: start houdt de twee regels tegen elkaar aan, ook in de
     varianten die korter zijn dan de hoogste. */
  display: grid; justify-items: start; align-content: start;
  opacity: 0; translate: 0 .35em;
  transition: opacity .5s var(--ease), translate .5s var(--ease), filter .5s;
  filter: blur(5px);
}
/* Het merkwoord in roze, de belofte eronder in wit — beide draaien mee, zodat
   elke variant een eigen belofte heeft in plaats van één gedeelde staart. */
.rot-woord { color: var(--accent); white-space: nowrap; }
.rot-staart { color: #fff; }
.rotator-item.is-active { opacity: 1; translate: 0 0; filter: blur(0); }

.hero-sub { max-width: 41rem; font-size: var(--fs-lead); line-height: 1.66; margin-bottom: 2.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.2rem; }

.hero-points { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.hero-points span { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--night-body); }
.hero-points .ico { color: var(--accent); width: 1em; height: 1em; }

/* Rechterkant: alleen de chip en de fotobolletjes zweven boven de foto */
.hero-visual {
  position: relative;
  align-self: stretch;
  display: flex; flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1.1rem;
  padding-block: .4rem;
}
.hero-card {
  width: min(22rem, 100%);
  background: rgba(15,15,20,.66);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--sh-3);
  color: #fff;
}
.hero-card-rows { display: grid; gap: .75rem; }
.hero-card-rows > a { display: flex; align-items: center; gap: .8rem; border-radius: var(--r-sm); transition: translate .3s var(--ease); }
.hero-card-rows > a:hover { translate: 3px 0; }
.hero-card-rows strong { display: block; font-size: .9rem; font-weight: 640; letter-spacing: -.01em; color: #fff; }
.hero-card-rows small { display: block; font-size: .78rem; color: rgba(255,255,255,.6); line-height: 1.4; }
.hero-card .icon-badge { background: rgba(255,255,255,.08); color: var(--accent); border: 1px solid rgba(255,255,255,.1); }

/* Chip boven de keuzekaart */
/* Dots → segmentjes */
.hero-dots { display: flex; gap: .45rem; }
.hero-dot {
  width: 2.4rem; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.28);
  position: relative; overflow: hidden;
  transition: background .3s;
}
.hero-dot.is-active { background: var(--accent); }
.hero-dot:hover { background: rgba(255,255,255,.4); }
.hero-dot.is-active:hover { background: var(--accent); }

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 2.8rem; min-height: 0; }
  .hero h1 { max-width: none; }
  .hero-visual { flex-direction: row; align-items: center; justify-content: space-between; padding-block: 0; }
  .hero-card { width: 100%; }
}

/* Cijferband direct onder de hero: sluit naadloos aan op het donkere beeld,
   dus geen extra bovenruimte en een hairline als scheiding. */
.cijferband {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: clamp(2.2rem, 4vw, 3.1rem);
}

/* ── Broodkruimels ───────────────────────────────────────────────────── */
.crumbs { margin-bottom: 1.15rem; font-size: .82rem; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--line); }
.crumbs a { color: var(--muted); transition: color .2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 600; }
.crumbs--on-dark a { color: rgba(255,255,255,.62); }
.crumbs--on-dark a:hover { color: #fff; }
.crumbs--on-dark li + li::before { color: rgba(255,255,255,.28); }
.crumbs--on-dark [aria-current] { color: #fff; }

/* ── Paginakop: foto schermvullend achter de tekst ────────────────────── */
.page-hero {
  position: relative; overflow: clip;
  background: var(--night); color: var(--night-body);
}
/* Net als op de homepage schuift de kop onder het doorzichtige menu door,
   zodat de foto er achterlangs loopt. De extra pixel voorkomt een naadje. */
.site-header--overlay ~ main .page-hero { margin-top: calc(-1 * var(--hdr-h) - 1px); padding-top: 1px; }
.site-header--overlay ~ main .page-hero .page-hero-inner,
.site-header--overlay ~ main .page-hero > .container { padding-top: var(--hdr-h); }
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.page-hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(10,10,15,0.9) 0%,
      rgba(10,10,15,0.738) 34%,
      rgba(10,10,15,0.396) 66%,
      rgba(10,10,15,0.27) 100%),
    linear-gradient(180deg, rgba(10,10,15,0.252), rgba(10,10,15,0.495));
}
.page-hero > .container { position: relative; }
.page-hero-inner { padding-block: clamp(3.2rem, 6.5vw, 5.6rem) clamp(2.8rem, 5.5vw, 4.6rem); max-width: 44rem; }
.page-hero h1 { color: #fff; margin-bottom: 1rem; }
.page-hero-sub { font-size: var(--fs-lead); line-height: 1.66; max-width: 38rem; color: var(--night-body); }
.page-hero-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.page-hero-meta span {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; color: rgba(255,255,255,.86);
}
.page-hero-meta .ico { width: .95em; height: .95em; color: var(--accent); }
.page-hero .btn-row { margin-top: 1.9rem; }
@media (max-width: 760px) {
  .page-hero-veil {
    background:
      linear-gradient(180deg, rgba(10,10,15,0.648), rgba(10,10,15,0.495) 45%, rgba(10,10,15,0.72)),
      linear-gradient(100deg, rgba(10,10,15,0.45), transparent 70%);
  }
}

/* Casepagina: de schermafdruk staat zichtbaar naast de kop. De achtergrond
   is dezelfde afbeelding, zwaar vervaagd — die geeft de pagina de kleuren van
   het project mee zonder mee te lezen. */
.page-hero--case .page-hero-bg { filter: blur(34px) saturate(1.2); scale: 1.18; }
.page-hero--case .page-hero-veil {
  background:
    linear-gradient(100deg, rgba(10,10,15,0.846) 0%, rgba(10,10,15,0.774) 45%, rgba(10,10,15,0.63) 100%),
    linear-gradient(180deg, rgba(10,10,15,0.405), rgba(10,10,15,0.63));
}
.page-hero--case > .container {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 4vw, 3.6rem); align-items: center;
}
.page-hero-beeld { position: relative; }
.page-hero-beeld img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
@media (max-width: 900px) {
  .page-hero--case > .container { grid-template-columns: 1fr; }
  .page-hero-beeld { display: none; }
}

/* De tekstkolom van de homepagehero */
.hero-copy { position: relative; z-index: 2; }

/* ── Kaarten ──────────────────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: clip;
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.card-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.card:hover .card-media img { scale: 1.05; }
.card-media .icon-badge {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--sh-1);
}
.card:hover .card-media .icon-badge { background: var(--accent); color: #fff; }
.card-body { padding: 1.45rem 1.5rem 1.55rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card-body h3 { letter-spacing: -.016em; }
.card-body p { font-size: .89rem; line-height: 1.6; color: var(--body-c); }
.card-body .arrow-link { margin-top: auto; padding-top: .5rem; }

.card-tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 999px; padding: .32rem .72rem;
}
/* Vlaggetje boven in de uitgelichte prijskaart: ingetogen, want de kaart
   zelf trekt al genoeg aandacht. */
.card-flag {
  display: block;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: .34rem .8rem;
  margin-bottom: .9rem;
}

/* Brede kaart: tekst links, beeld rechts */
.card--wide { flex-direction: row; align-items: stretch; }
.card--wide .card-body { flex: 1 1 49.5%; justify-content: center; padding: clamp(1.4rem, 2.4vw, 2.1rem); }
.card--wide .card-media { flex: 1 1 50.5%; aspect-ratio: auto; }

/* Kaart met beeld boven en tekst eronder — de standaardvorm */
.card--link .card-media { aspect-ratio: 16 / 10; }

/* Donkere kaart */
.card--night { background: var(--night); border-color: rgba(255,255,255,.08); color: var(--night-body); }
.card--night :is(h2,h3,h4) { color: #fff; }
.card--night p { color: rgba(255,255,255,.68); }
.card--night .icon-badge { background: var(--accent); color: #fff; border: 0; }
.card--night .arrow-link { color: #fff; }

/* Vlakke kaart zonder schaduw, met de inhoud direct erin */
.card--flat {
  box-shadow: none;
  padding: clamp(1.25rem, 2.2vw, 1.7rem);
  gap: .55rem;
}
.card--flat:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.card--flat h3 { font-size: 1.05rem; }
.card--flat p { font-size: .92rem; line-height: 1.6; color: var(--body-c); }

/* Liggende strook over de volle breedte */
.card--strip {
  flex-direction: row; align-items: center; gap: 1.2rem;
  padding: 1.1rem 1.4rem;
}
.card-strip-body { flex: 1; min-width: 0; }
.card-strip-body h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.card-strip-body p { font-size: .9rem; line-height: 1.55; color: var(--body-c); }
.card--strip .arrow-link { flex: none; }
@media (max-width: 720px) {
  .card--wide, .card--strip { flex-direction: column; align-items: stretch; }
  .card--wide .card-media { aspect-ratio: 16 / 10; }
}

/* Rond icoonvlak, ook los van een kaart gebruikt */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: none;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.icon-badge .ico { width: 1.15em; height: 1.15em; }

/* ── Bento: het dienstenraster ────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.4rem); }
.b-2 { grid-column: span 2; }
.b-4 { grid-column: span 4; }
.b-6 { grid-column: span 6; }
@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .b-2 { grid-column: span 2; }
  .b-4, .b-6 { grid-column: span 4; }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; }
  .b-2, .b-4, .b-6 { grid-column: span 1; }
}

/* ── Antwoordblok: het directe antwoord bovenaan een pagina ───────────── */
.answer {
  position: relative;
  font-size: 1.02rem; line-height: 1.66;
  color: var(--ink-2);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, white);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.05rem 1.3rem;
  margin-block: 1.1rem 1.4rem;
}
.svp-nu { color: #fff; }

/* ── Redenen: genummerde rij op een roze band ──────────────────────────
   Zelfde taal als de antwoordband: accent als vlak, ruis en een donkere
   veeg voor diepte, witte scheidingslijnen. Elke reden is een probleem
   plus wat wij eraan doen; dat tweede staat achter een donker pilletje,
   want roze op roze leest niet. */
/* Wit op #ff0060 haalt maar 3,9:1 -- onder de 4,5 die normale tekst nodig heeft.
   De band gaat daarom een tikje dieper, richting pruim in plaats van zwart zodat
   het roze roze blijft: daarmee komt wit op 4,7:1. */
.redenenband {
  position: relative; overflow: clip;
  /* isolation houdt het vermenigvuldigen van de foto binnen deze band. */
  isolation: isolate;
  background: var(--accent);
  /* Ruis en de donkere veeg zitten in de achtergrond van de band zelf en niet
     in een pseudo-element: die twee zijn allebei nodig voor de puntenrasters,
     die elk hun eigen masker hebben. */
  background:
    var(--noise),
    radial-gradient(46rem 24rem at 88% -20%, rgba(0,0,0,.24), transparent 62%),
    color-mix(in srgb, var(--accent) 88%, #1a0010);
}
/* Puntenraster in de linkerbovenhoek. Lager dan zijn tegenhanger rechts: aan
   deze kant begint de tekst al na de bovenmarge, en punten achter een kopje
   maken het onrustig. Hij is dus op als de kop begint. */
.redenenband::before {
  content: ""; position: absolute; pointer-events: none; z-index: 1;
  left: 0; right: 62%; top: 0; height: 15rem;
  background-image: radial-gradient(rgba(255,255,255,.5) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(88% 106% at 0% 0%, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.26) 66%, transparent 92%);
          mask-image: radial-gradient(88% 106% at 0% 0%, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.26) 66%, transparent 92%);
}
.redenenband > * { position: relative; z-index: 2; }
/* Rechts een foto die in het vlak oplost. Multiply in plaats van gewoon
   doorschijnend: zo kan de foto het roze alleen verdiepen, nooit oplichten, en
   blijft de witte tekst overal even leesbaar. Het masker laat hem naar links en
   naar de hoeken weglopen, zodat er geen rand ontstaat. */
.redenenband .rd-beeld {
  position: absolute; right: 0; inset-block: 0; z-index: 0;
  width: min(70%, 60rem); pointer-events: none;
  mix-blend-mode: multiply; opacity: .85;
  /* Het masker heeft zijn hart in de rechteronderhoek: daar sluit de foto op de
     rand van de band aan, naar boven en naar links loopt hij weg. Het vlak is
     even hoog als de band en het verloop is al doorzichtig op 84% van de
     straal -- ruim binnen de randen. Anders houdt de bovenkant een restje
     dekking over en dat leest als een afgeknipte foto in plaats van een
     wegvloeiende. */
  -webkit-mask-image: radial-gradient(100% 104% at 100% 100%, #000 0%, rgba(0,0,0,.6) 34%, rgba(0,0,0,.15) 62%, transparent 84%);
          mask-image: radial-gradient(100% 104% at 100% 100%, #000 0%, rgba(0,0,0,.6) 34%, rgba(0,0,0,.15) 62%, transparent 84%);
}
.redenenband .rd-beeld img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (max-width: 720px) { .redenenband .rd-beeld { display: none; } }
/* En hetzelfde raster in de rechterbovenhoek, net als bij de donkere panelen
   en de voettekst. De foto zit in de tegenoverliggende hoek en is daar al lang
   weggelopen, dus de twee raken elkaar niet. */
.redenenband::after {
  content: ""; position: absolute; pointer-events: none; z-index: 1;
  left: 50%; right: 0; top: 0; height: 28rem;
  background-image: radial-gradient(rgba(255,255,255,.5) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  /* Het hart van het masker ligt in de hoek zelf, niet er net naast: daar is
     het raster op zijn dichtst en van daaruit dunt het uit. */
  -webkit-mask-image: radial-gradient(88% 106% at 100% 0%, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.26) 66%, transparent 92%);
          mask-image: radial-gradient(88% 106% at 100% 0%, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.26) 66%, transparent 92%);
}
.redenenband .eyebrow { color: #fff; }
.redenenband .eyebrow::before { background: #fff; }
.redenenband .section-head h2 { color: #fff; }
.redenenband .section-head > p { color: rgba(255,255,255,.94); }

.redenen { display: grid; }
.rd-rij {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.7rem);
  align-items: start; padding-block: clamp(1.3rem, 2.6vw, 1.8rem);
  border-top: 1px solid rgba(255,255,255,.3);
}
.rd-rij:last-child { border-bottom: 1px solid rgba(255,255,255,.3); }
.rd-num {
  font-family: var(--font-disp); font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.3rem);
  line-height: .9; color: #fff;
}
.rd-rij h3 { color: #fff; font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); margin-bottom: .4rem; }
.rd-probleem { color: #fff; font-weight: 500; font-size: .96rem; line-height: 1.62; }
.rd-fix { margin-top: .75rem; color: #fff; font-weight: 500; font-size: .96rem; line-height: 1.62; }
.rd-pil {
  display: inline-block; background: var(--night); color: #fff;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .24rem .66rem; border-radius: 999px; margin-right: .6rem;
  /* Voorkomt dat het pilletje aan de tekst erna vastplakt bij het afbreken. */
  white-space: nowrap;
}
@media (max-width: 720px) {
  .rd-rij { grid-template-columns: 1fr; gap: .35rem; }
  .rd-num { font-size: 2.1rem; }
}

/* ── Antwoordband ──────────────────────────────────────────────────────
   Roze band tegen de hero. Geen routes maar de drie vragen die vooraf
   spelen: prijs, doorlooptijd en wat er daarna gebeurt. */
.antwoordband {
  position: relative; z-index: 6;
  background: var(--accent);
  padding-block: calc(clamp(3rem, 5.5vw, 4.5rem) - 20px) clamp(3rem, 5.5vw, 4.5rem);
  overflow: clip;
}
.antwoordband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--noise), radial-gradient(42rem 22rem at 90% -25%, rgba(0,0,0,.26), transparent 62%);
}
.ant-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.ant-kop h2 {
  color: #fff;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
}
.ant-kop > p { color: rgba(255,255,255,.85); margin-top: .85rem; font-size: 1.02rem; max-width: 34ch; }
.ant-kop .btn { margin-top: 1.5rem; }

.ant-lijst { display: grid; gap: 0; margin: 0; }
.ant-rij {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 1.4rem;
  padding-block: clamp(.9rem, 1.6vw, 1.3rem);
  border-top: 1px solid rgba(255,255,255,.3);
}
.ant-rij:last-child { border-bottom: 1px solid rgba(255,255,255,.3); }
.ant-rij dt {
  color: #fff; font-family: var(--font-disp);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.1;
}
.ant-rij dt span {
  display: block; margin-bottom: .3rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.ant-rij dd { margin: 0; color: rgba(255,255,255,.86); font-size: .95rem; line-height: 1.55; }
@media (max-width: 900px) {
  .ant-grid { grid-template-columns: 1fr; }
  .ant-rij { grid-template-columns: 1fr; gap: .4rem; }
}

/* Tussenkop in een casepagina krijgt lucht van de alinea erboven */
.case-kort { margin-top: 2rem; }

/* Hint die alleen zin heeft met een echte muisaanwijzer */
.alleen-muis { display: none; }
@media (hover: hover) and (pointer: fine) { .alleen-muis { display: inline; } }

/* ── Waarom-paneel ─────────────────────────────────────────────────────
   Eén donker paneel waarin de uitleg en de samenvatting samenkomen: kop,
   lead en CTA bovenin, daaronder genummerde punten. De bogen waaieren uit
   de rechteronderhoek, net als in het CTA-paneel. */
.waarom {
  position: relative; overflow: clip;
  background: linear-gradient(135deg,
    var(--night) 0%, var(--night-2) 50%,
    color-mix(in srgb, var(--accent) 16%, var(--night-2)) 100%);
  color: var(--night-body);
  border-radius: var(--r-xl);
  padding: clamp(1.9rem, 4.4vw, 3.6rem);
  box-shadow: var(--sh-3);
}
.waarom::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    var(--noise),
    radial-gradient(30rem 24rem at 94% 118%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 58%),
    radial-gradient(22rem 16rem at 4% -12%, rgba(255,255,255,.05), transparent 60%);
}
/* De bogen zelf: hoe verder van de hoek, hoe zwakker — zo blijft de tekst rustig. */
.waarom::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 96% 126%, transparent 0 74px,
    color-mix(in srgb, var(--accent) 26%, transparent) 74px 76px);
  -webkit-mask-image: radial-gradient(120% 130% at 96% 126%, #000 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.14) 72%, transparent 100%);
  mask-image: radial-gradient(120% 130% at 96% 126%, #000 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.14) 72%, transparent 100%);
}
.waarom > * { position: relative; z-index: 1; }

.waarom-top {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(1.4rem, 3.5vw, 3rem); flex-wrap: wrap;
}
/* Puntenraster in de rechterbovenhoek, achter de knop langs naar beneden.
   Geldt voor elk waarom-paneel, dus ook op de dienstpagina's. */
.waarom-top::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  /* Vaste hoogte, niet 230% van de tekst: anders zakt het raster mee met
     lange lappen tekst en staat het op elke pagina ergens anders. */
  left: 44%; right: -4rem; top: -4rem; height: 32rem;
  background-image: radial-gradient(rgba(255,255,255,.2) 1.3px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(78% 100% at 76% 6%, #000 0%, rgba(0,0,0,.6) 44%, transparent 86%);
  mask-image: radial-gradient(78% 100% at 76% 6%, #000 0%, rgba(0,0,0,.6) 44%, transparent 86%);
}
.waarom-tekst { max-width: 46rem; }
.waarom .eyebrow { color: #fff; }
.waarom h2 { color: #fff; margin-bottom: 1rem; max-width: 20ch; }
.waarom p { color: var(--night-body); }
.waarom p + p { margin-top: .8rem; }
.waarom strong { color: #fff; }
/* Het antwoordblok is op wit een roze kader; hier mag het rustiger. */
.waarom .answer {
  color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--accent);
}
.waarom-top .btn { flex: none; }

.waarom-kort {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin: clamp(2.1rem, 4.2vw, 3.2rem) 0 1.3rem;
}
.waarom-kort::before { content: "// "; color: var(--accent); }

.waarom-stappen {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.7rem);
}
.waarom-stap .wn {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  font-family: var(--font-disp); font-size: 1.05rem; font-weight: 800;
  color: #fff; margin-bottom: 1rem;
  transition: transform .4s var(--ease), border-color .4s, background .4s, box-shadow .4s;
}
.waarom-stap:hover .wn {
  transform: translateY(-5px) scale(1.04);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);
}
.waarom-stap h3 { color: #fff; font-size: 1rem; line-height: 1.3; margin-bottom: .45rem; }
.waarom-stap p { font-size: .86rem; line-height: 1.55; color: rgba(255,255,255,.62); }

/* De cijfers draaien één keer op hun plek zodra het paneel in beeld komt. */
@keyframes waarom-num {
  0%   { transform: rotate(0); }
  65%  { transform: rotate(360deg);
         border-color: var(--accent);
         background: color-mix(in srgb, var(--accent) 18%, transparent);
         box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { transform: rotate(360deg);
         border-color: var(--accent);
         background: color-mix(in srgb, var(--accent) 10%, transparent);
         box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 32%, transparent); }
}
.waarom.is-in .wn { animation: waarom-num 1.2s var(--ease) both; }
.waarom.is-in .waarom-stap:nth-child(1) .wn { animation-delay: .05s; }
.waarom.is-in .waarom-stap:nth-child(2) .wn { animation-delay: .18s; }
.waarom.is-in .waarom-stap:nth-child(3) .wn { animation-delay: .31s; }
.waarom.is-in .waarom-stap:nth-child(4) .wn { animation-delay: .44s; }
.waarom.is-in .waarom-stap:nth-child(5) .wn { animation-delay: .57s; }
.waarom.is-in .waarom-stap:nth-child(6) .wn { animation-delay: .70s; }

/* Het procestheater binnen het paneel: alles op donker. De scène krijgt een
   ruimere kolom en minder omranding, zodat de SVG groter wordt getekend —
   daarmee groeien de labels erin evenredig mee. */
.waarom--proces .proces {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
}
.waarom--proces .proces-stage {
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--paper-3);
  box-shadow: var(--sh-3), 0 0 0 1px rgba(255,255,255,.14);
}
/* De korrel en de roze gloed hoeven op het lichte vlak niet zo sterk. */
.waarom--proces .proces-stage::before { opacity: .5; }
.waarom--proces .ps-num { color: rgba(255,255,255,.42); }
.waarom--proces .ps-body strong { color: rgba(255,255,255,.82); }
.waarom--proces .ps-body small { color: rgba(255,255,255,.55); }
.waarom--proces .ps-duur {
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
}
.waarom--proces .ps-rail { background: rgba(255,255,255,.15); }
.waarom--proces .proces-stap.is-actief {
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.waarom--proces .proces-stap.is-actief .ps-body strong { color: #fff; }
.waarom--proces .proces-stap.is-actief .ps-body small { color: rgba(255,255,255,.78); }
.waarom--proces .proces-stap.is-gedaan .ps-num {
  color: color-mix(in srgb, var(--accent) 65%, rgba(255,255,255,.45));
}

@media (max-width: 1080px) {
  .waarom-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
}
@media (max-width: 620px) {
  .waarom-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .waarom-stap .wn { width: 3rem; height: 3rem; font-size: .95rem; margin-bottom: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .waarom.is-in .wn { animation: none; border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .waarom-stap:hover .wn { transform: none; }
}

/* ── Werkstapel ────────────────────────────────────────────────────────
   Drie browservensters die elkaar overlappen, licht in de ruimte gedraaid.
   Bij hover of focus dimmen de andere twee, draait het gekozen venster recht
   en scrollt de schermafdruk door de hele pagina. */
.werk-stapel {
  position: relative;
  height: clamp(21rem, 35vw, 31rem);
  perspective: 1600px;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.werk-venster {
  position: absolute; top: 0; width: 46%;
  color: #fff;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.werk-venster:nth-child(1) { left: 0;   transform: rotateY(9deg) translateZ(-40px);  z-index: 1; }
.werk-venster:nth-child(2) { left: 26%; transform: rotateY(2deg) translateY(2.6rem); z-index: 3; }
.werk-venster:nth-child(3) { left: 52%; transform: rotateY(-9deg) translateZ(-40px) translateY(5.2rem); z-index: 2; }
.werk-stapel:hover .werk-venster,
.werk-stapel:focus-within .werk-venster { filter: brightness(.5) saturate(.65); }
.werk-stapel .werk-venster:hover,
.werk-stapel .werk-venster:focus-visible {
  filter: none; z-index: 5;
  transform: rotateY(0) translateY(-.6rem) scale(1.04);
}

.wv-lijst {
  display: block; position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  background: #16161d;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
}
.wv-balk {
  display: flex; align-items: center; gap: .3rem;
  padding: .48rem .65rem;
  background: #1c1c24;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* Stoplichtbolletjes, zoals in een echt venster */
.wv-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.wv-dot--rood  { background: #ff5f57; }
.wv-dot--geel  { background: #febc2e; }
.wv-dot--groen { background: #28c840; }

.wv-url {
  flex: 1; min-width: 0; margin-left: .55rem; margin-right: .35rem;
  display: flex; align-items: center; gap: .38rem;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  padding: .2rem .65rem;
}
.wv-slot { width: .78rem; height: .78rem; flex: none; color: #7ee2a8; }
.wv-fav { width: .82rem; height: .82rem; flex: none; border-radius: 2px; object-fit: contain; }
.wv-adres {
  min-width: 0;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  color: rgba(255,255,255,.86);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wv-plug, .wv-menu { width: .95rem; height: .95rem; flex: none; color: rgba(255,255,255,.42); }
.wv-menu { width: .8rem; height: .8rem; margin-left: .1rem; }
.wv-beeld { display: block; position: relative; overflow: hidden; height: clamp(11rem, 19vw, 17rem); }
.wv-beeld img { width: 100%; display: block; transition: translate 3.4s var(--ease); }
.werk-venster:hover .wv-beeld img,
.werk-venster:focus-visible .wv-beeld img { translate: 0 calc(-100% + clamp(11rem, 19vw, 17rem)); }

/* De telefoon hoort bij het uitgelichte venster: hij zit ín die link, dus hij
   draait, dimt en scrollt mee. De schermafdruk is 480x2400, het schermpje is
   9:19.2 — daardoor is de rolafstand precies 57.33% van de afbeelding. */
.wv-mobiel {
  /* Hoogte gelijk aan het beeldvlak van een venster min een marge, en van
     bovenaf geplaatst. Zo eindigt hij altijd boven de bijschriften — ook boven
     dat van het venster waar hij overheen valt. De breedte volgt de verhouding. */
  position: absolute; top: 6.9rem;
  width: auto; height: calc(clamp(11rem, 19vw, 17rem) - 1.6rem);
  aspect-ratio: 9 / 19.2;
  border-radius: 1.5rem;
  padding: 4px;
  background: linear-gradient(160deg, #34343f, #0d0d12 45%);
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.09) inset;
}
/* Rechts van het venster, net binnen de rand van de stapel. */
.wv-mobiel--rechts { right: -4%; left: auto; }

.wm-scherm {
  display: block; position: relative; height: 100%;
  border-radius: 1.2rem; overflow: hidden; background: #fff;
}
/* Top en translate samen: de afbeelding stopt precies met haar onderrand op
   de onderkant van het schermpje, ongeacht hoe groot de telefoon uitvalt. */
.wm-scherm img {
  display: block; position: absolute; top: 0; left: 0; width: 100%;
  transition: top 3.4s var(--ease), translate 3.4s var(--ease);
}
.werk-venster:hover .wm-scherm img,
.werk-venster:focus-visible .wm-scherm img { top: 100%; translate: 0 -100%; }
/* Het eilandje bovenin en het knopje op de zijkant maken het herkenbaar. */
.wm-notch {
  position: absolute; z-index: 2; top: 7px; left: 50%; translate: -50% 0;
  width: 34%; height: 5px; border-radius: 999px; background: #0d0d12;
}
.wv-mobiel::after {
  content: ""; position: absolute; right: -1px; top: 26%;
  width: 2px; height: 11%; border-radius: 2px;
  background: rgba(255,255,255,.22);
}

/* De telefoon bij Deltis staat lós in de stapel in plaats van in de link. De
   linkerkant van dat venster ligt achter het venster ervoor, en een link met
   een transform kan zijn kinderen daar niet bovenuit tillen. Hij krijgt wel
   dezelfde draaiing, zodat hij bij het venster hoort. */
/* De score staat ín het adresveld, rechts naast het domein — zoals een
   extensie die haar oordeel in de balk toont. Krap gehouden, anders rekt het
   veld op; het cijfer blijft eruit gelicht. */
.wv-score {
  flex: none;
  display: inline-flex; align-items: center; gap: .28rem;
  /* Vult het adresveld over de volle hoogte: strekken tot de contentbox en de
     padding van het veld opheffen, zodat alleen de rand nog zichtbaar blijft. */
  align-self: stretch;
  margin-left: auto; margin-block: -.2rem;
  padding: 0 .38rem 0 .3rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono); font-size: .54rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.wv-score b {
  font-family: var(--font-disp); font-size: 1.05rem; font-weight: 800;
  letter-spacing: -.02em; line-height: 1; color: #fff;
}
/* De balkinhoud staat in rem en schaalt dus niet mee met het venster. Onder
   ongeveer 1080px wordt het krap en zou het adres worden afgekapt; dan gaat de
   pill een slag kleiner. */
@media (max-width: 1080px) {
  .wv-score { font-size: .46rem; padding: 0 .34rem 0 .28rem; gap: .2rem; }
  .wv-score b { font-size: .78rem; }
}
@media (max-width: 900px) {
  .wv-score { font-size: .56rem; padding: 0 .5rem 0 .4rem; }
  .wv-score b { font-size: 1rem; }
}

.wv-bij { display: block; margin-top: .9rem; }
.wv-bij strong { display: block; color: #fff; font-family: var(--font-disp); font-size: 1.02rem; letter-spacing: -.016em; }
.wv-bij small { display: block; color: rgba(255,255,255,.6); font-size: .84rem; margin-top: .15rem; }

/* Gestapeld: geen perspectief, gewoon drie vensters onder elkaar */
@media (max-width: 900px) {
  .werk-stapel { height: auto; perspective: none; display: grid; gap: 1.6rem; }
  /* Even zwaar als de nth-child-regels hierboven, anders blijven de
     verschuiving en de draaiing staan. */
  .werk-stapel .werk-venster {
    position: relative; width: 100%;
    left: auto; top: auto; transform: none;
  }
  /* Naast het venster is geen ruimte meer: de telefoon schuift naar de
     rechteronderhoek van het venster zelf. */
  .wv-mobiel {
    left: auto; right: 1.1rem; top: auto; bottom: 3.6rem;
    width: 5.4rem; height: auto; border-radius: 1rem;
  }
  /* Gestapeld is er geen venster meer om achter te liggen: de losse telefoon
     hangt gewoon rechtsonder in de stapel, bij het laatste venster. */
  .wm-scherm { border-radius: .78rem; }
  .wm-notch { top: 5px; height: 4px; }
  /* Gestapeld leest het uitgelichte project als eerste */
  .werk-venster:nth-child(2) { order: -1; }
  .werk-stapel:hover .werk-venster,
  .werk-stapel .werk-venster:hover { transform: none; filter: none; }
  .wv-beeld { height: 13rem; }
}
@media (prefers-reduced-motion: reduce) {
  .werk-venster, .wv-beeld img, .wm-scherm img { transition: none; }
  .werk-venster:hover .wv-beeld img { translate: 0 0; }
  .werk-venster:hover .wm-scherm img { top: 0; translate: 0 0; }
}

/* ── Reis in zigzag, met een meelopende teller ─────────────────────────
   Links blijft het bereikte stapnummer in beeld, rechts staan de kaarten om
   en om langs de lijn. De cijfers óp de lijn zijn leidend: wat daar oplicht,
   staat links. */
.reis-lay {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.reis-teller { position: sticky; top: calc(var(--hdr-h) + 2.5rem); align-self: start; }
.reis-cijfer {
  font-family: var(--font-disp); font-weight: 800;
  font-size: clamp(4rem, 9vw, 7rem); line-height: .9; letter-spacing: -.05em;
  color: var(--accent);
}
.reis-balk {
  height: 4px; border-radius: 999px; background: var(--line);
  margin-top: 1.1rem; overflow: hidden;
}
.reis-balk span {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: 999px;
  transition: width .5s var(--ease);
}
.reis-tel { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); margin-top: .6rem; }

.reis--zigzag { position: relative; }
.reis--zigzag .tl-item {
  display: grid; grid-template-columns: 1fr 4.6rem 1fr;
  gap: 1rem; align-items: center;
  padding-block: 0; border-top: 0;
}
/* De kaarten staan om en om links en rechts, dus ze mogen elkaar verticaal
   overlappen zonder in de weg te zitten. Dat haalt de gaten eruit. */
.reis--zigzag .tl-item + .tl-item {
  margin-top: -3.2rem;
  /* De scheidingslijn van de gewone tijdlijn hoort hier niet: die zou dwars
     over de pagina lopen tussen de kaarten door. */
  border-top: 0;
}
/* nth-of-type, niet nth-child: de SVG van de lijn is ook een kind en zou de
   even/oneven-telling omklappen. */
.reis--zigzag .tl-item:nth-of-type(odd) .tl-kaart { grid-column: 3; }
.reis--zigzag .tl-item:nth-of-type(even) .tl-kaart { grid-column: 1; }
.reis--zigzag .tl-num { grid-column: 2; grid-row: 1; justify-self: center; width: 3.6rem; height: 3.6rem; }
.reis--zigzag .tl-num span { font-size: 1.1rem; }

.tl-kaart {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.3rem 1.4rem;
  box-shadow: var(--sh-1);
}
.tl-kaart h3 { margin-bottom: .35rem; font-size: 1.1rem; }
.tl-kaart p { font-size: .89rem; line-height: 1.6; color: var(--body-c); }
.tl-duur {
  display: inline-flex; align-items: center; margin-bottom: .7rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: var(--paper-3);
  border: 1px solid var(--line); border-radius: 999px; padding: .3rem .72rem;
}
.reis--zigzag .tl-aside { margin-top: .9rem; font-size: .82rem; }

/* Gestapeld: teller boven de tijdlijn, kaarten allemaal rechts van de lijn */
@media (max-width: 1000px) {
  .reis-lay { grid-template-columns: 1fr; }
  .reis-teller {
    position: static; margin-bottom: 1.4rem;
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  }
  .reis-cijfer { font-size: 3.2rem; }
  .reis-balk { flex: 1; min-width: 8rem; margin-top: 0; }
  .reis--zigzag .tl-item { grid-template-columns: 4rem 1fr; }
  .reis--zigzag .tl-item + .tl-item { margin-top: 0; padding-top: .9rem; }
  .reis--zigzag .tl-item:nth-of-type(odd) .tl-kaart,
  .reis--zigzag .tl-item:nth-of-type(even) .tl-kaart { grid-column: 2; }
  .reis--zigzag .tl-num { grid-column: 1; justify-self: start; }
}
@media (max-width: 640px) {
  /* de basisregel verbergt de lijn hier; in de zigzag houden we hem juist */
  .reis--zigzag .reis-lijn { display: block; }
}

/* ── De reis: een lijn die zich aftekent terwijl je scrolt ─────────────
   De lijn wordt in JS opgemeten en getekend, zodat hij precies door de
   cijfers loopt, ook als de tekst anders afbreekt of het scherm wijzigt. */
.reis { position: relative; }
.reis-lijn {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  overflow: visible;
}
.reis-spoor {
  stroke: var(--line); stroke-width: 2; stroke-linecap: round;
}
.reis-vulling {
  stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent));
}
.reis-kop {
  fill: var(--accent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 80%, transparent));
  opacity: 0; transition: opacity .3s var(--ease);
}
.reis.is-onderweg .reis-kop { opacity: 1; }
@keyframes reis-puls {
  0%, 100% { r: 6; opacity: 1; }
  50%      { r: 8; opacity: .75; }
}
.reis.is-onderweg .reis-kop { animation: reis-puls 1.8s var(--ease) infinite; }

/* De inhoud komt binnen zodra de lijn het station bereikt */
.tl-item { z-index: 1; }
.reis .tl-item .tl-body, .reis .tl-item .tl-aside {
  opacity: .35; translate: 0 10px;
  transition: opacity .55s var(--ease), translate .55s var(--ease);
}
.reis .tl-item.is-bereikt .tl-body { opacity: 1; translate: 0 0; }
.reis .tl-item.is-bereikt .tl-aside { opacity: 1; translate: 0 0; transition-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  .tl-num, .reis .tl-item .tl-body, .reis .tl-item .tl-aside { transition: none; }
  .reis .tl-item .tl-body, .reis .tl-item .tl-aside { opacity: 1; translate: 0 0; }
  .reis.is-onderweg .reis-kop { animation: none; }
}

/* Checklijst */
.checks { list-style: none; padding: 0; display: grid; gap: .55rem; }
.checks li { display: flex; gap: .65rem; align-items: flex-start; }
.checks .ico { color: var(--accent); margin-top: .28rem; flex: none; }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.6rem; }
@media (max-width: 640px) { .checks--2 { grid-template-columns: 1fr; } }
.section--ink .checks li { color: var(--night-body); }

/* Notitie */
.note {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  padding: 1rem 1.2rem;
  font-size: .92rem;
}
.note--accent { border-color: var(--accent-line); background: var(--accent-wash); }

/* Citaten */
.quote-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.9rem 1.7rem 1.6rem;
  display: flex; flex-direction: column; gap: 1.2rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.quote-mark {
  position: absolute; top: -1.1rem; left: 1.4rem;
  font-family: var(--font-disp);
  font-size: 3.6rem; line-height: 1; font-weight: 800;
  color: var(--accent);
  pointer-events: none;
}
.quote-card blockquote { font-size: .98rem; line-height: 1.68; color: var(--ink-2); }
.quote-who { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.quote-who img { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; }
.quote-init {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; color: var(--accent-ink);
}
.quote-who strong { display: block; font-size: .92rem; }
.quote-who span { font-size: .82rem; color: var(--muted); }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  cursor: pointer;
  padding: 1.25rem .2rem;
  font-family: var(--font-disp);
  font-weight: 650; font-size: 1.07rem; letter-spacing: -.014em; color: var(--ink);
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary .ico {
  flex: none; color: var(--accent);
  width: 1.1rem; height: 1.1rem;
  transition: transform .35s var(--ease);
}
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq-a { padding: 0 .2rem 1.4rem; max-width: 62ch; }
.faq-a p + p { margin-top: .7rem; }
.faq-a a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   PROCESTHEATER — zes fases. Links een scène waarin de website zich
   opbouwt, rechts de stappen die meelopen. data-fase="1..6" stuurt alles.
   ========================================================================= */
.proces {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  perspective: 1400px;
}
.proces-stage {
  position: relative;
  background: var(--night);
  border-radius: var(--r-xl);
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
  overflow: clip;
  box-shadow: var(--sh-3), 0 0 0 1px rgba(255,255,255,.06);
  /* Volgt de muis met een lichte 3D-kanteling (JS zet --tx en --ty). */
  transform: rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.proces-stage:hover { box-shadow: var(--sh-3), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 30px 70px color-mix(in srgb, var(--accent) 22%, transparent); }
.proces-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: var(--noise), radial-gradient(26rem 18rem at 88% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%);
}
/* Scan-wipe: één lichtstreep bij elke fasewissel. */
.proces-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  opacity: 0; translate: -100% 0;
}
.proces-stage.is-wissel::after { animation: stage-wipe .75s var(--ease); }
@keyframes stage-wipe {
  0%   { opacity: 1; translate: -100% 0; }
  100% { opacity: 1; translate: 100% 0; }
}
.proces-scene { position: relative; width: 100%; height: auto; display: block; }
.pr-tekst { font-family: var(--font-mono); font-size: 13px; font-weight: 700; fill: #fff; }
.pr-tekst--roze { fill: #ff7aa8; }
.pr-tekst--wit { fill: #fff; }
/* Op het witte pilletje in het roze vlak leest zwart het beste */
.pr-tekst--zwart { fill: var(--night); }

/* Fasegroepen: opkomen, en dimmen zodra latere fases de focus krijgen. */
.pr-f1, .pr-f2o, .pr-f2, .pr-f3, .pr-f5, .pr-f4 { opacity: 0; transition: opacity .55s var(--ease); }
.pr-chip, .pr-f2-el {
  opacity: 0; translate: 0 9px;
  transition: opacity .5s var(--ease) var(--d, 0s), translate .55s var(--ease-b) var(--d, 0s);
}

[data-fase="1"] .pr-f1 { opacity: 1; }
:is([data-fase="2"],[data-fase="3"],[data-fase="4"],[data-fase="5"],[data-fase="6"]) .pr-f1 { opacity: .35; }
:is([data-fase="1"],[data-fase="2"],[data-fase="3"],[data-fase="4"],[data-fase="5"],[data-fase="6"]) .pr-f1 .pr-chip { opacity: 1; translate: 0 0; }

[data-fase="2"] .pr-f2o { opacity: 1; }
:is([data-fase="3"],[data-fase="4"],[data-fase="5"],[data-fase="6"]) .pr-f2o { opacity: .4; }
:is([data-fase="2"],[data-fase="3"],[data-fase="4"],[data-fase="5"],[data-fase="6"]) .pr-f2o .pr-chip { opacity: 1; translate: 0 0; }
:is([data-fase="3"],[data-fase="4"],[data-fase="5"],[data-fase="6"]) .pr-wire { opacity: 0; transition: opacity .4s var(--ease); }

:is([data-fase="3"],[data-fase="4"],[data-fase="5"],[data-fase="6"]) .pr-f2 { opacity: 1; }
:is([data-fase="3"],[data-fase="4"],[data-fase="5"],[data-fase="6"]) .pr-f2 .pr-f2-el { opacity: 1; translate: 0 0; }

[data-fase="4"] .pr-f3 { opacity: 1; }
[data-fase="5"] .pr-f3 { opacity: .5; }
[data-fase="6"] .pr-f3 { opacity: .3; }

[data-fase="5"] .pr-f5 { opacity: 1; }
[data-fase="6"] .pr-f5 { opacity: .7; }
:is([data-fase="5"],[data-fase="6"]) .pr-f5 .pr-chip { opacity: 1; translate: 0 0; }

[data-fase="6"] .pr-f4 { opacity: 1; }
[data-fase="6"] .pr-f4 .pr-f4-el { opacity: 1; translate: 0 0; }
.pr-f4-el { opacity: 0; translate: 0 9px; transition: opacity .5s var(--ease) var(--d, 0s), translate .55s var(--ease-b) var(--d, 0s); }

/* Details per fase */
.pr-typ { transform-box: fill-box; transform-origin: left center; scale: 0 1; }
[data-fase="2"] .pr-typ { animation: pr-typ 1.2s var(--ease) .35s both; }
@keyframes pr-typ { from { scale: 0 1; } to { scale: 1 1; } }

.pr-code { transform-box: fill-box; transform-origin: left center; }
[data-fase="4"] .pr-code { animation: pr-typ .5s var(--ease) var(--d, 0s) both; }
[data-fase="4"] .pr-cursor { animation: pr-blink 1.1s steps(2, start) infinite; }
@keyframes pr-blink { to { opacity: 0; } }

.pr-live-dot { transform-box: fill-box; transform-origin: center; }
:is([data-fase="5"],[data-fase="6"]) .pr-live-dot { animation: pr-ademt 1.8s var(--ease) infinite; }
@keyframes pr-ademt { 50% { opacity: .35; } }

.pr-graf { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-fase="6"] .pr-graf { animation: pr-teken 1.5s var(--ease) .25s both; }
@keyframes pr-teken { to { stroke-dashoffset: 0; } }
.pr-vlak { opacity: 0; }
[data-fase="6"] .pr-vlak { animation: pr-fade 1s var(--ease) 1.1s both; }
@keyframes pr-fade { to { opacity: 1; } }
.pr-graf-pt { opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-fase="6"] .pr-graf-pt { animation: pr-pop .45s var(--ease-b) 1.55s both; }
@keyframes pr-pop { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
.pr-graf-puls { opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-fase="6"] .pr-graf-puls { animation: pr-puls 2.4s var(--ease) 1.9s infinite; }
@keyframes pr-puls {
  0%   { opacity: .6; scale: 1; }
  70%  { opacity: 0;  scale: 2.6; }
  100% { opacity: 0;  scale: 2.6; }
}

/* Stappenlijst rechts — verbonden door een oplichtende voortgangsrail */
.proces-stappen { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.proces-stap {
  position: relative;
  /* De kaart loopt 10px verder door naar links dan de inhoud; de knop en de
     tijdlijn compenseren dat, zodat er alleen kaart bij komt. */
  margin-left: -10px;
  background: transparent;
  border-radius: var(--r);
  transition: background .3s, box-shadow .3s;
}
.proces-stap > button {
  display: flex; gap: .9rem; align-items: flex-start;
  width: 100%; text-align: left;
  padding: .85rem 1rem 1rem calc(1.6rem + 10px);
}
/* Rail: grijze lijn met een pinklichtende vulling die per stap doorloopt. */
.ps-rail {
  /* Binnen de kaart van de stap, niet er tegenaan */
  position: absolute; left: 22px; top: 0; bottom: 0; width: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: visible;
}
/* De eerste rail begint bovenaan de kaart, zodat het beginstreepje daar
   ligt en niet zwevend eronder. */
.proces-stap:first-child .ps-rail { top: 0; }
/* De laatste stap is korter, dus is de lijn daar later bij de stip. */
.proces-stap:last-child.is-actief .ps-rail::after { animation-delay: 1.55s; }
@keyframes ps-knoop { from { opacity: 0; scale: .35; } to { opacity: 1; scale: 1; } }
.proces-stap:last-child .ps-rail { bottom: .9rem; }
/* Dwarsstreepjes aan begin en eind, zodat de tijdlijn een kop en een staart
   heeft in plaats van weg te lopen. */
.proces-stap:first-child .ps-rail::before,
.proces-stap:last-child .ps-rail::before {
  content: ""; position: absolute; left: 50%;
  width: 13px; height: 2px; margin-left: -6.5px;
  background-color: inherit;
  border-radius: 2px;
  transition: background-color .3s var(--ease);
}
.proces-stap:first-child .ps-rail::before { top: 0; }
.proces-stap:last-child .ps-rail::before { bottom: 0; }
/* Het beginstreepje kleurt mee zodra de tijdlijn loopt: de vulling begint
   daar immers. Het eindstreepje pas als de lijn onderaan is aangekomen. */
.proces-stap:first-child.is-actief .ps-rail::before,
.proces-stap:first-child.is-gedaan .ps-rail::before { background-color: var(--accent); }
.proces-stap:last-child.is-actief .ps-rail::before,
.proces-stap:last-child.is-gedaan .ps-rail::before {
  animation: ps-eind .35s var(--ease) 4.5s both;
}
@keyframes ps-eind { to { background-color: var(--accent); } }
.ps-rail > span { display: block; width: 100%; height: 0; background: var(--accent); border-radius: 2px; }
.proces-stap.is-gedaan .ps-rail > span { height: 100%; }
.proces-stap.is-actief .ps-rail > span { animation: ps-rail-vul 5.2s linear forwards; }
@keyframes ps-rail-vul { to { height: 100%; } }
/* Knooppunt bij de actieve stap */
/* Het knooppunt staat op de hoogte van het cijfer: dat zit 25,6px onder de
   bovenkant van de stap. De eerste stap begint zijn rail .9rem lager, dus
   die krijgt een kleinere afstand. */
.proces-stap.is-actief .ps-rail::after {
  content: ""; position: absolute; left: 50%; top: 1.6rem;
  /* Verschijnt pas wanneer de vullijn op deze hoogte is. De vulling doet
     5,2s over de hele rail; de stip zit op 25,6px van de ~100px hoge rail. */
  opacity: 0;
  width: 11px; height: 11px; margin-left: -5.5px; margin-top: -5.5px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
              0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
  /* Eerst opkomen zodra de lijn er is, daarna blijven pulseren. */
  animation: ps-knoop .3s var(--ease-b) 1.33s both,
             ps-node 2.6s var(--ease) 1.33s infinite;
}
@keyframes ps-node {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent); }
}
.ps-num {
  font-family: var(--font-disp);
  font-size: 1.2rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em;
  color: #c9c9d2;
  flex: none;
  /* 2px naar rechts; de negatieve rechtermarge houdt de tekst op zijn plek */
  margin-left: 2px; margin-right: -2px;
  transition: color .3s;
}
.ps-body { min-width: 0; }
.ps-body strong { display: block; font-family: var(--font-disp); font-size: .99rem; font-weight: 700; letter-spacing: -.014em; color: var(--ink-2); }
.ps-duur {
  font-style: normal;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .16rem .5rem;
  margin-left: .4rem;
  vertical-align: 2px;
  white-space: nowrap;
}
.ps-body small { display: block; font-size: .84rem; line-height: 1.5; color: var(--muted); margin-top: .2rem; }
.proces-stap.is-actief {
  background: #fff;
  box-shadow: var(--sh-2);
}
.proces-stap.is-actief .ps-num { color: var(--accent); }
.proces-stap.is-actief .ps-body strong { color: var(--ink); }
.proces-stap.is-actief .ps-body small { color: var(--body-c); }
.proces-stap.is-gedaan .ps-num { color: color-mix(in srgb, var(--accent) 45%, #c9c9d2); }
/* De tekst van de actieve stap komt binnen met een korte reveal. */
.proces-stap.is-actief .ps-body strong,
.proces-stap.is-actief .ps-body small { animation: ps-tekst .5s var(--ease) both; }
.proces-stap.is-actief .ps-body small { animation-delay: .08s; }
@keyframes ps-tekst { from { opacity: 0; translate: 0 6px; } }

@media (max-width: 900px) {
  /* Even zwaar als .waarom--proces .proces hierboven, anders blijft het
     theater ook op een telefoon in twee kolommen staan. */
  .waarom--proces .proces,
  .proces { grid-template-columns: 1fr; }
  .proces-stage { max-width: 34rem; margin-inline: auto; width: 100%; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-rail > span, .proces-stap.is-actief .ps-rail::after { animation: none; }
  .proces-stap.is-actief .ps-rail::after { opacity: 1; }
  .proces-stap:last-child.is-actief .ps-rail::before {
    animation: none; background-color: var(--accent);
  }
  .proces-stap.is-actief .ps-rail > span { height: 100%; }
  .proces-stage { transform: none !important; }
  .proces-stage::after { display: none; }
}

/* Stappen (werkwijze kort) */
.steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  counter-reset: stap;
}
.step {
  position: relative;
  counter-increment: stap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.5rem 1.6rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.step-num::before {
  content: "0" counter(stap);
  font-family: var(--font-disp);
  font-size: 3.2rem; font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  display: block; margin-bottom: .9rem;
}
.step h3 { font-size: 1.06rem; margin-bottom: .45rem; }
.step p { font-size: .91rem; line-height: 1.6; }
@media (max-width: 1020px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .steps { grid-template-columns: 1fr; } }

/* Tijdlijn (werkwijze lang) — cijfer | uitleg | wat-je-krijgt */
.timeline { display: grid; gap: 0; counter-reset: tl; }
.tl-item {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1.55fr) minmax(0, .8fr);
  gap: 1rem 1.8rem;
  align-items: start;
  position: relative;
  padding-block: 2.1rem;
  counter-increment: tl;
}
.tl-item + .tl-item { border-top: 1px solid var(--line); }
/* In een reis markeert de verticale lijn de stappen al; horizontale
   streepjes lopen daar dwars doorheen. */
.reis .tl-item + .tl-item { border-top: 0; }
/* Het cijfer zit in een rondje op de lijn: dat maakt van de opsomming een
   route in plaats van een lijst. Het rondje dekt de lijn af. */
.tl-num {
  position: relative; z-index: 1;
  width: 4.2rem; height: 4.2rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color .45s var(--ease), background .45s var(--ease),
              box-shadow .45s var(--ease), transform .5s var(--ease-b);
}
.tl-num span {
  font-family: var(--font-disp);
  font-size: 1.32rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--muted);
  transition: color .45s var(--ease);
}
.tl-item.is-bereikt .tl-num {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent),
              0 8px 26px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: scale(1.06);
}
.tl-item.is-bereikt .tl-num span { color: var(--accent-ink); }
/* Het cijfer staat op halve hoogte van de tekst ernaast in plaats van bovenaan,
   zodat het station midden op de regel valt. De hele rij centreert mee, anders
   staat de tekst bovenaan en klopt het midden alsnog niet. */
.reis .tl-item { align-items: center; }
.tl-body h3 { margin-bottom: .5rem; }
.tl-body p + p { margin-top: .6rem; }
.tl-aside {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .85rem 1.1rem;
  font-size: .9rem;
  line-height: 1.55;
}
.tl-aside strong { display: block; margin-bottom: .25rem; }
@media (max-width: 900px) {
  .tl-item { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .tl-aside { grid-column: 2; }
}
@media (max-width: 640px) {
  .tl-item { grid-template-columns: 1fr; gap: .7rem; }
  .tl-aside { grid-column: 1; }
  /* Gestapeld staan de cijfers boven de tekst; een lijn ertussendoor zou
     dwars door de alinea's lopen. De stations lichten wel gewoon op. */
  .reis-lijn { display: none; }
  .tl-num { width: 3.4rem; height: 3.4rem; }
  .tl-num span { font-size: 1.12rem; }
}

/* Cijfers */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  text-align: left;
}
.stat { position: relative; padding-left: 1.4rem; }
.stat::before {
  content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem;
  width: 2px; background: linear-gradient(var(--accent), transparent);
}
.stat-num {
  font-family: var(--font-disp);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat-num sup { font-size: .5em; color: var(--accent); font-weight: 700; }
.stat-lbl { margin-top: .55rem; font-size: .9rem; color: var(--night-mute); }

/* Dezelfde cijferrij op een lichte achtergrond, met drie cijfers in een
   tekstkolom — dus een slag kleiner dan de band onder de hero. */
.stats--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.7rem; }
.stats--drie .stat-num { font-size: clamp(2rem, 1.4rem + 1.5vw, 2.9rem); }
.stats--drie .stat-lbl { font-size: .82rem; line-height: 1.35; }
.stats--licht .stat-num { color: var(--ink); }
.stats--licht .stat-lbl { color: var(--muted); }
.cijfer-bron { margin-top: 1rem; font-size: .78rem; color: var(--muted); }
@media (max-width: 620px) { .stats--drie { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; } }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem; } }

/* Prijzen */
.price-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.9rem 1.8rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.price-card.is-featured {
  background: var(--night);
  border-color: var(--night);
  color: var(--night-body);
  box-shadow: var(--sh-3);
  overflow: clip;
}
.price-card.is-featured::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--noise), radial-gradient(20rem 14rem at 88% -12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%);
}
.price-card.is-featured > * { position: relative; }
.price-card.is-featured :is(h3, .price-amount strong) { color: #fff; }
.price-card h3 { font-size: 1.12rem; }
.price-card .checks { font-size: .92rem; }
.price-card .checks li { line-height: 1.5; }
.price-amount { display: flex; align-items: baseline; gap: .45rem; }
.price-amount small { font-size: .82rem; color: var(--muted); }
.price-card.is-featured .price-amount small { color: var(--night-mute); }
.price-amount strong {
  font-family: var(--font-disp);
  font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--ink);
}
.price-card .btn { margin-top: auto; }
.price-note { font-size: .88rem; color: var(--muted); margin-top: 1.4rem; }

/* Contact-tegels */
.contact-tiles { display: grid; gap: .8rem; }
.contact-tile {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.2rem 1.3rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
a.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-1); }
a.contact-tile:hover .icon-badge { background: var(--accent); color: #fff; }
.contact-tile > span:last-child { display: grid; gap: .12rem; min-width: 0; }
.contact-tile strong { display: block; letter-spacing: -.01em; color: var(--ink); }
.contact-tile > span:last-child > span { font-size: .93rem; font-weight: 560; color: var(--accent-ink); overflow-wrap: anywhere; }
.contact-tile small { color: var(--muted); }

/* Meta-regel bij kennisbankkaarten */
.post-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--muted); }
.post-meta span { display: inline-flex; align-items: center; gap: .38rem; }
.post-meta .ico { width: .95em; height: .95em; }

/* Artikel-layout kennisbank */
.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 17rem;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.article-side { position: sticky; top: calc(var(--hdr-h) + 1.5rem); display: grid; gap: 1.3rem; }
@media (max-width: 980px) { .article-layout { grid-template-columns: 1fr; } .article-side { position: static; } }

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); margin: 2.6rem 0 .9rem; scroll-margin-top: calc(var(--hdr-h) + 1.5rem); }

/* Het scananker stopt onder de vaste header, anders valt de kop erachter. */
#scan { scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.prose h3 { margin: 1.9rem 0 .6rem; }
.prose p + p { margin-top: .85rem; }
.prose ul, .prose ol { margin-block: .9rem; }
.prose a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--r); margin-block: 1.4rem; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.4rem; font-size: .93rem; }
.prose th, .prose td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 650; color: var(--ink); font-size: .88rem; }
.prose dfn { font-style: normal; font-weight: 650; color: var(--ink); }
.prose blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .95rem 1.2rem;
  margin-block: 1.4rem;
  font-size: .97rem; color: var(--ink-2);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 560px; }

.toc { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 1.2rem 1.3rem; }
.toc > strong {
  display: block;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: .7rem;
}
.toc ol { list-style: none; padding: 0; display: grid; gap: .35rem; }
.toc a { font-size: .88rem; color: var(--body-c); transition: color .2s; }
.toc a:hover { color: var(--accent-ink); }

.num-tag {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  min-width: 2rem; height: 2rem; padding-inline: .55rem;
  border-radius: 999px;
  background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
}

/* Contourwoord — "open" letters binnen een gewone kop */
.woord-contour { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }

/* Markeerstift-streek achter een woord — rolt uit zodra de sectie in
   beeld komt (zelfde patroon als "cyclus" in het HECO-ontwerp). */
.woord-mark { position: relative; display: inline-block; z-index: 0; }
.woord-mark::after {
  content: ""; position: absolute; z-index: -1;
  left: -.06em; right: -.06em; bottom: .05em;
  height: .36em;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 24%, white),
    color-mix(in srgb, var(--accent) 46%, white));
  border-radius: 4px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease) .4s;
}
html.js .reveal.is-in .woord-mark::after,
html:not(.js) .woord-mark::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .woord-mark::after { transform: scaleX(1); transition: none; }
}

/* Statement — grote typografische uithaal boven de SEO-scan */
.statement { position: relative; margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem); }

/* Puntenraster over dit hele deel: het loopt door achter het einde van de
   titel en verder naar rechts, achter de foto's langs. Het dooft rondom uit,
   zodat het nergens een harde rand krijgt. */
.probleem-sectie { position: relative; }
.probleem-sectie::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 40%, transparent) 1.1px, transparent 1.2px);
  background-size: 13px 13px;
  /* Twee maskers over elkaar: een lange fade van bovenaf, en een veld dat
     rechts ligt en rondom uitdooft. */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.6) 34%, #000 52%),
    radial-gradient(46% 58% at 76% 44%, #000 0%, rgba(0,0,0,.62) 44%, rgba(0,0,0,.24) 68%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.6) 34%, #000 52%),
    radial-gradient(46% 58% at 76% 44%, #000 0%, rgba(0,0,0,.62) 44%, rgba(0,0,0,.24) 68%, transparent 90%);
  mask-composite: intersect;
}
.probleem-sectie > * { position: relative; z-index: 1; }
.statement-kop {
  /* Zelfde maat als de gewone sectiekoppen, zoals "Van eerste schets ..." */
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: none;
}
.statement-stil {
  color: transparent;
  -webkit-text-stroke: 1.5px #c3c3cd;
}
.omcirkeld { position: relative; display: inline-block; }
.omcirkeld svg {
  position: absolute;
  left: -8%; top: -26%;
  width: 100%; height: 152%;
  max-width: none; /* de globale svg-regel plafonneert anders op 100% */
  overflow: visible;
  pointer-events: none;
}
/* Ruimere variant: het hele woord — inclusief de laatste letter — valt
   binnen de lus. */
.omcirkeld--ruim svg { left: -13%; top: -32%; width: 130%; height: 164%; }
.omcirkeld path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.js .reveal.is-in .omcirkeld path,
html:not(.js) .omcirkeld path {
  animation: omcirkel 1s var(--ease) .55s forwards;
}
@keyframes omcirkel { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .omcirkeld path { stroke-dashoffset: 0; animation: none; }
}

/* =========================================================================
   SEO-SCAN — groot paneel: links een beeld dat "gescand" wordt, rechts de
   velden. Licht van opzet, zodat het in de witte sectie thuishoort.
   ========================================================================= */
.probleem-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: center;
  /* Ruimte naar het scanpaneel eronder; die stond te krap tegen het
     beeldmozaïek aan. */
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.probleem-tekst p + p { margin-top: .9rem; }

/* Beeldmozaïek: één groot beeld met bijschrift, twee kleinere ernaast. */
.probleem-beelden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.probleem-beelden figure { margin: 0; position: relative; overflow: clip; border-radius: var(--r-lg); }
.probleem-beelden img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.probleem-beelden figure:hover img { scale: 1.05; }
.pb-groot { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.probleem-beelden figure:not(.pb-groot) { aspect-ratio: 4 / 3; }
.pb-groot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .8rem;
  padding: 2.6rem 1.2rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(10,10,15,.88));
  color: #fff; font-size: .88rem; line-height: 1.35;
}
.pb-cijfer {
  font-family: var(--font-disp); font-size: 2.1rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: var(--accent);
  flex: none;
}
@media (max-width: 900px) {
  .probleem-split { grid-template-columns: 1fr; }
}

/* Het venster dat gescand wordt */
.sv-venster {
  position: relative;
  /* container voor de aantekeningen: zo krijgen ze exact dezelfde
     lettergrootte als de labels in de SVG-scène (11 van 360 = 3,06%) */
  container-type: inline-size;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r);
  background: #12121a;
  overflow: clip;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.is-scannend .sv-venster, .is-klaar-scan .sv-venster {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
              0 18px 46px color-mix(in srgb, var(--accent) 20%, transparent);
}
.sv-balk {
  display: flex; align-items: center; gap: .38rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sv-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.18); flex: none; }
.sv-dot:nth-child(3) { background: var(--accent); }
.sv-url {
  flex: 1; min-width: 0; margin-left: .5rem;
  font-family: var(--font-mono); font-size: .74rem;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: .3rem .8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .3s;
}
.is-scannend .sv-url, .is-klaar-scan .sv-url { color: #fff; }
/* 'www.' vóór de domeinnaam: de scan tikt het erbij en haalt het weer weg,
   want we proberen het adres met én zonder. */
.sv-www { transition: color .3s; }
.is-scannend .sv-www, .is-klaar-scan .sv-www { color: var(--accent); }
/* Werkt de site met én zonder www, dan kleurt hij groen mee met de uitslag */
.is-klaar-scan .sv-www.is-goed { color: #4fe0a5; }
.sv-www.is-tikkend {
  border-right: 1.5px solid currentColor;
  animation: sv-cursor .7s steps(1) infinite;
}
@keyframes sv-cursor { 50% { border-right-color: transparent; } }

/* Aantekeningen onder de adresbalk. Twee regels onder elkaar met exact
   dezelfde regelhoogte als de bevindingen in de scène (36 van 360 = 10%),
   zodat het hele venster één verticaal ritme houdt. */
.sv-balknoten {
  position: relative;
  /* geen onderruimte: dan is de sprong naar de eerste bevinding exact
     even groot als de afstand tussen de aantekeningen onderling */
  padding: .2rem .9rem 0;
}
.sv-draden {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.sv-draden path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 70%, transparent);
  stroke-width: 1.2;
  /* Bewust géén non-scaling-stroke: de streepjeslengte wordt dan in
     device-pixels gerekend en op retina tekent het pad maar half.
     De viewBox is even groot als het element, dus schaal 1 volstaat.
     JS zet de dash op de werkelijke padlengte. */
  transition: stroke-dashoffset .55s var(--ease) .15s;
}
.sv-draden path.is-goed { stroke: rgba(79,224,165,.75); }
.sv-noot {
  position: relative;
  display: flex; align-items: center;
  height: 10cqw;
  /* De labels in de scène beginnen op x=96 van 360 eenheden, oftewel
     26,667% van de vensterbreedte. De strook heeft zelf .9rem padding,
     die trekken we eraf zodat beide precies gelijk uitkomen. */
  padding-left: calc(26.667cqw - .9rem);
}
.sv-noot em {
  font-style: normal;
  font-size: 3.06cqw; font-weight: 600; line-height: 1;
  color: #fff;
  opacity: 0; animation: sv-label .45s var(--ease) var(--d, .5s) forwards;
}
.sv-noot.is-goed em { color: #b8f5da; }
.sv-noot.is-let em { color: #ffd8e6; }

/* Favicon vóór de domeinnaam — precies waar een browser hem ook toont */
.sv-fav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; flex: none;
  margin-left: .5rem;
  border-radius: 4px;
  animation: sv-chip .45s var(--ease-b) both;
}
.sv-fav img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.sv-fav.is-let {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
}
.sv-fav .ico { width: .8em; height: .8em; }
.sv-fav + .sv-url { margin-left: .4rem; }

/* Smal venster: de dots en de ruime marges duwen de adresbalk zover naar
   rechts dat de lijntjes naar de aantekeningen terug moeten lopen over hun
   eigen tekst. Compacter maken lost dat op. */
@container (max-width: 480px) {
  .sv-balk { padding: .5rem .55rem; gap: .3rem; }
  .sv-dot { display: none; }
  .sv-fav { margin-left: 0; }
  .sv-url, .sv-fav + .sv-url { margin-left: 0; padding: .26rem .55rem; font-size: .66rem; }
}

/* Wenk in het lege venster: een getekende pijl van de tekst naar de
   adresbalk, zodat meteen duidelijk is wat er van de bezoeker gevraagd
   wordt. Verdwijnt zodra de scan loopt. */
.sv-wenk {
  position: absolute; inset: 0;
  z-index: 4; pointer-events: none;
  transition: opacity .35s var(--ease), translate .35s var(--ease);
}
/* De pijl wijst naar het invulveld: op een breed scherm staat dat rechts
   naast het venster, gestapeld staat het eronder. */
.sv-wenk-pijl { position: absolute; height: auto; overflow: visible; }
.sv-wenk-pijl--rechts { left: 65%; top: 36%; width: 26%; }
.sv-wenk-pijl--omlaag { display: none; left: 66%; top: 48%; width: 18%; }
.sv-wenk-pijl path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.sv-wenk-tekst {
  position: absolute; left: 14%; top: 36%; width: min(48%, 20rem);
  /* De cirkel is op dit blok gemaat en blijft dus staan; de linkerruimte
     duwt alleen de tekst naar rechts, zodat hij in de lus gecentreerd komt. */
  box-sizing: border-box; padding-left: 2.6rem;
  font-family: var(--font-hand);
  font-size: 5.4cqw; line-height: 1.18; font-weight: 600;
  color: rgba(255,255,255,.92);
  text-wrap: balance;
  rotate: -1.6deg;
}
/* Roze cirkel eromheen, met de hand getrokken — net als bij "Gevonden". */
.sv-wenk-ring {
  position: absolute; left: -18%; top: -31%;
  width: 139%; height: 166%;
  max-width: none; overflow: visible; pointer-events: none;
}
.sv-wenk-ring path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.reveal.is-in .sv-wenk-ring path { animation: sv-wenk-ring 1.1s var(--ease) 1.5s forwards; }
@keyframes sv-wenk-ring { to { stroke-dashoffset: 0; } }
/* De pijl tekent zichzelf zodra het paneel in beeld komt en wipt daarna
   zachtjes richting de adresbalk. */
.reveal.is-in .sv-wenk-pijl .wp-lijn { animation: sv-wenk-lijn .8s var(--ease) .5s both; }
.reveal.is-in .sv-wenk-pijl .wp-punt { animation: sv-wenk-punt .3s var(--ease) 1.25s both; }
.reveal.is-in .sv-wenk-pijl { animation: sv-wenk-wip 3.4s var(--ease) 1.7s infinite; }
@keyframes sv-wenk-lijn { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes sv-wenk-punt { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv-wenk-wip { 0%, 82%, 100% { translate: 0 0; } 90% { translate: 5px -3px; } }
@keyframes sv-wenk-wip-omlaag { 0%, 82%, 100% { translate: 0 0; } 90% { translate: 3px 5px; } }

/* Gestapelde opmaak: het formulier staat onder het venster, dus wijst de
   pijl naar beneden. */
@media (max-width: 900px) {
  .sv-wenk-pijl--rechts { display: none; }
  .sv-wenk-pijl--omlaag { display: block; }
  .reveal.is-in .sv-wenk-pijl--omlaag { animation-name: sv-wenk-wip-omlaag; }
  .sv-wenk-tekst { top: 28%; width: min(54%, 20rem); padding-left: 1.8rem; }
}
.is-scannend .sv-wenk, .is-klaar-scan .sv-wenk {
  opacity: 0; translate: 0 -8px; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-in .sv-wenk-pijl,
  .reveal.is-in .sv-wenk-pijl .wp-lijn,
  .reveal.is-in .sv-wenk-pijl .wp-punt { animation: none; }
  .sv-wenk-pijl .wp-lijn { stroke-dashoffset: 0; }
  .sv-wenk-pijl .wp-punt { opacity: 1; }
  .reveal.is-in .sv-wenk-ring path { animation: none; }
  .sv-wenk-ring path { stroke-dashoffset: 0; }
}

/* Slotje achter de domeinnaam: de HTTPS-bevinding hoort in de adresbalk */
.sv-slot {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  border-radius: 999px;
  padding: .3rem;
  animation: sv-chip .45s var(--ease-b) both;
}
.sv-slot .ico { width: .95em; height: .95em; }
.sv-slot.is-goed { color: #4fe0a5; background: rgba(45,200,140,.14); border: 1px solid rgba(45,200,140,.45); }
.sv-slot.is-let { color: #fff; background: color-mix(in srgb, var(--accent) 24%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
@keyframes sv-chip { from { opacity: 0; scale: .8; translate: 0 6px; } }

.sv-body { position: relative; }
.sv-scene { width: 100%; height: auto; display: block; }
.sv-wire rect { fill: rgba(255,255,255,.055); transition: fill .6s var(--ease); }
.is-klaar-scan .sv-wire rect { fill: rgba(255,255,255,.028); }

/* Verbindingslijn van hotspot naar omschrijving */
.sv-lijnen path {
  stroke: color-mix(in srgb, var(--accent) 70%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sv-lijn .5s var(--ease) var(--d, 0s) forwards;
}
@keyframes sv-lijn { to { stroke-dashoffset: 0; } }

/* Hotspot met icoon */
.sv-knopen g { opacity: 0; animation: sv-knoop .45s var(--ease-b) var(--d, 0s) forwards; }
@keyframes sv-knoop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.sv-knopen circle.ring { fill: #12121a; stroke-width: 1.6; }
.sv-knopen .ico { width: 15px; height: 15px; }
.sv-knopen .is-goed circle.ring { stroke: #4fe0a5; }
.sv-knopen .is-goed .ico { color: #4fe0a5; }
.sv-knopen .is-let circle.ring { stroke: var(--accent); }
.sv-knopen .is-let .ico { color: var(--accent); }
@keyframes sv-puls {
  0% { opacity: .7; r: 13; } 70% { opacity: 0; r: 26; } 100% { opacity: 0; r: 26; }
}

/* Omschrijving bij de hotspot */
.sv-labels text {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  fill: #fff;
  stroke: rgba(10,10,15,.92); stroke-width: 3.4; paint-order: stroke;
  opacity: 0; animation: sv-label .45s var(--ease) var(--d, 0s) forwards;
}
.sv-labels .is-let text, .sv-labels text.is-let { fill: #ffd8e6; }
@keyframes sv-label { to { opacity: 1; } }

/* Scanbalk */
.sv-beam {
  position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--accent) 14%, transparent) 60%,
    color-mix(in srgb, var(--accent) 32%, transparent) 94%,
    transparent 97%);
  border-bottom: 1.5px solid var(--accent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 55%, transparent);
  translate: 0 -110%;
  opacity: 0;
}
html.js .is-scannend .sv-beam { animation: sv-beam 2.4s var(--ease) infinite; }
@keyframes sv-beam {
  0%   { translate: 0 -110%; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { translate: 0 250%; opacity: 0; }
}

/* ── Voortgang in percentages ─────────────────────────────────────────── */
.sv-voortgang { margin-top: auto; }
.svp-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.svp-titel { font-size: .86rem; color: rgba(255,255,255,.75); }
.svp-pct { font-family: var(--font-disp); font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.svp-balk {
  position: relative; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: clip;
}
.svp-balk::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px);
}
.svp-vul {
  position: absolute; inset: 0 auto 0 0; z-index: 1;
  width: calc(var(--vul, 0) * 1%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
  border-radius: 999px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
  transition: width .9s var(--ease);
}
.svp-deel {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .55rem;
  font-size: .78rem; color: rgba(255,255,255,.55);
}
.svp-deel b { color: #fff; font-weight: 700; }
.svp-later { text-align: right; }
.svp-later b { color: var(--accent); }
.sv-prompt {
  margin-top: .75rem;
  font-size: .88rem; line-height: 1.45; color: rgba(255,255,255,.72);
  transition: color .3s;
}
.is-klaar-scan .sv-prompt { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sv-beam { display: none; }
  .sv-knopen g, .sv-labels text, .sv-noot em { opacity: 1; animation: none; }
  .sv-lijnen path, .sv-draden path { stroke-dashoffset: 0 !important; animation: none; transition: none; }
  .sv-fav, .sv-slot { animation: none; }
  .sv-www.is-tikkend { border-right: 0; animation: none; }
}

/* Tijdens het scannen loopt de beam sneller */
.is-scannend.is-bezig-scan .sv-beam { animation-duration: 1.6s; }
@keyframes scan-puls { 50% { opacity: .35; } }
@media (max-width: 520px) { }
@keyframes scan-item { to { opacity: 1; translate: 0 0; } }
/* Uitslag: score, drie bevindingen en een haakje naar het rapport */
.scan-klaar { display: none; }

@media (max-width: 900px) {
}
@media (prefers-reduced-motion: reduce) {
  .sv-beam { display: none; }
  .sv-chips span { animation: none; }
}

/* =========================================================================
   8. FORMULIEREN
   ========================================================================= */
.form-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--sh-2);
}
.form-grid { display: grid; gap: 1.1rem; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .form-grid--2 { grid-template-columns: 1fr; } }
.form-full { grid-column: 1 / -1; }

.field { display: grid; gap: .42rem; }
.lbl { font-size: .89rem; font-weight: 620; color: var(--ink); letter-spacing: -.005em; }
.req { color: var(--accent); }
.hint { font-size: .8rem; color: var(--muted); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: .82rem 1rem;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
input:hover, select:hover, textarea:hover { border-color: #d6d6de; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
textarea { min-height: 8.5rem; resize: vertical; }

/* Keuzekaartjes met checkbox/radio */
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
  position: relative;
  display: flex; gap: .8rem; align-items: flex-start;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: .95rem 1.05rem;
  cursor: pointer;
  background: #fff;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.choice:hover { border-color: #cfcfd8; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice strong { display: block; font-size: .93rem; font-weight: 640; color: var(--ink); }
.choice small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.choice .box {
  width: 1.4rem; height: 1.4rem; flex: none; margin-top: .1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.choice .box .ico { width: .85rem; height: .85rem; stroke-width: 2.6; }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.choice:has(input:checked) .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.range-wrap { max-width: 30rem; }
.range-value {
  display: inline-block;
  font-family: var(--font-disp); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--accent-ink);
  margin-bottom: .5rem;
}
input[type="range"] { width: 100%; accent-color: var(--accent); }
.range-scale { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-top: .3rem; }

.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .82rem; color: var(--muted); }
.form-note a { text-decoration: underline; text-underline-offset: 2px; }

/* Wizard */
.wizard-steps {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: 1.8rem;
}
.ws { display: flex; align-items: center; gap: .55rem; }
.ws-dot {
  width: 2rem; height: 2rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  color: var(--muted);
  background: #fff;
  transition: background .25s, color .25s, border-color .25s;
}
.ws.is-active .ws-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.ws.is-done .ws-dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.ws-label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.ws.is-active .ws-label { color: var(--ink); }
.ws-line { flex: 1; height: 1.5px; background: var(--line); min-width: 1rem; }
@media (max-width: 640px) { .ws-label { display: none; } .ws.is-active .ws-label { display: block; } }

.wz-step { display: none; }
.wz-step.is-active { display: block; animation: step-in .4s var(--ease); }
@keyframes step-in { from { opacity: 0; translate: 0 10px; } }
.wz-nav { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.6rem; }
/* Knoppen per stap: "Volgende" tot de laatste stap, dan pas "versturen",
   en "Vorige" onzichtbaar op stap één. */
form[data-wizard]:has(fieldset.wz-step:last-of-type.is-active) [data-wz-next] { display: none; }
form[data-wizard]:not(:has(fieldset.wz-step:last-of-type.is-active)) .wz-nav button[type="submit"] { display: none; }
form[data-wizard]:has(fieldset.wz-step:first-of-type.is-active) [data-wz-prev] { visibility: hidden; }
.wz-error {
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  color: var(--accent-ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .75rem 1rem;
  font-size: .9rem; font-weight: 550;
  margin-bottom: 1.1rem;
}
.wz-done { display: none; text-align: center; padding: 2.5rem 1rem; }
.wz-done.is-active { display: block; animation: step-in .5s var(--ease); }
.wz-done .icon-badge {
  width: 3.6rem; height: 3.6rem; border-radius: 999px;
  background: var(--accent); color: #fff;
  margin: 0 auto 1.2rem;
}
.wz-done h2 { margin-bottom: .6rem; }

/* =========================================================================
   9. CTA-BAND & FOOTER
   ========================================================================= */
.cta-band { padding-block: var(--pad-y-s) var(--pad-y); }
.cta-panel {
  position: relative;
  /* Diagonaal verloop van nacht naar een roze zweem rechtsonder. */
  background:
    linear-gradient(135deg,
      var(--night) 0%,
      var(--night-2) 46%,
      color-mix(in srgb, var(--accent) 22%, var(--night-2)) 100%);
  color: var(--night-body);
  border-radius: var(--r-xl);
  padding: clamp(2.2rem, 5.5vw, 4.2rem);
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
/* Laag 1: korrel, gloed en een fijn raster dat naar rechts uitdooft. */
.cta-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    var(--noise),
    radial-gradient(34rem 22rem at 88% -18%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(26rem 18rem at -8% 112%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: auto, auto, auto, 46px 46px, 46px 46px;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.55) 46%, transparent 82%);
  mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.55) 46%, transparent 82%);
}
/* Laag 2: gebogen lijnen die vanuit de rechterrand uitwaaieren. */
.cta-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' fill='none'%3E%3Cg stroke='%23ffffff' stroke-opacity='.13'%3E%3Ccircle cx='690' cy='380' r='150'/%3E%3Ccircle cx='690' cy='380' r='240'/%3E%3Ccircle cx='690' cy='380' r='330'/%3E%3Ccircle cx='690' cy='380' r='420'/%3E%3Ccircle cx='690' cy='380' r='510'/%3E%3C/g%3E%3Cg stroke='%23ff0060' stroke-opacity='.5'%3E%3Ccircle cx='690' cy='380' r='240'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -60px center;
  background-size: auto 150%;
  -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 26%, #000 72%);
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); margin-bottom: .9rem; max-width: 16ch; }
.cta-panel > div > p:last-of-type { max-width: 32rem; }

.cta-choice { display: grid; gap: .75rem; }
.cta-opt {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  color: #fff;
  transition: background .25s, border-color .25s, translate .3s var(--ease);
}
.cta-opt:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); translate: 4px 0; }
.cta-opt > span:nth-child(2) { flex: 1; min-width: 0; }
.cta-opt strong { display: block; font-size: .95rem; font-weight: 650; letter-spacing: -.01em; color: #fff; }
.cta-opt small { display: block; font-size: .8rem; color: var(--night-mute); line-height: 1.4; }
.cta-opt > .ico { color: var(--night-mute); transition: color .25s, transform .3s var(--ease); }
.cta-opt:hover > .ico { color: var(--accent); transform: translateX(3px); }
.cta-opt .icon-badge { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: var(--accent); }
.cta-opt--primary { background: var(--accent); border-color: var(--accent); }
.cta-opt--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.cta-opt--primary small { color: rgba(255,255,255,.75); }
.cta-opt--primary .icon-badge { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }
.cta-opt--primary > .ico { color: #fff; }
@media (max-width: 900px) { .cta-panel { grid-template-columns: 1fr; } }

/* Footer */
.site-footer {
  position: relative;
  background: var(--night);
  color: var(--night-body);
  overflow: clip;
  font-size: .93rem;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--noise), radial-gradient(40rem 24rem at 4% -12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
}
/* Puntenraster in de rechterbovenhoek, zoals bij de donkere panelen */
.site-footer::after {
  content: ""; position: absolute; pointer-events: none;
  left: 52%; right: 0; top: 0; height: 26rem;
  background-image: radial-gradient(rgba(255,255,255,.2) 1.3px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(76% 100% at 82% 4%, #000 0%, rgba(0,0,0,.6) 44%, transparent 86%);
  mask-image: radial-gradient(76% 100% at 82% 4%, #000 0%, rgba(0,0,0,.6) 44%, transparent 86%);
}
.site-footer > .container { position: relative; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.15fr);
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.6rem;
}
.footer-brand img { width: 112px; margin-bottom: 1.1rem; }
.footer-brand p { max-width: 24rem; line-height: 1.65; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.footer-social a {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--night-line);
  color: var(--night-body);
  transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); }
.footer-col h2 {
  color: #fff; font-size: .76rem;
  font-family: var(--font-mono); font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  margin-bottom: 1.05rem;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.footer-col a { color: var(--night-body); transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-contact { display: grid; gap: .95rem; }
.footer-contact > div { display: flex; gap: .8rem; align-items: flex-start; }
.footer-contact .ico { color: var(--accent); margin-top: .3rem; }
.footer-contact strong { color: #fff; font-weight: 640; }
.footer-contact small { display: block; color: var(--night-mute); }
.footer-bottom {
  border-top: 1px solid var(--night-line);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem;
  font-size: .84rem; color: var(--night-mute);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer-bottom a { color: var(--night-mute); transition: color .2s; }
.footer-bottom a:hover { color: #fff; }

/* Het reuzenwoordmerk onderin */
.footer-giant {
  position: relative;
  /* Hoger uitgesneden: ongeveer de helft van de letters komt boven de
     onderrand uit in plaats van een derde. */
  /* Extra ruimte bovenin voor het merkteken; de letters schuiven met
     dezelfde afstand mee, dus de uitsnede onderaan blijft gelijk. */
  height: calc(clamp(6.4rem, 18.2vw, 15.1rem) + 2.8rem);
  overflow: hidden;
  user-select: none; pointer-events: none;
}
.footer-giant span {
  position: absolute; left: 50%; top: calc(.18em + 2.8rem);
  translate: -50% 0;
  font-family: var(--font-disp);
  font-size: clamp(6rem, 19vw, 16.5rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 78%);
  -webkit-background-clip: text; background-clip: text;
}
/* Het seintje boven de i, net als in het logo */
.fg-i { font-style: normal; position: relative; }
.fg-sein {
  /* Maten uit het logo: de boog is even breed als de punt hoog is, en
     loopt door over de letter ernaast — precies zoals in het woordmerk. */
  /* De punt komt exact op de plek van de vierkante punt van het lettertype:
     die zit met 170px boven de basislijn bij 264px tekst. */
  /* Iets uit het midden naar rechts; in em, zodat de verschuiving op elk
     schermformaat dezelfde verhouding houdt (.015em = 4px bij 264px tekst). */
  position: absolute; left: calc(50% + .015em); top: -.075em;
  translate: -50% 0;
  width: .65em; height: auto;
  max-width: none; overflow: visible;
  /* De boog is een gevulde vorm, geen lijn: alleen zo lopen de zijkanten
     recht door naar de onderkant van de punt, zoals in het logo.
     Vulling en omtrek zijn dezelfde als bij de letters: hetzelfde
     verticale verloop en dezelfde haarlijn van 1px. */
  fill: url(#fg-vloei);
  stroke: rgba(255,255,255,.1);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 1020px) { .footer-top { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .footer-top { grid-template-columns: 1fr; gap: 2.2rem; } }

/* Plakkende CTA op mobiel */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: .6rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  translate: 0 110%;
  transition: translate .4s var(--ease);
}
.sticky-cta.is-in { translate: 0 0; }
.sticky-cta .btn { flex: 1; }
@media (max-width: 760px) { .sticky-cta { display: flex; } body { padding-bottom: 0; } }

/* =========================================================================
   10. MOTION
   ========================================================================= */
html.js .reveal, html.js .reveal-x {
  opacity: 0;
  transition: opacity .8s var(--ease), translate .8s var(--ease);
  will-change: opacity, translate;
}
html.js .reveal { translate: 0 26px; }
html.js .reveal-x { translate: 30px 0; }
html.js .reveal-x.from-left { translate: -30px 0; }
html.js .reveal.is-in, html.js .reveal-x.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js .reveal, html.js .reveal-x { opacity: 1; translate: 0 0; }
  .hero-slide { transition: opacity .01ms; }
}

/* Print: navigatie en decoratie eruit */
@media print {
  .topbar, .site-header, .mobile-menu, .sticky-cta, .cta-band, .footer-giant { display: none !important; }
  body { color: #000; }
}