/* boosten.nu — site styles.
   Bron van waarheid: assets/ds/tokens/*.css (Boosten design system).
   Geen losse hexcodes, fontgroottes of px-afstanden buiten het blok
   "site-tokens" hieronder; alles verwijst naar tokens of is ervan afgeleid
   via color-mix(). */

/* ---------- site-tokens: afgeleiden die het design definieert ---------- */
:root {
  /* Hero-koppen uit het design (clamp-eindpunten komen uit de type-schaal
     waar mogelijk; 68px en 52px zijn de door het design gezette maxima). */
  --type-hero: var(--weight-bold) clamp(40px, 4.6vw, 68px)/1.05 var(--font-display);
  --type-hero-sub: var(--weight-bold) clamp(36px, 4vw, 58px)/1.06 var(--font-display);
  --type-hero-compact: var(--weight-bold) clamp(34px, 3.6vw, 52px)/1.06 var(--font-display);

  /* Doorschijnend cream op navy-vlakken */
  --inverse-86: color-mix(in srgb, var(--cream-100) 86%, transparent);
  --inverse-78: color-mix(in srgb, var(--cream-100) 78%, transparent);
  --inverse-72: color-mix(in srgb, var(--cream-100) 72%, transparent);
  --inverse-65: color-mix(in srgb, var(--cream-100) 65%, transparent);
  --inverse-55: color-mix(in srgb, var(--cream-100) 55%, transparent);
  --inverse-50: color-mix(in srgb, var(--cream-100) 50%, transparent);
  --inverse-45: color-mix(in srgb, var(--cream-100) 45%, transparent);
  --inverse-20: color-mix(in srgb, var(--cream-100) 20%, transparent);

  /* Kaartvlak op een navy band: navy met een vleug cream erdoor, zodat de
     kaart niet wegvalt tegen de band waar hij op ligt. */
  --surface-inverse-raised: color-mix(in srgb, var(--cream-100) 9%, var(--surface-inverse));

  /* Sticky header: cream met blur */
  --header-bg: color-mix(in srgb, var(--cream-100) 88%, transparent);
  --header-h: 72px;
  --header-h-small: 60px;

  /* Zwevende schaduw onder de hero-mockups */
  --shadow-float: 0 38px 58px color-mix(in srgb, var(--navy-900) 20%, transparent);
}

/* ---------- basis ---------- */
.skip-link {
  position: absolute; left: var(--space-3); top: -100px; z-index: 60;
  padding: var(--space-2) var(--space-4);
  background: var(--navy-800); color: var(--cream-100);
  border-radius: var(--radius-sm); border-bottom: none;
  font: var(--type-label);
}
.skip-link:focus-visible { top: var(--space-3); }

h1, h2, h3, h4, p { margin: 0; text-wrap: pretty; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
img { max-width: 100%; }
button { font: inherit; }

a.plain,
.footer a,
.nav a { border-bottom: none; }

/* Reveal-on-scroll: alleen verbergen als JS draait */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.in-view { opacity: 1; transform: none; }

.js .hero-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  animation: b-rise 640ms var(--ease-out) both;
}
.js .hero-stagger > :nth-child(1) { animation-delay: 60ms; }
.js .hero-stagger > :nth-child(2) { animation-delay: 145ms; }
.js .hero-stagger > :nth-child(3) { animation-delay: 230ms; }
.js .hero-stagger > :nth-child(4) { animation-delay: 315ms; }

@keyframes b-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes b-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero-stagger > * { opacity: 1; transform: none; }
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) var(--gutter); }
.section--tight { padding: var(--section-y-tight) var(--gutter); }
.section--flush-top { padding-top: 0; }
/* Flush-top hoort tussen twee secties met dezelfde achtergrond, anders telt de
   tussenruimte dubbel. Wisselt de achtergrond, dan is die bovenruimte juist
   nodig: zonder deze regel plakt de kop tegen de rand van de navy band. */
.section--flush-top.band,
.section--flush-top.band--deep,
.band + .section--flush-top,
.band--deep + .section--flush-top { padding-top: var(--section-y); }
.stack { display: flex; flex-direction: column; }

/* ---------- header ---------- */
/* De header krimpt bij scrollen van 72 naar 60 px, maar alleen in beeld:
   het element zelf blijft 72 px hoog, zodat de pagina eronder niet
   verschuift. De balk (achtergrond, blur, lijn) is ::before en krimpt met
   scaleY; de inhoud schuift 6 px op, zodat hij in het midden blijft. Het
   doorzichtige randje van 12 px dat overblijft laat kliks door
   (pointer-events: none op het element, auto op de balk en de inhoud). */
.header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center;
  pointer-events: none;
  /* Blijft staan tijdens een paginawissel, zie de view transitions onderaan. */
  view-transition-name: site-header;
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
  transform-origin: top;
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: auto;
}
/* 60 / 72: calc() mag nog niet overal lengtes door elkaar delen. */
.header--small::before { transform: scaleY(.8333); }
.header__inner {
  width: 100%; max-width: var(--container-lg); margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex; align-items: center; gap: var(--space-6);
  pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.header--small .header__inner { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  /* De algemene regel met * pakt pseudo-elementen niet. */
  .header::before { transition: none; }
}
.header__logo { display: flex; align-items: center; border-bottom: none; }
.header__logo img { height: 30px; width: auto; display: block; transform-origin: left center; transition: transform var(--dur-slow) var(--ease-out); }
.header--small .header__logo img { transform: scale(.867); }

.nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.nav a {
  position: relative; display: inline-block;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  font: var(--type-label); font-size: var(--text-sm);
  color: var(--navy-800);
}
.nav a:hover { color: var(--gold-600); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 2px;
  height: var(--border-width-thick); background: var(--gold-500);
}

.header__cta { margin-left: 0; }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: var(--control-h-md); height: var(--control-h-md);
  place-items: center;
  background: var(--surface-card);
  border: 1px solid var(--navy-800); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--navy-800);
}

.progress {
  position: absolute; left: 0; bottom: -1px;
  height: var(--border-width-thick); width: 0;
  background: var(--gold-500);
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Mee omhoog met de onderkant van de gekrompen balk. */
.header--small .progress { transform: translateY(-12px); }

.mobile-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  pointer-events: auto;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-5) var(--space-5);
  flex-direction: column; gap: var(--space-1);
  animation: b-rise var(--dur-slow) var(--ease-out) both;
}
.mobile-menu.open { display: flex; }
.header--small .mobile-menu { top: var(--header-h-small); }
.mobile-menu a:not(.btn) {
  text-align: left; padding: var(--space-3) 0;
  font: var(--type-h4); color: var(--navy-800);
  border-bottom: 1px solid var(--border-hairline);
}
.mobile-menu .btn { margin-top: var(--space-3); }

/* ---------- knoppen (DS Button) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md); padding: 0 var(--space-5);
  font: var(--type-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-snug);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--transition-control);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: translateY(0); }
.btn--lg { height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--text-md); }
.btn--full { width: 100%; }

.btn--primary { background: var(--navy-800); color: var(--text-inverse); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--navy-700); color: var(--text-inverse); }
.btn--primary:active { background: var(--navy-900); }

.btn--accent { background: var(--gold-500); color: var(--navy-900); box-shadow: var(--shadow-accent); }
.btn--accent:hover { background: var(--gold-400); color: var(--navy-900); }

.btn--secondary { background: var(--surface-card); color: var(--navy-800); border-color: var(--navy-800); }
.btn--secondary:hover { background: var(--navy-050); color: var(--navy-800); }

.btn--inverse { background: var(--cream-100); color: var(--navy-900); }
.btn--inverse:hover { background: var(--paper); color: var(--navy-900); }

.btn--chamfer { clip-path: var(--clip-chamfer-tr); border-radius: 0; }

/* ---------- typografische hulpjes ---------- */
.mono { font: var(--type-mono); }
.kicker { font: var(--type-mono); letter-spacing: var(--tracking-wide); color: var(--gold-700); }

.section-heading { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; max-width: 46ch; }
.section-heading h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.section-heading p { font: var(--type-body); color: var(--text-body); }
.on-color .section-heading h2 { color: var(--cream-100); }
.on-color .section-heading p { color: var(--inverse-78); }

/* Sub-page hero */
.page-hero { padding: var(--space-9) var(--space-5) var(--space-7); }
.page-hero__inner { max-width: var(--container-lg); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.page-hero h1 { font: var(--type-hero-sub); letter-spacing: var(--tracking-tight); color: var(--navy-800); max-width: 24ch; }
.page-hero .lead { font: var(--type-body); font-size: var(--text-lg); color: var(--text-body); max-width: 56ch; }
.page-hero__grid {
  max-width: var(--container-lg); margin: 0 auto;
  display: grid; gap: var(--space-8); align-items: center;
}
/* Subpagina met een sfeerfoto: tekst links, foto rechts. Op smalle schermen
   staat de foto onder de knoppen. .sfeer staat ook op contact. */
.page-hero--sfeer .page-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-8); align-items: center;
}
.page-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.sfeer { margin: 0; width: 100%; }
.sfeer img {
  display: block; width: 100%; height: auto; aspect-ratio: 1024 / 688; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.contact-aside .sfeer { margin-top: var(--space-4); }
@media (max-width: 900px) {
  .page-hero--sfeer .page-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}

/* ---------- kaarten ---------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.card--inverse {
  background: var(--surface-inverse);
  border-color: var(--navy-700);
  box-shadow: var(--shadow-md);
}

/* Kaart over de volle breedte met een kop en een alinea erin */
.callout {
  padding: var(--space-7);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
}
.callout > h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.callout > h3 { font: var(--type-h4); color: var(--text-heading); }
.callout > p { font: var(--type-body); color: var(--text-body); max-width: 58ch; }
.callout.card--inverse > h2,
.callout.card--inverse > h3 { color: var(--cream-100); }
.callout.card--inverse > p { color: var(--inverse-78); }

/* Navy kaart op een navy band: dezelfde kleur als de band, dus lichten we hem
   op met wat cream en zetten we de rand in cream in plaats van navy. */
.on-color .card--inverse {
  background: var(--surface-inverse-raised);
  border-color: var(--border-inverse);
}
/* Eén brede callout op een navy band heeft geen kader nodig: de band is het
   vlak al. Zonder doos lijnt de tekst uit met de rest van de pagina. */
.on-color .callout.card--inverse {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Kort over-ons blok met gezichten (home) */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: center; }
.duo__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 46ch; }
.duo__copy h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--cream-100); }
.duo__copy p { font: var(--type-body); color: var(--inverse-78); margin: 0; }
.duo__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.duo__person { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.duo__person .portrait { max-width: none; border-color: var(--border-inverse); }
.duo__person .placeholder--portrait {
  aspect-ratio: 1/1; display: grid; place-items: center; text-align: center;
  background: rgba(248, 244, 241, .06); border: 1px dashed var(--border-inverse);
  border-radius: var(--radius-md); color: var(--inverse-72); font: var(--type-body-sm);
}
.duo__person figcaption { display: flex; flex-direction: column; gap: var(--space-1); }
.duo__person strong { font: var(--type-h4); letter-spacing: var(--tracking-tight); color: var(--cream-100); font-weight: 700; }
.duo__person span { font: var(--type-mono); letter-spacing: var(--tracking-wide); color: var(--gold-400); }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: var(--space-6); }
  .duo__copy { max-width: none; }
}

/* Feature-kaarten (subpagina's) */
.feature-card {
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.feature-card p { font: var(--type-body-sm); color: var(--text-body); }
.feature-card .icon { color: var(--gold-600); }

/* ---------- proces (navy band) ---------- */
.band { background: var(--surface-inverse); }
.band--deep { background: var(--surface-inverse-deep); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); }
.step { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--border-width-thick) solid var(--inverse-20); }
.step--active { border-top-color: var(--gold-500); }
.step .mono { color: var(--gold-400); }
.step h3 { font: var(--type-h4); color: var(--cream-100); }
.step p { font: var(--type-body-sm); color: var(--inverse-72); }

/* Werkwijze-stappen */
.process-row {
  display: grid; grid-template-columns: 120px minmax(0,1fr) minmax(0,.7fr);
  gap: var(--space-6); align-items: start;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface-card); border: 1px solid var(--border-hairline);
}
.process-row__num { font: var(--weight-bold) var(--text-3xl)/1 var(--font-display); color: var(--gold-500); }
.process-row__body { display: flex; flex-direction: column; gap: var(--space-3); }
.process-row h3 { font: var(--type-h3); color: var(--navy-800); }
.process-row p { font: var(--type-body-sm); color: var(--text-body); }
.process-row .mono { color: var(--text-muted); }
.process-row--inverse { background: var(--surface-inverse); border-color: var(--navy-700); }
.process-row--inverse .process-row__num { color: var(--gold-400); }
.process-row--inverse h3 { color: var(--cream-100); }
.process-row--inverse p { color: var(--inverse-78); }
.process-row--inverse .mono { color: var(--inverse-55); }

/* ---------- prijskaarten (DS PriceCard) ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); align-items: stretch; }
.price-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
@media (hover: hover) {
  .price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
}
.price-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.price-card h3 { font: var(--type-h4); color: var(--text-heading); }
.price-card__price { font: var(--weight-bold) var(--text-3xl)/1 var(--font-display); color: var(--navy-800); }
.price-card__desc { font: var(--type-body-sm); color: var(--text-body); }
.price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.price-card li { display: flex; gap: var(--space-3); font: var(--type-body-sm); color: var(--text-body); }
.price-card li svg { flex: none; margin-top: var(--space-1); stroke: var(--gold-600); }
.price-card--featured { background: var(--surface-inverse); color: var(--cream-100); border-color: var(--navy-700); box-shadow: var(--shadow-sm); }
.price-card--featured h3 { color: var(--cream-100); }
.price-card--featured .price-card__price { color: var(--gold-400); }
.price-card--featured .price-card__desc { color: var(--inverse-78); }
.price-card--featured li { color: var(--inverse-86); }
.price-card--featured li svg { stroke: var(--gold-400); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--type-label); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs);
}
.badge--gold { background: var(--gold-050); color: var(--gold-700); border: 1px solid var(--gold-100); }
.badge--success { background: var(--status-success-bg); color: var(--status-success-fg); border: 1px solid transparent; }

/* ---------- cases-placeholder ---------- */
.cases {
  background: var(--surface-sunken);
  border: 1px solid var(--cream-500); border-radius: var(--radius-md);
  padding: var(--space-7);
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: var(--space-7); align-items: center;
}
.cases__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.cases__copy h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.cases__copy p { font: var(--type-body); color: var(--text-body); max-width: 48ch; }
.cases__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.placeholder {
  aspect-ratio: 4/3;
  border: 1px dashed var(--cream-500); border-radius: var(--radius-md);
  background: var(--paper);
  display: grid; place-items: center; text-align: center;
  font: var(--type-mono); color: var(--ink-500);
  padding: var(--space-3);
}
.placeholder--portrait { aspect-ratio: 1/1; background: var(--cream-300); }
.portrait {
  /* Vierkant en nooit groter dan de bron, anders wordt hij onscherp */
  aspect-ratio: 1/1; width: 100%; max-width: 400px; height: auto;
  justify-self: center; align-self: center;
  object-fit: cover; object-position: 50% 50%;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
}

/* Verhaalblok op een navy band: kop links, tekst rechts */
.story {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-8); align-items: start;
}
.story__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
/* Het verhaalblok staat altijd op een navy band; vandaar de vaste kleur. */
.story__aside h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--cream-100); }
.story__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.story__body p { font: var(--type-body); color: var(--inverse-78); max-width: 58ch; margin: 0; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Vergelijking: zelf doen tegenover laten doen */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.compare__card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6);
  background: var(--paper); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.compare__card--pick {
  background: var(--surface-inverse); border-color: var(--navy-700); box-shadow: var(--shadow-md);
  clip-path: var(--clip-chamfer-tr);
}
.compare__card--pick > .badge { position: absolute; top: var(--space-6); right: var(--space-6); }
.compare__head { display: flex; flex-direction: column; gap: var(--space-2); }
.compare__head h3 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.compare__head p { font: var(--type-body-sm); color: var(--text-body); margin: 0; }
.compare__rows { margin: 0; display: flex; flex-direction: column; }
.compare__row {
  display: grid; grid-template-columns: 40% 1fr; gap: var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline);
}
.compare__row dt { font: var(--type-mono); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.compare__row dd { margin: 0; font: var(--type-body-sm); font-weight: 500; color: var(--navy-800); }
.compare__verdict { font: var(--type-body-sm); color: var(--text-body); margin: auto 0 0; }
.compare__card--pick .compare__head h3,
.compare__card--pick .compare__row dd { color: var(--cream-100); }
.compare__card--pick .compare__head p,
.compare__card--pick .compare__verdict { color: var(--inverse-78); }
.compare__card--pick .kicker { color: var(--gold-400); }
.compare__card--pick .compare__row { border-top-color: var(--navy-700); }
.compare__card--pick .compare__row dt { color: var(--gold-400); }
.compare__note { font: var(--type-body); color: var(--text-body); margin: var(--space-6) 0 0; max-width: 62ch; }

/* Werkgebied */
.regio { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.regio__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 52ch; }
.regio__copy h2 { font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--cream-100); }
/* Links op navy vlakken: goud in plaats van navy, anders onleesbaar */
.on-color a:not(.btn),
.card--inverse a:not(.btn),
.usecase--inverse a:not(.btn),
.cta-band__copy a:not(.btn),
.footer a:not(.btn) { color: var(--gold-400); border-bottom-color: var(--gold-600); }
.on-color a:not(.btn):hover,
.card--inverse a:not(.btn):hover,
.usecase--inverse a:not(.btn):hover,
.cta-band__copy a:not(.btn):hover,
.footer a:not(.btn):hover { color: var(--gold-300); border-bottom-color: var(--gold-400); }

.regio__copy p { font: var(--type-body); color: var(--inverse-78); margin: 0; }
.regio__facts {
  margin: 0; display: grid; gap: var(--space-4);
  padding: var(--space-6); background: rgba(248, 244, 241, .06);
  border: 1px solid var(--border-inverse); border-radius: var(--radius-md);
}
.regio__facts > div { display: flex; flex-direction: column; gap: var(--space-1); }
.regio__facts dt { font: var(--type-mono); letter-spacing: var(--tracking-wide); color: var(--gold-400); }
.regio__facts dd { margin: 0; font: var(--type-h4); letter-spacing: var(--tracking-tight); color: var(--cream-100); }

/* Gebruik van de video: tekst met een feitenpaneel ernaast */
.usecase { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.usecase__copy { display: flex; flex-direction: column; gap: var(--space-4); max-width: 58ch; }
.usecase__copy h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.usecase__copy p { font: var(--type-body); color: var(--text-body); margin: 0; }
.usecase__copy p.usecase__lead { font-size: var(--text-lg); color: var(--navy-700); }
.usecase__facts {
  position: relative; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5); padding: var(--space-6);
  background: var(--paper); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.usecase__facts > div { display: flex; flex-direction: column; gap: var(--space-1); }
.usecase__facts dt { font: var(--type-mono); letter-spacing: var(--tracking-wide); color: var(--gold-700); }
.usecase__facts dd { margin: 0; font: var(--type-h4); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.usecase__facts > .badge { grid-column: 1 / -1; justify-self: start; }
.usecase--inverse .usecase__copy h2 { color: var(--cream-100); }
.usecase--inverse .usecase__copy p { color: var(--inverse-78); }
.usecase--inverse .usecase__copy p.usecase__lead { color: var(--cream-100); }
.usecase--inverse .usecase__facts {
  background: rgba(248, 244, 241, .06); border-color: var(--border-inverse); box-shadow: none;
}
.usecase--inverse .usecase__facts dt { color: var(--gold-400); }
.usecase--inverse .usecase__facts dd { color: var(--cream-100); }
/* Met voorbeeldvideo: feiten onder de tekst, staande video ernaast */
.usecase--media { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
.usecase--media .usecase__facts { margin-top: var(--space-3); }
.usecase__video { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 340px; justify-self: center; }
.usecase__video video {
  display: block; width: 100%; height: auto; aspect-ratio: 9/16;
  background: var(--navy-900); object-fit: cover;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.usecase__video figcaption { font: var(--type-mono); color: var(--text-muted); }
.usecase--inverse .usecase__video video { border-color: var(--border-inverse); }
.usecase--inverse .usecase__video figcaption { color: var(--inverse-72); }

@media (max-width: 900px) {
  .compare { grid-template-columns: 1fr; }
  .compare__card--pick { clip-path: none; }
  .regio, .usecase { grid-template-columns: 1fr; gap: var(--space-6); }
  .regio__copy { max-width: none; }
}

/* ---------- accordion (DS Accordion) ---------- */
.accordion { border-top: 1px solid var(--border-hairline); }
.accordion__item { border-bottom: 1px solid var(--border-hairline); }
.accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) 0;
  background: transparent; border: none; cursor: pointer; text-align: left;
  font: var(--type-h4); color: var(--text-heading);
}
/* Het plusje: twee streepjes; bij openen draait het staande streepje plat
   en wordt het een min. De "+" in de HTML blijft voor wie geen CSS heeft. */
.accordion__trigger span {
  position: relative; flex: none; width: var(--space-4); height: var(--space-4);
  font-size: 0; color: transparent;
}
.accordion__trigger span::before,
.accordion__trigger span::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px);
  height: var(--border-width-thick); border-radius: 1px; background: var(--gold-600);
  transition: transform var(--dur-slow) var(--ease-out);
}
.accordion__trigger span::after { transform: rotate(90deg); }
.accordion__item.open .accordion__trigger span::after { transform: rotate(0deg); }
.accordion__item.open .accordion__trigger span::before { transform: rotate(180deg); }
/* Openen via grid-rijen van 0fr naar 1fr: de hoogte volgt de inhoud, hoe
   lang die ook is. De ruimte onder de tekst zit in ::after, zodat die bij
   een dichte vraag mee wegvalt. */
.accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.accordion__panel > div {
  min-height: 0; overflow: hidden;
  font: var(--type-body); font-size: var(--text-sm); color: var(--text-body); max-width: 62ch;
}
.accordion__panel > div::after { content: ""; display: block; height: var(--space-5); }
.accordion__item.open .accordion__panel { grid-template-rows: 1fr; }

.faq-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--space-8); align-items: start; }

/* ---------- vindbaarheid: zoekresultaten-visual ---------- */
.serp { perspective: 1200px; }
.serp__stack { transform-style: preserve-3d; transform: rotateY(-14deg) rotateX(8deg); display: flex; flex-direction: column; gap: var(--space-3); }
.serp__hit {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform 220ms var(--ease-standard), opacity 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard);
}
.serp__hit--top { border-color: var(--gold-500); box-shadow: var(--shadow-md); transform: translateZ(48px); }
.serp__hit--mid { box-shadow: var(--shadow-xs); transform: translateZ(20px); opacity: .8; }
.serp__hit--low { opacity: .55; }
.serp__hit--top:hover { transform: translateZ(48px) scale(1.025); box-shadow: var(--shadow-lg); }
.serp__hit--mid:hover { transform: translateZ(20px) scale(1.025); opacity: 1; box-shadow: var(--shadow-sm); }
.serp__hit--low:hover { transform: scale(1.025); opacity: .85; box-shadow: var(--shadow-xs); }
.serp__hit .title { font: var(--type-h4); color: var(--navy-800); }
.serp__hit .sub { font: var(--type-body-sm); color: var(--text-muted); }

.seo-row {
  display: grid; grid-template-columns: 180px minmax(0,1fr);
  gap: var(--space-6); padding: var(--space-6) 0;
  border-top: 1px solid var(--border-hairline);
}
.seo-row:last-child { border-bottom: 1px solid var(--border-hairline); }
.seo-row h3 { font: var(--type-h3); color: var(--navy-800); }
.seo-row p { font: var(--type-body); color: var(--text-body); max-width: 62ch; }

/* Drie pijlers (vindbaarheid) + subpagina-blokken */
.pillars { display: flex; flex-direction: column; }
.pillar {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-6); padding: var(--space-7) 0;
  border-top: 1px solid var(--border-hairline);
}
.pillar:last-child { border-bottom: 1px solid var(--border-hairline); }
.pillar__num .mono {
  font-size: var(--text-2xl); color: var(--gold-600);
  letter-spacing: var(--tracking-tight);
}
.pillar__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 62ch; }
.pillar__body h3 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.pillar__body p { font: var(--type-body); color: var(--text-body); margin: 0; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-width: 62ch; }
.checklist--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); }
.checklist li {
  position: relative; padding-left: var(--space-5);
  font: var(--type-body-sm); color: var(--text-body);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: var(--space-2); height: var(--space-2); border-radius: 2px; background: var(--gold-500);
}

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--type-mono); color: var(--text-muted); }
.crumbs a { color: var(--text-muted); border-bottom: none; }
.crumbs a:hover { color: var(--gold-600); }
.crumbs span[aria-current] { color: var(--navy-800); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.prose { display: flex; flex-direction: column; gap: var(--space-4); max-width: 62ch; }
.prose p { font: var(--type-body); color: var(--text-body); margin: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.feature-card h3 { font: var(--type-h4); color: var(--navy-800); }
.feature-card p { font: var(--type-body-sm); color: var(--text-body); margin: 0; }

.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.crosslinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.crosslinks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crosslink {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  border-bottom: 1px solid var(--border-hairline);
  transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.crosslink:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.crosslink h3 { font: var(--type-h3); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.crosslink p { font: var(--type-body-sm); color: var(--text-body); margin: 0; }
.crosslink__cue { font: var(--type-label); color: var(--gold-600); margin-top: auto; }

@media (max-width: 900px) {
  .pillar { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; }
  /* "Zoekwoordonderzoek" past bij 34px niet op een regel van een kolom van
     ~310px. Met afbreking komt er een streepje in plaats van een knip
     middenin het woord. */
  .pillar__body h3 { hyphens: auto; }
  .checklist--compact { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps--3 { grid-template-columns: 1fr; }
  .crosslinks, .crosslinks--3 { grid-template-columns: 1fr; }
}

/* ---------- formulieren (DS Field/Input) ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label { font: var(--type-label); color: var(--text-heading); }
.field > label em { color: var(--gold-600); font-style: normal; }
.field .hint { font: var(--type-body-sm); font-size: var(--text-xs); color: var(--text-muted); }

.input, .select-wrap select, .textarea {
  width: 100%; height: var(--control-h-md);
  padding: 0 var(--space-3);
  font: var(--type-body); font-size: var(--text-sm);
  color: var(--text-heading);
  background: var(--surface-card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition-control);
}
.textarea { height: auto; padding: var(--space-3); line-height: var(--leading-normal); resize: vertical; }
.input:focus, .select-wrap select:focus, .textarea:focus {
  border-color: var(--navy-600);
  box-shadow: var(--focus-ring);
}
.select-wrap { position: relative; display: block; }
.select-wrap select { appearance: none; padding-right: 34px; }
.select-wrap::after {
  content: "\25BE";
  position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--ink-500); font: var(--type-body-sm);
}

.contact-card { padding: var(--space-7); }
.form-note { font: var(--type-body-sm); font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-4); }
.form-note a { color: var(--text-link); }
.field__error { font: var(--type-body-sm); font-size: var(--text-xs); color: var(--status-danger-fg); margin: 0; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--status-danger-fg); }
.btn[disabled] { opacity: .6; cursor: default; }
@media (hover: hover) { .btn[disabled]:hover { transform: none; } }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) 0; animation: b-fade var(--dur-slow) var(--ease-out) both; }
.form-sent h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.form-sent p { font: var(--type-body); color: var(--text-body); max-width: 46ch; }

/* ---------- CTA-band + footer ---------- */
.cta-band { background: var(--surface-inverse); padding: var(--space-9) var(--space-5); }
.cta-band__inner {
  max-width: var(--container-lg); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6);
}
.cta-band__copy h2 { font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--cream-100); }
.cta-band__copy p { font: var(--type-body); color: var(--inverse-78); }
.cta-band__copy { display: flex; flex-direction: column; gap: var(--space-3); max-width: 44ch; }

/* Contactband: dezelfde navy band, met het formulier erin */
.cta-band--form { padding: var(--space-9) var(--space-5); }
.cta-band__inner--form {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: start; gap: var(--space-8);
}
.cta-band__inner--form .cta-band__copy { gap: var(--space-4); padding-top: var(--space-2); }
.cta-band--form .b-eyebrow { color: var(--gold-400); }
.cta-band__promises {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.cta-band__promises li {
  position: relative; padding-left: var(--space-5);
  font: var(--type-body-sm); color: var(--inverse-78);
}
.cta-band__promises li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: var(--space-2); height: var(--space-2); border-radius: 2px; background: var(--gold-500);
}
.cta-band__direct { font: var(--type-body-sm); color: var(--inverse-72); margin: 0; }
.cta-band__direct a { color: var(--gold-400); }
.cta-band__direct a:hover { color: var(--gold-300); }
.contact-card--band {
  padding: var(--space-6); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.contact-card--band .contact-form { gap: var(--space-4); }
.contact-card--band .form-sent { padding: 0; }
.contact-card--band .form-sent h2 { font: var(--type-h3); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.contact-card--band .form-sent p { color: var(--text-body); }
.contact-card--band .form-note { color: var(--text-muted); margin: 0; }
.contact-card--band .field .hint { color: var(--text-muted); }
.contact-card--band .field__error { color: var(--status-danger-fg); }
@media (max-width: 900px) {
  .cta-band--form { padding: var(--space-8) var(--space-5); }
  .cta-band__inner--form { grid-template-columns: 1fr; gap: var(--space-6); }
  .cta-band__inner--form .cta-band__copy { max-width: none; }
  .contact-card--band { padding: var(--space-5); }
}

.footer { background: var(--surface-inverse-deep); padding: var(--space-9) var(--space-5) var(--space-6); border-top: 1px solid var(--border-inverse); }
.footer__grid {
  max-width: var(--container-lg); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr));
  gap: var(--space-7);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.footer__brand img { height: 28px; width: auto; display: block; }
.footer__brand p { font: var(--type-body-sm); color: var(--inverse-65); max-width: 34ch; }
.footer__col { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.footer__col .mono { color: var(--gold-400); margin-bottom: var(--space-1); }
.footer__col a { font: var(--type-body-sm); color: var(--inverse-78); }
.footer__col a:hover { color: var(--gold-400); }
.footer__col .meta { font: var(--type-body-sm); color: var(--inverse-65); }
.footer__bottom {
  max-width: var(--container-lg); margin: var(--space-6) auto 0;
  padding-top: var(--space-5); border-top: 1px solid var(--border-inverse);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}
.footer__bottom span { font: var(--type-mono); color: var(--inverse-65); }
.footer__bottom a { font: var(--type-mono); color: var(--inverse-78); }
.footer__bottom a:hover { color: var(--gold-400); }

/* ---------- zwevende CTA ---------- */
.fab {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 50;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.fab.visible { opacity: 1; transform: none; pointer-events: auto; }
.fab--morph { transition: none; pointer-events: none; }
body.menu-open .fab { opacity: 0; pointer-events: none; }

/* ---------- video: hero-videokader ---------- */
.video-frame {
  position: relative;
  margin: 0; display: flex; flex-direction: column; gap: var(--space-3);
}
/* Aanzetknop zolang de video nog niet is opgehaald (mobiel, zuinige verbinding) */
.video-frame__tap {
  position: absolute; inset: 0 0 auto 0;
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--radius-md);
  font: var(--type-h4); color: var(--cream-100); text-align: left;
}
.video-frame__tap em {
  display: block; font: var(--type-mono); font-style: normal;
  color: var(--inverse-72); margin-top: var(--space-1);
}
.video-frame__tap-icon {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-500); color: var(--navy-900);
  box-shadow: var(--shadow-accent);
  transition: background var(--dur-fast) var(--ease-standard);
}
.video-frame__tap:hover .video-frame__tap-icon { background: var(--gold-400); }
.video-frame__tap:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.video-frame video {
  display: block; width: 100%; height: auto; aspect-ratio: 16/9;
  background: var(--navy-900);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}
.video-frame figcaption { font: var(--type-mono); color: var(--text-muted); }

/* ---------- websites: uitlegvideo bij de vier stappen ---------- */
/* Kop links, video rechts, de stappen eronder. uitleg.js laat de video met
   je scrollwiel meelopen; de sticky opbouw staat onderaan dit bestand. */
.explainer-row {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--space-8); align-items: center;
}
@media (max-width: 900px) {
  .explainer-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
.explainer { position: relative; margin: 0; }
.explainer video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #09304d;
  border: 1px solid var(--inverse-20);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--navy-900) 90%, transparent);
}

/* ---------- over ons: feitenband ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); }
.fact { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-inverse); }
.fact .mono { color: var(--gold-400); }
.fact strong { font: var(--type-h3); color: var(--cream-100); }

/* inverse checklist-band (websites) */
.inverse-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
.inverse-list p { font: var(--type-body-sm); color: var(--inverse-78); padding-top: var(--space-4); border-top: 1px solid var(--border-inverse); }

/* contact-layout */
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-8); align-items: start; }
.contact-aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.contact-aside h1 { font: var(--type-hero-compact); letter-spacing: var(--tracking-tight); color: var(--navy-800); max-width: 20ch; }
.contact-aside > p { font: var(--type-body); color: var(--text-body); max-width: 52ch; }
.contact-aside__direct { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); width: 100%; }
.contact-aside__direct a { font: var(--type-h4); color: var(--navy-800); }
.contact-aside__direct p { font: var(--type-body-sm); color: var(--text-muted); }

/* ---------- juridische pagina's (privacyverklaring) ---------- */
.legal { max-width: var(--container-md); display: flex; flex-direction: column; gap: var(--space-6); }
.legal__intro { font: var(--type-body); font-size: var(--text-lg); color: var(--text-body); }
.legal section { display: flex; flex-direction: column; gap: var(--space-3); }
.legal h2 {
  font: var(--type-h3); letter-spacing: var(--tracking-snug); color: var(--text-heading);
  margin-top: var(--space-3);
}
.legal p { font: var(--type-body); color: var(--text-body); }
.legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.legal li {
  font: var(--type-body); color: var(--text-body);
  position: relative; padding-left: var(--space-5);
}
.legal li::before {
  content: ""; position: absolute; left: 0; top: .59em;
  width: var(--space-2); height: var(--space-2);
  background: var(--gold-500); border-radius: 2px;
}
.legal .clauses {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4); row-gap: var(--space-3);
}
.legal .clauses > .clause__n { font: var(--type-mono); color: var(--gold-600); padding-top: var(--space-1); }
.legal .clauses > p { margin: 0; }
.legal__version {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken); border-left: var(--border-width-thick) solid var(--gold-500);
  border-radius: var(--radius-sm);
}
.legal__version span { font: var(--type-mono); color: var(--text-muted); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .nav, .header__cta { display: none; }
  .menu-toggle { display: grid; }
}
@media (max-width: 900px) {
  .page-hero__grid, .cases, .faq-grid,
  .pricing-grid, .steps, .contact-grid, .facts, .inverse-list,
  .footer__grid, .seo-row, .process-row,
  [data-grid] { grid-template-columns: minmax(0, 1fr) !important; }
  .page-hero { overflow: hidden; }
  :root { --section-y: var(--space-9); --section-y-tight: var(--space-8); }
  .cases { padding: var(--space-5); }
  .contact-card { padding: var(--space-5); }
  .callout { padding: var(--space-5); }
  .process-row { padding: var(--space-5); }
  .facts { gap: var(--space-6); }
}

/* ---------- print ---------- */
@media print {
  .header, .fab, .cta-band, .mobile-menu, .progress { display: none !important; }
  body { background: #fff; }
  a { border-bottom: none; }
  .section, .section--tight { padding: var(--space-4) 0; }
}

/* Home: zelfscrollende voorbeeldsite in plaats van een statische foto */
.sitedemo { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sitedemo__frame {
  display: block; position: relative; text-decoration: none; border-bottom: none;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-hairline); background: var(--surface-card);
  box-shadow: var(--shadow-md);
}
.sitedemo__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; background: var(--cream-300);
  border-bottom: 1px solid var(--border-hairline);
}
.sitedemo__chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--cream-500); }
.sitedemo__chrome em {
  margin-left: 8px; font: var(--type-mono); font-size: 10px; font-style: normal;
  color: var(--text-muted); overflow: hidden; white-space: nowrap;
}
.sitedemo figcaption { font: var(--type-mono); font-size: 11px; color: var(--text-muted); }

a.sitedemo__frame:hover { transform: translateY(-4px) scale(1.012); box-shadow: var(--shadow-lg); }
a.sitedemo__frame:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sitedemo__open {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--navy-800); color: var(--cream-100);
  font: var(--type-mono); font-size: 11px;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
a.sitedemo__frame:hover .sitedemo__open,
a.sitedemo__frame:focus-visible .sitedemo__open { opacity: 1; transform: translateY(0); }
.sitedemo__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-card); }
.sitedemo__stage iframe {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px;
  border: 0; transform-origin: 0 0; pointer-events: none;
  background: var(--surface-card);
}

/* Websites: voorbeeldontwerpen */
.examples { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
.example { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.example img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: var(--radius-md); border: 1px solid var(--border-hairline); background: var(--surface-card);
}
.example figcaption { font: var(--type-body-sm); color: var(--text-body); }
.example figcaption strong { display: block; font-family: var(--font-display); color: var(--navy-800); margin-bottom: var(--space-1); }
@media (max-width: 900px) { .examples { grid-template-columns: 1fr; } }

.plain-list { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.plain-list p { font: var(--type-body-sm); color: var(--text-body); padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); margin: 0; }
.plain-list p:first-child { border-top: none; padding-top: 0; }

/* ---------- feedbackronde september 2026 ---------- */

/* Symmetrische variant: vier kaarten als 2x2 in plaats van 3 + 1 los. */
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* De drie websitepakketten. Bij drie kolommen past "Complete website" plus de
   badge niet op een regel; die kop werd twee regels, waardoor de prijs lager
   stond dan in de andere twee kaarten. De badge absoluut in de hoek zetten loste
   dat op, maar liep op telefoonbreedte over de kop heen. Daarom blijft de badge
   in de flow en krijgen alle drie de koppen dezelfde hoogte: de kop mag wel
   twee regels worden, de prijzen eronder staan altijd op een lijn.
   De hoogte is twee regels van .price-card h3 plus wat lucht. */
.pricing-grid--pakketten .price-card__head { min-height: 3.4rem; align-items: flex-start; }

/* Breed, laag blok onder de prijskaarten, voor aanvragen die buiten de vaste
   pakketten vallen. Tekst links, knop rechts; onder 900px onder elkaar. */
.price-custom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
}
.price-custom__copy { display: flex; flex-direction: column; gap: var(--space-2); max-width: 62ch; }
.price-custom h3 { font: var(--type-h4); color: var(--navy-800); }
.price-custom p { font: var(--type-body-sm); color: var(--text-body); margin: 0; }
/* Vindbaarheid: gratis websitescan klein en stil, de SEO-scan breed en vol. */
.pricing-grid--scans { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
.price-card--quiet { background: transparent; color: var(--inverse-78); border-color: var(--border-inverse); box-shadow: none; }
.price-card--quiet h3 { color: var(--cream-100); }
.price-card--quiet .price-card__price { font-size: var(--text-2xl); color: var(--cream-100); }
.price-card--quiet .price-card__desc, .price-card--quiet li { color: var(--inverse-78); }
.price-card--quiet li svg { stroke: var(--inverse-72); }
@media (hover: hover) { .price-card--quiet:hover { transform: none; box-shadow: none; } }
.price-card--deep { padding: var(--space-7); border-top: 4px solid var(--gold-500); box-shadow: var(--shadow-md); }
.price-card--deep .price-card__price { font-size: var(--text-5xl); }
.price-card--deep .price-card__price small { font: var(--type-mono); font-size: var(--text-xs); color: var(--ink-300); margin-left: var(--space-2); }
.price-card--deep ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); }
.price-card--deep li span { display: flex; flex-direction: column; }
.price-card--deep li b { color: var(--navy-800); font-weight: var(--weight-bold); }
@media (max-width: 900px) {
  .price-card--deep { padding: var(--space-5); }
  .price-card--deep ul { grid-template-columns: minmax(0, 1fr); }
  .price-card--deep .price-card__price { font-size: var(--text-4xl); }
}
.price-note { font: var(--type-body-sm); color: var(--text-body); margin: var(--space-6) 0 0; max-width: 62ch; }
.on-color .price-note { color: var(--inverse-78); }

/* Navy secties: dekking voor de kinderen die .on-color nog niet raakte. */
.on-color .kicker { color: var(--gold-400); }
.on-color .prose p { color: var(--inverse-78); }
.on-color .feature-card h3 { color: var(--cream-100); }
.on-color .feature-card p { color: var(--inverse-78); }

@media (max-width: 900px) {
  .feature-grid--2 { grid-template-columns: 1fr; }
  .price-custom { align-items: flex-start; }
  .price-custom .btn { width: 100%; justify-content: center; }
}

/* ---------- verbeterronde oktober 2026 ---------- */

/* Paginawissels: de ene pagina vloeit in de volgende, zonder JavaScript.
   Browsers zonder ondersteuning wisselen gewoon zoals altijd. De header
   heeft een eigen view-transition-name en blijft dus staan. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 320ms var(--ease-standard) both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease-out) both; }
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* De schuine hoek uit het logo als merkteken: linksboven en rechtsonder, en
   alleen op de donkere banden. */
:root { --cut: 56px; }
main > section.band,
main > section.band--deep,
.chamfer {
  clip-path: polygon(0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
@media (max-width: 759px) { :root { --cut: 32px; } }

/* Scrollanimaties in CSS waar de browser dat kan. site.js slaat zijn eigen
   reveal dan over (zie cssReveal), zodat het niet dubbel loopt; elders blijft
   .reveal met de IntersectionObserver de terugval. Staat iets bij het laden
   al in beeld, dan is de animatie op dat moment al klaar. */
@supports (animation-timeline: view()) {
  .js .reveal,
  .js .reveal.in-view {
    opacity: 1; transform: none; transition: none;
    animation: b-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}
@keyframes b-reveal { from { opacity: 0; transform: translateY(30px); } }

/* Zwevende labels: het label staat in het veld en schuift omhoog bij focus
   of zodra er iets is ingevuld. Werkt via placeholder=" " en
   :placeholder-shown, dus zonder JavaScript. Het label staat in de HTML ná
   het veld, anders kan de +-combinator het niet vinden. */
.field--float { position: relative; }
.field--float > .input,
.field--float > .textarea,
.field--float .select-wrap select {
  height: calc(var(--control-h-md) + var(--space-3));
  padding: var(--space-5) var(--space-3) var(--space-1);
}
.field--float > .textarea { height: auto; padding-top: var(--space-6); }
.field--float > label {
  position: absolute; left: calc(var(--space-3) + 1px); top: var(--space-4);
  font: var(--type-body); font-size: var(--text-sm); color: var(--text-muted);
  pointer-events: none; transform-origin: left top;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-standard);
}
.field--float > .input:focus + label,
.field--float > .input:not(:placeholder-shown) + label,
.field--float > .textarea:focus + label,
.field--float > .textarea:not(:placeholder-shown) + label,
.field--select > label {
  transform: translateY(calc(-1 * var(--space-3))) scale(.75);
  color: var(--gold-700);
}
.field--float > label em { color: var(--gold-600); font-style: normal; }
/* De placeholder is een spatie; zichtbaar hoeft hij nooit te zijn. */
.field--float ::placeholder { color: transparent; }

/* Na verzenden tekent zich een groen vinkje. */
.sent-check { display: block; }
.sent-check circle { fill: none; stroke: var(--status-success-fg); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: b-draw 700ms var(--ease-out) forwards; }
.sent-check path { fill: none; stroke: var(--status-success-fg); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: b-draw 450ms var(--ease-out) 550ms forwards; }
@keyframes b-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sent-check circle, .sent-check path { stroke-dashoffset: 0; }
}

/* Motus als opname in hetzelfde browserkader als voorheen de iframe. */
.sitedemo__stage video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top; display: block;
}

/* ---------- home ---------- */

/* Band met branches: rustig doorlopend, stopt bij hover, zachte randen. */
.marquee {
  overflow: hidden;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-hairline);
  -webkit-mask: linear-gradient(90deg, transparent, var(--navy-900) 8%, var(--navy-900) 92%, transparent);
  mask: linear-gradient(90deg, transparent, var(--navy-900) 8%, var(--navy-900) 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: b-marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  display: flex; align-items: center; gap: var(--space-8);
  padding: 0 var(--space-5);
  white-space: nowrap;
  font: var(--weight-bold) clamp(var(--text-md), 1.5vw, var(--text-lg))/1 var(--font-display);
  letter-spacing: var(--tracking-tight); color: var(--navy-800);
}
.marquee span::after {
  content: ""; width: var(--space-2); height: var(--space-2);
  background: var(--gold-500); transform: rotate(45deg);
  margin-right: calc(-1 * var(--space-5));
}
@keyframes b-marquee { to { transform: translateX(-50%); } }

/* "Dennis en Pim" op crème in plaats van op navy */
.duo--light .duo__copy h2 { color: var(--text-heading); }
.duo--light .duo__copy p { color: var(--text-body); }
.duo--light .duo__person .portrait { border-color: var(--border-hairline); }
.duo--light .duo__person strong { color: var(--navy-800); }
.duo--light .duo__person span { color: var(--gold-700); }

/* Motus-blok: tekst links, de opname in een licht gekanteld browserkader dat
   rechtzet bij hover. */
.case { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: center; }
.case__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.case__copy h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--cream-100); }
.case__copy p { font: var(--type-body); color: var(--inverse-78); max-width: 48ch; }
.browser {
  display: block; border-radius: var(--radius-md); overflow: hidden;
  background: var(--paper); border-bottom: 0;
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--navy-900) 90%, transparent);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform 600ms var(--ease-out);
}
.browser:hover { transform: none; }
.browser__bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 var(--space-3);
  background: var(--cream-300); border-bottom: 1px solid var(--border-hairline);
}
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-200); }
.browser__bar em { font: var(--type-mono); font-size: var(--text-2xs); font-style: normal; color: var(--text-muted); margin-left: var(--space-2); }
.browser__screen { display: block; aspect-ratio: 960/538; background: var(--paper); }
.browser__screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 900px) {
  .case { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .browser { transform: none; }
}

/* De gouden lijn langs de hoofdpagina's (main.main--line), alleen op brede
   schermen. Hij begint direct onder de hero (data-line-start). site.js tekent
   het pad en schuift stroke-dashoffset mee met de scroll. */
.main--line { position: relative; }
.boostline {
  display: none; position: absolute; z-index: 1; pointer-events: none;
  left: 0; overflow: visible;
}
.boostline path { fill: none; stroke: var(--gold-400); stroke-width: 2; stroke-linecap: round; opacity: .8; }
@media (min-width: 1200px) { .boostline.is-on { display: block; } }

/* Hoofdpagina's: de lijn eindigt tegen "Tijd om te boosten?" (data-line-touch).
   "Boosten" staat er in de letters van het logo (inline svg, uit het logo
   overgetrokken, met het gouden knoopje tussen de o's). Zodra de lijn de kop
   raakt (site.js zet .is-lit) trekt er één keer een gouden gloed van links
   naar rechts over de kop: over "Tijd om te" als kopie van de tekst uit
   data-glow in ::after, over het logowoord als band binnen de svg. Daarna
   kantelt "Boosten" schuin, blijft het goud en vonkt het af en toe even,
   zoals een lamp die aanslaat. De tijden van de twee banden horen bij elkaar. */
.line-touch { position: relative; align-self: flex-start; }
.line-touch::after {
  content: attr(data-glow);
  content: attr(data-glow) / "";
  position: absolute; inset: 0; pointer-events: none;
  color: transparent;
  background: linear-gradient(100deg, transparent 30%, rgb(239 201 127 / .9) 44%, var(--gold-100) 50%, rgb(239 201 127 / .9) 56%, transparent 70%) no-repeat;
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgb(224 172 72 / .55));
  opacity: 0;
}
.line-touch.is-lit::after { animation: touch-sweep 1.4s linear both; }
.line-touch__word {
  display: inline-block; margin: 0 .03em 0 .04em;
  color: var(--cream-100);
  transform-origin: 50% 100%;
  transition: color .5s var(--ease-standard) .75s, transform .7s var(--ease-out) 1.3s, margin .7s var(--ease-out) 1.3s, filter .6s var(--ease-standard) .75s;
}
.line-touch__logo { display: block; height: .7em; width: auto; aspect-ratio: 3480 / 680; overflow: visible; }
.line-touch__letters { fill: currentColor; }
.line-touch__knot { fill: var(--gold-500); transition: fill .5s var(--ease-standard) .75s; }
.line-touch__band { opacity: 0; }
.line-touch.is-lit .line-touch__band { animation: touch-band .55s linear .65s both; }
.line-touch.is-lit .line-touch__word {
  color: var(--gold-400);
  transform: skewX(-12deg);
  margin-right: .14em;
  filter: drop-shadow(0 0 14px rgb(224 172 72 / .3));
  animation: touch-flicker 6.5s linear 2.6s infinite;
}
.line-touch.is-lit .line-touch__knot { fill: var(--gold-100); }
@keyframes touch-sweep {
  0% { opacity: 1; background-position: 100% 0; }
  80% { opacity: 1; }
  100% { opacity: 0; background-position: 0% 0; }
}
@keyframes touch-band {
  0% { opacity: 1; transform: translateX(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(5080px); }
}
@keyframes touch-flicker {
  0%, 9%, 100% { color: var(--gold-400); filter: drop-shadow(0 0 14px rgb(224 172 72 / .3)); }
  1% { color: var(--gold-600); filter: none; }
  2% { color: var(--gold-300); filter: drop-shadow(0 0 16px rgb(239 201 127 / .75)); }
  3% { color: var(--gold-500); filter: drop-shadow(0 0 4px rgb(224 172 72 / .2)); }
  4.5% { color: var(--gold-100); filter: drop-shadow(0 0 20px rgb(239 201 127 / .85)); }
  6% { color: var(--gold-300); filter: drop-shadow(0 0 16px rgb(224 172 72 / .5)); }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .line-touch.is-lit::after, .line-touch.is-lit .line-touch__band { animation: none; }
  .line-touch.is-lit .line-touch__word { animation: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .browser { transform: none; }
}

/* ---------- websites: prijscalculator ---------- */
.calc {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-hairline); background: var(--surface-card);
  box-shadow: var(--shadow-md);
}
.calc__in { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.calc__title { font: var(--type-h3); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.calc__row { display: flex; flex-direction: column; gap: var(--space-2); }
.calc__lbl { display: flex; justify-content: space-between; align-items: baseline; font: var(--type-h4); color: var(--navy-800); padding: 0; }
.calc__lbl output { font-size: var(--text-xl); color: var(--gold-600); }
.calc__ticks { position: relative; height: 1.4em; font-size: var(--text-2xs); color: var(--ink-300); }
/* Onder de juiste stand van de schuif; de duim is 24 px breed. */
.calc__ticks span { position: absolute; left: calc(12px + (100% - 24px) * var(--at)); transform: translateX(-50%); }
.calc__opts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.calc__opts legend { margin-bottom: var(--space-3); }
.chk { display: flex; gap: var(--space-3); align-items: center; cursor: pointer; font: var(--type-body); font-size: var(--text-sm); color: var(--text-body); }
.chk input {
  appearance: none; flex: none; width: 22px; height: 22px; margin: 0;
  border: 1.5px solid var(--ink-300); border-radius: var(--radius-xs);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.chk input:checked { background: var(--navy-800); border-color: var(--navy-800); }
.chk input:checked::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid var(--gold-400); border-bottom: 2px solid var(--gold-400);
  transform: translateY(-1px) rotate(-45deg);
}
.chk input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Schuif in huisstijl; --p zet site.js op de gevulde fractie. */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --p: 50%; margin: 0; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-500) var(--p), var(--navy-100) var(--p)); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-500) var(--p), var(--navy-100) var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--navy-800); border: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--navy-200), var(--shadow-md); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--navy-800); border: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--navy-200); }
.range:focus-visible { outline: none; box-shadow: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

.calc__out { background: var(--surface-inverse); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.calc__route { color: var(--gold-400); min-height: 1.5em; }
.calc__total {
  display: flex; align-items: baseline; gap: var(--space-1);
  font: var(--weight-bold) var(--text-5xl)/1 var(--font-display);
  letter-spacing: var(--tracking-tight); color: var(--cream-100);
  font-variant-numeric: tabular-nums;
}
.calc__total small { font-size: var(--text-xs); color: var(--inverse-72); margin-left: var(--space-3); }
.calc__sum { display: contents; }
.calc__custom { font-size: var(--text-3xl); }
.calc__monthly { font: var(--type-body-sm); color: var(--inverse-78); }
.calc__lines { list-style: none; margin: var(--space-1) 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.calc__lines li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-2); border-top: 1px solid var(--border-inverse);
  font: var(--type-body-sm); color: var(--inverse-78);
}
.calc__lines li span:last-child { font-family: var(--font-mono); color: var(--cream-100); white-space: nowrap; }
.calc__lines li span.calc__note { font-family: inherit; }
.calc__fine { font: var(--type-body-sm); font-size: var(--text-xs); color: var(--inverse-72); margin: 0; }
@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc__in, .calc__out { padding: var(--space-5); }
  .calc__total { font-size: var(--text-4xl); }
}

/* Prijskaarten die reageren: optillen bij hover, en bij het uitgelichte
   pakket groeit de schuine hoek rechtsboven. */
@property --c { syntax: "<length>"; inherits: false; initial-value: 28px; }
@media (hover: hover) {
  .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.price-card--featured {
  --c: 28px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), --c var(--dur-slow) var(--ease-out);
}
.price-card--featured:hover { --c: 44px; }

/* ---------- vindbaarheid ---------- */

/* Pijlers: het nummer blijft staan terwijl je leest, en er loopt een gouden
   ring omheen vol terwijl je door die pijler scrolt. Alleen CSS; zonder
   ondersteuning voor scroll-timelines is de ring gewoon vol. */
.pillar__num { position: relative; width: 64px; height: 64px; display: grid; place-items: center; align-self: start; }
.pillar__num svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pillar__num circle { fill: none; stroke: var(--border-hairline); stroke-width: 3; }
.pillar__num .pillar__ring { stroke: var(--gold-500); stroke-dasharray: 164; stroke-dashoffset: 0; stroke-linecap: round; }
.pillar__num .mono { font-size: var(--text-lg); }
@media (min-width: 901px) {
  .pillar__num { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
@supports (animation-timeline: view()) {
  .pillar { view-timeline: --pijler block; }
  .pillar__ring { animation: b-ring linear both; animation-timeline: --pijler; animation-range: entry 30% contain 40%; }
}
@keyframes b-ring { from { stroke-dashoffset: 164; } to { stroke-dashoffset: 0; } }

/* Beloftes die worden doorgestreept zodra ze in beeld komen. */
.nopes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.nope { padding-top: var(--space-5); border-top: 1px solid var(--border-inverse); display: flex; flex-direction: column; gap: var(--space-3); }
.nope__claim { font: var(--type-h3); letter-spacing: var(--tracking-tight); color: var(--cream-100); }
.nope__claim s {
  text-decoration: none;
  background: linear-gradient(var(--gold-500), var(--gold-500)) no-repeat 0 58% / 100% 3px;
}
.js .nope__claim s { background-size: 0% 3px; transition: background-size 900ms var(--ease-out); }
.js .nope.in-view .nope__claim s { background-size: 100% 3px; }
.nope p:last-child { font: var(--type-body-sm); color: var(--inverse-78); }
@media (max-width: 900px) { .nopes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .js .nope__claim s { background-size: 100% 3px; } }

/* ---------- automatisering ---------- */

/* Rekenhulp klein rechtsboven in de hero: per taak een schuif voor het
   aantal per week, plus het uurtarief. De uitkomst staat in een donker vlak
   in de kaart. Taken en minuten per keer staan in site.js (TAKEN); de kleine
   lettertjes in automatisering.html noemen dezelfde minuten. */
.page-hero__grid--calc { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: start; }
.tcalc {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.tcalc__title { font: var(--type-h3); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
.tcalc__rows { display: flex; flex-direction: column; gap: var(--space-4); }
.tcalc__row { display: flex; flex-direction: column; gap: var(--space-1); }
/* Het uurtarief staat buiten de rij die site.js vult, maar hoort in hetzelfde ritme. */
.tcalc > .tcalc__row { margin-top: calc(var(--space-4) - var(--space-5)); }
.tcalc__lbl { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font: var(--type-body-sm); color: var(--navy-800); }
.tcalc__lbl output { font: var(--type-label); font-size: var(--text-sm); color: var(--gold-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcalc__out {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
  margin-top: var(--space-2); padding: var(--space-5);
  border-radius: var(--radius-md); background: var(--surface-inverse);
}
.tcalc__out > div { display: flex; flex-direction: column; gap: var(--space-2); }
.tcalc__big { font: var(--weight-bold) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--cream-100); font-variant-numeric: tabular-nums; }
.tcalc__out .mono { font-size: var(--text-2xs); line-height: 1.5; color: var(--inverse-72); }
.tcalc__fine { font: var(--type-body-sm); font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
@media (max-width: 900px) {
  .tcalc { padding: var(--space-5); }
}

/* Stappen op je scrollwiel ("Zo gaat het" op automatisering). site.js zet
   .steps--scroll en schuift het gouden streepje (::before, via --bx/--by/--bw)
   mee met de scroll van stap 1 naar stap 4; de stap eronder krijgt
   step--active en licht op. Zonder JavaScript of bij reduced motion blijft
   stap 1 gewoon goud. */
.steps--scroll { position: relative; }
.steps--scroll::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 1;
  width: var(--bw, 0); height: var(--border-width-thick);
  background: var(--gold-500);
  transform: translate(var(--bx, 0), var(--by, 0));
}
.steps--snap::before { transition: transform 450ms var(--ease-out); }
.steps--scroll .step--active { border-top-color: var(--inverse-20); }
.steps--scroll .step h3, .steps--scroll .step p { transition: color 300ms var(--ease-standard); }
.steps--scroll .step:not(.step--active) h3 { color: var(--inverse-65); }
.steps--scroll .step:not(.step--active) p { color: var(--inverse-50); }

/* De keten op je scrollwiel. Zonder JavaScript of bij reduced motion geen
   aanloopbaan maar het stilstaande overzicht; keten.js zet .keten--live. */
.keten__still { display: none; padding: var(--section-y) var(--gutter); }
.keten__still img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.keten:not(.keten--live) .keten__runway { display: none; }
.keten:not(.keten--live) .keten__still { display: block; }
.keten--live .keten__runway { height: 300vh; }
.keten__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-6);
  padding-top: var(--header-h);
}
.keten__head h2 { font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--cream-100); min-height: 1.2em; transition: opacity var(--dur-base) var(--ease-standard); }
.keten__head { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--gutter); }
.keten__track {
  position: relative; width: 100%; max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5);
  transition: transform 600ms var(--ease-out);
}
.keten__line { position: absolute; left: var(--gutter); right: var(--gutter); top: 15px; height: 2px; background: var(--border-inverse); }
.keten__line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold-500); }
.keten__line i::after {
  content: ""; position: absolute; right: -7px; top: -6px; width: 14px; height: 14px;
  background: var(--gold-400); transform: rotate(45deg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold-400) 80%, transparent);
}
.keten__cap { color: var(--inverse-65); text-align: center; padding: 0 var(--gutter); }

.station {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  opacity: .35; transform: translateY(12px) scale(.97);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.station.is-on { opacity: 1; transform: none; }
.station.is-done { opacity: .7; transform: none; }
.station__lbl { position: relative; z-index: 1; align-self: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); background: var(--navy-700); color: var(--cream-100); }
.station.is-on .station__lbl { background: var(--gold-500); color: var(--navy-900); }
.mini {
  min-height: 220px; padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--paper); display: flex; flex-direction: column; gap: var(--space-2);
  font: var(--type-body-sm); font-size: var(--text-xs); color: var(--ink-700);
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--navy-900) 80%, transparent);
}
.mini b { font: var(--type-label); color: var(--navy-800); }
.mini > span { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-hairline); }
.mini em { font-style: normal; color: var(--text-muted); }
.mini .mini__stack { flex-direction: column; gap: 2px; }
.mini .mini__file { border: 1px dashed var(--navy-200); border-radius: var(--radius-sm); padding: var(--space-2); color: var(--navy-600); }
.mini .mini__tot { font-weight: 700; color: var(--navy-800); }
.mini .mini__meta { border: 0; padding: 0; color: var(--text-muted); }
.mini p { margin: 0; }
.mini .mini__ok { justify-content: center; border: 0; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--status-success-bg); color: var(--status-success-fg); font-weight: 600; }
.mini .mini__new { border: 1px solid var(--gold-300); border-radius: var(--radius-sm); padding: var(--space-2); background: var(--gold-050); }
.station.is-on .mini__ok { animation: b-stamp 500ms var(--ease-out) 300ms both; }
@keyframes b-stamp { from { transform: scale(1.3); opacity: 0; } }

@media (max-width: 759px) {
  .keten__track { display: flex; gap: var(--space-4); padding: 0 calc(50% - 130px); }
  .station { flex: 0 0 260px; }
  .keten__line { left: 0; right: 0; }
  .keten__head h2 { font: var(--type-h2); }
}

/* ---------- video: foto's worden één video ---------- */
.alive__photos { display: none; }
.alive__cap { display: none; }
.alive { padding: 0 var(--gutter) var(--section-y-tight); }
.alive__frame { max-width: var(--container-lg); margin: 0 auto; }
.alive--live { padding: 0; }
.alive--live .alive__runway { height: 260vh; }
.alive--live .alive__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center; padding: var(--header-h) var(--gutter) 0;
}
.alive--live .alive__photos { display: block; position: absolute; inset: 0; pointer-events: none; }
.alive__photos img {
  position: absolute; left: 50%; top: 52%;
  width: min(34vw, 340px); aspect-ratio: 16/9; object-fit: cover;
  border: 6px solid var(--paper); border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg); will-change: transform, opacity;
}
.alive--live .alive__frame { position: relative; width: min(88vw, 960px); will-change: transform, opacity; }
.alive--live .alive__cap {
  display: flex; justify-content: center; gap: var(--space-3);
  position: absolute; left: 0; right: 0; bottom: var(--space-6); margin: 0;
  color: var(--ink-300);
}
.alive__cap span { transition: color var(--dur-slow) var(--ease-standard); }
.alive__cap span.is-on { color: var(--navy-800); }
.alive__play {
  position: absolute; left: var(--space-5); top: var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 0; border-radius: var(--radius-pill); cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--navy-900) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream-100); font: var(--type-label);
}
.alive__play svg { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--gold-500); color: var(--navy-900); }
.alive__play span { display: flex; flex-direction: column; }
.alive__play em { font-style: normal; font-size: var(--text-2xs); color: var(--inverse-72); }
.alive__play:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 759px) {
  .alive__photos img { width: 44vw; }
  .alive--live .alive__frame { width: 92vw; }
}

/* ---------- contact: aanvraag in drie stappen ---------- */
.wizard__prog { height: 4px; border-radius: 2px; background: var(--cream-300); overflow: hidden; }
.wizard__prog i { display: block; height: 100%; background: var(--gold-500); transform: scaleX(.333); transform-origin: left; transition: transform 500ms var(--ease-out); }
.wizard__count { color: var(--text-muted); margin-top: calc(-1 * var(--space-3)); }
.wizard__step { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.wizard__step legend { font: var(--type-h3); letter-spacing: var(--tracking-tight); color: var(--navy-800); margin-bottom: var(--space-4); padding: 0; }
.wizard__step legend:focus { outline: none; }
.wizard--live .wizard__step.is-on { animation: b-slide-in 420ms var(--ease-out) both; }
.wizard--live .wizard__step.is-on.is-back { animation-name: b-slide-back; }
@keyframes b-slide-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes b-slide-back { from { opacity: 0; transform: translateX(-28px); } }
/* Zonder JavaScript: alle stappen onder elkaar, gewoon één formulier. */
.wizard:not(.wizard--live) .wizard__step[hidden] { display: flex !important; }
.wizard:not(.wizard--live) .wizard__prog,
.wizard:not(.wizard--live) .wizard__count,
.wizard:not(.wizard--live) [data-wizard-next] { display: none; }
.wizard:not(.wizard--live) [data-wizard-submit][hidden] { display: inline-flex !important; }
.wizard__nav { display: flex; justify-content: space-between; gap: var(--space-3); }
.wizard__nav [data-wizard-next],
.wizard__nav [data-wizard-submit] { margin-left: auto; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tile {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); cursor: pointer;
  border: 1.5px solid var(--border-hairline); border-radius: var(--radius-md);
  font: var(--type-label); font-size: var(--text-md); color: var(--navy-800);
  transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.tile:hover { border-color: var(--navy-200); }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile__icon { flex: none; color: var(--gold-600); }
.tile:has(input:checked) { border-color: var(--gold-500); background: var(--gold-050); }
.tile:has(input:checked)::after {
  content: ""; position: absolute; right: var(--space-4); top: 50%;
  width: 12px; height: 7px; margin-top: -6px;
  border-left: 2px solid var(--gold-600); border-bottom: 2px solid var(--gold-600); transform: rotate(-45deg);
}
.tile:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.tile--wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  border: 1px solid var(--navy-100); background: var(--paper); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); cursor: pointer;
  font: var(--type-body-sm); font-weight: 500; color: var(--navy-700);
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.chip:hover, .chip[aria-pressed="true"] { background: var(--navy-800); color: var(--cream-100); border-color: var(--navy-800); }

/* E-mailadres met een kopieerknop ernaast */
.copymail { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.copymail__btn { height: var(--control-h-sm); padding: 0 var(--space-4); }

/* Knoppenrij op de foutpagina's */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); width: 100%; }

/* ---------- 404: een B in 3D ----------
   Veertien lagen van het logo achter elkaar (translateZ) maken er een blok
   van. Hij valt bij het laden de pagina in en draait mee met de muis; zonder
   muis draait hij rustig heen en weer. site.js bouwt de lagen. */
.nf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--space-8); align-items: center; }
.b3d { position: relative; height: 380px; perspective: 900px; display: grid; place-items: center; }
.b3d__obj {
  position: relative; width: 240px; height: 240px; transform-style: preserve-3d;
  transform: rotateX(var(--bx, 8deg)) rotateY(var(--by, -24deg));
  transition: transform 500ms var(--ease-out);
}
.b3d__obj img { position: absolute; inset: 0; width: 100%; height: 100%; }
.b3d.is-drop .b3d__obj { animation: b-drop 1.3s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes b-drop {
  0% { translate: 0 -380px; rotate: 0 0 1 -30deg; }
  60% { translate: 0 0; rotate: 0 0 1 6deg; }
  80% { rotate: 0 0 1 -3deg; }
  100% { translate: 0 0; rotate: 0 0 1 0deg; }
}
.b3d__shadow {
  position: absolute; bottom: 40px; left: 50%; width: 200px; height: 24px; margin-left: -100px;
  border-radius: 50%;
  background: radial-gradient(color-mix(in srgb, var(--navy-900) 28%, transparent), transparent 70%);
}
@media (max-width: 900px) {
  .nf { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .b3d { height: 280px; order: -1; }
  .b3d__obj { width: 180px; height: 180px; }
}

/* ---------- websites: de uitlegvideo op je scrollwiel ---------- */
/* uitleg.js zet .uitleg--live: de sectie wordt een aanloopbaan en het toneel
   blijft staan terwijl de video met je scroll meeloopt. Zonder die klasse
   (reduced motion, spaarstand, een te laag scherm, geen JavaScript) is het
   een gewone sectie met de poster en de vier stappen. Staat onderaan omdat
   de reveal-animatie van de stappen hier uit moet: die zet anders de
   doorzichtigheid terug op 1. */
.uitleg--live { padding-top: 0; padding-bottom: 0; height: calc(300vh - var(--header-h-small)); }
.uitleg--live .uitleg__stage {
  position: sticky; top: var(--header-h-small);
  height: calc(100vh - var(--header-h-small));
  display: flex; flex-direction: column; justify-content: center;
}
.uitleg--live .steps .step {
  animation: none; transform: none; opacity: 1;
  transition: opacity 300ms var(--ease-standard), border-top-color 300ms var(--ease-standard);
}
.uitleg--live .steps .step:not(.step--active) { opacity: .45; }
/* Op smalle schermen passen vier stappen onder elkaar niet op het toneel:
   dan staat alleen de actieve er, op dezelfde plek. */
@media (max-width: 900px) {
  .uitleg--live .steps { display: grid; }
  .uitleg--live .steps .step { grid-area: 1 / 1; }
  .uitleg--live .steps .step:not(.step--active) { opacity: 0; }
  /* Onderin ruimte voor de zwevende knop, en krappere tussenruimtes (de
     container heeft zijn gap inline, vandaar !important). */
  .uitleg--live .uitleg__stage { padding-bottom: 76px; }
  .uitleg--live .uitleg__stage > .container { gap: var(--space-5) !important; }
  .uitleg--live .explainer-row { gap: var(--space-4); }
}
@media (min-width: 901px) {
  body.uitleg-pinned .fab { opacity: 0; pointer-events: none; }
}
/* Lage telefoon: de inleidende zin eruit, dan past het toneel nog. */
@media (max-width: 900px) and (max-height: 740px) {
  .uitleg--live .section-heading p { display: none; }
}

/* ---------- automatisering: "Zo gaat het" blijft staan ---------- */
/* site.js zet .stappen--live: net als de keten erboven blijft de band staan
   terwijl je scrolt, en het gouden streepje springt van stap naar stap. Past
   het toneel niet in het scherm, of staat reduced motion aan, dan is het een
   gewone sectie. Op smalle schermen staat alleen de actieve stap er en
   loopt het streepje over een kwart van de breedte per stap. */
.stappen--live { padding-top: 0; padding-bottom: 0; height: calc(250vh - var(--header-h-small)); }
.stappen--live .stappen__stage {
  position: sticky; top: var(--header-h-small);
  height: calc(100vh - var(--header-h-small));
  display: flex; flex-direction: column; justify-content: center;
}
.stappen--live .steps .step { animation: none; transform: none; opacity: 1; }
@media (max-width: 900px) {
  .stappen--live .steps { display: grid; }
  .stappen--live .steps .step { grid-area: 1 / 1; transition: opacity 300ms var(--ease-standard); }
  .stappen--live .steps .step:not(.step--active) { opacity: 0; }
  .stappen--live .stappen__stage { padding-bottom: 76px; }
}