/* Gedeelde artboard-vormgeving naar input/20261013 stijlinput.ai.
   Fontnamen uit Adobe Fonts-project qhu4fmi. De knop-SVG's zijn de
   oorspronkelijke Illustrator-contouren met het 3%-warp-effect. */

/* Fixed vector symbols avoid platform-dependent emoji rendering on mobile. */
.site-design .ui-symbol {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: var(--ui-symbol-mask) center / contain no-repeat;
  mask: var(--ui-symbol-mask) center / contain no-repeat;
  --ui-symbol-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.site-design .ui-symbol-left { rotate: 180deg; }
.site-design .ui-symbol-down { rotate: 90deg; }
.site-design .ui-symbol-up { rotate: -90deg; }
.site-design .ui-symbol-external { rotate: -45deg; }
.site-design .ui-symbol-copy {
  --ui-symbol-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='8' width='12' height='12' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15 4H6a2 2 0 0 0-2 2v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

@font-face {
  font-family: "Google Sans Flex Reviews";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/google-sans-flex-latin-400-600.woff2") format("woff2");
}

.site-design {
  --ink: #171717;
  --ink-soft: #3c3c38;
  --marker-blue: #171717;
  --marker-yellow: #ffda72;
  --paper: #fff;
  --paper-warm: #fff;
  --canvas: #fff;
  --line: #17171726;
  --sketch-x: url("../img/handdrawn-dashes-horizontal.svg");
  --sketch-y: url("../img/handdrawn-dashes-vertical.svg");
  --paper-blue: #edf3f8;
  --section-space: clamp(4rem, 7vw, 7rem);
  --rule-x: url("../img/handdrawn-rule-horizontal.svg");
  --rule-y: url("../img/handdrawn-rule-vertical.svg");
  --body-size: clamp(1.35rem, 1.7vw, 1.55rem);
  --font-body: "felt-tip-woman", "Felt Tip Woman", "Caveat", cursive;
  --font-hand: "felt-tip-woman", "Felt Tip Woman", "Caveat", cursive;
  --font-heading: "moonblossom", "MOONBLOSSOM", "Caveat", cursive;
  --font-label: "corsairpe", "Corsair PE", "Caveat", cursive;
  --font-marker: "marker-aid", "Caveat", cursive;
  --font-interface: "Poppins", Arial, sans-serif;
  --container: 76.25rem;
  color: var(--ink);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.65;
}

/* Wit papier, met geel als markering in plaats van een gekleurd canvas. */
.site-design main { background: #fff; }
.site-design main > section { overflow: clip; }
.site-design .section {
  padding-block: clamp(4rem, 7vw, 7rem);
  background: #fff;
}
.site-design .section::before,
.site-design .section::after { display: none; }
.site-design :is(h2, h3, h4) { color: var(--ink); font-weight: 400; letter-spacing: 0; }
.site-design h2 {
  max-width: 28ch;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.9rem);
  line-height: 1.18;
}
.site-design h3 { font-family: var(--font-label); font-size: 1.7rem; line-height: 1.2; }
.site-design :is(h2, h3)::after { display: none; }
.site-design .eyebrow {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-bottom: .9rem;
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-label);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.site-design .section :is(.section-heading, .faq-layout, .split-layout) .eyebrow {
  padding: .12rem .3rem;
  border-radius: 0;
  background: linear-gradient(178deg, transparent 10%, var(--marker-yellow) 10% 92%, transparent 92%);
}
.site-design .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: 2rem 5rem;
  max-width: none;
  margin-bottom: 3rem;
  text-align: left;
}
.site-design .section-heading > p {
  max-width: 32rem;
  margin: 0;
  font-size: var(--body-size);
  line-height: 1.65;
}
.site-design .text-link {
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
.site-design a { text-underline-offset: .2em; }
.site-design :is(.text-link, .home-team-story-page-link) .text-link-label { min-width: 0; transform: none; }
.site-design .text-link-ink {
  background-image: linear-gradient(178deg, transparent 10%, var(--marker-yellow) 10% 92%, transparent 92%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 220ms ease-out;
}
.site-design :is(.text-link, .home-team-story-page-link, .marker-link):is(:hover, :focus-visible) .text-link-ink { background-size: 100% 100%; transform: none; }
.site-design .home-team-story-page-link:is(:hover, :focus-visible) { color: var(--ink); }
.site-design .home-team-story-disclosure summary:is(:hover, :focus-visible) .text-link-ink { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  .site-design .text-link-ink { transition: none; }
}
.site-design :focus-visible { outline: 3px solid #876100; outline-offset: 5px; }

/* Het menu volgt het artboard en krijgt tijdens scrollen een witte balk. */
.site-design .site-header {
  padding: .8rem 0;
  background: #fff;
  border-bottom: 1px solid transparent;
}
.site-design .site-header.is-scrolled {
  padding: .45rem 0;
  background: rgba(255,255,255,.98);
  border-bottom-color: #17171718;
  box-shadow: 0 4px 14px #00000004;
}
.site-design .header-inner,
.site-design .site-header.is-scrolled .header-inner {
  width: calc(100% - clamp(1rem, 2vw, 2rem) * 2);
  max-width: none;
  min-height: 4.1rem;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.site-design .brand-wordmark,
.site-design .brand-slide:hover .brand-wordmark,
.site-design .brand-slide:focus-visible .brand-wordmark { width: clamp(10rem, 18vw, 15rem); height: auto; }
.site-design .primary-nav { gap: .55rem; margin-left: auto; }
.site-design .primary-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .8rem 1.15rem;
  color: var(--ink);
  font-family: var(--font-label);
  font-size: clamp(1rem, 1.36vw, 1.22rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.site-design .primary-nav > a > span { display: block; transform: translateY(-.08rem); }
.site-design .primary-nav > a .nav-ring-artboard {
  inset: 50% auto auto 50%;
  width: calc(100% + .65rem);
  height: 3.2rem;
  transform: translate(-50%, -50%) rotate(var(--ring-angle, 0deg));
  background: none;
}
.site-design .primary-nav > a .nav-ring-artboard .nav-ring-trace {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transform: none;
  transition: none;
}
.site-design .primary-nav > a:is(:hover, :focus-visible, [aria-current]) .nav-ring-artboard .nav-ring-trace { stroke-dashoffset: 0; opacity: 1; transform: none; transition: stroke-dashoffset 1050ms cubic-bezier(.22, .61, .36, 1), opacity 0s; }
.site-design .primary-nav > a .nav-ring-home { width: 5.9rem; }
.site-design .primary-nav > a:nth-child(2) { --ring-angle: -1.3deg; }
.site-design .primary-nav > a:nth-child(3) { --ring-angle: 1.7deg; }
.site-design .primary-nav > a:nth-child(4) { --ring-angle: -.7deg; }
.site-design .primary-nav > a:nth-child(5) { --ring-angle: 1.1deg; }
.site-design .primary-nav > a:nth-child(6) { --ring-angle: -1.8deg; }
.site-design .nav-toggle { width: 2.8rem; height: 2.8rem; border: 1px solid #d5d5d5; background: #fff; border-radius: .5rem; }

/* De H1 is bewust klein. De grotere uitspraak blijft gewone, leesbare tekst. */
.site-design .home-hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-height) + 3rem) 0 4rem;
  color: var(--ink);
  background: linear-gradient(to bottom, #fff 65%, #f1f6fa);
}
.site-design .home-hero::before,
.site-design .home-hero::after { display: none; }
.site-design .home-hero .hero-grid {
  display: grid;
  width: min(calc(100% - var(--gutter) * 2), var(--container));
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.site-design .home-hero .hero-copy { position: relative; align-self: center; display: block; padding: 0; background: none; pointer-events: none; }
.site-design .home-hero .hero-copy > * { pointer-events: auto; }
.site-design .home-hero .hero-copy :is(a, button) { position: relative; z-index: 5; pointer-events: auto; }
.site-design .home-hero .hero-copy h1 {
  max-width: none;
  margin: 0 0 1.4rem;
  padding: 0;
  font-family: var(--font-label);
  font-size: clamp(1.12rem, 1.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}
.site-design .hero-statement {
  margin: 0 0 1.2rem;
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 2.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.025em;
}
.hero-statement-line { display: block; }
.site-design .home-hero .hero-lead {
  max-width: 43rem;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 1.85vw, 1.65rem);
  line-height: 1.48;
}
.site-design .hero-continue { display: inline; min-width: 0; }
.site-design mark {
  padding: 0 .14em;
  color: inherit;
  background: linear-gradient(178deg, transparent 8%, var(--marker-yellow) 8% 88%, transparent 88%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.site-design .home-hero .hero-review-link { display: flex; max-width: 39rem; margin-top: 1.15rem; gap: .75rem; font-family: var(--font-interface); font-size: .75rem; font-weight: 400; line-height: 1.6; }
.site-design .home-hero .hero-review-link > span:last-child { font-family: "Google Sans Flex Reviews", Arial, Helvetica, sans-serif; font-weight: 500; }
.site-design .home-hero .hero-review-stars { font-size: 1.05rem; }
.site-design .home-hero .button-row { margin-top: 1.4rem; gap: 1rem; }
.site-design .home-hero .hero-media {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.site-design .home-hero .hero-media::before,
.site-design .home-hero .hero-media::after { display: none; }
.site-design .home-hero .hero-media img {
  position: static;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: multiply;
  transform: none;
}

/* The complete WebP remains the first image and the no-JS fallback. Swap to
   a faceless base only once it has loaded; no browser-specific mask needed. */
.site-design .home-hero .hero-ideas { width: min(100%, 22rem); justify-self: center; }
.hero-portrait { position: relative; z-index: 1; width: 100%; aspect-ratio: 501 / 804; pointer-events: none; }
.hero-portrait > img { display: block; }
.site-design .home-hero .hero-media .hero-portrait-base { display: none; position: absolute; inset: 0; }
.hero-face { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-face > g { transform-box: view-box; }
/* The open eye closes into a separate curved lid; the outer group follows the pointer. */
.hero-face [data-hero-eye-left] > path,
.hero-face [data-hero-eye-right] > path {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  transform: scaleY(var(--hero-eye-scale, var(--hero-eye-rest-scale, 1)));
  opacity: var(--hero-eye-open-opacity, 1);
  transition: transform var(--hero-eye-time, 180ms) ease-out, opacity var(--hero-eye-time, 180ms) ease-out;
}
.hero-eye-lid {
  fill: none;
  stroke: #202524;
  stroke-width: 2.6px;
  stroke-linecap: round;
  opacity: var(--hero-eye-lid-opacity, 0);
  transition: opacity var(--hero-eye-time, 180ms) ease-out;
}
.is-hero-blinking [data-hero-eye-left] > path,
.is-hero-blinking [data-hero-eye-right] > path {
  animation: hero-eye-blink var(--hero-blink-duration, 210ms) cubic-bezier(.4, 0, .2, 1);
}
@keyframes hero-eye-blink {
  0%, 100% { transform: scaleY(var(--hero-eye-rest-scale, 1)); opacity: 1; }
  28%, 40% { transform: scaleY(.09); opacity: 0; }
}
.is-hero-blinking .hero-eye-lid {
  animation: hero-lid-blink var(--hero-blink-duration, 210ms) cubic-bezier(.4, 0, .2, 1);
}
@keyframes hero-lid-blink {
  0%, 12%, 75%, 100% { opacity: 0; }
  28%, 40% { opacity: 1; }
}
.home-hero[data-hero-eye-reaction="closed"],
.home-hero[data-hero-eye-reaction="peek-left"],
.home-hero[data-hero-eye-reaction="peek-right"] {
  --hero-eye-scale: .09;
  --hero-eye-open-opacity: 0;
  --hero-eye-lid-opacity: 1;
  --hero-eye-time: 75ms;
  --hero-brow-drop: 18px;
  --hero-brow-turn: 10deg;
  --hero-crease-opacity: 1;
}
.home-hero[data-hero-eye-reaction="peek-left"] [data-hero-eye-left],
.home-hero[data-hero-eye-reaction="peek-right"] [data-hero-eye-right] {
  --hero-eye-scale: .58;
  --hero-eye-open-opacity: 1;
  --hero-eye-lid-opacity: 0;
  --hero-eye-time: 240ms;
  --hero-crease-opacity: .2;
}
.home-hero[data-hero-eye-reaction="peek-left"] [data-hero-brow-left],
.home-hero[data-hero-eye-reaction="peek-right"] [data-hero-brow-right] {
  --hero-brow-drop: 6px;
  --hero-brow-turn: 3deg;
}
.hero-face [data-hero-brow-left] > path,
.hero-face [data-hero-brow-right] > path {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(var(--hero-brow-drop, var(--hero-brow-rest-drop, 0px))) rotate(var(--hero-brow-turn, var(--hero-brow-rest-turn, 0deg)));
  transition: transform 190ms ease-out;
}
.hero-face [data-hero-brow-right] > path {
  transform: translateY(var(--hero-brow-drop, var(--hero-brow-rest-drop, 0px))) rotate(calc(0deg - var(--hero-brow-turn, var(--hero-brow-rest-turn, 0deg))));
}
.hero-eye-crease {
  fill: none;
  stroke: #202524;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--hero-crease-opacity, 0);
  transition: opacity 120ms ease-out;
}
.is-hero-thinking [data-hero-brow-left],
.is-hero-thinking [data-hero-brow-right] { --hero-brow-rest-drop: -2px; --hero-brow-rest-turn: 0deg; }
.hero-mouth-smile, .hero-mouth-thinking { transition: opacity 220ms ease-out; }
.hero-mouth-thinking { opacity: 0; fill: none; stroke: #000; stroke-width: 2.3px; stroke-linecap: round; stroke-linejoin: round; }
.is-hero-thinking .hero-mouth-smile { opacity: 0; }
.is-hero-thinking .hero-mouth-thinking { opacity: 1; }
.hero-thinking-arm {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 1060px 948px;
  transform: translateY(220px) rotate(5deg);
  transition: transform 520ms cubic-bezier(.2, .7, .2, 1), opacity 200ms ease-out;
}
.is-hero-thinking .hero-thinking-arm { opacity: 1; transform: translateY(0) rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .hero-face [data-hero-eye-left] > path,
  .hero-face [data-hero-eye-right] > path,
  .hero-face [data-hero-brow-left] > path,
  .hero-face [data-hero-brow-right] > path,
  .hero-eye-crease, .hero-eye-lid,
  .hero-mouth-smile, .hero-mouth-thinking,
  .hero-thinking-arm { animation: none; transition: none; }
}
.has-hero-gaze .hero-portrait > img:first-child { opacity: 0; }
.site-design .home-hero.has-hero-gaze .hero-media .hero-portrait-base { display: block; }
.has-hero-gaze .hero-face { display: block; }
.hero-drawing {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.is-hero-drawing .hero-drawing {
  pointer-events: auto;
  touch-action: pinch-zoom;
  cursor: url('../img/hero-marker-cursor.svg') 5 29, crosshair;
}
.is-hero-drawing .hero-drawing.is-highlighter {
  cursor: url('../img/hero-highlighter-cursor.svg') 5 29, crosshair;
}
.hero-draw-prompt { position: absolute; z-index: 5; top: 62%; right: calc(-1 * max(0px, (100vw - var(--container)) / 2 - var(--gutter))); display: grid; justify-items: center; gap: .35rem; width: clamp(7.5rem, 12vw, 11rem); color: var(--ink); text-align: center; animation: hero-prompt-appear 220ms ease-out both; }
.hero-draw-prompt[hidden] { display: none; }
.hero-draw-prompt p { margin: 0; font: 400 1.25rem/1.4 var(--font-body); }
.hero-draw-prompt a { position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: .3rem; min-height: 44px; color: inherit; font: 400 1.05rem/1.4 var(--font-label); white-space: nowrap; text-decoration: underline; text-underline-offset: .2em; }
.hero-draw-prompt a::before { content: ""; position: absolute; z-index: -1; inset: .1em -.15em auto; height: 1.2em; background: var(--marker-yellow); clip-path: polygon(0 9%, 100% 0, 99% 92%, 1% 100%); transform: scaleX(0); transform-origin: left center; transition: transform 220ms ease-out; pointer-events: none; }
.hero-draw-prompt a:is(:hover, :focus-visible)::before { transform: scaleX(1); }
.hero-draw-prompt a:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }
@keyframes hero-prompt-appear { from { opacity: 0; } to { opacity: 1; } }
/* A capped marker pokes in from the paper's right edge. The entire object is
   the toggle; both cap layers slide together along the marker's axis. */
.hero-draw-tools {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: .9rem;
  width: 21rem;
  height: 11rem;
  color: var(--ink);
  pointer-events: none;
}
.hero-draw-tools[hidden], .hero-drawing[hidden] { display: none; }
.hero-draw-toggle {
  position: absolute;
  top: 1.25rem;
  right: 0;
  display: block;
  width: calc(100% - 1.4rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.hero-draw-toggle:focus-visible { outline: 2px dashed #586c78; outline-offset: -3px; border-radius: 1rem; }
.hero-marker { display: block; width: calc(100% + 1.4rem); max-width: none; height: auto; overflow: visible; filter: drop-shadow(0 3px 2px #17273226); }
.hero-marker-cap {
  transform-box: view-box;
  transform-origin: 76px 85px;
  translate: 0 0;
  transition: translate 180ms ease-out;
}
.hero-draw-toggle[aria-pressed="true"] .hero-marker-cap { transform: translate(-86px, 12.5px); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-draw-toggle[aria-pressed="true"]:hover .hero-marker-cap { translate: 12px -1.744px; }
  .hero-draw-toggle[aria-pressed="true"]:active .hero-marker-cap { translate: 18px -2.616px; }
}
.hero-draw-caption {
  position: absolute;
  width: max-content;
  max-width: calc(100vw - 2rem);
  right: .75rem;
  bottom: -.35rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  font-family: var(--font-interface);
}
.hero-draw-action { position: absolute; top: 0; right: .85rem; color: #52636d; font: 400 1.1rem/1.3 var(--font-label); white-space: nowrap; transform: rotate(-8.27deg); transform-origin: right bottom; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms ease-out; }
.hero-draw-tools:has(.hero-draw-toggle:is(:hover, :focus-visible)) .hero-draw-action { opacity: 1; visibility: visible; }
.hero-draw-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: .4rem;
  min-width: 6rem;
  min-height: 48px;
  padding: .4rem .55rem;
  border: 0;
  border-radius: .4rem;
  background: none;
  color: #394b55;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  pointer-events: auto;
}
.hero-draw-clear:disabled { visibility: hidden; pointer-events: none; }
.hero-draw-clear:hover { background: #dfe9f0; }
.hero-draw-clear:focus-visible { outline: 2px solid #586c78; outline-offset: 1px; }
.hero-draw-clear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-scroll-cue { position: absolute; z-index: 6; left: 50%; bottom: 1rem; display: grid; place-items: center; width: 48px; height: 48px; transform: translateX(-50%); border-radius: 50%; color: var(--ink); text-decoration: none; }
.hero-scroll-cue svg { width: 36px; height: 36px; stroke: currentColor; stroke-width: 3.3; stroke-linecap: round; stroke-linejoin: round; animation: hero-scroll-nudge 2.8s ease-in-out 3; }
.hero-scroll-cue:hover { color: var(--ink); background: #ffda7240; }
.hero-scroll-cue:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
@keyframes hero-scroll-nudge { 0%, 35%, 100% { transform: translateY(0); } 55% { transform: translateY(4px); } 75% { transform: translateY(1px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-draw-toggle, .hero-marker-cap, .hero-draw-action { transition: none; }
  .hero-scroll-cue svg { animation: none; }
  .hero-draw-prompt { animation: none; }
  .hero-draw-prompt a::before { transition: none; }
}
@media (min-width: 48rem) and (min-height: 38rem) {
  .site-design .home-hero .hero-ideas { max-width: calc((100svh - var(--header-height) - 12rem) * .623134); }
}

/* De hero vult het eerste scherm; de pluspunten volgen pas bij scrollen.
   Onderaan blijft ruimte voor de stift, ook als de inhoud moet doorgroeien. */
.site-design .home-hero { padding-bottom: 10rem; }
@media (min-width: 66.25rem) {
  .site-design .home-hero { padding-top: calc(var(--header-height) + 2rem); }
}

/* SVG-contouren behouden de echte kromming; de tekst blijft selecteerbaar. */
.site-design .button {
  /* Embedded masks also work in Chrome when previewing a local file. */
  --button-fill-mask: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 280.123 84.426%22 preserveAspectRatio%3D%22none%22%3E%3Cpath d%3D%22M 257.831,79.426 C 179.312,82.407 100.811,82.407 22.291,79.426 C 10.714,78.652 2.150,68.714 2.000,57.305 C 1.999,47.244 1.999,37.182 2.000,27.121 C 2.150,15.712 10.714,5.774 22.291,5.000 C 100.811,2.019 179.312,2.019 257.831,5.000 C 269.408,5.774 277.973,15.712 278.123,27.121 C 278.123,37.182 278.123,47.244 278.123,57.305 C 277.973,68.714 269.408,78.652 257.831,79.426 Z%22 fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E");
  --button-outline-mask: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 277.110 81.397%22 preserveAspectRatio%3D%22none%22%3E%3Cpath d%3D%22M 254.986,74.898 L 240.431,75.387 L 225.877,75.812 L 211.322,76.171 L 196.769,76.464 L 182.215,76.693 L 167.662,76.856 L 153.109,76.954 L 138.555,76.987 L 124.002,76.954 L 109.449,76.856 L 94.896,76.693 L 80.342,76.464 L 65.788,76.171 L 51.234,75.812 L 36.679,75.387 L 22.161,74.900 L 20.235,74.688 L 18.373,74.297 L 16.584,73.736 L 14.875,73.014 L 13.252,72.140 L 11.725,71.123 L 10.300,69.973 L 8.988,68.698 L 7.795,67.309 L 6.731,65.814 L 5.803,64.223 L 5.021,62.546 L 4.391,60.792 L 3.922,58.971 L 3.622,57.090 L 3.500,55.184 L 3.500,53.373 L 3.500,51.563 L 3.500,49.752 L 3.500,47.941 L 3.500,46.131 L 3.500,44.320 L 3.500,42.509 L 3.500,40.699 L 3.500,38.888 L 3.500,37.077 L 3.500,35.266 L 3.500,33.456 L 3.500,31.645 L 3.500,29.834 L 3.500,28.024 L 3.500,26.237 L 3.622,24.307 L 3.922,22.426 L 4.391,20.605 L 5.021,18.851 L 5.803,17.174 L 6.731,15.583 L 7.795,14.088 L 8.988,12.699 L 10.300,11.424 L 11.725,10.274 L 13.252,9.257 L 14.875,8.383 L 16.584,7.661 L 18.373,7.100 L 20.235,6.709 L 22.124,6.499 L 36.679,6.010 L 51.234,5.585 L 65.788,5.226 L 80.342,4.933 L 94.896,4.704 L 109.449,4.541 L 124.002,4.443 L 138.555,4.411 L 153.109,4.444 L 167.662,4.541 L 182.215,4.705 L 196.769,4.933 L 211.322,5.227 L 225.877,5.586 L 240.431,6.010 L 254.949,6.497 L 256.875,6.709 L 258.737,7.100 L 260.526,7.661 L 262.235,8.383 L 263.858,9.257 L 265.385,10.274 L 266.810,11.424 L 268.122,12.699 L 269.315,14.088 L 270.379,15.583 L 271.307,17.174 L 272.089,18.851 L 272.719,20.605 L 273.188,22.426 L 273.488,24.307 L 273.610,26.213 L 273.610,28.024 L 273.610,29.834 L 273.610,31.645 L 273.610,33.456 L 273.610,35.266 L 273.610,37.077 L 273.610,38.888 L 273.610,40.698 L 273.610,42.509 L 273.610,44.320 L 273.610,46.131 L 273.610,47.941 L 273.610,49.752 L 273.610,51.563 L 273.610,53.373 L 273.610,55.160 L 273.488,57.090 L 273.188,58.971 L 272.719,60.792 L 272.089,62.546 L 271.307,64.223 L 270.379,65.814 L 269.315,67.309 L 268.122,68.698 L 266.810,69.973 L 265.385,71.123 L 263.858,72.140 L 262.235,73.014 L 260.526,73.736 L 258.737,74.297 L 256.875,74.688 Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  position: relative;
  isolation: isolate;
  min-height: 3.6rem;
  padding: .9rem 1.8rem;
  gap: .5rem;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-label);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color 400ms ease;
}
.site-design .button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: url('../img/button-warp-fill.svg') center / 100% 100% no-repeat;
  transform: none;
}
.site-design .button::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 2px;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background: #ff6b3d;
  -webkit-mask: var(--button-fill-mask) center / 100% 100% no-repeat;
  mask: var(--button-fill-mask) center / 100% 100% no-repeat;
  clip-path: circle(0% at var(--button-origin-x, 50%) var(--button-origin-y, 100%));
  transform: none;
}
.site-design .button:is(.is-fill-active, :focus-visible)::after { animation: home-button-fill 550ms linear forwards; }
@keyframes home-button-fill {
  0% { clip-path: circle(0% at var(--button-origin-x, 50%) var(--button-origin-y, 100%)); background: #ff6b3d; }
  75% { background: var(--marker-yellow); }
  100% { clip-path: circle(150% at var(--button-origin-x, 50%) var(--button-origin-y, 100%)); background: var(--marker-yellow); }
}
.site-design .button-secondary { --button-rest-color: var(--ink); color: var(--ink); }
.site-design .button-secondary::before { background-image: url('../img/button-warp-outline.svg'); }
.site-design .button-secondary::after {
  /* Gebruik de echte binnenkant van deze rand, zonder extra inspringing. */
  inset: 0;
  -webkit-mask-image: var(--button-outline-mask);
  mask-image: var(--button-outline-mask);
}
.site-design .button > span[aria-hidden="true"] { display: none; }
.site-design .button > span.button-fill-label[aria-hidden="true"] { display: inline-flex; position: absolute; z-index: 1; inset: 0; padding: inherit; align-items: center; justify-content: center; gap: inherit; color: #171717; font: inherit; letter-spacing: inherit; pointer-events: none; transform: none; clip-path: circle(0% at var(--button-origin-x, 50%) var(--button-origin-y, 100%)); }
.site-design .button:is(.is-fill-active, :focus-visible) > .button-fill-label { animation: home-button-text-fill 550ms linear forwards; }
@keyframes home-button-text-fill {
  from { clip-path: circle(0% at var(--button-origin-x, 50%) var(--button-origin-y, 100%)); }
  to { clip-path: circle(150% at var(--button-origin-x, 50%) var(--button-origin-y, 100%)); }
}
.site-design .button-calculator-icon { width: 1.15rem; height: 1.15rem; }
.site-design .button:hover { background: transparent; color: #fff; transform: none; box-shadow: none; }
.site-design .button-secondary:hover,
.site-design .button:is(.is-fill-active, :focus-visible) { color: #171717; background: transparent; transform: none; }
.site-design .button.has-button-fill:is(.is-fill-active, :focus-visible) { color: var(--button-rest-color, #fff); }
/* Native hover also works when the pointer is already over a button at load,
   or when the pointer-enter enhancement has not run. Touch keeps its timer. */
@media (hover: hover) {
  .site-design .button:hover::after { animation: home-button-fill 550ms linear forwards; }
  .site-design .button:hover > .button-fill-label { animation: home-button-text-fill 550ms linear forwards; }
  .site-design .button:hover { color: #171717; }
  .site-design .button.has-button-fill:hover { color: var(--button-rest-color, #fff); }
}

/* Eerst vertrouwen en werk, vervolgens de mensen achter de tekeningen. */
.site-design .proof-strip { min-height: 0; padding: 3.5rem 0 2.75rem; border: 0; background: linear-gradient(to bottom, #f1f6fa, var(--paper-blue) 3rem); }
.site-design .proof-grid { gap: 0; }
.proof-illustration { display: none; }
.site-design .proof-grid > div { grid-template-columns: 1.3rem minmax(0, 1fr); gap: .2rem .65rem; padding-inline: 1rem; background: none; border: 0; border-radius: 0; box-shadow: none; }
.site-design .proof-grid > div + div { border: 0; }
.site-design .proof-check { grid-row: 1 / 3; width: 1.3rem; height: 1.3rem; margin-top: .12rem; color: var(--ink); stroke-width: 3.1; }
.site-design .proof-grid > div > span { grid-column: 2; }
.site-design .proof-grid strong { color: var(--ink); font-family: var(--font-label); font-size: 1.3rem; font-weight: 400; letter-spacing: 0; }
.site-design .proof-grid span { color: var(--ink-soft); font-family: var(--font-body); font-size: 1.07rem; }
.site-design .client-logos-section { padding: 3rem 0 4rem; background: #fff; }
.site-design .client-logos-heading { margin-bottom: 1.8rem; }
.site-design .client-logos-heading .eyebrow { display: none; }
.site-design .client-logos-heading h2 { max-width: none; font-family: var(--font-label); font-size: clamp(1.7rem, 2.4vw, 2.15rem); line-height: 1.3; text-align: center; }
.site-design .client-logo-row { gap: 2rem; }
.site-design .client-logo-slot img { max-height: 3.6rem; }
.site-design .section-work { padding-bottom: 0; background: var(--paper-blue); }
.site-design .home-example-stories { gap: 0; margin-top: 0; }
.site-design .home-example-story { position: relative; isolation: isolate; gap: 4rem; padding-block: clamp(3rem, 6vw, 5rem); }
.site-design .home-example-story:first-child { padding-top: 1rem; }
.site-design .home-example-story + .home-example-story { background: var(--sketch-x) left top / 256px 7px repeat-x; }
.site-design .home-example-story:nth-child(even) .home-example-frame { order: 1; }
.site-design .home-example-frame { min-width: 0; padding: .75rem; --frame-color: #9bafbf; --example-paper: var(--paper-blue); }
.site-design .home-example-story h3 { font-family: var(--font-heading); font-size: 2rem; font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.site-design .home-example-copy p { font-size: var(--body-size); line-height: 1.65; }
.site-design .home-example-copy .home-example-label { font-family: var(--font-label); font-size: 1.1rem; font-weight: 400; letter-spacing: .015em; }
.site-design .home-example-media { border: 0; border-radius: 4px; box-shadow: none; }
/* Cut-out windows: the inset shadow sits above the image/player, not behind it.
   It never intercepts a click, including on the inline YouTube controls. */
.site-design :is(.home-example-player, .home-example-compact > .home-example-media) { isolation: isolate; overflow: hidden; min-height: 0; border: 0; border-radius: 4px; }
.site-design :is(.home-example-player, .home-example-compact > .home-example-media)::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 2px 5px #17273230, inset 4px 7px 18px #17273224, inset -1px -1px 4px #17273210; }
.site-design .home-example-player:has(> :focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
/* The paper tab covers the bottom inset shadow at its join. Its outer shadow
   continues the cut-out contour; clipping removes any shadow below the paper.
   Inline playback replaces the preview and tab together, leaving clear controls. */
.site-design .home-example-tab { z-index: 3; background: var(--example-paper, #fff); box-shadow: 0 2px 5px #17273230, 4px 7px 18px #17273224, -1px -1px 4px #17273210; transition: background-color 180ms ease-out; }
.site-design .home-example-play { color: #171717; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.site-design .home-example-play svg { width: 68%; height: 68%; fill: currentColor; stroke: none; transition: transform 180ms ease-out; }
.site-design .home-example-media:is(:hover, :focus-visible) .home-example-tab { background: var(--marker-yellow); }
.site-design .home-example-media:is(:hover, :focus-visible) .home-example-play svg { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .site-design :is(.home-example-play svg, .home-example-tab) { transition: none; } }
.site-design .home-example-case-link,
.site-design .home-examples-all a { font-family: var(--font-label); font-size: 1.2rem; }
.site-design .home-examples-more { --examples-fade-lead: clamp(3rem, 6vw, 5rem); position: relative; isolation: isolate; margin-top: 0; padding-block: var(--section-space); border: 0; background: transparent; }
/* De fade begint in de onderste witruimte van het laatste grote voorbeeld,
   vóór de stippellijn, en loopt rustig door zonder achter de video te komen. */
.site-design .home-examples-more::before { content: ""; position: absolute; z-index: -1; top: calc(0px - var(--examples-fade-lead)); bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: linear-gradient(to bottom, var(--paper-blue), #fff calc(var(--examples-fade-lead) + clamp(3rem, 5vw, 4.5rem))); pointer-events: none; }
.site-design .home-examples-more::after { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--sketch-x) left top / 256px 7px repeat-x; pointer-events: none; }
.site-design .home-examples-more-heading { margin-left: 0; text-align: left; }
.site-design .home-examples-more-heading h3 { font-family: var(--font-heading); font-size: 2rem; font-weight: 400; letter-spacing: 0; }
.site-design .home-example-compact :is(h2, h4) { font-family: var(--font-label); font-size: 1.3rem; font-weight: 400; letter-spacing: 0; }
.site-design .home-example-compact p { font-size: 1.12rem; line-height: 1.5; }
.site-design .home-examples-grid { gap: 2.5rem 2rem; }
.site-design .portfolio-reel-windows .home-example-media { background: transparent; }
.site-design .portfolio-reel-paper { color: var(--ink); background: #fff; border: 0; box-shadow: 3px 2px 3px #1727322b, 3px 0px 4px #17273212; }
.site-design .portfolio-reel-pull[data-reel-direction="1"] .portfolio-reel-paper { border-radius: 0 27px 25px 0 / 0 24px 26px 0; }
.site-design .portfolio-reel-pull[data-reel-direction="-1"] .portfolio-reel-paper { border-radius: 25px 0 0 27px / 26px 0 0 24px; box-shadow: -3px 2px 3px #1727322b, -3px 0px 4px #17273212; }
.site-design .portfolio-reel-pull::after { background: none; border-radius: 0; box-shadow: 1px 0 0 #fff, -1px 0 .5px #17273240; }
.site-design .portfolio-reel-pull[data-reel-direction="-1"]::after { box-shadow: -1px 0 0 #fff, 1px 0 .5px #17273240; }
.site-design .portfolio-reel-pull:is(:hover, :focus-visible) .portfolio-reel-paper { background: var(--marker-yellow); }
.site-design .portfolio-reel-pull:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; border-radius: 4px; }
.site-design .portfolio-reel-paper svg { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.site-design .portfolio-reel-pull[data-reel-direction="-1"] svg { transform: rotate(180deg); }
@media (max-width: 63.99rem) {
  .site-design .portfolio-reel-windows h4 { font-size: 1.1rem; }
  .site-design .portfolio-reel-windows .home-example-copy { min-height: 8rem; }
}
@media (max-width: 35.99rem) {
  .site-design .portfolio-reel-windows .home-example-copy { min-height: 5.5rem; padding-top: .75rem; }
  .site-design .portfolio-reel-pull[data-reel-direction="1"] .portfolio-reel-paper { border-radius: 0 21px 19px 0 / 0 19px 21px 0; }
  .site-design .portfolio-reel-pull[data-reel-direction="-1"] .portfolio-reel-paper { border-radius: 19px 0 0 21px / 21px 0 0 19px; }
}
.site-design .home-examples-all { text-align: center; }
.site-design .home-examples-all .button { text-decoration: none; }
@supports (-webkit-mask-box-image-source: none) {
  /* Rand en vulling gebruiken dezelfde negen vlakken: de hoeken blijven vast
     én sluiten op elkaar aan, ook bij deze bredere knop. */
  .site-design .home-examples-all .button::before {
    background: none;
    border: 20px solid transparent;
    border-image: url('../img/button-warp-outline.svg') 28 fill / 20px / 0 stretch;
  }
  .site-design .home-examples-all .button::after {
    -webkit-mask: none;
    mask: none;
    -webkit-mask-box-image: var(--button-outline-mask) 28 fill / 20px / 0 stretch;
  }
}
.site-design .home-team-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr); align-items: start; gap: 5rem; overflow: visible; border-radius: 0; background: #fff; box-shadow: none; }
.site-design .home-team-media-column { min-height: 0; align-self: start; }
.site-design .home-team-media-card { position: relative; overflow: visible; padding: 1rem; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.site-design .home-team-photo { height: auto; overflow: visible; aspect-ratio: auto; border-radius: 0; background: #fff; transform: none; }
.site-design .home-team-photo img { display: block; height: auto; border-radius: 0; }
.site-design .home-team-media-note { padding: 1.2rem .25rem .25rem; border: 0; background: #fff; }
.site-design .home-team-media-note p { color: var(--ink-soft); font-family: var(--font-body); font-size: 1.3rem; line-height: 1.6; }
.site-design .home-team-copy { padding: .25rem 0 0; }
.site-design .home-team-copy h2 { margin-bottom: 1.5rem; font-family: var(--font-heading); font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: 0; }
.site-design .home-team-copy > p { font-size: var(--body-size); line-height: 1.65; }
.site-design .home-team-copy > .eyebrow { font-size: 1.18rem; }
.site-design .home-team-story-disclosure { margin-top: 1.5rem; border: 0; background: none; }
.site-design .home-team-story-disclosure summary { padding-block: 1rem; font-family: var(--font-label); font-size: 1.22rem; font-weight: 400; }
.site-design .home-team-story p { font-size: var(--body-size); line-height: 1.6; }
.site-design .home-team-story-page-link { font-family: var(--font-label); font-size: 1.2rem; }

/* Een getekend stappenplan op papier. */
.site-design .section-process { background: var(--paper-blue); }
.site-design .process-followup-wrap { margin-top: 5.5rem; }
.site-design .section-process > .workflow-wide { width: min(calc(100% - var(--gutter) * 2), var(--container)); max-width: none; padding: 0; }
.site-design .workflow-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.site-design .workflow-timeline > li { grid-template-rows: auto; grid-template-columns: 2.8rem minmax(0,1fr); align-items: start; gap: 1rem; text-align: left; }
.site-design .workflow-timeline > li::after { display: none; }
.site-design .workflow-number { width: 2.8rem; height: 2.8rem; border: 1.6px solid var(--ink); border-radius: 48% 44% 51% 45%; background: var(--marker-yellow); font-family: var(--font-heading); font-size: 1.8rem; font-weight: 400; }
.site-design .workflow-timeline img,
.site-design .workflow-montage-icon { width: 2.5rem; height: 2.5rem; margin: 0 0 1rem; }
.site-design .workflow-timeline h3 { font-family: var(--font-label); font-size: 1.55rem; font-weight: 400; line-height: 1.15; letter-spacing: 0; white-space: normal; }
.site-design .workflow-timeline p { max-width: none; font-size: var(--body-size); font-style: normal; line-height: 1.65; }
.site-design .process-followup { margin-top: 0; padding: clamp(1.5rem, 3vw, 3rem); border: 5px solid transparent; background-image: var(--sketch-x), var(--sketch-x), var(--sketch-y), var(--sketch-y); background-position: left top, 40px bottom, left 17px, right 60px; background-size: 256px 7px, 256px 7px, 7px 256px, 7px 256px; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-origin: border-box; }
.site-design .process-followup h3 { font-family: var(--font-heading); font-size: 1.9rem; line-height: 1.25; }
.site-design .process-followup p { font-size: var(--body-size); line-height: 1.65; }

/* Papieren werkblad: rustige bediening, getekende markeringen en een losse prijsstrook. */
.site-design .section-calculator { color: var(--ink); background: #fff; }
.site-design .home-calculator-frame { padding: 0; }
.site-design .section-calculator .section-heading :is(h2,p) { color: var(--ink); }
.site-design .price-calculator { --font-body: var(--font-label); position: relative; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding: clamp(1rem, 2.6vw, 2rem); overflow: visible; border: 0; border-radius: 3px; background: #edf3f8; box-shadow: none; font-family: var(--font-body); }
.site-design .price-calculator::before, .site-design .price-calculator::after { content: none; }
.site-design .calculator-fields { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.6rem; padding: clamp(1.1rem, 2.6vw, 2rem); border: 1px solid #c5cdd1; border-radius: 3px 2px 4px 2px; background: #fff; box-shadow: 2px 3px 0 #26343b0a; }
.site-design .price-calculator :where(label, select, input, button, small, legend) { font-family: var(--font-body); font-weight: 400; }
.site-design .calculator-heading { padding-bottom: 1.2rem; border-bottom: 1px solid #dbe0e3; background: none; }
.site-design .calculator-heading h3 { max-width: none; margin: .85rem 0 .5rem; font-family: var(--font-label); font-size: clamp(1.85rem, 2.6vw, 2.25rem); font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.site-design .calculator-heading p { margin: 0; font-family: var(--font-body); font-size: 1.2rem; line-height: 1.65; color: #4e5b61; }
.site-design .calculator-heading > div { align-items: center; margin: 0; color: #52636d; font-family: var(--font-label); font-size: 1.1rem; line-height: 1.5; }
.site-design .calculator-heading > div > span { font-weight: 400; letter-spacing: .02em; }
.site-design .calculator-heading time { padding: .2rem .4rem; color: #47545b; border: 0; background: #edf3f8; transform: rotate(-2deg); }
.site-design .calculator-main-controls { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: 1.6rem 1.4rem; align-items: start; }
.site-design .calculator-field-length { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.site-design .calculator-fields .form-field > label, .site-design .price-calculator legend { padding: 0; margin: 0 0 .75rem; color: #24333c; font-size: 1.25rem; font-weight: 400; line-height: 1.5; font-family: var(--font-label); }
.site-design .calculator-fields .form-field { gap: 0; }
.site-design .calculator-step { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; margin-right: .4rem; border: 1px solid #a9b8c0; border-radius: 48% 53% 47% 51%; font-size: 1rem; font-weight: 400; vertical-align: middle; font-family: var(--font-label); }
.site-design .calculator-style-picker legend { float: left; margin-right: .15rem; }
.site-design .calculator-style-help { margin-bottom: .75rem; }
.site-design .calculator-style-help summary { position: static; width: 32px; height: 30px; color: #52636d; }
.site-design .calculator-style-help p { clear: both; }
.site-design .calculator-style-options { clear: both; }
.site-design .calculator-style-help p { margin: 0 0 1rem; padding: .85rem; background: #edf3f8; font-family: var(--font-body); font-size: 1.15rem; line-height: 1.65; }
.site-design .calculator-style-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.site-design .calculator-style-card { display: flex; flex-direction: column; align-items: center; padding: .6rem .4rem .75rem; border: 1px solid #d7dfe3; border-radius: 3px; background: #fff; box-shadow: none; text-align: center; transition: border-color 140ms ease; }
.site-design .calculator-style-card img { width: 100%; height: auto; aspect-ratio: 5 / 3; margin: .2rem 0 .6rem; mix-blend-mode: multiply; }
.site-design .calculator-style-card strong { position: relative; z-index: 0; color: #24333c; font-family: var(--font-label); font-size: 1.3rem; font-weight: 400; line-height: 1.4; white-space: nowrap; }
.site-design .calculator-style-card strong::before { position: absolute; content: ""; z-index: -1; inset: -.05rem -.25rem; background: transparent; clip-path: polygon(0 8%, 100% 0, 98% 93%, 1% 100%); }
.site-design .calculator-style-card small { margin-top: .4rem; color: #58666d; font-size: 1rem; line-height: 1.5; }
.site-design .calculator-style-option input:checked + .calculator-style-card { border-color: #758892; background: #fff; box-shadow: inset 0 0 0 1px #758892; }
.site-design .calculator-style-option input:checked + .calculator-style-card strong::before { background: #ffda72; }
.site-design .calculator-style-check { display: grid; place-items: center; top: .25rem; right: .3rem; width: 1.4rem; height: 1.4rem; border: 0; background: #ffda72; border-radius: 50% 42% 52% 48%; color: #24333c; }
.site-design .calculator-style-check svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.site-design .calculator-duration-player { --duration-thumb-size: 1.4rem; --duration-thumb-width: clamp(3.45rem, 11.5vw, 5.75rem); --duration-thumb-shift: 0%; --duration-thumb-background: repeating-linear-gradient(125deg, #ffda72 0 5px, #b58a2e 5px 7px); --duration-thumb-border: 2px; container-type: inline-size; margin-bottom: .25rem; padding: .8rem 0 .15rem; border: 1px solid #d7dfe3; border-radius: .6rem; background: #f5f8fa; }
.site-design .calculator-duration-player.is-duration-short { --duration-thumb-shift: -50%; }
.site-design .calculator-duration-player.is-duration-extended { --duration-thumb-shift: 50%; }
/* Endpoint capsules sit wholly before/after their time mark. Keep them inside
   the player on narrow screens; the middle ranges remain centred. */
.site-design .calculator-duration-player:is(.is-duration-short, .is-duration-extended) input { --duration-thumb-width: min(5.75rem, 12.5cqw); }
.site-design .calculator-duration-player[hidden] { display: none; }
.site-design .calculator-duration-display { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-inline: 1rem; color: #52636d; font: 1.05rem/1.4 var(--font-label); }
.site-design .calculator-duration-display > span { display: flex; align-items: center; gap: .5rem; }
.site-design .calculator-duration-display svg { width: 1rem; height: 1rem; flex-shrink: 0; fill: #24333c; }
.site-design .calculator-duration-display strong { color: #24333c; font-size: 1.35rem; font-weight: 400; white-space: nowrap; }
/* The thumb's travel spans the centres of the four equal label columns.
   A separate rail extends beyond both ends without shifting those stops. */
.site-design .calculator-duration-track { position: relative; height: 44px; margin-top: .2rem; cursor: pointer; }
.site-design .calculator-duration-rail { position: absolute; inset: calc(50% - .1875rem) 0 auto; height: .375rem; background: linear-gradient(to right, #ffda72 var(--duration-fill-position, 37.5%), #d5dfe5 var(--duration-fill-position, 37.5%)); clip-path: inset(0 .75rem round 1rem); pointer-events: none; }
.site-design .calculator-duration-rail::after { content: ""; position: absolute; inset: 0 0 0 87.5%; background: repeating-linear-gradient(125deg, #ffda72 0 5px, #b58a2e 5px 7px); opacity: 0; }
.site-design .is-duration-extended .calculator-duration-rail::after { opacity: 1; }
.site-design .calculator-duration-player input { appearance: none; -webkit-appearance: none; position: relative; display: block; width: calc(75% + var(--duration-thumb-width)); height: 44px; margin: 0 calc(12.5% - var(--duration-thumb-width) / 2); padding: 0; border: 0; background: transparent; cursor: pointer; accent-color: #24333c; }
.site-design .calculator-duration-player input::-webkit-slider-runnable-track { height: .375rem; background: transparent; }
.site-design .calculator-duration-player input::-moz-range-track { height: .375rem; background: transparent; }
.site-design .calculator-duration-player input::-moz-range-progress { background: transparent; }
.site-design .calculator-duration-player input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: var(--duration-thumb-width); height: var(--duration-thumb-size); margin-top: calc((.375rem - var(--duration-thumb-size)) / 2); border: var(--duration-thumb-border) solid #ffda72; border-radius: 999px; background: var(--duration-thumb-background); box-shadow: 0 1px 3px #24333c30; transform: translateX(var(--duration-thumb-shift)); cursor: grab; }
.site-design .calculator-duration-player input::-moz-range-thumb { box-sizing: border-box; width: var(--duration-thumb-width); height: var(--duration-thumb-size); border: var(--duration-thumb-border) solid #ffda72; border-radius: 999px; background: var(--duration-thumb-background); box-shadow: 0 1px 3px #24333c30; transform: translateX(var(--duration-thumb-shift)); cursor: grab; }
.site-design .calculator-duration-player input:focus-visible { outline: 2px solid #34596a; outline-offset: 2px; border-radius: .3rem; }
.site-design .calculator-length-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-inline: 1px; }
.site-design .calculator-length-options label { position: relative; min-width: 0; cursor: pointer; }
.site-design .calculator-length-options input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.site-design .calculator-length-options label > span { position: relative; display: grid; justify-items: center; align-content: start; gap: .1rem; min-height: 3.6rem; padding: .6rem .1rem .4rem; border-radius: 3px; text-align: center; }
.site-design .calculator-length-options strong { font-family: var(--font-label); font-size: 1.3rem; font-weight: 400; line-height: 1.4; white-space: nowrap; }
.site-design .calculator-length-options small { color: #52636d; font-size: .95rem; line-height: 1.5; }
.site-design .calculator-length-options input:checked + span strong { background: linear-gradient(177deg, transparent 60%, #ffda72 61% 94%, transparent 95%); }
.site-design .calculator-length-options input:focus-visible + span, .site-design .calculator-style-option input:focus-visible + .calculator-style-card { outline: 3px solid #34596a; outline-offset: 2px; }
.site-design .calculator-length-options label:hover > span { background: #edf3f8; }
.site-design .calculator-quantity-control { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; min-height: 3.25rem; border: 1px solid #c9d3d8; border-radius: 2px; overflow: hidden; }
.site-design .calculator-quantity-control button { min-width: 0; padding: 0; border: 0; color: #24333c; background: #f5f8fa; font-size: 1.65rem; line-height: 1; cursor: pointer; font-family: var(--font-label); }
.site-design .calculator-quantity-control button:hover:not(:disabled) { background: #ffda72; }
.site-design .calculator-quantity-control button:disabled { color: #a4afb5; cursor: default; }
.site-design .calculator-quantity-control input { appearance: textfield; -moz-appearance: textfield; min-width: 0; width: 100%; padding: 0; border: 0; border-inline: 1px solid #e2e7ea; border-radius: 0; background: #fff; color: #24333c; text-align: center; font-size: 1.55rem; font-weight: 400; font-variant-numeric: tabular-nums; font-family: var(--font-label); }
.site-design .calculator-quantity-control input::-webkit-inner-spin-button, .site-design .calculator-quantity-control input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.site-design .calculator-quantity-control :focus-visible { outline: 2px solid #34596a; outline-offset: -3px; }
.site-design .calculator-controls-note { grid-column: 1 / -1; margin-top: -.5rem; color: #52636d; font-size: 1rem; line-height: 1.65; }
.site-design .calculator-voice-title { white-space: nowrap; }
.site-design .calculator-voice-icon { display: inline-block; width: .85em; height: 1.1em; margin-left: .1em; vertical-align: -.13em; transform: rotate(-3deg); }
.site-design .calculator-voice-control { display: grid; gap: .25rem; }
.site-design .calculator-voice-choice { display: flex; align-items: center; gap: .7rem; min-height: 3.25rem; padding: .1rem 0; cursor: pointer; color: #24333c; font-size: 1.25rem; line-height: 1.45; font-family: var(--font-label); font-weight: 400; }
.site-design .calculator-voice-choice small { display: block; margin-top: .2rem; color: #52636d; font-size: 1.05rem; line-height: 1.5; }
.site-design .price-calculator input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; margin: 0; border: 1.3px solid #82939d; border-radius: 3px 2px 4px 2px; background: #fff; cursor: pointer; }
.site-design .price-calculator input[type="checkbox"]:checked { background: #ffda72; border-color: #627782; }
.site-design .price-calculator input[type="checkbox"]:checked::after { content: ""; position: absolute; width: .4rem; height: .75rem; top: .05rem; left: .4rem; border: solid #24333c; border-width: 0 2px 2px 0; transform: rotate(38deg); }
.site-design .price-calculator input[type="checkbox"]:focus-visible { outline: 3px solid #34596a; outline-offset: 3px; }
.site-design .calculator-own-voice { display: flex; align-items: center; gap: .7rem; min-height: 44px; cursor: pointer; color: #52636d; font-size: 1.05rem; line-height: 1.5; font-weight: 400; }
.site-design .calculator-own-voice[hidden] { display: none; }
.site-design .calculator-extras { position: relative; border-top: 1px solid #dbe0e3; }
.site-design .calculator-extras > summary { justify-content: flex-start; gap: .65rem; padding: 1rem 2.25rem 0 0; font-family: var(--font-label); color: #24333c; font-size: 1.25rem; font-weight: 400; line-height: 1.5; }
.site-design .calculator-extras > summary::after { position: absolute; top: .9rem; right: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; color: #52636d; background: linear-gradient(135deg, #edf3f8 70%, #d4dfe5 71%); font-size: 1.2rem; }
.site-design .calculator-extras-fields { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1.25rem; }
.site-design .price-calculator .calculator-extras label { margin-bottom: .35rem; font-size: 1.2rem; font-weight: 400; font-family: var(--font-label); }
.site-design .price-calculator .calculator-fields select { width: 100%; min-height: 3rem; padding: .65rem .7rem; border: 1px solid #b4c2ca; border-radius: 2px; background-color: #fff; color: #24333c; font-size: 1.15rem; font-weight: 400; box-shadow: none; font-family: var(--font-label); }
.site-design .price-calculator .calculator-fields select:focus-visible { outline: 3px solid #34596a; outline-offset: 2px; }
.site-design .price-calculator .checkbox-field { display: flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .5rem 0; border: 0; background: transparent; cursor: pointer; }
.site-design .price-calculator .checkbox-field strong { color: #24333c; font-family: var(--font-label); font-size: 1.2rem; font-weight: 400; }
.site-design .calculator-result { position: relative; top: auto; align-self: start; margin: .6rem 0 0; padding: clamp(1.2rem, 2.5vw, 1.75rem); overflow: visible; color: var(--ink); background: #fff; border: 1px solid #d0d6da; border-top: 0; border-radius: 0 0 2px 2px; box-shadow: 2px 5px 6px #24333c12; scroll-margin-top: 6rem; }
.site-design .calculator-result::before { position: absolute; z-index: 0; display: block; content: ""; inset: -4px -.6rem auto; width: auto; height: 4px; border: 0; border-radius: 50%; background: #6f7d86; box-shadow: 0 2px 1px #24333c2b; transform: none; }
.site-design .calculator-result .eyebrow { margin: 0 0 .65rem; padding: 0; background: none; color: #52636d; font-family: var(--font-label); font-size: 1.4rem; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.site-design .calculator-result > output { width: fit-content; max-width: 100%; margin: 0; padding: 0 .2rem; color: #24333c; background: linear-gradient(177deg, transparent 65%, #ffda72 66% 91%, transparent 92%); font-family: var(--font-marker); font-size: clamp(2.8rem, 4vw, 4rem); font-weight: 400; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
.site-design .calculator-result .calculator-vat { margin: .5rem 0 1.4rem; padding: 0; color: #52636d; background: none; font-family: var(--font-label); font-size: 1rem; font-weight: 400; }
.site-design .calculator-length-note { margin: -.35rem 0 1.25rem; padding: .7rem .8rem; border-left: 3px solid #ffda72; background: #f5f8fa; color: #24333c; font: 1.05rem/1.55 var(--font-body); }
.site-design .calculator-length-note[hidden], .site-design [data-mobile-basis][hidden] { display: none; }
.site-design .calculator-length-note a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.site-design .calculator-result :is(li, strong, small, .calc-breakdown__value) { color: #24333c; }
.site-design .calculator-result > ul { margin: 0 0 1.25rem; padding-block: .65rem; border: 0; border-block: 1px solid #dde3e6; }
.site-design .calculator-result > ul > li { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .4rem 0; border: 0; font-family: var(--font-body); font-size: 1.12rem; line-height: 1.65; }
.site-design .calculator-result > ul > li:not(.calc-breakdown__item--note) { position: relative; padding-left: 1.45rem; }
.site-design .calculator-result > ul > li:not(.calc-breakdown__item--note)::before { content: ""; position: absolute; left: 0; top: .65rem; width: 1em; height: 1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23657d70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 18Q14 10 21 5'/%3E%3C/svg%3E") center / contain no-repeat; }
.site-design .calculator-result > ul .calc-breakdown__item--note { display: block; margin-top: .5rem; padding: .65rem; color: #52636d; background: #edf3f8; font-size: 1rem; }
.site-design .calculator-result > ul :is(strong, .calc-breakdown__value) { color: #52636d; font-size: 1.12rem; font-weight: 400; font-family: var(--font-label); }
.site-design .calculator-result .included-list { padding: 0; border: 0; border-radius: 0; background: transparent; }
.site-design .calculator-result .included-list > strong { color: #24333c; font-family: var(--font-label); font-size: 1.25rem; font-weight: 400; }
.site-design .calculator-result .included-list ul { gap: .45rem; font-family: var(--font-body); font-size: 1.15rem; line-height: 1.55; }
.site-design .calculator-result .included-list li::before { color: #657d70; font-family: Arial, sans-serif; font-size: .85rem; }
.site-design .calculator-result .button { --button-rest-color: #fff; width: 100%; min-height: 3rem; padding: .85rem .65rem; color: #fff; background: transparent; font-family: var(--font-label); font-size: 1.15rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.site-design .calculator-result .button::before { background-image: none; background-color: var(--ink); -webkit-mask: var(--button-fill-mask) center / 100% 100% no-repeat; mask: var(--button-fill-mask) center / 100% 100% no-repeat; }
.site-design .calculator-result .button::after { inset: 0; }
.site-design .calculator-result .calculator-copy-status { min-height: 1.2rem; margin-top: .4rem; color: #52636d; font-family: var(--font-label); font-size: 1.15rem; font-weight: 400; }
.site-design .calculator-result > small { margin-top: .5rem; color: #52636d; font-size: 1.05rem; line-height: 1.65; }
.site-design .calculator-mobile-total { position: fixed; z-index: 25; inset: auto .75rem calc(.75rem + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: center; gap: .75rem; max-width: 40rem; margin-inline: auto; padding: .65rem .85rem; border: 1px solid #bcc8ce; border-radius: 3px; background: #fff; box-shadow: 0 3px 16px #24333c20; }
.site-design .calculator-mobile-total[hidden] { display: none; }
.site-design .calculator-mobile-total > div { display: grid; gap: .1rem; }
.site-design .calculator-mobile-total > div > span { color: #52636d; font: 1rem/1.4 var(--font-label); }
.site-design .calculator-mobile-total small { margin-left: .25rem; font-size: .85rem; }
.site-design .calculator-mobile-total [data-mobile-basis] { margin: 0; color: #52636d; font: .85rem/1.2 var(--font-label); }
.site-design .calculator-mobile-total [data-mobile-basis] > span { display: block; margin-top: .2rem; color: #24333c; }
.site-design .calculator-mobile-total strong { width: fit-content; color: #24333c; font: 1.65rem/1.2 var(--font-marker); }
.site-design .calculator-mobile-total button { min-height: 3rem; padding: .65rem .8rem; border: 0; border-radius: 2px; background: #ffda72; color: #24333c; font-size: 1.1rem; font-weight: 400; cursor: pointer; font-family: var(--font-label); }
@media (min-width: 64rem) {
  .site-design .price-calculator { grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 1fr); gap: 2rem; }
  .site-design .calculator-result { position: sticky; top: 6rem; }
}
@media (min-width: 36rem) and (max-width: 63.99rem) {
  .site-design .price-calculator { max-width: 45rem; margin-inline: auto; }
  .site-design .calculator-result { margin-inline: 1.75rem; }
}
@media (max-width: 35.99rem) {
  .site-design .price-calculator { padding: .75rem; gap: 1.5rem; }
  .site-design .calculator-fields { padding: 1rem; gap: 1.4rem; }
  .site-design .calculator-heading h3 { font-size: 1.85rem; }
  .site-design .calculator-style-options { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .site-design .calculator-style-card { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: .6rem; padding: .6rem 1.8rem .6rem .6rem; text-align: left; }
  .site-design .calculator-style-card img { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .site-design .calculator-style-card strong { grid-column: 2; align-self: end; justify-self: start; font-size: 1.3rem; }
  .site-design .calculator-style-card small { grid-column: 2; align-self: start; margin: .2rem 0 0; }
  .site-design .calculator-style-check { top: .35rem; right: .35rem; width: 1.2rem; height: 1.2rem; }
  .site-design .calculator-main-controls { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .site-design .calculator-length-options strong { font-size: clamp(.95rem, 4.5vw, 1.1rem); }
  .site-design .calculator-length-options label > span { padding-inline: 0; }
  .site-design .calculator-length-options small { font-size: .85rem; }
  .site-design .calculator-duration-display { padding-inline: .65rem; }
  .site-design .calculator-duration-display > span { font-size: .95rem; }
  .site-design .calculator-quantity-control { width: 11rem; }
  .site-design .calculator-result { padding: 1.15rem; }
  .site-design .calculator-result > output { font-size: 3rem; }
  .site-design .calculator-controls-note { margin-top: -.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-design .calculator-style-card { transition: none; transition-delay: 0s; }
}

.site-design .section-reviews { background: #fff; }
/* Vertrouwde reviewkaarten: gewone letters, ronde avatars en gouden sterren.
   De bestaande bronvermelding blijft bij iedere afzonderlijke reactie staan. */
.site-design .section-reviews .reviews-grid { grid-auto-columns: clamp(20rem, 31vw, 25rem) !important; padding-block: .75rem 1.75rem; gap: 1.5rem; }
.site-design .section-reviews .review-card { display: flex; flex-direction: column; aspect-ratio: auto; padding: 1.75rem; color: #202124; border: 1px solid #e2e5e8; border-radius: 1.25rem; background: #fff; box-shadow: 0 2px 12px #00000012; font-family: "Google Sans Flex Reviews", Arial, Helvetica, sans-serif; font-size: .875rem; line-height: 1.5; letter-spacing: 0; }
.site-design .review-card .review-author { align-items: center; gap: .85rem; margin: 0 0 1rem; }
.site-design .review-author strong { color: #202124; font-family: inherit; font-size: .95rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.site-design .review-author small { color: #5f6368; font-family: inherit; font-size: .78rem; line-height: 1.4; }
.site-design .review-avatar { width: 3.25rem; height: 3.25rem; flex-basis: 3.25rem; border: 2px solid #e2e5e8; color: #233b49; background: var(--paper-blue); font-family: inherit; font-size: 1.25rem; font-weight: 500; }
.site-design .review-rating { margin-bottom: .6rem; }
.site-design .review-stars { margin: 0; color: #fbbc05; font-family: Arial, Helvetica, sans-serif; font-size: 1rem; letter-spacing: 2px; }
.site-design .review-card blockquote { margin: 0 0 1.25rem; color: #3c4043; font-family: inherit; font-size: .95rem; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.site-design .review-source { margin: auto 0 0; padding-top: .25rem; color: #70757a; font-family: inherit; font-size: .72rem; line-height: 1.4; }
.site-design .reviews-google-link .text-link { display: inline-flex; align-items: center; gap: .65rem; padding-block: .4rem; color: #5f6368; font-family: "Google Sans Flex Reviews", Arial, Helvetica, sans-serif; font-size: .95rem; font-weight: 500; line-height: 1.5; text-decoration: none; }
.site-design .reviews-google-link a:hover { color: #202124; text-decoration: underline; }
.site-design .google-review-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; }
.site-design .home-contact-section { background: #fff; }
.site-design .home-contact-card { position: relative; isolation: isolate; padding: clamp(1.5rem,4vw,3.5rem); border: 0; border-radius: 0; color: var(--ink); background: transparent; box-shadow: none; }
.site-design .home-contact-copy h2 { font-family: var(--font-heading); font-size: clamp(2rem,3vw,2.8rem); font-weight: 400; letter-spacing: 0; }
.site-design .home-contact-copy > p { font-size: var(--body-size); }
.site-design .home-contact-people { background: transparent; }
.site-design .contact-person strong { color: var(--ink); font-family: var(--font-label); font-size: 1.4rem; font-weight: 400; }
.site-design .contact-line,
.site-design .copy-email { color: var(--ink); font-family: var(--font-interface); font-size: .91rem; }
.site-design .contact-general .copy-email { font-size: clamp(1rem, 1.8vw, 1.5rem); }
.site-design .copy-email { max-width: 100%; }
.site-design .email-address { min-width: 0; overflow-wrap: anywhere; font: inherit; color: inherit; }
.site-design .home-contact-section .copy-action-icon { display: inline-grid; width: 1rem; height: 1rem; flex: 0 0 1rem; color: #77868f; }
.site-design .home-contact-section .copy-action-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.site-design .contact-person-avatar { border: 2px solid #222; }
.site-design .copy-toast { font-family: var(--font-interface); }
@media (min-width: 66.25rem) {
  .site-design .home-contact-card { max-width: 76rem; }
  .site-design .home-contact-people .contact-person { padding-inline: 1rem; }
  .site-design .contact-person .contact-line { font-size: 1.05rem; line-height: 1.45; }
}
.site-design .home-extra-section { padding-block: 5rem; background: #fff; border-top: 0; }
.site-design .home-knowledge-section { background: linear-gradient(to bottom, #fff 0%, var(--paper-blue) 22%, var(--paper-blue) 78%, #fff 100%); }
.site-design .home-extra-section .article-card { min-height: 25rem; padding: 1.6rem; border: 1px solid #e1e7ec; border-radius: 1.15rem; box-shadow: 0 5px 16px #263d5210; background: #fff; }
.site-design .home-knowledge-section .knowledge-bank-grid { grid-auto-columns: min(80vw, 18.5rem); }
.site-design .article-card h3 { margin-bottom: 1.1rem; font-family: var(--font-label); font-size: 1.65rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.site-design .knowledge-title-highlight { padding: .02em .12em .08em; background: linear-gradient(177deg, transparent 17%, var(--card-marker, var(--marker-yellow)) 19% 88%, transparent 91%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.site-design .article-card > p { font-size: 1.3rem; line-height: 1.6; }
.site-design .article-card .article-meta { margin-bottom: 1.4rem; font-family: var(--font-label); font-size: .95rem; font-weight: 400; }
.site-design .section-faq .faq-layout > div:first-child h2 { max-width: 17ch; font-size: clamp(2rem,3vw,2.6rem); }
.site-design .section-faq .faq-layout > div:first-child > p:last-child { font-size: var(--body-size); }
.site-design .section-faq .faq-list { gap: 0; }
.site-design .section-faq .faq-list details { overflow: visible; border: 0; border-radius: 0; background: var(--rule-x) left top / 100% 8px no-repeat; box-shadow: none; }
.site-design .section-faq .faq-list summary { min-height: 4.7rem; padding: 1rem 0; font-family: var(--font-label); font-size: 1.5rem; font-weight: 400; }
.site-design .section-faq .faq-list summary span { width: 2rem; height: 2rem; flex-basis: 2rem; color: var(--ink); border: 0; background: transparent; }
.site-design .section-faq .faq-list details > div > p { padding: 0 2.5rem 1.5rem 0; font-size: var(--body-size); line-height: 1.65; }
.site-design .site-footer { padding-top: 3.5rem; font-family: var(--font-interface); }


/* Rechte constructielijnen lopen voorbij de hoeken, met lucht rond de inhoud. */
.site-design .blueprint-frame { --frame-overhang: 12px; position: relative; }
.site-design .blueprint-line { position: absolute; z-index: 1; display: block; background: var(--frame-color, #d1d1d1); pointer-events: none; }
.site-design :is(.blueprint-line-top, .blueprint-line-bottom) { left: calc(-1 * var(--frame-overhang)); right: calc(-1 * var(--frame-overhang)); height: 1px; }
.site-design :is(.blueprint-line-left, .blueprint-line-right) { top: calc(-1 * var(--frame-overhang)); bottom: calc(-1 * var(--frame-overhang)); width: 1px; }
.site-design .blueprint-line-top { top: 0; transform-origin: left center; --line-delay: 0ms; }
.site-design .blueprint-line-right { right: 0; transform-origin: center top; --line-delay: 220ms; }
.site-design .blueprint-line-bottom { bottom: 0; transform-origin: right center; --line-delay: 440ms; }
.site-design .blueprint-line-left { left: 0; transform-origin: center bottom; --line-delay: 660ms; }
.site-design .is-frame-ready > :is(.blueprint-line-top, .blueprint-line-bottom) { transform: scaleX(0); }
.site-design .is-frame-ready > :is(.blueprint-line-left, .blueprint-line-right) { transform: scaleY(0); }
.site-design .is-frame-drawn > .blueprint-line { transform: scale(1); transition: transform 1100ms cubic-bezier(.22,.61,.36,1) calc(500ms + var(--line-delay)); }
@media (prefers-reduced-motion: reduce) {
  .site-design .blueprint-frame > .blueprint-line { transform: none; transition: none; }
}

/* De blauwe kleur valt buiten het rechte, handgetekende streepjeskader. */
.site-design .home-contact-card::before { content: ""; position: absolute; z-index: -2; inset: 0; transform: rotate(-.65deg); pointer-events: none; background: var(--paper-blue); }
.site-design .home-contact-card::after { content: ""; position: absolute; z-index: -1; inset: 0; transform: none; pointer-events: none; border: 5px solid transparent; background-image: var(--sketch-x), var(--sketch-x), var(--sketch-y), var(--sketch-y); background-position: left top, 40px bottom, left 17px, right 60px; background-size: 256px 7px, 256px 7px, 7px 256px, 7px 256px; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-origin: border-box; }

/* Foto en onderschrift blijven samen zichtbaar terwijl de tekst verder scrolt. */
@media (min-width: 48rem) {
  .site-design main > .home-team-section { overflow: visible; }
  .site-design .home-team-grid { align-items: stretch; }
  .site-design .home-team-media-column { min-height: 100%; align-self: stretch; }
  .site-design .home-team-media-card { position: sticky; top: calc(var(--header-height) + 1.5rem); }
}

/* De FAQ-intro volgt de vragen, maar stopt aan het einde van de sectie. */
@media (min-width: 48rem) and (min-height: 36rem) {
  .site-design main > .section-faq { overflow: visible; }
  .site-design .faq-layout > div:first-child { position: sticky; top: calc(var(--header-height) + 1.5rem); align-self: start; }
}

@media (max-width: 66.24rem) {
  .site-design .primary-nav { background: #fff; border: 1px solid #d5d5d5; border-radius: .4rem; }
  .site-design .primary-nav > a { font-size: 1.4rem; }
  .site-design .contact-line { min-height: 2.75rem; }
  .site-design .review-author small, .site-design .review-source { font-size: .875rem; }
  .site-design .site-footer .footer-brand > p { font-size: .9rem; }
  .site-design .home-hero { padding-top: 10rem; padding-bottom: 5rem; }
  .site-design .home-hero .hero-grid { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 2rem; }
  .site-design .hero-statement { font-size: 1.85rem; }
  .site-design .home-hero .hero-lead { font-size: 1.4rem; }
  .site-design .home-hero .button-row { gap: .6rem; margin-top: 1.4rem; }
  .hero-draw-prompt { top: 54%; right: -1.5rem; width: 7.5rem; }
  .hero-draw-prompt p { font-size: .95rem; }
  .hero-draw-prompt a { font-size: .9rem; }
  .site-design .button { padding-inline: 1.25rem; font-size: 1.15rem; }
  .site-design .section-heading { gap: 2rem; }
  .site-design .home-team-grid { gap: 2.5rem; }
  .site-design .home-example-story { gap: 2.5rem; }
  .site-design .workflow-timeline { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
  .site-design .workflow-timeline > li { padding: 0; }
  .site-design .proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.4rem 0; }
  .site-design .proof-grid > div:nth-child(3) { border-left: 0; background-image: none; }
}
/* Drawing mode covers the copy on touchscreens too. Links and controls keep
   their own higher layer; switching drawing off restores normal scrolling. */
@media (max-width: 47.99rem) {
  .site-design { font-size: var(--body-size); }
  .site-design .site-header { padding: .35rem 0; }
  .site-design .home-hero { padding: calc(var(--header-height) + 1.25rem) 0 4.5rem; }
  .hero-drawing, .hero-draw-tools, .hero-draw-prompt { display: none; }
  .site-design .home-hero .hero-grid { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  .site-design .home-hero .hero-copy h1 { margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.12rem; }
  .site-design .hero-statement { max-width: none; font-family: var(--font-label); font-size: clamp(1.1rem, 5.6vw, 1.8rem); line-height: 1.35; letter-spacing: 0; }
  .site-design .hero-statement-line { white-space: nowrap; }
  .site-design .home-hero .hero-lead { font-size: 1.3rem; }
  .site-design .home-hero .hero-review-link { flex-wrap: nowrap; align-items: center; gap: .65rem; }
  .site-design .home-hero .hero-review-link > span:last-child { min-width: 0; }
  .site-design .home-hero .hero-media { display: none; }
  .site-design .home-hero .button-row { display: flex; flex-wrap: wrap; }
  .site-design .home-hero .button { flex: 1 1 10rem; min-height: 3.45rem; padding: .85rem .65rem; }
  .site-design .section-heading { grid-template-columns: minmax(0,1fr); gap: 1.3rem; margin-bottom: 2.2rem; }
  .site-design .section-heading > p { max-width: none; font-size: var(--body-size); }
  .site-design .proof-grid strong { font-size: 1.13rem; }
  .site-design .proof-grid span { font-size: .97rem; }
  .site-design .proof-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); align-items: center; gap: .75rem; }
  .site-design .proof-grid { grid-template-columns: minmax(0,1fr); gap: 1.1rem; }
  .site-design .proof-grid > div { padding: 0; }
  .proof-illustration { display: block; width: 100%; aspect-ratio: 501 / 804; background: url('../img/whiteboard-animatie-laten-maken-320.webp') center / contain no-repeat; background-image: image-set(url('../img/whiteboard-animatie-laten-maken-320.webp') 1x, url('../img/whiteboard-animatie-laten-maken-640.webp') 2x); }
  .site-design .client-logos-section { padding: 2.5rem 0; }
  .site-design .client-logo-row { gap: 1rem; }
  .site-design .home-example-story { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  .site-design .home-example-story .home-example-frame { order: 1; }
  .site-design .home-example-story .home-example-copy { order: 2; }
  .site-design .home-example-story h3 { font-size: 1.9rem; }
  .site-design .home-example-copy p { font-size: var(--body-size); }
  .site-design .home-team-grid { grid-template-columns: minmax(0,1fr); }
  .site-design .home-team-media-column { max-width: 28rem; margin: 0 auto; }
  .site-design .workflow-timeline { grid-template-columns: minmax(0,1fr); gap: 2rem; }
  .site-design .workflow-timeline > li { gap: 1rem; }
  .site-design .workflow-timeline p { font-size: var(--body-size); }
  .site-design .home-contact-card { padding: 1.6rem 1.2rem; }
  .site-design .section-reviews .reviews-grid { grid-auto-columns: min(84vw, 23rem) !important; }
  .site-design .home-contact-copy > p { font-size: var(--body-size); }
  .site-design .home-extra-section { padding-block: 3rem; }
  .site-design .section-faq .faq-list summary { font-size: 1.35rem; }
}
/* Tablets, including the 744px iPad mini, have their own hero layout. */
@media (min-width: 44rem) and (max-width: 66.24rem) {
  .site-design .proof-layout { display: block; }
  .site-design .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .proof-illustration { display: none; }
  .site-design .home-hero { padding: calc(var(--header-height) + 2rem) 0 10rem; }
  .site-design .home-hero .hero-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 1.5rem; }
  .site-design .home-hero .hero-copy h1 { font-family: var(--font-label); font-size: 1.12rem; margin-bottom: 1.25rem; }
  .site-design .hero-statement { font-family: var(--font-heading); font-size: clamp(1.5rem, 3.4vw, 1.85rem); line-height: 1.32; }
  .site-design .hero-statement-line { white-space: normal; text-wrap: balance; }
  .site-design .home-hero .hero-lead { font-size: 1.35rem; }
  .site-design .home-hero .hero-media { display: block; }
  .site-design .home-hero .hero-review-link { flex-wrap: nowrap; }
  .site-design .home-hero .hero-review-link > span:last-child { min-width: 0; }
  .site-design .home-hero .button { flex: 0 1 auto; padding: .85rem 1rem; }
  .hero-drawing, .hero-draw-tools { display: block; }
  .hero-draw-tools { width: 18rem; height: 9rem; bottom: .75rem; right: 1rem; }
  .hero-draw-prompt { top: calc(100% + .75rem); bottom: auto; right: 0; width: 100%; background: transparent; padding: .5rem; }
  .hero-draw-prompt:not([hidden]) { display: grid; }
}
@media (min-width: 44rem) and (pointer: coarse) {
  .hero-draw-action { opacity: 1; visibility: visible; font-size: 1rem; }
  .hero-draw-clear { min-height: 44px; }
}
/* Landscape tablets: keep the delayed invitation beside the drawing, not on it. */
@media (min-width: 66.25rem) and (max-width: 85.5rem) and (pointer: coarse) {
  .hero-draw-prompt { top: 44%; right: -5.5rem; width: 7rem; }
  .hero-draw-prompt p { font-size: 1.05rem; }
  .hero-draw-prompt a { font-size: .95rem; }
}
@media (max-width: 35rem) {
  .site-design .home-contact-people .contact-person { grid-template-columns: 4rem minmax(0, 1fr); gap: 0 .65rem; padding-inline: 0; align-items: center; }
  .site-design .contact-person-avatar { grid-column: 1; grid-row: 1 / 4; align-self: center; margin-top: 0; width: 4rem; height: 4rem; }
  .site-design .contact-person-details { display: contents; }
  .site-design .contact-person-details > strong, .site-design .contact-person .contact-line { grid-column: 2; }
  .site-design .contact-person-details > strong { margin-bottom: .1rem; font-size: 1.25rem; line-height: 1.2; }
  .site-design .contact-line, .site-design .copy-email { font-size: .85rem; }
  .site-design .contact-general .copy-email { font-size: 1rem; }
  .site-design .home-contact-section .copy-email { display: inline-flex; align-items: center; gap: .35rem; line-height: 1.5; }
  .site-design .contact-person .contact-line { min-height: 1.5rem; font-size: .78rem; line-height: 1.35; }
  .site-design .contact-person .copy-email { grid-column: 2; width: fit-content; margin-top: 0; font-size: .78rem; }
  .site-design .contact-person .contact-icon { display: none; }
  .site-design .home-contact-section .copy-action-icon { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-design .button { transition: none; }
  .site-design .button:is(.is-fill-active, :hover, :focus-visible)::after { animation: none; clip-path: none; background: var(--marker-yellow); }
  .site-design .button:is(.is-fill-active, :hover, :focus-visible) > .button-fill-label { animation: none; clip-path: none; }
  .site-design .button:hover { transform: none; }
  .site-design .primary-nav > a:is(:hover, :focus-visible, [aria-current]) .nav-ring-artboard .nav-ring-trace { transition: none; }
}

/* Binnenpagina's gebruiken hetzelfde papier, dezelfde letters en markeringen.
   De inhoudelijke paginatypen behouden hun eigen lees- en videohiërarchie. */
.site-design.has-breadcrumbs { --page-hero-background: #fff; background: #fff; }
.site-design main { position: relative; z-index: 1; padding-block: 0; background: #fff; }
.site-design main > section,
.site-design main > article > header,
.site-design main > article > section { width: 100%; border-radius: 0; }
.site-design:not(.page-home) { padding-top: var(--header-height); }
.site-design .breadcrumbs { padding-block: 1.4rem .5rem; border: 0; background: #fff; }
.site-design .breadcrumbs ol { padding: 0; color: #626b70; font-family: var(--font-interface); font-size: .72rem; line-height: 1.7; }
.site-design :is(.page-hero, .article-hero, .examples-intro, .knowledge-hero) {
  padding: clamp(2rem, 4vw, 4rem) 0 clamp(3.5rem, 6vw, 6rem);
  color: var(--ink);
  background: linear-gradient(to bottom, #fff 65%, var(--paper-blue));
}
.site-design :is(.page-hero, .article-hero, .examples-intro)::before,
.site-design :is(.page-hero, .article-hero, .examples-intro)::after { display: none; }
.site-design :is(.page-hero, .article-hero, .examples-intro, .knowledge-hero, .watch-heading) h1 {
  max-width: 25ch;
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: 0;
}
.site-design :is(.page-hero, .article-hero, .knowledge-hero, .examples-intro, .watch-heading) .eyebrow {
  display: table;
  padding: .12rem .3rem;
  color: var(--ink);
  background: linear-gradient(178deg, transparent 10%, var(--marker-yellow) 10% 92%, transparent 92%);
}
.site-design :is(.page-hero, .article-hero) .hero-copy,
.site-design .knowledge-hero-inner { padding: 0; min-height: 0; }
.site-design :is(.article-hero-inner, .price-hero-inner, .page-hero .hero-grid) {
  width: min(calc(100% - var(--gutter) * 2), var(--container));
  max-width: var(--container);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.site-design :is(.article-hero-with-image, .price-hero-inner, .page-hero-about .hero-grid) {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.site-design :is(.article-hero, .page-hero) .hero-lead,
.site-design :is(.knowledge-intro, .examples-intro p:not(.eyebrow), .price-hero-example) {
  max-width: 46rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.6;
  opacity: 1;
}
.site-design .article-hero-illustration:not(.article-hero-scroll-window) img { mix-blend-mode: multiply; }
.site-design .article-hero-illustration:not(.article-hero-scroll-window) { background: transparent; }
.site-design .article-hero-scroll-window { isolation: isolate; border: 0; border-radius: 4px; }
.site-design .article-hero-scroll-window::after { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; box-shadow: inset 0 2px 5px #17273230, inset 4px 7px 18px #17273224, inset -1px -1px 4px #17273210; pointer-events: none; }
.site-design .page-hero .team-media {
  min-height: 0;
  padding: .8rem;
  border: 1px solid #b8cbd9;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.site-design .page-hero .team-media img { height: auto; border-radius: 0; }
.site-design .price-hero-art { padding: 1rem; }
.site-design .price-hero-art img { mix-blend-mode: multiply; }
.site-design .price-hero-copy .text-link { font-size: 1.2rem; }
.site-design .price-hero-note { font-size: 1.1rem; }

/* Lange teksten: ruim leesritme, korte regels en rustige metadata. */
.site-design :is(.prose, .article-prose) { color: var(--ink); }
.site-design :is(.prose, .article-prose) :is(p, li),
.site-design .watch-description p { color: var(--ink); font-size: var(--body-size); line-height: 1.7; }
.site-design :is(.prose, .article-prose) :is(h2, h3) { color: var(--ink); }
.site-design .article-prose h2 { max-width: 29ch; font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.site-design :is(.article-prose, .prose, .watch-description) a:not(.button) { color: #244b60; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.site-design :is(.article-prose, .prose, .watch-description) a:not(.button):hover { color: #171717; }
.site-design .article-prose :is(.article-example-label, .article-script-scenes strong) { font-family: var(--font-label); font-size: 1.15rem; font-weight: 400; }
.site-design .article-byline { font-family: var(--font-interface); }
.site-design .article-author-details strong { font-size: .86rem; }
.site-design .article-author-details small { font-size: .72rem; color: #626b70; }
.site-design .article-dates { color: #626b70; font-family: var(--font-interface); font-size: .7rem; }
.site-design .article-aside { padding: .5rem 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.site-design .article-aside > strong { margin: 0 0 .9rem .25rem; color: var(--ink); font-family: var(--font-label); font-size: 1.3rem; font-weight: 400; }
/* Een uitsnede in het papier, met één afgerond lipje dat de leespositie volgt.
   Iedere link reserveert dezelfde ruimte: de actieve regel wordt niet breder. */
.site-design .article-aside nav { position: relative; isolation: isolate; overflow: hidden; padding-block: .4rem; border-radius: 4px; background: var(--paper-blue); box-shadow: inset 0 2px 5px #17273224, inset 4px 7px 18px #17273214, inset -1px -1px 4px #1727320c; }
.site-design .article-aside nav a { position: relative; display: block; min-height: 3.25rem; padding: .85rem .9rem .85rem 3.3rem; border: 0; border-radius: 0; color: #45505a; background: transparent; font-family: var(--font-label); font-size: 1.08rem; font-weight: 400; line-height: 1.4; transition: color 160ms ease-out; }
.site-design .toc-bookmark { position: absolute; z-index: 1; top: 0; left: 0; width: 2.8rem; height: 2.5rem; pointer-events: none; }
.site-design .toc-bookmark.is-positioned { transition: transform 200ms cubic-bezier(.2, .85, .3, 1.08); }
.site-design .toc-bookmark::before { content: ''; position: absolute; inset: 0 0 0 -2px; border-radius: 0 48% 50% 0; background: #fff; box-shadow: 3px 2px 5px #17273230, 4px 5px 12px #17273220; }
.site-design .toc-bookmark::after { content: ''; position: absolute; left: .25rem; top: 50%; width: 1.9rem; height: 1.6rem; background: url('../img/toc-chapter-arrow.svg') center / contain no-repeat; transform: translateY(-50%); }
.site-design .article-aside nav a[aria-current="location"] { color: var(--ink); background: transparent; }
.site-design .article-aside nav a:is(:hover, :focus-visible) { color: var(--ink); background: transparent; }
.site-design .article-aside nav a:is(:hover, :focus-visible, [aria-current="location"]) .text-link-ink { background-size: 100% 100%; }
.site-design .article-aside nav a:focus-visible { outline: 2px dashed var(--ink); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  .site-design .article-aside nav a,
  .site-design .toc-bookmark.is-positioned { transition: none; }
}
.site-design .article-aside .button { padding: .85rem .65rem; font-size: 1.1rem; }
.site-design :is(.article-sources, .article-author-note) { color: #525e67; font-family: var(--font-interface); }
.site-design .article-sources li { color: #525e67; font-family: var(--font-interface); font-size: .85rem; line-height: 1.8; }
.site-design .article-sources p { color: #525e67; font-family: var(--font-interface); font-size: .82rem; line-height: 1.6; }
.site-design .article-author-note p { color: #525e67; font-family: var(--font-interface); font-size: .82rem; line-height: 1.8; }
.site-design :is(.original-image, .original-video) figcaption { color: #525e67; font-size: 1.12rem; line-height: 1.6; }
.site-design .article-card { border: 1px solid #dce4e9; border-radius: .8rem; background: #fff; box-shadow: 0 3px 12px #263d5208; }
.site-design .article-card .article-meta { font-family: var(--font-label); font-size: 1rem; font-weight: 400; }
.site-design .article-card > p:not(.article-meta) { color: var(--ink-soft); font-size: 1.25rem; line-height: 1.6; }
.site-design .article-card h3 { color: var(--ink); }
.site-design .article-callout { padding: clamp(1.4rem, 3vw, 2.5rem); color: var(--ink); border: 1px dashed #a3b8c8; border-radius: 0; background: var(--paper-blue); }
.site-design .article-callout p { color: var(--ink); }
.site-design .article-callout .button-row { margin-top: 1.5rem; }

/* Losse kennisbank en portfolio: dezelfde kaarten, geen oude kleurcodering. */
.site-design .knowledge-hero h1 { max-width: 25ch; }
.site-design .knowledge-topics { gap: .75rem 1.5rem; }
.site-design .knowledge-topics a { font-family: var(--font-label); font-size: 1.15rem; font-weight: 400; }
.site-design .knowledge-section-heading { margin-bottom: 2rem; }
.site-design .knowledge-section-heading h2 { font-family: var(--font-heading); font-size: clamp(1.9rem, 2.8vw, 2.6rem); font-weight: 400; letter-spacing: 0; }
.site-design .knowledge-section-heading p { font-size: 1.35rem; line-height: 1.6; }
.site-design .knowledge-feature > a { border: 1px solid #d9e3ea; border-radius: .9rem; box-shadow: 0 4px 16px #263d5209; }
.site-design .knowledge-feature-image { background: var(--paper-blue); padding-block: 1.5rem; }
.site-design .knowledge-feature-image img { mix-blend-mode: multiply; }
.site-design .knowledge-label { color: #525e67; font-family: var(--font-label); font-size: 1rem; font-weight: 400; letter-spacing: .01em; }
.site-design :is(.knowledge-feature, .knowledge-entry) h3 { font-family: var(--font-label); font-size: 1.7rem; font-weight: 400; line-height: 1.35; letter-spacing: 0; }
.site-design .knowledge-feature h3 { display: inline; text-decoration: underline; text-decoration-color: var(--marker-yellow); text-decoration-thickness: .35em; text-underline-offset: -.12em; text-decoration-skip-ink: none; }
.site-design .knowledge-feature-copy > p:not(.knowledge-label),
.site-design .knowledge-entry a > p:not(.knowledge-label) { color: var(--ink-soft); font-size: 1.25rem; line-height: 1.6; }
.site-design .knowledge-read { font-family: var(--font-label); font-size: 1.15rem; font-weight: 400; }
.site-design .knowledge-entry { border-top: 0; background: var(--sketch-x) left top / 256px 7px repeat-x; }
.site-design .knowledge-entry a { padding-block: 1.75rem; }
.site-design .knowledge-entry-arrow { font-family: var(--font-interface); font-size: 1rem; }
.site-design:not(.page-home) .section-work { padding-bottom: var(--section-space); }
.site-design .examples-gallery { background: #fff; }
.site-design .case-card { border: 0; border-radius: 0; color: var(--ink); background: transparent; box-shadow: none; }
.site-design .case-card:nth-child(n) { --case-accent: var(--marker-yellow); }
.site-design .case-media { border: 2px solid #202020; border-radius: 2px; }
.site-design .case-card-body { padding: 1.2rem 0 0; }
.site-design .case-card-body h3 { font-family: var(--font-label); font-size: 1.65rem; font-weight: 400; letter-spacing: 0; }
.site-design .case-card-body > p:not(.case-meta) { font-size: 1.2rem; line-height: 1.6; }
.site-design .case-meta { padding: 0; color: #525e67; background: none; font-family: var(--font-label); font-size: 1rem; font-weight: 400; }
.site-design .case-media .play-button { color: #fff; background: #171717; border: 0; box-shadow: none; }
.site-design .case-media:hover .play-button { color: #171717; background: var(--marker-yellow); }
.site-design .play-label { font-family: var(--font-label); font-size: 1rem; font-weight: 400; }
.site-design .watch-section { background: #fff; padding-top: 1.75rem; }
.site-design .watch-heading h1 { max-width: 36ch; font-size: clamp(1.85rem, 2.8vw, 2.5rem); }
.site-design .watch-player { border: 2px solid var(--ink); border-radius: 2px; box-shadow: none; }
.site-design .video-preview-play { color: #fff; background: #171717; font-family: var(--font-label); font-size: 1.1rem; font-weight: 400; border-radius: 2px; }
.site-design .video-preview:hover .video-preview-play { color: #171717; background: var(--marker-yellow); }
.site-design .watch-meta { color: #626b70; font-family: var(--font-interface); font-size: .75rem; }
.site-design .watch-navigation { border: 0; background: var(--sketch-x) left top / 256px 7px repeat-x; font-family: var(--font-label); font-size: 1.2rem; }

/* Werkwijze, kosten, sectoren en over ons: rustig blauw in plaats van kleurvakken. */
.site-design .section.section-dark,
.site-design .section.section-accent,
.site-design .section.about-story-tinted { color: var(--ink); background: var(--paper-blue); }
.site-design .section-dark :is(h2, h3, p, li, .eyebrow, .prose),
.site-design .section-accent :is(h2, h3, p, li, .eyebrow, .prose) { color: var(--ink); }
.site-design .section-dark .prose a { color: #244b60; }
.site-design .section-calculator .section-heading > p { color: var(--ink) !important; }
.site-design .process-timeline { gap: 0; max-width: none; border: 0; }
.site-design .process-timeline li { padding-block: 2rem; border: 0; border-radius: 0; background: var(--sketch-x) left top / 256px 7px repeat-x; box-shadow: none; }
.site-design .process-timeline li > span { display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--ink); background: var(--marker-yellow); border: 1.5px solid var(--ink); border-radius: 48% 44% 51% 45%; font-family: var(--font-heading); font-size: 1.9rem; font-weight: 400; }
.site-design .process-timeline h2 { font-family: var(--font-label); font-size: 1.9rem; font-weight: 400; line-height: 1.3; }
.site-design .process-timeline p { font-size: var(--body-size); line-height: 1.6; }
.site-design .process-timeline small { color: #526570; font-size: 1.15rem; }
.site-design .briefing-notes { margin: 1.75rem 0 0; }
.site-design .briefing-notes > div { position: relative; padding: 1.25rem 0 1.25rem 1.8rem; background: var(--sketch-x) left top / 256px 7px repeat-x; }
.site-design .briefing-notes > div::before { content: '✓'; position: absolute; left: 0; top: 1.25rem; color: #657d70; }
.site-design .briefing-notes dt { color: var(--ink); font: 400 1.45rem/1.3 var(--font-label); }
.site-design .briefing-notes dd { margin: .4rem 0 0; font-size: var(--body-size); line-height: 1.6; }
.site-design .section-example-reel { --example-paper: #fff; }
.site-design .portfolio-grid .home-example-compact { --example-paper: var(--paper-blue); }
.site-design .portfolio-grid .home-example-copy h3 { font-size: 1.3rem; }
.site-design .price-table { color: var(--ink); font-family: var(--font-label); font-size: 1.25rem; border-radius: .5rem; }
.site-design .price-table :is(th, td) { color: var(--ink); background: #fff; border-color: #cad9e3; }
.site-design .price-table thead th { background: var(--paper-blue); }
.site-design .price-table caption { color: #526570; font-family: var(--font-body); font-size: 1.1rem; }
.site-design .price-factors-copy > h3 { font-size: 1.75rem; }
.site-design .about-maker { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1.25rem; background: #fff; border-radius: .5rem; }
.site-design .about-maker img { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.site-design .about-maker > div { min-width: 0; }
.site-design .about-maker h3 { margin: 0 0 .15rem; font-family: var(--font-label); font-size: 1.55rem; line-height: 1.2; font-weight: 400; }
.site-design .about-maker p { margin: 0 0 .4rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.3; }
.site-design .about-maker a { display: block; width: fit-content; max-width: 100%; padding-block: .15rem; font-family: var(--font-interface); font-size: .95rem; line-height: 1.4; overflow-wrap: normal; }
.page-about #about-name-title { max-width: none; font-size: clamp(1.45rem, 2.5vw, 2.3rem); overflow-wrap: normal; }
.page-about #about-name-title span { white-space: nowrap; }
.about-history-image { margin-block: 3rem 0; }
.about-history-image img { display: block; width: 100%; height: auto; }
.about-history-link { display: block; }
.about-history-link:focus-visible { outline: 2px dashed var(--ink); outline-offset: 6px; }
.about-history-image figcaption { max-width: 52rem; margin: 1rem auto 0; text-align: center; color: var(--ink-soft); font-size: 1rem; font-style: italic; line-height: 1.5; }
@media (max-width: 600px) {
  .site-design .about-maker { grid-template-columns: 4rem minmax(0, 1fr); gap: .75rem; padding: 1rem .5rem; }
  .site-design .about-maker img { width: 4rem; height: 4rem; }
  .site-design .about-maker h3 { font-size: 1.35rem; }
  .site-design .about-maker p { font-size: .95rem; }
  .site-design .about-maker a { font-size: .8rem; }
}
.site-design .about-label-note { color: var(--ink-soft); font-size: 1.15rem; }
.site-design .closing-cta { padding: var(--section-space) 0; color: var(--ink); background: var(--paper-blue); }
.site-design .closing-cta::before,
.site-design .closing-cta::after { display: none; }
.site-design .closing-cta :is(h2, p, .eyebrow) { color: var(--ink); }
.site-design .closing-cta p:not(.eyebrow) { max-width: 40rem; font-size: var(--body-size); line-height: 1.6; }
.site-design .closing-cta .button-row { justify-content: flex-start; }
.site-design .not-found { color: var(--ink); background: var(--paper-blue); }
.site-design .not-found h1 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; }
.site-design .not-found-code { font-family: var(--font-marker); }

/* Footer reveal: sticky houdt zelf ruimte vrij. De witte pagina schuift erover.
   JS activeert dit alleen wanneer de hele footer in het venster past. */
.site-design .site-footer { position: relative; z-index: 0; margin: 0; color: #afb5b9; background: #111; font-family: var(--font-interface); }
.site-design .site-footer.has-footer-reveal { position: sticky; bottom: 0; }
.site-design .site-footer .footer-grid nav strong { color: #e4e7e9; font-family: var(--font-label); font-size: 1.15rem; font-weight: 400; letter-spacing: .015em; }
.site-design .footer-brand p { font-family: var(--font-interface); }
.site-design .site-footer a:hover { color: var(--marker-yellow); }
.site-design .site-footer :focus-visible { outline-color: var(--marker-yellow); }
.site-design .footer-bottom { font-size: .7rem; }
.site-design .footer-logo-sun { background: var(--marker-yellow); }

@media (min-width: 66.25rem) {
  .site-design .article-layout { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: clamp(3rem, 6vw, 6rem); }
  .site-design .article-aside { grid-column: 2; grid-row: 1; }
  .site-design .article-prose { grid-column: 1; grid-row: 1; max-width: 48rem; }
}
@media (max-width: 55.99rem) {
  .site-design :is(.article-hero-with-image, .price-hero-inner, .page-hero-about .hero-grid) { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .site-design .page-hero .team-media { width: min(100%, 28rem); margin: 0 auto; }
  .site-design :is(.article-hero-illustration, .price-hero-art) { width: min(100%, 24rem); margin-inline: auto; }
}
@media (max-width: 47.99rem) {
  .site-design .breadcrumbs { padding-top: 1rem; }
  .site-design .breadcrumbs ol { font-size: .66rem; }
  .site-design :is(.page-hero, .article-hero, .examples-intro, .knowledge-hero) { padding-block: 2rem 3.5rem; }
  .site-design .article-aside { padding: .5rem 0; }
  .site-design .article-aside .button { width: auto; padding-inline: 1.5rem; }
  .site-design .watch-heading h1 { font-size: 1.85rem; }
  .site-design .knowledge-topics { gap: .6rem 1.1rem; }
  .site-design .knowledge-topics a { font-size: 1.05rem; }
}
@media print {
  .site-design .site-footer.has-footer-reveal { position: static; }
  .site-design .site-header { position: static; }
  .site-design main { box-shadow: none; }
}