/* Santos Recherchebureau — huisstijl: navy / wit / goud, consistent met santos-recherchebureau.nl */
:root{
  --navy:#132A4C;
  --navy-dark:#0B1930;
  --navy-mid:#1C3A63;
  --gold:#B08D57;
  --gold-light:#D8C7A6;
  --accent:#B5653E; /* warme terracotta: tweede accent voor iconen/markeringen */
  --accent-ink:#9A4F2C;
  --gold-ink:#8A6B3D; /* darkened gold — meets 4.5:1 contrast on white/light backgrounds; use --gold/--gold-light on dark (navy) backgrounds instead */
  --bg:#FFFCF7;
  --bg-alt:#F7F2E9;
  --bg-panel:#F1EADD;
  --bg-card:#FFFFFF; /* subtle tint so white-section cards read as distinct blocks, not just a hairline border */
  --text:#20242C;
  --text-muted:#576072;
  --border:#DDD2BD;
  --success:#2F6F4E;
  --radius:6px;
  --maxw:1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Alleen voor h1/h2 (zie regel hieronder): een systeem-serif-stack, geen
     externe font-request. Geeft koppen een "dossier/case file"-karakter dat
     onderscheidt van het generieke sans-serif corporate-sjabloon, zonder
     performance- of privacy-kosten (geen Google Fonts-verzoek nodig). */
  --font-heading: "Poppins", var(--font);
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif", serif;
}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-600.woff2") format("woff2");}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
}
img{max-width:100%;display:block;}
/* Standaard: links binnen lopende tekst krijgen een onderstreping, zodat ze
   niet enkel op kleur te onderscheiden zijn van omringende tekst (dit was
   op mobiel nauwelijks zichtbaar, want geen hover-status beschikbaar).
   Nav, footer, knoppen en kaarten hebben al een eigen visuele aanwijzing
   (menupositie, knopvorm, kaartrand) en blijven daarom zonder onderstreping. */
a{color:var(--navy-mid);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:rgba(28,58,99,.4);transition:color .2s ease, background-color .2s ease, border-color .2s ease, text-decoration-color .2s ease;}
a:hover{text-decoration-color:currentColor;}
/* Inline tekstknop die zich (o.a. in de privacyverklaring) als een gewone
   link binnen lopende tekst moet gedragen, maar geen <a href> kan zijn omdat
   er geen eigen URL is -- roept i.p.v. daarvan santosOpenCookiePrefs() aan. */
.link-btn{background:none;border:none;padding:0;margin:0;font:inherit;cursor:pointer;color:var(--navy-mid);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:rgba(28,58,99,.4);}
.link-btn:hover{text-decoration-color:currentColor;}
nav a, footer.site-footer a, .btn, .card{text-decoration:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--navy);line-height:1.3;margin:0 0 16px;font-weight:600;}
/* Grote koppen (h1/h2 = paginatitels en sectiekoppen) krijgen de serif
   display-stack; h3/h4 (kaarttitels, subkopjes) blijven sans-serif voor
   dichtheid/scanbaarheid in grids. */
h1{font-size:2.1rem;letter-spacing:-.005em;}
h2{font-size:1.5rem;margin-top:2.4rem;}
h3{font-size:1.2rem;margin-top:1.6rem;}
p{margin:0 0 16px;}
ul,ol{margin:0 0 16px;padding-left:22px;}
li{margin-bottom:8px;}
.muted{color:var(--text-muted);}
.kicker{
  display:inline-block;
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-ink); /* dark-enough gold for 4.5:1 contrast on white/light section backgrounds */
  font-weight:800;
  margin-bottom:12px;
  /* "Dossier tab"-behandeling: een dunne onderlijn i.p.v. kale gekleurde
     tekst, zodat het label leest als een documentlabel/tabblad in plaats
     van een generiek eyebrow-tekstje. */
  padding-bottom:5px;
  border-bottom:1px solid rgba(138,107,61,.35);
}
.hero .kicker, .cta-band .kicker{color:var(--gold-light);border-bottom-color:rgba(216,199,166,.35);} /* lighter gold reads correctly on the dark navy hero/CTA background */

/* Skip link */
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100;
}
.skip-link:focus{left:8px;top:8px;}

/* Topbar */
.topbar{background:var(--navy-dark);color:#cfd6e2;font-size:.78rem;padding:3px 0;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
.topbar a{color:#cfd6e2;}
.lang-dd-li{display:flex;align-items:center;margin-left:6px;}
.lang-dd{position:relative;}
.lang-dd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;box-sizing:border-box;height:36px;padding:0 10px;line-height:1.2;border:1px solid rgba(255,255,255,.35);border-radius:6px;color:#e7ebf3;}
.lang-dd summary::-webkit-details-marker{display:none;}
.lang-dd summary:hover,.lang-dd[open] summary{background:rgba(255,255,255,.08);}
.lang-dd summary svg:first-child{border-radius:2px;display:block;}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:var(--radius);box-shadow:0 12px 30px rgba(0,0,0,.18);padding:8px;min-width:170px;z-index:60;}
nav.primary .lang-menu a,.lang-menu .lang-unavailable{display:flex;align-items:center;gap:10px;padding:9px 12px;color:var(--navy);font-size:.92rem;font-weight:600;border-radius:4px;}
nav.primary .lang-menu a:hover{background:var(--bg-alt);}
.lang-menu a.active{background:var(--bg-alt);}
.lang-menu .lang-unavailable{opacity:.45;cursor:not-allowed;}
.lang-menu svg{flex:none;border-radius:2px;display:block;}
@media(max-width:900px){.lang-dd-li{margin:8px 0 0;}.lang-menu{position:static;box-shadow:none;margin-top:6px;}}
.topbar-contact{display:inline-flex;align-items:center;gap:16px;}
.topbar-contact a{display:inline-flex;align-items:center;gap:6px;}
.topbar-contact .icon-svg{color:var(--gold);}
.topbar-contact .tb-wa svg{width:14px;height:14px;color:#4ADE80;}
.topbar-contact .tb-li svg{color:#cfd6e2;}
.topbar-contact a:hover{color:#fff;text-decoration:none;}
.topbar-contact .tb-li:hover svg{color:#fff;}
@media(max-width:520px){.topbar-contact .tb-wa span{display:none;}}
.topbar .lang-switch a,.topbar .lang-switch .lang-unavailable{display:inline-flex;align-items:center;gap:5px;}
.topbar .lang-switch a{color:#cfd6e2;margin-left:10px;font-weight:600;}
.topbar .lang-switch a.active{color:#fff;text-decoration:underline;}
.topbar .lang-switch .lang-unavailable{color:rgba(207,214,226,.35);margin-left:10px;font-weight:600;cursor:not-allowed;}
.topbar .lang-switch svg{border-radius:2px;flex:none;display:block;}
.topbar .lang-switch .lang-unavailable svg{opacity:.5;}
/* Op mobiel kost de POB/KvK/adres-regel kostbare ruimte boven de vouw, terwijl
   telefoon/WhatsApp en taalkeuze de acties zijn die er echt toe doen. Die
   vergunning-/adresgegevens staan al in de footer, dus verbergen we ze hier
   onder de 600px-grens i.p.v. ze te laten wikkelen naar een tweede regel. */
@media (max-width:600px){.topbar-legal{display:none;}}
/* Op mobiel staat de sticky header nu naast de vaste bel/WhatsApp-balk
   onderaan (zie .mobile-cta-bar) — de zichtbare pagina-inhoud wordt dus van
   twee kanten ingeklemd. Deze regel maakt de topbar en de header zelf iets
   compacter, zonder de tap-target van de hamburgerknop (min-height:44px,
   WCAG-ondergrens) te verkleinen: alleen de padding eromheen krimpt. */
@media (max-width:600px){.topbar{padding:4px 0;}}

/* Header / nav */
header.site-header{background:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.scroll-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);pointer-events:none;}
.scroll-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),#D9895F);transform:scaleX(0);transform-origin:0 50%;will-change:transform;}
/* padding-top/-bottom i.p.v. de "padding" shorthand: .nav-wrap zit op hetzelfde
   element als .container ("container nav-wrap"), en de shorthand zou anders
   .container's padding:0 24px (de horizontale marge) volledig overschrijven
   in plaats van ermee te combineren, waardoor logo/menu tegen de randen
   plakken zonder zijmarge. */
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px;position:relative;min-height:40px;}
/* Eén logobeeld (icoon + "santos."-woordmerk zit al in de afbeelding gebakken),
   geen aparte bedrijfsnaam-tekst ernaast of eronder in de header zelf. */
.logo{display:flex;align-items:center;color:#fff;line-height:0;}
.logo-mark{height:40px;width:auto;display:block;}
.logo:hover{text-decoration:none;}
@media (max-width:600px){.logo-mark{height:36px;}}
nav.primary{display:flex;align-items:center;gap:2px;}
nav.primary > ul{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0;}
nav.primary > ul > li{display:flex;align-items:center;margin:0;}
nav.primary > ul > li > a{display:flex;align-items:center;gap:4px;line-height:1.2;padding:10px 12px;}
nav.primary li{position:relative;}
nav.primary a{color:#e7ebf3;padding:8px 12px;display:block;font-size:.93rem;border-radius:4px;}
nav.primary a:hover{background:rgba(255,255,255,.08);text-decoration:none;}
nav.primary .has-sub:hover .submenu,
nav.primary .has-sub:focus-within .submenu{display:block;}
.submenu{
  display:none;position:absolute;top:100%;left:0;background:#fff;min-width:280px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);border-radius:var(--radius);padding:8px;list-style:none;margin:0;
  /* No margin-top gap on purpose: a gap between the trigger link and this menu
     breaks :hover continuity (moving the cursor straight down would exit the
     hoverable area before reaching the menu, closing it prematurely). The
     visual breathing room is added via padding-top instead, which stays inside
     the hoverable box. */
  padding-top:14px;
}
.submenu li a{color:var(--navy);padding:9px 12px;font-size:.9rem;border-radius:4px;}
.submenu li a:hover{background:var(--bg-alt);}
.submenu li .svc-desc{display:block;font-size:.76rem;color:var(--text-muted);font-weight:400;margin-top:2px;}
.nav-cta{background:rgba(176,141,87,.16);color:var(--gold-light)!important;border:1px solid var(--gold);box-sizing:border-box;height:36px;padding:0 16px!important;border-radius:6px;font-weight:600;font-size:.9rem;}
.nav-cta:hover{background:var(--gold)!important;color:var(--navy-dark)!important;}

/* Mobile nav toggle */
.nav-toggle{display:none;}
@media (max-width:900px){
  /* nav.primary komt ná .nav-toggle in de DOM (voor toegankelijke tab-volgorde),
     maar blijft normaal ook gewoon een flex-kind van .nav-wrap. Zonder deze regel
     telt het lege <nav> element (met alleen een display:none <ul> erin) toch mee
     als derde flex-item in de justify-content:space-between-rij, waardoor de
     hamburger-knop in het midden komt te staan i.p.v. tegen de rechterrand.
     display:none op nav.primary zelf haalt het volledig uit de flex-rij; zodra
     het menu open is (.open) wordt het weer getoond, maar dan als losstaand
     position:absolute-paneel, dus dat beïnvloedt de flex-rij niet meer. */
  .nav-wrap{padding-top:8px;padding-bottom:8px;}
  nav.primary{display:none;}
  nav.primary > ul{display:none;}
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;
    padding:8px 14px;border-radius:4px;line-height:1;cursor:pointer;min-height:44px;
    transition:background-color .2s ease, border-color .2s ease;
  }
  .nav-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);}
  nav.primary.open{
    display:block;
    position:absolute;top:100%;left:0;right:0;background:var(--navy);
    box-shadow:0 16px 30px rgba(0,0,0,.3);max-height:calc(100vh - 60px);overflow-y:auto;
  }
  nav.primary.open > ul{display:flex;flex-direction:column;gap:0;padding:6px 16px 20px;margin:0;}
  nav.primary.open li{width:100%;}
  nav.primary a{padding:13px 8px;min-height:44px;box-sizing:border-box;}
  nav.primary.open > ul > li > a.nav-cta{display:flex;align-items:center;justify-content:center;width:100%;height:48px;min-height:48px;padding:0 16px!important;margin-top:14px;font-size:1rem;text-align:center;}
  nav.primary.open > ul > li{display:block;margin:0;}
  nav.primary.open > ul{padding-bottom:96px;}
  .submenu li a{padding:12px 14px;}
  .submenu li .svc-desc{color:rgba(255,255,255,.72);font-size:.8rem;line-height:1.4;}
  nav.primary.open > ul > li.lang-dd-li{display:block;margin:12px 0 0;}
  nav.primary.open .lang-dd summary{height:44px;padding:0 14px;display:inline-flex;}
  .has-sub > a{display:flex;align-items:center;justify-content:space-between;}
  .submenu{position:static;box-shadow:none;display:none;min-width:0;width:100%;margin:2px 0 6px;border:1px solid rgba(255,255,255,.12);background:var(--navy-mid);border-radius:6px;}
  .submenu li a{color:#fff;}
  .submenu li a:hover{background:rgba(255,255,255,.08);}
  .has-sub.sub-open > .submenu{display:block;}
}

/* Hero */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-mid) 100%);color:#fff;padding:56px 0 64px;}
.hero.hero-photo{position:relative;overflow:hidden;isolation:isolate;}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hx,50%) var(--hy,30%);z-index:-2;}
.hero-ov{position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg, rgba(11,25,48,.80) 0%, rgba(19,42,76,.64) 55%, rgba(11,25,48,.84) 100%);}
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1040px;margin:0 auto;}
.card.aud-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;text-decoration:none;color:inherit;}
.aud-card .icon{margin:0;flex:0 0 auto;}
.aud-card h3{font-size:1.02rem;margin:0 0 4px;}
.aud-card p{margin:0 0 8px;font-size:.93rem;line-height:1.5;}
@media(max-width:860px){.aud-grid{grid-template-columns:1fr;}}
.hero.hero-compact{padding:36px 0 40px;--hx:62%;}
@media(min-width:900px){.hero.hero-compact{--hx:50%;}}
@media(max-width:600px){.hero.hero-compact{padding:28px 0 32px;--hx:64%;}}
.hero h1{color:#fff;}
.updated-on{margin:-6px 0 14px;font-size:.88rem;color:#c9d2e3;}
.sources{margin-top:28px;padding-top:18px;border-top:1px solid var(--border);}
.sources h2{font-size:1.1rem;margin:0 0 8px;}
.sources ul{margin:0;padding-left:20px;}
.sources li{margin:4px 0;font-size:.95rem;}
.check-steps li{margin:0 0 16px;line-height:1.55;}
.hero .lead{font-size:1.15rem;color:#dfe4ee;max-width:760px;}
.hero-more-btn{display:none;}
@media(max-width:600px){
  .hero-collapse:not(.open) .lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .hero-collapse:not(.open) .direct-answer{display:none;}
  .hero-more-btn{display:inline-block;background:none;border:0;color:var(--gold-light);font:inherit;font-weight:700;text-decoration:underline;padding:4px 0 16px;cursor:pointer;min-height:44px;}
}
.breadcrumbs{font-size:.8rem;color:#b9c2d6;margin-bottom:18px;}
.breadcrumbs a{color:#b9c2d6;}
.breadcrumbs a:hover{color:#fff;}

/* Direct answer box (GEO) */
.direct-answer{
  background:#fff;color:var(--text);border-left:5px solid var(--gold);
  border-radius:var(--radius);padding:20px 22px;margin:22px 0 0;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.direct-answer .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-ink);font-weight:800;display:block;margin-bottom:6px;}
.direct-answer p{margin:0;font-size:1.02rem;}

/* Buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:4px;font-weight:700;font-size:.95rem;cursor:pointer;border:2px solid transparent;}
.btn-primary{background:var(--gold);color:var(--navy-dark);}
.btn-primary:hover{background:var(--gold-light);text-decoration:none;}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.btn-outline:hover{background:rgba(255,255,255,.1);text-decoration:none;}
.btn-outline-dark{background:transparent;color:var(--navy);border-color:var(--navy);}
.btn-outline-dark:hover{background:var(--bg-alt);text-decoration:none;}
.btn-whatsapp{background:transparent;color:#4ADE80;border-color:#4ADE80;display:inline-flex;align-items:center;gap:8px;}
.btn-whatsapp:hover{background:rgba(74,222,128,.12);color:#4ADE80;text-decoration:none;}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}

/* Sections */
main{display:block;}
.section{padding:52px 0;}
.section.alt{background:var(--bg-alt);}
.section.pan{background:var(--bg-panel);}
.section.wht{background:#EDF1F7;}
.section-head{max-width:720px;margin-bottom:28px;}

/* Cards grid */
.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){.grid-3{grid-template-columns:1fr 1fr;}.grid-2{grid-template-columns:1fr;}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr;}}

.card{
  display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;
  box-shadow:0 1px 3px rgba(19,42,76,.05);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  position:relative;overflow:hidden;
}
/* Gevouwen-hoek accent (dossier/map-motief): een subtiele gouden wig in de
   rechterbovenhoek van elke kaart, i.p.v. het kale rechthoekige kaartje dat
   elk corporate-sjabloon gebruikt. Puur decoratief, geen impact op layout. */
.card::before{
  content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-style:solid;border-width:0 22px 22px 0;
  border-color:transparent rgba(176,141,87,.16) transparent transparent;
  transition:border-color .2s ease;pointer-events:none;
}
a.card{cursor:pointer;}
a.card:hover{box-shadow:0 10px 24px rgba(19,42,76,.1);transform:translateY(-2px);border-color:var(--gold);text-decoration:none;}
a.card:hover::before{border-color:transparent rgba(176,141,87,.34) transparent transparent;}
.card h3{margin-top:0;font-size:1.08rem;}
.card .card-link{font-weight:700;font-size:.88rem;color:var(--navy-mid);display:inline-flex;align-items:center;gap:4px;}
.card .icon{margin-bottom:10px;color:var(--accent);}
/* Fototegel-variant van de kaart (vooralsnog alleen particuliere diensten,
   zie SERVICE_CARD_PHOTOS): foto bleedt naar de kaartranden, icoon komt
   terug als een klein rond badge dat half over de foto/tekst-grens hangt. */
.card-photo{position:relative;margin:-23px -23px 20px;}
.icon-badge-photo{
  position:absolute;left:16px;bottom:-16px;z-index:1;
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(11,25,48,.25);
  border:3px solid var(--bg-card);
}
.card .icon .icon-svg{display:block;}
.icon-svg{vertical-align:middle;}
.i-arrow{vertical-align:-2px;margin-left:1px;transition:transform .2s ease;}
a.card:hover .i-arrow, .card-link:hover .i-arrow{transform:translateX(3px);}
.i-chevron{vertical-align:-2px;margin-left:2px;}
.icon-badge{display:inline-flex;}

/* Steps */
.steps{counter-reset:step;list-style:none;padding:0;display:grid;gap:18px;grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.steps{grid-template-columns:1fr;}}
.steps li{counter-increment:step;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 18px;position:relative;box-shadow:0 1px 3px rgba(19,42,76,.05);}
.steps li::before{
  content:counter(step);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;margin-bottom:12px;
  position:relative;z-index:1;
}
/* Verbindingslijn tussen de genummerde stappen — "reis"-gevoel. Alleen op de
   desktop 4-koloms layout: bij 2- of 1-koloms (mobiel) zou een horizontale
   lijn tussen kaarten die niet meer naast elkaar staan verwarrend ogen. */
.steps li:not(:last-child)::after{
  content:"";position:absolute;top:39px;left:56px;
  width:calc(100% - 56px + 18px);height:2px;background:var(--border);z-index:0;
}
@media (max-width:860px){.steps li::after{display:none;}}

/* Tables */
table{width:100%;border-collapse:collapse;margin:18px 0 26px;background:#fff;}
caption{text-align:left;font-weight:700;color:var(--navy);margin-bottom:8px;}
th,td{border:1px solid var(--border);padding:11px 14px;text-align:left;font-size:.92rem;}
th{background:var(--navy);color:#fff;font-weight:700;}
tr:nth-child(even) td{background:var(--bg-alt);}
.table-note{font-size:.82rem;color:var(--text-muted);margin-top:-14px;}
.voorwaarden-meta{font-size:.85rem;color:var(--text-muted);line-height:1.6;margin:0 0 28px;padding-bottom:18px;border-bottom:1px solid var(--border);}

/* Kosten-calculator (interactieve richtprijs-tool) */
.cost-calc{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:0 1px 3px rgba(19,42,76,.05);}
.cost-calc-step label{display:block;font-weight:700;font-size:.88rem;color:var(--navy);margin-bottom:6px;}
.cost-calc-step select{
  width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text);
  font-size:.95rem;font-family:inherit;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576072' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.cost-calc-step select:disabled{color:var(--text-muted);cursor:not-allowed;}
.cost-calc-step select:focus{outline:2px solid var(--gold);outline-offset:1px;}
.cost-calc-result{
  margin-top:22px;background:#fff;border-left:5px solid var(--gold);border-radius:var(--radius);
  padding:20px 22px;box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.cost-calc-result .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-ink);font-weight:800;display:block;margin-bottom:6px;}
.cost-calc-price{font-size:1.6rem;font-weight:800;color:var(--navy);}
.cost-calc-note{margin:6px 0 0;color:var(--text-muted);font-size:.92rem;}
.cost-calc-result .btn-row{margin-top:16px;}
.cost-calc-more{margin:12px 0 0;font-size:.88rem;}
.cost-calc-more a{font-weight:700;display:inline-flex;align-items:center;gap:4px;}
@media (max-width:600px){.cost-calc{padding:20px;}}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);padding:18px 0;}
.faq-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;}
.faq-jump a{display:inline-block;background:var(--bg-panel);color:var(--navy);font-size:.82rem;font-weight:700;padding:6px 14px;border-radius:20px;text-decoration:none;border:1px solid var(--border);}
.faq-jump a:hover,.faq-jump a:focus-visible{background:var(--gold);color:#fff;border-color:var(--gold);}
.faq-item h3{margin:0 0 8px;font-size:1.02rem;}
.faq-item p{margin:0;color:var(--text-muted-)}

/* Signal / checklist list */
.check-list{list-style:none;padding:0;}
.check-list li{padding-left:30px;position:relative;}
.check-list li::before{
  content:"";position:absolute;left:0;top:3px;width:17px;height:17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F4E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;
}

/* Trust bar */
.trust-bar{background:var(--navy-dark);color:#cfd6e2;padding:18px 0 0;}
.trust-bar > .container{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:18px;}
.trust-bar .muted,footer.site-footer .muted{color:#aab3c8;}
.trust-bar a{color:var(--gold-light);text-decoration-color:rgba(216,199,166,.55);}
.trust-bar a:hover{color:#fff;}
/* Badges/inline links op de donkere footer/trust-bar-achtergrond die géén
   onderdeel zijn van een duidelijke linklijst (zoals de POB/BPOB-badges en de
   KvK-vermelding) hadden anders vrijwel dezelfde kleur als de omringende
   niet-klikbare tekst -- functioneel een link, maar niet als zodanig te
   herkennen. Goud (--gold-light, elders al het accentkleur voor interactie)
   + onderstreping maakt ze duidelijk onderscheidend, zonder de bestaande
   footer-linklijsten (die wél een evidente lijst-context hebben) aan te
   passen. */
a.badge{color:var(--gold-light);text-decoration:underline;text-decoration-color:rgba(216,199,166,.55);}
a.badge:hover{color:#fff;background:rgba(255,255,255,.12);}
.footer-inline-link{color:var(--gold-light) !important;text-decoration:underline;text-decoration-color:rgba(216,199,166,.55);}
.footer-inline-link:hover{color:#fff !important;}
.trust-bar .grid{grid-template-columns:repeat(4,auto);justify-content:space-between;align-items:center;font-size:.82rem;gap:16px 24px;}
.trust-item{display:flex;align-items:center;gap:10px;text-align:left;line-height:1.35;}
.trust-item .icon-svg{flex:none;color:var(--gold-light);}
@media (max-width:1000px){.trust-bar .grid{grid-template-columns:1fr 1fr;justify-content:stretch;}}
@media (max-width:600px){.trust-bar .grid{font-size:.76rem;gap:14px 12px;}.trust-item{align-items:flex-start;gap:8px;}.trust-item .icon-svg{width:18px;height:18px;margin-top:1px;}}

/* Credential logo strip */
.logo-strip-wrap{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;}
.logo-strip-label{text-align:center;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0 0 16px;}
/* Op breedere schermen passen alle logo's gewoon op één rij: gecentreerd en
   statisch, geen beweging nodig. .logo-strip-set is dan display:contents,
   zodat de losse logo's meedoen in de wrap-layout van de ouder; de dubbele
   (aria-hidden) set blijft verborgen. Pas als het niet meer past (zie
   media query hieronder) wordt dit een doorlopend, naadloos carousel. */
.logo-strip-viewport{overflow:hidden;}
.logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px;}
.logo-strip-set{display:contents;}
.logo-strip-set[aria-hidden="true"]{display:none;}
.logo-strip img{height:34px;width:auto;transition:transform .2s ease;}
.logo-strip img:hover{transform:translateY(-1px);}
@keyframes logo-strip-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:900px){
  .logo-strip-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
  .logo-strip{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:logo-strip-scroll 22s linear infinite;}
  .logo-strip:hover, .logo-strip:focus-within{animation-play-state:paused;}
  .logo-strip-set{display:flex;align-items:center;gap:26px;flex:0 0 auto;padding-right:26px;}
  .logo-strip-set[aria-hidden="true"]{display:flex;}
  .logo-strip img{height:26px;}
}
@media (max-width:900px) and (prefers-reduced-motion: reduce){
  .logo-strip{animation:none;width:auto;flex-wrap:wrap;justify-content:center;}
  .logo-strip-set{padding-right:0;}
  .logo-strip-set[aria-hidden="true"]{display:none;}
}

/* Reviews */
.star-icon{vertical-align:middle;}
.star-filled{color:var(--gold);}
.star-empty{color:#d8dce3;}
.google-g-icon{vertical-align:-3px;margin-right:5px;}
.review-badge{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none;color:var(--text);margin-top:4px;}
.review-badge:hover{text-decoration:none;}
.review-badge-qualifier{font-weight:800;color:var(--navy);}
.review-badge-stars{display:inline-flex;}
.review-badge-count{color:var(--text-muted);font-size:.92rem;}
.review-badge-google{display:inline-flex;align-items:center;font-weight:700;color:var(--text);}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
.review-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 3px rgba(19,42,76,.05);position:relative;overflow:hidden;}
/* Grote serif aanhalingsteken in de hoek -- editorial/dossier-annotatie
   i.p.v. een kaal kaartje, sluit aan bij de serif-koppen elders. Decoratief:
   geen invloed op leesbaarheid van de recensietekst zelf. */
.review-card::before{
  content:"\201C";font-family:var(--font-display);font-size:3rem;line-height:1;
  color:var(--gold-light);position:absolute;top:2px;right:14px;pointer-events:none;
}
.review-stars{display:flex;gap:2px;position:relative;}
.review-text{margin:0;color:var(--text);font-size:.92rem;line-height:1.55;flex:1;}
.review-meta{margin:0;font-size:.82rem;color:var(--text-muted);font-weight:700;}
@media (max-width:860px){.review-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.review-grid{grid-template-columns:1fr;}}
.rev-carousel{position:relative;}
.rev-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;margin-top:8px;}
.rev-track::-webkit-scrollbar{display:none;}
.rev-track .review-card{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;box-sizing:border-box;}
@media (max-width:860px){.rev-track .review-card{flex-basis:calc((100% - 20px)/2);}}
@media (max-width:600px){.rev-track .review-card{flex-basis:100%;}}
.svc-more{grid-column:1/-1;min-width:0;display:block;}
.svc-more .rev-track{margin-top:0;}
.svc-more .rev-track>.card{flex:0 0 calc((100% - 60px)/3.25);scroll-snap-align:start;box-sizing:border-box;}
@media (max-width:900px){.svc-more .rev-track>.card{flex-basis:calc((100% - 40px)/2.25);}}
.svc-more-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:6px 2px 4px;}
.svc-more-title{font-family:var(--font-heading,inherit);font-weight:700;color:var(--navy);font-size:1.05rem;}
.rev-count{font-size:.88rem;color:var(--text-muted,#6b7385);font-variant-numeric:tabular-nums;white-space:nowrap;}
.svc-more .rev-nav{position:static;display:flex;justify-content:center;margin:12px 0 0;pointer-events:none;}
.svc-more .rev-dots{pointer-events:auto;}
.svc-more .rev-nav[hidden]{display:none;}
.svc-more .rev-btn{position:absolute;top:105px;width:46px;height:46px;pointer-events:auto;background:#fff;box-shadow:0 4px 14px rgba(11,25,48,.25);font-size:1.7rem;border-color:transparent;}
.svc-more .rev-prev{left:-18px;}
.svc-more .rev-next{right:-18px;}
@media (max-width:1100px){.svc-more .rev-prev{left:-6px;}.svc-more .rev-next{right:-6px;}}
@media (min-width:601px){
  .svc-more-mob .rev-track{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible;padding:0;margin-top:0;}
  .svc-more-mob .rev-track>.card{flex:none;}
  .svc-more-mob .svc-more-head,.svc-more-mob .rev-nav{display:none;}
}
@media (min-width:601px) and (max-width:860px){.svc-more-mob .rev-track{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.svc-more .rev-btn{display:none;}}
@media (max-width:600px){.svc-more .rev-track>.card{flex-basis:84%;}}
.rev-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;}
.rev-nav[hidden]{display:none;}
.rev-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--navy);font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px;}
.rev-btn:hover{border-color:var(--accent);color:var(--accent);}
.rev-dots{display:flex;gap:8px;}
.rev-dot{width:9px;height:9px;border-radius:50%;border:0;background:var(--border);padding:0;cursor:pointer;}
.rev-dot.on{background:var(--accent);width:22px;border-radius:5px;}

/* Expert / team box */
.expert-box{display:flex;gap:18px;align-items:flex-start;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:24px;box-shadow:0 1px 3px rgba(19,42,76,.05);}
.expert-box .avatar{width:58px;height:58px;border-radius:50%;background:var(--bg-panel);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;}
.expert-box h3{margin:0 0 2px;font-size:1em;}
.expert-box .role{color:var(--gold-ink);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block;}

/* Callout */
.callout{background:var(--bg-panel);border-radius:var(--radius);padding:20px 22px;border-left:5px solid var(--navy);margin:22px 0;}
.callout.warn{border-left-color:var(--gold);}
/* Doorverwijsbalk op de particulier/zakelijk-hubpagina's, voor bezoekers die
   op de "verkeerde" pagina terechtkomen (bijv. via een brede zoekterm). */
.audience-switch{display:flex;align-items:flex-start;gap:12px;background:var(--bg-panel);border-radius:var(--radius);padding:16px 20px;margin:0 0 28px;}
.audience-switch svg{flex:none;color:var(--accent);margin-top:2px;}
.audience-switch p{margin:0;font-size:.95rem;color:var(--text);}
@media (max-width:600px){.audience-switch{padding:14px 16px;}}

/* CTA band */
.section.navy-band{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-mid) 100%);color:#fff;padding:44px 0;}
.section.navy-band h2{color:#fff;margin-bottom:10px;}
.section.navy-band p{color:#dfe4ee;max-width:none;margin-bottom:0;}
.section.navy-band .section-head{margin-bottom:14px;}
.section.navy-band .kicker{color:var(--gold-light);border-bottom-color:rgba(216,199,166,.35);}
.place-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.place-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;text-decoration:none;font-weight:600;min-height:44px;box-sizing:border-box;transition:background .15s,border-color .15s;}
.place-chip:hover{background:rgba(255,255,255,.12);border-color:var(--gold-light);color:#fff;}
.place-chip-all{border-color:var(--gold-light);color:var(--gold-light);}
.cta-band{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-mid) 100%);color:#fff;padding:48px 0;text-align:center;}
.cta-band h2{color:#fff;}
.cta-band p{color:#dfe4ee;max-width:640px;margin:0 auto 10px;}
.cta-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;margin:6px 0 0;font-size:.85rem;color:var(--gold-light);}
.cta-trust .star-icon{width:14px;height:14px;}
.cta-trust strong{color:#fff;}
.cta-trust-sep{opacity:.55;margin:0 2px;}
@media (max-width:600px){.cta-trust{font-size:.8rem;}}
.cta-trust-light{justify-content:flex-start;color:var(--gold-ink);margin:0 0 18px;}
.cta-trust-light strong{color:var(--navy);}
.form-reassurance{display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--text-muted);margin:0 0 18px;}
.form-reassurance svg{flex:none;color:var(--text-muted);}

/* Footer */
footer.site-footer{background:var(--navy-dark);color:#b9c2d6;padding:32px 0 20px;font-size:.88rem;}
footer.site-footer h3{color:#fff;font-size:.92rem;margin-bottom:14px;}
footer.site-footer a{color:#b9c2d6;}
footer.site-footer a:hover{color:#fff;}
/* Cookievoorkeuren-knop moet in de footer-linklijst gedragen/ogen als de
   andere <a>-links ernaast (ziet er hetzelfde uit, is alleen geen <a href>
   omdat er geen eigen URL is -- opent het bestaande banner-paneel opnieuw). */
.footer-link-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:#b9c2d6;cursor:pointer;text-align:left;}
.footer-link-btn:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:24px;}
@media (max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr;}}
footer.site-footer ul{list-style:none;padding:0;margin:0;}
footer.site-footer li{margin-bottom:8px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;font-size:.78rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8b97ad;}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:5px 12px;font-size:.74rem;color:#cfd6e2;}

/* Article / kennisbank */
.article-meta{color:var(--text-muted);font-size:.85rem;margin-bottom:20px;}
.article-body h2{margin-top:2rem;}
.article-body blockquote{border-left:4px solid var(--gold);margin:0 0 20px;padding:6px 0 6px 18px;font-style:italic;color:var(--navy);font-size:1.08rem;}

/* Utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.tag{display:inline-block;background:var(--bg-panel);color:var(--navy);font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px;margin:0 6px 6px 0;}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:40px;}
@media (max-width:900px){.two-col{grid-template-columns:1fr;}}
.side-box{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;}
.side-box h3{margin-top:0;font-size:1em;}
.media-meta{font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-dark,#8a6a3a);margin:0 0 8px;}
.media-card h3{margin:0 0 10px;font-size:1.1rem;}
.media-card,.media-feature{padding:0;}.media-thumb{aspect-ratio:21/10;overflow:hidden;background:var(--bg-alt);position:relative;}
.media-soon{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--navy-dark);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;}.media-thumb img{width:100%;height:100%;object-fit:cover;display:block;}.media-thumb.media-logo{display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--border);}.media-thumb.media-logo img{width:auto;height:52%;max-width:70%;object-fit:contain;}.media-mast{aspect-ratio:21/10;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px 22px;background:linear-gradient(135deg,var(--navy),var(--navy-dark));border-bottom:3px solid var(--gold);color:#fff;}.media-mast-type{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light,#D9BC85);}.media-mast-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.45rem;line-height:1.15;}.media-body{padding:20px 22px 24px;}.media-card .card-link{display:inline-flex;margin-top:6px;}.media-feature{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;}.media-feature .media-thumb{aspect-ratio:auto;min-height:340px;}.media-feature .media-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;}.media-feature h2{margin:0 0 12px;font-size:1.6rem;line-height:1.25;}.media-more{margin:28px 0 0;font-size:.95rem;color:var(--text-muted);}
.media-links{display:flex;gap:22px;flex-wrap:wrap;margin:10px 0 0;}@media(max-width:860px){.media-feature{grid-template-columns:1fr;}.media-feature .media-thumb{aspect-ratio:21/10;min-height:0;}.media-feature .media-body{padding:22px;}.media-feature h2{font-size:1.3rem;}}
.media-concept{display:inline-block;font-size:.78rem;background:#F1EADD;border:1px dashed var(--border);border-radius:999px;padding:3px 10px;color:var(--text-muted);margin:4px 0 10px;}
.side-box .side-photo{height:170px;}
.check-list li strong{color:var(--navy);}
@media(max-width:600px){.side-box .side-photo{height:110px;}}
.side-box .contact-lead{margin:0 0 14px;font-size:.92rem;color:var(--text-muted);}
.side-box .contact-list{list-style:none;margin:0;padding:0;}
.contact-list li{margin:0 0 10px;}
.contact-list li:last-child{margin-bottom:0;}
.contact-row{display:flex;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--navy);transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
a.contact-row:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(19,42,76,.08);transform:translateY(-1px);}
.contact-row .ci{flex:none;width:42px;height:42px;border-radius:50%;background:rgba(181,101,62,.12);color:var(--accent);display:flex;align-items:center;justify-content:center;}
.contact-row.cr-wa .ci{background:rgba(37,211,102,.14);color:#1a9d4e;}
.contact-row .ci svg{width:20px;height:20px;}
.contact-row .ct{display:flex;flex-direction:column;min-width:0;line-height:1.3;}
.contact-row .ct small{font-size:.76rem;color:var(--text-muted);}
.contact-row .ct strong{font-size:.98rem;font-weight:600;overflow-wrap:anywhere;}
.contact-row .ct span{font-size:.92rem;color:var(--text);}
.side-box ul{padding-left:18px;}
.nl-map-block svg,.nl-map-hero svg{display:block;width:100%;height:auto;}
.nl-map-block svg{margin-top:14px;max-width:280px;}
.nl-map-hero{max-width:360px;margin:28px auto 0;text-align:center;}
.nl-map-block svg a,.nl-map-hero svg a{cursor:pointer;}
.nl-map-block svg a:hover path,.nl-map-block svg a:focus-visible path,
.nl-map-hero svg a:hover path,.nl-map-hero svg a:focus-visible path{fill:#1C3A63;}
.nl-map-block svg a:focus-visible,.nl-map-hero svg a:focus-visible{outline:2px solid #B08D57;outline-offset:2px;}

/* HubSpot contact form (rendered inline, not in an iframe, specifically so
   it can be restyled here) — overrides HubSpot's own default form CSS so it
   matches the rest of the site instead of HubSpot's default blue/grey theme. */
.hs-form-styled .hs-form-field{margin:0 0 16px;}
.hs-form-styled label{display:block;font-weight:700;color:var(--navy);font-size:.92rem;margin-bottom:6px;font-family:var(--font);}
.hs-form-styled label .hs-form-required{color:var(--gold-ink);}
.hs-form-styled input[type="text"],
.hs-form-styled input[type="email"],
.hs-form-styled input[type="tel"],
.hs-form-styled select,
.hs-form-styled textarea{
  width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius);
  font-family:var(--font);font-size:.95rem;color:var(--text);background:#fff;box-sizing:border-box;
}
.hs-form-styled input:focus,
.hs-form-styled select:focus,
.hs-form-styled textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}
.hs-form-styled textarea{min-height:110px;resize:vertical;}
.hs-form-styled ul.inputs-list{list-style:none;margin:0;padding:0;}
.hs-form-styled .hs-error-msgs{list-style:none;margin:4px 0 0;padding:0;color:#b3261e;font-size:.82rem;}
.hs-form-styled .hs_submit{margin-top:6px;}
.hs-form-styled input[type="submit"],
.hs-form-styled .hs-button{
  display:inline-block;padding:12px 22px;border-radius:4px;font-weight:700;font-size:.95rem;
  cursor:pointer;border:2px solid transparent;background:var(--gold)!important;color:var(--navy-dark)!important;
  font-family:var(--font);
}
.hs-form-styled input[type="submit"]:hover,
.hs-form-styled .hs-button:hover{background:var(--gold-light)!important;}

/* Subtiele scroll-reveal (progressive enhancement — zie script in page_shell).
   De klasse js-reveal wordt alleen door JS op <body> gezet vóórdat secties
   verborgen worden, dus zonder JS (of met prefers-reduced-motion) blijft
   alles gewoon meteen zichtbaar — nooit een lege pagina. Klein, kort effect
   bewust zonder bounce of vertraging die in de weg zit bij het lezen. */
@media (prefers-reduced-motion: no-preference){
  body.js-reveal main .section{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .3s ease;}
  body.js-reveal main .section.is-visible{opacity:1;transform:translateY(0);}
}

/* --------------------------------------------------------------------
   AI-chatbot widget ("Santos Agent") — vervanging van Meow Apps AI Engine.
   Bubble rechtsonder + slide-in paneel, matcht de rest van de huisstijl.
   -------------------------------------------------------------------- */
.chat-toggle{
  position:fixed;right:22px;bottom:22px;z-index:1000;
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(11,25,48,.35);transition:background-color .2s ease, transform .2s ease;
  /* will-change: eigen GPU-compositinglaag voor dit fixed element -- op iOS
     (Safari/Chrome) kan een position:fixed-element tijdens het scrollen, als
     de adresbalk in-/uitschuift en de viewporthoogte daardoor live verandert,
     kort verspringen of overlappen met paginacontent/de mobile-cta-bar
     eronder. Los van de eigen laag rendert de browser het element dan mee
     met de normale document-flow-herberekening i.p.v. er los van. */
  will-change:transform;
}
.chat-toggle:hover{background:var(--navy-mid);transform:translateY(-2px);}
.chat-toggle svg,.chat-toggle img{width:26px;height:26px;object-fit:contain;display:block;}
.chat-toggle .chat-toggle-close{display:none;}
body.chat-open .chat-toggle .chat-toggle-open{display:none;}
body.chat-open .chat-toggle .chat-toggle-close{display:block;}

.chat-teaser{
  position:fixed;right:22px;bottom:90px;z-index:999;
  max-width:230px;background:#fff;color:var(--text);
  border:1px solid var(--border);border-radius:12px;
  padding:11px 30px 11px 14px;font-size:.85rem;line-height:1.4;
  box-shadow:0 10px 30px rgba(11,25,48,.18);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  will-change:transform;
}
.chat-teaser.show{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer;}
.chat-teaser:hover{border-color:var(--navy);}
.chat-teaser-close{
  position:absolute;top:4px;right:4px;background:none;border:none;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);cursor:pointer;
}
.chat-teaser-close svg{width:13px;height:13px;}
body.chat-open .chat-teaser{display:none;}
@media (max-width:480px){
  .chat-teaser{right:16px;bottom:80px;max-width:190px;font-size:.82rem;}
}

.chat-panel{
  position:fixed;right:22px;bottom:92px;z-index:1000;
  width:360px;max-width:calc(100vw - 32px);height:min(560px, calc(100vh - 140px));
  background:#fff;border:1px solid rgba(255,255,255,.5);border-radius:12px;box-shadow:0 16px 48px rgba(11,25,48,.28);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  will-change:transform;
}
body.chat-open .chat-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}

.chat-panel-header{
  background:var(--navy);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;flex:none;
}
/* Flex-items krijgen standaard min-width:auto, waardoor de titel-tekst op
   een smal mobiel paneel weigert te krimpen en het sluit-kruisje (dat als
   laatste in de rij staat) buiten de zichtbare, afgeronde headerbalk wordt
   geduwd — onzichtbaar door de overflow:hidden op .chat-panel. Deze regel
   dwingt de titel-kolom om wél te krimpen/wrappen, zodat het kruisje altijd
   in beeld blijft. */
.chat-panel-header > div{min-width:0;}
.chat-panel-header .chat-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy-dark);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex:none;
}
.chat-panel-header .chat-avatar img{width:20px;height:20px;object-fit:contain;display:block;}
.chat-panel-header .chat-title{font-weight:700;font-size:.95rem;line-height:1.2;}
.chat-panel-header .chat-subtitle{font-size:.76rem;color:var(--gold-light);line-height:1.2;}
.chat-panel-close{
  margin-left:auto;background:rgba(255,255,255,.14);border:none;border-radius:50%;color:#fff;cursor:pointer;opacity:.9;
  width:28px;height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;flex:none;flex-shrink:0;
}
.chat-panel-close:hover{opacity:1;}

.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg-alt);}
.chat-msg{max-width:85%;padding:9px 13px;border-radius:14px;font-size:.88rem;line-height:1.45;white-space:pre-wrap;}
.chat-msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px;}
.chat-msg.user{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px;}
.chat-msg.error{align-self:center;background:#fbeaea;color:#8a3b3b;border:1px solid #f0c9c9;font-size:.82rem;}
.chat-msg.typing{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px;padding:11px 15px;}
.chat-typing-dots{display:inline-flex;gap:4px;}
.chat-typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);opacity:.4;animation:chatTyping 1.1s infinite ease-in-out;}
.chat-typing-dots span:nth-child(2){animation-delay:.15s;}
.chat-typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes chatTyping{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

.chat-disclosure{font-size:.72rem;color:var(--text-muted);text-align:center;padding:2px 16px 0;}

.chat-input-row{flex:none;display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:#fff;}
.chat-input-row textarea{
  flex:1;resize:none;border:1px solid var(--border);border-radius:8px;padding:9px 11px;
  font-family:var(--font);font-size:16px;line-height:1.4;max-height:90px;color:var(--text);
}
/* 16px i.p.v. .88rem (~14px): onder 16px zoomt iOS Safari automatisch in
   zodra dit veld focus krijgt, wat het chatpaneel bij het openen van het
   toetsenbord onbedoeld laat "vergroten". */
.chat-input-row textarea:focus{outline:2px solid var(--navy);outline-offset:1px;}
.chat-input-row button{
  flex:none;width:40px;height:40px;border-radius:8px;border:none;cursor:pointer;
  background:var(--gold);color:var(--navy-dark);display:flex;align-items:center;justify-content:center;
  transition:background-color .2s ease;
}
.chat-input-row button:hover{background:var(--gold-light);}
.chat-input-row button:disabled{opacity:.5;cursor:default;}
.chat-input-row button svg{width:18px;height:18px;}

@media (max-width:480px){
  .chat-panel{right:16px;left:16px;width:auto;max-width:none;height:min(70vh, 560px);}
}

/* --------------------------------------------------------------------
   Vaste bel/WhatsApp-balk (alleen mobiel): bellen/appen is de kernactie
   van deze site, en zonder deze balk is die alleen bereikbaar via de
   header (verdwijnt bij scrollen) of losse CTA's verderop op de pagina.
   Op desktop staat "Snel contact" al permanent in de header, dus daar
   blijft de balk verborgen. Tilt de chatbubbel/paneel op zodat ze niet
   overlappen; body krijgt evenveel bottom-padding zodat de balk de
   footer niet blijvend bedekt.
   -------------------------------------------------------------------- */
.mobile-cta-bar{display:none;}
@media (max-width:680px){
  body{padding-bottom:calc(46px + env(safe-area-inset-bottom));}
  .mobile-cta-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1001;
    height:46px;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 10px rgba(11,25,48,.14);
    will-change:transform;
  }
  .mobile-cta-bar a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    font-weight:700;font-size:.8rem;text-decoration:none;transition:background-color .2s ease;
  }
  .mobile-cta-bar a svg{width:15px;height:15px;flex:none;display:block;}
  .mobile-cta-bar .mcb-call{background:var(--gold);color:var(--navy-dark);}
  .mobile-cta-bar .mcb-call:hover{background:var(--gold-light);}
  .mobile-cta-bar .mcb-whatsapp{background:#25D366;color:var(--navy-dark);}
  .mobile-cta-bar .mcb-whatsapp:hover{background:#20bd5a;}

  /* De teaser en het paneel moeten niet alleen de balk (46px) vrijhouden,
     maar ook de ronde chat-knop die daár weer bovenop staat (bottom 46+16px,
     58px hoog) — anders overlapt de onderkant van het paneel (het invoerveld)
     met de balk/knop, zoals eerder gebeurde toen hier alleen een kleine vaste
     marge stond. 46 (balk) + 16 (marge knop) + 58 (knophoogte) = 120px tot de
     bovenkant van de knop; teaser/paneel komen daar nog eens 6/10px boven.
     var(--mcb-h,46px) i.p.v. de vaste 46px (sept. 2026-fix): op iOS Safari/
     Chrome verandert env(safe-area-inset-bottom) tijdens het in-/uitschuiven
     van de adresbalk niet altijd synchroon voor alle position:fixed-elementen
     tegelijk -- de balk zelf (.mobile-cta-bar, die zijn eigen hoogte al uit
     env() opbouwt via padding-bottom) kan daardoor tijdelijk hoger renderen
     dan deze op 46px vaste aanname, waardoor de balk (z-index 1001) de
     onderkant van de teaser/knop (lagere z-index) overlapt. --mcb-h wordt
     hieronder via ResizeObserver live gevuld met de echte, gemeten hoogte
     van .mobile-cta-bar, dus teaser/knop/paneel volgen altijd de werkelijke
     balkhoogte i.p.v. een aanname. 46px blijft staan als fallback voor
     browsers zonder ResizeObserver-steun. */
  .chat-toggle{right:16px;bottom:calc(var(--mcb-h,46px) + 16px + env(safe-area-inset-bottom));}
  .chat-teaser{right:16px;bottom:calc(var(--mcb-h,46px) + 16px + 58px + 6px + env(safe-area-inset-bottom));max-width:190px;font-size:.82rem;}
  .chat-panel{right:16px;bottom:calc(var(--mcb-h,46px) + 16px + 58px + 10px + env(safe-area-inset-bottom));}
  /* Cookiebanner (linksonder) hergebruikt dezelfde --mcb-h-var als de
     chatbubbel hierboven, om dezelfde reden: moet altijd boven de echte,
     gemeten hoogte van de bel/WhatsApp-balk blijven staan, niet een aanname. */
  .cookie-consent{left:16px;bottom:calc(var(--mcb-h,46px) + 12px + env(safe-area-inset-bottom));}

  /* Extra robuust tegen overlap: zodra de chat open staat, verbergen we de
     bel/WhatsApp-balk helemaal — twee vaste onderbalken tegelijk is sowieso
     niet nodig zolang de chat open is. De ronde knop (die dan de sluit-kruis
     toont) en het paneel vallen dan terug op hun eigen, kleinere marge t.o.v.
     de schermrand, zoals vóór de balk er was. */
  body.chat-open .mobile-cta-bar{display:none;}
  body.chat-open .chat-toggle{bottom:calc(16px + env(safe-area-inset-bottom));}
  body.chat-open .chat-panel{bottom:calc(84px + env(safe-area-inset-bottom));}
}

.exit-intent-overlay{
  position:fixed;inset:0;z-index:1100;background:rgba(11,25,48,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.exit-intent-overlay.show{opacity:1;pointer-events:auto;}
.exit-intent-card{
  position:relative;background:var(--bg);border-radius:16px;max-width:400px;width:100%;
  padding:30px 28px 24px;box-shadow:0 20px 60px rgba(11,25,48,.35);border-top:4px solid var(--accent);
  transform:translateY(10px) scale(.98);transition:transform .2s ease;
}
.exit-intent-overlay.show .exit-intent-card{transform:translateY(0) scale(1);}
.exit-intent-close{
  position:absolute;top:12px;right:12px;background:none;border:none;cursor:pointer;
  color:var(--text-muted);width:26px;height:26px;display:flex;align-items:center;justify-content:center;
}
.exit-intent-close svg{width:15px;height:15px;}
.exit-intent-close:hover{color:var(--text);}
.exit-intent-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.exit-intent-header .chat-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.exit-intent-logo{width:61px;height:48px;flex:none;display:block;}
.exit-intent-header .chat-avatar img{width:20px;height:20px;object-fit:contain;display:block;}
.exit-intent-title{font-family:var(--font-heading);font-weight:600;font-size:1.25rem;color:var(--navy);line-height:1.2;}
.exit-intent-subtitle{font-size:.76rem;color:var(--text-muted);line-height:1.2;}
.exit-intent-text{font-size:.95rem;line-height:1.6;color:var(--text);margin:0 0 20px;}
.exit-intent-phone{text-align:center;font-size:.85rem;color:var(--text-muted);margin:14px 0 0;}
.exit-intent-phone a{color:var(--accent-ink);font-weight:600;white-space:nowrap;}
.exit-intent-overlay .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:8px;}
.exit-intent-overlay .btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);}
.exit-intent-overlay .btn-outline-dark{border-radius:8px;border-color:var(--border);background:#fff;}
.exit-intent-btn{display:block;width:100%;text-align:center;margin-bottom:10px;}
.exit-intent-btn:last-child{margin-bottom:0;}
@media (max-width:768px){.exit-intent-overlay{display:none;}}

/* --------------------------------------------------------------------
   Cookiebanner + Consent Mode v2 (sept. 2026). Klein kaartje linksonder --
   bewust GEEN full-screen overlay/backdrop (harde eis opdrachtgever): de
   pagina eronder blijft volledig leesbaar en scrollbaar. Rechtsonder blijft
   vrij voor de chatbubbel. z-index 1010: boven de vaste onderbalken (1001/
   1000/999) zodat het kaartje nooit half achter de bel/WhatsApp-balk of de
   chatbubbel wegvalt, maar onder de exit-intent-overlay (1100) -- die is een
   bewuste, incidentele full-page onderbreking en mag als enige daadwerkelijk
   even alles overstemmen.
   -------------------------------------------------------------------- */
.cookie-consent{
  position:fixed;left:16px;bottom:16px;z-index:1010;
  width:calc(100vw - 32px);max-width:360px;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  will-change:transform;
}
.cookie-consent.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.cookie-consent-card{
  background:#fff;color:var(--text);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;box-shadow:0 16px 44px rgba(11,25,48,.22);
}
.cookie-consent-card p{margin:0 0 12px;font-size:.86rem;line-height:1.5;}
.cookie-consent-card p a{color:var(--navy);text-decoration:underline;}
.cookie-consent-actions{display:flex;gap:10px;margin-bottom:6px;}
.cookie-consent-actions .btn{flex:1;padding:10px 12px;font-size:.86rem;text-align:center;}
.cookie-consent-prefs-link{
  display:block;font-size:.8rem;color:var(--text-muted);text-decoration:underline;
  text-decoration-color:rgba(28,58,99,.35);
}
.cookie-consent-prefs-link:hover{color:var(--navy);}
@media (max-width:400px){
  .cookie-consent-actions{flex-direction:column;}
}