/*
 * Project:     Management van Waarde
 * Development: ICT van den Hooven — https://ictvandenhooven.nl
 * Version:     1.0.5
 * Last update: 2026-07-14
 */
/* =====================================================
   Management van Waarde — gedeelde stijlen
   Alle pagina's laden dit bestand.
   ===================================================== */

/* === DESIGN TOKENS === */
:root {
  --bg:         oklch(0.14 0.01 80.17);
  --fg:         oklch(0.97 0.004 95.1);
  --paper:      oklch(0.97 0.009 87.56);
  --ink:        oklch(0.29 0.01 75.9);
  --gold:       oklch(0.76 0.107 84.76);
  --gold-s:     oklch(0.64 0.096 84.9);
  --deep:       oklch(0.18 0.008 80.1);
  --f-display:  "Syne", sans-serif;
  --f-serif:    "Cormorant Garamond", Georgia, serif;
  --f-body:     "Jost", sans-serif;
  --max:        1200px;
  --pad-x:      1.5rem;
  --pad-x-md:   3rem;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-weight: 300;
       -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in oklab, var(--gold) 55%, transparent); }

/* === UTILITY === */
.gold  { color: var(--gold); }
.gold-s { color: var(--gold-s); }
.ink   { color: var(--bg); }

/* === CURSOR === */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 90;
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--gold); mix-blend-mode: difference;
}
.cursor-ring {
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
}
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } }

/* === NAV === */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 1.5rem var(--pad-x-md);
  transition: all .3s; border-bottom: 1px solid transparent;
}
#nav.scrolled {
  padding: 1rem var(--pad-x-md);
  background: color-mix(in oklab, var(--bg) 97%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: color-mix(in oklab, var(--gold) 10%, transparent);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.brand {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--f-display); font-size: .85rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.brand img { height: 34px; width: auto; }
.nav-links { display: none; align-items: center; gap: 2.5rem; }
.nav-links a {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  color: color-mix(in oklab, var(--fg) 52%, transparent); transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--fg); }
.nav-cta {
  font-family: var(--f-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; color: var(--gold) !important;
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  padding: .5rem 1.4rem; transition: background .2s, color .2s;
}
.nav-cta:hover { background: var(--gold) !important; color: var(--bg) !important; }
/* Hamburger (mobile) */
.nav-toggle {
  display: flex; flex-direction: column; gap: 5px; cursor: pointer;
  padding: .25rem; background: none; border: none;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--fg); transition: all .3s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-mobile {
  display: none; flex-direction: column; gap: 0;
  background: var(--deep); border-top: 1px solid color-mix(in oklab, var(--gold) 10%, transparent);
  padding: 1rem var(--pad-x);
}
.nav-open .nav-mobile { display: flex; }
.nav-mobile a {
  padding: .85rem 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em;
  color: color-mix(in oklab, var(--fg) 60%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 5%, transparent);
  transition: color .2s;
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: var(--gold); }
@media (min-width: 768px) { .nav-links { display: flex; } .nav-toggle { display: none; } }
@media (max-width: 640px) { #nav, #nav.scrolled { padding: 1rem var(--pad-x); } }
/* Nav on light-background pages (lees/faq/legal) */
.nav-light { background: color-mix(in oklab, var(--bg) 97%, transparent) !important; backdrop-filter: blur(12px); border-bottom-color: color-mix(in oklab, var(--gold) 10%, transparent) !important; }

/* === BUTTONS === */
.mvw-button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; padding: 1rem 2.35rem;
  font-family: var(--f-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transition: transform .25s, background .25s, color .25s, border-color .25s;
  cursor: pointer;
}
.mvw-button:hover { transform: translateY(-2px); }
.btn-gold  { background: var(--gold); color: var(--bg); }
.btn-ghost { border-color: color-mix(in oklab, var(--fg) 22%, transparent); color: color-mix(in oklab, var(--fg) 70%, transparent); }
.btn-ghost:hover { border-color: color-mix(in oklab, var(--fg) 55%, transparent); color: var(--fg); }
.btn-ghost-light { border-color: color-mix(in oklab, var(--fg) 18%, transparent); color: color-mix(in oklab, var(--fg) 72%, transparent); }
.btn-ghost-light:hover { border-color: color-mix(in oklab, var(--fg) 45%, transparent); color: var(--fg); }
.btn-dark  { background: var(--bg); color: var(--fg); }
.btn-outline-paper { border-color: color-mix(in oklab, var(--ink) 22%, transparent); color: color-mix(in oklab, var(--ink) 65%, transparent); }
.btn-outline-paper:hover { border-color: var(--ink); color: var(--ink); }
.btn-outline-dark { background: transparent; border-color: color-mix(in oklab, var(--ink) 28%, transparent); color: var(--ink); }
.btn-outline-dark:hover { border-color: var(--ink); color: var(--ink); }
.btn-outline { background: transparent; border-color: color-mix(in oklab, var(--fg) 28%, transparent); color: var(--fg); }
.btn-outline:hover { border-color: var(--fg); color: var(--fg); }
.btn-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; }

/* === REVEAL === */
.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .75s cubic-bezier(.23,1,.32,1), transform .75s cubic-bezier(.23,1,.32,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .15s; }

/* =====================================================
   HOMEPAGE SECTIONS
   ===================================================== */

/* Hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; padding: 8rem var(--pad-x) 4rem; }
@media (min-width: 768px) { .hero { padding: 8rem var(--pad-x-md) 5rem; } }
.hero-bg-img { position: absolute; inset: 0; background: url('assets/hero-sfeer.jpg') center/cover; opacity: .2; transform: scale(1.06); display: block; }
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; display: none; }
@media (min-width: 768px) { .hero-bg-img { display: none; } .hero-bg-video { display: block; } }
.hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(15,15,15,.74) 100%); }
.hero-content { position: relative; z-index: 10; max-width: var(--max); margin: 0 auto; width: 100%; }
.eyebrow { display: flex; align-items: center; gap: 1rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .3em; margin-bottom: 2rem; color: var(--gold); }
.eyebrow.gold-s-label { letter-spacing: .28em; font-size: .65rem; margin-bottom: 1.5rem; color: var(--gold-s); }
.eyebrow .rule { display: block; height: 1px; width: 2.5rem; background: var(--gold); }
.eyebrow .rule-s { width: 1.5rem; background: var(--gold-s); }
.hero-title { font-family: var(--f-display); font-size: clamp(2.8rem,6vw,6.5rem); font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 3rem; }
.hero-title em { font-family: var(--f-serif); font-style: normal; font-weight: 300; text-transform: none; color: var(--gold); }
.hero-line { display: block; overflow: hidden; }
.hero-line:last-child { padding-bottom: 0.35em; }
.hero-line > span { display: block; transform: translateY(115%); animation: slideUp .9s cubic-bezier(.23,1,.32,1) forwards; }
.hero-line:nth-child(1) > span { animation-delay: .4s; }
.hero-line:nth-child(2) > span { animation-delay: .58s; }
@keyframes slideUp { to { transform: translateY(0); } }
.hero-foot { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 768px) { .hero-foot { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.hero-lead { max-width: 480px; font-size: 1rem; line-height: 1.85; color: color-mix(in oklab, var(--fg) 62%, transparent); }
.hero-actions { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
@media (min-width: 768px) { .hero-actions { align-items: flex-end; } }
.scroll-cue { display: flex; align-items: center; gap: .75rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .22em; color: color-mix(in oklab, var(--fg) 30%, transparent); }
.scroll-cue .line { display: block; height: 2.5rem; width: 1px; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--gold) 40%, transparent)); }

/* Strip */
.strip { overflow: hidden; border-top: 1px solid color-mix(in oklab, var(--gold) 12%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--gold) 12%, transparent); background: color-mix(in oklab, var(--gold) 3%, transparent); }
.strip-inner { max-width: var(--max); margin: 0 auto; overflow: hidden; }
.strip-track { display: flex; transition: transform .3s; }
.strip-card { min-width: 100%; padding: 2.5rem var(--pad-x); border-bottom: 1px solid color-mix(in oklab, var(--gold) 10%, transparent); }
.strip-card:last-child { border-bottom: none; }
.strip-card .num { display: block; font-family: var(--f-serif); font-style: italic; font-size: .75rem; color: var(--gold); margin-bottom: 1rem; }
.strip-card p { font-family: var(--f-display); font-size: clamp(.85rem,1.4vw,1.1rem); font-weight: 700; text-transform: uppercase; line-height: 1.4; color: color-mix(in oklab, var(--fg) 72%, transparent); }
.strip-dots { display: flex; justify-content: center; gap: .5rem; padding: 1.25rem 0; }
.strip-dots button { width: 6px; height: 6px; border-radius: 999px; border: none; background: color-mix(in oklab, var(--fg) 20%, transparent); cursor: pointer; padding: 0; }
.strip-dots button.active { background: var(--gold); }
@media (min-width: 768px) {
  .strip-track:not(.strip-ticker-track) { transform: none !important; }
  .strip-card { min-width: 33.333%; padding: 3rem 3.5rem; border-bottom: none; border-right: 1px solid color-mix(in oklab, var(--gold) 10%, transparent); }
  .strip-card:last-child { border-right: none; }
  .strip-dots { display: none; }
}
/* Ticker (desktop auto-scroll) */
.strip-ticker-track { width: max-content; flex-wrap: nowrap; animation: strip-ticker 40s linear infinite; transition: none; cursor: default; }
.strip-ticker-track:hover,
.strip-ticker-track:focus-within { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: .875rem; flex-shrink: 0; padding: 2.25rem 3rem; font-family: var(--f-display); font-size: clamp(.8rem,1.1vw,1rem); font-weight: 700; text-transform: uppercase; line-height: 1.4; color: color-mix(in oklab, var(--fg) 72%, transparent); border-right: 1px solid color-mix(in oklab, var(--gold) 10%, transparent); white-space: nowrap; }
.ticker-item .num { font-family: var(--f-serif); font-style: italic; font-size: .75rem; color: var(--gold); flex-shrink: 0; }
@keyframes strip-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Wie wij zijn */
.wie { background: var(--paper); padding: 5rem var(--pad-x); }
@media (min-width: 768px) { .wie { padding: 8rem var(--pad-x-md); } }
.wie-grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .wie-grid { grid-template-columns: 1fr 1fr; gap: 8rem; } }
.display-h2 { font-family: var(--f-display); font-size: clamp(2.2rem,4.5vw,4.2rem); font-weight: 800; text-transform: uppercase; line-height: .95; margin-bottom: 3rem; overflow-wrap: break-word; }
.display-h2 em { font-family: var(--f-serif); font-style: normal; font-weight: 300; text-transform: none; color: var(--gold-s); }
.diensten .display-h2 em, .cta-strip .display-h2 em { color: var(--gold); }
.photo-frame { position: relative; display: none; }
@media (min-width: 1024px) { .photo-frame { display: block; } }
.frame-border { position: absolute; inset: -.875rem; border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); }
.photo-frame img { position: relative; z-index: 10; aspect-ratio: 3/4; width: 100%; object-fit: cover; filter: grayscale(15%) contrast(1.08) brightness(.95); }
.pull-quote { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(1.4rem,2.5vw,2rem); line-height: 1.4; color: var(--ink); border-left: 3px solid var(--gold); padding: 2rem; background: color-mix(in oklab, var(--gold) 4%, white); margin-bottom: 2rem; }
.prose p { font-size: .95rem; line-height: 1.9; color: color-mix(in oklab, var(--ink) 72%, white); margin-bottom: 1.25rem; }
.prose-ink { font-size: .95rem; line-height: 1.9; color: color-mix(in oklab, var(--ink) 72%, white); margin-bottom: 1.5rem; }
.wie .mvw-button { margin-top: 2.5rem; }

/* Statements */
.statements { display: grid; gap: 1px; background: color-mix(in oklab, var(--fg) 5%, transparent); }
@media (min-width: 768px) { .statements { grid-template-columns: repeat(3, 1fr); } }
.statement { background: var(--deep); padding: 3rem 2rem; position: relative; overflow: hidden; }
@media (min-width: 768px) { .statement { padding: 3rem 2.5rem; } }
.statement::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.statement:hover::after { transform: scaleX(1); }
.statement h3 { font-family: var(--f-display); font-size: clamp(1.05rem,1.8vw,1.35rem); font-weight: 700; line-height: 1.25; margin-bottom: 1.25rem; }
.statement p { font-size: .82rem; line-height: 1.8; color: color-mix(in oklab, var(--fg) 55%, transparent); }

/* Practice */
.practice { padding: 5rem var(--pad-x); }
@media (min-width: 768px) { .practice { padding: 6rem var(--pad-x-md); } }
.practice-inner { max-width: var(--max); margin: 0 auto; }
.ref-grid { display: grid; gap: 1px; background: color-mix(in oklab, var(--fg) 5%, transparent); margin-top: 2.5rem; }
@media (min-width: 768px) { .ref-grid { grid-template-columns: repeat(3, 1fr); } }
.ref { background: var(--deep); padding: 3rem 2rem; }
.ref .sector { font-size: .62rem; text-transform: uppercase; letter-spacing: .22em; color: var(--gold); margin-bottom: .5rem; }
.ref .label-ref { font-family: var(--f-display); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: color-mix(in oklab, var(--fg) 25%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--fg) 6%, transparent); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.ref .body { font-family: var(--f-serif); font-style: italic; font-size: 1.05rem; line-height: 1.65; color: color-mix(in oklab, var(--fg) 65%, transparent); }
.founders-wrap { position: relative; margin-top: 4rem; }
.founders-bg { width: 100%; height: 260px; object-fit: cover; filter: grayscale(20%) brightness(.85); }
@media (min-width: 768px) { .founders-bg { height: 420px; } }
.founders { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: var(--pad-x); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (min-width: 768px) { .founders { left: auto; right: var(--pad-x-md); width: 420px; } }
.founder-card { position: relative; border: 1px solid color-mix(in oklab, var(--gold) 28%, transparent); background: color-mix(in oklab, var(--bg) 70%, transparent); backdrop-filter: blur(6px); padding: .5rem; }
.founder-img { position: relative; aspect-ratio: 4/5; width: 100%; background-color: var(--deep); background-size: cover; background-position: center 20%; filter: grayscale(35%) contrast(1.05) brightness(.72); overflow: hidden; }
.founder-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--deep) 55%, transparent) 0%, color-mix(in oklab, var(--deep) 10%, transparent) 45%, color-mix(in oklab, var(--deep) 85%, transparent) 100%); }
.founder-img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 35%, transparent 35%, color-mix(in oklab, var(--deep) 75%, transparent) 100%); }
.kennis-link { display: block; text-align: center; margin-top: 2rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); }

/* Diensten */
.diensten { background: var(--deep); padding: 5rem var(--pad-x); }
@media (min-width: 768px) { .diensten { padding: 8rem var(--pad-x-md); } }
.diensten-inner { max-width: var(--max); margin: 0 auto; }
.diensten-head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3.5rem; }
@media (min-width: 768px) { .diensten-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.service { display: grid; gap: 1.5rem; border-bottom: 1px solid color-mix(in oklab, var(--fg) 5%, transparent); padding: 2rem 0; transition: padding-left .25s; cursor: pointer; }
.service:hover { padding-left: .5rem; }
@media (min-width: 768px) { .service { grid-template-columns: 3rem 1fr auto; } }
.service .num { font-family: var(--f-serif); font-style: italic; font-size: .85rem; color: var(--gold); }
.service .title { display: block; font-family: var(--f-display); font-size: clamp(.9rem,1.8vw,1.35rem); font-weight: 700; text-transform: uppercase; line-height: 1.35; color: color-mix(in oklab, var(--fg) 78%, transparent); }
.service .sub { display: block; margin-top: .5rem; font-size: .78rem; line-height: 1.6; color: color-mix(in oklab, var(--fg) 28%, transparent); }
.service .arrow { font-size: 1.25rem; color: color-mix(in oklab, var(--fg) 18%, transparent); }

/* CTA strip */
.cta-strip { position: relative; min-height: 420px; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background: url('assets/sfeer-koffie.jpg') center 35%/cover; filter: brightness(.32) contrast(1.15); }
.cta-overlay { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(105deg, rgba(15,15,15,.96) 28%, rgba(15,15,15,.2) 100%); }
.cta-content { max-width: var(--max); margin: 0 auto; padding: 5rem var(--pad-x); width: 100%; }
.cta-content .display-h2 { font-size: clamp(2.2rem,5.5vw,5rem); line-height: .92; margin-bottom: 1.5rem; max-width: 720px; }
.cta-lead { max-width: 400px; margin-bottom: 2.5rem; font-size: .95rem; line-height: 1.85; color: color-mix(in oklab, var(--fg) 60%, transparent); }

/* Maat worden */
.maat { background: var(--paper); padding: 5rem var(--pad-x); }
@media (min-width: 768px) { .maat { padding: 8rem var(--pad-x-md); } }
.maat-grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .maat-grid { grid-template-columns: 1fr 1fr; gap: 7rem; } }
.maat .display-h2 { color: var(--bg); margin-bottom: 1.5rem; }
.maat .display-h2 em { color: var(--gold-s); }
.maat-list { list-style: none; }
.maat-list li { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid color-mix(in oklab, var(--bg) 7%, transparent); font-family: var(--f-display); font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bg); }
.maat-list .dot { display: block; width: 6px; height: 6px; background: var(--gold); flex-shrink: 0; }

/* =====================================================
   INNER PAGE HERO (gedeeld — diensten, team, contact)
   ===================================================== */
.page-hero { position: relative; overflow: hidden; padding: 14rem var(--pad-x) 6rem; }
@media (min-width: 768px) { .page-hero { padding: 14rem var(--pad-x-md) 6rem; } }
.page-hero-bg { position: absolute; inset: 0; background-position: center 30%; background-size: cover; opacity: .18; }
.page-hero-vignette { position: absolute; inset: 0; background: linear-gradient(to right, rgba(15,15,15,.97) 35%, rgba(15,15,15,.45) 100%); }
.page-hero-content { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; display: grid; gap: 4rem; }
@media (min-width: 1200px) { .page-hero-content { grid-template-columns: 1.3fr 1fr; gap: 5rem; align-items: end; } }
.breadcrumb { font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in oklab, var(--fg) 28%, transparent); margin-bottom: 1.5rem; display: flex; align-items: center; gap: .6rem; }
.breadcrumb a { color: var(--gold); }
.page-nr { font-family: var(--f-serif); font-size: 5rem; color: color-mix(in oklab, var(--gold) 12%, transparent); font-style: italic; line-height: 1; margin-bottom: .5rem; }
.page-h1 { font-family: var(--f-display); font-size: clamp(1.6rem,2.2vw,2.6rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; color: var(--fg); margin-bottom: 2rem; overflow-wrap: break-word; }
.page-h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 300; color: var(--gold); text-transform: none; letter-spacing: 0; font-size: .9em; }
.page-intro { font-size: 1.15rem; color: color-mix(in oklab, var(--fg) 55%, transparent); line-height: 1.85; margin-bottom: 2.5rem; }
.page-intro strong { color: color-mix(in oklab, var(--fg) 85%, transparent); font-weight: 400; }

/* =====================================================
   SECTION BASE (inner pages)
   ===================================================== */
.sectie { padding: 7rem var(--pad-x); }
@media (min-width: 768px) { .sectie { padding: 7rem var(--pad-x-md); } }
.container { max-width: var(--max); margin: 0 auto; }
.section-eyebrow { display: flex; align-items: center; gap: 1rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .3em; margin-bottom: 2rem; color: var(--gold); }
.section-eyebrow .rule { display: block; height: 1px; width: 2.5rem; background: var(--gold); }
.section-eyebrow.paper { color: var(--gold-s); }
.section-eyebrow.paper .rule { background: var(--gold-s); }

/* =====================================================
   DIENSTEN PAGINA SECTIES
   ===================================================== */

/* Het vraagstuk */
.vraagstuk { background: var(--paper); }
.vraagstuk-inner { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .vraagstuk-inner { grid-template-columns: 1fr 1fr; gap: 8rem; align-items: start; } }
.vraagstuk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.5rem; }
@media (max-width: 640px) { .vraagstuk-grid { grid-template-columns: 1fr; } }
.vraagstuk-blok h3 { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--gold-s); margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.vraagstuk-blok p { font-size: .9rem; color: color-mix(in oklab, var(--ink) 72%, white); line-height: 1.75; }
.vraagstuk-h2 { font-family: var(--f-display); font-size: clamp(2rem,4vw,3.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--bg); line-height: .95; margin-bottom: 2.5rem; overflow-wrap: break-word; }
.vraagstuk-h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 300; color: var(--gold-s); text-transform: none; letter-spacing: 0; }
.situaties { margin-top: 2.5rem; display: flex; flex-direction: column; }
.situatie-item { padding: 1.2rem 0; border-bottom: 1px solid color-mix(in oklab, var(--bg) 8%, transparent); display: flex; align-items: flex-start; gap: 1rem; font-size: .9rem; color: var(--ink); line-height: 1.6; }
.situatie-item::before { content: ''; width: 6px; height: 6px; background: var(--gold-s); flex-shrink: 0; margin-top: .45rem; }
.vraagstuk-proza p { font-size: .95rem; color: color-mix(in oklab, var(--ink) 72%, white); line-height: 1.9; margin-bottom: 1.4rem; }
.vraagstuk-proza strong { color: var(--bg); font-weight: 500; }
.section-intro { font-size: 1.1rem; max-width: 640px; color: color-mix(in oklab, var(--bg) 80%, white); line-height: 1.65; margin-bottom: 2.5rem; }

/* Hoe wij werken / Aanbod */
.aanbod { background: var(--deep); }
.aanbod-h2 { font-family: var(--f-display); font-size: clamp(1.8rem,3.5vw,3rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--fg); line-height: .95; margin-bottom: 3.5rem; overflow-wrap: break-word; }
.aanbod-h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 300; color: var(--gold); text-transform: none; letter-spacing: 0; }
.aanbod-grid { display: grid; gap: 1px; background: color-mix(in oklab, var(--fg) 4%, transparent); margin-bottom: 4rem; }
@media (min-width: 768px) { .aanbod-grid { grid-template-columns: repeat(3, 1fr); } }
.aanbod-item { background: var(--deep); padding: 3rem 2.5rem; position: relative; overflow: hidden; transition: background .3s; }
.aanbod-item:hover { background: color-mix(in oklab, var(--fg) 2%, var(--deep)); }
.aanbod-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.aanbod-item:hover::after { transform: scaleX(1); }
.aanbod-nr { font-family: var(--f-serif); font-size: 2.5rem; color: color-mix(in oklab, var(--gold) 15%, transparent); font-style: italic; line-height: 1; margin-bottom: 1.5rem; display: block; }
.aanbod-titel { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--fg); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1rem; line-height: 1.2; }
.aanbod-tekst { font-size: .82rem; color: color-mix(in oklab, var(--fg) 55%, transparent); line-height: 1.8; }
.werken-grid { display: grid; gap: 1px; background: color-mix(in oklab, var(--fg) 4%, transparent); margin-bottom: 4rem; }
@media (min-width: 768px) { .werken-grid { grid-template-columns: repeat(3, 1fr); } }
.werken-blok { background: var(--deep); padding: 2.5rem; position: relative; overflow: hidden; }
.werken-blok::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); }
.werken-blok h3 { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--fg); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1rem; }
.werken-blok p { font-size: .85rem; color: color-mix(in oklab, var(--fg) 42%, transparent); line-height: 1.8; }
.quote-blok { background: color-mix(in oklab, var(--gold) 6%, transparent); border-left: 3px solid var(--gold); padding: 2.5rem 3rem; }
.quote-blok p.quote-text { font-family: var(--f-serif); font-size: clamp(1.2rem,2vw,1.6rem); font-style: italic; color: color-mix(in oklab, var(--fg) 65%, transparent); line-height: 1.55; font-weight: 300; margin-bottom: .75rem; }
.quote-blok p.quote-attr { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); }
@media (max-width: 768px) { .quote-blok { padding: 2rem var(--pad-x); } }

/* Expertise / Sectoren */
.expertise { background: var(--bg); border-top: 1px solid color-mix(in oklab, var(--fg) 4%, transparent); }
.expertise-inner { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .expertise-inner { grid-template-columns: 1fr 2fr; gap: 6rem; align-items: start; } }
.expertise-h2 { font-family: var(--f-display); font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--fg); line-height: .95; overflow-wrap: break-word; }
.expertise-h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 300; color: var(--gold); text-transform: none; letter-spacing: 0; }
.expertise-lijst { display: flex; flex-direction: column; }
.expertise-item { padding: 1.8rem 0; border-bottom: 1px solid color-mix(in oklab, var(--fg) 5%, transparent); display: grid; gap: 1rem; }
@media (min-width: 768px) { .expertise-item { grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; } }
.expertise-naam { font-family: var(--f-display); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.expertise-tekst { font-size: .85rem; color: color-mix(in oklab, var(--fg) 52%, transparent); line-height: 1.8; }
.sectoren-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
@media (max-width: 640px) { .sectoren-grid { grid-template-columns: 1fr; } }
.sector-blok h3 { font-family: var(--f-display); font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin-bottom: .6rem; }
.sector-blok p { font-size: .85rem; color: color-mix(in oklab, var(--fg) 42%, transparent); line-height: 1.75; }
.sluitzin { font-size: .9rem; color: color-mix(in oklab, var(--fg) 55%, transparent); border-top: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); padding-top: 2rem; line-height: 1.75; }

/* Referentie / Praktijk */
.referentie { background: var(--paper); }
.referentie-inner { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .referentie-inner { grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center; } }
.referentie-h2 { font-family: var(--f-display); font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--bg); line-height: .95; margin-bottom: 2.5rem; overflow-wrap: break-word; }
.ref-kaart { background: var(--bg); padding: 3.5rem; position: relative; }
.ref-kaart::before { content: ''; position: absolute; top: -10px; left: -10px; right: 10px; bottom: 10px; border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); z-index: 0; }
.ref-kaart-inner { position: relative; z-index: 1; }
.ref-kaart-sector { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.ref-kaart-type { font-family: var(--f-display); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: color-mix(in oklab, var(--fg) 30%, transparent); margin-bottom: 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid color-mix(in oklab, var(--fg) 6%, transparent); }
.ref-kaart-tekst { font-family: var(--f-serif); font-size: 1.15rem; font-style: italic; color: color-mix(in oklab, var(--fg) 70%, transparent); line-height: 1.65; font-weight: 300; }
.ref-kaart-resultaat { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--fg) 6%, transparent); font-size: .8rem; color: color-mix(in oklab, var(--fg) 28%, transparent); line-height: 1.7; }
.praktijk-van-naar { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1.5rem 0; }
@media (max-width: 640px) { .praktijk-van-naar { grid-template-columns: 1fr; } }
.praktijk-van-naar h4 { font-family: var(--f-display); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: .6rem; }
.praktijk-van-naar p { font-size: .9rem; color: color-mix(in oklab, var(--fg) 55%, transparent); font-style: italic; line-height: 1.6; }
.referentie-cta p { font-size: .95rem; color: color-mix(in oklab, var(--ink) 72%, white); line-height: 1.85; margin-bottom: 2rem; }

/* Andere diensten */
.andere-diensten { background: var(--deep); padding: 4rem var(--pad-x); }
@media (min-width: 768px) { .andere-diensten { padding: 4rem var(--pad-x-md); } }
.andere-diensten-inner { max-width: var(--max); margin: 0 auto; }
.andere-diensten h3 { font-family: var(--f-display); font-size: .65rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in oklab, var(--fg) 25%, transparent); margin-bottom: 2rem; }
.andere-lijst { display: flex; gap: 1rem; flex-wrap: wrap; }
.andere-item { border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); padding: .8rem 1.6rem; font-family: var(--f-display); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: color-mix(in oklab, var(--fg) 35%, transparent); transition: border-color .2s, color .2s; }
.andere-item:hover { border-color: var(--gold); color: var(--gold); }
/* Dienst kaart links (haar bestanden stijl, omgebouwd) */
.dienst-kaart-links { display: grid; gap: 1rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .dienst-kaart-links { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.dienst-kaart { display: block; border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); padding: 2rem; transition: border-color .2s, background .2s; }
.dienst-kaart:hover { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 4%, transparent); }
.dienst-kaart-nr { font-family: var(--f-serif); font-style: italic; font-size: .75rem; color: var(--gold); margin-bottom: .75rem; display: block; }
.dienst-kaart h3 { font-family: var(--f-display); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg); margin-bottom: .75rem; line-height: 1.3; }
.dienst-kaart p { font-size: .82rem; color: color-mix(in oklab, var(--fg) 40%, transparent); line-height: 1.7; }

/* =====================================================
   MAAK KENNIS MET DE MATEN
   ===================================================== */
.team-sectie { background: var(--bg); padding: 5rem var(--pad-x); }
@media (min-width: 768px) { .team-sectie { padding: 7rem var(--pad-x-md); } }
.team-inner { max-width: var(--max); margin: 0 auto; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
/* Teamkaarten altijd zichtbaar — los van de scroll-reveal JS */
.maat-kaart { cursor: pointer; position: relative; group: true; opacity: 1; transform: none; }
.maat-foto { aspect-ratio: 3/4; overflow: hidden; position: relative; }
.maat-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(25%) contrast(1.06) brightness(.88); transition: transform .5s cubic-bezier(.23,1,.32,1), filter .5s; }
.maat-kaart:hover .maat-foto img { transform: scale(1.04); filter: grayscale(10%) contrast(1.08) brightness(.92); }
.maat-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,15,.8) 0%, rgba(15,15,15,.2) 45%, transparent 100%); }
.maat-info { padding: 1.25rem 0 .5rem; }
.maat-tagline { font-family: var(--f-serif); font-style: italic; font-size: .95rem; color: color-mix(in oklab, var(--fg) 55%, transparent); line-height: 1.45; margin-bottom: .4rem; }
.maat-naam { font-family: var(--f-display); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.maat-klik { font-size: .65rem; text-transform: uppercase; letter-spacing: .16em; color: color-mix(in oklab, var(--fg) 30%, transparent); margin-top: .4rem; display: flex; align-items: center; gap: .4rem; }
.maat-klik::before { content: ''; display: block; width: 1rem; height: 1px; background: currentColor; }

/* Overlay */
.verhaal-overlay { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: var(--pad-x); background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(8px); }
.verhaal-overlay.open { display: flex; }
.verhaal-kaart { background: var(--deep); max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 3rem; position: relative; border: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); }
.verhaal-kaart::before { content: ''; position: absolute; top: -8px; left: -8px; right: 8px; bottom: 8px; border: 1px solid color-mix(in oklab, var(--gold) 10%, transparent); pointer-events: none; }
.verhaal-sluiten { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; cursor: pointer; font-size: 1.25rem; color: color-mix(in oklab, var(--fg) 50%, transparent); transition: color .2s; padding: .25rem; }
.verhaal-sluiten:hover { color: var(--gold); }
.verhaal-tagline { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.1rem,2vw,1.4rem); color: var(--gold); line-height: 1.35; margin-bottom: .5rem; }
.verhaal-naam { font-family: var(--f-display); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in oklab, var(--fg) 40%, transparent); margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid color-mix(in oklab, var(--fg) 6%, transparent); }
.verhaal-tekst p { font-size: .9rem; color: color-mix(in oklab, var(--fg) 65%, transparent); line-height: 1.85; margin-bottom: 1.25rem; }
.verhaal-ankers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.verhaal-anker { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); padding: .4rem .9rem; color: color-mix(in oklab, var(--fg) 45%, transparent); }

/* =====================================================
   CONTACT PAGINA
   ===================================================== */
.contact-sectie { background: var(--bg); }
.contact-grid { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.15fr; gap: 7rem; align-items: start; } }
.contact-info-h2 { font-family: var(--f-display); font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--fg); margin-bottom: 1rem; line-height: .95; overflow-wrap: break-word; }
.contact-lead { font-size: .95rem; color: color-mix(in oklab, var(--fg) 55%, transparent); line-height: 1.85; margin-bottom: 2.5rem; }
.contact-detail { margin-bottom: 1.75rem; }
.contact-label { font-family: var(--f-display); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
.contact-detail a, .contact-detail span { color: var(--fg); font-size: .95rem; }
.contact-detail a:hover { color: var(--gold); }
.contact-note { margin-top: 2.5rem; padding: 1.5rem 2rem; background: color-mix(in oklab, var(--gold) 6%, transparent); border-left: 3px solid var(--gold); }
.contact-note p { font-size: .85rem; color: color-mix(in oklab, var(--fg) 55%, transparent); line-height: 1.75; }
/* Form */
.contact-form-title { font-family: var(--f-display); font-size: .65rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; }
.contact-form-title::before { content: ''; width: 2.5rem; height: 1px; background: var(--gold); }
form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group label { display: block; font-family: var(--f-display); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in oklab, var(--fg) 45%, transparent); margin-bottom: .5rem; }
input, textarea, select {
  width: 100%; padding: .875rem 1rem;
  border: 1px solid color-mix(in oklab, var(--gold) 22%, transparent);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  font-family: var(--f-body); font-size: .9rem; color: var(--fg);
  outline: none; transition: border-color .2s;
}
input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--fg) 28%, transparent); }
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
select option { background: var(--deep); color: var(--fg); }
textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: .78rem; color: color-mix(in oklab, var(--fg) 35%, transparent); line-height: 1.6; }
.form-note a { color: var(--gold); text-decoration: underline; }
button[type="submit"] { font-family: var(--f-display); }

/* =====================================================
   FOOTER (gedeeld)
   ===================================================== */
footer { padding: 5rem var(--pad-x) 2.5rem; border-top: 1px solid color-mix(in oklab, var(--fg) 4%, transparent); }
@media (min-width: 768px) { footer { padding: 5rem var(--pad-x-md) 2.5rem; } }
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-grid { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-brand { font-family: var(--f-display); font-size: .85rem; font-weight: 800; text-transform: uppercase; display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap; }
.footer-brand img { height: 26px; width: auto; opacity: .8; flex-shrink: 0; }
.footer-brand span.brand-text { white-space: nowrap; }
.footer-brand .gold { color: var(--gold); }
.footer-tag { margin-top: 1rem; font-size: .875rem; line-height: 1.75; color: color-mix(in oklab, var(--fg) 42%, transparent); }
.footer-col h4 { font-family: var(--f-display); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); margin-bottom: 1rem; }
.footer-col a { display: block; padding: .375rem 0; font-size: .875rem; color: color-mix(in oklab, var(--fg) 52%, transparent); transition: color .2s; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--fg) 4%, transparent); padding-top: 1.5rem; font-size: .875rem; color: color-mix(in oklab, var(--fg) 35%, transparent); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-bottom > div { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom a { color: color-mix(in oklab, var(--fg) 35%, transparent); transition: color .2s; }
.footer-bottom a:hover { color: var(--gold); }

/* =====================================================
   COOKIEBANNER
   ===================================================== */
#cookie-banner {
  position: fixed; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; z-index: 999;
  background: var(--deep); border: 1px solid color-mix(in oklab, var(--gold) 18%, transparent);
  padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 1rem;
  max-width: 560px;
}
@media (min-width: 640px) { #cookie-banner { flex-direction: row; align-items: center; gap: 2rem; right: auto; } }
#cookie-banner p { font-size: .82rem; color: color-mix(in oklab, var(--fg) 55%, transparent); line-height: 1.65; }
#cookie-banner a { color: var(--gold); text-decoration: underline; }
#cookie-banner .cookie-btns { display: flex; gap: .75rem; flex-shrink: 0; }
#cookie-accept { background: var(--gold); color: var(--bg); border: none; padding: .7rem 1.5rem; font-family: var(--f-display); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s; white-space: nowrap; }
#cookie-accept:hover { background: var(--gold-s); }
#cookie-deny { background: none; color: color-mix(in oklab, var(--fg) 40%, transparent); border: 1px solid color-mix(in oklab, var(--fg) 15%, transparent); padding: .7rem 1.5rem; font-family: var(--f-display); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: all .2s; white-space: nowrap; }
#cookie-deny:hover { border-color: var(--fg); color: var(--fg); }


/* =====================================================
   ONS VERHAAL / MAAT-ZIJN — leespagina's
   ===================================================== */
.lees-sectie { background: var(--paper); padding: 10rem var(--pad-x) 6rem; }
@media (min-width: 768px) { .lees-sectie { padding: 10rem var(--pad-x-md) 6rem; } }
.lees-inner { max-width: 720px; margin: 0 auto; }
.lees-eyebrow { font-family: var(--f-display); font-size: .65rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-s); margin-bottom: 1rem; }
.lees-h1 { font-family: var(--f-display); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; color: var(--ink); margin-bottom: 3rem; overflow-wrap: break-word; }
.lees-h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 300; color: var(--gold-s); text-transform: none; letter-spacing: 0; }
.lees-intro { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--ink); border-left: 3px solid var(--gold); padding: 1.5rem 2rem; background: color-mix(in oklab, var(--gold) 4%, white); margin-bottom: 3rem; line-height: 1.5; }
.lees-tekst p { font-size: 1rem; color: color-mix(in oklab, var(--ink) 82%, white); line-height: 1.9; margin-bottom: 1.5rem; }
.lees-h2 { font-family: var(--f-display); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-s); margin: 2.5rem 0 1rem; }
.lees-cta { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid color-mix(in oklab, var(--ink) 8%, white); display: flex; gap: 1rem; flex-wrap: wrap; }

/* Stappen blok (maat-zijn) */
.stappen-blok { background: white; border-left: 3px solid var(--gold); padding: 1.5rem 2rem; margin: 1.5rem 0; }
.stappen-blok p { font-size: .92rem; color: color-mix(in oklab, var(--ink) 72%, white); line-height: 1.8; margin-bottom: .6rem; }
.stappen-blok p:last-child { font-family: var(--f-serif); font-style: italic; color: var(--gold-s); font-size: 1.05rem; margin-bottom: 0; }
.stappen-blok a { color: var(--gold-s); text-decoration: underline; }

/* CTA blok maat-zijn (dark) */
.maat-cta-blok { background: var(--bg); padding: 3rem; margin-top: 4rem; }
.maat-cta-blok h2 { font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; text-transform: uppercase; color: var(--fg); margin-bottom: 1rem; overflow-wrap: break-word; }
.maat-cta-blok p { font-size: .95rem; color: color-mix(in oklab, var(--fg) 55%, transparent); line-height: 1.85; margin-bottom: 2rem; }

/* =====================================================
   FAQ PAGINA
   ===================================================== */
.faq-sectie { background: var(--paper); padding: 10rem var(--pad-x) 6rem; }
@media (min-width: 768px) { .faq-sectie { padding: 10rem var(--pad-x-md) 6rem; } }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq-h1 { font-family: var(--f-display); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--ink); margin-bottom: 1rem; line-height: .95; overflow-wrap: break-word; }
.faq-intro { font-size: 1.05rem; color: color-mix(in oklab, var(--ink) 62%, white); max-width: 48ch; margin-bottom: 4rem; }
.faq-categorie { margin-bottom: 3rem; }
.faq-categorie-titel { font-family: var(--f-display); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-s); margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, white); }
details { border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, white); }
details:first-of-type { border-top: 1px solid color-mix(in oklab, var(--ink) 8%, white); }
summary { padding: 1.25rem 0; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: .95rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; text-transform: uppercase; letter-spacing: .04em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--gold-s); font-size: 1.4rem; font-weight: 300; flex-shrink: 0; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
.faq-antwoord { padding: 0 0 1.5rem 0; font-size: .95rem; color: color-mix(in oklab, var(--ink) 72%, white); line-height: 1.85; max-width: 56ch; }
.faq-slot { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid color-mix(in oklab, var(--ink) 8%, white); display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.faq-slot p { font-size: 1rem; color: color-mix(in oklab, var(--ink) 62%, white); }

/* =====================================================
   PRIVACYVERKLARING
   ===================================================== */
.legal-sectie { background: var(--bg); padding: 10rem var(--pad-x) 6rem; }
@media (min-width: 768px) { .legal-sectie { padding: 10rem var(--pad-x-md) 6rem; } }
.legal-inner { max-width: 720px; margin: 0 auto; }
.legal-h1 { font-family: var(--f-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--fg); margin-bottom: .75rem; overflow-wrap: break-word; }
.legal-datum { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in oklab, var(--fg) 32%, transparent); margin-bottom: 4rem; }
.legal-inner h2 { font-family: var(--f-display); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin: 3rem 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); }
.legal-inner h2:first-of-type { margin-top: 0; }
.legal-inner p { font-size: .92rem; color: color-mix(in oklab, var(--fg) 60%, transparent); line-height: 1.85; margin-bottom: 1rem; }
.legal-inner a { color: var(--gold); }
.legal-inner a:hover { text-decoration: underline; }
.legal-inner ul { margin: .75rem 0 1rem 1.5rem; }
.legal-inner ul li { font-size: .92rem; color: color-mix(in oklab, var(--fg) 60%, transparent); line-height: 1.75; margin-bottom: .4rem; }

/* =====================================================
   BUTTON EXTRA VARIANTEN
   ===================================================== */
.btn-ghost-dark { background: transparent; border-color: color-mix(in oklab, var(--ink) 22%, transparent); color: color-mix(in oklab, var(--ink) 70%, transparent); }
.btn-ghost-dark:hover { border-color: var(--ink); color: var(--ink); }

/* =====================================================
   RESPONSIVE FIXES
   ===================================================== */

/* ── Snelle tap response (verwijder 300ms delay op touch) ── */
a, button, .mvw-button, summary, .maat-kaart, .service, .andere-item { touch-action: manipulation; }

/* ── Stabiele viewport hoogte op iOS Safari ── */
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }

/* ── max-width: 767px — mobiel en tablet staand ── */
@media (max-width: 767px) {
  /* Nav touch targets verbeteren */
  .nav-mobile a { padding: 1.1rem 0; }

  /* Hero homepage */
  .hero-title { margin-bottom: 2rem; }
  .hero-lead { font-size: .92rem; }
  .hero-foot { gap: 1.75rem; }
  .eyebrow { margin-bottom: 1.5rem; }

  /* Inner page hero */
  .page-hero { padding: 7rem var(--pad-x) 4rem; }
  .page-hero-content { gap: 2.5rem; }
  .page-nr { font-size: 3rem; }
  .page-h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); margin-bottom: 1.25rem; overflow-wrap: break-word; }
  .page-intro { font-size: 1rem; }

  /* Sectie padding compact op mobiel */
  .sectie { padding: 4rem var(--pad-x); }
  .wie { padding: 4rem var(--pad-x); }
  .maat { padding: 4rem var(--pad-x); }
  .practice { padding: 4rem var(--pad-x); }

  /* Typografie spacing */
  .display-h2 { margin-bottom: 2rem; }

  /* Services-lijst homepage: flex in plaats van kapotte auto-grid */
  .service { display: flex; align-items: flex-start; gap: 1rem; }
  .service .num { flex-shrink: 0; width: 2.25rem; padding-top: .1rem; }
  .service .arrow { flex-shrink: 0; font-size: 1rem; color: var(--gold); padding-top: .1rem; }

  /* Cards & grids */
  .ref-kaart { padding: 2rem; }
  .ref-kaart::before { display: none; }          /* offset border voorkomt overflow op mobiel */
  .aanbod-item { padding: 2rem 1.5rem; }          /* was 3rem 2.5rem — te royaal op 320px */
  .statement { padding: 2.5rem 1.5rem; }          /* was 3rem 2rem */
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* 2-koloms altijd */
  .werken-grid { grid-template-columns: 1fr; gap: 0; }
  .dienst-kaart-links { grid-template-columns: 1fr; }
  .sectoren-grid { grid-template-columns: 1fr; }
  .vraagstuk-grid { grid-template-columns: 1fr; }

  /* Quote & CTA */
  .quote-blok { padding: 1.5rem; }
  .cta-content { padding: 4rem var(--pad-x); }
  .cta-content .display-h2 { font-size: clamp(2rem, 10vw, 3.5rem); }

  /* Overlay (team verhaal) */
  .verhaal-kaart { padding: 2rem 1.5rem; }
  .verhaal-kaart::before { display: none; }

  /* Contact */
  .contact-grid { gap: 2.5rem; }

  /* Lees / FAQ / Legal */
  .lees-sectie, .faq-sectie, .legal-sectie { padding: 8rem var(--pad-x) 4rem; }

  /* Maat zijn */
  .maat-cta-blok { padding: 2rem; }

  /* FAQ accordion touch target iets groter */
  summary { padding: 1.375rem 0; }

  /* Display headings schalen mee met smallere schermen */
  .display-h2 { font-size: clamp(1.5rem, 5.5vw, 2.2rem); line-height: 1.05; }
  .cta-content .display-h2 { font-size: clamp(1.5rem, 8vw, 2.5rem); }
  .vraagstuk-h2 { font-size: clamp(1.3rem, 5vw, 2rem); }
  .aanbod-h2 { font-size: clamp(1.2rem, 4.5vw, 1.8rem); }
  .lees-h1 { font-size: clamp(1.3rem, 5.5vw, 2rem); line-height: 1.05; }
  .faq-h1 { font-size: clamp(1.3rem, 5.5vw, 2rem); line-height: 1.05; }
  .legal-h1 { font-size: clamp(1.2rem, 5vw, 1.8rem); }

  /* Nav overflow voorkomen op smalle schermen */
  .nav-inner { gap: 1rem; }

  /* Footer: single column zodat brand-tekst niet overloopt */
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ── max-width: 480px — mobiel staand ── */
@media (max-width: 480px) {
  /* Knop-padding iets minder zodat 2 knoppen naast elkaar passen vanaf 360px */
  .mvw-button { padding: .875rem 1.5rem; }

  /* Hero titel iets kleiner schalen voor kleine telefoons */
  .hero-title { font-size: clamp(2rem, 7.5vw, 2.6rem); }
  .hero { padding-bottom: 2.5rem; }

  /* Inner page hero: minder ruimte zodat teamkaarten direct in beeld zijn */
  .page-hero { padding: 6rem var(--pad-x) 1.5rem; }
  .page-hero-content { gap: 1rem; }
  .page-intro { font-size: .9rem; margin-bottom: 1rem; }

  /* Nav brand: verkleinen zodat het naast de hamburger past op 360-480px */
  .brand { font-size: .75rem; gap: .6rem; }
  .brand img { height: 30px; }

  /* Team sectie + grid: compacter op kleine schermen */
  .team-sectie { padding: 2.5rem var(--pad-x); }
  .team-grid { grid-template-columns: 1fr; gap: 1rem; }
  .maat-info { padding: .75rem 0 .25rem; }
  .maat-tagline { font-size: .82rem; }

  /* Footer: minder topruimte + brand-tekst mag wrappen op kleine schermen */
  footer { padding-top: 3rem; }
  .footer-brand { flex-wrap: wrap; }
  .footer-brand span.brand-text { white-space: normal; }

  /* Diensten sectie iets compacter */
  .diensten { padding: 3.5rem var(--pad-x); }
}

/* ── max-width: 374px — compacte telefoons (iPhone SE 1e gen, Galaxy A serie) ── */
@media (max-width: 374px) {
  /* Brand-tekst + logo verder verkleinen op 320px */
  .brand { font-size: .7rem; gap: .5rem; letter-spacing: .02em; }
  .brand img { height: 26px; }

  /* Hero titel verder inkrimpen */
  .hero-title { font-size: clamp(1.85rem, 8vw, 2.2rem); }
  .hero-foot { gap: 1.25rem; }

  /* Scroll-cue verstoort layout op kleine schermen */
  .scroll-cue { display: none; }

  /* Knop-padding nog iets kleiner op allerkleinste schermen */
  .mvw-button { padding: .75rem 1.1rem; }

  /* Lees/FAQ iets minder topruimte */
  .lees-sectie, .faq-sectie { padding: 6rem var(--pad-x) 3rem; }
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduc