/*
Theme Name: Offertepilot
Theme URI: https://offertepilot.nl/
Description: Maatwerkthema voor Offertepilot: offertes vergelijken voor verduurzaming. Licht, snel en zonder paginabouwer.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: offertepilot
*/

:root{
  --ink:#0B2421;
  --teal:#0F4C45;
  --teal-2:#13695F;
  --mint:#DDEFE9;
  --sand:#F6F2E9;
  --sand-2:#EFE9DC;
  --line:#E3DCCD;
  --muted:#58706B;
  --accent:#FF7A1A;
  --accent-d:#E8650A;
  --white:#fff;
  --radius:18px;
  --shadow-sm:0 1px 2px rgba(11,36,33,.06),0 2px 8px rgba(11,36,33,.06);
  --shadow:0 2px 6px rgba(11,36,33,.06),0 18px 40px -12px rgba(11,36,33,.22);
  --shadow-lg:0 30px 70px -20px rgba(4,24,21,.55);
  --font-h:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-b:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font-b);font-size:17px;line-height:1.6;color:var(--ink);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
@supports (overflow:clip){body{overflow-x:clip}}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.12;margin:0;letter-spacing:-.02em}
p{margin:0}
button,input,select{font:inherit}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1em;height:1em;flex:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;border:0;cursor:pointer;text-decoration:none;font-family:var(--font-h);font-weight:700;border-radius:14px;padding:15px 22px;font-size:17px;line-height:1.2;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -3px 0 rgba(0,0,0,.14) inset,0 10px 24px -8px rgba(255,122,26,.65)}
.btn-accent:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn-accent:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-block{width:100%}
.btn .ico{width:20px;height:20px}

/* ---------- Topbar + header ---------- */
.topbar{background:var(--ink);color:#CFE6DF;font-size:13.5px}
.topbar .wrap{display:flex;gap:22px;justify-content:center;align-items:center;min-height:38px;overflow:hidden;white-space:nowrap}
.topbar span{display:inline-flex;align-items:center;gap:7px}
.topbar .ico{color:#7FD3BF;width:15px;height:15px}
.topbar .hide-s{display:none}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(227,220,205,.7)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-h);font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--ink)}
.logo b{color:var(--teal-2);font-weight:800}
.logo svg{width:36px;height:36px}
nav.main{display:none}
nav.main a{text-decoration:none;font-weight:500;font-size:15.5px;color:#2C4541;padding:8px 2px}
nav.main a:hover{color:var(--teal-2)}
.head-cta{padding:11px 16px;font-size:15px;border-radius:12px}
.head-cta .long{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;isolation:isolate;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:-3}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(8,32,29,.86) 0%,rgba(8,32,29,.78) 40%,rgba(8,32,29,.97) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%237FD3BF' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M-20 420c80-40 120-120 220-110s140 90 240 70 120-90 200-80'/%3E%3Cpath d='M-20 450c80-40 130-110 230-100s150 80 240 62 130-84 190-74'/%3E%3Cpath d='M-20 480c90-38 140-100 240-90s150 72 240 56 130-76 180-68'/%3E%3Cpath d='M-20 510c90-34 150-88 250-80s150 64 236 50 124-70 174-62'/%3E%3Cpath d='M-20 140c70 30 140 10 200-40s150-60 230-20 120 70 210 40'/%3E%3Cpath d='M-20 170c70 28 140 10 200-34s150-54 228-18 124 62 212 36'/%3E%3Cpath d='M-20 200c70 26 146 8 204-30s146-48 222-16 128 56 214 32'/%3E%3C/g%3E%3C/svg%3E");
  background-size:600px 600px}
.hero .glow{position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;filter:blur(40px);opacity:.35;pointer-events:none}
.hero .glow.a{background:radial-gradient(circle,#FF7A1A 0%,transparent 65%);right:-180px;top:-160px}
.hero .glow.b{background:radial-gradient(circle,#2FB39A 0%,transparent 65%);left:-220px;bottom:-200px}
.hero-grid{display:grid;gap:28px;padding-top:30px;padding-bottom:40px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:#BFEAE0;background:rgba(127,211,191,.12);border:1px solid rgba(127,211,191,.28);padding:6px 12px;border-radius:999px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#46D3B0;box-shadow:0 0 0 4px rgba(70,211,176,.22);animation:pulse 2.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(70,211,176,0)}}
.hero h1{font-size:clamp(31px,7.6vw,58px);font-weight:800;margin-top:16px;letter-spacing:-.03em}
.rot{display:grid;justify-items:start;color:#FFB27A}
.rot span{grid-area:1/1;opacity:0;transform:translateY(.4em);transition:opacity .45s ease,transform .45s ease;white-space:nowrap}
.rot span.on{opacity:1;transform:none}
.rot span.off{opacity:0;transform:translateY(-.4em)}
.hero .lead{font-size:clamp(16.5px,2.2vw,19.5px);color:#D3E7E1;margin-top:16px;max-width:560px}
.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.checks li{display:flex;align-items:flex-start;gap:10px;font-weight:500;color:#EAF5F1}
.checks .ico{width:22px;height:22px;color:#46D3B0;margin-top:1px}
.hero-chips{display:none}

/* ---------- Form card ---------- */
.formcard{position:relative;background:#fff;color:var(--ink);border-radius:22px;box-shadow:var(--shadow-lg);padding:20px;scroll-margin-top:84px}
.formcard::before{content:"";position:absolute;inset:-1px;border-radius:23px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,122,26,.9),rgba(70,211,176,.6) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.fc-head h2{font-size:20px;font-weight:800}
.fc-step{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.progress{height:8px;background:var(--sand-2);border-radius:99px;overflow:hidden;margin-bottom:18px}
.progress i{display:block;height:100%;width:20%;border-radius:inherit;background:linear-gradient(90deg,var(--teal-2),#2FB39A);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.step{display:none}
.step.active{display:block;animation:stepin .35s ease}
@keyframes stepin{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.q{font-family:var(--font-h);font-weight:700;font-size:17px;margin-bottom:12px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s;min-height:92px;-webkit-tap-highlight-color:transparent}
.tile:hover{border-color:#B9CFC9}
.tile .ti{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--mint);color:var(--teal)}
.tile .ti svg{width:22px;height:22px}
.tile strong{font-family:var(--font-h);font-size:15px;line-height:1.2}
.tile small{font-size:12.5px;color:var(--muted);line-height:1.25}
.tile[aria-pressed="true"]{border-color:var(--teal-2);background:#F2FAF7;box-shadow:0 0 0 3px rgba(19,105,95,.15)}
.tile[aria-pressed="true"]::after{content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--teal-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.tile.wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0}
.field{margin-bottom:14px}
.field label,.legend{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:#26403C}
.input,select.input{width:100%;height:52px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
select.input{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358706B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/18px no-repeat;padding-right:40px}
.input:focus{border-color:var(--teal-2);box-shadow:0 0 0 4px rgba(19,105,95,.14)}
.input.err{border-color:#D64545;box-shadow:0 0 0 4px rgba(214,69,69,.12)}
.err-msg{display:none;color:#C23434;font-size:13.5px;margin-top:6px;font-weight:500}
.err-msg.show{display:block}
.row2{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-size:15px;font-weight:500;cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.cond{display:none}
.cond.show{display:block}
.addr{display:none;align-items:center;gap:10px;background:#F2FAF7;border:1px solid #CBE7DE;border-radius:12px;padding:11px 13px;font-size:14.5px;margin-bottom:14px}
.addr.show{display:flex}
.addr .ico{color:var(--teal-2);width:20px;height:20px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;padding:14px;background:var(--sand);border-radius:12px;border:1.5px solid transparent;cursor:pointer}
.consent.err{border-color:#D64545}
.consent input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--teal-2)}
.consent a{color:var(--teal-2);font-weight:600}
.nav-row{display:flex;gap:10px;margin-top:18px}
.nav-row .back{flex:0 0 auto;padding:15px 16px}
.nav-row .next{flex:1}
.fc-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.fc-foot .ico{width:15px;height:15px;color:var(--teal-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{text-align:center;padding:10px 4px}
.done .badge{width:64px;height:64px;border-radius:50%;margin:4px auto 14px;display:grid;place-items:center;background:var(--mint);color:var(--teal-2)}
.done .badge svg{width:34px;height:34px}
.done h3{font-size:22px;margin-bottom:8px}
.done p{color:var(--muted);font-size:15.5px}

/* ---------- Promise strip ---------- */
.promise{background:#fff;border-bottom:1px solid var(--line)}
.promise ul{list-style:none;margin:0;padding:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.promise li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:#2A4440;line-height:1.3}
.promise .pi{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--sand);color:var(--teal-2)}
.promise .pi svg{width:20px;height:20px}

/* ---------- Sections ---------- */
section.s{padding:64px 0}
.s-head{max-width:720px;margin-bottom:30px}
.kicker{font-family:var(--font-h);font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-2)}
.s-head h2{font-size:clamp(28px,5.4vw,42px);font-weight:800;margin-top:10px;letter-spacing:-.025em}
.s-head p{color:var(--muted);margin-top:12px;font-size:18px}
.bg-sand{background:var(--sand);position:relative}
.bg-dots{background-color:var(--sand);background-image:radial-gradient(rgba(15,76,69,.13) 1.2px,transparent 1.3px);background-size:22px 22px}

/* ---------- Services ---------- */
.svc-grid{display:grid;gap:16px}
.svc{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(227,220,205,.8);transition:transform .25s ease,box-shadow .25s ease}
.svc:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(11,36,33,.06),0 28px 50px -16px rgba(11,36,33,.3)}
.svc-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.svc:hover .svc-img img{transform:scale(1.05)}
.svc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,32,29,.55))}
.svc-tag{position:absolute;left:14px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.95);color:var(--ink);font-size:13px;font-weight:700;padding:6px 10px;border-radius:999px}
.svc-tag svg{width:15px;height:15px;color:var(--teal-2)}
.svc-hot{position:absolute;right:12px;top:12px;z-index:1;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;letter-spacing:.01em}
.svc-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.svc h3{font-size:22px;font-weight:800}
.svc p{color:var(--muted);font-size:15.5px}
.svc dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 0}
.svc dl div{background:var(--sand);border-radius:12px;padding:10px 12px}
.svc dt{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.svc dd{margin:2px 0 0;font-family:var(--font-h);font-weight:800;font-size:16px}
.svc .links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14.5px;margin-top:auto;padding-top:4px}
.svc .links a{color:var(--teal-2);font-weight:600;text-decoration:none}
.svc .links a:hover{text-decoration:underline}
.svc .btn{margin-top:6px}

/* ---------- Saldering band ---------- */
.band{position:relative;overflow:hidden;background:linear-gradient(135deg,#0B2421 0%,#0F4C45 100%);color:#fff;border-radius:26px;padding:30px 22px;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:radial-gradient(rgba(127,211,191,.22) 1.2px,transparent 1.3px);background-size:20px 20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.band::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.45),transparent 65%);z-index:-1}
.band-grid{display:grid;gap:24px;align-items:center}
.band .kicker{color:#FFB27A}
.band h2{font-size:clamp(26px,4.8vw,38px);font-weight:800;margin-top:10px}
.band p{color:#CFE6DF;margin-top:12px}
.count{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.count div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 8px;text-align:center}
.count b{display:block;font-family:var(--font-h);font-size:clamp(30px,8vw,46px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.count span{font-size:13px;color:#BFD8D1}
.band .note{font-size:13px;color:#9DBDB5;margin-top:12px}
.band .btn{margin-top:18px}

/* ---------- Costs ---------- */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font-weight:600;font-size:15px;cursor:pointer;color:var(--ink);min-height:44px;display:inline-flex;align-items:center;gap:8px}
.tab svg{width:18px;height:18px;color:var(--teal-2)}
.tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tab[aria-selected="true"] svg{color:#7FD3BF}
.cost-card{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:22px;display:grid;gap:22px}
.cost-card h3{font-size:24px;font-weight:800}
.cost-card .sub{color:var(--muted);margin-top:6px}
.range{margin-top:4px}
.range-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.range-top b{font-family:var(--font-h);font-size:clamp(28px,6vw,40px);font-weight:800;letter-spacing:-.02em}
.range-top span{font-size:14px;color:var(--muted)}
.bar{position:relative;height:14px;border-radius:99px;background:var(--sand-2);margin-top:14px;overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#2FB39A,var(--accent));transition:left .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1)}
.bar-scale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:6px}
.facts{display:grid;gap:10px}
.fact{display:flex;gap:12px;align-items:flex-start;background:var(--sand);border-radius:14px;padding:14px}
.fact .fi{width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center;color:var(--teal-2);flex:none}
.fact .fi svg{width:19px;height:19px}
.fact small{display:block;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.fact strong{font-family:var(--font-h);font-size:16.5px}
.disclaimer{font-size:13px;color:var(--muted);margin-top:14px;display:flex;gap:8px;align-items:flex-start}
.disclaimer svg{width:16px;height:16px;flex:none;margin-top:2px}

/* ---------- How ---------- */
.steps{display:grid;gap:16px;counter-reset:st}
.st{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px 22px;box-shadow:var(--shadow-sm)}
.st .num{font-family:var(--font-h);font-weight:800;font-size:15px;color:#fff;background:var(--teal);width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;box-shadow:0 8px 18px -8px rgba(15,76,69,.8)}
.st h3{font-size:20px;font-weight:800}
.st p{color:var(--muted);margin-top:8px;font-size:16px}
.st .mini{margin-top:16px;border-radius:12px;background:var(--sand);padding:12px;font-size:14px;display:flex;align-items:center;gap:10px;color:#2A4440;font-weight:500}
.st .mini svg{width:20px;height:20px;color:var(--teal-2);flex:none}

/* ---------- Compare ---------- */
.compare{background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);align-items:center;border-top:1px solid var(--line)}
.cmp-row:first-child{border-top:0}
.cmp-row > div{padding:13px 10px;font-size:14px;overflow-wrap:break-word;hyphens:auto}
.cmp-row.h > div{font-family:var(--font-h);font-weight:800;font-size:15px;background:var(--sand)}
.cmp-row.h .us{background:var(--ink);color:#fff}
.cmp-row .us{background:#F2FAF7;font-weight:600}
.cmp-row .them{color:var(--muted)}
.cmp-row .lab{font-weight:600}
.y,.n{display:inline-flex;align-items:center;gap:6px}
.y svg{width:18px;height:18px;color:var(--teal-2);flex:none}
.n svg{width:18px;height:18px;color:#B6A98F;flex:none}

/* ---------- Regions ---------- */
.reg-wrap{display:grid;gap:22px}
.reg-select{display:flex;gap:8px;flex-wrap:wrap}
.regions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.regions a{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;font-weight:600;font-size:15px;transition:border-color .15s,transform .15s}
.regions a:hover{border-color:var(--teal-2);transform:translateY(-1px)}
.regions a svg{width:16px;height:16px;color:var(--teal-2);flex:none}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 18px;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow-sm);border-color:#CFE2DC}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 0;font-family:var(--font-h);font-weight:700;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:30px;height:30px;border-radius:50%;background:var(--sand);display:grid;place-items:center;flex:none;transition:transform .25s,background .2s}
.faq summary .pm svg{width:16px;height:16px;color:var(--teal)}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--mint)}
.faq details p{padding:0 0 18px;color:var(--muted);font-size:16px}
.faq-grid{display:grid;gap:30px}
.faq-side{background:var(--ink);color:#fff;border-radius:22px;padding:24px;position:relative;overflow:hidden;align-self:start}
.faq-side::after{content:"";position:absolute;right:-80px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(70,211,176,.35),transparent 65%)}
.faq-side h3{font-size:22px;font-weight:800}
.faq-side p{color:#CFE6DF;margin:10px 0 18px;font-size:16px}

/* ---------- Final CTA ---------- */
.final{position:relative;overflow:hidden;isolation:isolate;color:#fff;text-align:center;padding:72px 0}
.final .bgimg{position:absolute;inset:0;z-index:-2}
.final .bgimg img{width:100%;height:100%;object-fit:cover}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,32,29,.88),rgba(8,32,29,.94))}
.final h2{font-size:clamp(30px,6vw,50px);font-weight:800;max-width:820px;margin:0 auto;letter-spacing:-.03em}
.final p{color:#D3E7E1;max-width:600px;margin:16px auto 0;font-size:18px}
.final .btn{margin-top:26px;font-size:18px;padding:17px 26px}
.final .mini-checks{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:18px;font-size:14.5px;color:#BFD8D1}
.final .mini-checks span{display:inline-flex;gap:6px;align-items:center}
.final .mini-checks svg{width:17px;height:17px;color:#46D3B0}

/* ---------- Installers ---------- */
.inst{display:grid;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-sm)}
.inst h2{font-size:clamp(24px,4.4vw,32px);font-weight:800}
.inst p{color:var(--muted);margin-top:10px}
.inst ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.inst li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.inst li svg{width:20px;height:20px;color:var(--teal-2);flex:none;margin-top:2px}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:#BFD8D1;padding:52px 0 calc(110px + env(safe-area-inset-bottom));font-size:15px}
.f-grid{display:grid;gap:30px;grid-template-columns:1fr 1fr}
.f-brand{grid-column:1/-1}
.f-brand .logo{color:#fff}
.f-brand .logo b{color:#8FDCC8}
.f-brand p{margin-top:12px;max-width:380px;color:#9DBDB5}
footer h4{color:#fff;font-size:15px;margin-bottom:12px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer a{text-decoration:none;color:#BFD8D1}
footer a:hover{color:#fff}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;font-size:13px;color:#86A79F;display:grid;gap:8px}

/* ---------- Sticky mobile CTA ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -12px rgba(11,36,33,.25);transform:translateY(110%);transition:transform .3s ease}
.sticky.show{transform:none}
.sticky .inner{display:flex;align-items:center;gap:12px;max-width:600px;margin:0 auto}
.sticky .txt{font-size:13px;line-height:1.3;color:var(--muted);display:none}
.sticky .txt b{display:block;color:var(--ink);font-family:var(--font-h);font-size:15px}
.sticky .btn{flex:1}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- Breakpoints ---------- */
@media (min-width:420px){
  .sticky .txt{display:block;flex:0 0 auto}
  .sticky .btn{flex:1}
}
@media (min-width:640px){
  :root{--gutter:28px}
  .topbar .hide-s{display:inline-flex}
  .head-cta .long{display:inline}
  .head-cta .short{display:none}
  .formcard{padding:26px}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tile.wide{grid-column:auto;flex-direction:column;align-items:flex-start}
  .promise ul{grid-template-columns:repeat(3,1fr)}
  .svc-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .regions{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .f-brand{grid-column:auto}
  .facts{grid-template-columns:1fr 1fr}
  .cmp-row > div{padding:16px 20px;font-size:15.5px}
}
@media (min-width:900px){
  header.site .wrap{height:74px}
  nav.main{display:flex;gap:28px}
  .hero::before{background:linear-gradient(100deg,rgba(8,32,29,.95) 0%,rgba(8,32,29,.86) 42%,rgba(8,32,29,.45) 100%)}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px;padding-top:72px;padding-bottom:88px;align-items:center}
  .hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
  .hero-chips span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:float 6s ease-in-out infinite}
  .hero-chips span:nth-child(2){animation-delay:-1.5s}
  .hero-chips span:nth-child(3){animation-delay:-3s}
  .hero-chips span:nth-child(4){animation-delay:-4.5s}
  .hero-chips svg{width:17px;height:17px;color:#7FD3BF}
  .promise ul{grid-template-columns:repeat(5,1fr);padding:22px 0}
  section.s{padding:96px 0}
  .svc-grid{grid-template-columns:repeat(6,1fr)}
  .svc{grid-column:span 2}
  .svc.big{grid-column:span 3}
  .band{padding:48px}
  .band-grid{grid-template-columns:1.2fr 1fr;gap:48px}
  .cost-card{grid-template-columns:1.1fr 1fr;padding:34px;gap:36px}
  .facts{grid-template-columns:1fr}
  .reg-wrap{grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
  .faq-grid{grid-template-columns:1.6fr 1fr;gap:40px}
  .inst{grid-template-columns:1.3fr 1fr;padding:40px}
  .sticky{display:none}
  footer.site{padding-bottom:40px}
  .final{padding:110px 0}
}
@keyframes float{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ================= MULTI-PAGE UITBREIDINGEN ================= */

/* Header: burger + mega-menu */
.head-right{display:flex;align-items:center;gap:10px}
.burger{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent}
.burger svg{width:22px;height:22px}
.burger .x{display:none}
body.nav-open .burger .x{display:block}
body.nav-open .burger .b{display:none}
.logo svg{width:34px;height:34px}
@media (max-width:379px){.head-cta{display:none}}
@media (max-width:420px){.logo{font-size:19px;gap:8px}.logo svg{width:32px;height:32px}.head-cta{padding:10px 12px;font-size:14px}}

.drawer{position:fixed;left:0;right:0;top:var(--hh,104px);bottom:0;z-index:49;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px var(--gutter) calc(30px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
body.nav-open .drawer{opacity:1;visibility:visible;transform:none}
body.nav-open{overflow:hidden}
.drawer h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 8px}
.drawer h4:first-child{margin-top:0}
.dsvc{display:grid;gap:8px}
.dsvc .row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.dsvc .row > a{display:flex;align-items:center;gap:12px;flex:1;text-decoration:none;font-family:var(--font-h);font-weight:700;font-size:16px}
.dsvc .ti{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--mint);color:var(--teal);flex:none}
.dsvc .ti svg{width:20px;height:20px}
.dsvc .sub{display:flex;gap:6px}
.dsvc .sub a{font-size:13px;font-weight:600;color:var(--teal-2);text-decoration:none;background:var(--sand);padding:6px 9px;border-radius:8px}
.dlinks{display:grid;gap:2px}
.dlinks a{display:block;padding:12px 2px;text-decoration:none;font-weight:600;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:20px}

nav.main{align-items:center}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:inherit;font-weight:500;font-size:15.5px;color:#2C4541;padding:8px 2px}
.dd-btn svg{width:14px;height:14px;transition:transform .2s}
.dd:hover .dd-btn svg,.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 12px);left:50%;width:min(720px,90vw);transform:translate(-50%,6px);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd:hover .dd-panel,.dd:focus-within .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd-item{display:flex;gap:12px;padding:12px;border-radius:14px;transition:background .15s}
.dd-item:hover{background:var(--sand)}
.dd-item .ti{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--mint);color:var(--teal);flex:none}
.dd-item .ti svg{width:22px;height:22px}
.dd-item b{display:block;font-family:var(--font-h);font-size:15.5px}
.dd-item b a{text-decoration:none;color:var(--ink);padding:0}
.dd-item span{display:flex;gap:12px;margin-top:3px}
.dd-item span a{font-size:13.5px;color:var(--teal-2);font-weight:600;text-decoration:none;padding:0}
.dd-item span a:hover{text-decoration:underline}
.dd-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--ink);color:#CFE6DF;border-radius:14px;padding:12px 14px;font-size:14px}
.dd-foot a{color:#fff;font-weight:700;text-decoration:none;padding:0}
@media (min-width:900px){.burger{display:none}.drawer{display:none}}

/* Breadcrumbs */
.crumbs{font-size:13.5px;color:#9FC3BA;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:14px}
.crumbs a{color:#CFE6DF;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.5}
.crumbs.light{color:var(--muted)}
.crumbs.light a{color:var(--teal-2)}

/* Compact page hero */
.phero{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:#fff;padding:34px 0 40px}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%237FD3BF' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M-20 420c80-40 120-120 220-110s140 90 240 70 120-90 200-80'/%3E%3Cpath d='M-20 450c80-40 130-110 230-100s150 80 240 62 130-84 190-74'/%3E%3Cpath d='M-20 480c90-38 140-100 240-90s150 72 240 56 130-76 180-68'/%3E%3Cpath d='M-20 140c70 30 140 10 200-40s150-60 230-20 120 70 210 40'/%3E%3Cpath d='M-20 170c70 28 140 10 200-34s150-54 228-18 124 62 212 36'/%3E%3C/g%3E%3C/svg%3E");background-size:600px 600px}
.phero::after{content:"";position:absolute;right:-160px;top:-180px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.38),transparent 65%);z-index:-1}
.phero.has-img .pimg{position:absolute;inset:0;z-index:-3}
.phero.has-img .pimg img{width:100%;height:100%;object-fit:cover}
.phero.has-img .pshade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(8,32,29,.9),rgba(8,32,29,.95))}
.phero h1{font-size:clamp(30px,6.4vw,52px);font-weight:800;letter-spacing:-.03em;max-width:860px}
.phero .lead{color:#D3E7E1;font-size:clamp(16.5px,2.2vw,19px);margin-top:14px;max-width:720px}
.phero .meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:14px;color:#BFD8D1}
.phero .meta span{display:inline-flex;gap:7px;align-items:center}
.phero .meta svg{width:16px;height:16px;color:#7FD3BF}
.phero .btn{margin-top:22px}
@media (min-width:900px){.phero{padding:60px 0 68px}.phero.has-img .pshade{background:linear-gradient(100deg,rgba(8,32,29,.96) 0%,rgba(8,32,29,.88) 50%,rgba(8,32,29,.6) 100%)}}

/* Content layout met sticky zijbalk */
.layout{display:grid;gap:36px}
.layout aside{display:none}
@media (min-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
  .layout aside{display:block;position:sticky;top:100px}
}
.side-card{background:var(--ink);color:#fff;border-radius:22px;padding:22px;position:relative;overflow:hidden}
.side-card::after{content:"";position:absolute;right:-70px;bottom:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(70,211,176,.35),transparent 65%)}
.side-card h3{font-size:20px;font-weight:800}
.side-card p{color:#CFE6DF;font-size:15px;margin:8px 0 14px}
.side-card ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px;font-size:14.5px}
.side-card li{display:flex;gap:8px;align-items:center}
.side-card li svg{width:18px;height:18px;color:#46D3B0;flex:none}
.side-toc{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.side-toc b{font-family:var(--font-h);font-size:14px;display:block;margin-bottom:8px}
.side-toc a{display:block;font-size:14.5px;color:#2A4440;text-decoration:none;padding:5px 0;border-left:2px solid var(--line);padding-left:12px}
.side-toc a:hover{color:var(--teal-2);border-color:var(--teal-2)}

/* Prose */
.prose{max-width:760px}
.prose h2{font-size:clamp(25px,4.6vw,34px);font-weight:800;margin:44px 0 14px;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;font-weight:800;margin:28px 0 10px}
.prose p{margin:0 0 14px;color:#2A4440}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:#2A4440}
.prose li{margin-bottom:6px}
.prose a{color:var(--teal-2);font-weight:600}
.prose strong{color:var(--ink)}

/* Antwoordblok */
.answer{background:#F2FAF7;border:1px solid #CBE7DE;border-left:4px solid var(--teal-2);border-radius:16px;padding:18px 18px 16px;margin-bottom:28px}
.answer .lbl{font-family:var(--font-h);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-2);display:flex;gap:7px;align-items:center;margin-bottom:6px}
.answer .lbl svg{width:15px;height:15px}
.answer p{margin:0;color:var(--ink);font-size:17px}

/* Stat-tegels */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 6px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow-sm)}
.stat .si{width:34px;height:34px;border-radius:10px;background:var(--mint);color:var(--teal);display:grid;place-items:center;margin-bottom:10px}
.stat .si svg{width:18px;height:18px}
.stat small{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.stat strong{font-family:var(--font-h);font-size:17px;line-height:1.25;display:block;margin-top:2px}
@media (min-width:640px){.stats{grid-template-columns:repeat(4,1fr)}}

/* Geschikt / minder geschikt */
.fit{display:grid;gap:12px;margin-top:6px}
.fit > div{border-radius:18px;padding:18px;border:1px solid var(--line);background:#fff}
.fit .yes{background:#F2FAF7;border-color:#CBE7DE}
.fit h3{font-size:17px;font-weight:800;margin:0 0 10px;display:flex;gap:8px;align-items:center}
.fit h3 svg{width:22px;height:22px}
.fit .yes h3 svg{color:var(--teal-2)}
.fit .no h3 svg{color:#B6A98F}
.fit ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.fit li{display:flex;gap:9px;font-size:15.5px;color:#2A4440}
.fit li svg{width:18px;height:18px;flex:none;margin-top:3px}
.fit .yes li svg{color:var(--teal-2)}
.fit .no li svg{color:#B6A98F}
@media (min-width:640px){.fit{grid-template-columns:1fr 1fr}}

/* Prijstabel (op mobiel kaarten) */
.ptable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:6px 0 10px;font-size:15.5px}
.ptable th{background:var(--ink);color:#fff;text-align:left;font-family:var(--font-h);font-size:14px;padding:13px 16px}
.ptable td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top;color:#2A4440}
.ptable td:first-child{font-weight:700;color:var(--ink)}
.ptable td.p{font-family:var(--font-h);font-weight:800;color:var(--ink);white-space:nowrap}
.ptable tr:nth-child(even) td{background:#FBF9F4}
@media (max-width:639px){
  .ptable thead{display:none}
  .ptable,.ptable tbody{display:block}
  .ptable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 16px;border-top:1px solid var(--line)}
  .ptable tr:first-child{border-top:0}
  .ptable td{padding:0;border:0;background:none!important}
  .ptable td:nth-child(3){grid-column:1/-1;font-size:14.5px;color:var(--muted);margin-top:4px}
  .ptable tr:nth-child(even){background:#FBF9F4}
}

/* Calculator */
.calc{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:20px;margin:10px 0 8px;border:1px solid var(--line);position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#2FB39A,var(--accent))}
.calc h3{font-size:19px;font-weight:800;margin:4px 0 4px}
.calc .hint{font-size:14px;color:var(--muted);margin-bottom:14px}
.calc .chips{margin-bottom:16px}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.calc-row label{font-weight:600;font-size:15px}
.calc-row output{font-family:var(--font-h);font-weight:800;font-size:18px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--teal-2) var(--p,50%),var(--sand-2) var(--p,50%))}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--sand-2)}
input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--teal-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--teal-2);margin-top:-10px;box-shadow:0 4px 12px rgba(11,36,33,.25)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--teal-2);box-shadow:0 4px 12px rgba(11,36,33,.25)}
.calc-out{margin-top:14px;background:var(--sand);border-radius:16px;padding:16px}
.calc-out small{display:block;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.calc-out b{display:block;font-family:var(--font-h);font-size:clamp(26px,6vw,34px);font-weight:800;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.calc-out .extra{font-size:14.5px;color:#2A4440;margin-top:6px}
.calc .btn{margin-top:14px}

/* Criteria */
.crit{display:grid;gap:12px;counter-reset:c;margin:8px 0 10px}
.crit > div{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 16px 16px 62px;box-shadow:var(--shadow-sm)}
.crit > div::before{counter-increment:c;content:counter(c);position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:10px;background:var(--teal);color:#fff;font-family:var(--font-h);font-weight:800;display:grid;place-items:center;font-size:15px}
.crit h3{font-size:17px;font-weight:800;margin:4px 0 4px}
.crit p{margin:0;font-size:15.5px;color:var(--muted)}
@media (min-width:640px){.crit{grid-template-columns:1fr 1fr}}

/* Merken */
.brands{display:grid;gap:14px;margin:10px 0}
.brand{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px}
.brand-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.brand h3{font-size:19px;font-weight:800;margin:0}
.brand .tag{font-size:12px;font-weight:700;background:var(--mint);color:var(--teal);padding:5px 9px;border-radius:999px;white-space:nowrap}
.brand p{margin:0;font-size:15.5px;color:#2A4440}
.brand .fitfor{font-size:14px;color:var(--muted)}
.brand .fitfor b{color:var(--ink)}
.brand a.more{margin-top:auto;padding-top:6px;font-weight:700;font-size:15px;color:var(--teal-2);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.brand a.more svg{width:16px;height:16px}
@media (min-width:640px){.brands{grid-template-columns:1fr 1fr}}
.note-box{display:flex;gap:10px;font-size:14px;color:var(--muted);background:var(--sand);border-radius:14px;padding:12px 14px;margin:6px 0 18px}
.note-box svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--teal-2)}

/* Gerelateerd */
.related{display:grid;gap:14px}
.rel{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.rel:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rel img{width:84px;height:84px;border-radius:12px;object-fit:cover;flex:none;background:var(--sand-2)}
.rel b{font-family:var(--font-h);font-size:17px;display:block}
.rel span{font-size:14.5px;color:var(--muted);display:block;margin-top:2px}
.rel em{font-style:normal;font-size:14px;color:var(--teal-2);font-weight:700;display:inline-flex;gap:5px;align-items:center;margin-top:6px}
.rel em svg{width:15px;height:15px}
@media (min-width:640px){.related{grid-template-columns:repeat(3,1fr)}.rel{flex-direction:column;align-items:flex-start}.rel img{width:100%;height:150px}}

/* Installatie-tijdlijn */
.tl{list-style:none;padding:0;margin:8px 0 10px;display:grid;gap:0}
.tl li{position:relative;padding:0 0 20px 40px}
.tl li::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl li span{position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:var(--mint);border:2px solid var(--teal-2)}
.tl b{display:block;font-family:var(--font-h);font-size:16.5px}
.tl p{margin:3px 0 0;color:var(--muted);font-size:15.5px}

/* Section variants */
.s-tight{padding:48px 0}
@media (min-width:900px){.s-tight{padding:72px 0}}
.form-bottom{display:grid;gap:26px;align-items:center}
.form-bottom .formcard{box-shadow:var(--shadow)}
@media (min-width:900px){.form-bottom{grid-template-columns:1fr 1fr;gap:56px}}
.form-bottom h2{font-size:clamp(28px,5.4vw,42px);font-weight:800}
.form-bottom p.l{color:var(--muted);margin-top:12px;font-size:18px}

/* Regio */
.regions .soon{display:flex;justify-content:space-between;align-items:center;gap:8px;background:transparent;border:1px dashed #D5CCB8;border-radius:12px;padding:12px 14px;font-weight:600;font-size:15px;color:#8C9C97}
.regions .soon small{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.regions[hidden]{display:none}
.cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cities span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:14.5px;font-weight:600}
.local{display:grid;gap:12px;margin:10px 0}
.local > div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:12px}
.local .li{width:38px;height:38px;border-radius:11px;background:var(--mint);color:var(--teal);display:grid;place-items:center;flex:none}
.local .li svg{width:20px;height:20px}
.local h3{font-size:16.5px;font-weight:800;margin:2px 0 4px}
.local p{margin:0;font-size:15px;color:var(--muted)}
@media (min-width:640px){.local{grid-template-columns:1fr 1fr}}

/* Partner- en contactformulier */
.pcard{background:#fff;color:var(--ink);border-radius:22px;box-shadow:var(--shadow-lg);padding:20px}
@media (min-width:640px){.pcard{padding:28px}}
.pcard h2{font-size:22px;font-weight:800;margin-bottom:6px}
.pcard .sub{color:var(--muted);font-size:15px;margin-bottom:18px}
.grid2{display:grid;gap:0 12px}
@media (min-width:520px){.grid2{grid-template-columns:1fr 1fr}}
textarea.input{height:auto;min-height:110px;padding:12px 14px;resize:vertical;line-height:1.5}
.cbx{display:flex;flex-wrap:wrap;gap:8px}
.cbx label{position:relative;display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:9px 13px;font-size:14.5px;font-weight:500;cursor:pointer;min-height:42px;user-select:none;-webkit-tap-highlight-color:transparent}
.cbx input{position:absolute;opacity:0;pointer-events:none}
.cbx label:has(input:checked){background:var(--teal);border-color:var(--teal);color:#fff}
.cbx label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(19,105,95,.3)}
.cbx label svg{width:17px;height:17px}
.ok-box{display:none;text-align:center;padding:16px 4px}
.ok-box.show{display:block}
.ok-box .badge{width:60px;height:60px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:var(--mint);color:var(--teal-2)}
.ok-box .badge svg{width:32px;height:32px}
.ok-box h3{font-size:21px;margin-bottom:6px}
.ok-box p{color:var(--muted)}
.hero-plain{grid-template-columns:1fr!important}

/* Kaarten algemeen */
.cards3{display:grid;gap:14px}
@media (min-width:640px){.cards3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow-sm)}
.card .ci{width:42px;height:42px;border-radius:12px;background:var(--mint);color:var(--teal);display:grid;place-items:center;margin-bottom:14px}
.card .ci svg{width:22px;height:22px}
.card h3{font-size:18.5px;font-weight:800}
.card p{color:var(--muted);font-size:15.5px;margin-top:6px}

/* Transparantieblok */
.money{background:var(--ink);color:#fff;border-radius:22px;padding:24px;position:relative;overflow:hidden}
.money::after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.4),transparent 65%)}
.money h2{font-size:clamp(24px,4.4vw,32px);font-weight:800}
.money p{color:#CFE6DF;margin-top:10px}
@media (min-width:900px){.money{padding:40px}}

/* Contactinfo */
.cinfo{display:grid;gap:12px;align-content:start}
.cinfo > div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:12px}
.cinfo .li{width:38px;height:38px;border-radius:11px;background:var(--mint);color:var(--teal);display:grid;place-items:center;flex:none}
.cinfo .li svg{width:20px;height:20px}
.cinfo b{font-family:var(--font-h);display:block}
.cinfo span,.cinfo a{font-size:15px;color:var(--muted)}
.cinfo a{color:var(--teal-2);font-weight:600;text-decoration:none}

/* Juridisch */
.legal{display:grid;gap:30px}
@media (min-width:1000px){.legal{grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}.legal nav{position:sticky;top:100px}}
.legal nav{background:var(--sand);border-radius:18px;padding:16px 18px}
.legal nav b{font-family:var(--font-h);font-size:14px;display:block;margin-bottom:6px}
.legal nav a{display:block;font-size:14.5px;color:#2A4440;text-decoration:none;padding:6px 0}
.legal nav a:hover{color:var(--teal-2)}
.legal .prose h2{font-size:clamp(21px,3.8vw,26px);margin-top:34px}
.ctable{width:100%;border-collapse:collapse;font-size:14.5px;margin:6px 0 18px}
.ctable th,.ctable td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.ctable th{font-family:var(--font-h);font-size:13.5px;color:var(--muted)}
.todo{background:#FFF3E6;border:1px dashed var(--accent);color:#9A4A0C;border-radius:6px;padding:1px 6px;font-size:.92em;font-weight:600;white-space:nowrap}
.draft{display:flex;gap:10px;align-items:flex-start;background:#FFF3E6;border:1px solid #FFD2AE;color:#7A3B08;border-radius:14px;padding:12px 14px;font-size:14.5px;margin-bottom:24px}
.draft svg{width:18px;height:18px;flex:none;margin-top:2px}

/* Bedankt */
.thanks{text-align:center;max-width:720px;margin:0 auto}
.thanks .big{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:#46D3B0;color:var(--ink);box-shadow:0 0 0 10px rgba(70,211,176,.18),0 0 0 22px rgba(70,211,176,.08);animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.thanks .big svg{width:44px;height:44px}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.tsteps{display:grid;gap:12px;text-align:left;margin-top:8px}
.tsteps > div{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm)}
.tsteps .when{font-family:var(--font-h);font-weight:800;font-size:13px;color:#fff;background:var(--teal);border-radius:10px;padding:6px 10px;height:max-content;white-space:nowrap}
.tsteps b{font-family:var(--font-h);display:block;font-size:16.5px}
.tsteps p{margin:3px 0 0;color:var(--muted);font-size:15px}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.checklist li svg{width:20px;height:20px;color:var(--teal-2);flex:none;margin-top:2px}

/* Footer met meer kolommen */
@media (min-width:640px){.f-grid{grid-template-columns:1fr 1fr 1fr}.f-brand{grid-column:1/-1}}
@media (min-width:1000px){.f-grid{grid-template-columns:1.6fr repeat(4,1fr)}.f-brand{grid-column:auto}}

/* fixes na test */
nav.main .dd-foot a{color:#fff;font-weight:700}
nav.main .dd-item b a{color:var(--ink);font-weight:700}
nav.main .dd-item span a{color:var(--teal-2);font-weight:600;font-size:13.5px}
.side-card .btn{text-align:center}
.regions{grid-template-columns:repeat(2,minmax(0,1fr))}
.regions a{min-width:0}
.regions .soon{min-width:0;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25}
@media (min-width:640px){.regions{grid-template-columns:repeat(3,minmax(0,1fr))}}
.checklist li > span,.fit li > span,.side-card li > span{min-width:0}

/* ================= BLOG ================= */
@media (min-width:900px) and (max-width:1100px){nav.main{gap:18px}nav.main a,.dd-btn{font-size:14.5px}.head-cta .long{display:none}.head-cta .short{display:inline}}
.blog-hero{padding-bottom:46px}
.bsearch{position:relative;margin-top:22px;max-width:560px}
.bsearch svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none}
.bsearch input{width:100%;height:56px;border-radius:16px;border:0;padding:0 16px 0 46px;font-size:16px;background:#fff;color:var(--ink);box-shadow:0 10px 30px -10px rgba(0,0,0,.45);outline:none}
.bsearch input:focus{box-shadow:0 0 0 4px rgba(255,122,26,.35),0 10px 30px -10px rgba(0,0,0,.45)}
.mlinks-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:14px}
.mlinks-head .mh{font-family:var(--font-h);font-weight:800;font-size:19px}
.mlinks{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.mlinks::-webkit-scrollbar{display:none}
.mlink{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .2s,border-color .2s}
.mlink:hover{transform:translateY(-2px);border-color:var(--teal-2)}
.mlink .ti{width:38px;height:38px;border-radius:11px;background:var(--mint);color:var(--teal);display:grid;place-items:center;flex:none}
.mlink .ti svg{width:20px;height:20px}
.mlink b{display:block;font-family:var(--font-h);font-size:15px;white-space:nowrap}
.mlink small{display:block;font-size:13px;color:var(--muted);white-space:nowrap}
.mlink .ar{width:16px;height:16px;color:var(--teal-2);flex:none}
@media (min-width:1000px){.mlinks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}.mlink b,.mlink small{white-space:normal}}

.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;min-width:0}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sand-2);max-width:100%}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.post:hover .post-img img{transform:scale(1.05)}
.pcat{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.95);color:var(--teal);font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;text-decoration:none}
.pcat-hero{position:static;display:inline-block;margin-bottom:12px;background:var(--accent);color:#fff}
.post-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.post h3{font-size:19px;font-weight:800;line-height:1.25;text-wrap:balance}
.post h3 a{text-decoration:none;color:var(--ink)}
.post h3 a:hover{color:var(--teal-2)}
.post p{color:var(--muted);font-size:15.5px}
.pmeta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:auto;padding-top:6px;font-size:13px;color:var(--muted)}
.pmeta span{display:inline-flex;align-items:center;gap:6px}
.pmeta svg{width:15px;height:15px}
.post-big{margin-bottom:26px}
.post-big h3{font-size:clamp(22px,4vw,32px)}
.post-big p{font-size:17px}
@media (min-width:900px){.post-big{display:grid;grid-template-columns:1.2fr 1fr}.post-big .post-img{aspect-ratio:auto;min-height:340px}.post-big .post-body{padding:34px;justify-content:center}}
.bfilter{margin-bottom:18px}
.bfilter .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.bfilter .chips::-webkit-scrollbar{display:none}
.bfilter .chip{flex:none}
.pgrid{display:grid;gap:16px}
@media (min-width:640px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post-cta{background:var(--ink);color:#fff;padding:24px;justify-content:center;gap:12px;position:relative;overflow:hidden;border:0}
.post-cta::after{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.4),transparent 65%)}
.post-cta h3{font-size:22px;font-weight:800;color:#fff}
.post-cta .checklist{color:#DDEFE9;font-size:15px}
.post-cta .checklist svg{color:#46D3B0}
.post-cta:hover{transform:none}
.bempty{text-align:center;color:var(--muted);padding:30px 0}
.bempty a{color:var(--teal-2);font-weight:600}
.pager{display:flex;justify-content:center;gap:8px;margin-top:30px;flex-wrap:wrap}
.pager a,.pager span{min-width:44px;height:44px;padding:0 14px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);text-decoration:none;font-weight:700;background:#fff}
.pager .cur{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager svg{width:16px;height:16px}

/* Artikel */
.readbar{position:fixed;left:0;right:0;top:0;height:4px;z-index:70;background:transparent;pointer-events:none}
.readbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2FB39A,var(--accent))}
.art-hero h1{max-width:900px;text-wrap:balance}
.author-row{display:flex;align-items:center;gap:12px;margin-top:22px}
.author-row b{display:block;font-size:15px}
.author-row span{display:block;font-size:13.5px;color:#BFD8D1}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#7FD3BF;color:var(--ink);font-family:var(--font-h);font-weight:800;font-size:15px;flex:none}
.art{font-size:18px;line-height:1.7}
.art p{color:#24403B}
.art h3{font-size:21px}
.keys{background:var(--sand);border-radius:18px;padding:18px 20px;margin:0 0 30px}
.keys b{font-family:var(--font-h);font-size:16px;display:block;margin-bottom:10px}
.keys ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.keys li{display:flex;gap:10px;font-size:16px;margin:0}
.keys li svg{width:19px;height:19px;color:var(--teal-2);flex:none;margin-top:4px}
.icta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;background:linear-gradient(135deg,#0B2421,#0F4C45);color:#fff;border-radius:20px;padding:18px;margin:30px 0;position:relative;overflow:hidden}
.icta::after{content:"";position:absolute;right:-60px;bottom:-80px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.35),transparent 65%);pointer-events:none}
.icta-ic{width:48px;height:48px;border-radius:14px;background:rgba(127,211,191,.15);color:#7FD3BF;display:grid;place-items:center}
.icta-ic svg{width:26px;height:26px}
.icta-tx b{display:block;font-family:var(--font-h);font-size:18px;line-height:1.25}
.icta-tx span{display:block;font-size:15px;color:#CFE6DF;line-height:1.45;margin-top:3px}
.icta .btn{grid-column:1/-1;position:relative;z-index:1}
@media (min-width:640px){.icta{grid-template-columns:auto minmax(0,1fr) auto;padding:20px 22px}.icta .btn{grid-column:auto;white-space:nowrap}}
.art .icta .btn{color:#fff}
.art-fig{margin:26px 0}
.art-fig img{width:100%;border-radius:18px;aspect-ratio:16/9;object-fit:cover}
.art-fig figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.tscroll{overflow-x:auto;margin:8px 0 18px}
.art .ptable{font-size:15.5px;line-height:1.5}
.art .ptable td.p{white-space:normal;font-family:var(--font-b);font-weight:600}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:30px 0}
.share b{font-family:var(--font-h);font-size:15px}
.share div{display:flex;flex-wrap:wrap;gap:8px}
.share a,.share button{font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--teal-2);color:var(--teal-2)}
.authorbox{display:flex;gap:14px;background:var(--sand);border-radius:18px;padding:18px}
.authorbox b{font-family:var(--font-h);font-size:16px}
.authorbox p{font-size:15px;color:var(--muted);margin:4px 0 0;line-height:1.55}
.toc-m{background:var(--sand);border-radius:16px;margin-bottom:22px;font-size:16px}
.toc-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;font-family:var(--font-h);font-weight:700}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary svg{width:18px;height:18px;color:var(--teal-2)}
.toc-m summary .chev{margin-left:auto;transition:transform .2s}
.toc-m[open] summary .chev{transform:rotate(180deg)}
.toc-m div{padding:0 16px 12px;display:grid}
.toc-m a{padding:8px 0;border-top:1px solid var(--line);color:#2A4440;text-decoration:none;font-weight:500}
@media (min-width:1000px){.toc-m{display:none}}
.side-toc a.on{color:var(--teal-2);border-color:var(--teal-2);font-weight:600}
.art h2{scroll-margin-top:100px}
.layout{grid-template-columns:minmax(0,1fr)}
.layout > *{min-width:0}
@media (min-width:1000px){.layout{grid-template-columns:minmax(0,1fr) 320px}}
.todo{white-space:normal}

.fhint{font-size:14.5px;color:var(--muted);margin:-4px 0 14px}
fieldset.step{border:0;padding:0;margin:0;min-width:0}

/* WordPress */
.wp-block-html{margin:0}
.admin-bar header.site{top:32px}
@media (max-width:782px){.admin-bar header.site{top:46px}}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

a.chip{text-decoration:none;display:inline-flex;align-items:center;color:var(--ink)}
a.chip[aria-pressed="true"]{color:#fff}

/* ===== v1.1 diepte & patronen ===== */
:root{--shadow:0 1px 1px rgba(11,36,33,.04),0 6px 14px -4px rgba(11,36,33,.08),0 26px 48px -20px rgba(11,36,33,.30);--shadow-sm:0 1px 1px rgba(11,36,33,.04),0 3px 8px -2px rgba(11,36,33,.07),0 14px 28px -18px rgba(11,36,33,.22);--gborder:linear-gradient(160deg,rgba(143,220,200,.95),rgba(227,220,205,.75) 32%,rgba(227,220,205,.75) 68%,rgba(255,122,26,.38))}
section.s{position:relative;isolation:isolate}
section.s:not(.bg-sand):not(.bg-dots):not(.s-tight)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 .5H.5V56' fill='none' stroke='%230F4C45' stroke-opacity='.07'/%3E%3Cpath d='M.5 -3.5v8M-3.5 .5h8' stroke='%230F4C45' stroke-opacity='.16'/%3E%3C/svg%3E");background-size:56px 56px;background-position:center -1px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 0%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 75% 70% at 50% 0%,#000 10%,transparent 72%)}
.bg-sand{background:radial-gradient(ellipse 60% 50% at 100% 0%,rgba(143,220,200,.32),transparent 70%),radial-gradient(ellipse 50% 45% at 0% 100%,rgba(255,178,122,.20),transparent 70%),var(--sand)}
.bg-sand::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='520' viewBox='0 0 720 520'%3E%3Cg fill='none' stroke='%230F4C45' stroke-opacity='.085' stroke-width='1.1'%3E%3Cpath d='M-20 300c90-44 150-118 260-106s160 92 260 72 140-92 240-80'/%3E%3Cpath d='M-20 322c90-44 150-118 260-106s160 92 260 72 140-92 240-80'/%3E%3Cpath d='M-20 344c90-44 150-118 260-106s160 92 260 72 140-92 240-80'/%3E%3Cpath d='M-20 366c90-44 150-118 260-106s160 92 260 72 140-92 240-80'/%3E%3Cpath d='M-20 388c90-44 150-118 260-106s160 92 260 72 140-92 240-80'/%3E%3Cpath d='M-20 410c90-44 150-118 260-106s160 92 260 72 140-92 240-80'/%3E%3Cpath d='M-20 60c80 34 150 12 220-40s170-60 250-20 130 70 270 42'/%3E%3Cpath d='M-20 80c80 34 150 12 220-40s170-60 250-20 130 70 270 42'/%3E%3Cpath d='M-20 100c80 34 150 12 220-40s170-60 250-20 130 70 270 42'/%3E%3Cpath d='M-20 120c80 34 150 12 220-40s170-60 250-20 130 70 270 42'/%3E%3Cpath d='M-20 140c80 34 150 12 220-40s170-60 250-20 130 70 270 42'/%3E%3C/g%3E%3C/svg%3E");background-size:720px 520px;-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 60%,#000);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 60%,#000)}
section.bg-sand::after{content:"";position:absolute;right:max(10px,calc(50% - 640px));top:18px;width:300px;height:144px;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='220' viewBox='0 0 460 220'%3E%3Cpath d='M18 196C110 176 150 70 250 84s120 70 190-60' fill='none' stroke='%2313695F' stroke-opacity='.35' stroke-width='2' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='196' r='6' fill='none' stroke='%2313695F' stroke-opacity='.45' stroke-width='2'/%3E%3Ccircle cx='18' cy='196' r='2' fill='%2313695F' fill-opacity='.5'/%3E%3Cpath d='M440 24l-16 4 6 4-3 7z' fill='%23FF7A1A' fill-opacity='.75'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.9}
.bg-dots{background-color:var(--sand);background-image:radial-gradient(ellipse 55% 45% at 0% 0%,rgba(143,220,200,.40),transparent 70%),radial-gradient(ellipse 45% 40% at 100% 100%,rgba(255,122,26,.12),transparent 70%),radial-gradient(rgba(15,76,69,.15) 1.2px,transparent 1.3px);background-size:auto,auto,22px 22px}
.hero::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%237FD3BF' stroke-opacity='.18' stroke-width='1'%3E%3Cpath d='M-20 420c80-40 120-120 220-110s140 90 240 70 120-90 200-80'/%3E%3Cpath d='M-20 450c80-40 130-110 230-100s150 80 240 62 130-84 190-74'/%3E%3Cpath d='M-20 480c90-38 140-100 240-90s150 72 240 56 130-76 180-68'/%3E%3Cpath d='M-20 510c90-34 150-88 250-80s150 64 236 50 124-70 174-62'/%3E%3Cpath d='M-20 140c70 30 140 10 200-40s150-60 230-20 120 70 210 40'/%3E%3Cpath d='M-20 170c70 28 140 10 200-34s150-54 228-18 124 62 212 36'/%3E%3Cpath d='M-20 200c70 26 146 8 204-30s146-48 222-16 128 56 214 32'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238FDCC8'%3E%3Ccircle cx='320' cy='320' r='300' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='238' stroke-opacity='.13' stroke-dasharray='3 10'/%3E%3Ccircle cx='320' cy='320' r='176' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='114' stroke-opacity='.16'/%3E%3Cpath d='M60 380L580 260' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cpath d='M320 8v26M320 606v26M8 320h26M606 320h26M99 99l18 18M541 99l-18 18' stroke-opacity='.28' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M250 330h44l26 22 26-22h44' fill='none' stroke='%23FF7A1A' stroke-opacity='.35' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:180px 180px,600px 600px,760px 760px;background-repeat:repeat,repeat,no-repeat;background-position:0 0,0 0,calc(100% + 260px) -200px;opacity:.6}
.phero::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%237FD3BF' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M-20 420c80-40 120-120 220-110s140 90 240 70 120-90 200-80'/%3E%3Cpath d='M-20 450c80-40 130-110 230-100s150 80 240 62 130-84 190-74'/%3E%3Cpath d='M-20 480c90-38 140-100 240-90s150 72 240 56 130-76 180-68'/%3E%3Cpath d='M-20 140c70 30 140 10 200-40s150-60 230-20 120 70 210 40'/%3E%3Cpath d='M-20 170c70 28 140 10 200-34s150-54 228-18 124 62 212 36'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238FDCC8'%3E%3Ccircle cx='320' cy='320' r='300' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='238' stroke-opacity='.13' stroke-dasharray='3 10'/%3E%3Ccircle cx='320' cy='320' r='176' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='114' stroke-opacity='.16'/%3E%3Cpath d='M60 380L580 260' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cpath d='M320 8v26M320 606v26M8 320h26M606 320h26M99 99l18 18M541 99l-18 18' stroke-opacity='.28' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M250 330h44l26 22 26-22h44' fill='none' stroke='%23FF7A1A' stroke-opacity='.35' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:180px 180px,600px 600px,560px 560px;background-repeat:repeat,repeat,no-repeat;background-position:0 0,0 0,calc(100% + 200px) 50%}
.final::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238FDCC8'%3E%3Ccircle cx='320' cy='320' r='300' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='238' stroke-opacity='.13' stroke-dasharray='3 10'/%3E%3Ccircle cx='320' cy='320' r='176' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='114' stroke-opacity='.16'/%3E%3Cpath d='M60 380L580 260' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cpath d='M320 8v26M320 606v26M8 320h26M606 320h26M99 99l18 18M541 99l-18 18' stroke-opacity='.28' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M250 330h44l26 22 26-22h44' fill='none' stroke='%23FF7A1A' stroke-opacity='.35' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% + 340px) 40%/760px 760px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:.55}
footer.site{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 50% 60% at 100% 0%,rgba(19,105,95,.45),transparent 70%),var(--ink)}
footer.site::before{content:"";position:absolute;right:-220px;bottom:-260px;width:640px;height:640px;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238FDCC8'%3E%3Ccircle cx='320' cy='320' r='300' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='238' stroke-opacity='.13' stroke-dasharray='3 10'/%3E%3Ccircle cx='320' cy='320' r='176' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='114' stroke-opacity='.16'/%3E%3Cpath d='M60 380L580 260' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cpath d='M320 8v26M320 606v26M8 320h26M606 320h26M99 99l18 18M541 99l-18 18' stroke-opacity='.28' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M250 330h44l26 22 26-22h44' fill='none' stroke='%23FF7A1A' stroke-opacity='.35' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.8}
footer.site::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:.5}
.band{box-shadow:0 30px 60px -28px rgba(4,24,21,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.band::before{background-image:radial-gradient(rgba(127,211,191,.22) 1.2px,transparent 1.3px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238FDCC8'%3E%3Ccircle cx='320' cy='320' r='300' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='238' stroke-opacity='.13' stroke-dasharray='3 10'/%3E%3Ccircle cx='320' cy='320' r='176' stroke-opacity='.10'/%3E%3Ccircle cx='320' cy='320' r='114' stroke-opacity='.16'/%3E%3Cpath d='M60 380L580 260' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cpath d='M320 8v26M320 606v26M8 320h26M606 320h26M99 99l18 18M541 99l-18 18' stroke-opacity='.28' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M250 330h44l26 22 26-22h44' fill='none' stroke='%23FF7A1A' stroke-opacity='.35' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:20px 20px,520px 520px;background-repeat:repeat,no-repeat;background-position:0 0,calc(100% + 180px) 50%}
.svc,.st,.inst,.brand,.post:not(.post-cta),.cost-card,.compare,.faq details{border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--gborder) border-box}
.faq details[open]{border-color:transparent}
.st,.inst,.brand,.faq details{box-shadow:var(--shadow-sm)}
.st{overflow:hidden}
.st::after{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(15,76,69,.07) 0 1px,transparent 1px 14px);pointer-events:none}
.st .num{background:linear-gradient(145deg,#13695F,#0B2421);box-shadow:0 10px 20px -8px rgba(15,76,69,.85),inset 0 1px 0 rgba(255,255,255,.18)}
.tile .ti,.dsvc .ti,.dd-item .ti,.mlink .ti{background:linear-gradient(150deg,#EEF8F4,#C9E9DE);box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(15,76,69,.55)}
.formcard{box-shadow:0 2px 4px rgba(4,24,21,.08),0 40px 80px -24px rgba(4,24,21,.6),0 0 0 6px rgba(255,255,255,.06)}
.svc-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.4)}
.s-head .kicker{display:inline-flex;align-items:center;gap:10px}
.s-head .kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),rgba(255,122,26,.2))}
.final .kicker::before,.band .kicker::before{background:linear-gradient(90deg,#FFB27A,rgba(255,178,122,.2))}
@media (max-width:640px){section.bg-sand::after{width:190px;height:92px;top:8px;opacity:.6}footer.site::before{width:420px;height:420px;right:-200px;bottom:-160px}}
@media (max-width:640px){.phero::before{background-size:180px 180px,600px 600px,0 0}.hero::after{background-size:180px 180px,600px 600px,0 0}}

/* ===== v1.2 CRO-landingspagina's ===== */
.lp-anchor{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:9px 14px 9px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#E7F3EF;font-size:15px;backdrop-filter:blur(4px)}
.lp-anchor svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--accent);color:#fff;flex:none}
.lp-anchor b{color:#fff;font-family:var(--font-h);font-weight:800}
.lp-sum .answer{margin-bottom:0}
.lp-sum .stats{margin-top:16px}
.lp-jump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;font-size:14px}
.lp-jump span{color:var(--muted);font-weight:600;margin-right:2px}
.lp-jump a{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--sand);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.lp-jump a:hover{border-color:var(--teal-2);color:var(--teal-2)}
.lp-band{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin:30px 0;padding:20px 22px;border-radius:18px;background:linear-gradient(135deg,#0B2421,#0F4C45);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.lp-band::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.4),transparent 65%);z-index:-1}
.lp-band b{display:block;font-family:var(--font-h);font-size:19px;font-weight:800;line-height:1.3}
.lp-band span{display:block;color:#CFE6DF;font-size:15px;margin-top:4px}
.lp-two{display:grid;gap:28px;align-items:start}
.lp-quote{background:var(--ink);color:#fff;border-radius:22px;padding:24px;position:relative;overflow:hidden;isolation:isolate}
.lp-quote::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 28px)}
.lp-quote-tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FFB27A}
.lp-quote-tag svg{width:16px;height:16px}
.lp-quote h3{font-size:21px;font-weight:800;margin:10px 0 14px}
.lp-quote ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.lp-quote li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#DCEDE8;line-height:1.45}
.lp-quote li svg{width:18px;height:18px;color:#46D3B0;flex:none;margin-top:2px}
.lp-quote p{margin:16px 0 0;font-size:14px;color:#9DBDB5}
.lp-obj{display:grid;gap:14px}
.lp-obj-c{background:linear-gradient(#fff,#fff) padding-box,var(--gborder) border-box;border:1px solid transparent;border-radius:18px;padding:20px;box-shadow:var(--shadow-sm)}
.lp-obj-c b{display:block;font-family:var(--font-h);font-size:17px;font-weight:800;line-height:1.3;margin-bottom:6px}
.lp-obj-c p{margin:0;color:var(--muted);font-size:15.5px}
.lp-obj-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px;text-align:center;font-size:14px;color:var(--muted)}
.lp-obj-cta span{display:inline-flex;gap:6px;align-items:center}
.lp-obj-cta span svg{width:15px;height:15px}
.prose .ptable{margin:14px 0 6px}
@media (min-width:700px){.lp-band{flex-direction:row;align-items:center;justify-content:space-between}.lp-band .btn{flex:none}.lp-obj{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.lp-two{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px}.lp-quote{position:sticky;top:110px}}
.lp-fig{margin:24px 0;border-radius:18px;overflow:hidden;background:var(--sand);box-shadow:var(--shadow-sm)}
.lp-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lp-fig figcaption{font-size:13px;color:var(--muted);padding:9px 14px}
.lp-table{width:100%;border-collapse:collapse;margin:16px 0 8px;font-size:15px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lp-table th{background:var(--ink);color:#fff;text-align:left;font-weight:700;padding:11px 12px;font-size:14px}
.lp-table td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:top}
.lp-table td:first-child{font-weight:700}
.lp-tbl-wrap{overflow-x:auto;margin:0 -2px}
.lp-tip{display:flex;gap:12px;background:var(--mint);border-radius:14px;padding:14px 16px;margin:18px 0;font-size:15.5px}
.lp-tip svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:3px}
.lp-tip p{margin:0}
.lp-read{display:grid;gap:10px;margin:18px 0}
.lp-read a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);font-weight:600}
.lp-read a:hover{border-color:var(--teal-2)}
.lp-read a small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.lp-read a svg{width:18px;height:18px;color:var(--teal-2);flex:none}