/* =========================================================================
   Braaf. — website (uit XD: BRF000 Braaf website)
   -------------------------------------------------------------------------
   Eén regel om te onthouden: ALLES is em.
   De body krijgt één vloeiende basismaat (18px mobiel → 24px vanaf 1640px)
   en elke kolom, marge, radius en tekstgrootte is daar een veelvoud van.
   Het XD-ontwerp is 1640px breed met basis 24px, dus: px ÷ 24 = em.

   De ladder (zie :root): --u is één stap van 8px (1em ÷ 3). Binnenruimte is
   altijd een veelvoud van --u. De ronde icoonknop is 40px (5u), een knop of
   rij is 56px hoog (7u = icoon + u boven en onder). Radius volgt "radius in
   radius": buiten = binnen + tussenruimte — 8px binnen op 8px afstand geeft
   16px; een icoonknop (r 20) op u van de rand geeft 28px (--radius-row).
   ========================================================================= */

/* =========================================================================
   Fonts — lokaal (CSP: font-src 'self'): Helvetica Now Display (licentie
   Braaf) en Libre Baskerville Italic (SIL Open Font License 1.1, via
   Fontsource) voor de schuine accenten.
   ========================================================================= */
@font-face { font-family: 'Helvetica Now Display'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/theme/static/fonts/HelveticaNow/HelveticaNowDisplay-Medium.woff2') format('woff2'), url('/theme/static/fonts/HelveticaNow/HelveticaNowDisplay-Medium.woff') format('woff'); }
@font-face { font-family: 'Helvetica Now Display'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/theme/static/fonts/HelveticaNow/HelveticaNowDisplay-Bold.woff2') format('woff2'), url('/theme/static/fonts/HelveticaNow/HelveticaNowDisplay-Bold.woff') format('woff'); }
@font-face { font-family: 'Libre Baskerville'; font-weight: 400; font-style: italic; font-display: swap;
  src: url('/theme/static/fonts/LibreBaskerville/libre-baskerville-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Baskerville'; font-weight: 400; font-style: italic; font-display: swap;
  src: url('/theme/static/fonts/LibreBaskerville/libre-baskerville-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0b0b0b;
  --paper: #f2f2f2;
  --white: #ffffff;
  --yellow: #ffcd00;
  --red: #d40000;
  --line-ink: rgba(11, 11, 11, .14);
  --line-white: rgba(255, 255, 255, .28);
  --muted-ink: rgba(11, 11, 11, .6);
  --muted-white: rgba(255, 255, 255, .64);

  --sans: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;

  /* layout — afgeleid van het XD-grid: 6 kolommen, gutter 24, marge 176 */
  --wrap: 53.5em;        /* 1284px  */
  --gutter: 1em;         /* 24px — tussenruimte tussen kolommen */
  --margin: 2em;          /* 48px — zijmarge van de pagina: altijd 2em, zodat een outdent minstens 1em kan zijn */
  --edge: 3em;           /* 72px — ruimte boven de header */
  --hang: 4.333em;       /* 104px — logo (80) + gap (24): zoveel steekt de header uit op brede schermen */
  /* maatladder — alles relatief aan 1em, dus het schaalt mee met de basis */
  --u: calc(1em / 3);                              /* 8px  — één stap */
  --icon: calc(5 * var(--u));                      /* 40px — ronde icoonknop */
  --control: calc(7 * var(--u));                   /* 56px — knop- en rijhoogte */
  /* radius in radius: buiten = binnen + tussenruimte */
  --radius-s: var(--u);                            /* 8px  */
  --radius-m: calc(2 * var(--u));                  /* 16px = 8 + 8 */
  --radius-l: calc(3 * var(--u));                  /* 24px */
  --radius-xl: calc(6 * var(--u));                 /* 48px */
  --radius-row: calc(var(--icon) / 2 + var(--u));  /* 28px — icoonknop (r 20) + u */
  /* outdent — vlakken en grids steken buiten de tekstkolom uit, zodat hun
     inhoud op het grid blijft staan (patroon van de cases-slider: 2em).
     Nooit meer dan er naast de kolom ruimte is. */
  --outdent: min(2em, max(var(--margin) / 2, (100vw - var(--wrap)) / 2 - .5em));
  --section: 6em;        /* 144px — ritme tussen secties */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: .125em solid var(--yellow); outline-offset: .2em; border-radius: .2em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- vloeiende basis: 18px @ 375 → 24px @ 1640 ---------- */
body {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, calc(16.22px + .4743vw), 24px);
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-ink { background: var(--ink); color: var(--white); }
/* de inhoud begint en eindigt binnen de veilige zones — zo valt niets onder de statusbalk of home-balk */
body { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
/* viewport-lijst: een witte rand rondom het scherm met ronde binnenhoeken —
   in rust .5em, tijdens het scrollen 1em (braaf.js zet .is-scrolling; bij
   stilstand rustig terug). --lijst stuurt de lijst én de Safari-strips. */
:root { --lijst: .5em; --lijst-r: var(--radius-m); }
.is-scrolling { --lijst: 1em; --lijst-r: var(--radius-l); }
body::after {
  content: ""; position: fixed; z-index: 45; pointer-events: none;
  /* plus de veilige zones van het toestel (notch / dynamic island boven,
     home-balk onder, zijkanten in landscape; viewport-fit=cover in de head) */
  inset: calc(var(--lijst) + env(safe-area-inset-top, 0px)) calc(var(--lijst) + env(safe-area-inset-right, 0px))
         calc(var(--lijst) + env(safe-area-inset-bottom, 0px)) calc(var(--lijst) + env(safe-area-inset-left, 0px));
  border-radius: var(--lijst-r);
  box-shadow: 0 0 0 100vmax var(--white);   /* ruim genoeg om ook de veilige zones te vullen */
  transition: inset .7s cubic-bezier(.2,.8,.2,1), border-radius .7s cubic-bezier(.2,.8,.2,1);   /* stilstand: rustig terug */
}
/* Safari 26 negeert theme-color en kleurt zijn balken naar een vast element met
   een dichte achtergrond tegen de rand (≤ 4px van boven / ≤ 3px van onder, ≥ 80%
   breed, ≥ 3px hoog). Twee echte, lege elementen in de header (pseudo-elementen
   tellen niet mee) geven Safari wit; ze volgen de lijst. */
.safari-tint { position: fixed; left: 0; right: 0; z-index: 46; pointer-events: none; background: var(--white); transition: height .7s cubic-bezier(.2,.8,.2,1); }
.safari-tint--top    { top: 0;    height: calc(var(--lijst) + env(safe-area-inset-top, 0px)); }
.safari-tint--bottom { bottom: 0; height: calc(var(--lijst) + env(safe-area-inset-bottom, 0px)); }
.is-scrolling body::after, .is-scrolling .safari-tint { transition-duration: .3s; }   /* scrollen: vlot erin */
body.is-white { background: var(--white); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4em; z-index: 100; background: var(--yellow); color: var(--ink); padding: var(--u) calc(2 * var(--u)); border-radius: 99em; font-weight: 700; }
.skip:focus { top: 1em; }

/* ---------- typografie (XD-px ÷ 24) ---------- */
.t-display { font-size: 3em;     line-height: 1.111; font-weight: 500; }  /* 72/80 */
.t-h1      { font-size: 2.333em; line-height: 1.143; font-weight: 500; }  /* 56/64 */
.t-h2      { font-size: 1.75em;  line-height: 1.143; font-weight: 500; }  /* 42/48 */
.t-h3      { font-size: 1.5em;   line-height: 1.222; font-weight: 500; }  /* 36/44 */
.t-h3b     { font-size: 1.5em;   line-height: 1.222; font-weight: 700; }
.t-body    { font-size: 1em;     line-height: 1.5; }                       /* 24/36 */
.t-lead    { font-size: .833em;  line-height: 1.4; font-weight: 700; }    /* 20/28 */
.t-eyebrow { font-size: .75em;   line-height: 1.3; display: block; margin-bottom: .4em; } /* 18 */
.t-meta    { font-size: max(.583em, 12px); line-height: 1.6; color: var(--muted-ink); } /* 14 */
.is-ink .t-meta, .on-ink .t-meta { color: var(--muted-white); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }

@media (max-width: 48em) {
  .t-display { font-size: 2.05em; }
  .t-h1      { font-size: 1.75em; }
  .t-h2      { font-size: 1.45em; }
  .t-h3, .t-h3b { font-size: 1.3em; }
}

/* golflijn — onder een woord, in tekstkleur (mask, dus currentColor) */
.squiggle { position: relative; white-space: nowrap; }
.squiggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .16em;   /* net onder de basislijn, in de onderkast-ruimte */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.5' height='6' viewBox='0 0 14.5 6'%3E%3Cpath d='M0 2C3.6 2 3.6 4.5 7.25 4.5S10.9 2 14.5 2' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 50% / auto 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.5' height='6' viewBox='0 0 14.5 6'%3E%3Cpath d='M0 2C3.6 2 3.6 4.5 7.25 4.5S10.9 2 14.5 2' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 50% / auto 100%;
}

/* woordafbreking: alleen woorden van ≥ 10 tekens, met ≥ 4 tekens vóór en ná het
   streepje — "Com-pany" blijft heel, lange samenstellingen breken netjes.
   text-wrap: pretty voorkomt een los weeswoord op de laatste regel. */
:where(p, li, h1, h2, h3, figcaption, blockquote) { hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; text-wrap: pretty; }

/* ---------- layout ---------- */
/* linkerkolom-lucht: een smalle linkerkolom naast een brede (2 | 4) staat op het
   stramien, maar krijgt rechts 1em extra binnenruimte — zo komt er adem tussen
   zonder dat het grid verschuift. Alleen naast elkaar, niet gestapeld. */
@media (min-width: 48.01em) {
  .toc, .case__text, .faq h2, .why h2, .service-links h2, .footer-nav__col h2 { padding-right: 1em; }
}
.outdent { margin-inline: calc(-1 * var(--outdent)); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: var(--section); }
.stack > * + * { margin-top: 1em; }

/* ---------- iconen ---------- */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================
   Header
   ========================================================================= */
/* De header lijnt op dezelfde gutter als de content. Alleen op brede schermen
   (vanaf 1500px, waar ruimte is) wordt hij aan beide kanten --hang breder:
   het logo steekt links uit zodat de melding op de contentlijn begint, en
   "Hallo zeggen" steekt rechts evenveel uit voor het evenwicht. */
.site-header {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 1em;
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--margin)); margin-inline: auto;
  padding: var(--edge) var(--margin) 0;
}
@media (min-width: 93.75em) {
  .site-header { max-width: calc(var(--wrap) + 2 * var(--hang) + 2 * var(--margin)); }
}
.brand { width: 3.333em; height: 3.333em; flex: none; display: block; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.brand:hover { transform: rotate(-12deg) scale(1.04); }
.brand { display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--ink); }
.brand .brand-icon { width: 62%; height: auto; overflow: visible; }

/* beeldmerk-entree (uit het vorige jasje, goedgekeurd 2026-08-12): default =
   eindstand, keyframes dragen de startstanden, fill backwards houdt ze vast
   tijdens de delay. Reveal 400ms / stagger 180ms / knipoog 600ms op 620ms. */
.bi-part { animation: bi-reveal 400ms cubic-bezier(.2,.8,.2,1) backwards; }
.bi-neus  { animation-delay: 180ms; }
.bi-oog-l { animation-delay: 360ms; }
@keyframes bi-reveal { from { opacity: 0; transform: translateX(17.8px); } }   /* één rasterpunt rechts */
.bi-ring { animation: bi-knipoog 600ms linear 620ms backwards; }
@keyframes bi-knipoog {
  from { transform: translateY(-17.85px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }  /* rechteroog-hoogte */
  50%  { transform: translateY(4.45px);   animation-timing-function: cubic-bezier(.3, 0, .2, 1); }    /* de knijp */
}
.bi-mask { animation: bi-maskkrimp 600ms linear 620ms backwards; }
@keyframes bi-maskkrimp {
  from { height: 89.1px; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }   /* masker 4×5 — ring vol in beeld */
  40%, to { height: 71.3px; }
}
.brand .brand-icon { animation: bi-nudge 600ms ease-in-out 620ms; }
@keyframes bi-nudge { 50% { rotate: -12deg; } }
@media (prefers-reduced-motion: reduce) {
  .bi-part, .bi-ring, .bi-mask, .brand .brand-icon { animation: none; }   /* statisch = gewoon het merk */
}

/* ---------- knoppen & melding: één opbouw ----------
   label + icoon in een cirkel. De cirkel ís de vulkleur: bij hover groeit hij
   vanuit het icoon (clip-path) tot hij de hele knop vult, en het label neemt de
   kleur-op-vulling aan. Per variant alleen vier kleuren:
   --bg (vlak) · --fg (label) · --fill (cirkel/vulling) · --on-fill (icoon, label bij hover).
   Pijlen: interne link ↘ → ↗ bij hover · externe link (http…) altijd ↗. */
.btn, .notice {
  --bg: var(--ink); --fg: var(--white); --bd: var(--bg); --fill: var(--yellow); --on-fill: var(--ink);
  --r: calc(var(--icon) / 2); --cx: calc(100% - var(--u) - var(--r));   /* cirkel: 40px, u van de rand */
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: 0;
  transition: color .3s ease, border-color .3s ease, padding .3s ease, gap .3s ease;
}
.btn::before, .notice::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;   /* -1px: vulling loopt over de rand door */
  background: var(--fill);
  clip-path: circle(var(--r) at var(--cx) 50%);
  transition: clip-path .5s cubic-bezier(.2,.8,.2,1);
}
:is(.btn, .notice):is(:hover, :focus-visible) { color: var(--on-fill); border-color: var(--fill); }
:is(.btn, .notice):is(:hover, :focus-visible)::before { clip-path: circle(150% at var(--cx) 50%); }

/* knop = pil van --control hoog. Rechts staat de cirkel op u van de rand;
   links houdt het label extra lucht (3u = 1em), want de ronde kant eet ruimte
   op. Hover: het label deukt u in en de tussenruimte krimpt even veel mee —
   de knop verandert niet van breedte. */
.btn {
  --lead: calc(3 * var(--u)); --gap: calc(2 * var(--u)); --dent: var(--u);
  height: var(--control); padding: 0 var(--u) 0 var(--lead); gap: var(--gap); border-radius: 99em;
}
.btn:is(:hover, :focus-visible) { padding-left: calc(var(--lead) + var(--dent)); gap: calc(var(--gap) - var(--dent)); }
.btn > .icon { width: var(--r); height: var(--r); margin: calc(var(--r) / 2); color: var(--on-fill); transition: transform .3s ease; }

.notice {
  --bg: var(--white); --fg: var(--ink);
  height: var(--control); padding: 0 var(--u) 0 calc(3 * var(--u)); gap: calc(2 * var(--u)); border-radius: var(--radius-row); border: 0;
}
.is-white .notice { --bg: var(--paper); }
.service-hero .notice { --bg: var(--white); }
.notice .squiggle::after { bottom: -.08em; height: .2em; }
.notice__go { width: calc(var(--r) * 2); height: calc(var(--r) * 2); display: grid; place-items: center; color: var(--on-fill); }
.notice__go .icon { width: var(--r); height: var(--r); transition: transform .3s ease; }

/* pijlrichting */
:is(.btn, .notice) .icon--arrow { transform: rotate(90deg); }
:is(.btn, .notice):is(:hover, :focus-visible) .icon--arrow { transform: rotate(0deg); }
:is(.btn, .notice)[href^="http"] .icon--arrow { transform: none; }
/* overige iconen: een klein duwtje in hun eigen richting */
.btn:is(:hover, :focus-visible) :is(.icon--download, .icon--corner) { transform: translateY(.12em); }

/* varianten */
.btn--white  { --bg: var(--white);  --fg: var(--ink); }
.btn--yellow { --bg: var(--yellow); --fg: var(--ink); --fill: var(--ink); --on-fill: var(--white); }
.btn--ghost  { --bg: transparent; --fg: var(--ink); --bd: var(--ink); --fill: var(--ink); --on-fill: var(--white); }
.on-ink .btn--ghost, .is-ink .btn--ghost { --fg: var(--white); --bd: var(--white); --fill: var(--white); --on-fill: var(--ink); }
.why .btn { --fill: var(--white); }                     /* geel vlak: niet geel vullen */
.is-ink .btn--yellow { --fill: var(--white); --on-fill: var(--ink); }   /* donkere pagina: niet inkt vullen */
.site-header .btn { margin-left: auto; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--u); margin-top: 1em; }

/* ronde pijlknop (40px) */
.arrow {
  width: var(--icon); height: var(--icon); border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--white); color: var(--ink);
  transition: transform .25s ease, background .2s;
}
.arrow .icon { width: calc(var(--icon) / 2); height: calc(var(--icon) / 2); transform: rotate(90deg); transition: transform .25s ease; }

@media (max-width: 48em) {
  .site-header { padding: var(--margin) var(--margin) 0; gap: .667em; }   /* boven = de zijmarge (2em): overal dezelfde afstand tot de lijst */
  .brand { width: 2.6em; height: 2.6em; }
  .notice { display: none; }
}
@media (max-width: 22em) {
  .site-header .btn .label-long { display: none; }
}

/* =========================================================================
   Home
   ========================================================================= */
.home-hero { text-align: center; padding-top: 2.25em; }
.home-hero .t-display { max-width: 18em; margin-inline: auto; text-wrap: balance; }
/* schuine woorden als chips — idee: arounda.agency, vertaald naar Braaf.
   rust: zachte pil · hover/focus: gele pil + drie inkt-bolletjes die eruit springen */
.chip {
  --bub: .78em;
  position: relative; display: inline-block;
  font-size: .94em; line-height: 1.05;
  padding: .04em .26em .1em; margin-inline: .02em;
  border-radius: 99em; background: rgba(11,11,11,.06);
  transition: background .3s ease, transform .4s cubic-bezier(.3,1.6,.5,1);
}
.chip:focus-visible { outline-offset: .06em; border-radius: 99em; }
.chip__bubble {
  position: absolute; z-index: 2; width: var(--bub); height: var(--bub); border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--yellow);
  box-shadow: 0 .12em .3em -.1em rgba(11,11,11,.35);
  opacity: 0; transform: scale(.3) rotate(-35deg);
  transition: opacity .2s ease, transform .5s cubic-bezier(.3,1.7,.5,1);
  pointer-events: none;
}
.chip__bubble .icon { width: 54%; height: 54%; stroke-width: 2.1; }
.chip__bubble:nth-of-type(1) { left: -.42em;  top: -.46em;   --r: -12deg; }
.chip__bubble:nth-of-type(2) { right: -.4em;  top: -.58em;   --r: 10deg;  transition-delay: .06s; }
.chip__bubble:nth-of-type(3) { left: 36%;     bottom: -.62em; --r: -6deg;  transition-delay: .12s; }
.chip:is(:hover, :focus-visible, .is-on) { background: var(--yellow); transform: rotate(-1.5deg); }
.chip:is(:hover, :focus-visible, .is-on) .chip__bubble { opacity: 1; transform: scale(1) rotate(var(--r)); }
.chip:nth-of-type(2):is(:hover, :focus-visible, .is-on) { transform: rotate(1.5deg); }
@media (prefers-reduced-motion: reduce) {
  .chip, .chip:is(:hover, :focus-visible, .is-on) { transform: none; }
  .chip__bubble { transform: none !important; }
}

/* wiel met beelden — kaarten langs een ellips met het middelpunt ver onder de hero.
   Per kaart: --w/--h (formaat) en --t0 (startpositie op de ellips, uit het buildscript).
   --a/--b = halve breedte/hoogte van de ellips (unitless, in em).
   --p = scrollvoortgang (JS); alle kaarten schuiven samen --travel over de ellips.
   Elke kaart staat met haar middelpunt op de ellips en kantelt mee met de raaklijn. */
.wheel-clip {
  overflow: hidden; padding-bottom: .5em;   /* geen vervaging aan de randen: de kaarten lopen strak onder de witte lijst door */
}
.wheel {
  --travel: -.42rad; --rim: 8.75em;
  position: relative; height: 25em; margin-top: 4.5em;
}
/* hoe breder het scherm, hoe meer kaarten aan de randen in beeld komen — en die
   staan lager op de ellips. De hoogte groeit mee zodat nergens een zichtbare
   kaart wordt afgesneden. (Gemeten binnen de dekkende zone: ~22em tot 1640px, daarna ~0,145px per px schermbreedte.) */
.wheel { height: max(22.5em, calc(22.5em + (100vw - 1640px) * .145)); }
.wheel__rim { position: absolute; left: 50%; top: var(--rim); width: 0; height: 0; }
.wheel__item {
  --t: calc(var(--t0) + var(--p, 0) * var(--travel));
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2);
  width: var(--w); height: var(--h);
  border-radius: var(--radius-m); overflow: hidden; background: var(--ink); color: var(--white);
  box-shadow: 0 1.5em 3em -1.5em rgba(11,11,11,.28);
  transform:
    translate(calc(var(--a) * 1em * sin(var(--t))), calc(var(--b) * 1em * (1 - cos(var(--t)))))
    rotate(atan2(calc(var(--b) * sin(var(--t))), calc(var(--a) * cos(var(--t)))));
  will-change: transform;
}
.wheel__item img { width: 100%; height: 100%; object-fit: cover; }
.wheel__item.is-quote { display: flex; flex-direction: column; justify-content: space-between; padding: 1em; background: var(--ink); }
.wheel__item.is-quote::before { content: "“"; font-family: var(--serif); font-size: 3em; line-height: .6; color: var(--yellow); }
.wheel__item blockquote { font-family: var(--serif); font-style: italic; font-size: 1.15em; line-height: 1.3; letter-spacing: -.01em; }
.wheel__item figcaption { font-size: .62em; line-height: 1.35; color: var(--muted-white); }
.wheel__item figcaption strong { display: block; color: var(--white); }
.wheel__badge {
  position: absolute; left: 1em; bottom: 1em; display: inline-flex; align-items: center; gap: var(--u);
  padding: var(--u) calc(2 * var(--u)) var(--u) var(--u); border-radius: 99em; background: rgba(11,11,11,.72); color: var(--white);
  font-size: .62em; font-weight: 700; backdrop-filter: blur(6px);
}
.wheel__badge .icon { width: 1em; height: 1em; }
.wheel__play {
  position: absolute; left: 50%; top: var(--rim); translate: -50% -50%; z-index: 3;
  width: 4em; height: 4em; border-radius: 50%;
  display: grid; place-items: center; background: var(--yellow); color: var(--ink);
  box-shadow: 0 .6em 1.4em -.6em rgba(11,11,11,.45);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.wheel__play .icon { width: 1.4em; height: 1.4em; transform: rotate(90deg); transition: transform .3s ease; }
.wheel__play:hover { transform: scale(1.1); }
.wheel__play:hover .icon { transform: rotate(0deg); }
@media (max-width: 48em) {
  .wheel { font-size: .62em; margin-top: 3.5em; height: 21.6em; }
  .logo-rows { font-size: .55em; }
  .home-hero .br { display: none; }
}

.clients { padding-top: 1em; }
.clients .t-h1 { max-width: 11.25em; }
/* klantlogo's: drie stilstaande banden, als geheel licht gekanteld (zoals in
   het XD). Elke rij begint een eindje verschoven, zodat de randen niet in één
   lijn staan. Logo's op één hoogte, brede woordmerken begrensd in breedte. */
.logo-rows { margin-top: .8em; padding-bottom: .6em; overflow-x: clip; overflow-y: visible; } /* onderste rij zakt nét tegen de footer, grotendeels in beeld */
.logo-rows__tilt { rotate: -2.5deg; transform-origin: 50% 50%; }
.logo-row { display: flex; width: max-content; }
.logo-row + .logo-row { margin-top: 1.3em; }
.logo-row:nth-child(1) { margin-left: -2em; }
.logo-row:nth-child(2) { margin-left: -7em; }
.logo-row:nth-child(3) { margin-left: -4.5em; }
.logo-row__track { display: flex; align-items: center; gap: 3.5em; flex: none; }
.logo-row__track li { flex: none; display: grid; place-items: center; }
.logo-row__track img { height: 4.5em; width: auto; max-width: 13em; object-fit: contain; }

/* =========================================================================
   Footer (gedeeld)
   ========================================================================= */
.site-footer { background: var(--ink); color: var(--white); overflow: clip; } /* clip i.p.v. hidden: geen scrollcontainer, zodat sticky in de footer werkt */
.site-footer.has-gap { margin-top: var(--section); }

.marquee { display: flex; overflow: hidden; padding-top: 3.9em; user-select: none; }
.marquee__track {
  display: flex; flex: none; gap: .4em; padding-right: .4em;
  font-family: var(--sans); font-weight: 700; font-size: 2em; line-height: 1.04; letter-spacing: -.005em; white-space: nowrap;
  animation: marquee 28s linear infinite;
}
.marquee__track span::after { content: "✦"; margin-left: .4em; display: inline-block; }
@keyframes marquee { to { transform: translateX(-100%); } }

.contact { padding-top: 4.5em; align-items: end; }
.contact__intro { grid-column: 1 / span 3; }
.contact__intro .t-h1 { font-family: var(--sans); }
.contact__intro p { margin-top: 1em; max-width: 25.6em; }
.contact__icon { display: inline-block; width: .72em; height: .72em; vertical-align: -.02em; margin-inline: .06em; stroke-width: 2.2; }
.contact__lines {
  grid-column: 4 / span 3; text-align: right;
  font-family: var(--sans); font-size: 2em; line-height: 1.167; letter-spacing: -.012em;
}
.contact__lines a { display: inline-block; background: linear-gradient(currentColor, currentColor) 0 100% / 0 .06em no-repeat; transition: background-size .3s; }
.contact__lines a:hover { background-size: 100% .06em; }

/* drie trapsgewijze kolommen met dienst-links */
.footer-nav { margin-top: 2.2em; padding-bottom: 4.6em; row-gap: 2em; }
.footer-nav__col { grid-column: span 2; }
/* trap → één lijn, met flex: de groep is --stagger hoger dan één kolom en de
   kolommen staan op start / center / end — dat ís de trap. Tijdens het
   inscrollen krimpt alleen de hoogte van de groep naar die van één kolom
   (--align 0 → 1 uit braaf.js); de kolommen volgen vanzelf en de afstand tot
   de bodem blijft gelijk. --col-h = hoogte van één kolom (JS meet hem na). */
@media (min-width: 64.01em) {
  .footer-nav {
    --col-h: 17.5em; --stagger: 7.5em;
    display: flex; gap: var(--gutter);
    box-sizing: content-box; /* hoogte = kolommen; de padding onder (afstand tot de bodem) blijft erbuiten */
    height: calc(var(--col-h) + (1 - var(--align, 0)) * var(--stagger));
  }
  .footer-nav__col { flex: 1 1 0; min-width: 0; margin-top: 0 !important; }
  .footer-nav__col:nth-child(1) { align-self: flex-start; }
  .footer-nav__col:nth-child(2) { align-self: center; }
  .footer-nav__col:nth-child(3) { align-self: flex-end; }
}
.footer-nav h2 { font-size: 1.5em; line-height: 1.556; font-weight: 700; padding-left: .222em; margin-bottom: .667em; }

/* =========================================================================
   Rijen — één patroon voor footer-links, diensten, FAQ, artikelen en de
   inhoudsopgave. Rijen staan tegen elkaar aan met een lijn ertússen.
   Een gemarkeerde rij (hover, toetsenbordfocus, huidige pagina, open,
   actief) wordt een blok en verbergt de lijn erboven én eronder.
   Kleuren per context via custom properties; de mechaniek is overal gelijk.
   ========================================================================= */
.rows {
  --rows-line: var(--line-ink); --rows-hl: var(--white); --rows-hl-fg: var(--ink); --rows-radius: var(--radius-row);
  --row-pad: var(--u); --row-dent: calc(2 * var(--u));   /* rust: u rondom · gemarkeerd: 3u = 1em links */
  --arrow-bg: var(--ink); --arrow-fg: var(--white); --arrow-hl-bg: var(--yellow); --arrow-hl-fg: var(--ink);
  list-style: none; margin: 0; padding: 0;
}
.site-footer .rows, .on-ink .rows {
  --rows-line: var(--line-white);
  --arrow-bg: var(--white); --arrow-fg: var(--ink); --arrow-hl-bg: var(--paper); --arrow-hl-fg: var(--ink);
}
.is-white main .rows { --rows-hl: var(--paper); }

.rows > * { position: relative; border-radius: var(--rows-radius); transition: background .2s, color .2s; }
.rows > * > :is(a, summary) { padding-inline: var(--row-pad); transition: padding .25s; }
/* inschuiven: alléén de tekst beweegt — pijl, letter, nummer en thumbnail blijven staan */
.rows > * > :is(a, summary) > :not(.arrow, .intake-key, .article-row__thumb, .service-row__num, .service-row__media),
.rows--options > button > :not(.intake-key) { transition: translate .25s ease; }
.rows > :is(:hover, :has(:focus-visible), [open], .is-selected, :has([aria-current="page"]), :has(.is-active)) > :is(a, summary) > :not(.arrow, .intake-key, .article-row__thumb, .service-row__num, .service-row__media),
.rows--options > :is(:hover, :focus-visible, .is-selected) > :not(.intake-key) { translate: var(--row-dent) 0; }
.rows > * + *::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--rows-line); pointer-events: none; transition: opacity .2s;
}
.rows > :is(:hover, :has(:focus-visible), [open], .is-selected, :has([aria-current="page"]), :has(.is-active)) { background: var(--rows-hl); color: var(--rows-hl-fg); }
.rows > :is(:hover, :has(:focus-visible), [open], .is-selected, :has([aria-current="page"]), :has(.is-active))::before,
.rows > :is(:hover, :has(:focus-visible), [open], .is-selected, :has([aria-current="page"]), :has(.is-active)) + *::before { opacity: 0; }

.rows .arrow { background: var(--arrow-bg); color: var(--arrow-fg); }
.rows > :is(:hover, :has(:focus-visible), [open], .is-selected, :has([aria-current="page"]), :has(.is-active)) .arrow { background: var(--arrow-hl-bg); color: var(--arrow-hl-fg); }
.rows > :is(:hover, :has(:focus-visible), [open], .is-selected, :has([aria-current="page"]), :has(.is-active)) .arrow .icon { transform: rotate(0deg); }

/* link-rijen (footer, andere diensten) */
.rows--links a {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  height: var(--control);
}

.footer-base { border-top: 1px solid var(--line-white); }
.footer-base__row { display: flex; justify-content: space-between; align-items: center; gap: 1em; min-height: 3em; font-family: var(--sans); letter-spacing: -.03em; }
.footer-base__row nav { display: flex; gap: 1.2em; font-size: .75em; letter-spacing: 0; color: var(--muted-white); }
.footer-base__row nav a:hover { color: var(--white); }
.footer-base__kvk { margin-left: 1em; font-size: .75em; letter-spacing: 0; color: var(--muted-white); }
.footer-base { position: relative; isolation: isolate; display: flow-root; }   /* flow-root: de negatieve marge van het woordmerk snijdt hier af, lekt niet door */
.footer-base > .mesh { z-index: -1; opacity: 0; transition: opacity .6s ease; }
.footer-base:has(.wordmark:is(:hover, :focus-visible)) > .mesh, .footer-base:hover > .mesh { opacity: 1; }   /* hover: de sectie krijgt het verloop */
.footer-base > .mesh::before { width: 120%; animation: wordmark-drift 30s ease-in-out infinite alternate; }   /* de kleur drijft langzaam */
@keyframes wordmark-drift { to { rotate: calc(var(--rot, 0deg) + 120deg); left: calc(100% - var(--mx, 50%)); } }
.footer-base__row { position: relative; z-index: 2; }
.footer-base:hover :is(.footer-base__row nav, .footer-base__kvk) { color: var(--white); }                         /* op het verloop: volle wit */                                     /* links blijven klikbaar boven de sectie-link */
.wordmark { display: block; margin: 2em 0 calc(.5em - 3.8%); color: var(--paper); }      /* wit; 84% blijft boven de witte lijst in rust (.5em), net onder de dwarsbalk van de A — 3.8% = 16% van de letterhoogte */
.wordmark svg { width: 100%; height: auto; overflow: visible; }
.wordmark::after { content: ""; position: absolute; inset: 0; z-index: 1; }               /* de hele sectie is de link naar home */

@media (max-width: 64em) {
  .contact__intro, .contact__lines { grid-column: 1 / -1; }
  .contact__lines { text-align: left; margin-top: 1.4em; font-size: 1.6em; }
  /* tablet: drie kolommen worden één — per groep de titel links, de links rechts */
  .footer-nav { row-gap: 2.5em; }
  .footer-nav__col { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .footer-nav__col:nth-child(n) { margin-top: 0; }
  .footer-nav__col h2 { grid-column: 1 / span 2; margin: .2em 0 0; line-height: 1.3; }
  .footer-nav__col .rows { grid-column: 3 / span 4; }
}
@media (max-width: 40em) {
  /* telefoon: titel boven de links */
  .footer-nav__col h2, .footer-nav__col .rows { grid-column: 1 / -1; }
  .footer-nav__col h2 { margin-bottom: .5em; }
  .contact__lines { font-size: 1.35em; }
  .marquee__track { font-size: 1.6em; }
  .footer-base__row { flex-wrap: wrap; padding-block: .8em; }
}

/* =========================================================================
   Gedeelde pagina-intro (overzichten)
   ========================================================================= */
.page-intro { padding-top: 2.25em; }
.page-intro__text { grid-column: 1 / span 5; grid-row: 1; }
.page-intro__text .t-h1 { max-width: 15.6em; }
.page-intro__aside { grid-column: 5 / span 2; grid-row: 1; align-self: end; text-align: right; padding-bottom: 1.6em; }
.stat__num { font-size: 3em; font-weight: 700; line-height: 1.1; display: block; }
.stat__label { font-size: 1.5em; line-height: 1.333; display: block; max-width: 7.8em; margin-left: auto; }
@media (max-width: 48em) {
  .page-intro__text, .page-intro__aside { grid-column: 1 / -1; }
  .page-intro__aside { text-align: left; margin-top: 2em; grid-row: 2; padding-bottom: 0; }
  .stat__label { margin-left: 0; }
}

/* ---------- sliders (Swiper) + "swipe"-cursor ----------
   Swiper doet slepen, momentum, snappen, toetsenbord en trackpad. Hier alleen
   vorm: slidebreedtes komen uit onze eigen klassen (slidesPerView: 'auto'). */
.slider-clip { overflow-x: clip; }                 /* features lopen rechts het beeld uit */
.swiper.slider--features { overflow: visible; margin-top: 2.6em; }
.slider--features .swiper-slide { width: 17.167em; }
.slider--cases .swiper-slide { width: 57.5em; }
.swiper-slide img { -webkit-user-drag: none; user-select: none; }

.swipe-cursor {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  display: inline-flex; align-items: center; gap: var(--u); padding: var(--u) calc(2 * var(--u));
  background: var(--white); color: var(--ink); border-radius: 99em;
  font-family: var(--sans); font-weight: 700; font-size: 1em; line-height: 1.5;
  box-shadow: 0 .4em 1.2em -.4em rgba(0,0,0,.35);
  opacity: 0; scale: .6; transition: opacity .2s, scale .2s;
}
.swipe-cursor.is-on { opacity: 1; scale: 1; }
.swipe-cursor .icon { width: .8em; height: .8em; }
/* het woord loopt als ticker naar links, net als "Let's create value" */
.swipe-cursor__ticker { display: flex; width: 3.2em; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 .4em, #000 calc(100% - .4em), transparent); mask-image: linear-gradient(90deg, transparent, #000 .4em, #000 calc(100% - .4em), transparent); }
.swipe-cursor__track { display: flex; flex: none; animation: marquee 2.4s linear infinite; }
.swipe-cursor__track span { padding-right: .5em; }
/* de bol is de indicator: boven een slider geen eigen muiscursor */
@media (hover: hover) { [data-slider], [data-slider] * { cursor: none; } }
@media (hover: none) { .swipe-cursor { display: none; } }

/* =========================================================================
   Artikelen
   ========================================================================= */
.feature-card {
  position: relative; width: 17.167em; aspect-ratio: 1; border-radius: var(--radius-l); overflow: hidden;
  background: var(--ink); color: var(--white); isolation: isolate;
}
.feature-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.feature-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,11,0) 25%, rgba(11,11,11,.55) 55%, rgba(11,11,11,.85) 100%); }
.feature-card__body { position: absolute; inset: auto 1em 1em; }
.feature-card h3 { font-size: 1.5em; line-height: 1.222; font-weight: 500; }
.feature-card .t-meta { color: rgba(255,255,255,.85); }
.feature-card:hover img { transform: scale(1.05); }
@media (max-width: 48em) { .feature-card, .slider--features .swiper-slide { width: 15em; } }

.view-toggle { display: flex; gap: .25em; margin-top: 3.25em; padding-bottom: 1em; border-bottom: 1px solid var(--line-ink); }
.view-toggle button {
  display: inline-flex; align-items: center; gap: var(--u); height: var(--control); padding: 0 calc(2 * var(--u)) 0 var(--u);
  border: 1px solid var(--line-ink); border-radius: 99em; font-weight: 700; font-size: .875em; letter-spacing: 0;
  transition: background .2s, border-color .2s;
}
.view-toggle__icon { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; transition: background .2s; }
.view-toggle__icon .icon { width: 1.05em; height: 1.05em; }
.view-toggle button[aria-pressed="true"] { background: var(--white); border-color: var(--white); }
.view-toggle button[aria-pressed="true"] .view-toggle__icon { background: var(--yellow); }

.article-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1em; margin-top: 1em; }
.rows--articles { --rows-radius: var(--radius-l); }   /* thumb 16 + u = 24 */
.article-row a { display: flex; align-items: center; gap: 1em; padding-block: var(--u); }
.article-row__thumb { position: relative; width: 4em; height: 4em; border-radius: var(--radius-m); overflow: hidden; flex: none; background: var(--ink); }
.article-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.article-row__thumb .arrow { position: absolute; inset: 0; margin: auto; opacity: 0; scale: .6; transition: opacity .25s, scale .25s; }
.article-row__title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.17; }
.rows--articles > :is(:hover, :has(:focus-visible), [open], .is-selected, :has([aria-current="page"]), :has(.is-active)) .article-row__thumb img { opacity: 0; }
.rows--articles > :is(:hover, :has(:focus-visible), [open], .is-selected, :has([aria-current="page"]), :has(.is-active)) .article-row__thumb .arrow { opacity: 1; scale: 1; }

/* grid-weergave: geen rijen, dus geen lijnen en geen blok-highlight */
.article-list.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.5em; margin-top: 2em; }
.article-list.is-grid > .rows { display: contents; }
.article-list.is-grid .rows > * { background: none; }
.article-list.is-grid .rows > *::before { display: none; }
.article-list.is-grid .article-row a { display: block; padding: 0; min-height: 0; }
.article-list.is-grid .article-row__thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-l); margin-bottom: .7em; }
.article-list.is-grid .article-row__thumb .arrow { width: 3em; height: 3em; }
.article-list.is-grid .article-row__text { display: block; padding-inline: .2em; }
@media (max-width: 64em) { .article-list.is-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 48em) {
  .article-list { grid-template-columns: 1fr; }
  .article-row a { gap: .8em; }
  .article-list.is-grid { grid-template-columns: 1fr; }
  /* twee kolommen worden één: de naad tussen beide lijsten volgt hetzelfde patroon */
  .article-list:not(.is-grid) > .rows + .rows > :first-child::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rows-line); transition: opacity .2s;
  }
  .article-list > .rows + .rows > :is(:hover, :has(:focus-visible), [open], .is-selected, :has([aria-current="page"]), :has(.is-active))::before,
  .article-list:has(> .rows:first-child > :last-child:is(:hover, :has(:focus-visible))) > .rows + .rows > :first-child::before { opacity: 0; }
}

/* =========================================================================
   Cases
   ========================================================================= */
.case-stage { margin-top: 2.9em; position: relative; }
.case-slide {
  position: relative; width: 57.5em; max-width: calc(100vw - 2 * var(--margin) + 2 * var(--outdent)); aspect-ratio: 1380 / 730;
  border-radius: var(--radius-xl); overflow: hidden; background: var(--red);
}
.case-slide img { width: 100%; height: 100%; object-fit: cover; }
.case-slide__caption {
  position: absolute; left: 1.5em; top: 1.3em; display: inline-flex; gap: .5em; align-items: center;
  background: rgba(11,11,11,.72); color: var(--white); padding: var(--u) calc(2 * var(--u)); border-radius: 99em; font-size: .75em; backdrop-filter: blur(6px);
}

.case-thumbs { position: absolute; left: 50%; bottom: 1.4em; translate: -50% 0; display: flex; gap: .5em; z-index: 3; }
.case-thumbs button { width: 3.333em; height: 3.333em; border-radius: var(--radius-m); overflow: hidden; background: var(--ink); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s, transform .2s; }
.case-thumbs button.is-wide { width: 6.667em; }
.case-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.case-thumbs button[aria-current="true"] { outline-color: var(--white); }
.case-thumbs button:hover { transform: translateY(-.15em); }
@media (max-width: 48em) {
  .case-slide { aspect-ratio: 4 / 5; border-radius: var(--radius-l); }
  .case-thumbs { font-size: .7em; }
}

.case { padding-top: 4em; align-items: start; scroll-margin-top: 2em; }
.case__text { grid-column: 1 / span 2; position: sticky; top: 2em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.case__tags { display: flex; gap: .5em; flex-wrap: wrap; font-size: .75em; }
.case__tags li + li::before { content: "•"; margin-right: .5em; }
.case__text .t-h2 { margin-top: .2em; }
.case__text .t-lead { margin-top: 1.4em; max-width: 18.2em; }
.case__foot { display: flex; align-items: center; gap: .667em; margin-top: 1.1em; }
.person { display: flex; align-items: center; gap: .75em; margin-right: auto; font-size: .833em; line-height: 1.2; }
.person__avatar { width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; font-weight: 700; flex: none; overflow: hidden; }
.person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.person strong { display: block; }
.person__name { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; }   /* klantnaam: hooguit twee regels, nooit afgebroken */
.case-nav { display: flex; gap: .4em; }
.case-nav a { width: var(--control); height: var(--control); border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.34); color: var(--white); transition: background .2s, color .2s; }
.case-nav a:hover { background: var(--white); color: var(--ink); }
.case-nav a[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.case-nav .icon { width: .9em; height: .9em; }
.case__media { grid-column: 3 / span 4; border-radius: var(--radius-l); overflow: hidden; background: var(--white); aspect-ratio: 848 / 640; }
.case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.case__media:hover img { transform: scale(1.03); }
@media (max-width: 64em) {
  .case__text { grid-column: 1 / span 3; }
  .case__media { grid-column: 4 / span 3; }
}
@media (max-width: 48em) {
  .case__text, .case__media { grid-column: 1 / -1; position: static; }
  .case__media { margin-top: 1.5em; order: -1; margin-bottom: 1.2em; }
}

/* =========================================================================
   Tekstpagina's — dienst & artikel
   ========================================================================= */
.service-hero { position: relative; color: var(--white); background: var(--ink); isolation: isolate; padding-bottom: 4.5em; }   /* de inhoud bepaalt de hoogte — geen gereserveerde ruimte */
.service-hero__bg { position: absolute; inset: 0; z-index: -1; }
.service-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.service-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,.55), rgba(11,11,11,.1) 45%, rgba(11,11,11,.55)); }
.centered-intro { text-align: center; padding-top: 2.25em; }
.centered-intro .t-display, .centered-intro .t-h1 { max-width: 11.78em; margin-inline: auto; }
.centered-intro .t-h1 { max-width: 15.14em; }
.centered-intro .t-body { max-width: 35.33em; margin: 1.1em auto 0; }

.intro-statement { padding-top: var(--section); }
.intro-statement p { grid-column: 2 / span 5; font-size: 1.75em; line-height: 1.24; }
.intro-statement .t-eyebrow { grid-column: 1 / span 1; padding-top: .7em; }
@media (max-width: 48em) { .intro-statement p, .intro-statement .t-eyebrow { grid-column: 1 / -1; } .intro-statement p { font-size: 1.35em; } }

.blocks { padding-top: var(--section); row-gap: 3em; }
.blocks__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 1em; flex-wrap: wrap; }
.block { grid-column: span 3; border-top: 1px solid var(--line-ink); padding-top: 1.1em; }
.block__num { font-family: var(--serif); font-style: italic; font-size: .75em; color: var(--muted-ink); }
.block h3 { margin: .2em 0 .55em; }
.block p { max-width: 24em; }
@media (max-width: 48em) { .block { grid-column: 1 / -1; } }

.why { margin: var(--section) calc(-1 * var(--outdent)) 0; background: var(--yellow); border-radius: var(--radius-xl); padding: 3.5em max(var(--outdent), 1em); }   /* = outdent: inhoud op het grid */
.why > .wrap { padding-inline: 0; max-width: none; }   /* inhoud op het grid, het vlak steekt uit */
.why .grid { align-items: start; }
.why h2 { grid-column: 1 / span 2; }
.why__text { grid-column: 3 / span 4; font-size: 1.5em; line-height: 1.333; }
.why__text p + p { margin-top: .8em; }
.why__text .btn { font-size: .667em; margin-top: 1.6em; }
@media (max-width: 48em) { .why h2, .why__text { grid-column: 1 / -1; } .why__text { margin-top: .8em; font-size: 1.2em; } .why { border-radius: var(--radius-l); padding-block: 2em; } }

.faq { padding-top: var(--section); }
.faq h2 { grid-column: 1 / span 2; }
.faq__list { grid-column: 3 / span 4; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1em;
  min-height: var(--control); padding-block: var(--u);
}
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] { --arrow-hl-bg: var(--ink); --arrow-hl-fg: var(--white); }
.rows > details[open] .arrow .icon { transform: rotate(-90deg); }
.faq__answer { padding: 0 var(--control) calc(2 * var(--u)) calc(var(--row-pad) + var(--row-dent)); color: rgba(11,11,11,.78); }
@media (max-width: 48em) { .faq h2, .faq__list { grid-column: 1 / -1; } .faq__list { margin-top: 1em; } }

.related { padding-top: var(--section); }
.related__head { display: flex; justify-content: space-between; align-items: end; gap: 1em; flex-wrap: wrap; margin-bottom: 1.4em; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.card-grid .feature-card { width: auto; }
.card-grid .feature-card h3 { font-size: 1.1em; line-height: 1.2; }
@media (max-width: 64em) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30em) { .card-grid { grid-template-columns: 1fr; } }

.service-links { padding-top: var(--section); }
.service-links h2 { grid-column: 1 / span 2; }
.service-links .rows { grid-column: 3 / span 4; }
@media (max-width: 48em) { .service-links h2, .service-links .rows { grid-column: 1 / -1; } .service-links .rows { margin-top: 1em; } }

/* artikel */
.article-hero-img { margin-top: 3.4em; height: 30.42em; overflow: hidden; }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-hero-img figcaption { }
@media (max-width: 48em) { .article-hero-img { height: auto; aspect-ratio: 4 / 3; } }

.article-body { padding-top: 3.25em; align-items: start; }
.toc { grid-column: 1 / span 2; position: sticky; top: 2em; }
.toc h2 { margin-bottom: .6em; }
.rows--toc { counter-reset: toc; }
.rows--toc > * { counter-increment: toc; }
.rows--toc > :has(.is-active) { --rows-hl: var(--yellow); }
.toc a { display: flex; gap: .7em; padding-block: var(--u); font-size: .75em; line-height: 1.35; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--serif); font-style: italic; color: var(--muted-ink); }
.toc a.is-active::before { color: var(--ink); }
.toc__meta { margin-top: 1.4em; display: flex; align-items: center; gap: .75em; font-size: .75em; line-height: 1.3; }
.toc__meta .person__avatar { width: 2.6em; height: 2.6em; background: var(--yellow); }

.prose { grid-column: 3 / span 4; max-width: 35.33em; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 1.5em; line-height: 1.222; font-weight: 700; margin-top: 1.6em; scroll-margin-top: 1.5em; }
.prose > p:first-child::first-line { }
.prose .lede { font-size: 1.5em; line-height: 1.222; font-weight: 700; }
.prose a:not(.btn) { background: linear-gradient(var(--yellow), var(--yellow)) 0 92% / 100% .35em no-repeat; transition: background-size .2s; }
.prose a:not(.btn):hover { background-size: 100% 100%; }
.prose blockquote { border-left: .2em solid var(--yellow); padding-left: 1em; font-size: 1.25em; line-height: 1.35; }
.prose .end-cta { margin-top: 2.5em; padding-top: 1.4em; border-top: 1px solid var(--line-ink); display: flex; gap: 1em; align-items: center; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 64em) { .toc { grid-column: 1 / -1; position: static; margin-bottom: 2.5em; } .prose { grid-column: 1 / -1; } }

/* ---------- reveal bij scroll (alleen met JS) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(1.2em); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.js [data-reveal][data-from="top"] { transform: translateY(-1.2em); }     /* terugscrollen: van boven */
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* koppen woord voor woord (braaf.js splitst), zelfde richting-logica */
[data-words] .w { display: inline-block; opacity: 0; translate: 0 .45em; transition: opacity .6s ease, translate .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 45ms); }
[data-words][data-from="top"] .w { translate: 0 -.45em; }
[data-words].is-in .w { opacity: 1; translate: none; }
.marquee.is-driven .marquee__track { animation: none; will-change: transform; }


/* =========================================================================
   loam-aanvullingen
   ========================================================================= */
/* donkere pagina's (cases): de header-knop is geel */
.is-ink .site-header .btn:not(.btn--ghost) { --bg: var(--yellow); --fg: var(--ink); --fill: var(--white); --on-fill: var(--ink); }
/* beeld-hero (diensten): de header ligt óp de foto */
.has-photo-hero .site-header { position: absolute; left: 0; right: 0; }
.has-photo-hero .service-hero { padding-top: calc(var(--edge) + 3.333em); }
@media (max-width: 48em) { .has-photo-hero .service-hero { padding-top: 5.15em; } }   /* header kreeg .75em meer bovenruimte */
.service-hero .t-body { max-width: 30em; margin: 1em auto 0; color: rgba(255,255,255,.86); }
/* intro-checklist van een dienst */
.intro-checks { grid-column: 2 / span 5; margin-top: 1.4em; display: flex; flex-wrap: wrap; gap: .5em; list-style: none; padding: 0; }
.intro-checks li { display: inline-flex; align-items: center; gap: var(--u); padding: var(--u) calc(2 * var(--u)) var(--u) var(--u); border-radius: 99em; background: var(--paper); font-size: .75em; font-weight: 700; }
.intro-checks li::before { content: ""; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat; }
@media (max-width: 48em) { .intro-checks { grid-column: 1 / -1; } }
/* video in een kaart (wiel, cases) */
.wheel__item video, .case__media video, .case-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* externe link in een rij: altijd ↗ */
.rows a[href^="http"] .arrow .icon, .rows > * a[href^="http"] .arrow .icon { transform: none !important; }
/* home: de logo-banden zakken tegen de footer, geen tussenruimte */
main:has(.logo-rows) + .site-footer { margin-top: 0; }

/* =========================================================================
   Pijlers (2026-10) — de diensten van een pijler als grote rijen, en de
   pijlertitel in de footer als link.
   ========================================================================= */
.pillar { padding-top: var(--section); }
.pillar__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 1em; flex-wrap: wrap; margin-bottom: 1.4em; }
.pillar .rows { grid-column: 1 / -1; }
.rows--services a {
  display: grid; grid-template-columns: 2.5em minmax(0, 2fr) minmax(0, 3fr) auto; align-items: center; column-gap: var(--gutter);
  padding-block: calc(2 * var(--u));
}
.service-row__num { font-family: var(--serif); font-style: italic; font-size: .75em; color: var(--muted-ink); }
.rows--services h3 { font-size: 1.5em; line-height: 1.222; font-weight: 700; }
.rows--services p { max-width: 28em; color: rgba(11, 11, 11, .78); }
/* de cirkel wordt het beeld: een kaart rechts uitgelijnd op de pijl, verticaal
   op de pijl gecentreerd. In rust geknipt tot precies de pijlcirkel (eronder,
   dus onzichtbaar); op hover groeit de cirkel vanuit de pijl tot de hele kaart. */
.rows--services a { position: relative; }
.rows--services .arrow { position: relative; z-index: 2; }
.service-row__media {
  --shift: 2em;                                         /* kaart steekt 2em rechts uit; de paginamarge (2em) houdt hem van de rand */
  --c: calc(100% - var(--shift) - var(--icon) / 2) 50%;  /* cirkel blijft op de pijl */
  position: absolute; z-index: 1; right: calc(var(--row-pad) - var(--shift)); top: 50%; translate: 0 -50%;
  width: 13em; height: 9em; border-radius: var(--radius-l); overflow: hidden; pointer-events: none;
  background: var(--ink); box-shadow: 0 1.5em 3em -1.5em rgba(11,11,11,.35);
  clip-path: circle(calc(var(--icon) / 2) at var(--c));
  transition: clip-path .6s cubic-bezier(.2,.8,.2,1);
}
.service-row__media img { width: 100%; height: 100%; object-fit: cover; scale: 1.15; transition: scale .8s cubic-bezier(.2,.8,.2,1); }
.rows--services > :is(:hover, :has(:focus-visible)) .service-row__media { clip-path: circle(150% at var(--c)); }
.rows--services > :is(:hover, :has(:focus-visible)) .service-row__media img { scale: 1; }
.rows--services > * { z-index: 0; }
.rows--services > :is(:hover, :has(:focus-visible)) { z-index: 3; }   /* kaart over de buren heen */
@media (hover: none) { .service-row__media { display: none; } }
@media (max-width: 48em) {
  .rows--services a { grid-template-columns: minmax(0, 1fr) auto; row-gap: .3em; }
  .service-row__num { display: none; }
  .rows--services h3 { font-size: 1.3em; }
  .rows--services p { grid-column: 1; grid-row: 2; }
  .rows--services .arrow { grid-column: 2; grid-row: 1 / span 2; }
}
.footer-nav h2 a { color: inherit; text-decoration: none; }
.footer-nav h2 a:is(:hover, :focus-visible, [aria-current="page"]) { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }


/* =========================================================================
   Home — vier tegels (drie pijlers + loam). Om en om breed/smal:
   rij 1 breed·smal, rij 2 smal·breed. Beeld op een papieren vlak, titel en
   tags eronder, pijl rechts (intern ↘ → ↗, extern ↗).
   ========================================================================= */
.tiles { padding-top: .5em; }
.tiles + .clients { padding-top: 5.5em; }               /* tegels → logo's: dezelfde lucht als wiel → tegels */
.tiles__head { margin-bottom: 1.4em; }
.tiles__grid { list-style: none; margin: 0 calc(-1 * var(--outdent)); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2em var(--gutter); }
.tile { grid-column: span 2; }
.tile:nth-child(4n + 1), .tile:nth-child(4n) { grid-column: span 3; }
/* de smalle tegels (2 en 3) krijgen een lager beeld — speelse, verspringende onderkant */
.tiles__grid { align-items: start; }
.tile:nth-child(4n + 2) .tile__media, .tile:nth-child(4n + 3) .tile__media { height: 12.5em; }
.tile a { display: block; }
.tile__media { height: 17em; border-radius: var(--radius-l); overflow: hidden; background: var(--paper); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2,.8,.2,1); }
.tile a:is(:hover, :focus-visible) .tile__media img { scale: 1.04; }
.tile__media--mark { display: grid; place-items: end start; padding: 1em; background: var(--ink); color: var(--yellow); }
.tile__mark { font-size: 2.5em; line-height: 1; font-weight: 700; letter-spacing: -.04em; transition: translate .4s cubic-bezier(.2,.8,.2,1); }
.tile a:is(:hover, :focus-visible) .tile__mark { translate: .2em 0; }
.tile__body { display: flex; justify-content: space-between; align-items: start; gap: 1em; padding: calc(2 * var(--u)) var(--u) 0; }
.tile__body h3 { font-size: 1em; font-weight: 700; line-height: 1.3; }
.tile__body .t-meta { margin-top: .2em; }
.tile__arrow { flex: none; width: calc(var(--icon) / 2); height: calc(var(--icon) / 2); margin-top: .25em; transform: rotate(90deg); transition: transform .25s ease; }
.tile a:is(:hover, :focus-visible) .tile__arrow, .tile a[href^="http"] .tile__arrow { transform: none; }
@media (max-width: 48em) {
  .tiles__grid { grid-template-columns: 1fr; }
  .tile, .tile:nth-child(n) { grid-column: 1 / -1; }
  .tile__media { height: 12em; }
}


/* =========================================================================
   Verloopvlak (.mesh) — voor wat geen beeld heeft. Een kleurwolk van vijf
   tinten op een blauwe grond; een groter vlak eronder draait en verschuift
   per kaart (--rot, --mx, --my uit braaf_mesh), zodat elk vlak eigen is.
   ========================================================================= */
.mesh { position: absolute; inset: 0; overflow: hidden; background: #4fa6ff; }
.feature-card .mesh { z-index: -2; }
/* korrel over het verloop: breekt banding (zichtbare kleurtreden) op, zodat de
   overgang vloeiend oogt. Een kleine grijsruis-tegel, zacht gemengd. */
.mesh::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('/theme/static/images/noise.png') repeat 0 0 / 96px 96px;
  mix-blend-mode: overlay; opacity: .16;   /* net zichtbaar van dichtbij, op afstand alleen een vloeiender verloop */
}
.mesh::before {
  content: ""; position: absolute; left: var(--mx, 50%); top: var(--my, 50%);
  width: 170%; aspect-ratio: 1; translate: -50% -50%; rotate: var(--rot, 0deg);
  background:
    radial-gradient(circle at 24% 24%, #1fe6d9 0, transparent 40%),
    radial-gradient(circle at 78% 20%, #16c3ff 0, transparent 40%),
    radial-gradient(circle at 52% 80%, #ff6a48 0, transparent 38%),
    radial-gradient(circle at 20% 76%, #f39a3a 0, transparent 34%),
    radial-gradient(circle at 82% 78%, #b38be0 0, transparent 36%),
    #4fa6ff;
  filter: blur(1.5em);
  transition: rotate 1.2s cubic-bezier(.2,.8,.2,1);
}
.feature-card:hover .mesh::before, .article-row:hover .mesh::before { rotate: calc(var(--rot, 0deg) + 25deg); }   /* zacht meedraaien op hover */
.article-hero-img:has(.mesh) { position: relative; }

/* =========================================================================
   Intake — stap-formulier (sections/site/intake.php). Vraag links (4 kolommen),
   waarom-kaart rechts (2, sticky), acties eronder. Opties zijn rijen: label
   links, de letter (= de toets) in de cirkel rechts — het rijenpatroon.
   ========================================================================= */
.intake-lead { margin-top: 1em; max-width: 26em; font-size: 1.25em; line-height: 1.4; }
.intake { padding-top: 3em; }
.intake-hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }   /* honeypot: bewust geen display:none */
.intake-form { position: relative; align-items: start; row-gap: 2em; }
.intake-stap { grid-column: 1 / span 4; grid-row: 1; padding-right: 1em; }                      /* linkerkolom-lucht */
.intake-stap .t-h1 { margin: .2em 0 .25em; }
.intake-hint { color: var(--muted-ink); margin-bottom: 1.4em; }
.intake-waarom { grid-column: 5 / span 2; grid-row: 1 / span 2; position: sticky; top: 2em; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.intake-waarom:not(.is-open) { grid-template-rows: 0fr; }
.intake-toelichting { min-height: 0; overflow: clip; background: var(--white); border-radius: var(--radius-l); padding: 1em; transition: opacity .3s ease, padding .3s ease; }
.intake-toelichting p { margin-top: .5em; }
.intake-waarom:not(.is-open) .intake-toelichting { opacity: 0; padding-block: 0; }

/* opties = rijen */
.rows--options > button {
  display: flex; align-items: center; gap: .667em; width: 100%;
  min-height: var(--control); padding: var(--u) var(--row-pad); text-align: left; font-weight: 500;
  transition: background .2s, color .2s, padding .25s;
}
.intake-key { font-weight: 700; font-size: .833em; width: calc(var(--icon) / .833); height: calc(var(--icon) / .833); }
.rows--options .intake-key { background: var(--white); color: var(--ink); }        /* in rust wit; gekozen wordt geel (hieronder) */
.rows--options > .is-selected .intake-key { background: var(--yellow); color: var(--ink); }

/* velden: zelfde maat als een rij, radius volgens de regel */
.intake-form :is(input[type="text"], input[type="email"], textarea) {
  width: 100%; min-height: var(--control); padding: var(--u) calc(2 * var(--u));
  font: inherit; color: inherit; background: var(--white);
  border: 1px solid var(--line-ink); border-radius: var(--radius-row); outline: none;
  transition: border-color .2s;
}
.intake-form textarea { min-height: 9em; border-radius: var(--radius-l); resize: vertical; }
.intake-form :is(input, textarea):focus { border-color: var(--ink); }
.intake-fields { display: grid; gap: 1em; }
.intake-fields label { display: grid; gap: var(--u); font-size: .833em; }
.intake-fields label input { font-size: 1.2em; }

/* acties: ?-cirkel · Terug · Volgende */
.intake-nav { grid-column: 1 / span 4; grid-row: 2; display: flex; align-items: center; gap: var(--u); }
.intake-nav [hidden] { display: none; }
.intake-help { font-weight: 700; cursor: pointer; background: var(--white); color: var(--ink); }
.intake-help[aria-expanded="true"] { background: var(--ink); color: var(--white); }
.intake-prev .icon--arrow { transform: rotate(180deg); }                                      /* terug: ↙ */
.intake-prev:is(:hover, :focus-visible) .icon--arrow { transform: rotate(-90deg); }           /* hover: ↖ */
.intake-next:disabled { opacity: .3; pointer-events: none; }

.intake-done { display: none; grid-column: 1 / span 4; }
.intake-done p { margin-top: .6em; max-width: 26em; }
.intake-form.is-done .intake-done { display: block; }
.intake-form.is-done :is(.intake-stap, .intake-nav, .intake-waarom) { display: none; }

@media (max-width: 48em) {
  :is(.intake-stap, .intake-waarom, .intake-nav, .intake-done) { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
  .intake-waarom { position: static; }
  .intake-waarom:not(.is-open) { margin-top: -2em; }
}