/* ==========================================================================
   btd design v2 — Mollie-richting (concept 20-10-2026)
   Alleen geladen op pagina's met template-home-v2.php (body.design-v2).
   Wit als basis, warm zand voor kaarten, inkt voor knoppen, kobalt spaarzaam.
   ========================================================================== */

.design-v2 {
  --v2-ink: #141619;
  --v2-text: #3a3f45;
  --v2-mute: #6b7178;
  --v2-line: #e8e4dd;
  --v2-sand: #f6f3ee;
  --v2-sand-2: #efe9df;
  --v2-accent: #494fdf;
  --v2-radius: 24px;
  --v2-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --v2-display: 'Manrope', 'Inter', system-ui, sans-serif;
  background: #fff;
  color: var(--v2-text);
}

/* ---------- Navigatie: licht ---------- */
.design-v2 .nav { background: rgba(255,255,255,.92); color: var(--v2-ink); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.design-v2 .nav.scrolled { border-bottom-color: var(--v2-line); }
.design-v2 .nav-inner { height: 72px; }
.design-v2 .brand { color: var(--v2-ink); }
.design-v2 .nav-links a { color: var(--v2-ink); font-weight: 500; }
.design-v2 .nav-links a:hover, .design-v2 .nav-links a.active { color: var(--v2-mute); }
.design-v2 .nav-cta .btn-accent { background: var(--v2-ink); color: #fff; border-radius: 12px; padding: 11px 18px; }
.design-v2 .nav-cta .btn-accent:hover { background: #2a2e33; }
.design-v2 .nav-toggle { border-color: var(--v2-line); }
.design-v2 .nav-toggle span { background: var(--v2-ink); }
@media (max-width: 720px) {
  .design-v2 .nav.open .nav-links, .design-v2 .nav.open .nav-cta { background: #fff; border-top-color: var(--v2-line); }
}

/* ---------- Basis ---------- */
.v2 { font-size: 17px; line-height: 1.6; }
.v2-container { width: min(100% - 40px, 1280px); margin-inline: auto; }
.v2-container-wide { width: min(100% - 40px, 1400px); margin-inline: auto; }
.v2-section { padding: clamp(56px, 8vw, 112px) 0 0; }
.v2-section-tight { padding-top: clamp(40px, 5vw, 64px); }
.v2-section-last { padding-bottom: clamp(56px, 8vw, 112px); }
.v2-kicker { font-family: var(--v2-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-ink); margin: 0 0 18px; }
.v2-h1, .v2-h2, .v2-h3 { font-family: var(--v2-display); font-weight: 400; color: var(--v2-ink); margin: 0; }
.v2-h1 { font-size: clamp(48px, 6.4vw, 92px); line-height: .98; letter-spacing: -.045em; }
.v2-h2 { font-size: clamp(32px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -.035em; }
.v2-h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -.025em; }
.v2-lede { font-size: 18px; line-height: 1.55; color: var(--v2-text); max-width: 44ch; margin: 20px 0 0; }
.v2-lede a { color: var(--v2-ink); text-decoration: underline; text-underline-offset: 3px; }
.v2-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; color: var(--v2-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.v2-link span { text-decoration: none; display: inline-block; transition: transform .2s ease; }
a:hover > .v2-link span, .v2-link:hover span { transform: translateX(3px); }

/* Knoppen */
.v2-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 14px; font-weight: 600; font-size: 16px; text-decoration: none; transition: background .2s ease, transform .2s ease; white-space: nowrap; }
.v2-btn:active { transform: translateY(1px); }
.v2-btn-dark { background: var(--v2-ink); color: #fff; }
.v2-btn-dark:hover { background: #2a2e33; color: #fff; }
.v2-btn-sand { background: var(--v2-sand); color: var(--v2-ink); }
.v2-btn-sand:hover { background: var(--v2-sand-2); }
.v2-btn-white { background: #fff; color: var(--v2-ink); }
.v2-btn-white:hover { background: #fbfaf8; }
.v2-btn-light { background: #fff; color: var(--v2-ink); margin-top: 28px; }

/* ---------- 1. Hero ---------- */
.v2-hero { padding: clamp(56px, 9vw, 120px) 0 0; }
.v2-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.v2-hero-side p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--v2-text); max-width: 40ch; }
.v2-hero-side .v2-buttons { margin-top: 24px; }
.v2-hero-visual { position: relative; margin-top: clamp(40px, 5vw, 64px); border-radius: var(--v2-radius); overflow: hidden; aspect-ratio: 1400 / 640; min-height: 360px;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(73, 79, 223, .16), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, #e7dccb, transparent 60%),
    linear-gradient(160deg, #f8f5f0 0%, #efe7da 100%);
}
.v2-window { margin: 0; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(20, 22, 25, .35), 0 0 0 1px rgba(20, 22, 25, .06); }
.v2-window-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #fbfaf8; border-bottom: 1px solid #efebe4; }
.v2-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e2ddd4; }
.v2-window-bar span { margin-left: 10px; font-family: var(--v2-mono); font-size: 11px; color: var(--v2-mute); letter-spacing: .02em; }
.v2-window img { display: block; width: 100%; height: auto; }
.v2-hero-visual .v2-window-main { position: absolute; left: 7%; top: 12%; width: 62%; }
.v2-hero-visual .v2-window-side { position: absolute; right: 5%; bottom: -6%; width: 34%; }
.v2-chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; font-size: 15px; font-weight: 500; color: #fff; background: rgba(32, 28, 24, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.v2-chip-top { right: 6%; top: 10%; }
.v2-chip-bottom { left: 5%; bottom: 8%; }
.v2-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .25); }

/* ---------- 2. Logo-rij ---------- */
.v2-logos { padding: clamp(36px, 5vw, 56px) 0 0; }
.v2-logo-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; }
.v2-logo-row li { font-family: var(--v2-display); font-weight: 600; font-size: 21px; letter-spacing: -.02em; color: #9a9da2; }

/* ---------- 3. Diensten-raster ---------- */
.v2-service-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--v2-line); border: 1px solid var(--v2-line); border-radius: 20px; overflow: hidden; }
.v2-service-grid li { display: flex; background: #fff; }
.v2-service-grid a { flex: 1; display: flex; align-items: flex-start; gap: 12px; padding: 22px; font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--v2-ink); text-decoration: none; transition: background .2s ease; }
.v2-service-grid a:hover, .v2-service-grid a:focus-visible { background: var(--v2-sand); }
.v2-service-icon { display: inline-flex; color: var(--v2-mute); flex-shrink: 0; margin-top: 1px; }
.v2-service-icon svg { width: 20px; height: 20px; }
.v2-service-label { flex: 1; min-width: 0; text-wrap: balance; }

/* ---------- 4. Twee kaarten ---------- */
.v2-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.v2-card { position: relative; display: flex; flex-direction: column; background: var(--v2-sand); border-radius: var(--v2-radius); padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.4vw, 44px) 0; overflow: hidden; min-height: 560px; }
.v2-card .v2-h3 { margin-bottom: 18px; }
.v2-card-media { margin-top: auto; padding-top: 40px; }
.v2-card-media .v2-window { border-radius: 14px 14px 0 0; box-shadow: 0 -10px 50px -24px rgba(20,22,25,.3), 0 0 0 1px rgba(20,22,25,.06); }
.v2-card-media .v2-window img { aspect-ratio: 16 / 9.5; object-fit: cover; object-position: top center; }

/* ---------- 5. Paneel midden ---------- */
.v2-panel { background: var(--v2-sand); border-radius: var(--v2-radius); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); }
.v2-panel-center { text-align: center; }
.v2-panel-center .v2-kicker { margin-bottom: 14px; }
.v2-panel-art { max-width: 620px; margin: clamp(28px, 4vw, 48px) auto; }
.v2-panel-art svg { display: block; width: 100%; height: auto; }
.v2-window-left img { object-position: left top !important; }
/* Waaier van drie kleine schermkaarten (zoals de kaartenwaaier op mollie.com) */
.v2-fan { position: relative; height: 300px; max-width: 820px; margin: clamp(32px, 4vw, 52px) auto clamp(36px, 4vw, 52px); }
.v2-mini { position: absolute; top: 34px; left: 50%; width: 240px; padding: 20px; text-align: left; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(20,22,25,.28), 0 0 0 1px rgba(20,22,25,.05); }
.v2-mini-1 { transform: translateX(calc(-50% - 262px)) rotate(-5deg); }
.v2-mini-2 { transform: translateX(-50%) translateY(-22px); z-index: 2; }
.v2-mini-3 { transform: translateX(calc(-50% + 262px)) rotate(5deg); }
.v2-mini-k { margin: 0 0 6px; font-family: var(--v2-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-mute); }
.v2-mini strong { display: block; font-size: 15px; font-weight: 600; color: var(--v2-ink); line-height: 1.3; }
.v2-bars { display: flex; align-items: flex-end; gap: 7px; height: 110px; margin-top: 18px; }
.v2-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #7a7fff, var(--v2-accent)); }
.v2-bars i:nth-child(-n+4) { background: #e3e4f8; }
.v2-mini-lines { display: grid; gap: 8px; margin: 18px 0 16px; }
.v2-mini-lines i { height: 9px; border-radius: 5px; background: var(--v2-sand-2); }
.v2-mini-lines i:nth-child(1) { width: 92%; } .v2-mini-lines i:nth-child(2) { width: 76%; } .v2-mini-lines i:nth-child(3) { width: 58%; }
.v2-mini-sync { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 16px; }
.v2-mini-sync span { flex: 1; text-align: center; padding: 12px 6px; border-radius: 10px; background: var(--v2-sand); font-size: 13px; font-weight: 600; color: var(--v2-ink); }
.v2-mini-sync em { font-style: normal; color: var(--v2-accent); font-size: 18px; }
.v2-mini-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v2-ink); }
.v2-mini-status b { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.v2-mini-status b.ok { background: var(--v2-ink); }
.v2-mini-status b.live { background: #3ddc84; box-shadow: 0 0 0 4px rgba(61,220,132,.22); }
@media (max-width: 860px) {
  .v2-fan { height: auto; display: grid; gap: 14px; justify-items: center; }
  .v2-mini { position: relative; top: auto; left: auto; width: min(320px, 86%); }
  .v2-mini-1 { transform: rotate(-2deg); }
  .v2-mini-2 { transform: rotate(1.5deg); z-index: 2; }
  .v2-mini-3 { transform: rotate(-1.5deg); }
  .v2-bars { height: 80px; }
}
.v2-lines { list-style: none; margin: 0 auto 32px; padding: 0; max-width: 620px; }
.v2-lines li { padding: 13px 0; border-top: 1px solid #ddd6ca; font-size: 16px; color: var(--v2-ink); }
.v2-lines li:last-child { border-bottom: 1px solid #ddd6ca; }

/* ---------- 6. Split met donker kader ---------- */
.v2-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: stretch; }
.v2-split-copy { display: flex; flex-direction: column; }
.v2-steps { list-style: none; margin: auto 0 0; padding: 40px 0 0; }
.v2-steps li { padding: 16px 0; border-top: 1px solid var(--v2-line); display: grid; gap: 4px; }
.v2-steps strong { color: var(--v2-ink); font-weight: 600; font-size: 17px; }
.v2-steps span { color: var(--v2-mute); font-size: 15px; line-height: 1.5; }
.v2-dark-frame { border-radius: var(--v2-radius); padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px); display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(73, 79, 223, .55), transparent 70%),
    radial-gradient(60% 50% at 0% 0%, rgba(140, 110, 255, .25), transparent 70%),
    #121317;
}
.v2-ui-card { width: 100%; max-width: 520px; background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.v2-ui-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-weight: 600; color: var(--v2-ink); font-size: 15px; }
.v2-ui-pill { font-family: var(--v2-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: #eef0ff; color: var(--v2-accent); }
.v2-ui-timeline { list-style: none; margin: 0; padding: 0; }
.v2-ui-timeline li { display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid #f0ede8; }
.v2-ui-timeline b { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--v2-sand); color: var(--v2-ink); }
.v2-ui-timeline li.is-live b { background: var(--v2-ink); color: #fff; }
.v2-ui-timeline strong { display: block; color: var(--v2-ink); font-weight: 600; font-size: 15px; }
.v2-ui-timeline small { color: var(--v2-mute); font-size: 13px; }
.v2-ui-timeline em { font-style: normal; font-family: var(--v2-mono); font-size: 12px; color: var(--v2-mute); }
.v2-ui-foot { margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--v2-sand); font-size: 14px; color: var(--v2-ink); }

/* ---------- 7. Cijfers ---------- */
.v2-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--v2-line); }
.v2-numbers > div { padding: 28px 24px 0 0; }
.v2-numbers > div + div { padding-left: 24px; border-left: 1px solid var(--v2-line); }
.v2-numbers dt { font-family: var(--v2-display); font-weight: 400; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -.035em; line-height: 1; color: var(--v2-ink); }
.v2-numbers dd { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--v2-mute); max-width: 26ch; }

/* ---------- 8. Cases ---------- */
.v2-head-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.v2-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v2-case { display: flex; flex-direction: column; color: var(--v2-text); text-decoration: none; }
.v2-case-img { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--v2-sand); }
.v2-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
a.v2-case:hover .v2-case-img img { transform: scale(1.03); }
.v2-case-name { margin: 22px 0 8px; font-family: var(--v2-display); font-weight: 600; font-size: 19px; color: var(--v2-ink); letter-spacing: -.01em; }
.v2-case blockquote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--v2-text); }
.v2-case-who { margin: 14px 0 0; font-size: 14px; color: var(--v2-mute); }
.v2-case-who strong { color: var(--v2-ink); font-weight: 600; }
.v2-case .v2-link { margin-top: 14px; }

/* ---------- 9. Donker met bol ---------- */
.v2-dark { position: relative; overflow: hidden; border-radius: var(--v2-radius); background: #0f1013; color: rgba(255,255,255,.78); padding: clamp(64px, 10vw, 140px) 24px; text-align: center; }
.v2-orb { position: absolute; left: 50%; top: 50%; width: min(760px, 120vw); aspect-ratio: 1; transform: translate(-50%, -38%); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.55), transparent 22%),
    radial-gradient(circle at 50% 45%, #7a7fff 0%, #494fdf 32%, rgba(73, 79, 223, .35) 55%, transparent 70%);
  filter: blur(8px); opacity: .9;
}
.v2-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 45%, rgba(255,255,255,.08) 0 1px, transparent 1px 9px); mix-blend-mode: overlay; }
.v2-dark-copy { position: relative; max-width: 640px; margin: 0 auto; }
.v2-dark-copy .v2-h2 { color: #fff; }
.v2-dark-copy p { margin: 20px auto 0; font-size: 17px; line-height: 1.6; max-width: 52ch; }

/* ---------- 10. Vragen ---------- */
.v2-faq { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.v2-faq-list details { border-top: 1px solid var(--v2-line); }
.v2-faq-list details:last-child { border-bottom: 1px solid var(--v2-line); }
.v2-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 500; color: var(--v2-ink); }
.v2-faq-list summary::-webkit-details-marker { display: none; }
.v2-faq-list summary::after { content: '+'; font-family: var(--v2-mono); font-size: 20px; line-height: 1; color: var(--v2-mute); transition: transform .2s ease; }
.v2-faq-list details[open] summary::after { transform: rotate(45deg); }
.v2-faq-list p { margin: -6px 0 22px; color: var(--v2-text); font-size: 16px; line-height: 1.6; max-width: 62ch; }

/* ---------- 11. Afsluiter ---------- */
.v2-cta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 40px; align-items: end; }
.v2-cta-side p { margin: 0; padding: 16px 0; border-top: 1px solid #ddd6ca; font-size: 15px; color: var(--v2-mute); }
.v2-cta-side strong { display: block; color: var(--v2-ink); font-weight: 600; font-size: 16px; }

/* ---------- Footer: licht ---------- */
.design-v2 .footer { background: #fff; color: var(--v2-mute); border-top: 1px solid var(--v2-line); }
.design-v2 .footer .brand, .design-v2 .footer .brand-light { color: var(--v2-ink); }
.design-v2 .footer-brand p { color: var(--v2-text); }
.design-v2 .footer-meta, .design-v2 .footer-bottom { color: var(--v2-mute); }
.design-v2 .footer-cols h4 { font-family: var(--v2-mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-ink); }
.design-v2 .footer-cols a, .design-v2 .footer-cols li { color: var(--v2-text); }
.design-v2 .footer-cols a:hover, .design-v2 .footer-bottom a:hover { color: var(--v2-ink); }
.design-v2 .footer-bottom { border-top-color: var(--v2-line); }
.design-v2 .open-status { color: var(--v2-ink); }

/* ---------- Responsief ---------- */
@media (max-width: 1024px) {
  .v2-hero-grid, .v2-split, .v2-faq, .v2-cta { grid-template-columns: minmax(0, 1fr); }
  .v2-hero-grid { gap: 24px; align-items: start; }
  .v2-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-numbers > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .v2-numbers > div:nth-child(n+3) { border-top: 1px solid var(--v2-line); margin-top: 28px; }
  .v2-cases { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 720px) {
  .v2 { font-size: 16px; }
  .v2-container, .v2-container-wide { width: min(100% - 32px, 1280px); }
  .v2-hero { padding-top: 40px; }
  .v2-btn { flex: 1 1 auto; }
  .v2-hero-visual { aspect-ratio: auto; min-height: 0; padding: 28px 16px 64px; }
  .v2-hero-visual .v2-window-main { position: relative; left: auto; top: auto; width: 100%; }
  .v2-hero-visual .v2-window-side { display: none; }
  .v2-chip { position: absolute; font-size: 13px; padding: 10px 12px; }
  .v2-chip-top { display: none; }
  .v2-chip-bottom { left: 12px; right: 12px; bottom: 14px; }
  .v2-logo-row { justify-content: flex-start; gap: 10px 22px; }
  .v2-logo-row li { font-size: 17px; }
  .v2-service-grid { grid-template-columns: minmax(0, 1fr); }
  .v2-duo { grid-template-columns: minmax(0, 1fr); }
  .v2-card { min-height: 0; }
  .v2-numbers { grid-template-columns: minmax(0, 1fr); }
  .v2-numbers > div, .v2-numbers > div + div { padding-left: 0; border-left: 0; }
  .v2-numbers > div + div { border-top: 1px solid var(--v2-line); margin-top: 24px; }
  .v2-head-row { flex-direction: column; align-items: flex-start; }
  .v2-ui-timeline li { grid-template-columns: 28px 1fr; }
  .v2-ui-timeline em { grid-column: 2; }
}


/* ---------- Verfijning (ronde 2) ---------- */
/* Inschuiven bij scrollen; zonder JS of met reduced motion staat alles direct goed. */
.v2-js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.v2-js [data-reveal].is-in { opacity: 1; transform: none; }
/* Hero: rustige beweging, zoals bij Mollie */
@keyframes v2Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes v2Rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.v2-hero-grid > * { animation: v2Rise .8s cubic-bezier(.2,.7,.2,1) both; }
.v2-hero-grid > *:nth-child(2) { animation-delay: .12s; }
.v2-hero-visual { animation: v2Rise .9s .2s cubic-bezier(.2,.7,.2,1) both; }
.v2-chip-top { animation: v2Float 7s ease-in-out infinite; }
.v2-chip-bottom { animation: v2Float 8s ease-in-out infinite 1.2s; }
.v2-hero-visual .v2-window-side { transition: transform .6s ease; }
.v2-hero-visual:hover .v2-window-side { transform: translateY(-10px); }
@media (prefers-reduced-motion: reduce) { .v2-hero-grid > *, .v2-hero-visual, .v2-chip-top, .v2-chip-bottom { animation: none; } }

/* Diensten: pijltje bij hover */
.v2-service-grid a::after { content: '›'; flex-shrink: 0; color: var(--v2-mute); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.v2-service-grid a:hover::after { opacity: 1; transform: none; }

/* Cases: branche als label */
.v2-case-tag { margin: 20px 0 0; font-family: var(--v2-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-mute); }
.v2-case-name { margin-top: 8px; }

/* Donkere sectie: Mark */
.v2-person { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); text-align: left; }
.v2-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.v2-person span { font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.7); }
.v2-person strong { display: block; color: #fff; font-weight: 600; font-size: 14px; }

/* Sticky balk in v2-stijl */
.design-v2 .sticky-cta { background: #fff; color: var(--v2-ink); border: 1px solid var(--v2-line); border-radius: 16px; box-shadow: 0 18px 50px -18px rgba(20,22,25,.35); }
.design-v2 .sticky-cta .btn { background: var(--v2-ink); color: #fff; border-radius: 12px; }
.design-v2 .sticky-cta .btn:hover { background: #2a2e33; }
.design-v2 .sticky-cta-close { color: var(--v2-mute); background: var(--v2-sand); }

/* Mobiel: diensten compacter in twee kolommen */
@media (max-width: 720px) {
  .v2-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-service-grid a { flex-direction: column; gap: 10px; padding: 16px; font-size: 14px; line-height: 1.35; }
  .v2-service-icon { margin-top: 0; }
  .v2-service-grid a::after { display: none; }
  .v2-numbers dt { font-size: 40px; }
}
@media (max-width: 720px) {
  .v2-h3 br, .v2-h2 br { display: none; }
  .v2-mini { width: min(300px, 82%); }
}

/* ==========================================================================
   v2 voor de hele site — bestaande secties in de nieuwe stijl
   ========================================================================== */

/* ---------- Typografie ---------- */
.design-v2 .display, .design-v2 .display-sm, .design-v2 .h2 { font-weight: 400; color: var(--v2-ink); }
.design-v2 .display { font-size: clamp(46px, 6vw, 88px); line-height: .98; letter-spacing: -.045em; }
.design-v2 .display-long { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.035em; max-width: 20ch; }
.design-v2 .hero-sm h1.display { font-size: clamp(40px, 5.2vw, 76px); }
.design-v2 .hero-sm h1.display.display-long { font-size: clamp(34px, 4.2vw, 60px); }
.design-v2 .display-sm { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.035em; }
.design-v2 .h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.035em; }
.design-v2 .h3 { font-weight: 500; letter-spacing: -.02em; color: var(--v2-ink); }
.design-v2 .eyebrow { font-family: var(--v2-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-ink); margin-bottom: 18px; }
.design-v2 .eyebrow .dot { display: none; }
.design-v2 .lede, .design-v2 .section-lede { color: var(--v2-text); }
.design-v2 .section-head { margin-bottom: clamp(36px, 4vw, 52px); }
.design-v2 .crumbs { font-family: var(--v2-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--v2-mute); }
.design-v2 .v2-hero .crumbs { margin-bottom: 22px; }
.design-v2 .v2-h1-long { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.04em; }
.design-v2 .v2-hero-grid.is-long { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.design-v2 .v2-card-text { margin: -6px 0 18px; color: var(--v2-text); font-size: 16px; line-height: 1.55; max-width: 46ch; }
.design-v2 .v2-hero-visual.is-single .v2-window-main { left: 50%; transform: translateX(-50%); width: 72%; top: 9%; }

/* ---------- Knoppen ---------- */
.design-v2 .btn { border-radius: 14px; font-weight: 600; }
.design-v2 .btn-primary, .design-v2 .hero .btn-primary { background: var(--v2-ink); color: #fff; }
.design-v2 .btn-primary:hover, .design-v2 .hero .btn-primary:hover { background: #2a2e33; color: #fff; }
.design-v2 .btn-soft { background: var(--v2-sand); color: var(--v2-ink); }
.design-v2 .btn-soft:hover { background: var(--v2-sand-2); }
.design-v2 .btn-light { background: #fff; color: var(--v2-ink); }
.design-v2 .btn-light:hover { background: #fbfaf8; }
.design-v2 .btn-link { color: var(--v2-accent); border-bottom-color: currentColor; }

/* ---------- Hero's: wit ---------- */
.design-v2 .hero { background: #fff; color: var(--v2-ink); padding: clamp(56px, 8vw, 104px) 0 clamp(56px, 7vw, 96px); }
.design-v2 .hero .display, .design-v2 .hero .h2 { color: var(--v2-ink); }
.design-v2 .hero .lede { color: var(--v2-text); }
.design-v2 .hero .eyebrow { color: var(--v2-ink); }
.design-v2 .hero .btn-link { color: var(--v2-accent); }
.design-v2 .hero .btn-link:hover { border-bottom-color: var(--v2-accent); }
.design-v2 .hero-meta { border-top-color: var(--v2-line); }
.design-v2 .hero .hero-meta strong { color: var(--v2-ink); font-weight: 400; letter-spacing: -.03em; }
.design-v2 .hero .hero-meta span { color: var(--v2-mute); }
.design-v2 .hero-note { color: var(--v2-mute); }
/* Mockups in een zandkleurig paneel met zachte gloed */
.design-v2 .hero-visual { border-radius: var(--v2-radius); min-height: 560px;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(73, 79, 223, .14), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, #e7dccb, transparent 60%),
    linear-gradient(160deg, #f8f5f0 0%, #efe7da 100%);
}
.design-v2 .hero .card { border: 0; box-shadow: 0 30px 80px -30px rgba(20, 22, 25, .35), 0 0 0 1px rgba(20, 22, 25, .05); }
.design-v2 .card-dashboard { top: 12%; right: 7%; width: min(420px, 86%); }
.design-v2 .card-order { left: 6%; bottom: 8%; }
.design-v2 .card-interior { top: 10%; right: 7%; width: min(440px, 86%); }
.design-v2 .hero-visual-interior .card-mini-interior { left: 5%; bottom: 7%; }
.design-v2 .card-mini { background: rgba(32, 28, 24, .64); color: #fff; border: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); border-radius: 14px; top: 6%; right: 5%; }
.design-v2 .card-mini span { color: rgba(255,255,255,.72); font-family: var(--v2-mono); letter-spacing: .06em; }
.design-v2 .hero .card-pill { background: var(--v2-ink); }

/* ---------- Secties ---------- */
.design-v2 .section { background: #fff; }
.design-v2 .section-warm, .design-v2 .section-bone { background: #fff; padding: clamp(20px, 3vw, 36px) 0; }
.design-v2 .section-warm > .container, .design-v2 .section-bone > .container,
.design-v2 .section-warm > .container-narrow, .design-v2 .section-bone > .container-narrow {
  background: var(--v2-sand); border-radius: var(--v2-radius);
  padding: clamp(40px, 5.5vw, 80px) clamp(22px, 4.5vw, 64px);
}
.design-v2 .section-warm > .container-narrow, .design-v2 .section-bone > .container-narrow { width: min(100% - 40px, 1040px); }

/* Kaarten: zand op wit, wit op zand */
.design-v2 .feature { background: var(--v2-sand); border-radius: 20px; padding: 28px; gap: 12px; }
.design-v2 .feature-icon, .design-v2 .service-icon { background: #fff; color: var(--v2-ink); border-radius: 14px; }
.design-v2 .feature h3, .design-v2 .service h3, .design-v2 .value h3 { font-weight: 500; letter-spacing: -.02em; color: var(--v2-ink); }
.design-v2 .feature p, .design-v2 .service p, .design-v2 .value p { color: var(--v2-text); }
.design-v2 .service, .design-v2 .value, .design-v2 .workflow-step, .design-v2 .team-card, .design-v2 .loc, .design-v2 .tier, .design-v2 .blog-card, .design-v2 .tech-card, .design-v2 .quote-form, .design-v2 .vacancy-card {
  background: var(--v2-sand); border: 0; border-radius: 20px;
}
.design-v2 .service:hover, .design-v2 .team-card:hover, .design-v2 .loc:hover, .design-v2 .tier:hover, .design-v2 .blog-card:hover, .design-v2 .tech-card:hover, .design-v2 .vacancy-card:hover { border: 0; box-shadow: 0 0 0 1px var(--v2-ink) inset; }
.design-v2 :is(.section-warm, .section-bone) :is(.feature, .service, .value, .workflow-step, .team-card, .loc, .tier, .blog-card, .tech-card, .quote-form, .vacancy-card) { background: #fff; }
.design-v2 :is(.section-warm, .section-bone) :is(.feature-icon, .service-icon) { background: var(--v2-sand); }
.design-v2 .service .check li::before, .design-v2 .tier-features li::before, .design-v2 .platform .check li::before { background-color: var(--v2-ink); }
.design-v2 .value-num, .design-v2 .workflow-num { font-family: var(--v2-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .04em; }
.design-v2 .workflow-num { background: #fff; color: var(--v2-ink); }
.design-v2 :is(.section-warm, .section-bone) .workflow-num { background: var(--v2-sand); }
.design-v2 .workflow-step:nth-child(4) { background: var(--v2-sand); color: var(--v2-ink); }
.design-v2 .workflow-step:nth-child(4) h3 { color: var(--v2-ink); }
.design-v2 .workflow-step:nth-child(4) p { color: var(--v2-text); }
.design-v2 .workflow-step:nth-child(4) .workflow-num { background: #fff; color: var(--v2-ink); }
.design-v2 :is(.section-warm, .section-bone) .workflow-step:nth-child(4) { background: #fff; }
.design-v2 .workflow-step h3 { font-weight: 500; letter-spacing: -.015em; }
.design-v2 .tier-featured { background: var(--v2-ink) !important; }
.design-v2 .tier-featured .btn { color: var(--v2-ink); }

/* Tekst + beeld */
.design-v2 .split-visual { background: var(--v2-sand); border-radius: var(--v2-radius); }
.design-v2 .section:not(.section-warm):not(.section-bone) .split div[style*="background:#fff"] { background: var(--v2-sand) !important; }
.design-v2 .split div[style*="background:#000"] { background: var(--v2-ink) !important; }

/* Logo-rij */
.design-v2 .logos { border-bottom: 0; padding: clamp(36px, 5vw, 56px) 0; }
.design-v2 .logos-label { font-family: var(--v2-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-mute); }
.design-v2 .logo-text { font-weight: 600; font-size: 21px; letter-spacing: -.02em; color: #9a9da2; }

/* Donkere cijferband: afgerond paneel met kobalt gloed */
.design-v2 .results { background: #fff; padding: clamp(20px, 3vw, 36px) 0; }
.design-v2 .results > .container { position: relative; overflow: hidden; border-radius: var(--v2-radius); padding: clamp(44px, 6vw, 88px) clamp(22px, 4.5vw, 64px);
  background:
    radial-gradient(60% 80% at 100% 100%, rgba(73, 79, 223, .55), transparent 70%),
    radial-gradient(50% 60% at 0% 0%, rgba(140, 110, 255, .22), transparent 70%),
    #121317;
}
.design-v2 .results .h2.light, .design-v2 .results .h2 { color: #fff; }
.design-v2 .results .eyebrow, .design-v2 .results .eyebrow.light { color: rgba(255,255,255,.85); }
.design-v2 .stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; }
.design-v2 .stat:hover { background: rgba(255,255,255,.09); }
.design-v2 .stat strong { font-weight: 400; letter-spacing: -.035em; }

/* Citaat */
.design-v2 .testimonial { padding: clamp(64px, 8vw, 112px) 0; }
.design-v2 .testimonial blockquote { font-weight: 400; letter-spacing: -.03em; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.15; color: var(--v2-ink); }
.design-v2 .testimonial blockquote::before { content: '“'; display: block; font-size: 1.6em; line-height: .6; color: var(--v2-accent); margin-bottom: 18px; }
.design-v2 .testimonial .avatar-lg { display: none; }
.design-v2 .testimonial figcaption strong { color: var(--v2-ink); }

/* FAQ */
.design-v2 .faq { background: #fff; }
.design-v2 .faq-list details { border-top-color: var(--v2-line); padding: 0; }
.design-v2 .faq-list details:last-child { border-bottom-color: var(--v2-line); }
.design-v2 .faq-list summary { font-family: var(--v2-display); font-weight: 500; font-size: 18px; padding: 22px 0; gap: 20px; color: var(--v2-ink); }
.design-v2 .faq-list summary::after { content: '+'; font-family: var(--v2-mono); font-size: 20px; width: auto; height: auto; border: 0; background: none; color: var(--v2-mute); transition: transform .2s ease; }
.design-v2 .faq-list details[open] summary::after { content: '+'; background: none; color: var(--v2-mute); transform: rotate(45deg); }
.design-v2 .faq-list details p { margin: -6px 0 22px; color: var(--v2-text); }
.design-v2 .faq .section-lede a { color: var(--v2-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Afsluiter (CTA): zandpaneel */
.design-v2 .cta { background: #fff; padding: clamp(48px, 6vw, 96px) 0; }
.design-v2 .cta-inner { background: var(--v2-sand); color: var(--v2-ink); border-radius: var(--v2-radius); padding: clamp(36px, 5vw, 72px); }
.design-v2 .cta .eyebrow.light, .design-v2 .cta .display-sm.light, .design-v2 .cta-copy h2 { color: var(--v2-ink); }
.design-v2 .cta-copy p { color: var(--v2-text); }
.design-v2 .cta-list li { color: var(--v2-ink); }
.design-v2 .cta-list li::before { background-color: var(--v2-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E"); }
.design-v2 .cta .btn-light.btn-lg { background: var(--v2-ink); color: #fff; }
.design-v2 .cta .btn-light.btn-lg:hover { background: #2a2e33; }
.design-v2 .cta-alt .btn-light { background: #fff; color: var(--v2-ink); }
.design-v2 .cta-phone { color: var(--v2-ink); }
.design-v2 .cta-form, .design-v2 .mad-form, .design-v2 .vacancy-form { box-shadow: 0 20px 60px -30px rgba(20,22,25,.25); }
.design-v2 .cta-form input, .design-v2 .cta-form select, .design-v2 .cta-form textarea,
.design-v2 .mad-form input, .design-v2 .mad-form textarea, .design-v2 .vacancy-form input, .design-v2 .vacancy-form textarea { background: #fbfaf8; border-color: var(--v2-line); border-radius: 12px; }
.design-v2 .vacancy-success { box-shadow: 0 20px 60px -30px rgba(20,22,25,.25); }

/* Cases: foto boven, tekst eronder (zoals de klantverhalen op mollie.com) */
.design-v2 .case-grid { gap: 28px 20px; }
.design-v2 .case-card-photo { aspect-ratio: auto; background: none; overflow: visible; border-radius: 0; display: flex; flex-direction: column; }
.design-v2 .case-card-photo:hover { transform: none; }
.design-v2 .case-card-photo::after { display: none; }
.design-v2 .case-card-photo > img { position: static; aspect-ratio: 4 / 3; height: auto; border-radius: 18px; background: var(--v2-sand); transition: transform .5s ease, filter .3s ease; }
.design-v2 a.case-card-photo:hover > img { transform: none; filter: brightness(1.04); }
.design-v2 .case-overlay { position: static; color: var(--v2-text); padding: 20px 2px 0; gap: 8px; }
.design-v2 .case-overlay-name { color: var(--v2-ink); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.design-v2 .case-overlay-stat { color: var(--v2-text); font-weight: 400; font-size: 15.5px; line-height: 1.5; }
.design-v2 .case-overlay-stat:last-child { color: var(--v2-accent); font-weight: 600; font-size: 15px; }
.design-v2 a.case-card-photo .case-overlay-stat:last-child span { text-decoration: underline; text-underline-offset: 4px; }
.design-v2 div.case-card-photo .case-overlay-stat:last-child { color: var(--v2-mute); }
.design-v2 :is(.section-warm, .section-bone) .case-card-photo > img { background: #fff; }

/* Blog en artikelen */
.design-v2 .blog-panel { border-radius: 16px; margin: 10px 10px 0; }
.design-v2 .blog-tag { font-family: var(--v2-mono); font-weight: 500; letter-spacing: .06em; }
.design-v2 .blog-body h3 { font-weight: 500; letter-spacing: -.02em; }
.design-v2 .article-body { color: var(--v2-text); }
.design-v2 .article-body h2 { font-weight: 400; letter-spacing: -.03em; font-size: clamp(28px, 3vw, 36px); }
.design-v2 .article-body h3 { font-weight: 500; letter-spacing: -.02em; }
.design-v2 .article-body blockquote { background: var(--v2-sand); border-radius: 18px; font-weight: 400; letter-spacing: -.02em; }
.design-v2 .article-body a { color: var(--v2-accent); }
.design-v2 .article-body div[style*="background:#f4f4f4"] { background: var(--v2-sand) !important; border-radius: var(--v2-radius) !important; }
.design-v2 .article-body figure img { border-radius: 14px !important; box-shadow: 0 20px 50px -30px rgba(20,22,25,.35), 0 0 0 1px rgba(20,22,25,.05); }
.design-v2 .case-figure { background: var(--v2-sand); border: 0; border-radius: var(--v2-radius); }
.design-v2 .photo-strip { border-radius: var(--v2-radius); background: var(--v2-sand); }
.design-v2 .story-img { background: var(--v2-sand); border-radius: var(--v2-radius); }

/* Calculator */
.design-v2 .calc-output { border-radius: var(--v2-radius); background: radial-gradient(70% 70% at 100% 100%, rgba(73, 79, 223, .5), transparent 70%), #121317; }
.design-v2 .calc-scenario-option input:checked + span { background: var(--v2-ink); border-color: var(--v2-ink); }
.design-v2 .calc-pdf-block { background: var(--v2-sand); border: 0; border-radius: var(--v2-radius); }

/* Nieuwsbrief, bedankpagina */
.design-v2 .newsletter { background: #fff; }
.design-v2 .newsletter-inner { background: var(--v2-sand); border-radius: var(--v2-radius); }
.design-v2 .thanks-icon { background: var(--v2-ink); }

/* MAD-reservering en plattegrond in een zandpaneel */
.design-v2 .mad-picker { border: 0; box-shadow: 0 20px 60px -30px rgba(20,22,25,.25); }
.design-v2 .stand-map { border: 0; }
.design-v2 .mad-day.is-active { background: var(--v2-ink); }

/* Tags en chips */
.design-v2 .tag, .design-v2 .vacancy-chips span, .design-v2 .badge { background: #fff; color: var(--v2-ink); font-family: var(--v2-mono); font-weight: 500; font-size: 12px; letter-spacing: .03em; }
.design-v2 .hero-sm .vacancy-chips-hero span { background: var(--v2-sand); }

@media (max-width: 1024px) {
  .design-v2 .v2-hero-grid.is-long { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .design-v2 .section-warm > .container, .design-v2 .section-bone > .container,
  .design-v2 .section-warm > .container-narrow, .design-v2 .section-bone > .container-narrow,
  .design-v2 .results > .container { width: min(100% - 24px, 1280px); padding: 36px 18px; border-radius: 20px; }
  .design-v2 .cta-inner { padding: 28px 18px; border-radius: 20px; }
  .design-v2 .feature { padding: 22px; }
  .design-v2 .v2-hero-visual.is-single .v2-window-main { left: auto; transform: none; width: 100%; top: auto; }
}

/* ---------- Verfijning na controle (20-10-2026) ---------- */
/* Klein label in de interieur- en configurator-mockup: niet uitrekken over het hele paneel */
.design-v2 .hero-visual-interior .card-mini-interior { top: auto; right: auto; left: 5%; bottom: 7%; }
/* Logo-rij: in één lijn, netjes verdeeld, namen niet afbreken */
.design-v2 .logos-row { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; max-width: none !important; }
.design-v2 .logos-row > div { height: auto; opacity: 1; }
.design-v2 .logo-text { white-space: nowrap; }
/* Tech stack op een case: compacte kaarten */
.design-v2 .tech-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
.design-v2 .tech-card { aspect-ratio: auto; padding: 22px 16px; }
/* Andere cases onder een case: altijd een raster van drie, ook als er maar één gepubliceerd is */
.design-v2 .section-bone .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.design-v2 .blog-card .blog-panel { aspect-ratio: 4 / 3 !important; }
@media (max-width: 1024px) { .design-v2 .section-bone .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 720px) {
  .design-v2 .section-bone .blog-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .design-v2 .logos-row { justify-content: flex-start; gap: 10px 22px; }
  .design-v2 .logo-text { font-size: 17px; }
}

/* ---------- Case in v2 (20-10-2026): template-parts/case-v2.php ---------- */
.v2-case-hero { padding-top: clamp(40px, 6vw, 88px); }
.v2-case-hero .crumbs { margin-bottom: 28px; }
.v2-case-title { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.04em; max-width: 1040px; }
.v2-case-title span { display: block; color: var(--v2-mute); }
.v2-case-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px 72px; margin-top: 40px; align-items: start; }
.v2-case-lede { margin: 0; font-size: 19px; line-height: 1.55; color: var(--v2-text); max-width: 54ch; }
.v2-case-facts { margin: 0; border-top: 1px solid var(--v2-line); }
.v2-case-facts > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--v2-line); }
.v2-case-facts dt { font-family: var(--v2-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-mute); padding-top: 3px; }
.v2-case-facts dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--v2-ink); font-weight: 500; }
.v2-case-cover { margin-top: clamp(40px, 5vw, 64px); border-radius: var(--v2-radius); overflow: hidden; background: var(--v2-sand); aspect-ratio: 16 / 7; }
.v2-case-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* Leeskolom: smal voor tekst, figuren en beeldparen lopen breder uit */
.v2-case-body { max-width: 720px; margin-inline: auto; }
.v2-case-brief { margin-bottom: 8px; }
.v2-case-body .article-body { max-width: none; margin: 32px 0 0; }
.v2-case-body .article-body > :is(.case-figure, figure.wp-block-image, figure.wp-block-video, div[style*="grid-template-columns"], div[style*="background:#f4f4f4"]) {
  margin-left: calc(50% - min(540px, 50vw - 20px)) !important; margin-right: calc(50% - min(540px, 50vw - 20px)) !important;
  margin-top: 40px !important; margin-bottom: 48px !important;
}
.v2-case-body .article-body p:empty { display: none; }

/* Tussenkoppen: groter, met een klein nummer erboven */
.v2-case-body .article-body { counter-reset: btdcase; }
.v2-case-body .article-body > :is(h2, h3) { counter-increment: btdcase; font-family: var(--v2-display); font-weight: 400; font-size: clamp(26px, 2.5vw, 33px); line-height: 1.15; letter-spacing: -.028em; color: var(--v2-ink); margin: 88px 0 18px; }
.v2-case-body .article-body > :is(h2, h3)::before { content: counter(btdcase, decimal-leading-zero); display: block; margin-bottom: 14px; font-family: var(--v2-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; color: var(--v2-accent); }
.v2-case-body .article-body > :is(div, figure) + :is(h2, h3) { margin-top: 72px; }

/* Beeld: altijd op een zandvlak, paren even hoog, lange beelden begrensd */
.v2-case-body .article-body > div[style*="grid-template-columns"] { gap: 16px !important; align-items: stretch; }
.v2-case-body .article-body > :is(figure.wp-block-image, figure.wp-block-video),
.v2-case-body .article-body > div[style*="grid-template-columns"] > figure {
  display: flex; align-items: center; justify-content: center; background: var(--v2-sand); border-radius: 20px !important; padding: clamp(16px, 3vw, 40px); overflow: hidden;
}
.v2-case-body .article-body > div[style*="grid-template-columns"] > figure { padding: clamp(14px, 2.4vw, 28px); }
.v2-case-body .article-body > :is(figure.wp-block-image, figure.wp-block-video, div[style*="grid-template-columns"]) :is(img, video) {
  display: block; border-radius: 10px !important; box-shadow: 0 16px 40px -26px rgba(20,22,25,.3), 0 0 0 1px rgba(20,22,25,.06);
}
.v2-case-body .article-body > :is(figure.wp-block-image, div[style*="grid-template-columns"]) img { width: auto !important; height: auto !important; max-width: 100%; }
.v2-case-body .article-body > figure.wp-block-image img { max-height: 760px; }
.v2-case-body .article-body > div[style*="grid-template-columns"] img { max-height: 600px; }

/* "Wat we bouwden" in de tekst: mono label, witte kaartjes */
.v2-case-body .article-body div[style*="background:#f4f4f4"] { padding: clamp(28px, 4vw, 48px) !important; margin-top: 24px !important; margin-bottom: 48px !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] > span:first-child { font-family: var(--v2-mono); font-weight: 500 !important; font-size: 12px !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--v2-ink) !important; margin-bottom: 16px !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] > span:first-child > span { display: none !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] h3 { font-weight: 400 !important; font-size: clamp(26px, 2.6vw, 34px) !important; line-height: 1.12 !important; letter-spacing: -.03em !important; margin: 0 0 28px !important; max-width: 24ch; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] > div[style*="grid"] { gap: 12px !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] > div[style*="grid"] > div { background: #fff; border-radius: 16px; padding: 20px 22px; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] h4 { font-size: 16px !important; font-weight: 600; color: var(--v2-ink); }
.v2-case-body .article-body div[style*="background:#f4f4f4"] p { color: var(--v2-text) !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] > div[style*="font-size:24px"] { font-weight: 400 !important; font-size: clamp(24px, 2.4vw, 30px) !important; line-height: 1.15 !important; letter-spacing: -.028em !important; margin-bottom: 10px !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] > div[style*="minmax(215px"] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 12px !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] div[style*="border:1px solid #e2e2e7"] { border-color: transparent !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] > div[style*="minmax(230px"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] > div[style*="minmax(230px"]:has(> div:nth-child(4):last-child),
.v2-case-body .article-body div[style*="background:#f4f4f4"] > div[style*="minmax(230px"]:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.v2-case-body .article-body div[style*="background:#f4f4f4"] > p:last-child { margin: 20px 0 0 !important; font-size: 14px; color: var(--v2-mute) !important; }

/* Uitlegfiguren */
.design-v2 .case-figure { padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px) clamp(22px, 3vw, 34px); }
.design-v2 .case-figure-art { max-width: 820px; }
.design-v2 .case-figure figcaption { max-width: 820px; margin: 24px auto 0; padding: 0; font-size: 15.5px; line-height: 1.55; color: var(--v2-text); }
.design-v2 .case-figure figcaption strong { color: var(--v2-ink); }

/* "Wat we bouwden" (ACF) */
.v2-case-built { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.v2-case-built > div { background: #fff; border-radius: 18px; padding: 24px; }
.v2-case-built-icon { display: inline-flex; color: var(--v2-accent); margin-bottom: 12px; }
.v2-case-built-icon svg { width: 24px; height: 24px; }
.v2-case-built h3 { margin: 0 0 6px; font-family: var(--v2-display); font-size: 17px; font-weight: 600; color: var(--v2-ink); }
.v2-case-built p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--v2-text); }

/* Resultaat in de donkere band */
.v2-case-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; align-items: end; text-align: left; padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 72px); }
.v2-case-results .v2-dark-copy { margin: 0; }
.v2-case-results .v2-kicker { color: rgba(255,255,255,.66); }
.v2-case-results .v2-dark-copy p { margin-left: 0; }
.v2-case-stats { position: relative; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.v2-case-stats > div { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.14); }
.v2-case-stats dt { font-family: var(--v2-display); font-weight: 400; font-size: clamp(36px, 4vw, 56px); letter-spacing: -.035em; line-height: 1; color: #fff; }
.v2-case-stats dd { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.7); }

@media (max-width: 1024px) {
  .v2-case-intro, .v2-case-results { grid-template-columns: minmax(0, 1fr); }
  .v2-case-built { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .v2-case-title { font-size: clamp(32px, 9vw, 40px); }
  .v2-case-lede { font-size: 17px; }
  .v2-case-facts > div { grid-template-columns: 104px minmax(0, 1fr); }
  .v2-case-cover { aspect-ratio: 4 / 3; border-radius: 18px; }
  .v2-case-built, .v2-case-stats { grid-template-columns: minmax(0, 1fr); }
  .v2-case-body .article-body > :is(.case-figure, div[style*="grid-template-columns"], div[style*="background:#f4f4f4"]) { margin-left: 0 !important; margin-right: 0 !important; }
  .v2-case-body .article-body div[style*="background:#f4f4f4"] { padding: 24px 18px !important; }
  .v2-case-body .article-body div[style*="background:#f4f4f4"] > :is(div[style*="minmax(230px"], div[style*="minmax(215px"]) { grid-template-columns: minmax(0, 1fr) !important; }
  .v2-case-body .article-body > :is(h2, h3) { margin-top: 64px; }
  .v2-case-body .article-body > figure.wp-block-image img { max-height: 560px; }
  .v2-case-body .article-body > div[style*="grid-template-columns"] img { max-height: 520px; }
  /* Figuren blijven leesbaar: niet krimpen tot onleesbare tekst, maar opzij te vegen */
  .design-v2 .case-figure { padding: 18px 0 18px; }
  .design-v2 .case-figure-art { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 12px; scrollbar-width: none; }
  .design-v2 .case-figure-art::-webkit-scrollbar { display: none; }
  .design-v2 .case-figure-art svg { min-width: 560px; }
  .design-v2 .case-figure figcaption { padding: 0 18px; font-size: 15px; }
}

/* Inklapbaar blok onderaan een case ("Achter de schermen") */
.v2-case-body .article-body details.btd-more { margin: 64px 0 0; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.v2-case-body .article-body details.btd-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-family: var(--v2-display); font-weight: 500; font-size: 18px; color: var(--v2-ink); }
.v2-case-body .article-body details.btd-more summary::-webkit-details-marker { display: none; }
.v2-case-body .article-body details.btd-more summary::after { content: '+'; flex-shrink: 0; font-size: 24px; line-height: 1; font-weight: 400; color: var(--v2-mute); transition: transform .2s ease; }
.v2-case-body .article-body details.btd-more[open] summary::after { transform: rotate(45deg); }
.v2-case-body .article-body details.btd-more summary:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 4px; border-radius: 4px; }
.v2-case-body .article-body details.btd-more > p, .v2-case-body .article-body details.btd-more ul { font-size: 16px; line-height: 1.6; }
.v2-case-body .article-body details.btd-more ul { margin: 0 0 28px; }

/* ---------- Case: duidelijke opbouw (uitdaging, wat we bouwden, per doelgroep, resultaat) ---------- */
.v2-case-screen { margin-top: clamp(40px, 5vw, 64px); border-radius: var(--v2-radius); overflow: hidden; max-height: 640px; padding: clamp(24px, 5vw, 72px) clamp(16px, 6vw, 96px) 0;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(73, 79, 223, .14), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, #e7dccb, transparent 60%),
    linear-gradient(160deg, #f8f5f0 0%, #efe7da 100%);
}
.v2-case-screen .v2-window { max-width: 1040px; margin: 0 auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Label boven een kop in de tekst; zo'n kop krijgt geen nummer */
.v2-case-body .article-body > .cs-kicker { margin: 96px 0 14px; font-family: var(--v2-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-accent); }
.v2-case-body .article-body > .cs-kicker + :is(h2, h3) { counter-increment: none; margin-top: 0; }
.v2-case-body .article-body > .cs-kicker + :is(h2, h3)::before { content: none; }

/* Beeld en tekst naast elkaar, om en om */
.v2-case-body .article-body > .cs-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  margin: 64px calc(50% - min(540px, 50vw - 20px)); }
.v2-case-body .article-body > .cs-feature + .cs-feature { margin-top: 88px; }
.v2-case-body .article-body > .cs-feature.is-flip > .cs-feature-media { order: 2; }
.v2-case-body .article-body .cs-feature-media { margin: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: clamp(18px, 2.6vw, 36px); background: var(--v2-sand); border-radius: 20px !important; overflow: hidden; }
.v2-case-body .article-body .cs-feature-media img { display: block; width: auto !important; height: auto !important; max-width: 100%; max-height: 520px; border-radius: 10px !important; box-shadow: 0 16px 40px -26px rgba(20,22,25,.3), 0 0 0 1px rgba(20,22,25,.06); }
.v2-case-body .article-body .cs-feature-media figcaption { font-size: 13.5px; line-height: 1.5; color: var(--v2-mute); text-align: center; max-width: 46ch; }
.v2-case-body .article-body .cs-feature-text > .cs-label { margin: 0 0 12px; font-family: var(--v2-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-accent); }
.v2-case-body .article-body .cs-feature-text h3 { margin: 0 0 14px; font-family: var(--v2-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -.028em; color: var(--v2-ink); }
.v2-case-body .article-body .cs-feature-text p { margin: 0; font-size: 17px; line-height: 1.6; }
.v2-case-body .article-body .cs-points { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--v2-line); }
.v2-case-body .article-body .cs-points li { position: relative; margin: 0; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--v2-line); font-size: 15.5px; line-height: 1.45; color: var(--v2-ink); }
.v2-case-body .article-body .cs-points li::before { content: ''; position: absolute; left: 0; top: 13px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--v2-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.1 4.6-4.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Onderschrift bij een los beeld */
.v2-case-body .article-body > figure.wp-block-image { flex-direction: column; gap: 16px; }
.v2-case-body .article-body > figure.wp-block-image figcaption { font-size: 13.5px; line-height: 1.5; color: var(--v2-mute); text-align: center; max-width: 60ch; }

@media (max-width: 860px) {
  .v2-case-body .article-body > .cs-feature { grid-template-columns: minmax(0, 1fr); margin-left: 0; margin-right: 0; gap: 24px; }
  .v2-case-body .article-body > .cs-feature.is-flip > .cs-feature-media { order: 0; }
  .v2-case-body .article-body > .cs-feature + .cs-feature { margin-top: 64px; }
  .v2-case-body .article-body > .cs-kicker { margin-top: 72px; }
}
@media (max-width: 720px) {
  .v2-case-screen { max-height: 360px; border-radius: 18px; }
  .v2-case-body .article-body .cs-feature-media img { max-height: 440px; }
}
/* Kop met label erboven: even groot als "De uitdaging" */
.v2-case-body .article-body > .cs-kicker + h2 { font-size: clamp(32px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -.035em; margin-bottom: 22px; }
/* Blok met een uitlegfiguur: figuur krijgt de bredere kolom, zodat de tekst erin leesbaar blijft */
.v2-case-body .article-body > .cs-feature:has(> .is-fig) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.v2-case-body .article-body > .cs-feature.is-flip:has(> .is-fig) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.v2-case-body .article-body .cs-feature-media.is-fig { display: block; padding: 0; background: none; }
.v2-case-body .article-body .cs-feature-media.is-fig > p:empty { display: none; }
.v2-case-body .article-body .cs-feature-media.is-fig .case-figure { margin: 0 !important; padding: clamp(16px, 2vw, 24px) clamp(12px, 1.6vw, 20px) 18px; }
.v2-case-body .article-body .cs-feature-media.is-fig .case-figure figcaption { margin-top: 14px; font-size: 13.5px; color: var(--v2-mute); text-align: center; }
@media (max-width: 860px) {
  .v2-case-body .article-body > .cs-feature:has(> .is-fig), .v2-case-body .article-body > .cs-feature.is-flip:has(> .is-fig) { grid-template-columns: minmax(0, 1fr); }
}