/* Simblos, prototype v2. Eén stijlblad voor alle pagina's.
   Bron: het document "Website ontwerp simblos" (Apple-achtig, minimaal, helder glas) en de simblos Brand Kit (kleur, letter, logo).
   Thema: licht is de standaard; data-theme="dark" op <html> keert de grond en de inkt om. */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg: #fffdf8; --bg-soft: #f6f3ec; --raised: #ffffff; --ink: #141412; --muted: #6b675e; --line: #dad5c9; --hair: rgba(20, 20, 18, .09);
  --inv-bg: #0b0b0c; --inv-soft: #171715; --inv-ink: #f6f3ec; --inv-muted: #9c978c; --inv-line: #2a2a27;
  --terracotta: #d9663d; --mos: #5b7f5a; --oker: #e0b04a; --leiblauw: #4a6fa5;
  --paper: #f6f3ec; --pen: #141412;                      /* vaste kleuren in de composities, in beide thema's gelijk */
  --glass-tint: rgba(255, 255, 255, .17); --glass-rim: rgba(255, 255, 255, .9); --glass-shadow: rgba(20, 20, 18, .26);
  --font-display: "Familjen Grotesk", "Inter", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1200px; --gutter: clamp(20px, 5vw, 48px); --sec: clamp(88px, 12vw, 176px);
  --r-card: clamp(22px, 2.6vw, 34px); --r-stage: clamp(24px, 3.2vw, 44px);
  --ease: cubic-bezier(.65, 0, .35, 1); --out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.4, .64, 1);
  --header: 64px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0b0c; --bg-soft: #151513; --raised: #1c1c1a; --ink: #f6f3ec; --muted: #9c978c; --line: #2a2a27; --hair: rgba(246, 243, 236, .1);
  --inv-bg: #f6f3ec; --inv-soft: #ece8de; --inv-ink: #141412; --inv-muted: #6b675e; --inv-line: #dad5c9;
  --glass-shadow: rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* Een omgekeerde band: zwart in het lichte thema, ivoor in het donkere. */
.invert { --bg: var(--inv-bg); --bg-soft: var(--inv-soft); --ink: var(--inv-ink); --muted: var(--inv-muted); --line: var(--inv-line); background: var(--bg); color: var(--ink); }

/* ── Basis ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 24px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; transition: background-color .5s ease, color .5s ease; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--oker); color: #141412; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: calc(820px + 2 * var(--gutter)); }
.sec { padding-top: var(--sec); padding-bottom: var(--sec); }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main { padding-top: var(--header); }

/* ── Letter ─────────────────────────────────────────────────────────── */
.display, .h2, .h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
.display { font-size: clamp(46px, 9.4vw, 132px); line-height: .94; letter-spacing: -.04em; }
.display.long { font-size: clamp(40px, 6.6vw, 92px); line-height: .98; letter-spacing: -.035em; }
.h2 { font-size: clamp(34px, 5.2vw, 72px); line-height: 1; letter-spacing: -.035em; }
.h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.02em; }
.lead { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; line-height: 1.45; }
.mono { font: 500 12px/1.3 var(--font-mono); letter-spacing: .02em; }
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 80px); }
.sec-head.center { justify-items: center; }
.sec-head .lead { max-width: 34em; }

/* ── Knoppen en links ───────────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--out), box-shadow .4s ease, background-color .3s ease; will-change: transform; }
.btn:active { transform: scale(.96) !important; transition-duration: .12s; }
.btn.sm { height: 40px; padding: 0 18px; font-size: 14.5px; }
.btn-action { background: var(--oker); color: #141412; }
.btn-action:hover { box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--oker) 80%, transparent); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn .arr { display: inline-block; width: 16px; height: 16px; transition: transform .45s var(--out); }
.btn:hover .arr, .link-arrow:hover .arr, a:hover > .arr { transform: translateX(4px); }
.btn .ripple { position: absolute; z-index: -1; left: var(--rx); top: var(--ry); width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: currentColor; opacity: .22; pointer-events: none; animation: ripple .7s var(--out) forwards; }
@keyframes ripple { to { transform: scale(46); opacity: 0; } }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--out); padding-bottom: 2px; }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow .arr { width: 16px; height: 16px; transition: transform .45s var(--out); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }

/* ── Helder glas ────────────────────────────────────────────────────────
   Geen matglas: de achtergrond blijft scherp en buigt alleen aan de rand, zoals bij een lens. De buiging komt uit een
   SVG-filter dat v2.js per element maakt (alleen in Chromium); elders blijft het glas helder met een lichte rand. */
.glass { position: relative; isolation: isolate; background: var(--glass-tint); color: #141412;
  -webkit-backdrop-filter: blur(2.5px) saturate(1.25) brightness(1.05); backdrop-filter: blur(2.5px) saturate(1.25) brightness(1.05);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .5), inset 1.2px 1.4px .5px -.6px var(--glass-rim), inset -1.2px -1.4px .5px -.6px rgba(255, 255, 255, .6), inset 0 0 18px rgba(255, 255, 255, .16), inset 0 -10px 18px -12px rgba(255, 255, 255, .5), 0 14px 34px -14px var(--glass-shadow), 0 2px 5px -1px rgba(20, 20, 18, .14); }
.glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--sheen, 0); transition: opacity .5s ease;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .5), transparent 65%); mix-blend-mode: soft-light; }
.glass:hover { --sheen: 1; }
.glass.on-page { color: var(--ink); --glass-tint: color-mix(in srgb, var(--bg) 52%, transparent); -webkit-backdrop-filter: blur(9px) saturate(1.6); backdrop-filter: blur(9px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--ink) 14%, transparent), inset 1.2px 1.4px .5px -.6px var(--glass-rim), inset 0 0 18px rgba(255, 255, 255, .14), 0 22px 50px -18px var(--glass-shadow), 0 2px 6px -1px rgba(20, 20, 18, .12); }
:root[data-theme="dark"] .glass.on-page { --glass-rim: rgba(255, 255, 255, .34); }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header { position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--header); background: var(--bg); transition: background-color .5s ease, box-shadow .4s ease; }
.site-header.np-collapsed { box-shadow: 0 1px 0 var(--hair); }
.site-header .bar { display: flex; align-items: center; gap: 24px; height: 100%; }
.site-header #logo { display: flex; align-items: center; height: 100%; }
/* Ingeklapt is de korf zwart en niet oker: dat geeft meer contrast met de grond. De bijen blijven oker. */
.np-collapsed .np-logo .np-r { --np-ok: var(--ink); }
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .25s ease; }
.nav-link:hover, .nav-link[aria-expanded="true"] { background: var(--hair); }
.nav-link[aria-current="page"] { font-weight: 600; }
.nav-link .chev { width: 12px; height: 12px; transition: transform .4s var(--out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.site-nav .btn { margin-left: 10px; }
.nav-drop { position: relative; }
.drop { position: absolute; top: calc(100% + 10px); left: 50%; width: 400px; padding: 8px; border-radius: 26px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.97); transform-origin: 50% 0; transition: opacity .3s ease, transform .5s var(--out), visibility 0s .3s; }
.nav-drop.open .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.nav-drop::after { content: ""; position: absolute; left: -20px; right: -20px; top: 100%; height: 14px; }   /* brug tussen knop en menu */
.drop a { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; padding: 12px 14px; border-radius: 18px; text-decoration: none; transition: background-color .25s ease; }
.drop a:hover, .drop a:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.drop .ico { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--m); color: var(--on-m, #fff); }
.drop .ico.dark-ink { color: #141412; }
.drop b { font-size: 15.5px; font-weight: 600; align-self: end; }
.drop span { font-size: 13.5px; line-height: 1.35; color: var(--muted); align-self: start; }
.nav-drop.open .drop a { animation: dropIn .5s var(--out) backwards; animation-delay: calc(var(--i) * 45ms + 40ms); }
@keyframes dropIn { from { opacity: 0; transform: translateY(8px); } }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.menu-toggle i { display: block; width: 20px; height: 1.75px; margin: 5px auto; border-radius: 2px; background: var(--ink); transition: transform .45s var(--out), opacity .3s ease; }
.menu-open .menu-toggle i:first-child { transform: translateY(3.4px) rotate(45deg); }
.menu-open .menu-toggle i:last-child { transform: translateY(-3.4px) rotate(-45deg); }
.sheet { position: fixed; z-index: 49; inset: 0; padding: calc(var(--header) + 24px) var(--gutter) 32px; background: var(--bg); display: grid; align-content: start; gap: 6px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.menu-open .sheet { opacity: 1; visibility: visible; transition-delay: 0s; }
.sheet a { display: block; padding: 10px 0; font: 700 clamp(30px, 8vw, 44px)/1.05 var(--font-display); letter-spacing: -.03em; text-decoration: none; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .7s var(--out); transition-delay: calc(var(--i) * 50ms + 80ms); }
.sheet a.sub { font-size: clamp(20px, 5.4vw, 26px); color: var(--muted); padding: 6px 0 6px 18px; }
.sheet a.btn { display: inline-flex; margin-top: 22px; justify-self: start; font: 600 16px/1 var(--font-text); letter-spacing: 0; padding: 0 26px; color: #141412; }
.menu-open .sheet a { opacity: 1; transform: none; }
@media (max-width: 860px) { .site-nav { display: none; } .menu-toggle { display: block; } }

/* ── In beeld komen ─────────────────────────────────────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(10px); transition: opacity 1s var(--out), transform 1.1s var(--out), filter 1s var(--out); transition-delay: calc(var(--d, 0) * 1ms); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
.js [data-reveal="scale"] { transform: scale(.94); }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.w > span { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: 0 100%; transition: transform 1s var(--out); transition-delay: calc(var(--i) * 42ms + var(--d, 0) * 1ms); }
.in .w > span, .w.in > span { transform: none; }
[data-read] .rw { opacity: .16; transition: opacity .45s ease; }
[data-read] .rw.lit { opacity: 1; }

/* ── Composities ────────────────────────────────────────────────────── */
.art { position: relative; overflow: hidden; background: var(--ground, var(--leiblauw)); color: var(--pen); --wit: #fffdf8; }
.art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art .pen { fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.art .pen.dun { stroke-width: 6.5; }
.art .pen.dik { stroke-width: 14; }
.art .pen.wit { stroke: var(--wit); stroke-width: 9; }
.art .pen.stip { stroke-width: 5.5; stroke-dasharray: .1 13; }
.js .art .teken { stroke-dasharray: 1; stroke-dashoffset: 1; }
.art.in .teken, .in .art .teken { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease) calc(min(var(--i, 0), 9) * 90ms + 150ms); }
.js .art .vlak { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.art.in .vlak, .in .art .vlak { transform: scale(1); transition: transform .9s var(--spring) calc(min(var(--i, 0), 9) * 70ms + 100ms); }
.js .art .stip { opacity: 0; }
.art.in .stip, .in .art .stip { opacity: 1; transition: opacity 1.2s ease calc(min(var(--i, 0), 9) * 90ms + 300ms); }
.stage { position: relative; border-radius: var(--r-stage); overflow: hidden; }

/* ── Pictogrammen (lijn, 24 px) ─────────────────────────────────────── */
[data-icon] { display: inline-grid; place-items: center; flex: none; }
.ic { flex: none; max-width: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic * { transform-box: fill-box; transform-origin: center; }
.ic .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js [data-reveal] .ic .d, .js .ic-wait .ic .d { stroke-dashoffset: 1; }
.js [data-reveal].in .ic .d, .js .ic-wait.in .ic .d { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) calc(var(--i, 0) * 120ms + 250ms); }
.ic .schrift { stroke-dasharray: 1; stroke-dashoffset: 0; }
a:hover .ic-workshops .schrift, .ic-host:hover .ic-workshops .schrift { animation: schrift .7s var(--out) backwards; animation-delay: calc(var(--i, 0) * 260ms); }
@keyframes schrift { 0% { stroke-dashoffset: 1; } }
.ic .kring { stroke-width: 1.4; }
.ic .kern { fill: currentColor; }
a:hover .ic-consultancy .loep, .ic-host:hover .ic-consultancy .loep { animation: loep 1.1s var(--spring); }
@keyframes loep { 30% { transform: translate(-1.8px, -1.4px); } 65% { transform: translate(1.4px, .8px); } }
a:hover .ic-os .sat, .ic-host:hover .ic-os .sat { animation: sat .8s var(--spring) backwards; animation-delay: calc(var(--i) * 80ms); }
@keyframes sat { 0% { transform: scale(0); } }
a:hover .ic-implementatie .blk, .ic-host:hover .ic-implementatie .blk { animation: blk .7s var(--spring) backwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes blk { 0% { transform: translateY(-9px); opacity: 0; } }

/* ── Kaarten van de methodes ────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.m-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: var(--bg-soft); text-decoration: none; transition: transform .7s var(--out), box-shadow .7s var(--out); }
.m-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px var(--glass-shadow); }
.m-card .art { height: clamp(220px, 26vw, 330px); --ground: var(--m); }
.m-card .art > svg { transition: transform 1.2s var(--out); }
.m-card:hover .art > svg { transform: scale(1.05); }
.m-card .badge { position: absolute; left: 22px; bottom: 22px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; }
.m-card .badge .ic { width: 28px; height: 28px; }
.m-card .body { display: grid; gap: 10px; padding: clamp(22px, 2.6vw, 32px); }
.m-card .body p { color: var(--muted); max-width: 30em; }
.m-card .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; font-size: 15.5px; }
.m-card .more .arr { width: 16px; height: 16px; transition: transform .45s var(--out); }
.m-card:hover .more .arr { transform: translateX(5px); }
@media (max-width: 760px) { .bento { grid-template-columns: 1fr; } }

/* ── Drie stappen, drie opbrengsten ─────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); counter-reset: stap; }
.step { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 28px; counter-increment: stap; }
.step::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; border-radius: 2px; background: var(--m, var(--ink)); transform-origin: 0 50%; transition: transform 1.4s var(--out); transition-delay: calc(var(--d, 0) * 1ms); }
.js .step[data-reveal]:not(.in)::before { transform: scaleX(0); }
.step .n { font: 700 clamp(44px, 5vw, 64px)/1 var(--font-display); letter-spacing: -.04em; }
.step .n::before { content: counter(stap); }
.step p { color: var(--muted); }
.gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.gain { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 2.8vw, 36px); border-radius: var(--r-card); background: var(--bg-soft); transition: transform .6s var(--out); }
.gain:hover { transform: translateY(-4px); }
.gain .ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px; background: var(--m, var(--ink)); color: var(--on-m, #fff); }
.gain .ico.dark-ink { color: #141412; }
.gain p { color: var(--muted); }
.gain a { text-underline-offset: 3px; }
@media (max-width: 860px) { .steps, .gains { grid-template-columns: 1fr; } }

/* ── Het verhaal: woorden lichten op bij het scrollen ───────────────── */
.story p { font: 700 clamp(28px, 4.4vw, 58px)/1.08 var(--font-display); letter-spacing: -.03em; text-wrap: pretty; }
.story p + p { margin-top: .7em; }

/* ── Waar wij mee werken ────────────────────────────────────────────── */
.stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.stack li { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px 0 20px; border-radius: 999px; background: var(--bg-soft); font-weight: 600; font-size: 16px; transition: transform .5s var(--spring), background-color .3s ease; }
.stack li:hover { transform: translateY(-3px) scale(1.03); }
.stack svg { width: 24px; height: 24px; fill: currentColor; }
.stack li.kern { background: var(--ink); color: var(--bg); }

/* ── Garantie ───────────────────────────────────────────────────────── */
.guarantee { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.g-num { display: flex; align-items: flex-start; font: 700 clamp(150px, 27vw, 400px)/1 var(--font-display); letter-spacing: -.06em; color: var(--oker); font-variant-numeric: tabular-nums; }
.roll { display: inline-block; height: 1em; overflow: hidden; }
.roll i { display: block; font-style: normal; transition: transform 2s cubic-bezier(.2, .9, .2, 1) .2s; }
.roll i span { display: block; height: 1em; }
.in .roll i { transform: translateY(-75%); }
.g-num .x { display: inline-block; font-size: .5em; line-height: 1.5; margin-left: .04em; transform: rotate(-90deg) scale(.4); opacity: 0; transition: transform 1.2s var(--spring) 1.3s, opacity .4s ease 1.3s; }
.in .g-num .x { transform: none; opacity: 1; }
.g-text { display: grid; gap: 20px; justify-items: start; }
.g-text p { max-width: 30em; }
@media (max-width: 760px) { .guarantee { grid-template-columns: 1fr; } }

/* ── Praktijkcase: honderd punten ───────────────────────────────────── */
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.case-text { display: grid; gap: 22px; justify-items: start; }
/* Klantlogo in één kleur: zwart gemaakt en half doorzichtig, in het donkere thema omgekeerd.
   Een gewone img, want een CSS-masker laadt niet als de pagina als bestand wordt geopend.
   De reveal-animatie zit op het omhulsel, zodat haar filter de kleur van het logo niet overschrijft. */
.case-logo { display: block; width: 172px; }
.case-logo img { display: block; width: 100%; height: auto; filter: brightness(0); opacity: .55; }
:root[data-theme="dark"] .case-logo img { filter: brightness(0) invert(1); opacity: .6; }
.case-quote { display: grid; gap: 10px; max-width: 34em; }
.case-quote blockquote { font: 500 clamp(18px, 1.6vw, 21px)/1.45 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.case-quote figcaption { font-size: 14.5px; color: var(--muted); }
.case-fig { padding: clamp(22px, 3vw, 40px); border-radius: var(--r-card); background: var(--bg-soft); }
.dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(5px, .9vw, 10px); }
.dots i { aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--ink) 12%, transparent); transition: background-color .5s ease, transform .6s var(--spring); }
.dots i.a { background: var(--ink); }
.dots i.b { background: var(--terracotta); transform: scale(1.08); }
.case-legend { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; font-size: 14.5px; color: var(--muted); }
.case-legend b { display: block; font: 700 clamp(34px, 4vw, 52px)/1 var(--font-display); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.case-legend div:last-child { text-align: right; }
.case-legend div:last-child b { color: var(--terracotta); }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } }

/* ── Afsluiting en voettekst ────────────────────────────────────────── */
.closing { position: relative; overflow: hidden; }
.closing .wrap { position: relative; z-index: 1; display: grid; justify-items: center; gap: 26px; padding-top: var(--sec); padding-bottom: calc(var(--sec) + clamp(80px, 14vw, 200px)); text-align: center; }
.closing .art { position: absolute; inset: auto 0 0 0; height: clamp(150px, 24vw, 330px); background: transparent; }
.closing .art { color: var(--ink); }   /* op de omgekeerde band is de lijn licht, anders valt hij weg */
.site-footer { position: relative; overflow: hidden; padding-top: clamp(56px, 7vw, 96px); }
.f-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.f-grid h3 { margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.f-grid li { font-size: 15.5px; }
.f-grid li + li { margin-top: 9px; }
.f-grid li a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--out); }
.f-grid li a:hover { background-size: 100% 1px; }
.f-pitch { display: grid; gap: 18px; justify-items: start; align-content: start; max-width: 22em; }
.f-pitch p { font: 700 clamp(22px, 2.2vw, 28px)/1.12 var(--font-display); letter-spacing: -.02em; }
.f-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); font-style: normal; }
.f-legal a { text-underline-offset: 3px; }
.theme { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--bg-soft); }
.theme button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.f-word { container-type: inline-size; margin-top: clamp(28px, 4vw, 56px); user-select: none; }
.f-wm { display: flex; justify-content: center; align-items: baseline; margin-bottom: -.2em; font: 700 20.6cqw/1 var(--font-display); letter-spacing: -.025em; white-space: nowrap; }
.f-word .gr { font-family: "Inter", sans-serif; }
.f-word .ai { color: var(--oker); }
.f-word svg { flex: none; max-width: none; width: .56em; height: .56em; margin: 0 .05em; align-self: baseline; }
@media (max-width: 860px) { .f-grid { grid-template-columns: 1fr 1fr; } .f-pitch { grid-column: 1 / -1; } .theme { margin-left: 0; } }

/* ── Kop van een methodepagina ──────────────────────────────────────── */
.p-hero { padding-top: clamp(56px, 9vw, 120px); display: grid; justify-items: center; gap: 26px; text-align: center; }
.p-hero .display { max-width: 12.5em; }
.p-hero .lead { max-width: 30em; }
.p-hero .stage { width: 100%; margin-top: clamp(28px, 5vw, 64px); aspect-ratio: 12 / 5; min-height: 300px; --ground: var(--m); }
/* Op een telefoon ligt het glazen feitenblok onderin het vlak. Het vlak wordt hoger en de tekening staat erboven, niet eronder. */
@media (max-width: 600px) { .p-hero .stage { aspect-ratio: auto; height: 470px; min-height: 0; } .p-hero .stage > svg { height: calc(100% - 150px); } }
.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.other { display: grid; grid-template-columns: 52px 1fr 20px; gap: 16px; align-items: center; padding: 22px 24px; border-radius: var(--r-card); background: var(--bg-soft); text-decoration: none; transition: transform .6s var(--out); }
.other:hover { transform: translateY(-4px); }
.other .ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--m); color: var(--on-m, #fff); }
.other .ico.dark-ink { color: #141412; }
.other b { display: block; font-size: 17px; }
.other span { font-size: 14px; color: var(--muted); }
.other .arr { width: 18px; height: 18px; transition: transform .45s var(--out); }
.other:hover .arr { transform: translateX(4px); }
@media (max-width: 860px) { .others { grid-template-columns: 1fr; } }
/* Het glazen feit op het beeld van een methodepagina. */
.stage .fact { position: absolute; z-index: 2; left: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); display: grid; gap: 6px; max-width: min(330px, calc(100% - 28px)); padding: 18px 24px 20px; border-radius: 26px; text-align: left; animation: floaty 8s ease-in-out infinite; }
.stage .fact b { font: 700 clamp(34px, 4.2vw, 56px)/1 var(--font-display); letter-spacing: -.04em; }
.stage .fact span { font-size: 14.5px; line-height: 1.35; font-weight: 500; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.fact-big { display: grid; gap: 8px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); background: var(--m); color: var(--on-m); }
.fact-big b { font: 700 clamp(30px, 3.6vw, 50px)/1 var(--font-display); letter-spacing: -.035em; }
.fact-big span { font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr; } }
.flush { padding-top: 0; }
.pull { font: 700 clamp(40px, 7.4vw, 104px)/.96 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }

/* De kleur van een methode. Op oker en terracotta staat inkt (wit haalt daar te weinig contrast), op mos en leiblauw wit. */
.m-workshops { --m: var(--mos); --on-m: #fff; } .m-consultancy { --m: var(--terracotta); --on-m: #141412; } .m-os { --m: var(--leiblauw); --on-m: #fff; } .m-implementatie { --m: var(--oker); --on-m: #141412; }

/* ── Overgang tussen pagina's (waar de browser dat kan) ─────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .35s ease both; }
::view-transition-new(root) { animation: vtIn .6s var(--out) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .w > span { transform: none; }
  [data-read] .rw { opacity: 1; }
  .js .art .teken { stroke-dashoffset: 0; } .js .art .vlak { transform: scale(1); } .js .art .stip { opacity: 1; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}