:root{--primary:#0A3DAA;--accent:#FFC21A;--danger:#D61E1E;--text:#0b1320;--muted:#64748b}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);
  background:linear-gradient(180deg, rgba(10,61,170,.03), rgba(255,194,26,.04));line-height:1.65}
h1,h2,h3,h4,h5,h6,.btn,nav a,.kicker{font-family:'Bebas Neue', Arial, sans-serif;letter-spacing:.02em}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
a{color:var(--primary)}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #edf0f3}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:68px;max-height:8vh;object-fit:contain}
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
nav a{padding:10px 12px;border-radius:8px;color:#101828;font-weight:900;text-transform:uppercase}
nav a:hover{background:#eef3ff}
.cta{--bg:#FFC21A;color:#111}

/* Burger */
.burger{display:none;background:none;border:none;padding:8px}
.burger span{display:block;width:26px;height:3px;background:#111;margin:5px 0;border-radius:2px}
@media (max-width: 820px){
  .topbar{padding:8px 0}
  .brand img{height:54px}
  .burger{display:block}
  nav{position:fixed;inset:60px 0 auto 0;background:#fff;border-bottom:1px solid #e6edf6;box-shadow:0 6px 18px rgba(0,0,0,.06);transform:translateY(-120%);transition:.25s;z-index:55}
  nav.open{transform:translateY(0)}
  nav ul{flex-direction:column;align-items:flex-start;padding:10px 20px;gap:8px}
  nav a{padding:10px 6px;font-size:16px}
}

/* Hero */
.hero{position:relative;background:#0b1a3a url('/assets/img/hero.jpg') center/cover no-repeat;color:#fff}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.25),rgba(2,6,23,.55))}
.hero .inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:54vh;padding:34px 0}
.kicker{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;padding:6px 14px;font-size:14px;letter-spacing:.12em;font-weight:900}
.hero h1{margin:12px 0 8px;font-size:56px;line-height:1.03;text-transform:uppercase;font-weight:1000}
.hero .sub{max-width:860px;color:#e5e7eb;font-size:18px}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.btn{--bg:var(--primary);position:relative;display:inline-block;color:#fff;font-weight:1000;text-transform:uppercase;letter-spacing:.06em;padding:14px 28px;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);background:var(--bg)}
.btn.secondary{--bg:rgba(255,255,255,.18)}
@media (max-width: 820px){
  .hero .inner{min-height:42vh;padding:24px 0}
  .hero h1{font-size:38px}
  .hero .sub{font-size:16px}
}

/* Sections / cards / blog */
.section{padding:52px 0}
.section h2{text-align:center;margin:0 0 8px;text-transform:uppercase}
.section .lead{text-align:center;color:var(--muted);max-width:860px;margin:0 auto 26px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.card{background:#fff;border:1px solid #e6edf6;border-radius:10px;box-shadow:0 8px 20px rgba(10,30,60,.06);padding:20px}
.post-meta{color:#6b7280;font-size:14px;margin:6px 0 12px}

/* Footer */
.footer{background:#0f1425;color:#cbd5e1;padding:44px 0}
.footer a{color:#cbd5e1}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.form input,.form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #334155;background:#0f1425;color:#e5e7eb}
.form button{background:#FFC21A;color:#111;font-weight:900;border:none;border-radius:10px;padding:12px 18px;cursor:pointer}

/* Watermark */
body::after{content:'';position:fixed;inset:auto 0 6% auto;width:44vw;max-width:680px;aspect-ratio:1/1;opacity:.06;pointer-events:none;background:url('/assets/img/logo.png') center/contain no-repeat; right:-6%; z-index:0}
.site-header,.hero,.section,.footer{position:relative; z-index:1}

/* Cookie popup (PSV-style) */
#ps-consent{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
#ps-consent::before{content:'';position:absolute;inset:0;background:rgba(2,6,23,.6);pointer-events:none}
#ps-consent .box{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 22px 50px rgba(0,0,0,.35);padding:22px;max-width:780px;width:clamp(320px,92vw,720px);pointer-events:auto}
#ps-consent .box::after{content:'';position:absolute;inset:10px;border:1px solid #f3f4f6;border-radius:6px;pointer-events:none}
#ps-consent h3{font-size:26px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.02em;font-weight:1000;color:#111}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 8px}
.btn.accept{--bg:#0A3DAA}.btn.decline{--bg:#D61E1E}.btn.manage{--bg:#d1d5db;color:#111}
.links{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin:8px 0 0;padding:0}

/* Manage modal */
#ps-consent-modal{position:fixed;inset:0;z-index:10000}
#ps-consent-modal .psm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
#ps-consent-modal .psm-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:10px;border:1px solid #e5e7eb;box-shadow:0 14px 44px rgba(0,0,0,.35);width:clamp(320px,92vw,560px);padding:20px}
.psm-row{display:block;margin:6px 0}
.psm-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}


/* ===== MOBILE FIRST TUNING (v5) ===== */
@media (max-width: 480px){
  .container{padding:0 16px}
  .brand img{height:46px}
  .topbar{gap:10px}
  .hero .inner{min-height:38vh;padding:18px 0}
  .hero h1{font-size:34px}
  .hero .sub{font-size:15px}
  .btn{padding:12px 18px}
  .cards{gap:16px}
  .card{padding:16px}
  body::after{opacity:.04;width:64vw;right:-20%}
  /* Cookie popup sizing */
  #ps-consent .box{padding:16px;width:90vw;max-width:420px}
  #ps-consent h3{font-size:22px}
  .actions{flex-direction:column}
  .actions .btn{width:100%;text-align:center}
}
/* Burger nav should not block page when closed */
@media (max-width:820px){
  nav{max-height:82vh;overflow:auto}
}


/* ===== MOBILE FIXES v6 ===== */
@media (max-width: 480px){
  .brand img{height:40px}           /* smaller logo on very small devices */
  nav a{font-size:15px}             /* prevent wrap/overlap */
  .topbar{gap:6px}
}
/* Pill CTA style reused for service blog link */
.pill {display:inline-block; margin-top:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
  color:#111; background:#FFC21A; padding:12px 22px; border-radius:999px; text-decoration:none}
.pill:hover{filter:brightness(0.95); text-decoration:none}


/* === Dropdown zichtbaar en toegankelijk === */
.nav ul li { position: relative; }
.nav ul li ul {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  backdrop-filter: saturate(160%) blur(6px);
  padding: 8px 0;
  z-index: 9999;
}
.nav ul li ul li a {
  display: block;
  padding: 10px 14px;
  color: #0a5;
  text-decoration: none;
  line-height: 1.2;
}
.nav ul li ul li a:hover { background: rgba(0,0,0,0.04); }

/* === Hero logo groter & scherper === */
header .logo img,
.hero .logo img,
img[src*="logo"][src$=".png"] {
  max-height: 80px;
  height: auto;
}
@media (min-width: 992px) {
  header .logo img,
  .hero .logo img,
  img[src*="logo"][src$=".png"] {
    max-height: 96px;
  }
}

/* === Blog opmaak === */
.blog-hero { margin-bottom: 1.25rem; }
.blog-hero .intro { font-size: 1.1rem; opacity: .9; }
.blog-article h2 { margin-top: 1.5rem; }
.blog-article .cta-block { margin-top: 2rem; padding: 1rem; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; }
.btn.btn-primary { display: inline-block; padding: .625rem 1rem; border-radius: 6px; background: #0a5; color: #fff; text-decoration: none; }


/* === NAV IMPROVEMENTS (readability, clickability) === */
.nav { position: relative; z-index: 10000; isolation: isolate; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul > li { position: relative; }
.nav a { text-decoration: none; line-height: 1.2; }
.nav > ul > li > a { display: inline-block; padding: 14px 16px; }
.nav ul li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 8px 0;
  pointer-events: auto;
}
.nav ul li:hover > ul,
.nav ul li:focus-within > ul { display: block; }
.nav ul li ul li a {
  display: block;
  padding: 12px 14px;
  color: #0a5;
}
.nav ul li ul li a:hover,
.nav ul li ul li a:focus { background: rgba(0,0,0,0.06); outline: none; }

/* === Fix header overlap when nav is fixed === */
body { --nav-height: 88px; }
body.nav-fixed-padding { padding-top: var(--nav-height); }
header, .hero { scroll-margin-top: var(--nav-height); }

/* === Enforce padding if nav is fixed via heuristic === */
.nav[style*="position:fixed"], .nav.nav-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
}
.nav.nav-fixed ~ *,
.nav[style*="position:fixed"] ~ * {
  /* Push content down if nav is fixed */
  margin-top: var(--nav-height);
}

/* === Larger logo in header === */
header .logo img, .site-header .logo img {
  height: 72px;
  max-height: none;
}
@media (min-width: 992px) {
  header .logo img, .site-header .logo img {
    height: 120px;
  }
}

/* Additional safety to ensure menu clicks are not blocked by hero overlays */
.hero, .header-hero, .hero:before, .hero:after {
  pointer-events: auto;
}