/* ==========================================================================
   RABZI — site styles. Fresh blue with mint, light blue and a coral accent;
   Archivo Expanded for headings, the system font for text; rounded everything.
   Sections alternate between the page background and a light-blue band.
   Page-specific additions live in /css/pages/<view>.css.
   ========================================================================== */

/* ---- fonts (self-hosted; CSP allows 'self' only) ---- */
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:62% 125%; font-display:swap; src:url('/fonts/archivo-latin.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:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:62% 125%; font-display:swap; src:url('/fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF }
@font-face{ font-family:'Archivo Fallback'; src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'); size-adjust:98%; ascent-override:88%; descent-override:22%; line-gap-override:0% }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/jetbrains-mono-latin.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 }

/* ---- tokens ----
   Colours are not set here: they come from the chosen light and dark palette in /css/theme.css
   (config/palettes.js → lib/theme.js), loaded right after this file. Roles, so dark mode works:
   --ink is the strongest foreground (text and dark buttons) with --on-ink as the text on it, --link is brand text,
   --night the always-dark footer, --glass translucent paper, --shadow-lg the drop shadow of floating things. */
:root{
  --r-sm:16px; --r:28px; --r-lg:40px; --r-xl:56px; --r-media:22px;
  --display:'Archivo','Archivo Fallback',system-ui,sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  interpolate-size:allow-keywords;
}
/* project / service colour families: brand (blue), warm (coral), fresh (mint) */
.tint-ocean, .tint-violet, .tint-sun{ --t-soft:var(--brand-soft); --t-mid:var(--brand-mid); --t-acc:var(--brand-acc); --t-deep:var(--brand-deep); --t-wash:var(--brand-wash) }
.tint-ember, .tint-rose{ --t-soft:var(--warm-soft); --t-mid:var(--warm-mid); --t-acc:var(--warm-acc); --t-deep:var(--warm-deep); --t-wash:var(--warm-wash) }
.tint-mint{ --t-soft:var(--fresh-soft); --t-mid:var(--fresh-mid); --t-acc:var(--fresh-acc); --t-deep:var(--fresh-deep); --t-wash:var(--fresh-wash) }

/* ---- reset & base ---- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px }
body{ margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip }
main{ overflow-x:clip }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0 }
:where(ul[class],ol[class]){ list-style:none; padding:0 }
img,svg,video{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ cursor:pointer; background:none; border:0; padding:0 }
[hidden]{ display:none !important }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:16px; top:-60px; z-index:100; padding:12px 18px; border-radius:999px; background:var(--ink); color:var(--on-ink); font-weight:700 }
.skip:focus{ top:16px }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px }
h1, h2{ font-family:var(--display); font-stretch:125%; font-weight:800; letter-spacing:-.035em; line-height:1; text-wrap:balance }
h3{ font-weight:700; letter-spacing:-.01em; line-height:1.2 }
/* long Dutch compounds ("reserveringsplatform") must break instead of overflowing */
h1, h2, h3{ overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:10 4 4 }
h1 em, h2 em{ position:relative; font-style:normal; white-space:nowrap; z-index:0 }
h1 em::before, h2 em::before{ content:''; position:absolute; z-index:-1; left:-.08em; right:-.1em; bottom:.04em; height:.42em; border-radius:.3em; background:var(--marker); transform:rotate(-1.5deg) }
p{ text-wrap:pretty }
.i{ width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* ---- layout ---- */
.wrap{ width:min(1220px, 100% - 40px); margin-inline:auto }
.wrap--narrow{ width:min(860px, 100% - 40px) }
.section{ padding-block:clamp(80px, 11vw, 140px) }
.section--s{ padding-block:clamp(56px, 7vw, 96px) }
.section--flush{ padding-top:0 }
/* alternating full-width bands, so every section reads as its own block */
.section--band{ background:var(--band) }
.section--band h2 em::before{ background:var(--paper) }
.section--band .label{ background:var(--paper) }
.split{ display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, .9fr); gap:clamp(32px, 5vw, 80px); align-items:start }
.split__aside{ position:sticky; top:112px }

/* ---- buttons, links, labels, chips ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 24px; border-radius:999px; font:700 16px/1 var(--text); white-space:nowrap; transition:transform .25s cubic-bezier(.3,1.6,.5,1), background .2s, box-shadow .25s, color .2s }
.btn .i{ width:19px; height:19px; stroke-width:2.2; transition:transform .25s }
.btn:hover{ transform:translateY(-2px) rotate(-1deg) }
.btn:hover .i{ transform:translateX(3px) }
.btn--lg{ height:58px; padding:0 28px; font-size:17px }
.btn--block{ width:100% }
.btn--ink, .btn--primary{ background:var(--ink); color:var(--on-ink); box-shadow:0 10px 24px -12px rgba(15,26,46,.8) }
.btn--ink:hover, .btn--primary:hover{ background:var(--blue); color:#fff }
.btn--blue{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -12px rgba(45,91,255,.8) }
.btn--blue:hover{ background:var(--blue-deep) }
.btn--white{ background:var(--paper); color:var(--ink); box-shadow:var(--shadow-s), inset 0 0 0 2px var(--line) }
.btn--white:hover{ box-shadow:var(--shadow-s), inset 0 0 0 2px var(--ink) }
.link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--link) }
.link .i{ width:18px; height:18px; transition:transform .25s }
.link:hover .i{ transform:translateX(4px) }
.fine{ font-size:14px; color:var(--ink-3) }
.inline{ font-weight:700; color:var(--link); white-space:nowrap }
.label{ display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:6px 16px; border-radius:999px; background:var(--frost-soft); color:var(--link); font:700 14px/1.2 var(--text) }
.label--mint{ background:var(--mint); color:var(--ink) }
.label--white{ background:var(--paper) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips > li:not(:has(> a)), .chips > a, .chip{ display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:7px 15px; border-radius:999px; background:var(--paper); box-shadow:var(--shadow-s); font-weight:600; font-size:14px; line-height:1.25 }
.chips > a, a.chip{ transition:transform .25s cubic-bezier(.3,1.6,.5,1), background .2s }
.chips > a:hover, a.chip:hover{ transform:translateY(-2px) rotate(-1.5deg); background:var(--frost-soft) }
.chips .i{ width:17px; height:17px; color:var(--link) }
.checks{ display:grid; gap:10px; margin-top:16px; padding:0; list-style:none; font-size:15px }
.checks li{ display:flex; gap:10px; align-items:flex-start }
.checks .i{ width:18px; height:18px; margin-top:3px; color:var(--green); stroke-width:2.6 }
.related{ display:grid; grid-template-columns:1fr 1fr; gap:32px }
.related h3{ margin-bottom:14px; font:800 18px/1.2 var(--display); font-stretch:112% }
.chips--sm > li{ min-height:30px; padding:4px 12px; font-size:13px; box-shadow:none; background:var(--slate-soft) }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--t-acc, var(--green)) }

/* ---- illustrations (views/partials/scene.ejs) and image slots ---- */
.scene{ width:100%; height:100% }
.scene text{ font-family:var(--display) }
.s-bg{ fill:var(--s-bg) } .s-frame{ fill:var(--s-frame) } .s-dot{ fill:var(--s-dot) } .s-line{ fill:var(--s-line) } .s-line2{ fill:var(--s-line2) }
.s-ink{ fill:var(--s-ink) } .s-ink-l{ fill:var(--s-ink-l) } .s-dim{ fill:var(--s-dim) } .s-shade{ fill:var(--s-shade) } .s-dev{ fill:var(--s-device) }
.s-acc{ fill:var(--t-acc) } .s-mid{ fill:var(--t-mid) } .s-soft{ fill:var(--t-soft) } .s-on{ fill:#fff; opacity:.92 }
.s-check{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.s-stroke{ fill:none; stroke:var(--t-acc); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.s-dash{ stroke-dasharray:3 6 }
.s-num{ fill:#fff; font-size:12px; font-weight:700 } .s-num--dim{ fill:var(--s-ink-l) }
.s-type{ fill:var(--s-ink); font-size:34px; font-weight:700; letter-spacing:-.02em }
.media{ position:relative; overflow:hidden; isolation:isolate; aspect-ratio:16/10; border-radius:var(--r-media); background:linear-gradient(150deg, var(--t-wash), var(--t-soft)) }
.media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.media > .scene{ position:absolute; inset:0 }
.media--square{ aspect-ratio:1 }
.media--photo{ aspect-ratio:4/3 }
.media__icon{ position:absolute; inset:0; display:grid; place-items:center; color:var(--t-deep) }
.media__icon::before, .media__icon::after{ content:''; position:absolute; border-radius:50%; background:var(--t-mid); opacity:.45 }
.media__icon::before{ width:62%; aspect-ratio:1; right:-14%; top:-18% }
.media__icon::after{ width:34%; aspect-ratio:1; left:-8%; bottom:-10%; background:var(--t-acc); opacity:.18 }
.media__icon .i{ position:relative; z-index:1; width:34%; height:auto; aspect-ratio:1; max-width:84px; stroke-width:1.4 }
.media__hint{ position:absolute; left:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 20px); padding:5px 10px 5px 8px; border-radius:999px; background:rgba(255,255,255,.9); color:#3A3F4C; font:500 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .2s }
.media:hover .media__hint{ opacity:1 }
.media__hint .i{ width:13px; height:13px }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:50; padding:14px 0 }
.nav__inner{ width:min(1220px, 100% - 28px); margin-inline:auto; display:flex; align-items:center; gap:20px; height:66px; padding:0 10px 0 24px; border-radius:999px; background:var(--paper); box-shadow:var(--shadow-s); transition:box-shadow .3s, height .3s }
.nav.is-scrolled .nav__inner{ height:58px; box-shadow:var(--shadow) }
.nav__logo{ color:var(--ink); --signal:var(--blue); flex:none }
.nav__logo .logo{ height:18px; width:auto }
.nav__links{ display:flex; align-items:center; gap:4px; margin-inline:auto }
/* plain links and the two mega-menu triggers (link + chevron) share one pill; each sets its own --hover colour */
.nav__link{ padding:10px 16px; border-radius:999px; font-weight:600; font-size:15px; transition:background .2s, transform .2s }
.nav__links > .nav__link:hover{ background:var(--hover, var(--mint)); transform:rotate(-2deg) }
.nav__links > .nav__link[aria-current], .nav__item.is-current{ background:var(--frost-soft); color:var(--link-strong) }
.nav__item{ display:flex; align-items:center; border-radius:999px; transition:background .2s } /* never transformed: its panel hangs from .nav__inner */
.nav__item > .nav__link{ padding-right:2px }
.nav__item:hover, .nav__item.is-open{ background:var(--hover, var(--mint)); color:var(--ink) }
.nav__more{ display:grid; place-items:center; width:28px; height:28px; margin-right:6px; border-radius:50%; color:inherit; transition:background .2s }
.nav__more:hover{ background:color-mix(in oklab, var(--ink) 9%, transparent) }
.nav__more .i{ width:15px; height:15px; stroke-width:2.4; transition:transform .4s cubic-bezier(.3,1.5,.5,1) }
.nav__item.is-open .nav__more .i{ transform:rotate(180deg) }
.nav__link{ white-space:nowrap }
/* small desktops: the five links and two chevrons stay on one line */
@media (max-width: 1100px){
  .nav__inner{ gap:12px }
  .nav__links{ gap:2px }
  .nav__link{ padding:10px 11px; font-size:14.5px }
  .nav__item > .nav__link{ padding-right:0 }
  .nav__more{ width:26px; margin-right:4px }
}
.nav__end{ display:flex; align-items:center; gap:8px; margin-left:auto }
.nav__links + .nav__end{ margin-left:0 }
.nav__lang{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--bg); font-size:13px; font-weight:700; transition:background .2s }
.nav__lang:hover{ background:var(--frost) }
.nav__theme{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--bg); color:var(--ink); transition:background .2s, transform .35s cubic-bezier(.3,1.6,.5,1) }
.nav__theme:hover{ background:var(--butter); transform:rotate(-15deg) }
.nav__theme .i{ width:20px; height:20px }
.nav__sun, [data-theme="dark"] .nav__moon{ display:none }
[data-theme="dark"] .nav__sun{ display:block }
/* switching light/dark repaints at once instead of fading every coloured thing */
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after{ transition:none !important }
.nav__cta{ height:46px }
.nav__toggle{ display:none; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--on-ink) }
.nav__sheet{ display:grid; width:min(1220px, 100% - 28px); margin:10px auto 0; padding:12px; gap:6px; border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow); max-height:calc(100vh - 110px); overflow-y:auto }
.nav__sheet a:not(.btn){ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-radius:22px; font:800 20px/1 var(--display); font-stretch:115%; letter-spacing:-.02em }
.nav__sheet a:nth-child(1){ background:var(--mint-soft) } .nav__sheet a:nth-child(2){ background:var(--sky-soft) } .nav__sheet a:nth-child(3){ background:var(--peach-soft) } .nav__sheet a:nth-child(4){ background:var(--butter-soft) } .nav__sheet a:nth-child(5){ background:var(--frost-soft) } .nav__sheet a:nth-child(6), .nav__sheet a:nth-child(7){ background:var(--slate-soft) }
.nav__sheet .btn{ margin-top:6px }
.nav__sheet-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; padding:10px 8px 4px; font-size:14px; font-weight:600; color:var(--ink-2) }
.nav__sheet-foot a{ display:inline !important; padding:0 !important; background:none !important; font:inherit !important }
html.nav-open{ overflow:hidden }
@media (min-width: 961px){ .nav__sheet{ display:none !important } }
@media (max-width: 960px){
  .nav__links, .nav__cta{ display:none !important }
  .nav__toggle{ display:inline-grid }
  .nav__end{ margin-left:auto !important }
}

/* ---- Mega menu (views/partials/nav.ejs + mega-preview.ejs, public/js/modules/mega.js) ----
   One card (.mega__bg) hangs under the nav pill and morphs its height between Diensten and Branches; the panels slide
   past each other in the direction you moved. Inside, one highlight glides to the item you point at and the preview
   swaps to its case. Wide screens only: below 961px the menu sheet takes over. */
.nav__inner{ position:relative }
.mega__bg, .mega__panel{ position:absolute; left:0; right:0; top:calc(100% + 10px) }
.mega__bg{ z-index:0; height:var(--mh, 0px); overflow:hidden; border-radius:30px; background:var(--paper); box-shadow:0 0 0 1px var(--line), 0 50px 100px -40px rgba(12, 22, 52, .45), 0 18px 40px -24px rgba(12, 22, 52, .22); opacity:0; visibility:hidden; transform:translateY(-10px) scale(.985); transform-origin:50% 0; pointer-events:none; transition:opacity .2s, transform .35s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.85,.2,1), visibility 0s .35s }
/* a soft glow in the corner takes the colour of the item you point at */
.mega__bg::before{ content:''; position:absolute; right:-6%; top:-70%; width:46%; aspect-ratio:1; border-radius:50%; background-color:var(--glow, var(--brand-acc)); filter:blur(90px); opacity:.18; transition:background-color .6s }
.nav.is-mega .mega__bg{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
.nav.is-mega-first .mega__bg{ transition:opacity .2s, transform .35s cubic-bezier(.2,.8,.2,1) }
.mega__panel{ --mp:24px; z-index:1; padding:var(--mp) var(--mp) 0; color:var(--ink); font-weight:400; opacity:0; visibility:hidden; pointer-events:none; transform:translate(var(--sx, 0px), var(--sy, -8px)); transition:opacity .16s, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s }
.mega__panel::before{ content:''; position:absolute; left:0; right:0; bottom:100%; height:14px } /* bridges the gap under the pill */
.nav__item.is-open > .mega__panel{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .3s .05s, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s }
.mega-scrim{ position:fixed; inset:0; z-index:-1; background:color-mix(in oklab, #0b1226 22%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s }
.nav.is-mega .mega-scrim{ opacity:1; visibility:visible; transition-delay:0s }

.mega__body{ display:grid; grid-template-columns:minmax(0, 1fr) 316px; gap:24px }
.mega__cols{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 8px; align-content:start }
.mega__cols--grid{ grid-template-columns:minmax(0, 1fr) }
.mega__cols ul{ margin:0; padding:0; list-style:none }
.mega__cols--grid ul{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 8px }
.mega__label{ position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:0 10px; color:var(--ink-3); font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase }
.mega__label i{ padding:3px 6px; border-radius:6px; background:var(--bg); color:var(--ink-2); font-style:normal; letter-spacing:.02em }
.mega__item{ position:relative; z-index:1; display:grid; grid-template-columns:38px minmax(0, 1fr); align-items:center; gap:12px; padding:8px 10px; border-radius:16px }
.mega__icon{ display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--t-soft); color:var(--t-deep); transition:background .3s, color .3s, box-shadow .3s, transform .5s cubic-bezier(.3,1.6,.5,1) }
.mega__icon .i{ width:19px; height:19px }
.mega__item.is-on .mega__icon{ background:var(--t-acc); color:#fff; box-shadow:0 10px 20px -10px var(--t-acc); transform:rotate(-8deg) scale(1.05) }
.mega__text{ display:grid; min-width:0 }
.mega__text b{ font-size:14.5px; font-weight:700; line-height:1.25 }
.mega__text small{ margin-top:2px; overflow:hidden; color:var(--ink-3); font-size:12.5px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap }
.mega__item:focus-visible{ outline:2px solid var(--link); outline-offset:-2px }
/* Branches: the integrations of the sector you point at */
.mega__stack{ position:relative; z-index:1; margin-top:14px; padding-top:16px; border-top:1px dashed var(--line) }
.mega__stack .mega__label b{ color:var(--ink-2); font-weight:700 }
.mega__chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 10px }
.mega__chips span{ padding:6px 11px; border-radius:999px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2); font-size:12.5px; font-weight:600 }
.mega__chips.is-swap span{ animation:megaIn .4s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--c, 0) * 28ms) }
/* the highlight that glides from item to item */
.mega__glide{ position:absolute; z-index:0; left:0; top:0; width:var(--gw, 0px); height:var(--gh, 0px); border-radius:16px; background-color:var(--gc, var(--frost-soft)); opacity:0; transform:translate(var(--gx, 0px), var(--gy, 0px)); pointer-events:none; transition:transform .38s cubic-bezier(.2,.8,.2,1), width .38s cubic-bezier(.2,.8,.2,1), height .38s cubic-bezier(.2,.8,.2,1), background-color .35s, opacity .25s }
.mega__glide.is-on{ opacity:1 }
.mega__glide.is-jump{ transition:opacity .25s .2s }
/* items land one after another when a panel opens */
.nav__item.is-open .mega__item{ animation:megaIn .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(70ms + var(--n, 0) * 14ms) }
.nav__item.is-open .mega__label{ animation:megaIn .5s cubic-bezier(.2,.8,.2,1) 40ms backwards }
@keyframes megaIn{ from{ opacity:0; transform:translateY(8px) } }

/* the preview: a case screenshot in a window, its headline result, and what the item is */
.mega__preview{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.mega__stage{ position:relative; display:block; aspect-ratio:16 / 11; overflow:hidden; isolation:isolate; border-radius:22px; background-color:var(--t-soft); transition:background-color .5s }
.mega__stage::before{ content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(90% 80% at 0% 0%, color-mix(in oklab, var(--paper) 70%, transparent), transparent 70%) }
.mega__stage::after{ content:''; position:absolute; right:-20%; bottom:-30%; z-index:-1; width:70%; aspect-ratio:1; border-radius:50%; background-color:var(--t-acc); filter:blur(50px); opacity:.35; transition:background-color .5s }
.mega__window{ position:absolute; left:15%; top:17%; width:100%; height:100%; overflow:hidden; border-radius:14px 0 0 0; background:var(--paper); box-shadow:0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent), 0 30px 60px -24px rgba(12, 22, 52, .5); transform:perspective(900px) rotateY(-7deg) rotateX(3deg); transform-origin:0 0; transition:transform .7s cubic-bezier(.2,.8,.2,1) }
.mega__stage:hover .mega__window{ transform:perspective(900px) rotateY(-2deg) rotateX(1deg) translate(-6px, -4px) }
.mega__bar{ display:flex; align-items:center; gap:5px; height:20px; padding:0 9px; border-bottom:1px solid var(--line); background:var(--bg) }
.mega__bar i{ width:6px; height:6px; border-radius:50%; background:color-mix(in oklab, var(--ink) 18%, transparent) }
.mega__shot{ position:absolute; left:0; top:20px; width:100%; height:auto; opacity:0; filter:blur(6px); transform:scale(1.05); transform-origin:0 0; transition:opacity .45s, filter .45s, transform .7s cubic-bezier(.2,.8,.2,1) }
.mega__shot.is-on{ opacity:1; filter:none; transform:none }
.mega__art{ position:absolute; inset:20px 0 0; display:grid; opacity:0; transition:opacity .45s }
.mega__art.is-on{ opacity:1 }
.mega__art svg{ width:100%; height:100% }
.mega__tag{ position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:color-mix(in oklab, var(--paper) 88%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-s); font:700 11.5px/1 var(--text) }
.mega__tag i{ width:6px; height:6px; border-radius:50%; background:var(--t-acc); box-shadow:0 0 0 3px color-mix(in oklab, var(--t-acc) 25%, transparent) }
.mega__tag span{ display:inline-block }
.mega__kpi{ position:absolute; left:12px; bottom:12px; display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:9px; max-width:80%; padding:9px 14px 9px 9px; border-radius:16px; background:var(--paper); box-shadow:0 0 0 1px var(--line), 0 18px 40px -16px rgba(12, 22, 52, .45); animation:megaFloat 6s ease-in-out infinite }
.mega__kpi .i{ grid-row:1 / span 2; width:30px; height:30px; padding:7px; border-radius:10px; background:var(--t-acc); color:#fff; stroke-width:2.6 }
.mega__kpi b{ color:var(--ink); font:800 19px/1.05 var(--display); font-stretch:110%; letter-spacing:-.02em; white-space:nowrap }
.mega__kpi small{ display:-webkit-box; overflow:hidden; color:var(--ink-2); font-size:11.5px; line-height:1.3; -webkit-line-clamp:2; -webkit-box-orient:vertical }
@keyframes megaFloat{ 50%{ translate:0 -4px } }
.mega__about{ display:grid; gap:4px; padding:0 4px }
.mega__eyebrow{ color:var(--link); font:600 11px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase }
.mega__title{ color:var(--ink); font:800 17px/1.22 var(--display); font-stretch:108%; letter-spacing:-.015em; text-wrap:balance }
.mega__meta{ color:var(--ink-3); font-size:13px }
.mega__links{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:8px }
.mega__go{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; background:var(--ink); color:var(--on-ink); font-size:13.5px; font-weight:700 }
.mega__go .i, .mega__all .i, .mega__missing .i{ width:15px; height:15px; transition:transform .25s }
.mega__go:hover .i, .mega__all:hover .i, .mega__missing a:hover .i{ transform:translateX(3px) }
.mega__case{ color:var(--link); font-size:13.5px; font-weight:700; text-decoration:underline; text-decoration-color:color-mix(in oklab, var(--link) 35%, transparent); text-underline-offset:3px }
.mega__preview.is-swap [data-mega-out]{ animation:megaSwap .42s cubic-bezier(.2,.8,.2,1) }
@keyframes megaSwap{ from{ opacity:0; transform:translateY(5px) } }

/* Ons werk: kinds of work on the left, that kind's three cases as cards on the right */
.mwork{ display:grid; grid-template-columns:250px minmax(0, 1fr); gap:24px }
.mega__cols--list{ grid-template-columns:minmax(0, 1fr) }
.mega__cols--list .mega__item{ padding-block:7px }
.mwork__main{ display:grid; grid-template-rows:auto 1fr; min-width:0 }
.mwork__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; padding:0 2px }
.mwork__head p{ color:var(--ink-3); font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase }
.mwork__head b{ color:var(--ink); font-weight:700 }
.mwork__all{ display:inline-flex; align-items:center; gap:5px; color:var(--link); font-size:13.5px; font-weight:700 }
.mwork__all .i{ width:15px; height:15px; transition:transform .25s }
.mwork__all:hover .i{ transform:translateX(3px) }
.mwork__cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:0; padding:0; list-style:none }
.mwork__slot{ display:grid; grid-template-columns:minmax(0, 1fr); min-width:0; transition:opacity .35s, transform .55s cubic-bezier(.2,.8,.2,1), filter .35s; transition-delay:calc(var(--i, 0) * 60ms) }
.mwork__slot.is-enter{ opacity:0; transform:translateY(16px) scale(.97); filter:blur(5px); transition:none }
.mwork__slot.is-leave{ opacity:0; transform:translateY(-8px) scale(.98); filter:blur(3px); transition-duration:.16s; transition-delay:calc(var(--i, 0) * 30ms) }
.mwork__card{ position:relative; display:flex; flex-direction:column; min-width:0; padding:8px 8px 14px; border-radius:20px; background:var(--paper); box-shadow:0 0 0 1px var(--line); transition:box-shadow .35s, transform .45s cubic-bezier(.2,.8,.2,1) }
.mwork__card:hover, .mwork__card:focus-visible{ transform:translateY(-4px); box-shadow:0 0 0 1px color-mix(in oklab, var(--t-acc, var(--link)) 45%, var(--line)), 0 26px 50px -26px color-mix(in oklab, var(--t-acc, var(--link)) 70%, transparent) }
.mwork__shot{ position:relative; display:block; aspect-ratio:16 / 10.5; overflow:hidden; border-radius:14px; background:var(--t-soft) }
.mwork__shot img, .mwork__shot svg{ display:block; width:100%; height:100%; object-fit:cover; object-position:0 0; transform-origin:0 0; transition:transform 1.4s cubic-bezier(.2,.8,.2,1) }
.mwork__card:hover .mwork__shot img, .mwork__card:hover .mwork__shot svg{ transform:scale(1.1) }
.mwork__kpi{ position:absolute; left:8px; right:8px; bottom:8px; display:flex; align-items:center; gap:6px; width:max-content; max-width:calc(100% - 16px); padding:5px 11px 5px 5px; overflow:hidden; border-radius:999px; background:color-mix(in oklab, var(--paper) 92%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-s); color:var(--ink-2); font-size:12px; white-space:nowrap; text-overflow:ellipsis }
.mwork__kpi .i{ flex:none; width:20px; height:20px; padding:4px; border-radius:50%; background:var(--t-acc); color:#fff; stroke-width:3 }
.mwork__kpi b{ flex:none; color:var(--ink); font:800 13px/1 var(--display); font-stretch:108% }
.mwork__client{ margin:12px 6px 0; overflow:hidden; color:var(--ink-3); font:600 10.5px/1.3 var(--mono); letter-spacing:.05em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap }
.mwork__title{ display:-webkit-box; margin:5px 6px 0; overflow:hidden; color:var(--ink); font:800 15px/1.25 var(--display); font-stretch:106%; letter-spacing:-.01em; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.mwork__go{ position:absolute; right:16px; top:16px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-s); opacity:0; transform:scale(.6) rotate(-45deg); transition:opacity .25s, transform .45s cubic-bezier(.3,1.6,.5,1) }
.mwork__go .i{ width:16px; height:16px; stroke-width:2.4 }
.mwork__card:hover .mwork__go, .mwork__card:focus-visible .mwork__go{ opacity:1; transform:none }
/* fewer than three cases of a kind: an open slot for yours */
.mwork__card--open{ justify-content:flex-end; gap:6px; padding:20px; background:color-mix(in oklab, var(--frost-soft) 70%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 14%, transparent) }
.mwork__card--open .mwork__title{ margin:auto 0 0 }
.mwork__plus{ display:grid; place-items:center; width:46px; height:46px; margin-bottom:auto; border-radius:15px; background:var(--ink); color:var(--on-ink); transition:transform .5s cubic-bezier(.3,1.6,.5,1) }
.mwork__plus .i{ width:20px; height:20px; stroke-width:2.6 }
.mwork__card--open:hover .mwork__plus{ transform:rotate(90deg) }
.mwork__text{ color:var(--ink-2); font-size:13px; line-height:1.45 }
.mwork__link{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; color:var(--link); font-size:13.5px; font-weight:700 }
.mwork__link .i{ width:15px; height:15px }
.mega__stats{ margin-left:auto; color:var(--ink-3); font:600 11.5px/1 var(--mono); letter-spacing:.04em }

.mega__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin:22px calc(var(--mp) * -1) 0; padding:13px var(--mp); border-top:1px solid var(--line); border-radius:0 0 30px 30px; background:color-mix(in oklab, var(--bg) 65%, transparent); color:var(--ink-2); font-size:14px; font-weight:600 }
.mega__foot > a:hover{ color:var(--ink) }
.mega__all{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-weight:800 }
.mega__promo{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:6px 12px 6px 6px; border-radius:999px; background:var(--butter-soft); color:var(--ink) }
.mega__promo .i{ width:24px; height:24px; padding:5px; border-radius:50%; background:var(--butter); color:var(--ink) }
.mega__missing{ margin-left:auto }
.mega__missing a{ display:inline-flex; align-items:center; gap:4px; color:var(--link); font-weight:700 }
.mega__status{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-3); font-size:13px }
.mega__status i{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:livePulse 2s ease-out infinite }

@media (max-width: 1300px){
  .mega__panel{ --mp:20px }
  .mwork{ grid-template-columns:232px minmax(0, 1fr); gap:20px }
  .mega__body{ grid-template-columns:minmax(0, 1fr) 280px; gap:18px }
}
@media (max-width: 1180px){
  .mega__body{ grid-template-columns:minmax(0, 1fr) }
  .mega__preview{ display:none }
  .mwork__cards{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .mwork__slot:nth-child(3){ display:none }
}
@media (max-width: 960px){
  .mega__panel, .mega__bg, .mega-scrim, .nav__more{ display:none }
}
@media (prefers-reduced-motion: reduce){
  .mega__panel, .mega__window, .mega__shot{ transform:none !important }
  .nav__item.is-open .mega__item, .nav__item.is-open .mega__label, .mega__kpi, .mega__preview.is-swap [data-mega-out], .mega__chips.is-swap span{ animation:none }
  .mwork__slot, .mwork__shot img, .mwork__shot svg{ transition:none !important }
}

/* ---- breadcrumbs ---- */
.crumbs ol{ display:flex; flex-wrap:wrap; gap:4px 8px; margin:0 0 16px; padding:0; list-style:none; font-size:14px; font-weight:600; color:var(--ink-2) }
.crumbs li + li::before{ content:'›'; margin-right:8px; color:var(--ink-3) }
.crumbs a:hover{ color:var(--link) }
.crumbs [aria-current]{ color:var(--ink-3); font-weight:500 }

/* ---- section heads ---- */
.head{ margin-bottom:clamp(40px, 5vw, 64px) }
.head h2{ margin-top:18px; font-size:clamp(2.1rem, 4.6vw, 3.8rem) }
.head h2:first-child{ margin-top:0 }
.head__side{ margin-top:16px; color:var(--ink-2); font-size:clamp(1.02rem, 1.3vw, 1.18rem) }
.head__side .link{ margin-top:12px }
.head--center{ text-align:center; max-width:820px; margin-inline:auto }
.head--center .head__side p{ max-width:36em; margin-inline:auto }
.head--sm{ margin-bottom:28px }
.head--sm h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); font-stretch:115%; line-height:1.08 }
.head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px 48px }
.head--split .head__side{ max-width:420px; margin-top:0 }

/* ---- home hero ---- */
.hero{ padding:clamp(16px, 3vw, 32px) 0 0 }
.hero__inner{ position:relative; display:grid; grid-template-columns:1.08fr 1fr; align-items:center; gap:clamp(24px, 4vw, 56px); padding:clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px); border-radius:var(--r-xl); background:var(--hero-bg); overflow:hidden; isolation:isolate }
.hello{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px 0 8px; border-radius:999px; background:var(--paper); font-weight:700; box-shadow:var(--shadow-s) }
.hello__wave{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--butter); font-size:16px; animation:handWave 2.4s ease-in-out infinite; transform-origin:70% 70% }
@keyframes handWave{ 0%,60%,100%{ transform:rotate(0) } 10%,30%{ transform:rotate(16deg) } 20%,40%{ transform:rotate(-8deg) } }
.hero h1{ margin-top:24px; font-size:clamp(2.7rem, 6.2vw, 5.4rem) }
.hero__lead{ margin-top:24px; max-width:31em; font-size:clamp(1.08rem, 1.5vw, 1.25rem); color:var(--ink-2) }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.hero__art{ position:relative; min-height:460px }
.shape{ position:absolute; z-index:-1 }
.shape--circle{ width:300px; height:300px; right:2%; top:2%; border-radius:50%; background:var(--warm-mid); opacity:.9 }
.shape--pill{ width:220px; height:92px; left:4%; bottom:10%; border-radius:999px; background:var(--mint); rotate:-18deg }
.shape--star{ width:84px; left:42%; top:-2%; color:var(--butter); animation:spin 18s linear infinite }
.shape--star svg{ fill:currentColor; width:100% }
@keyframes spin{ to{ rotate:360deg } }
.hero__phone, .hero__browser{ position:absolute; border-radius:30px; overflow:hidden; background:linear-gradient(150deg, var(--t-wash), var(--t-soft)); box-shadow:var(--shadow) }
.hero__phone{ width:56%; aspect-ratio:4/5; right:6%; top:6%; rotate:4deg }
.hero__browser{ width:62%; aspect-ratio:16/10; left:0; bottom:6%; rotate:-4deg }
.hero__phone .scene, .hero__browser .scene{ position:absolute; inset:0 }
@keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -10px } }
.bubble{ position:absolute; left:4%; top:8%; display:flex; align-items:center; gap:10px; max-width:260px; padding:10px 18px 10px 10px; border-radius:24px 24px 24px 6px; background:var(--paper); box-shadow:var(--shadow); font-size:15px; font-weight:600; line-height:1.3 }
.bubble b{ display:block; font-size:12px; color:var(--link) }
.bubble__avatar{ display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff }
.bubble__avatar .i{ width:19px; height:19px }
.sticker{ position:absolute; z-index:3; display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:999px; font-weight:800; font-size:15px; box-shadow:var(--shadow); white-space:nowrap }
.sticker--1{ right:0; bottom:30%; background:var(--mint); rotate:-8deg }
.sticker--2{ right:26%; bottom:2%; background:var(--sky); rotate:6deg }
.sticker--3{ left:30%; top:40%; background:var(--butter); rotate:-4deg }
.sticker--static{ position:static; box-shadow:none; background:var(--mint); rotate:-2deg }
.sticker--sky{ background:var(--sky); rotate:2deg }
.sticker:empty{ display:none }

/* ---- inner-page hero ---- */
.phero{ padding:clamp(16px, 3vw, 32px) 0 0 }
.phero__inner{ position:relative; display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); align-items:center; gap:clamp(24px, 4vw, 56px); padding:clamp(36px, 5vw, 68px) clamp(24px, 5vw, 68px); border-radius:var(--r-xl); background:var(--hero-bg); overflow:hidden; isolation:isolate }
.phero--plain .phero__inner{ grid-template-columns:minmax(0, 1fr) }
.phero--plain .phero__text{ max-width:880px }
.phero h1{ margin-top:18px; font-size:clamp(2.2rem, 4.3vw, 3.7rem) }
.phero .crumbs + h1{ margin-top:6px }
.phero__lead{ margin-top:20px; max-width:36em; font-size:clamp(1.05rem, 1.4vw, 1.2rem); color:var(--ink-2) }
.phero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px }
.phero__art{ position:relative; display:grid; place-items:center; min-height:340px }
.phero__art .shape--circle{ width:230px; height:230px; right:-2%; top:0 }
.phero__art .shape--pill{ width:170px; height:72px; left:0; bottom:8% }
.phero__card{ position:relative; width:90%; padding:8px; border-radius:32px; background:var(--paper); box-shadow:var(--shadow); rotate:-3deg }
.phero__card .media{ --r-media:24px }
.phero__badge{ position:absolute; left:0; top:4%; display:grid; place-items:center; width:78px; height:78px; border-radius:26px; background:var(--paper); color:var(--t-acc); box-shadow:var(--shadow); rotate:-8deg }
.phero__badge .i{ width:38px; height:38px; stroke-width:1.6 }
.phero__art .sticker--1{ right:-2%; bottom:14% }
.phero__art .sticker--2{ left:6%; bottom:-2%; right:auto }
.phero__art .sticker--3{ left:auto; right:12%; top:-2% }

/* ---- long text ---- */
.prose{ color:var(--ink-2); font-size:clamp(1.02rem, 1.2vw, 1.12rem); line-height:1.75 }
.prose > * + *{ margin-top:1em }
.prose h2{ margin-top:1.8em; font-size:clamp(1.5rem, 2.4vw, 2rem); font-stretch:112%; line-height:1.15; color:var(--ink) }
.prose h3{ margin-top:1.5em; font-size:1.2rem; color:var(--ink) }
.prose h2 + *, .prose h3 + *{ margin-top:.6em }
.prose a{ color:var(--link); font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--blue) 35%, transparent) }
.prose a:hover{ text-decoration-color:currentColor }
.prose strong{ color:var(--ink) }
.prose ul, .prose ol{ padding-left:1.3em }
.prose li + li{ margin-top:.45em }
.prose li::marker{ color:var(--link) }
.prose blockquote{ padding:18px 22px; border-radius:var(--r-sm); background:var(--mint-soft); color:var(--ink); font-weight:500 }
.prose code{ padding:2px 6px; border-radius:6px; background:var(--slate-soft); font-size:.92em }
.prose table{ width:100%; border-collapse:collapse; font-size:.95em }
.prose th, .prose td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
.prose th{ color:var(--ink); background:var(--frost-soft) }
.prose hr{ border:0; height:2px; background:var(--line); margin-block:2em }
.table-scroll{ position:relative; overflow-x:auto; border-radius:var(--r-sm) } /* contains the absolutely positioned screen-reader labels inside cells */
.lead-in{ font-size:clamp(1.15rem, 1.6vw, 1.35rem); line-height:1.6; color:var(--ink) }
/* "read more": long SEO text stays in the page, folded to a few lines until opened (open without JS) */
.readmore__btn{ display:none }
.js .readmore__btn{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:10px 18px; border-radius:999px; background:var(--paper); box-shadow:var(--shadow-s); font-weight:700; transition:transform .25s cubic-bezier(.3,1.6,.5,1) }
.js .readmore__btn:hover{ transform:translateY(-2px) }
.js .readmore__btn .i{ width:18px; height:18px; transition:transform .3s }
.js .readmore.is-open .readmore__btn .i{ transform:rotate(180deg) }
.js .readmore:not(.is-open) .readmore__body{ max-height:10.5em; overflow:hidden; -webkit-mask-image:linear-gradient(#000 45%, transparent); mask-image:linear-gradient(#000 45%, transparent) }

/* ---- project story ---- */
.chapters{ display:grid; gap:20px }
.chapter{ padding:30px 32px; border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow-s) }
.chapter__label{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; padding:6px 14px 6px 8px; border-radius:999px; font:800 15px/1.2 var(--display); font-stretch:112% }
.chapter__label .i{ width:28px; height:28px; padding:5px; box-sizing:border-box; border-radius:50%; background:var(--paper) }
.chapter__label--peach{ background:var(--peach) } .chapter__label--sky{ background:var(--sky) } .chapter__label--mint{ background:var(--mint) }
.quote{ position:relative; margin-top:20px; padding:32px 34px; border-radius:var(--r-lg); background:var(--butter) }
.quote .i{ width:34px; height:34px; color:var(--ink) }
.quote blockquote{ margin-top:12px; font:700 clamp(1.15rem, 1.8vw, 1.4rem)/1.45 var(--text) }
.quote figcaption{ margin-top:14px; font-weight:600; color:var(--ink-2) }
.shots{ display:grid; grid-template-columns:repeat(var(--n,2), minmax(0,1fr)); gap:clamp(14px, 2vw, 26px) }
.shots__item{ display:block; overflow:hidden; border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow); transition:transform .45s cubic-bezier(.3,1.4,.5,1), box-shadow .45s }
.shots__item img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover }
.shots__item--main{ grid-column:1 / -1; border-radius:var(--r-lg) }
.shots__item:hover{ transform:translateY(-6px); box-shadow:0 6px 14px rgba(15,26,46,.06), 0 40px 70px -30px rgba(20,40,100,.4) }
.next-case{ display:flex; align-items:center; gap:24px; margin-top:56px; padding:28px 32px; border-radius:var(--r-lg); background:var(--ink); color:var(--on-ink); transition:transform .35s cubic-bezier(.3,1.6,.5,1) }
.next-case:hover{ transform:translateY(-4px) rotate(-.5deg) }
.next-case__label{ flex:none; padding:6px 14px; border-radius:999px; background:var(--mint); color:var(--ink); font-weight:800; font-size:14px }
.next-case__title{ font:800 clamp(1.2rem, 2.4vw, 1.9rem)/1.1 var(--display); font-stretch:115%; letter-spacing:-.02em }
.next-case__go{ display:grid; place-items:center; flex:none; width:52px; height:52px; margin-left:auto; border-radius:50%; background:var(--on-ink); color:var(--ink); transition:transform .3s }
.next-case:hover .next-case__go{ transform:translateX(6px) }

/* ---- article ---- */
.article{ display:grid; grid-template-columns:minmax(0, 260px) minmax(0, 760px); justify-content:center; gap:clamp(32px, 5vw, 72px); align-items:start }
.article__toc{ position:sticky; top:112px }
.toc-box{ padding:20px; border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow-s) }
.toc-box summary{ font:800 16px/1.2 var(--display); font-stretch:112%; cursor:pointer; list-style:none }
.toc-box summary::-webkit-details-marker{ display:none }
.toc{ display:grid; gap:2px; margin-top:12px }
.toc a{ padding:8px 12px; border-radius:12px; font-size:14px; line-height:1.35; color:var(--ink-2); transition:background .2s, color .2s }
.toc a:hover{ background:var(--bg); color:var(--ink) }
.toc a.is-active{ background:var(--frost-soft); color:var(--link-strong); font-weight:700 }
.article__byline{ margin-bottom:24px; font-size:14px; font-weight:600; color:var(--ink-3) }
.article__related{ margin-top:48px; padding-top:32px; border-top:2px solid var(--line) }
.article__related h2{ margin-bottom:16px; font-size:1.3rem; font-stretch:112% }

/* ---- side card ---- */
.side{ padding:28px; border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow-s) }
.side + .side{ margin-top:16px }
.side h2, .side h3{ font:800 20px/1.15 var(--display); font-stretch:112%; letter-spacing:-.02em }
.side dl{ display:grid; gap:14px; margin-top:18px }
.side dt{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3) }
.side dd{ margin-top:2px; font-weight:600 }
.side dd a{ color:var(--link) }
.side .chips{ margin-top:10px }
.side .chips > li{ box-shadow:none; background:var(--slate-soft) }
.side__note{ margin-top:18px; padding:12px 14px; border-radius:var(--r-sm); background:var(--butter-soft); font-size:14px; color:var(--ink-2) }

/* ---- number stickers (highlights, results) ---- */
.stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px }
.stats--3{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
.stat{ display:flex; flex-direction:column; padding:26px 24px; border-radius:var(--r); background:var(--k, var(--mint)) }
.stat--1{ --k:var(--mint); rotate:-1.5deg } .stat--2{ --k:var(--sky); rotate:1deg } .stat--3{ --k:var(--peach); rotate:-.5deg } .stat--4{ --k:var(--butter); rotate:1.5deg }
.stat__value{ font:800 clamp(1.9rem, 3.2vw, 2.7rem)/1 var(--display); font-stretch:120%; letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.stat__label{ margin-top:12px; font-size:15px; font-weight:600; line-height:1.35; color:var(--ink-2) }

/* ---- service tiles (and the home bento) ---- */
.tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px }
.tiles--4{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
.tiles > li:nth-child(odd){ --tilt:-1.4deg } .tiles > li:nth-child(even){ --tilt:1.4deg }
.tile{ position:relative; display:flex; flex-direction:column; height:100%; min-height:230px; padding:28px; border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow-s); overflow:hidden; isolation:isolate; transition:transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s, background .35s }
.tile--big{ --tilt:-.6deg }
a.tile:hover, a.tile:focus-visible{ transform:translateY(-6px) rotate(var(--tilt, -1deg)); box-shadow:var(--shadow); background:var(--t-wash, var(--frost-soft)) }
.tile__icon{ display:grid; place-items:center; width:52px; height:52px; border-radius:17px; background:var(--t-soft, var(--frost)); color:var(--t-deep, var(--blue-deep)) }
.tile__icon .i{ width:25px; height:25px; stroke-width:1.7 }
.tile h3{ margin-top:22px; font:800 22px/1.1 var(--display); font-stretch:112%; letter-spacing:-.025em }
.tile--big h3{ font-size:clamp(24px, 2.4vw, 30px) }
.tile p{ margin-top:8px; font-size:15px; line-height:1.5; color:var(--ink-2); max-width:30em }
.tile__price{ align-self:flex-start; margin-top:auto; padding:8px 14px; border-radius:999px; background:var(--slate-soft); font-weight:700; font-size:14px; transform:translateY(8px) }
.tile__lead{ font-weight:500; color:var(--ink-2) }
.tile--big .tile__price{ transform:none; margin-top:18px }
.tile__go{ position:absolute; right:20px; top:20px; z-index:2; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--on-ink); opacity:0; transform:scale(.6) rotate(-45deg); transition:opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1) }
.tile__go .i{ width:20px; height:20px }
a.tile:hover .tile__go, a.tile:focus-visible .tile__go{ opacity:1; transform:none }
.tile__art{ position:relative; z-index:-1; margin:22px -28px -28px; flex:1; min-height:180px }
.tile__art .scene{ position:absolute; inset:0; transition:transform .6s cubic-bezier(.3,1.4,.5,1) }
a.tile:hover .tile__art .scene{ transform:translateY(-10px) }
.bento{ display:grid; grid-template-columns:repeat(4, 1fr); grid-template-areas:"web web app shop" "web web app ai" "soft soft seo sync" "soft soft brand brand"; gap:16px }
.bento__cell--web{ grid-area:web } .bento__cell--app{ grid-area:app } .bento__cell--shop{ grid-area:shop } .bento__cell--ai{ grid-area:ai }
.bento__cell--soft{ grid-area:soft } .bento__cell--seo{ grid-area:seo } .bento__cell--sync{ grid-area:sync } .bento__cell--brand{ grid-area:brand }
.bento__cell:nth-child(odd){ --tilt:-1.4deg } .bento__cell:nth-child(even){ --tilt:1.4deg }
.bento .tile{ min-height:250px }
.bento__cell--web .tile__art{ min-height:300px }
.bento__cell--app .tile__art{ margin-inline:-90px }
.bento__cell--soft .tile__art{ min-height:240px }
.bento__cell--brand .tile{ padding-right:48% }
.bento__cell--brand .tile__art{ position:absolute; inset:0 0 0 auto; width:46%; margin:0; min-height:0 }

/* ---- problem → solution cards ---- */
.pains{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px }
.pains > li{ flex:0 1 calc((100% - 32px) / 3) }
.pain{ display:flex; flex-direction:column; height:100%; border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow-s); overflow:hidden; transition:transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s }
.pain:hover{ transform:translateY(-4px) rotate(-.6deg); box-shadow:var(--shadow) }
.pain__q{ display:flex; gap:12px; align-items:flex-start; padding:22px 24px; background:var(--peach-soft) }
.pain__q .i{ width:24px; height:24px; color:var(--accent); margin-top:1px }
.pain__q h3{ font-size:17px; line-height:1.3 }
.pain__a{ padding:20px 24px 24px; font-size:15px; line-height:1.55; color:var(--ink-2) }
.pain__fix{ display:flex; align-items:center; gap:6px; margin-bottom:6px; font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green) }
.pain__fix .i{ width:16px; height:16px; stroke-width:2.6 }

/* ---- price tiers ---- */
.tiers{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:stretch }
.tier{ position:relative; display:flex; flex-direction:column; height:100%; padding:30px 28px; border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow-s); transition:transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s }
.tier:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
/* Launch is where you start (no tier is pushed as "recommended"; the Prijzen page has a check for that) */
.tier--start{ box-shadow:0 0 0 2px var(--ink), var(--shadow) }
.tier__badge{ position:absolute; top:-14px; left:24px; padding:6px 14px; border-radius:999px; background:var(--ink); color:var(--on-ink); font-size:13px; font-weight:800; rotate:-2deg }
.tier__name small{ display:block; margin-top:4px; color:var(--ink-3); font:600 14px/1.3 var(--text); letter-spacing:0 }
.tier__plus{ margin:18px 0 -8px; color:var(--ink-3); font:600 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase }
.tier__plus + ul .i{ color:var(--link) }
.tier__name{ font:800 22px/1.1 var(--display); font-stretch:115%; letter-spacing:-.02em }
.tier__price{ display:flex; align-items:baseline; gap:8px; margin-top:12px; font:800 clamp(1.9rem, 3vw, 2.4rem)/1 var(--display); font-stretch:115%; letter-spacing:-.04em }
.tier__price small{ font:600 15px/1 var(--text); letter-spacing:0; color:var(--ink-3) }
.tier__text{ margin-top:12px; font-size:15px; color:var(--ink-2) }
.tier ul{ display:grid; gap:10px; margin:20px 0 24px; padding:0; list-style:none; font-size:15px }
.tier li{ display:flex; gap:10px; align-items:flex-start }
.tier li .i{ width:18px; height:18px; margin-top:3px; color:var(--green); stroke-width:2.6 }
.tier .btn{ margin-top:auto }

/* ---- pricing ---- */
.principles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; padding:0; list-style:none }
.principles li{ display:flex; gap:12px; align-items:flex-start; padding:18px 20px; border-radius:var(--r-sm); background:var(--paper); box-shadow:var(--shadow-s); font-size:15px; font-weight:600; line-height:1.45 }
.principles .i{ width:22px; height:22px; padding:4px; box-sizing:border-box; flex:none; border-radius:50%; background:var(--mint); color:var(--ink); stroke-width:2.8 }
.table__svc{ display:inline-flex; align-items:center; gap:12px }
.table__icon{ display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:11px; background:var(--t-soft); color:var(--t-deep) }
.table__icon .i{ width:18px; height:18px }
.compare td:not(:first-child), .compare th:not(:first-child){ text-align:center }
.compare__mark{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50% }
.compare__mark .i{ width:18px; height:18px; stroke-width:2.6 }
.compare__mark--yes{ background:var(--mint); color:#0C7352 } .compare__mark--some{ background:var(--butter); color:#8A6414 } .compare__mark--no{ background:var(--slate-soft); color:var(--ink-3) }
.compare__price{ font:800 18px/1 var(--display); font-stretch:115% }
.models{ display:grid; gap:12px }
.model{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:22px 24px; border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow-s) }
.model h3{ font:800 18px/1.2 var(--display); font-stretch:112% }
.model p{ margin-top:6px; font-size:15px; color:var(--ink-2) }
.model__price{ flex:none; display:grid; justify-items:end; gap:2px; padding:8px 14px; border-radius:16px; background:var(--frost-soft); font-weight:800; font-size:15px; white-space:nowrap }
.model__price small{ font-weight:600; font-size:12px; color:var(--ink-2) }
.paysteps{ display:grid; gap:12px; margin-top:16px; padding:0; list-style:none; font-size:15px }
.paysteps li{ display:flex; gap:12px; align-items:flex-start }
.paysteps b{ display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--frost); font-size:13px }

/* ---- price calculator ---- */
.cfg{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, .8fr); gap:clamp(24px, 4vw, 48px); align-items:start }
.cfg__step{ margin:0; padding:0; border:0; min-width:0 }
.cfg__step + .cfg__step{ margin-top:30px }
.cfg__step legend{ display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:0; font:800 20px/1.2 var(--display); font-stretch:112%; letter-spacing:-.02em }
.cfg__num{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--on-ink); font-size:15px; font-stretch:100% }
.cfg__options{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px }
.cfg__options--3{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
.cfg__options--pills{ display:flex; flex-wrap:wrap }
.cfg__option{ position:relative; display:block }
.cfg__option input{ position:absolute; opacity:0; pointer-events:none }
.cfg__card{ position:relative; display:flex; flex-direction:column; gap:6px; height:100%; padding:16px 18px; border-radius:20px; background:var(--paper); box-shadow:inset 0 0 0 2px var(--line); cursor:pointer; transition:box-shadow .2s, background .2s, transform .25s cubic-bezier(.3,1.6,.5,1) }
.cfg__options--pills .cfg__card{ padding:12px 18px; border-radius:999px }
.cfg__card:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 2px var(--ink-3) }
.cfg__card .i{ width:22px; height:22px; color:var(--t-acc, var(--blue)) }
.cfg__card strong{ font-size:15px; line-height:1.25 }
.cfg__card small{ font-size:13px; line-height:1.4; color:var(--ink-2) }
.cfg__tag{ display:inline-block; margin-left:4px; padding:2px 8px; border-radius:999px; background:var(--blue); color:#fff; font-style:normal; font-size:11px; vertical-align:middle }
.cfg__option input:checked + .cfg__card{ background:var(--frost-soft); box-shadow:inset 0 0 0 2px var(--blue) }
.cfg__option input:checked + .cfg__card::after{ content:''; position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat }
.cfg__options--pills input:checked + .cfg__card::after{ display:none }
.cfg__option input:focus-visible + .cfg__card{ outline:3px solid var(--blue); outline-offset:2px }
.cfg__summary{ position:sticky; top:112px; padding:30px 28px; border-radius:var(--r-lg); background:var(--ink); color:var(--on-ink); box-shadow:var(--shadow) }
.cfg__label{ display:inline-flex; padding:6px 14px; border-radius:999px; background:var(--mint); color:var(--ink); font-weight:800; font-size:14px }
.cfg__price{ display:flex; align-items:baseline; gap:10px; margin-top:18px; font:800 clamp(2.2rem, 4vw, 3rem)/1 var(--display); font-stretch:115%; letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.cfg__price small{ font:600 16px/1 var(--text); letter-spacing:0; color:color-mix(in oklab, var(--on-ink) 70%, transparent) }
.cfg__price span{ display:inline-block }
.cfg__price span.is-bump{ animation:bump .45s cubic-bezier(.3,1.6,.5,1) }
@keyframes bump{ 0%{ transform:translateY(40%); opacity:0 } 100%{ transform:none; opacity:1 } }
.cfg__line{ display:flex; align-items:center; gap:8px; margin-top:12px; font-weight:600; color:color-mix(in oklab, var(--on-ink) 85%, transparent) }
.cfg__line .i{ width:18px; height:18px; color:var(--mint) }
.cfg__fine{ margin:18px 0 22px; font-size:13px; color:color-mix(in oklab, var(--on-ink) 62%, transparent) }
.cfg__summary .btn{ white-space:normal; height:auto; min-height:58px; padding-block:12px; line-height:1.25 }

/* ---- tables ---- */
.table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow-s); overflow:hidden; font-size:15px }
.table th, .table td{ padding:15px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle }
.table thead th{ background:var(--frost-soft); font-size:14px; font-weight:800; color:var(--ink) }
.table tbody tr:last-child td{ border-bottom:0 }
.table tbody tr{ transition:background .2s }
.table tbody tr:hover{ background:var(--bg) }
.table td a{ font-weight:700 }
.table td a:hover{ color:var(--link) }
.table .num{ font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600 }
.table .is-hl{ background:color-mix(in srgb, var(--frost-soft) 70%, transparent) }

/* ---- work cards ---- */
.work-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px }
.work-grid > li:nth-child(3n+2){ margin-top:48px }
.work-grid > li:nth-child(odd) .work{ rotate:-1deg } .work-grid > li:nth-child(even) .work{ rotate:1deg }
.work{ position:relative; display:block; height:100%; padding:10px 10px 24px; border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow); transition:rotate .35s cubic-bezier(.3,1.6,.5,1), transform .35s cubic-bezier(.3,1.6,.5,1) }
.work:hover{ rotate:0deg !important; transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); transition:rotate .35s cubic-bezier(.3,1.6,.5,1), transform .14s ease-out }
.work .media{ --r-media:30px }
.work__tag{ position:absolute; left:26px; top:26px; z-index:3; padding:8px 14px; border-radius:999px; background:var(--paper); font-weight:800; font-size:13px; box-shadow:var(--shadow-s) }
.work__body{ display:grid; gap:10px; padding:20px 16px 0 }
.work__client{ font-size:14px; font-weight:600; color:var(--ink-3) }
.work h3{ font:800 clamp(19px, 1.8vw, 24px)/1.12 var(--display); font-stretch:112%; letter-spacing:-.025em }
.work__win{ display:inline-flex; align-items:center; gap:8px; justify-self:start; padding:8px 14px 8px 8px; border-radius:999px; background:var(--mint); font-weight:700; font-size:15px; line-height:1.25; rotate:-1.5deg; font-variant-numeric:tabular-nums }
.work__win .i{ flex:none; width:22px; height:22px; padding:4px; box-sizing:border-box; border-radius:50%; background:var(--ink); color:var(--mint); stroke-width:2.6 }

/* ---- industry cards ---- */
.auds{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px }
.auds--4{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
.aud{ position:relative; display:flex; flex-direction:column; height:100%; padding:8px 8px 18px; border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow-s); transition:transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s }
.auds > li:nth-child(odd) .aud:hover{ transform:translateY(-5px) rotate(-1.5deg) }
.auds > li:nth-child(even) .aud:hover{ transform:translateY(-5px) rotate(1.5deg) }
.aud:hover{ box-shadow:var(--shadow) }
.aud .media{ --r-media:18px }
.aud .media::after{ content:''; position:absolute; right:10px; bottom:10px; width:36px; height:36px; border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1A2E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center/17px no-repeat; box-shadow:var(--shadow-s); transform:scale(.5) rotate(-45deg); opacity:0; transition:transform .35s cubic-bezier(.3,1.6,.5,1), opacity .25s }
.aud:hover .media::after, .aud:focus-visible .media::after{ transform:none; opacity:1 }
.aud__body{ display:grid; gap:4px; padding:14px 10px 0 }
.aud__label{ font-weight:700; font-size:16px; line-height:1.25 }
.aud__hint{ font-size:14px; line-height:1.4; color:var(--ink-3) }

/* ---- articles ---- */
.posts{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px }
.post{ display:flex; flex-direction:column; height:100%; padding:10px 10px 22px; border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow-s); transition:transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s }
.posts > li:nth-child(odd) .post:hover{ transform:translateY(-5px) rotate(-1deg) }
.posts > li:nth-child(even) .post:hover{ transform:translateY(-5px) rotate(1deg) }
.post:hover{ box-shadow:var(--shadow) }
.post__cover{ position:relative; display:grid; place-items:center; aspect-ratio:16/8; border-radius:30px; background:linear-gradient(150deg, var(--t-wash), var(--t-soft)); color:var(--t-acc); overflow:hidden }
.post__cover::before{ content:''; position:absolute; width:46%; aspect-ratio:1; right:-10%; top:-30%; border-radius:50%; background:var(--t-mid); opacity:.4 }
.post__cover .i{ position:relative; width:52px; height:52px; stroke-width:1.5; transition:transform .5s cubic-bezier(.3,1.6,.5,1) }
.post:hover .post__cover .i{ transform:scale(1.15) rotate(-8deg) }
.post__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:18px 14px 0; font-size:13px; font-weight:600; color:var(--ink-3) }
.post__cat{ padding:4px 10px; border-radius:999px; background:var(--t-soft); color:var(--t-deep) }
.post h3{ margin:12px 14px 0; font:800 20px/1.18 var(--display); font-stretch:110%; letter-spacing:-.02em }
.post p{ margin:10px 14px 0; font-size:15px; line-height:1.55; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.post__more{ display:flex; align-items:center; justify-content:space-between; margin:auto 14px 0; padding-top:18px; font-size:14px; font-weight:600; color:var(--ink-3) }
.post__more .i{ width:20px; height:20px; color:var(--link); transition:transform .25s }
.post:hover .post__more .i{ transform:translateX(4px) }

/* ---- filters ---- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px }
.filters button{ min-height:42px; padding:8px 18px; border-radius:999px; background:var(--paper); box-shadow:var(--shadow-s); font-weight:700; font-size:14px; color:var(--ink-2); transition:background .2s, color .2s, transform .25s cubic-bezier(.3,1.6,.5,1) }
.filters button:hover{ color:var(--ink); transform:translateY(-2px) }
.filters button[aria-pressed="true"]{ background:var(--ink); color:var(--on-ink) }
.filters button span{ margin-left:4px; opacity:.6 }
[data-filter-item].is-filtered-out{ display:none }

/* ---- step path (journey) ---- */
.journey{ --p:0; position:relative; display:grid; gap:26px; max-width:880px }
.journey::before, .journey::after{ content:''; position:absolute; left:30px; top:32px; bottom:32px; width:5px; border-radius:3px; background:radial-gradient(circle, var(--frost) 2.5px, transparent 3px) 0 0/5px 14px repeat-y }
.journey::after{ background-image:radial-gradient(circle, var(--blue) 2.5px, transparent 3px); clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0) }
.journey__step{ position:relative; z-index:1; display:grid; grid-template-columns:64px minmax(0, 1fr); gap:22px; align-items:start }
.journey__dot{ position:relative; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--paper); box-shadow:var(--shadow-s); font:800 24px/1 var(--display); font-stretch:120%; color:var(--link) }
.journey__body{ padding:22px 26px; border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow-s) }
.journey__body h3{ font:800 21px/1.15 var(--display); font-stretch:112%; letter-spacing:-.02em }
.journey__meta{ display:inline-block; margin-left:6px; padding:4px 10px; border-radius:999px; background:var(--frost-soft); color:var(--link); font:700 13px/1.2 var(--text); letter-spacing:0; vertical-align:middle }
.journey__body p{ margin-top:8px; color:var(--ink-2) }
.journey__body .chips{ margin-top:14px }
.section--band .journey__dot, .section--band .journey__body{ box-shadow:var(--shadow-s) }
.journey__note{ margin-top:12px; padding:10px 14px; border-radius:14px; background:var(--butter-soft); font-size:14px; color:var(--ink-2) }
.journey__note b{ color:var(--ink) }
.facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px }
.fact{ padding:20px 22px; border-radius:var(--r-sm); background:var(--paper); box-shadow:var(--shadow-s) }
.fact dt{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3) }
.fact dd{ margin-top:6px; font:800 20px/1.2 var(--display); font-stretch:112% }

/* ---- home: finder ---- */
.quiz{ position:relative; padding:clamp(22px, 3.5vw, 44px); border-radius:var(--r-xl); background:var(--paper); box-shadow:var(--shadow) }
.quiz__top{ display:flex; align-items:center; gap:16px; margin-bottom:24px }
.quiz__step{ font:800 15px/1 var(--display); font-stretch:115%; color:var(--ink-3) }
.quiz__step span{ color:var(--ink) }
.quiz__dots{ display:flex; gap:6px }
.quiz__dots span{ width:28px; height:8px; border-radius:999px; background:var(--frost-soft); transition:background .3s, width .3s }
.quiz__dots span.is-on{ width:44px; background:var(--blue) }
.quiz__back{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; height:40px; padding:0 16px; border-radius:999px; background:var(--bg); font-weight:700; font-size:15px }
.quiz__back .i{ width:17px; height:17px }
.quiz__q{ font:800 clamp(1.5rem, 2.8vw, 2.2rem)/1.1 var(--display); font-stretch:115%; letter-spacing:-.03em; margin-bottom:24px }
.quiz__pane:not([hidden]){ animation:paneIn .45s cubic-bezier(.2,.7,.2,1) }
@keyframes paneIn{ from{ opacity:0; transform:translateX(24px) } to{ opacity:1; transform:none } }
.opts{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px }
.opts--needs{ grid-template-columns:repeat(4, 1fr) }
.opt{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; width:100%; height:100%; padding:16px 16px 18px; border-radius:24px; background:var(--o-soft); text-align:left; font-weight:700; font-size:15px; line-height:1.25; transition:transform .25s cubic-bezier(.3,1.6,.5,1), background .2s, box-shadow .2s }
.opt:hover, .opt:focus-visible{ transform:translateY(-3px) rotate(-1.5deg); background:var(--o-strong); box-shadow:var(--shadow) }
.opt__icon{ display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:var(--paper); color:var(--ink) }
.opt__icon .i{ width:24px; height:24px }
.opt--frost{ --o-soft:var(--frost-soft); --o-strong:var(--frost) } .opt--mint{ --o-soft:var(--mint-soft); --o-strong:var(--mint) } .opt--peach{ --o-soft:var(--peach-soft); --o-strong:var(--peach) }
.opt--sky{ --o-soft:var(--sky-soft); --o-strong:var(--sky) } .opt--butter{ --o-soft:var(--butter-soft); --o-strong:var(--butter) } .opt--slate{ --o-soft:var(--slate-soft); --o-strong:var(--slate) }
.quiz__result:not([hidden]){ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(20px, 4vw, 48px); align-items:center }
.quiz__art{ position:relative; aspect-ratio:16/12; border-radius:var(--r-lg); background:linear-gradient(150deg, var(--t-wash), var(--t-mid)); overflow:hidden }
.quiz__scene{ position:absolute; inset:0 }
.quiz__title{ margin-top:16px; font:800 clamp(1.7rem, 3vw, 2.5rem)/1.05 var(--display); font-stretch:120%; letter-spacing:-.035em }
.quiz__for{ display:block; margin-top:6px; color:var(--link); font-size:.62em; font-stretch:110%; letter-spacing:-.02em }
.quiz__text{ margin-top:14px; color:var(--ink-2) }
.quiz__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.quiz__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px }
.quiz__actions .btn{ white-space:normal; height:auto; min-height:58px; padding-block:12px; line-height:1.2; text-align:left }
.quiz__case{ display:flex; align-items:center; gap:12px; margin-top:18px; padding:12px 16px; border-radius:20px; background:var(--butter-soft); font-weight:700; font-size:15px; transition:background .2s }
.quiz__case:hover{ background:var(--butter) }
.quiz__case small{ display:block; font-size:12px; font-weight:600; color:var(--ink-3) }
.quiz__case .i{ flex:none; width:20px; height:20px }
.quiz__case .i:last-child{ margin-left:auto }
.quiz__restart{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-weight:700; font-size:15px; color:var(--ink-3) }
.quiz__restart:hover{ color:var(--ink) }
.quiz__restart .i{ width:17px; height:17px }

/* ---- industry strip ---- */
.strip{ padding:clamp(40px, 6vw, 72px) 0 0; overflow:hidden }
.strip__title{ margin-bottom:22px; text-align:center; font:700 clamp(1.05rem, 1.6vw, 1.25rem)/1.3 var(--text); letter-spacing:-.01em; color:var(--ink-2) }
.marquee{ display:flex; overflow:hidden; padding:8px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.marquee__track{ display:flex; flex:none; gap:12px; margin:0; padding:0 12px 0 0; list-style:none; animation:marquee 60s linear infinite }
.marquee--rev .marquee__track{ animation-direction:reverse; animation-duration:70s }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track{ animation-play-state:paused }
@keyframes marquee{ to{ transform:translateX(-50%) } }
.tag{ display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 20px 0 7px; border-radius:999px; background:var(--paper); box-shadow:var(--shadow-s); font-weight:600; font-size:15px; white-space:nowrap; transition:background .2s, transform .25s cubic-bezier(.3,1.6,.5,1) }
.tag:hover{ background:var(--t-soft); transform:translateY(-2px) rotate(-2deg) }
.tag__icon{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--t-soft); color:var(--t-deep) }
.tag__icon .i{ width:19px; height:19px }

/* ---- promises ---- */
.promises{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px }
.promise{ padding:30px 26px; border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow-s); text-align:center }
.promises--3{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
.promise--1{ rotate:-2deg } .promise--2{ rotate:1.5deg; translate:0 14px } .promise--3{ rotate:-1deg } .promise--4{ rotate:2deg; translate:0 10px }
.promise__icon{ display:grid; place-items:center; width:76px; height:76px; margin:0 auto; border-radius:50% }
.promise--1 .promise__icon{ background:var(--butter) } .promise--2 .promise__icon{ background:var(--slate) } .promise--3 .promise__icon{ background:var(--sky) } .promise--4 .promise__icon{ background:var(--peach) }
.promise__icon .i{ width:34px; height:34px; stroke-width:1.8 }
.promise h3{ margin-top:20px; font:800 20px/1.1 var(--display); font-stretch:112%; letter-spacing:-.02em }
.promise p{ margin-top:8px; font-size:15px; color:var(--ink-2) }

/* ---- FAQ ---- */
.faq-wrap, .duo{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(32px, 6vw, 96px); align-items:start }
.faq-wrap > .head, .duo > .head{ position:sticky; top:120px }
.faq-doodle{ display:grid; place-items:center; width:120px; height:120px; margin-top:32px; border-radius:50%; background:var(--butter); font:800 72px/1 var(--display); font-stretch:125%; rotate:-10deg; box-shadow:var(--shadow) }
.faq{ display:grid; gap:12px }
.faq__item{ border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow-s); transition:background .3s }
.faq__item[open]{ background:var(--mint-soft) }
.faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; font-weight:700; font-size:17px; cursor:pointer; list-style:none; border-radius:var(--r) }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__icon{ display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:50%; background:var(--frost-soft); color:var(--link); transition:transform .35s cubic-bezier(.3,1.6,.5,1), background .3s }
.faq__icon .i{ width:20px; height:20px; stroke-width:2.4 }
.faq__item[open] .faq__icon{ transform:rotate(135deg); background:var(--ink); color:var(--mint) }
.faq__a{ padding:0 24px 24px; color:var(--ink-2) }
.faq__item::details-content{ block-size:0; overflow:clip; transition:block-size .4s cubic-bezier(.2,.8,.2,1), content-visibility .4s allow-discrete }
.faq__item[open]::details-content{ block-size:auto }

/* ---- closing block ---- */
.cta-wrap{ position:relative; background:var(--mint); overflow-x:clip }
.cta-wave{ position:absolute; left:0; bottom:calc(100% - 1px); width:200%; max-width:none; height:60px; fill:var(--mint); animation:ctaWave 16s linear infinite }
@keyframes ctaWave{ to{ transform:translateX(-50%) } }
.cta{ padding:clamp(56px, 8vw, 100px) 0 clamp(72px, 10vw, 130px); text-align:center }
.cta h2{ font-size:clamp(2.4rem, 6vw, 5rem) }
.cta h2 em::before{ background:var(--paper) }
.cta p{ max-width:36em; margin:22px auto 0; font-size:clamp(1.05rem, 1.4vw, 1.22rem); color:color-mix(in oklab, var(--ink) 80%, transparent) }
.cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:36px }
.cta__mail{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; margin-top:24px; font-weight:700 }
.cta__mail a{ display:inline-flex; align-items:center; gap:8px }
.cta__mail .i{ width:18px; height:18px }
/* a section directly before the closing block leaves room for the wave */
.section:has(+ .cta-wrap){ padding-bottom:clamp(110px, 13vw, 180px) }

/* ---- forms ---- */
.form{ display:grid; gap:18px }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.field{ display:grid; gap:8px; align-content:start }
.field__label{ font-weight:700; font-size:15px }
.req{ margin-left:3px; color:var(--accent) }
.input, .select, .textarea{ width:100%; min-height:54px; padding:14px 16px; border:0; border-radius:16px; background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line); font:inherit; font-size:16px; transition:box-shadow .2s, background .2s }
.input:hover, .select:hover, .textarea:hover{ box-shadow:inset 0 0 0 1.5px var(--ink-3) }
.input:focus, .select:focus, .textarea:focus{ outline:none; background:var(--paper); box-shadow:inset 0 0 0 2px var(--blue), 0 0 0 5px var(--frost-soft) }
.select{ appearance:none; -webkit-appearance:none; padding-right:44px; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A566B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center/18px no-repeat }
.textarea{ min-height:170px; resize:vertical; line-height:1.55 }
[aria-invalid="true"]{ box-shadow:inset 0 0 0 2px var(--accent) !important; background:var(--peach-soft) !important }
.form__status{ font-weight:600 }
.form__status:empty{ display:none }
.form__status--ok, .form__status--err{ padding:14px 18px; border-radius:var(--r-sm) }
.form__status--ok{ background:var(--mint); color:var(--ink) }
.form__status--err{ background:var(--peach); color:var(--ink) }
.form__status--err a{ text-decoration:underline }
.form__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px }
.form__privacy{ font-size:14px; color:var(--ink-3) }
.form__privacy a{ color:var(--link); text-decoration:underline }
.form.is-sent .btn[type="submit"]{ background:var(--green) }

.form-card{ padding:clamp(24px, 4vw, 44px); border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow) }
.form-card__title{ margin-bottom:24px; font-size:clamp(1.5rem, 2.4vw, 2rem); font-stretch:115% }
.form-card .form__status--ok, .form-card .form__status--err{ margin-bottom:18px }
.contact-list{ display:grid; gap:10px; margin-top:16px; padding:0; list-style:none }
.contact-list a{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:var(--bg); font-weight:700; transition:background .2s, transform .25s cubic-bezier(.3,1.6,.5,1) }
.contact-list a:hover{ background:var(--frost-soft); transform:translateX(4px) }
.contact-list__icon{ display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--paper); color:var(--link) }
.contact-list__icon .i{ width:19px; height:19px }
.contact-status{ margin-top:16px; background:var(--mint-soft); color:var(--ink) }

/* ---- footer ---- */
.foot{ padding:clamp(56px, 7vw, 88px) 0 48px; background:var(--night); color:rgba(255,255,255,.72); font-size:15px }
.foot__grid{ display:grid; grid-template-columns:1.6fr repeat(3, 1fr); gap:40px }
.foot__logo{ display:inline-block; color:#fff; --signal:var(--night-accent) }
.foot__logo .logo{ height:22px; width:auto }
.foot__brand p{ max-width:28em; margin-top:18px }
.foot__contact{ display:flex; flex-wrap:wrap; gap:10px 20px }
.foot__contact a{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#fff }
.foot__contact .i{ width:18px; height:18px; color:var(--night-accent) }
.foot__status{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.08); font-size:14px; font-weight:600; color:#fff }
.foot__status .dot{ background:#3DDC97; box-shadow:0 0 0 4px rgba(61,220,151,.2); animation:pulse 2.4s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(61,220,151,.2) } 50%{ box-shadow:0 0 0 8px rgba(61,220,151,0) } }
.foot h2{ font:800 15px/1 var(--display); font-stretch:115%; letter-spacing:-.01em; color:#fff }
.foot ul{ display:grid; gap:10px; margin-top:18px; padding:0; list-style:none }
.foot a{ transition:color .2s }
.foot a:hover{ color:var(--night-accent) }
.foot__base{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:14px }
.foot__legal{ display:flex; flex-wrap:wrap; gap:8px 20px }
.foot__social{ display:flex; gap:10px }
.foot__social a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08) }
.foot__social .i{ width:18px; height:18px }

/* ==========================================================================
   Motion: things arrive, react and keep gently moving. Decoration on top of a
   complete page; reduced-motion users (and no-JS visitors) get the end state.
   ========================================================================== */
.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * 70ms) }
.js [data-reveal].is-in{ opacity:1; transform:none }

/* headings: words rise one by one; the highlighter draws itself afterwards */
.js [data-split][data-reveal]{ opacity:1; transform:none }
.split-w{ display:inline-block; opacity:0; transform:translateY(.45em) rotate(3deg); filter:blur(6px); transition:opacity .6s, transform .7s cubic-bezier(.2,.8,.2,1), filter .6s; transition-delay:calc(var(--w) * 70ms + 80ms) }
.is-in .split-w{ opacity:1; transform:none; filter:none }
.js [data-reveal] em::before{ transform:rotate(-1.5deg) scaleX(0); transform-origin:left center; transition:transform .8s cubic-bezier(.2,.8,.2,1) .55s }
.js [data-reveal].is-in em::before{ transform:rotate(-1.5deg) scaleX(1) }

/* hero entrance */
.hero__phone{ animation:cardIn .9s cubic-bezier(.2,.8,.2,1) .25s both, bob 7s ease-in-out 1.2s infinite }
.hero__browser{ animation:cardIn .9s cubic-bezier(.2,.8,.2,1) .45s both, bob 8s ease-in-out 1.4s infinite }
.phero__card{ animation:cardIn .9s cubic-bezier(.2,.8,.2,1) .25s both, bob 7s ease-in-out 1.3s infinite }
.phero__badge{ animation:slap .55s cubic-bezier(.3,1.6,.5,1) .8s both }
.shape--circle{ animation:grow 1s cubic-bezier(.3,1.5,.5,1) .1s both }
.sticker--1, .sticker--2, .sticker--3{ animation:slap .55s cubic-bezier(.3,1.6,.5,1) both }
.sticker--1{ animation-delay:1.05s } .sticker--2{ animation-delay:1.25s } .sticker--3{ animation-delay:1.45s }
.sticker--static{ animation:none }
.bubble{ animation:cardIn .7s cubic-bezier(.2,.8,.2,1) .7s both, bob 6s ease-in-out 1.5s infinite }
.bubble__body{ display:grid }
.bubble__typing{ display:inline-flex; gap:4px; height:20px; align-items:center; grid-area:2 / 1; animation:hide 0s 2.1s forwards }
.bubble__typing i{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:typing 1s ease-in-out infinite }
.bubble__typing i:nth-child(2){ animation-delay:.15s } .bubble__typing i:nth-child(3){ animation-delay:.3s }
.bubble__text{ grid-area:2 / 1; opacity:0; animation:show .4s 2.1s forwards }
@keyframes cardIn{ from{ opacity:0; transform:translateY(40px) scale(.94) } to{ opacity:1; transform:none } }
@keyframes grow{ from{ transform:scale(0) } to{ transform:none } }
@keyframes slap{ 0%{ opacity:0; transform:scale(1.8) } 60%{ opacity:1; transform:scale(.92) } 100%{ opacity:1; transform:none } }
@keyframes typing{ 0%,100%{ transform:translateY(0); opacity:.4 } 50%{ transform:translateY(-4px); opacity:1 } }
@keyframes hide{ to{ visibility:hidden; opacity:0 } }
@keyframes show{ to{ opacity:1 } }

/* reveals with character */
.js .bento [data-reveal], .js .tiles [data-reveal], .js .auds [data-reveal]{ transform:translateY(36px) scale(.95); transition:opacity .6s, transform .8s cubic-bezier(.3,1.4,.5,1); transition-delay:calc(var(--i, 0) * 70ms) }
.js .promise[data-reveal], .js .stat[data-reveal]{ transform:scale(1.25) rotate(-6deg); transition:opacity .4s, transform .6s cubic-bezier(.3,1.6,.5,1); transition-delay:calc(var(--i, 0) * 110ms) }
.js .tiers [data-reveal]{ transform:perspective(900px) rotateX(-24deg) translateY(30px); transform-origin:50% 0; transition:opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i, 0) * 90ms) }
.js .pains [data-reveal]{ transform:translateY(30px) rotate(-2deg); transition:opacity .6s, transform .8s cubic-bezier(.3,1.4,.5,1); transition-delay:calc(var(--i, 0) * 80ms) }
.js .bento [data-reveal].is-in, .js .tiles [data-reveal].is-in, .js .auds [data-reveal].is-in, .js .promise[data-reveal].is-in, .js .stat[data-reveal].is-in, .js .tiers [data-reveal].is-in, .js .pains [data-reveal].is-in{ transform:none }

.journey__dot::after{ content:''; position:absolute; inset:-8px; border-radius:inherit; border:3px solid var(--blue); opacity:0; pointer-events:none }
.journey__step.is-reached .journey__dot::after{ animation:ring .9s ease-out }
.journey__spark{ position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px; border-radius:50%; opacity:0; pointer-events:none;
  box-shadow:0 -112px var(--blue), 79px -79px var(--accent), 112px 0 var(--green), 79px 79px var(--blue), 0 112px var(--accent), -79px 79px var(--green), -112px 0 var(--blue), -79px -79px var(--accent) }
.journey__spark{ width:7px; height:7px; margin:-3.5px; box-shadow:0 -52px var(--blue), 37px -37px var(--accent), 52px 0 var(--green), 37px 37px var(--blue), 0 52px var(--accent), -37px 37px var(--green), -52px 0 var(--blue), -37px -37px var(--accent) }
.journey__step.is-reached .journey__spark{ animation:spark .8s ease-out }
.js .journey__dot{ color:var(--ink-3); transition:background .4s, color .4s }
.js .journey__step.is-reached .journey__dot{ background:var(--blue); color:#fff; animation:ding .75s cubic-bezier(.3,1.6,.5,1) }
@keyframes ding{ 0%{ transform:scale(1) } 28%{ transform:scale(1.16) rotate(-5deg) } 58%{ transform:scale(.96) rotate(2deg) } 100%{ transform:scale(1) rotate(0) } }
@keyframes ring{ 0%{ opacity:.8; transform:scale(.88) } 100%{ opacity:0; transform:scale(1.32) } }
@keyframes spark{ 0%{ opacity:1; transform:scale(.35) } 70%{ opacity:.9 } 100%{ opacity:0; transform:scale(1.12) } }

/* finder options pop in one after the other */
.quiz__pane:not([hidden]) .opts > li{ animation:optIn .5s cubic-bezier(.3,1.5,.5,1) both; animation-delay:calc(var(--n, 0) * 28ms) }
@keyframes optIn{ from{ opacity:0; transform:translateY(16px) scale(.9) } to{ opacity:1; transform:none } }

/* ==========================================================================
   Ask: the FAQ as a conversation (views/partials/home/ask.ejs; public/js/modules/ask.js adds .is-live).
   Shared: the homepage once had it; the intro-call and contact pages use it.
   Without JS: the first answer in the chat and the questions as an accordion below it.
   ========================================================================== */
.ask__wrap{ display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); gap:clamp(32px, 6vw, 96px); align-items:start }
.ask__intro{ position:sticky; top:120px; margin:0 }
.ask__text{ max-width:30em; margin-top:16px; color:var(--ink-2); font-size:clamp(1.02rem, 1.3vw, 1.15rem) }
.ask__status{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:9px 16px 9px 12px; border-radius:999px; background:var(--paper); box-shadow:0 0 0 1px var(--line), var(--shadow-s); font-weight:700; font-size:14px }
.ask__pulse{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--green); animation:livePulse 2s ease-out infinite }
@keyframes livePulse{ from{ box-shadow:0 0 0 0 color-mix(in oklab, var(--green) 55%, transparent) } to{ box-shadow:0 0 0 12px transparent } }
.ask__mail{ display:flex; width:max-content; margin-top:18px }
.ask__mail .i{ width:18px; height:18px }

.ask__stage{ position:relative; padding:26px 0 }
.ask__float{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:16px; background:var(--paper); box-shadow:0 0 0 1px var(--line), var(--shadow); font-weight:700; font-size:13px; animation:askFloat 6s ease-in-out infinite }
.ask__float .i{ width:16px; height:16px; color:var(--link) }
.ask__float--a{ top:2px; right:-16px; rotate:3deg }
.ask__float--b{ bottom:-10px; left:-24px; rotate:-3deg; animation-delay:-3s }
.ask__float--b .i{ color:var(--green) }
@keyframes askFloat{ 50%{ translate:0 -8px } }

.chat{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:32px; background:var(--paper); box-shadow:0 0 0 1px var(--line), var(--shadow-lg) }
.chat__head{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line) }
.chat__av{ position:relative; display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:14px; background:var(--ink); color:var(--on-ink); font:800 19px/1 var(--display) }
.chat__av i{ position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--paper) }
.chat__who{ display:grid; gap:2px }
.chat__who b{ font-size:15px }
.chat__who small{ color:var(--ink-3); font-size:12.5px }
.chat__dots{ display:flex; gap:5px; margin-left:auto }
.chat__dots i{ width:7px; height:7px; border-radius:50%; background:var(--line) }
.chat__log{ display:flex; flex-direction:column; gap:10px; min-height:240px; padding:20px }
.chat__msg{ display:flex; max-width:88% }
.chat__msg p{ padding:12px 16px; font-size:15px; line-height:1.5 }
.chat__msg--you{ align-self:flex-end; transform-origin:100% 100% }
.chat__msg--you p{ border-radius:20px 20px 6px 20px; background:var(--ink); color:var(--on-ink); font-weight:600 }
.chat__msg--us{ align-self:flex-start; transform-origin:0 100% }
.chat__msg--us p{ border-radius:20px 20px 20px 6px; background:var(--frost-soft); color:var(--ink) }
.chat__msg.is-new{ animation:msgIn .45s cubic-bezier(.3,1.4,.5,1) both }
@keyframes msgIn{ from{ opacity:0; transform:translateY(12px) scale(.92) } }
.chat__msg--typing p{ display:flex; gap:5px; padding:16px 18px }
.chat__msg--typing i{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:typing 1s ease-in-out infinite }
.chat__msg--typing i:nth-child(2){ animation-delay:.15s } .chat__msg--typing i:nth-child(3){ animation-delay:.3s }
.chat__w{ animation:chatWord .4s ease both; animation-delay:calc(var(--n) * 22ms) }
@keyframes chatWord{ from{ opacity:0; filter:blur(4px) } }
.chat__more{ padding:2px 20px 16px; border-top:1px dashed var(--line) }
.chat__label{ margin:14px 0 10px; color:var(--ink-3); font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase }
.chat__qs{ display:grid; gap:8px }
.chat__q{ border-radius:16px; background:var(--slate-soft) }
.chat__q summary{ padding:12px 16px; font-weight:700; font-size:14.5px; cursor:pointer; list-style:none }
.chat__q summary::-webkit-details-marker{ display:none }
.chat__a{ padding:0 16px 14px; color:var(--ink-2); font-size:14.5px }
.chat__compose{ display:flex; align-items:center; gap:8px; margin:0 14px 14px; padding:6px 6px 6px 18px; border-radius:999px; background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .2s }
.chat__compose:focus-within{ box-shadow:inset 0 0 0 2px var(--link), 0 0 0 4px color-mix(in oklab, var(--link) 18%, transparent) }
.chat__input{ flex:1; min-width:0; height:40px; border:0; background:none; font-size:15px; outline:none }
.chat__input::placeholder{ color:var(--ink-3) }
.chat__send{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--on-ink); transition:transform .25s cubic-bezier(.3,1.6,.5,1), background .2s }
.chat__send:hover{ transform:scale(1.07); background:var(--blue); color:#fff }
.chat__send .i{ width:18px; height:18px; stroke-width:2.4 }
/* JS: a scrolling chat and question chips */
.chat.is-live .chat__log{ height:clamp(230px, 24vw, 290px); min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; -webkit-mask-image:linear-gradient(transparent, #000 26px); mask-image:linear-gradient(transparent, #000 26px) }
.chat.is-live .chat__log::-webkit-scrollbar{ display:none }
.chat.is-live .chat__log::before{ content:''; margin-top:auto } /* new messages settle at the bottom */
.chat.is-live .chat__qs{ display:flex; flex-wrap:wrap; gap:8px }
.chat__chip{ display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:999px; background:var(--slate-soft); color:var(--ink); font-weight:700; font-size:14px; line-height:1.25; text-align:left; transition:transform .3s cubic-bezier(.3,1.6,.5,1), background .2s, color .2s, box-shadow .2s }
.chat__chip:hover{ transform:translateY(-2px); background:var(--frost) }
.chat__chip.is-asked{ background:transparent; color:var(--ink-3); box-shadow:inset 0 0 0 1.5px var(--line) }
.chat__chip.is-asked::before{ content:'✓'; color:var(--green); font-weight:800 }
.chat.is-live:not(.is-on) .chat__chip{ opacity:0 }
.chat.is-on .chat__chip{ animation:optIn .45s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(.9s + var(--n) * 50ms) }

@media (max-width: 1100px){
  .ask__float--a{ right:0 } .ask__float--b{ left:0 }
}
@media (max-width: 960px){
  .ask__wrap{ grid-template-columns:minmax(0, 1fr) }
  .ask__intro{ position:static }
}
@media (max-width: 680px){
  .chat{ border-radius:26px }
  .chat__log, .chat__more{ padding-inline:14px }
  .chat__msg{ max-width:94% }
  .ask__float{ font-size:12px; padding:8px 12px }
}

/* ==========================================================================
   Night strip (.malt): a short dark closing band that runs into the footer — the intro-call and contact pages
   ========================================================================== */
.malt{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(64px, 8vw, 110px) 0; border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--night); color:#fff }
.malt__sky{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.malt__sky i{ position:absolute; width:40vw; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.36; animation:maltDrift 24s ease-in-out infinite alternate }
.malt__sky i:nth-child(1){ left:-10vw; top:-20vw; background:var(--brand-acc) }
.malt__sky i:nth-child(2){ right:-8vw; bottom:-24vw; background:var(--fresh-acc); opacity:.28; animation-delay:-10s }
.malt__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px }
.malt h2{ color:#fff; font-size:clamp(2rem, 4vw, 3.2rem) }
.malt h2 em::before{ background:color-mix(in oklab, var(--night-accent) 34%, transparent) }
.malt p{ max-width:34em; margin-top:12px; color:rgba(255,255,255,.74) }
.malt__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px }
.malt__btn{ background:#fff; color:var(--night) }
.malt__btn:hover{ background:var(--night-accent); color:var(--night) }
.malt__link{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.86); font-weight:700 }
.malt__link:hover{ color:var(--night-accent) }
.malt__link .i{ width:18px; height:18px }
.section--band + .malt, .ask + .malt{ margin-top:0 }

@keyframes maltDrift{ to{ translate:-5vw 4vw; scale:1.12 } }
@media (max-width: 680px){
  .malt{ border-radius:32px 32px 0 0 }
  .malt__actions .btn{ flex:1 1 100% }
}

/* ==========================================================================
   Meet: the closing invitation on the night stage, running on into the footer
   (views/partials/home/meet.ejs; public/js/modules/meet.js adds .is-live, then .is-on when it comes into view).
   Used on the homepage and to close the Diensten and Branches overviews.
   ========================================================================== */
.meet{ position:relative; isolation:isolate; overflow:hidden; margin-top:clamp(16px, 3vw, 40px); padding:clamp(80px, 10vw, 140px) 0 clamp(72px, 9vw, 120px); border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--night); color:#fff }
.section--band + .meet{ margin-top:calc(var(--r-xl) * -1) } /* after a band: the rounded top sits on the band itself */
@media (max-width: 680px){ .section--band + .meet{ margin-top:-32px } }
.meet__sky{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.meet__sky i{ position:absolute; width:46vw; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.42; animation:meetDrift 22s ease-in-out infinite alternate }
.meet__sky i:nth-child(1){ left:-10vw; top:-14vw; background:var(--brand-acc) }
.meet__sky i:nth-child(2){ right:-12vw; top:2vw; background:var(--warm-acc); opacity:.26; animation-duration:27s; animation-delay:-8s }
.meet__sky i:nth-child(3){ left:28vw; bottom:-26vw; background:var(--fresh-acc); opacity:.3; animation-duration:31s; animation-delay:-14s }
@keyframes meetDrift{ to{ translate:6vw 4vw; scale:1.15 } }
.meet__grid{ position:absolute; left:-30%; right:-30%; bottom:0; height:58%; transform:perspective(520px) rotateX(64deg); transform-origin:50% 100%;
  background-image:linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px); background-size:64px 64px;
  -webkit-mask-image:linear-gradient(transparent, #000 75%); mask-image:linear-gradient(transparent, #000 75%); animation:meetGrid 5s linear infinite }
@keyframes meetGrid{ to{ background-position:0 64px, 0 0 } }
.meet__wrap{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(36px, 6vw, 88px); align-items:center }
.meet h2{ font-size:clamp(2.4rem, 5.4vw, 4.6rem); color:#fff }
.meet h2 em::before{ background:color-mix(in oklab, var(--night-accent) 34%, transparent) }
.meet__text{ max-width:32em; margin-top:22px; color:rgba(255,255,255,.74); font-size:clamp(1.05rem, 1.4vw, 1.2rem) }
.meet__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px }
.meet__btn{ background:#fff; color:var(--night); box-shadow:0 14px 34px -16px rgba(0,0,0,.7) }
.meet__btn:hover{ background:var(--night-accent); color:var(--night) }
.meet__btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.28) }
.meet__btn--ghost:hover{ background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 0 0 0 2px #fff }
.meet__mail{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:26px; color:rgba(255,255,255,.86); font-weight:700 }
.meet__mail a{ display:inline-flex; align-items:center; gap:8px; transition:color .2s }
.meet__mail a:hover{ color:var(--night-accent) }
.meet__mail .i{ width:18px; height:18px }

.meet__stage{ position:relative; padding:30px 0; perspective:1200px }
.meet__float{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:16px; background:rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:13px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:askFloat 7s ease-in-out infinite }
.meet__float .i{ width:16px; height:16px; color:var(--night-accent) }
.meet__float--a{ top:0; left:-20px; rotate:-4deg }
.meet__float--b{ right:-16px; bottom:8px; rotate:3deg; animation-delay:-3.5s }
.invite{ position:relative; display:grid; gap:14px; padding:22px; border-radius:28px; background:var(--paper); color:var(--ink); box-shadow:0 44px 90px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.5deg); transition:transform .5s cubic-bezier(.2,.8,.2,1) }
.invite__head{ display:flex; align-items:center; gap:14px }
.invite__cal{ display:grid; justify-items:center; flex:none; width:60px; overflow:hidden; border-radius:14px; background:var(--paper); box-shadow:0 0 0 1px var(--line) }
.invite__cal small{ width:100%; padding:4px 0; background:var(--warm-acc); color:#fff; font:700 10px/1 var(--mono); letter-spacing:.08em; text-align:center; text-transform:uppercase }
.invite__cal b{ padding:6px 0 8px; font:800 24px/1 var(--display) }
.invite__title{ display:grid; gap:3px }
.invite__title b{ font-size:16px }
.invite__title small{ color:var(--ink-3); font-size:13px }
.invite__people{ display:flex; align-items:center; margin-top:6px }
.invite__people i{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 2px var(--paper); font:700 11px/1 var(--text); font-style:normal }
.invite__people i + i{ margin-left:-6px }
.invite__people .is-r{ background:var(--ink); color:var(--on-ink) }
.invite__people em{ width:8px; height:8px; margin-left:10px; border-radius:50%; background:var(--green); animation:livePulse 2s ease-out infinite }
.invite__pick{ padding-top:14px; border-top:1px solid var(--line); color:var(--ink-3); font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase }
.invite__row{ position:relative; display:grid; gap:6px; isolation:isolate }
.invite__days{ grid-template-columns:repeat(5, minmax(0, 1fr)) }
.invite__times{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
.invite__opt{ position:relative; display:grid; justify-items:center; gap:3px; padding:10px 4px; border-radius:14px; background:var(--slate-soft); color:var(--ink); font-weight:700; font-size:14px; transition:color .3s, background .3s, transform .25s cubic-bezier(.3,1.6,.5,1) }
.invite__opt > *{ position:relative; z-index:3 }
.invite__opt:hover{ transform:translateY(-2px) }
.invite__day small{ color:var(--ink-3); font:600 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; transition:color .3s }
.invite__day b{ font:800 18px/1.1 var(--display) }
.invite__opt[aria-checked="true"]{ background:var(--ink); color:var(--on-ink) }
.invite__opt[aria-checked="true"] small{ color:color-mix(in oklab, var(--on-ink) 70%, transparent) }
.invite__mark{ position:absolute; left:0; top:0; z-index:2; width:var(--mw, 0px); height:var(--mh, 0px); border-radius:14px; background:var(--ink); opacity:0; pointer-events:none; transform:translate(var(--mx, 0px), var(--my, 0px)); transition:transform .55s cubic-bezier(.3,1.35,.5,1), width .3s, height .3s, opacity .3s }
.meet.is-live .invite__opt[aria-checked="true"]{ background:var(--slate-soft) } /* JS: one highlight slides to the pick instead */
.meet.is-live .invite__mark{ opacity:1 }
.invite__go{ position:relative; display:flex; align-items:center; gap:12px; overflow:hidden; margin-top:4px; padding:12px 18px 12px 12px; border-radius:20px; background:var(--ink); color:var(--on-ink); transition:transform .25s cubic-bezier(.3,1.6,.5,1), background .2s, color .2s }
.invite__go:hover{ transform:translateY(-2px); background:var(--blue); color:#fff }
.invite__go-icon{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:12px; background:color-mix(in oklab, currentColor 14%, transparent) }
.invite__go-icon .i{ width:20px; height:20px }
.invite__go-text{ display:grid; gap:3px }
.invite__go-text b{ font-size:15px }
.invite__go-text small{ font:600 12px/1.2 var(--mono); opacity:.75 }
.invite__go > .i{ flex:none; width:20px; height:20px; margin-left:auto; transition:transform .25s }
.invite__go:hover > .i{ transform:translateX(3px) }
.invite__go::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform:translateX(-100%); pointer-events:none }
.invite__go.is-shine::after{ animation:inviteShine 1.1s ease }
@keyframes inviteShine{ to{ transform:translateX(100%) } }
.invite__note{ color:var(--ink-3); font-size:13px; text-align:center }
/* the invite lands when it comes into view: card tips up, the date flips in, people pop, the options cascade */
.meet.is-live .invite{ opacity:0; transform:translateY(50px) rotateX(20deg) rotate(-1.5deg) }
.meet.is-on .invite{ opacity:1; transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.5deg); transition:opacity .6s ease, transform .9s cubic-bezier(.2,.8,.2,1) }
.meet.is-on .invite.is-tilt{ transition:transform .45s cubic-bezier(.2,.8,.2,1) }
.meet.is-live .invite__cal b{ opacity:0; transform:perspective(160px) rotateX(-85deg); transform-origin:50% 0 }
.meet.is-on .invite__cal b{ opacity:1; transform:none; transition:opacity .2s .45s, transform .8s cubic-bezier(.3,1.5,.5,1) .45s }
.meet.is-live .invite__people i{ scale:0 }
.meet.is-on .invite__people i{ scale:1; transition:scale .5s cubic-bezier(.3,1.7,.5,1) .7s }
.meet.is-on .invite__people i + i{ transition-delay:.84s }
.meet.is-live .invite__opt{ opacity:0; translate:0 10px }
.meet.is-on .invite__opt{ opacity:1; translate:none; transition:opacity .35s calc(.55s + var(--k) * .05s), translate .5s cubic-bezier(.3,1.5,.5,1) calc(.55s + var(--k) * .05s), color .3s, background .3s, transform .25s cubic-bezier(.3,1.6,.5,1) }
.meet.is-live:not(.is-on) .invite__mark{ opacity:0 }

@media (max-width: 960px){
  .meet__wrap{ grid-template-columns:minmax(0, 1fr) }
  .meet__stage{ max-width:520px }
}
@media (max-width: 680px){
  .meet{ padding:64px 0 56px; border-radius:32px 32px 0 0 }
  .meet__actions .btn{ flex:1 1 100% }
  .invite{ padding:16px; border-radius:24px }
  .invite__days{ gap:4px }
  .invite__opt{ padding:8px 2px; font-size:13px }
  .invite__day b{ font-size:16px }
  .meet__float--a{ left:-2px } .meet__float--b{ right:-2px }
}

/* ==========================================================================
   Article cards (blog overview and article page; views/partials/cards/article.ejs). The cover is drawn from the
   article's topic: its colour, its icon and three rings that open up on hover; a soft light follows the pointer.
   ========================================================================== */
.bcard{ --mx:50%; --my:0%; position:relative; display:flex; flex-direction:column; height:100%; padding:10px 10px 22px; overflow:hidden; isolation:isolate; border-radius:var(--r-lg); background:var(--paper); box-shadow:0 0 0 1px var(--line), var(--shadow-s); transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s }
.bcard::before{ content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(260px circle at var(--mx) var(--my), color-mix(in oklab, var(--t-acc) 14%, transparent), transparent 70%); opacity:0; transition:opacity .4s }
.bcard:hover{ transform:translateY(-6px); box-shadow:0 0 0 1.5px color-mix(in oklab, var(--t-acc) 40%, var(--line)), 0 34px 60px -38px color-mix(in oklab, var(--t-deep) 70%, transparent) }
.bcard:hover::before{ opacity:1 }
.bcard__cover{ position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; border-radius:calc(var(--r-lg) - 8px); background:radial-gradient(110% 100% at 88% 18%, color-mix(in oklab, var(--t-mid) 80%, transparent), transparent 62%), linear-gradient(150deg, var(--t-wash), var(--t-soft)) }
.bcard__rings{ position:absolute; right:-16%; top:50%; width:78%; aspect-ratio:1; transform:translateY(-50%) }
.bcard__rings i{ position:absolute; inset:0; border-radius:50%; border:1.5px solid color-mix(in oklab, var(--t-acc) 28%, transparent); transition:transform .9s cubic-bezier(.2,.8,.2,1) }
.bcard__rings i:nth-child(2){ inset:16%; transition-delay:.05s }
.bcard__rings i:nth-child(3){ inset:32%; border-style:dashed; transition-delay:.1s }
.bcard:hover .bcard__rings i{ transform:scale(1.14) }
.bcard:hover .bcard__rings i:nth-child(3){ transform:scale(1.2) rotate(40deg) }
.bcard__art{ position:absolute; right:13%; top:50%; width:32%; height:auto; aspect-ratio:1; fill:none; stroke:var(--t-deep); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; transform:translateY(-50%) rotate(-10deg); transition:transform .8s cubic-bezier(.3,1.5,.5,1) }
.bcard:hover .bcard__art{ transform:translateY(-50%) rotate(0deg) scale(1.1) }
.bcard__chip{ position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--paper); color:var(--ink-2); font:700 11.5px/1 var(--mono); box-shadow:0 6px 14px -8px rgba(12, 22, 52, .4) }
.bcard__chip .i{ width:13px; height:13px }
.bcard__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:18px 14px 0; color:var(--ink-3); font:600 11.5px/1.2 var(--mono); letter-spacing:.04em; text-transform:uppercase }
.bcard__cat{ color:var(--t-deep) }
.bcard__title{ margin:10px 14px 0; font:800 clamp(1.08rem, 1.45vw, 1.25rem)/1.22 var(--display); font-stretch:106%; letter-spacing:-.015em; text-wrap:balance }
.bcard__text{ display:-webkit-box; margin:10px 14px 0; overflow:hidden; color:var(--ink-2); font-size:15px; line-height:1.5; -webkit-line-clamp:3; -webkit-box-orient:vertical }
.bcard__go{ display:inline-flex; align-items:center; gap:8px; margin:auto 14px 0; padding-top:18px; color:var(--link); font-size:14.5px; font-weight:700 }
.bcard__go .i{ width:17px; height:17px; transition:transform .3s }
.bcard:hover .bcard__go .i{ transform:translateX(4px) }
.bgrid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px }
/* error pages (views/partials/error.ejs; js/modules/lens.js): a glass glides over the outlined number and fills it in */
.lens{ --lx:50%; --ly:50%; --r:clamp(56px, 9vw, 96px); position:relative; display:grid; place-items:center; min-height:clamp(220px, 28vw, 340px); cursor:none; -webkit-user-select:none; user-select:none }
.lens__num{ grid-area:1 / 1; font:800 clamp(7rem, 17vw, 14rem)/.9 var(--display); font-stretch:125%; letter-spacing:-.06em }
.lens__num--line{ color:transparent; -webkit-text-stroke:2px color-mix(in oklab, var(--ink) 22%, transparent) }
.lens__num--fill{ background:linear-gradient(135deg, var(--t-acc), var(--t-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-mask-image:radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 98%, transparent 100%); mask-image:radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 98%, transparent 100%) }
.lens__glass{ position:absolute; left:var(--lx); top:var(--ly); width:calc(var(--r) * 2); height:calc(var(--r) * 2); border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 45%); box-shadow:inset 0 0 0 7px var(--ink), 0 24px 50px -20px rgba(12, 22, 52, .5); transform:translate(-50%, -50%); pointer-events:none }
.lens__glass i{ position:absolute; left:84%; top:84%; width:16px; height:calc(var(--r) * .9); border-radius:8px; background:var(--ink); transform:rotate(-45deg); transform-origin:50% 0 }
.err-links h2{ text-align:center; font-size:clamp(1.5rem, 2.6vw, 2.1rem) }
.err-links__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:900px; margin:26px auto 0 }
@media (max-width: 960px){ .lens{ min-height:200px; margin-top:8px } }
@media (prefers-reduced-motion: reduce){ .lens__num--fill{ -webkit-mask-image:none; mask-image:none } .lens__glass{ display:none } }

/* reading aids (article and legal pages; /js/modules/reading.js): the bar along the top of the screen, and the
   contents beside the text with one sliding highlight, ticks for what you have read and a progress bar */
.rbar{ position:fixed; left:0; right:0; top:0; z-index:70; height:3px; pointer-events:none }
.rbar i{ display:block; height:100%; background:linear-gradient(90deg, var(--t-acc), var(--t-mid)); box-shadow:0 0 12px var(--t-acc); transform:scaleX(var(--p, 0)); transform-origin:0 50% }
.atoc{ position:sticky; top:108px; max-height:calc(100vh - 128px); overflow:auto; padding:22px 18px 16px; border-radius:var(--r); background:var(--paper); box-shadow:0 0 0 1px var(--line), var(--shadow-s); scrollbar-width:thin }
.atoc__title{ padding:0 6px; font:800 16px/1.2 var(--display); font-stretch:110% }
.atoc__progress{ display:flex; align-items:center; gap:10px; margin:12px 6px 14px; color:var(--ink-3); font:600 11.5px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase }
.atoc__progress b{ color:var(--ink); font-variant-numeric:tabular-nums }
.atoc__bar{ flex:1; height:4px; overflow:hidden; border-radius:4px; background:color-mix(in oklab, var(--ink) 9%, transparent) }
.atoc__bar i{ display:block; height:100%; border-radius:inherit; background:var(--t-acc); transform:scaleX(var(--p, 0)); transform-origin:0 50% }
.atoc__nav{ position:relative; display:grid; gap:2px }
.atoc__mark{ position:absolute; left:0; right:0; top:0; z-index:0; height:var(--mh, 0px); border-radius:12px; background:color-mix(in oklab, var(--t-acc) 12%, var(--paper)); box-shadow:inset 3px 0 0 var(--t-acc); opacity:0; transform:translateY(var(--my, 0px)); transition:transform .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), opacity .3s }
.atoc.is-live .atoc__mark{ opacity:1 }
.atoc__nav a{ position:relative; z-index:1; display:grid; grid-template-columns:26px minmax(0, 1fr); gap:8px; padding:8px 8px; border-radius:12px; color:var(--ink-2); font-size:13.5px; line-height:1.35; transition:color .25s }
.atoc__nav a:hover{ color:var(--ink) }
.atoc__no{ display:grid; place-items:center; width:22px; height:22px; margin-top:-1px; border-radius:50%; color:var(--ink-3); font:700 10.5px/1 var(--mono) }
.atoc__no .i{ display:none; width:13px; height:13px; stroke-width:3 }
.atoc__nav a.is-done .atoc__no{ background:var(--t-acc); color:#fff }
.atoc__nav a.is-done .atoc__no b{ display:none }
.atoc__nav a.is-done .atoc__no .i{ display:block }
.atoc__nav a.is-active{ color:var(--ink); font-weight:700 }
.atoc__nav a.is-active .atoc__no{ background:var(--paper); color:var(--t-deep); box-shadow:0 0 0 2px var(--t-acc) }
.atoc__nav a.is-active .atoc__no b{ display:block }
.atoc__nav a.is-active .atoc__no .i{ display:none }
@media (max-width: 960px){ .atoc{ display:none } }
/* related service cards (service and article pages): a soft light follows the pointer */
.mates{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px }
.mate{ --mx:50%; --my:0%; position:relative; display:flex; flex-direction:column; gap:8px; height:100%; padding:24px; overflow:hidden; isolation:isolate; border-radius:var(--r); background:var(--paper); box-shadow:0 0 0 1px var(--line), var(--shadow-s); transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s }
.mate::before{ content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(240px circle at var(--mx) var(--my), color-mix(in oklab, var(--t-acc) 18%, transparent), transparent 70%); opacity:0; transition:opacity .4s }
.mate:hover{ transform:translateY(-5px); box-shadow:0 0 0 1.5px color-mix(in oklab, var(--t-acc) 45%, var(--line)), 0 30px 50px -32px color-mix(in oklab, var(--t-deep) 70%, transparent) }
.mate:hover::before{ opacity:1 }
.mate__icon{ display:grid; place-items:center; width:46px; height:46px; margin-bottom:8px; border-radius:15px; background:var(--t-soft); color:var(--t-deep); transition:transform .5s cubic-bezier(.3,1.6,.5,1) }
.mate:hover .mate__icon{ transform:rotate(-8deg) scale(1.08) }
.mate__icon .i{ width:22px; height:22px }
.mate b{ font:800 18px/1.2 var(--display); font-stretch:108% }
.mate small{ color:var(--ink-2); font-size:14px; line-height:1.4 }
.mate__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px; color:var(--ink-3); font-size:13.5px; font-weight:600 }
.mate__foot .i{ width:18px; height:18px; color:var(--link); transition:transform .3s }
.mate:hover .mate__foot .i{ transform:translateX(4px) }
@media (max-width: 1100px){ .mates{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width: 680px){ .mates{ grid-template-columns:minmax(0, 1fr) } }
@media (max-width: 1000px){ .bgrid{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px){ .bgrid{ grid-template-columns:minmax(0, 1fr) } }

/* ==========================================================================
   Overview hero (.ohero: Diensten, Branches) and the running ribbon (.marquee)
   The hero card is as wide as the navbar, like the Kennismaken and Contact heroes; each page brings its own art.
   ========================================================================== */
.ohero{ padding:clamp(16px, 3vw, 32px) 0 0 }
.ohero__card{ position:relative; width:min(1220px, 100% - 40px); margin:0 auto; padding:clamp(40px, 6vw, 80px) 0; overflow:hidden; isolation:isolate; border-radius:var(--r-xl); background:var(--hero-bg) }
.ohero__card > .wrap{ width:auto; padding-inline:clamp(24px, 5vw, 72px) }
.ohero__sky{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.ohero__sky i{ position:absolute; width:38vw; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.5; animation:oheroDrift 20s ease-in-out infinite alternate }
.ohero__sky i:nth-child(1){ right:-8vw; top:-14vw; background:var(--brand-mid) }
.ohero__sky i:nth-child(2){ right:20vw; bottom:-24vw; background:var(--warm-mid); opacity:.35; animation-duration:26s; animation-delay:-9s }
.ohero__dots{ position:absolute; inset:0; background-image:radial-gradient(color-mix(in oklab, var(--ink) 14%, transparent) 1px, transparent 1.5px); background-size:22px 22px; -webkit-mask-image:radial-gradient(60% 90% at 85% 40%, #000, transparent 70%); mask-image:radial-gradient(60% 90% at 85% 40%, #000, transparent 70%) }
@keyframes oheroDrift{ to{ translate:-5vw 4vw; scale:1.12 } }
.ohero__inner{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); align-items:center; gap:clamp(32px, 5vw, 72px) }
.ohero h1{ max-width:12ch; margin-top:18px; font-size:clamp(2.6rem, 5.6vw, 4.9rem) }
.ohero__lead{ max-width:34em; margin-top:20px; color:var(--ink-2); font-size:clamp(1.05rem, 1.4vw, 1.2rem) }
.ohero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.ohero__stats{ display:flex; flex-wrap:wrap; gap:10px 34px; margin:34px 0 0; padding:22px 0 0; border-top:1px solid color-mix(in oklab, var(--ink) 10%, transparent); list-style:none }
.ohero__stats li{ display:grid; gap:4px }
.ohero__stats b{ font:800 clamp(1.9rem, 3vw, 2.5rem)/1 var(--display); font-stretch:115%; letter-spacing:-.03em }
.ohero__stats span{ color:var(--ink-3); font:600 11.5px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase }

.marquee{ display:flex; gap:12px; overflow:hidden; padding-block:4px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) }
.marquee + .marquee{ margin-top:10px }
.marquee__track{ display:flex; flex:none; gap:12px; margin:0; padding:0; list-style:none; animation:ribbon var(--speed, 60s) linear infinite }
.marquee--back .marquee__track{ animation-direction:reverse }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track{ animation-play-state:paused }
/* its own name: `marquee` (−50 %) belongs to the one-track loops (the home project wall, the industry strip), where
   both copies sit in one track; here each copy is its own track, so each moves its full width plus the gap */
@keyframes ribbon{ to{ transform:translateX(calc(-100% - 12px)) } }
.marquee__track:only-child{ padding-right:12px; animation-name:marquee }
@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none }
  .marquee__track{ animation:none }
  .marquee__track[aria-hidden]{ display:none }
}
@media (max-width: 960px){
  .ohero__inner{ grid-template-columns:minmax(0, 1fr) }
}
@media (max-width: 680px){
  .ohero__card{ width:calc(100% - 12px); border-radius:36px; padding:36px 0 32px }
  .ohero__card > .wrap{ padding-inline:20px }
  .ohero__stats{ gap:10px 24px }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px){
  .auds{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
  .opts{ grid-template-columns:repeat(3, 1fr) }
  .promises, .stats, .tiles--4{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 1100px){
  .bento{ grid-template-columns:repeat(2, 1fr); grid-template-areas:"web web" "app shop" "app ai" "soft soft" "seo sync" "brand brand" }
  .tiles, .posts{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .pains > li{ flex-basis:calc((100% - 16px) / 2) }
}
@media (max-width: 960px){
  .split{ grid-template-columns:minmax(0, 1fr) }
  .split__aside{ position:static }
  .article{ grid-template-columns:minmax(0, 1fr) }
  .article__toc{ position:static }
  .work-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .work-grid > li:nth-child(3n+2){ margin-top:0 }
  .work-grid > li:nth-child(even){ margin-top:40px }
  .auds{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .hero__inner, .phero__inner{ grid-template-columns:minmax(0, 1fr) }
  .hero__art{ min-height:400px; max-width:560px; width:100%; margin-inline:auto }
  .phero__art{ max-width:480px; width:100%; margin-inline:auto; min-height:300px }
  .head--split{ flex-direction:column; align-items:flex-start }
  .quiz__result:not([hidden]){ grid-template-columns:1fr }
  .quiz__art{ aspect-ratio:16/10 }
  .faq-wrap, .duo{ grid-template-columns:minmax(0, 1fr) }
  .faq-wrap > .head, .duo > .head{ position:static }
  .faq-doodle{ display:none }
  .tiers{ grid-template-columns:minmax(0, 1fr); max-width:520px }
  .cfg{ grid-template-columns:minmax(0, 1fr) }
  .cfg__summary{ position:static }
  .foot__grid{ grid-template-columns:1fr 1fr }
  .foot__brand{ grid-column:1 / -1 }
}
@media (max-width: 680px){
  body{ font-size:16px }
  .shots{ grid-template-columns:1fr }
  .shots__item, .shots__item--main{ border-radius:var(--r-sm) }
  .wrap, .wrap--narrow{ width:calc(100% - 32px) }
  .nav{ padding:10px 0 }
  .nav__inner{ height:60px; width:calc(100% - 20px); padding-left:20px }
  .nav.is-scrolled .nav__inner{ height:56px }
  .hero, .phero{ padding:6px 0 0 }
  .hero__inner, .phero__inner{ width:calc(100% - 12px); border-radius:36px; padding:36px 20px 24px }
  .hero h1{ font-size:clamp(2.3rem, 11vw, 3rem) }
  .phero h1{ font-size:clamp(2rem, 9vw, 2.7rem) }
  .hero__actions .btn, .phero__actions .btn{ flex:1 1 100% }
  .hero__art{ min-height:330px }
  .phero__art{ min-height:260px }
  .shape--circle{ width:200px; height:200px }
  .bubble{ max-width:210px; font-size:13px; left:0 }
  .sticker{ height:34px; font-size:13px; padding:0 14px }
  .quiz{ border-radius:32px; padding:20px 16px }
  .opts, .opts--needs{ grid-template-columns:1fr 1fr; gap:8px }
  .opt{ padding:12px; gap:10px; font-size:14px; border-radius:20px }
  .opt__icon{ width:40px; height:40px; border-radius:13px }
  .quiz__actions .btn{ flex:1 1 100%; justify-content:space-between }
  .promises, .tiles, .tiles--4, .posts, .work-grid{ grid-template-columns:minmax(0, 1fr) }
  .pains > li{ flex-basis:100% }
  .stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
  .stat{ padding:20px 18px }
  .auds{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
  .aud{ padding:6px 6px 14px; border-radius:20px }
  .aud .media{ aspect-ratio:16/10 }
  .aud__body{ padding:10px 6px 0 }
  .aud__label{ font-size:15px }
  .aud__hint{ font-size:13px }
  .bento{ grid-template-columns:1fr; grid-template-areas:"web" "app" "shop" "ai" "soft" "seo" "sync" "brand" }
  .tile{ min-height:0; padding:24px }
  .tile__art{ margin:18px -24px -24px; min-height:200px }
  .bento__cell--web .tile__art{ min-height:220px }
  .bento__cell--app .tile__art{ margin-inline:-24px }
  .bento__cell--brand .tile{ padding-right:24px }
  .bento__cell--brand .tile__art{ position:relative; inset:auto; width:auto; margin:18px -24px -24px; min-height:200px }
  .work-grid > li:nth-child(3n+2), .work-grid > li:nth-child(even){ margin-top:0 }
  .promise--2, .promise--4{ translate:none }
  .journey::before, .journey::after{ left:23px }
  .journey__step{ grid-template-columns:50px minmax(0, 1fr); gap:14px }
  .journey__dot{ width:50px; height:50px; font-size:20px }
  .journey__body{ padding:18px 20px }
  .form__row{ grid-template-columns:1fr }
  .cfg__options, .cfg__options--3{ grid-template-columns:1fr 1fr }
  .model{ flex-direction:column }
  .model__price{ justify-items:start }
  .related, .promises--3{ grid-template-columns:minmax(0, 1fr) }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:32px 20px }
  .table{ font-size:14px }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important }
  .js [data-reveal], .split-w{ opacity:1; transform:none; filter:none }
  .js [data-reveal] em::before{ transform:rotate(-1.5deg) }
  .bubble__typing{ display:none } .bubble__text{ opacity:1; animation:none }
  .marquee{ -webkit-mask-image:none; mask-image:none }
  .marquee__track{ flex-wrap:wrap; justify-content:center; animation:none; width:min(1220px, 100% - 40px); margin-inline:auto; flex:1; row-gap:10px }
  .marquee__track li[aria-hidden]{ display:none }
}