/* ── TOKENS ── */
:root {
  --navy: #0d1f5c;
  --navy2: #152575;
  --mint: #3dd9be;
  --mint-dark: #28b89f;
  --mint-bg: #e6faf7;
  --mint2: #a8f0e4;
  --bg: #eef2ff;
  --white: #fff;
  --text: #1a2340;
  --muted: #6b7a99;
  --border: #dde4f2;
  --shadow: rgba(13,31,92,.10);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--text); font-family:'DM Sans',sans-serif; font-weight:300; overflow-x:hidden; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:16px 56px; display:flex; align-items:center; justify-content:space-between;
  transition:background .3s, box-shadow .3s;
}
nav.sc { background:rgba(255,255,255,.97); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--border); }
/* Binnenpagina's (geen donkere home-hero): nav altijd wit, zodat tekst er bij het scrollen niet doorheen schijnt */
body:not(.is-home) nav { background:rgba(255,255,255,.97); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--border); }
body:not(.is-home) .logo .logo-light { display:none; }
body:not(.is-home) .logo .logo-dark { display:block; }
.logo { text-decoration:none; }
.logo img { height:36px; width:auto; transition:filter .3s; }
/* By default show the dark logo, hide light */
.logo .logo-light { display:none; }
.logo .logo-dark { display:block; }
/* On home page (dark video bg), show light, hide dark */
body.is-home .logo .logo-light { display:block; }
body.is-home .logo .logo-dark { display:none; }
    nav.sc .logo .logo-light { display:none !important; }
    nav.sc .logo .logo-dark { display:block !important; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a {
  color:#33406b; text-decoration:none; font-size:13px; font-weight:500;
  padding:7px 14px; border-radius:8px; transition:color .2s, background .2s;
}
.nav-links a:hover { color:var(--navy); background:var(--bg); }
.nav-links a.act { color:var(--navy); font-weight:600; }
/* Start- en contactpagina: witte menu-letters + iconen over de donkere hero; donkerblauw zodra de balk wit wordt bij het scrollen */
body.is-home nav:not(.sc) .nav-links a { color:#fff; }
body.is-home nav:not(.sc) .nav-links a:hover { color:#fff; background:rgba(255,255,255,.14); }
body.is-home nav:not(.sc) .nav-links a.act { color:#fff; }
body.is-home nav:not(.sc) .nav-ico { color:rgba(255,255,255,.85); }
body.is-home nav:not(.sc) .nav-ico:hover { color:#fff; background:rgba(255,255,255,.14); }
.nav-cta {
  background:var(--navy) !important; color:#fff !important;
  border-radius:100px !important; padding:10px 22px !important; font-weight:600 !important;
}
.nav-cta:hover { background:var(--navy2) !important; }

/* ── PAGES ── */
.page { display:none; padding-bottom:104px; }
.page.active { display:block; }
/* Homepage-hero is een full-bleed beeld; de turquoise footer-golf valt hier direct over het beeld (geen witruimte), op alle schermformaten */
#page-home { padding-bottom:0 !important; }

/* ── PAGE DOTS ── */
.pg-dots {
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:800; display:flex; flex-direction:column; gap:10px;
}
.pg-dot {
  width:8px; height:8px; border-radius:50%; background:var(--border);
  border:none; cursor:pointer; transition:all .25s; padding:0;
}
.pg-dot.on { background:var(--navy); transform:scale(1.5); }
.pg-dot:hover { background:var(--mint); }

/* ── SHARED ── */
.wrap { max-width:1140px; margin:0 auto; padding:0 48px; }
.sec { padding:96px 0; }

.eye {
  font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:#0d856e; display:block; margin-bottom:14px;
}
.eye-light { color:var(--mint2); }

.h1 { font-family:'Fraunces',serif; font-weight:900; color:var(--navy); line-height:1.0; }
.h2 { font-family:'Fraunces',serif; font-weight:900; color:var(--navy); letter-spacing:-1px; line-height:1.1; }
.h2-light { color:#fff; }
.lead { font-size:17px; color:var(--muted); line-height:1.85; font-weight:300; }
.lead-light { color:rgba(255,255,255,.65); }

.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:100px; font-size:15px; font-weight:600;
  text-decoration:none; border:none; cursor:pointer; font-family:'DM Sans',sans-serif;
  transition:all .2s;
}
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:var(--navy2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(13,31,92,.25); }
.btn-mint { background:var(--mint); color:var(--navy); }
.btn-mint:hover { background:var(--mint-dark); transform:translateY(-2px); }
.btn-outline { background:transparent; border:1.5px solid rgba(255,255,255,.35); color:rgba(255,255,255,.85); }
.btn-outline:hover { border-color:#fff; color:#fff; }
.btn-outline-dark { background:transparent; border:1.5px solid var(--border); color:var(--muted); }
.btn-outline-dark:hover { border-color:var(--navy); color:var(--navy); }

/* grid helpers */
.two { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.three { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* card */
.card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:32px 28px; transition:transform .25s, box-shadow .25s; }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 40px var(--shadow); }

/* scroll reveal */
.sr { opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
.sr.v { opacity:1; transform:translateY(0); }
.d1 { transition-delay:.1s; } .d2 { transition-delay:.2s; } .d3 { transition-delay:.3s; }

/* ════════════════════════════
   HERO  (image10)
════════════════════════════ */
.hero {
  min-height:100vh;
  position:relative; overflow:hidden;
}
/* subtle grid (disabled) */
.hero::before {
  content:none;
}
.hero-left {
  padding:140px 64px 80px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:1;
}
.hero-kicker {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--border); border-radius:100px;
  padding:6px 18px; font-size:13px; font-weight:500; color:var(--muted);
  margin-bottom:32px; box-shadow:0 2px 10px var(--shadow); width:fit-content;
}
.kicker-dot {
  width:8px; height:8px; background:var(--mint); border-radius:50%;
  animation:blink 2s ease-in-out infinite; flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(1.5);} }

.hero h1 {
  font-size:clamp(48px,5.5vw,72px);
  letter-spacing:-2.5px;
  margin-bottom:28px;
  line-height:1.0;
}
.hero h1 .navy { color:var(--navy); font-style:normal; }
.hero h1 .mint { color:var(--mint); font-style:normal; }

.hero-sub {
  font-size:18px; color:var(--muted); line-height:1.85;
  max-width:480px; margin-bottom:40px; font-weight:300;
}
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:0; }

.hero-stats {
  display:flex; gap:44px;
  margin-top:56px; padding-top:40px;
  border-top:1px solid var(--border);
}
.stat-num {
  font-family:'Fraunces',serif; font-size:38px; font-weight:900;
  color:var(--navy); line-height:1;
}
.stat-unit { color:var(--mint); }
.stat-lbl { font-size:13px; color:var(--muted); margin-top:5px; }

/* hero right — photo */
.hero-right {
  position:relative; overflow:hidden;
}
.hero-right img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
}

/* ════════════════════════════
   HERKENNING  (image9)
════════════════════════════ */
.herk-head { text-align:center; max-width:640px; margin:0 auto 56px; }
.herk-head .h2 { font-size:clamp(32px,4vw,52px); margin-bottom:16px; }

.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:52px; }
.pain-card {
  background:#fff; border:1px solid var(--border); border-radius:18px;
  padding:30px 26px; transition:transform .25s, box-shadow .25s; position:relative;
}
.pain-card:hover { transform:translateY(-4px); box-shadow:0 10px 36px var(--shadow); }
.pain-icon { font-size:32px; margin-bottom:16px; }
.pain-title { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:9px; }
.pain-desc { font-size:14px; color:var(--muted); line-height:1.72; }

/* quote block  (image8) */
.quote-wrap {
  background:var(--bg); border-radius:20px; border:1px solid var(--border);
  padding:56px 64px; text-align:center; max-width:820px; margin:0 auto;
}
.quote-mark {
  font-family:'Fraunces',serif; font-size:100px; color:var(--mint);
  line-height:.4; display:block; margin-bottom:24px;
}
.quote-body {
  font-family:'Fraunces',serif; font-size:clamp(20px,2.5vw,28px);
  font-weight:700; color:var(--navy); line-height:1.45; margin-bottom:20px;
}
.quote-sub { font-size:16px; color:var(--muted); line-height:1.7; }

/* ════════════════════════════
   OPLOSSING TEASER  (image3)
════════════════════════════ */
.teaser { text-align:center; padding:80px 0; }
.teaser .h2 { font-size:clamp(28px,3.5vw,46px); max-width:660px; margin:0 auto 16px; }
.teaser .lead { max-width:480px; margin:0 auto 36px; }
.teaser-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ════════════════════════════
   AANPAK  (not in word but needed)
════════════════════════════ */
.aanpak-steps { display:flex; flex-direction:column; }
.step-row { display:flex; gap:24px; padding:28px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.step-row:last-child { border-bottom:none; }
.step-num {
  width:46px; height:46px; border-radius:12px; background:var(--navy); color:#fff;
  font-family:'Fraunces',serif; font-size:19px; font-weight:900;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:4px;
}
.step-num.m { background:var(--mint); color:var(--navy); }
.step-tag {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; background:var(--mint-bg); color:#0d856e;
  border:1px solid var(--mint2); padding:3px 10px; border-radius:100px; margin-bottom:8px;
}
.step-title { font-family:'Fraunces',serif; font-size:21px; font-weight:700; color:var(--navy); margin-bottom:7px; }
.step-desc { font-size:14px; color:var(--muted); line-height:1.75; }

/* ════════════════════════════
   TOEPASSINGEN  (image5)
════════════════════════════ */
.tab-btns { display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
.tab-btn {
  padding:10px 24px; border-radius:100px; border:1.5px solid var(--border);
  font-size:14px; font-weight:600; color:var(--muted); cursor:pointer;
  background:#fff; transition:all .2s; font-family:'DM Sans',sans-serif;
}
.tab-btn.on, .tab-btn:hover { background:var(--navy); border-color:var(--navy); color:#fff; }

.tab-panel { display:none; }
.tab-panel.on { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; animation:fu .4s ease; }
@keyframes fu { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

.tp-steps { display:flex; flex-direction:column; }
.tp-step { display:flex; gap:14px; padding:17px 0; border-bottom:1px solid var(--border); }
.tp-step:last-child { border-bottom:none; }
.tp-ico {
  width:42px; height:42px; border-radius:10px; background:var(--mint-bg);
  border:1px solid var(--mint2); display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0;
}
.tp-txt h4 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:3px; }
.tp-txt p { font-size:13px; color:var(--muted); line-height:1.65; }

.result-box { background:var(--navy); border-radius:18px; overflow:hidden; }
.result-box-img { width:100%; height:200px; object-fit:cover; display:block; filter:brightness(.82); }
.result-box-body { padding:30px; }
.result-box-title { font-family:'Fraunces',serif; font-size:20px; font-weight:700; color:#fff; margin-bottom:22px; line-height:1.3; }
.result-kpi { display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
.rk-num { font-family:'Fraunces',serif; font-size:42px; font-weight:900; color:var(--mint); line-height:1; }
.rk-lbl { font-size:14px; color:rgba(255,255,255,.6); }
.result-note { font-size:12px; color:rgba(255,255,255,.38); margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }

/* ════════════════════════════
   WAAROM ANDERS  (image2)
════════════════════════════ */
.anders-head { text-align:center; max-width:640px; margin:0 auto 52px; }
.anders-head .h2 { font-size:clamp(28px,3.5vw,48px); margin-bottom:16px; }

.anders-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:44px; }

/* Team photos gallery */
.team-gallery { width:100%; }
.team-gallery-track {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1100px;
  margin:0 auto;
}
.team-photo-card {
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(13,31,92,.12);
  aspect-ratio:2 / 3;
  background:var(--bg);
}
.team-photo-card img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.ac {
  background:#fff; border:1px solid var(--border); border-radius:18px;
  padding:34px 28px; text-align:center;
  transition:transform .25s, box-shadow .25s;
}
.ac:hover { transform:translateY(-4px); box-shadow:0 12px 40px var(--shadow); }
.ac-ico {
  width:80px; height:80px; border-radius:18px; background:var(--mint-bg);
  border:1px solid var(--mint2); display:flex; align-items:center;
  justify-content:center; font-size:34px; margin:0 auto 20px;
}
/* Variant for image icons: no box, just the image */
.ac-ico-img {
  width:auto; height:80px; background:none; border:none;
  border-radius:0; margin:0 auto 20px; display:flex;
  align-items:center; justify-content:center;
}
.ac-ico-img img {
  max-height:80px; max-width:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}
/* For round portraits (like Roos) */
.ac-ico-round {
  width:80px; height:80px; border-radius:50%; background:none;
  border:none; padding:0; overflow:hidden;
  margin:0 auto 20px; display:flex;
}
.ac-ico-round img {
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.ac-title { font-family:'Fraunces',serif; font-size:18px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.ac-desc { font-size:14px; color:var(--muted); line-height:1.72; }

/* VS table */
.vs-table { background:var(--bg); border-radius:16px; border:1px solid var(--border); overflow:hidden; }
.vs-head {
  display:grid; grid-template-columns:1fr 52px 1fr; padding:14px 26px;
  background:var(--border); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px; color:var(--muted);
}
.vs-row {
  display:grid; grid-template-columns:1fr 52px 1fr;
  padding:14px 26px; border-bottom:1px solid var(--border);
  align-items:center; transition:background .2s;
}
.vs-row:last-child { border-bottom:none; }
.vs-row:hover { background:rgba(255,255,255,.65); }
.vs-old { font-size:14px; color:var(--muted); text-decoration:line-through; }
.vs-mid { text-align:center; font-size:18px; color:var(--mint-dark); }
.vs-new { font-size:14px; font-weight:600; color:var(--navy); }

/* ════════════════════════════
   RESULTATEN  (image11)
════════════════════════════ */
.cases { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:44px; }
.case-card { background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; transition:transform .25s, box-shadow .25s; }
.case-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px var(--shadow); }
.case-card img { width:100%; height:200px; object-fit:cover; display:block; }
.case-body { padding:24px; }
.case-sector { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#0d856e; margin-bottom:8px; }
.case-title { font-family:'Fraunces',serif; font-size:17px; font-weight:700; color:var(--navy); margin-bottom:10px; line-height:1.3; }
.case-desc { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:18px; }
.case-stats { display:flex; gap:20px; padding-top:16px; border-top:1px solid var(--border); }
.cs-val { font-family:'Fraunces',serif; font-size:24px; font-weight:900; color:var(--navy); line-height:1; }
.cs-val span { color:var(--mint); }
.cs-lbl { font-size:11px; color:var(--muted); margin-top:3px; }

.testis { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.testi { background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:30px; }
.testi-quote { font-size:15px; color:var(--navy); line-height:1.72; font-style:italic; margin-bottom:18px; }
.testi-name { font-size:13px; font-weight:700; color:var(--navy); }
.testi-role { font-size:12px; color:var(--muted); margin-top:2px; }

/* ════════════════════════════
   AGENTS  (image7)
════════════════════════════ */
.agents-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:52px; }
.agents-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.agent-card {
  background:#fff; border:1.5px solid var(--border); border-radius:18px;
  padding:28px 24px; transition:all .25s;
}
.agent-card:hover, .agent-card.open { border-color:var(--navy); box-shadow:0 8px 32px var(--shadow); }
.agent-top { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.agent-ava {
  width:64px; height:64px; border-radius:50%; background:var(--mint-bg);
  border:2px solid var(--mint2); display:flex; align-items:center;
  justify-content:center; font-size:22px; flex-shrink:0; overflow:hidden;
}
.agent-name { font-family:'Fraunces',serif; font-size:17px; font-weight:700; color:var(--navy); }
.agent-role { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#0d856e; }
.agent-desc { font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:14px; font-weight:300; }
.agent-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.tag { background:var(--bg); border:1px solid var(--border); color:var(--muted); font-size:11px; padding:3px 10px; border-radius:100px; }
.chat-btn {
  width:100%; background:var(--navy); color:#fff; border:none; border-radius:10px;
  padding:11px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
  cursor:pointer; transition:background .2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.chat-btn:hover { background:var(--navy2); }
.chat-win { display:none; margin-top:12px; background:var(--bg); border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.chat-win.open { display:flex; flex-direction:column; }
.chat-msgs { padding:14px; display:flex; flex-direction:column; gap:10px; min-height:120px; max-height:200px; overflow-y:auto; }
.msg { max-width:85%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.55; }
.msg.ag { background:var(--navy); color:#fff; border-radius:12px 12px 12px 3px; align-self:flex-start; }
.msg.us { background:#fff; border:1px solid var(--border); color:var(--text); border-radius:12px 12px 3px 12px; align-self:flex-end; }
.msg.ty { background:var(--navy); color:#fff; border-radius:12px 12px 12px 3px; align-self:flex-start; padding:12px 16px; }
.td { display:flex; gap:4px; align-items:center; }
.td span { width:6px; height:6px; background:rgba(255,255,255,.55); border-radius:50%; animation:td .9s ease-in-out infinite; }
.td span:nth-child(2){animation-delay:.15s;}.td span:nth-child(3){animation-delay:.3s;}
@keyframes td { 0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-5px);} }
.cin-row { display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); background:#fff; }
.cin { flex:1; border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-family:'DM Sans',sans-serif; font-size:13px; outline:none; background:var(--bg); }
.cin:focus { border-color:var(--navy); }
.csend { background:var(--navy); color:#fff; border:none; border-radius:8px; padding:8px 14px; cursor:pointer; font-size:14px; transition:background .2s; }
.csend:hover { background:var(--navy2); }

/* ════════════════════════════
   ACTIE  (image6 + image1)
════════════════════════════ */
.actie-hero {
  background:transparent; padding:96px 56px; text-align:center;
  position:relative; overflow:hidden;
}
/* Contactpagina: werkwijze-opzet — foto alleen achter de hero, daaronder wit */
.actie-hero-bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.12; pointer-events:none;
}
.actie-hero-inner { position:relative; z-index:1; }
.actie-hero .h2 { font-size:clamp(32px,4.5vw,58px); margin-bottom:16px; }
.actie-hero .lead { margin:0 auto 40px; max-width:520px; }
.actie-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:0; }

.actie-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:60px; }
.ac2 {
  background:#fff; border:1.5px solid var(--border);
  border-radius:18px; padding:34px 28px; text-align:center;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  box-shadow:0 6px 24px rgba(13,31,92,.06);
  display:flex; flex-direction:column;
}
.ac2:hover { transform:translateY(-4px); box-shadow:0 14px 40px rgba(13,31,92,.10); border-color:var(--navy); }
.ac2-ico { font-size:34px; margin-bottom:18px; }
.ac2-title { font-family:'Fraunces',serif; font-size:20px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.ac2-desc { font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:24px; flex:1; }
.ac2 .btn { align-self:center; margin-top:auto; }

/* Contact form  (image1) */
.contact-form { background:transparent; padding:80px 56px; }
.cf-inner { max-width:540px; margin:0 auto; }
    .cf-2col { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.cf-inner .h2 { font-size:28px; margin-bottom:8px; }
.cf-inner .lead { font-size:15px; margin-bottom:28px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.fi {
  width:100%; padding:13px 16px; border:1.5px solid var(--border);
  border-radius:10px; font-family:'DM Sans',sans-serif; font-size:15px;
  color:var(--navy); background:#fff; outline:none; transition:border-color .2s;
}
.fi:focus { border-color:var(--navy); }
.fi-sel { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a99' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }

/* ════════════════════════════
   HOE WERKT HET  (image4)
════════════════════════════ */
.hwh-hero {
  min-height:52vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:120px 40px 96px;
  background:linear-gradient(155deg, var(--bg) 0%, #e6faf7 100%);
  position:relative; overflow:hidden;
}
.hwh-hero::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(13,31,92,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(13,31,92,.028) 1px,transparent 1px);
  background-size:48px 48px; pointer-events:none;
}
/* Golf-rand onderaan de hero — zelfde lijn als de turquoise banner */
.hwh-wave { position:absolute; left:0; bottom:-1px; width:100%; line-height:0; pointer-events:none; z-index:2; }
.hwh-wave svg { display:block; width:100%; height:64px; }
.hwh-hero-inner { position:relative; z-index:1; max-width:640px; }
.hwh-hero .h1 { font-size:clamp(38px,5vw,62px); margin-bottom:20px; }
.hwh-hero .lead { margin:0 auto 32px; }
.scroll-hint { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.scroll-arr { width:30px; height:30px; border:1.5px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; animation:bounce 2s ease-in-out infinite; font-size:12px; }
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

/* step bar */
.step-bar { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:56px; }
.sb-step { display:flex; flex-direction:column; align-items:center; gap:7px; }
.sb-circle {
  width:42px; height:42px; border-radius:50%; background:#fff;
  border:2px solid var(--border); display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:700; color:var(--muted);
  transition:all .35s; cursor:pointer;
}
.sb-circle.on { background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 0 0 6px rgba(13,31,92,.1); }
.sb-circle.done { background:var(--mint); border-color:var(--mint); color:var(--navy); }
.sb-label { font-size:10px; font-weight:600; color:var(--muted); text-align:center; max-width:70px; line-height:1.3; transition:color .3s; }
.sb-label.on { color:var(--navy); }
.sb-line { flex:1; height:2px; background:var(--border); max-width:90px; transition:background .4s; }
.sb-line.done { background:var(--mint); }

/* map card */
.map-card { background:#fff; border-radius:20px; border:1px solid var(--border); box-shadow:0 12px 48px var(--shadow); overflow:hidden; }
.map-topbar { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; background:var(--bg); }
.map-topbar-title { font-size:12px; font-weight:600; color:var(--navy); }
.map-kvk { background:var(--mint-bg); color:#0d856e; font-size:10px; font-weight:700; padding:3px 10px; border-radius:100px; border:1px solid var(--mint2); }

/* prov styles */
.pv { fill:#c8deff; stroke:#fff; stroke-width:1.5; cursor:pointer; transition:fill .25s; }
.pv:hover { fill:#93c5fd; }
.pv.zh { fill:var(--mint); animation:zhp 2.5s ease-in-out infinite; }
@keyframes zhp { 0%,100%{fill:#3dd9be;} 50%{fill:#a8f0e4;} }
.zh-dist { fill:#c8e6ff; stroke:#fff; stroke-width:1; cursor:pointer; transition:fill .3s; }
.zh-dist:hover { fill:#7dd3fc; }
.zh-dist.rdam { fill:var(--mint); }

/* map dots */
.mdot { position:absolute; width:9px; height:9px; background:var(--navy); border-radius:50%; border:2px solid #fff; animation:mdp 3.5s ease-in-out infinite; }
.mdot.m { background:var(--mint); }
@keyframes mdp { 0%{transform:scale(0);opacity:0;} 15%{transform:scale(1.4);opacity:1;} 80%{transform:scale(1);opacity:1;} 100%{transform:scale(0);opacity:0;} }

.result-pill { display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff; border-radius:12px; padding:13px 20px; margin-top:16px; font-size:14px; font-weight:600; box-shadow:0 4px 20px rgba(13,31,92,.2); }
.result-pill .rn { font-family:'Fraunces',serif; font-size:28px; font-weight:900; color:var(--mint); }
.go-btn { display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff; border-radius:100px; padding:12px 26px; font-size:15px; font-weight:600; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .2s, transform .2s; margin-top:22px; }
.go-btn:hover { background:var(--navy2); transform:translateY(-1px); }

/* donut */
.donut-wrap { position:relative; width:180px; height:180px; }
.donut-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.donut-center .dbig { font-family:'Fraunces',serif; font-size:32px; font-weight:900; color:var(--navy); display:block; line-height:1; }
.donut-center .dsm { font-size:12px; color:var(--muted); }
.dleg { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.dleg-sq { width:14px; height:14px; border-radius:4px; flex-shrink:0; }
.dleg-body { flex:1; }
.dleg-nm { font-size:14px; font-weight:600; color:var(--navy); }
.dleg-sb { font-size:12px; color:var(--muted); }
.dleg-bg { height:5px; background:var(--bg); border-radius:3px; margin-top:5px; overflow:hidden; }
.dleg-fill { height:100%; border-radius:3px; width:0; transition:width .9s ease; }
.dleg-pct { font-family:'Fraunces',serif; font-size:20px; font-weight:900; color:var(--navy); }

/* crm */
.crm-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; }
.crm-hd { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:14px; }
.crm-row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); }
.crm-row:last-child { border-bottom:none; }
.crm-av { width:35px; height:35px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.crm-nm { font-size:13px; font-weight:600; color:var(--navy); }
.crm-inf { font-size:11px; color:var(--muted); }
.crm-badge { margin-left:auto; font-size:10px; font-weight:700; padding:3px 8px; border-radius:100px; }
.warm { background:rgba(61,217,190,.15); color:#0d856e; border:1px solid var(--mint2); }
.cold { background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.unk-box { background:var(--mint-bg); border:1px solid var(--mint2); border-radius:10px; padding:13px; margin-top:13px; }
.unk-title { font-size:12px; font-weight:700; color:#0d856e; margin-bottom:3px; }

/* channels */
.ch-list { background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.ch-row { display:flex; align-items:stretch; border-bottom:1px solid var(--border); transition:background .2s; cursor:pointer; }
.ch-row:last-child { border-bottom:none; }
.ch-row:hover, .ch-row.on { background:var(--mint-bg); }
.ch-left { padding:18px; display:flex; align-items:center; gap:14px; flex:0 0 210px; border-right:1px solid var(--border); }
.ch-ico { width:42px; height:42px; border-radius:10px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; transition:all .2s; }
.ch-row.on .ch-ico { background:var(--mint-bg); border-color:var(--mint2); }
.ch-nm { font-size:14px; font-weight:700; color:var(--navy); }
.ch-reach { font-size:11px; color:#0d856e; font-weight:600; }
.ch-right { flex:1; padding:18px; display:flex; align-items:center; }
.ch-bubble { background:var(--navy); color:#fff; border-radius:10px 10px 10px 2px; padding:11px 14px; font-size:13px; line-height:1.6; max-width:320px; }
.ch-preview-text { font-size:13px; color:var(--muted); line-height:1.6; }
.ch-prev { display:none; }
.ch-prev.on { display:block; animation:fu .3s ease; }

/* preview mocks */
.li-sh { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.li-hd { padding:12px 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); }
.li-av { width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }
.li-nm { font-size:13px; font-weight:600; color:var(--navy); }
.li-ti { font-size:11px; color:var(--muted); }
.li-bd { padding:13px 14px; font-size:13px; line-height:1.7; color:var(--text); }
.li-ac { padding:9px 14px; border-top:1px solid var(--border); display:flex; gap:14px; }
.li-a { font-size:12px; color:var(--muted); cursor:pointer; }
.em-sh { background:var(--bg); border-radius:10px; padding:14px; }
.em-to { font-size:11px; color:var(--muted); margin-bottom:2px; }
.em-sub { font-size:14px; font-weight:700; color:var(--navy); padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:11px; }
.em-bd { font-size:13px; color:var(--text); line-height:1.75; }
.ph-sh { background:var(--bg); border-radius:10px; padding:14px; }
.ph-ln { display:flex; gap:10px; margin-bottom:9px; }
.ph-who { font-size:11px; font-weight:700; color:#0d856e; min-width:40px; padding-top:2px; }
.ph-txt { font-size:13px; color:var(--text); line-height:1.6; }
.in-sh { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.in-hd { padding:9px 13px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); }
.in-av { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#f09433,#dc2743); display:flex; align-items:center; justify-content:center; font-size:13px; }
.in-img { height:100px; background:linear-gradient(135deg,#fef3c7,#fed7aa); display:flex; align-items:center; justify-content:center; font-size:34px; }
.in-bd { padding:11px 13px; font-size:12px; color:var(--text); line-height:1.6; }
.in-tg { color:#0d856e; font-weight:600; }

/* agents hwh */
.afc { background:#fff; border:1.5px solid var(--border); border-radius:14px; overflow:hidden; transition:all .3s; }
.afc.running { border-color:var(--navy); box-shadow:0 8px 32px var(--shadow); }
.afc.done { border-color:var(--mint); }
.afc-h { padding:16px 18px; display:flex; align-items:center; gap:13px; border-bottom:1px solid var(--border); }
.afc-av { width:56px; height:56px; border-radius:50%; background:var(--mint-bg); border:2px solid var(--mint2); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; overflow:hidden; }
.afc-nm { font-family:'Fraunces',serif; font-size:16px; font-weight:700; color:var(--navy); }
.afc-rl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#0d856e; }
.afc-st { margin-left:auto; font-size:11px; font-weight:600; padding:4px 12px; border-radius:100px; background:var(--bg); color:var(--muted); border:1px solid var(--border); transition:all .3s; }
.afc-st.running { background:rgba(61,217,190,.15); color:#0d856e; border-color:var(--mint2); animation:pst 1.5s ease-in-out infinite; }
.afc-st.done { background:rgba(13,31,92,.07); color:var(--navy); border-color:rgba(13,31,92,.15); }
@keyframes pst { 0%,100%{opacity:1;} 50%{opacity:.55;} }
.afc-tasks { padding:12px 18px; display:none; border-bottom:1px solid var(--border); }
.afc.running .afc-tasks, .afc.done .afc-tasks { display:block; }
.afc-task { display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13px; color:var(--muted); border-bottom:1px solid var(--border); }
.afc-task:last-child { border-bottom:none; }
.afc-task.td2 { color:var(--navy); }
.afc-task.ta { color:#0d856e; font-weight:500; }
.afc-ti { width:17px; text-align:center; font-size:12px; flex-shrink:0; }
.afc-out { padding:13px 18px; display:none; background:var(--mint-bg); border-top:1px solid var(--mint2); }
.afc.done .afc-out { display:block; }
.afc-ol { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#0d856e; margin-bottom:6px; }
.afc-oi { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--navy); margin-bottom:3px; }

/* kpi + appts */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.kpi { background:#fff; border-radius:12px; padding:20px; border:1px solid var(--border); text-align:center; }
.kpi-n { font-family:'Fraunces',serif; font-size:36px; font-weight:900; color:var(--navy); line-height:1; }
.kpi-l { font-size:12px; color:var(--muted); margin-top:5px; }
.kpi-d { font-size:11px; font-weight:700; color:#0d856e; margin-top:3px; }
.appts-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:12px; }
.appts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.appt { background:#fff; border-radius:10px; padding:14px; border:1px solid var(--border); opacity:1; transform:none; transition:opacity .4s, transform .4s; }
.appt.sh { opacity:1; transform:translateY(0); }
.appt-dt { font-size:10px; font-weight:700; color:#0d856e; margin-bottom:5px; }
.appt-bz { font-size:13px; font-weight:700; color:var(--navy); }
.appt-tp { font-size:11px; color:var(--muted); margin-top:2px; }
.appt-dots { display:flex; gap:5px; margin-top:8px; }
.appt-dot { width:6px; height:6px; border-radius:50%; background:var(--mint); }
.res-scene { background:var(--bg); border-radius:20px; padding:36px; }

/* FOOTER */
.site-footer { position:relative; background:#6fe0cc; color:var(--navy); margin-top:0; }
.footer-wave { position:absolute; left:0; top:0; width:100%; line-height:0; transform:translateY(-99%); pointer-events:none; z-index:2; }
.footer-wave svg { display:block; width:100%; height:88px; }
.footer-main { max-width:1180px; margin:0 auto; padding:54px 48px 34px; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; padding-bottom:42px; margin-bottom:44px; border-bottom:1px solid rgba(13,31,92,.14); }
.footer-newsletter { flex:1 1 340px; max-width:560px; }
.footer-newsletter h3 { font-family:'Fraunces',serif; font-size:23px; font-weight:800; color:var(--navy); margin:0 0 18px; line-height:1.25; }
.nl-form { display:flex; align-items:center; background:#fff; border-radius:16px; padding:6px 8px 6px 22px; box-shadow:0 8px 24px rgba(9,22,58,.10); max-width:520px; }
.nl-form input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'DM Sans',sans-serif; font-size:16px; color:var(--navy); padding:16px 0; }
.nl-form input::placeholder { color:#8b93ad; }
.nl-form button { border:none; background:#dce6ff; font-family:'DM Sans',sans-serif; font-size:16px; font-weight:600; color:var(--navy); padding:13px 20px; cursor:pointer; border-radius:11px; white-space:nowrap; transition:background .15s; }
.nl-form button:hover { background:#c8d8ff; }
.footer-contact-btn { background:var(--navy); color:#fff; border:none; border-radius:100px; padding:20px 40px; font-family:'DM Sans',sans-serif; font-size:19px; font-weight:500; cursor:pointer; box-shadow:0 10px 26px rgba(9,22,58,.20); transition:transform .15s, background .15s; }
.footer-contact-btn:hover { background:var(--navy2); transform:translateY(-2px); }
/* Op de homepage vervalt de nieuwsbrief-balk: de fotosectie daarboven is de call-to-action */
body.on-home .footer-top { display:none; }
.footer-cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.6fr; gap:40px; align-items:start; margin-bottom:44px; }
.footer-brand { max-width:330px; }
.footer-brand-logo { display:inline-flex; background:#fff; padding:11px 16px; border-radius:13px; box-shadow:0 4px 16px rgba(9,22,58,.08); margin-bottom:20px; }
.footer-brand-logo img { height:26px; width:auto; display:block; }
.footer-brand p { font-size:15px; line-height:1.65; color:#2b3766; margin:0 0 22px; font-weight:400; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:42px; height:42px; border-radius:12px; background:rgba(13,31,92,.07); display:flex; align-items:center; justify-content:center; color:var(--navy); text-decoration:none; transition:background .2s, color .2s, transform .2s; }
.footer-social a:hover { background:var(--navy); color:#fff; transform:translateY(-2px); }
.footer-col h4 { font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700; letter-spacing:.6px; color:var(--navy); margin:0 0 18px; text-transform:uppercase; }
.footer-col a { display:block; font-size:16px; color:#33406b; text-decoration:none; margin-bottom:15px; cursor:pointer; transition:color .15s; }
.footer-col a:hover { color:var(--navy); }
.footer-partners { border-top:1px solid rgba(13,31,92,.14); padding-top:34px; margin-bottom:36px; }
.footer-partners h4 { font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--navy); margin:0 0 18px; }
.fp-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.fp-card { background:#fff; border-radius:10px; padding:8px 14px; display:inline-flex; align-items:center; justify-content:center; min-height:40px; flex:0 0 auto; box-shadow:0 6px 20px rgba(9,22,58,.07); border:1px solid rgba(13,31,92,.04); transition:transform .18s, box-shadow .18s; }
.fp-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(9,22,58,.12); }
.fp-card img { max-width:100%; max-height:17px; width:auto; height:auto; object-fit:contain; display:block; }
.fp-card.fp-lead img { max-height:25px; }
.footer-legal { border-top:1px solid rgba(13,31,92,.14); padding-top:24px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; font-size:14px; color:#33406b; }
.footer-legal a { color:#33406b; text-decoration:none; }
.footer-legal a:hover { color:var(--navy); }
.footer-legal-links { display:flex; gap:22px; flex-wrap:wrap; }
@media(max-width:900px){
  .footer-main{ padding:44px 24px 28px; }
  .footer-top{ flex-direction:column; align-items:stretch; margin-bottom:36px; padding-bottom:32px; }
  .footer-newsletter{ flex:0 0 auto; width:100%; max-width:none; }
  .footer-contact-btn{ width:100%; }
  .footer-cols{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  .footer-brand{ grid-column:1 / -1; max-width:none; }
  .footer-legal{ flex-direction:column; text-align:left; align-items:flex-start; }
}
@media(max-width:560px){
  .footer-cols{ grid-template-columns:1fr; }
}

/* RESPONSIVE */
@media(max-width:900px) {
  nav { padding:14px 20px; }
  .nav-links { display:none; } .nav-social { display:none !important; }
  /* Hamburger menu button (shown only on mobile) */
  .mobile-menu-btn { display:flex !important; }
  .hero { grid-template-columns:1fr; } .hero-right { display:none; }
  .hero-left { padding:100px 24px 64px; }
  .wrap { padding:0 24px; }
  .two, .three, .pain-grid, .anders-cards, .actie-cards, .cases, .testis,
  .tab-panel.on, .agents-grid, .kpi-row, .appts-grid, .agents-intro-grid { grid-template-columns:1fr; }
  .sec { padding:64px 0; }
  .actie-hero, .contact-form { padding:64px 24px; }
      .cf-2col { grid-template-columns:1fr; gap:28px; }
  .pg-dots { display:none; }
  .ch-left { flex:auto; border-right:none; border-bottom:1px solid var(--border); }
  .ch-row { flex-direction:column; }
  .quote-wrap { padding:36px 28px; }

  /* ── Header: houd subpagina-headers vrij van de vaste navigatiebalk ── */
  [id^="page-sector-"] .wrap[style*="padding-top:80px"] { padding-top:96px !important; padding-bottom:40px !important; }
  /* Ruimte tussen de sector-intro en de eerste case (globale .wrap !important nult die anders weg) */
  [id^="page-sector-"] .wrap[style*="padding-top:40px"] { padding-top:32px !important; }
  /* Succesverhalen-hero: herstel bovenruimte (een globale .wrap !important-regel nult die weg) zodat de titel onder de vaste nav valt */
  #page-resultaten .wrap[style*="padding-top:140px"],
  #page-actie .wrap[style*="padding-top:140px"] { padding-top:104px !important; padding-bottom:84px !important; }

  /* ── Footer-golf: reserveer ruimte onderaan zodat de golf niet over content valt ── */
  .page { padding-bottom:104px; }
  /* Homepage: hero is een full-bleed beeld; golf mag hier direct over het beeld vallen (geen witruimte) */
  #page-home { padding-bottom:0; }

  /* ── Mobile fixes for inline grids ── */
  /* Resultaten landing: sector cards 1 column */
  #page-resultaten [style*="grid-template-columns:repeat(3,1fr)"],
  #page-resultaten [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
      #page-resultaten [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  /* Resultaten hero text: less side padding on mobile */
  #page-resultaten section.hero > div[style*="max-width:640px"] {
    padding: 100px 24px 20px !important;
  }
  /* Resultaten background photo: prevent tiling */
  #page-resultaten [style*="background-image"][style*="background-size:cover"] {
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  /* Sector subpages: cases grid 1 column */
  [id^="page-sector-"] [style*="grid-template-columns:repeat(3,1fr)"],
  [id^="page-sector-"] [style*="grid-template-columns: repeat(3, 1fr)"],
  [id^="page-sector-"] [style*="grid-template-columns:repeat(2,1fr)"],
  [id^="page-sector-"] [style*="grid-template-columns: repeat(2, 1fr)"],
  [id^="page-sector-"] [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  /* Sector subpages: KPI rows 3 columns to stay readable, smaller numbers */
  [id^="page-sector-"] [style*="grid-template-columns:repeat(3,1fr);gap:24px"] {
    gap: 12px !important;
  }
  /* Sector page hero: less padding */
  [id^="page-sector-"] > div[style*="padding:120px"] {
    padding: 100px 24px 40px !important;
  }
  /* Sector page case content padding */
  [id^="page-sector-"] [style*="padding:48px 56px"],
  [id^="page-sector-"] [style*="padding:56px 56px"],
  [id^="page-sector-"] [style*="padding:40px 56px"] {
    padding: 32px 24px !important;
  }
  /* Home page background: prevent tiling */
  #page-home [style*="background-image"][style*="background-size:cover"] {
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
  /* Home page hero: less padding on mobile */
  #page-home .hero-left,
  #page-home [class="hero-left"] {
    padding: 100px 24px 60px !important;
  }
  /* Anders/Over ons CTA buttons: stack on mobile */
  #page-anders [style*="display:flex"][style*="gap:14px"][style*="justify-content:center"] {
    flex-direction: column !important;
    align-items: center !important;
  }
  /* Team photos: horizontal scroll on mobile */
  .team-gallery {
    margin-left: -24px;
    margin-right: -24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .team-gallery::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .team-gallery-track {
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 14px !important;
    padding: 0 24px;
    width: max-content;
  }
  .team-photo-card {
    width: 75vw;
    max-width: 320px;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
  /* Actie page card grid */
  .actie-cards { gap: 16px !important; }
}

/* Hamburger menu button: hidden by default, shown on mobile */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1001;
}
.mobile-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  padding: 80px 24px 40px;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: block;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 400;
  color: #33406b;
  text-decoration: none;
  border-radius: 12px;
  transition: background .2s;
}
.mobile-menu a:hover, .mobile-menu a:active { background: var(--bg); }
.mobile-menu a.nav-cta {
  background: var(--navy) !important;
  color: #fff !important;
  text-align: center;
  margin-top: 16px;
}

/* ── CASES ── */
.cases-section { padding:64px 0; background:var(--bg); }
.cases-filter { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.cf-btn { padding:9px 20px; border-radius:100px; border:1.5px solid var(--border); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; background:#fff; transition:all .2s; font-family:"DM Sans",sans-serif; }
.cf-btn.on, .cf-btn:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
.case-expanded { display:none; }
.case-expanded.open { display:block; animation:fu .3s ease; }
.case-toggle { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--navy); background:none; border:none; cursor:pointer; padding:0; margin-top:14px; font-family:"DM Sans",sans-serif; }
.case-toggle:hover { color:var(--mint-dark); }
.case-logo { height:40px; width:auto; object-fit:contain; margin-bottom:16px; }
.case-challenge { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.case-approach { list-style:none; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.case-approach li { font-size:13px; color:var(--text); line-height:1.65; padding:4px 0; display:flex; gap:8px; }
.case-approach li::before { content:"→"; color:var(--mint-dark); font-weight:700; flex-shrink:0; }
.case-quote { background:var(--bg); border-left:3px solid var(--mint); border-radius:0 10px 10px 0; padding:14px 18px; margin-top:14px; }
.case-quote p { font-size:14px; color:var(--navy); line-height:1.7; font-style:italic; margin-bottom:6px; }
.case-quote span { font-size:12px; color:var(--muted); font-weight:600; }

/* ── Tablet (641–900px): kaart-grids in 2 kolommen i.p.v. 1, zodat het niet leeg oogt ── */
@media (min-width:641px) and (max-width:900px) {
  .two, .three, .pain-grid, .anders-cards, .actie-cards, .cases, .testis,
  .agents-grid, .agents-intro-grid { grid-template-columns:repeat(2,1fr) !important; }
  #page-resultaten [style*="grid-template-columns:repeat(3,1fr)"],
  #page-resultaten [style*="grid-template-columns: repeat(3, 1fr)"],
  #page-resultaten [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:repeat(2,1fr) !important; }
  [id^="page-sector-"] [style*="grid-template-columns:repeat(2,1fr);gap:22px"],
  [id^="page-sector-"] [style*="grid-template-columns:repeat(3,1fr);gap:22px"],
  [id^="page-sector-"] [style*="grid-template-columns:repeat(3,1fr);gap:20px"],
  [id^="page-sector-"] [style*="grid-template-columns:repeat(3,1fr);gap:24px"],
  [id^="page-sector-"] [style*="grid-template-columns:repeat(4,1fr);gap:20px"] { grid-template-columns:repeat(2,1fr) !important; }
}


/* ── STAGE LAYOUT FIX ── */
#stage-1, #stage-2, #stage-3, #stage-4 {
  width: 100%;
}
.page#page-hoewerkt .wrap {
  padding: 0 48px;
}
@media (max-width: 900px) {
  #stage-1, #stage-2, #stage-3, #stage-4 {
    grid-template-columns: 1fr !important;
  }
  .s1-head, .s1-body {
    grid-template-columns: 1fr !important;
  }
  .wrap { padding: 0 24px !important; }
  /* Stap 2: CRM-kaart (banner) verder onder de knoppen Terug/Volgende */
  #stage-2 .crm-card { margin-top: 28px; }
}


/* Team member captions */
.team-member { display: flex; flex-direction: column; }
.team-member .team-photo-card { margin-bottom: 16px; }
.team-member-name {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  text-align: center;
}
.team-member-role {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
a.team-member { text-decoration:none; color:inherit; cursor:pointer; }
a.team-member .team-photo-card { transition:transform .28s ease, box-shadow .28s ease; }
a.team-member:hover .team-photo-card { transform:translateY(-6px); box-shadow:0 18px 50px rgba(13,31,92,.20); }
a.team-member:hover .team-member-name { color:#FF9900; transition:color .2s ease; }

/* Contact page responsive */
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}


.nav-social{display:inline-flex;align-items:center;gap:2px;margin-left:6px;}
.nav-ico{display:inline-flex;align-items:center;justify-content:center;padding:7px 8px;color:var(--muted);border-radius:8px;transition:color .2s,background .2s;}
.nav-ico svg{width:19px;height:19px;display:block;}
.nav-ico:hover{color:var(--mint-dark);background:var(--bg);}
.mobile-social{display:flex;gap:18px;justify-content:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--border);}
.mobile-social a{display:inline-flex;align-items:center;justify-content:center;color:var(--navy);padding:0;}
.mobile-social a svg{width:26px;height:26px;display:block;}
.mobile-social a:hover{color:var(--mint-dark);background:transparent;}


/* === privacy === */
.lglp {
    --navy: #0d1f5c;
    --cream: #f1ede6;
    --mint: #3dd9be;
    --orange: #ff9900;
    --ink: #1c2541;
    --muted: #5a6488;
  }
.lglp * { box-sizing: border-box; }
.lglp { scroll-behavior: smooth; }
.lglp {
    margin: 0;
    font-family: "DM Sans", system-ui, sans-serif;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.65;
    font-size: 17px;
  }
.lglp .lp {
    max-width: 780px;
    margin: 0 auto;
    padding: 56px 28px 80px;
  }
.lglp .lcard {
    background: #ffffff;
    border-radius: 24px;
    padding: 56px 56px 64px;
    box-shadow: 0 18px 50px rgba(13,31,92,0.08);
  }
.lglp header {
    text-align: center;
    margin-bottom: 44px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(13,31,92,0.10);
  }
.lglp header img {
    width: 200px;
    height: auto;
    margin-bottom: 28px;
  }
.lglp h1 {
    font-family: "Fraunces", Georgia, serif;
    color: var(--navy);
    font-weight: 600;
    font-size: 38px;
    line-height: 1.1;
    margin: 0 0 10px;
  }
.lglp .updated {
    color: var(--muted);
    font-size: 15px;
    margin: 0;
  }
.lglp .intro {
    font-size: 18px;
    color: var(--ink);
    margin: 0 0 8px;
  }
.lglp h2 {
    font-family: "Fraunces", Georgia, serif;
    color: var(--navy);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    margin: 44px 0 14px;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
.lglp h2 .num {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--mint);
    background: var(--navy);
    border-radius: 8px;
    padding: 4px 10px;
    line-height: 1;
    flex: none;
    transform: translateY(-2px);
  }
.lglp h3 {
    font-family: "DM Sans", sans-serif;
    color: var(--navy);
    font-weight: 700;
    font-size: 17px;
    margin: 26px 0 6px;
  }
.lglp p { margin: 0 0 14px; }
.lglp ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.lglp ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
  }
.lglp ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
  }
.lglp strong { color: var(--navy); font-weight: 700; }
.lglp a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.lglp .contact {
    margin-top: 16px;
    background: var(--cream);
    border-radius: 16px;
    padding: 22px 26px;
    font-size: 16px;
    line-height: 1.8;
  }
.lglp .contact strong { display: block; font-size: 18px; margin-bottom: 2px; }
.lglp .footer-rule {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid rgba(13,31,92,0.10);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
  }

  @media (max-width: 600px) {.lglp .lcard { padding: 32px 22px 40px; border-radius: 18px; }
.lglp .lp { padding: 28px 14px 50px; }
.lglp h1 { font-size: 30px; }
.lglp h2 { font-size: 21px; }
.lglp { font-size: 16px; }}
/* === voorwaarden === */
.lglp {
    --navy: #0d1f5c;
    --cream: #f1ede6;
    --mint: #3dd9be;
    --orange: #ff9900;
    --ink: #1c2541;
    --muted: #5a6488;
  }
.lglp * { box-sizing: border-box; }
.lglp { scroll-behavior: smooth; }
.lglp {
    margin: 0;
    font-family: "DM Sans", system-ui, sans-serif;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    font-size: 16px;
  }
.lglp .lp { max-width: 820px; margin: 0 auto; padding: 56px 28px 80px; }
.lglp .lcard {
    background: #ffffff;
    border-radius: 24px;
    padding: 56px 56px 64px;
    box-shadow: 0 18px 50px rgba(13,31,92,0.08);
  }
.lglp header { text-align: center; margin-bottom: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(13,31,92,0.10); }
.lglp header img { width: 200px; height: auto; margin-bottom: 26px; }
.lglp h1 { font-family: "Fraunces", Georgia, serif; color: var(--navy); font-weight: 600; font-size: 38px; line-height: 1.1; margin: 0 0 10px; }
.lglp .updated { color: var(--muted); font-size: 15px; margin: 0; }
.lglp .intro { font-size: 17px; margin: 0 0 8px; }
.lglp h2 {
    font-family: "Fraunces", Georgia, serif; color: var(--navy); font-weight: 600;
    font-size: 23px; line-height: 1.25; margin: 40px 0 12px;
    display: flex; align-items: baseline; gap: 12px;
  }
.lglp h2 .num {
    font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 14px; color: var(--mint);
    background: var(--navy); border-radius: 8px; padding: 4px 9px; line-height: 1; flex: none; transform: translateY(-2px);
  }
.lglp h3 { font-family: "DM Sans", sans-serif; color: var(--navy); font-weight: 700; font-size: 16px; margin: 22px 0 6px; }
.lglp .bijlage-head {
    font-family: "Fraunces", Georgia, serif; color: var(--navy); font-weight: 600; font-size: 28px;
    margin: 56px 0 6px; padding-top: 40px; border-top: 2px solid var(--mint);
  }
.lglp .bijlage-sub { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 4px; font-weight: 700; }
.lglp p { margin: 0 0 12px; }
.lglp .clause { display: flex; gap: 12px; margin-bottom: 9px; }
.lglp .clause .ref { flex: none; font-weight: 700; color: var(--navy); min-width: 34px; font-variant-numeric: tabular-nums; }
.lglp .clause .txt { margin: 0; }
.lglp ul.romein, .lglp ul.letter { margin: 4px 0 10px; padding-left: 0; list-style: none; }
.lglp ul.romein li, .lglp ul.letter li { position: relative; padding-left: 30px; margin-bottom: 6px; }
.lglp ul.romein li .mk, .lglp ul.letter li .mk { position: absolute; left: 0; font-weight: 700; color: var(--mint); }
.lglp strong { color: var(--navy); font-weight: 700; }
.lglp a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.lglp .kort {
    background: var(--navy); color: #fff; border-radius: 20px; padding: 32px 36px; margin: 0 0 8px;
  }
.lglp .kort h2 { color: #fff; margin: 0 0 16px; }
.lglp .kort h2 .num { background: var(--mint); color: var(--navy); }
.lglp .kort ul { list-style: none; padding: 0; margin: 0; }
.lglp .kort li { position: relative; padding-left: 28px; margin-bottom: 12px; line-height: 1.5; }
.lglp .kort li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); }
.lglp .kort strong { color: var(--mint); }
.lglp .kort a { color: #fff; text-decoration-color: var(--orange); }
.lglp .disclaimer { background: var(--cream); border-radius: 14px; padding: 16px 20px; font-size: 14px; color: var(--muted); margin: 24px 0 8px; }
.lglp .footer-rule { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(13,31,92,0.10); color: var(--muted); font-size: 13px; text-align: center; }

  @media (max-width: 600px) {.lglp .lcard { padding: 32px 22px 40px; border-radius: 18px; }
.lglp .lp { padding: 28px 14px 50px; }
.lglp .kort { padding: 24px 22px; }
.lglp h1 { font-size: 30px; }
.lglp h2 { font-size: 20px; }
.lglp .bijlage-head { font-size: 23px; }
.lglp { font-size: 15px; }
.lglp .clause .ref { min-width: 30px; }}
.lglp{min-height:100vh;}
.lglp .lp{padding-top:104px;}


/* ===== Extra responsive laag voor inline-gestylde secties (succesverhalen, stat-strips, walkthrough) ===== */
/* Tablet */
@media (max-width:1024px){
  [style*="padding:48px 56px"]{ padding:40px 34px !important; }
  [style*="padding:32px 56px"]{ padding:32px 30px !important; }
  [style*="padding:96px 56px"]{ padding:64px 34px !important; }
  [style*="padding:80px 56px"]{ padding:56px 34px !important; }
  [style*="padding:56px 64px"]{ padding:48px 34px !important; }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
}
/* Mobiel */
@media (max-width:640px){
  [style*="padding:48px 56px"]{ padding:30px 20px !important; }
  [style*="padding:32px 56px"]{ padding:24px 18px !important; }
  [style*="padding:96px 56px"],
  [style*="padding:80px 56px"],
  [style*="padding:56px 64px"],
  [style*="padding:56px 56px"],
  [style*="padding:40px 56px"]{ padding:34px 20px !important; }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(2, 1fr)"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
  /* Verticale scheidingslijntjes tussen stat-cijfers worden horizontaal op mobiel */
  [style*="border-right:1px solid rgba(255,255,255,.12)"]{
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    padding-bottom:22px !important; margin-bottom:22px !important;
  }
}

/* ── ARTIKELPAGINA ── */
.art-wrap{max-width:760px;margin:0 auto;padding:140px 24px 90px}
.art-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--navy);
 text-decoration:none;background:var(--bg);padding:8px 16px;border-radius:100px;margin-bottom:30px}
.art-back:hover{background:var(--mint-bg)}
.art-meta{font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--mint-dark);margin-bottom:12px}
.art-wrap h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(30px,4.4vw,46px);line-height:1.14;
 color:var(--navy);font-weight:600;letter-spacing:-.8px;margin-bottom:26px}
.art-body{font-size:17px;line-height:1.75;color:#33406b}
.art-body p{margin:0 0 20px}
.art-body h2{font-family:'Fraunces',Georgia,serif;font-size:26px;color:var(--navy);font-weight:600;margin:38px 0 14px;line-height:1.25}
.art-body h3{font-size:19px;color:var(--navy);font-weight:600;margin:28px 0 10px}
.art-body ul,.art-body ol{margin:0 0 20px 22px}
.art-body li{margin-bottom:8px}
.art-body a{color:var(--mint-dark);text-decoration:underline;text-underline-offset:2px}
.art-body img{max-width:100%;height:auto;border-radius:14px;margin:26px 0;display:block}
.art-body blockquote{border-left:4px solid var(--mint);padding:6px 0 6px 20px;margin:26px 0;color:var(--navy);font-style:italic}
.art-body strong{font-weight:600;color:var(--navy)}
.art-cta{background:var(--navy);color:#fff;border-radius:20px;padding:34px 38px;margin-top:54px}
.art-cta h3{font-family:'Fraunces',Georgia,serif;font-size:23px;font-weight:600;margin-bottom:8px}
.art-cta p{color:#b9c4e8;font-size:15px;margin-bottom:20px}
.art-cta a{display:inline-block;background:var(--mint);color:var(--navy);font-weight:600;font-size:14px;
 padding:12px 26px;border-radius:100px;text-decoration:none}
/* ── BLOGOVERZICHT ── */
.blog-hero{background:var(--bg);padding:140px 24px 56px;text-align:center}
.blog-hero h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(32px,4.6vw,48px);color:var(--navy);font-weight:600;letter-spacing:-.8px}
.blog-hero p{color:var(--muted);font-size:16px;margin-top:12px}
.blog-grid{max-width:1120px;margin:0 auto;padding:54px 24px 90px;display:grid;
 grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:26px 28px;
 display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s;text-decoration:none}
.blog-card:hover{box-shadow:0 14px 40px var(--shadow);transform:translateY(-3px)}
.blog-card .d{font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--mint-dark);margin-bottom:10px}
.blog-card h2{font-size:18px;line-height:1.35;color:var(--navy);font-weight:600;margin-bottom:10px}
.blog-card p{font-size:13.5px;color:var(--muted);line-height:1.6;flex:1}
.blog-card .r{font-size:13px;font-weight:600;color:var(--navy);margin-top:16px}