/* ── 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:16px;
}
.pg-dot {
  width:8px; height:8px; border-radius:50%; background:var(--border);
  border:none; cursor:pointer; transition:all .25s; padding:0; position:relative;
}
/* De stip blijft 8px, maar het aanklikvlak eromheen is 24px - genoeg voor een
   vinger op een aanraakscherm. De afstand tussen de stippen is daarom 16px. */
.pg-dot::before { content:''; position:absolute; left:50%; top:50%;
  width:24px; height:24px; transform:translate(-50%,-50%); }
.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:12px; 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:12px; font-weight:600; color:var(--muted); text-align:center; max-width:84px; 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 h2 { 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 h3 { 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 h3 { 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); }
/* Vaste hoogte in plaats van 'auto': zo staat de ruimte voor het logo al klaar
   voordat het beeld binnen is, en verspringt de voettekst niet bij het scrollen. */
.fp-card img { max-width:100%; height:17px; width:auto; object-fit:contain; display:block; }
.fp-card.fp-lead img { 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:54px 0 0}
.art-cta h2,.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:12.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}

/* ── DIENSTPAGINA ── */
.svc-hero{background:var(--navy);color:#fff;padding:150px 24px 70px;text-align:center}
.svc-hero .eyebrow{font-size:13px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--mint);margin-bottom:14px}
.svc-hero h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(30px,4.6vw,52px);line-height:1.12;
 font-weight:600;letter-spacing:-1px;max-width:820px;margin:0 auto}
.svc-hero p.lead{color:#b9c4e8;font-size:17px;max-width:620px;margin:18px auto 0;line-height:1.65}
.svc-wrap{max-width:760px;margin:0 auto;padding:60px 24px 56px}
.svc-links{max-width:760px;margin:0 auto;padding:48px 24px 90px;border-top:1px solid var(--border)}
.svc-links h2{font-family:'Fraunces',Georgia,serif;font-size:26px;color:var(--navy);font-weight:600;line-height:1.25;margin:0 0 20px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px}
@media(min-width:720px){.svc-grid:has(>:nth-child(2):last-child),
 .svc-grid:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
.svc-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 24px;text-decoration:none;
 display:block;transition:box-shadow .25s,transform .25s}
.svc-card:hover{box-shadow:0 12px 34px var(--shadow);transform:translateY(-3px)}
.svc-card b{display:block;color:var(--navy);font-size:16px;font-weight:600;margin-bottom:6px}
.svc-card span{color:var(--muted);font-size:13.5px;line-height:1.55}

/* ── IN DE MEDIA ── */
.media-sec{max-width:760px;margin:0 auto;padding:0 24px 56px}
.svc-wrap .media-sec{max-width:none;padding:44px 0 0}
.media-sec h2{font-family:'Fraunces',Georgia,serif;font-size:26px;color:var(--navy);font-weight:600;margin-bottom:6px}
.media-sec .sub{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.media-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 24px;text-decoration:none;
 display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.media-card:hover{box-shadow:0 12px 34px var(--shadow);transform:translateY(-3px)}
.media-card .k{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--mint-dark);margin-bottom:9px}
.media-card b{color:var(--navy);font-size:16.5px;font-weight:600;margin-bottom:7px;line-height:1.3}
.media-card span{color:var(--muted);font-size:13.5px;line-height:1.55;flex:1}
.media-card .g{font-size:12.5px;font-weight:600;color:var(--navy);margin-top:14px}

/* ── UITKLAPMENU ONDER OVER ONS ── */
.nav-drop{position:relative;display:inline-block}
.nav-drop>a{cursor:pointer}
.nav-drop-menu{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--border);
 border-radius:14px;box-shadow:0 14px 44px var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);
 transition:opacity .18s,transform .18s,visibility .18s;z-index:950}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-menu a{display:block;padding:9px 14px;font-size:13.5px;color:#33406b;text-decoration:none;border-radius:9px;white-space:nowrap}
.nav-drop-menu a:hover{background:var(--bg);color:var(--navy)}
.mobile-menu .sub{display:block;font-size:14px;color:#5b6c94;padding:7px 0 7px 18px}
@media (max-width:900px){.nav-drop-menu{display:none}}

/* uitklapmenu houdt altijd donkere letters, ook over de donkere hero op de homepage */
.nav-drop-menu a,
body.is-home nav:not(.sc) .nav-drop-menu a,
body.is-home nav .nav-drop-menu a{color:#33406b !important;background:transparent !important}
.nav-drop-menu a:hover,
body.is-home nav:not(.sc) .nav-drop-menu a:hover{color:var(--navy) !important;background:var(--bg) !important}

/* ── FEITENBLOK VACATURE ── */
.vac-feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:38px}
.vac-feiten>div{background:var(--bg);border-radius:14px;padding:16px 20px}
.vac-feiten span{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mint-dark);margin-bottom:5px}
.vac-feiten b{color:var(--navy);font-size:15px;font-weight:600;line-height:1.35}

/* ── 2 sep 2026: stabiel beeld en ruimere tikdoelen ─────────────────────────
   img krijgt op elke pagina width/height mee, zodat de browser de ruimte
   vast kan zetten voordat het beeld binnen is (geen springende pagina).
   Deze regel houdt de verhouding goed als het beeld smaller wordt gerekend.
   Elementselector: elke bestaande .class-regel wint hier nog steeds van. */
img{max-width:100%;height:auto}

/* Vingers zijn breder dan een muisaanwijzer: op telefoon en tablet krijgen
   de links in de voettekst een aanraakvlak van ruim 40px hoog. */
@media (max-width:900px){
  .footer-col a{padding:11px 0;margin-bottom:0}
  .footer-legal a{display:inline-block;padding:9px 0}
  .footer-legal-links{gap:22px}
}