:root{
  --paper:#FAF7F2; --paper-2:#F4EDE3; --ink:#23221F; --ink-soft:#5C574F;
  --pine:#20473F; --pine-2:#2C6052; --amber:#E2A24A; --amber-soft:#F4D9A8;
  --blush:#F2E7DA; --line:#E7DBCB; --white:#fff; --r:18px; --maxw:1140px;
  --shadow:0 1px 2px rgba(35,34,31,.04),0 10px 30px rgba(32,71,63,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--pine);margin:0 0 .4em;}
p{margin:0 0 1em}
a{color:var(--pine-2);text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--pine);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:16px;top:16px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(250,247,242,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.brand{display:flex;align-items:center;gap:.65em}
.brand .logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,var(--pine),var(--pine-2));color:#fff;display:grid;place-items:center;font-family:"Bricolage Grotesque";font-weight:700;font-size:1.25rem;box-shadow:var(--shadow)}
.brand .name{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.32rem;color:var(--pine);letter-spacing:-.01em;line-height:1}
.brand .name b{color:var(--amber)}
.brand small{display:block;font-family:"Hanken Grotesk";font-weight:600;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
.menu{display:flex;gap:.3em;align-items:center}
.menu a.link{padding:.55em .95em;border-radius:999px;color:var(--ink-soft);font-weight:500;transition:.15s}
.menu a.link:hover{color:var(--pine);background:var(--blush)}
.menu a.link.active{color:var(--pine);background:var(--blush);font-weight:600}
.nav-right{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:"Hanken Grotesk";font-weight:600;font-size:1rem;padding:.85em 1.5em;border-radius:999px;border:1.6px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s,box-shadow .15s,border-color .15s;text-align:center}
.btn-primary{background:var(--pine);color:#fff}
.btn-primary:hover{background:var(--pine-2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--pine);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--pine);background:var(--white)}
.btn-amber{background:var(--amber);color:#3a2a08}
.btn-amber:hover{background:#d99632;transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
.hamburger{display:none;background:var(--white);border:1.5px solid var(--line);border-radius:12px;width:46px;height:46px;cursor:pointer;align-items:center;justify-content:center}
.hamburger svg{width:22px;height:22px;color:var(--pine)}

/* shared bits */
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--pine-2);background:var(--blush);padding:.45em .95em;border-radius:999px;margin-bottom:1.2em}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.section{padding:58px 0}
.section.tight{padding:44px 0}
.section-head{max-width:60ch;margin-bottom:38px}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.section-head p{color:var(--ink-soft);font-size:1.1rem;margin:0}
.page-hero{padding:64px 0 18px}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.8rem)}
.page-hero p{font-size:1.18rem;color:var(--ink-soft);max-width:56ch}

/* photo */
.photo{position:relative;border-radius:26px;overflow:hidden;background:radial-gradient(120% 90% at 80% 0%,rgba(226,162,74,.16),transparent 60%),linear-gradient(160deg,var(--blush),var(--paper-2));border:1px solid var(--line);aspect-ratio:4/5;display:grid;place-items:center}
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block}
.badge-float{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:14px;padding:.65em .95em;display:flex;align-items:center;gap:.6em;font-size:.86rem;font-weight:600;color:var(--pine);box-shadow:var(--shadow)}
.badge-float .pulse{width:10px;height:10px;border-radius:50%;background:#3aa66f;box-shadow:0 0 0 0 rgba(58,166,111,.5);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,166,111,.5)}70%{box-shadow:0 0 0 9px rgba(58,166,111,0)}100%{box-shadow:0 0 0 0 rgba(58,166,111,0)}}

/* hero (home) */
.hero{padding:78px 0 44px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.3rem);margin-bottom:.35em}
.lead{font-size:1.18rem;color:var(--ink-soft);max-width:48ch}
.hero-cta{display:flex;gap:.8em;flex-wrap:wrap;margin-top:1.7em}
.u-draw{position:relative;white-space:nowrap;color:var(--pine)}
.u-draw svg{position:absolute;left:-2%;bottom:-.22em;width:104%;height:.42em;color:var(--amber)}

/* trust */
.trust{background:var(--pine);color:#fff;border-radius:22px;padding:20px 26px;display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;justify-content:center;font-weight:600;margin-top:18px;box-shadow:var(--shadow)}
.trust .t-lead{color:var(--amber-soft);font-weight:600;margin-right:8px}
.trust .chip{display:inline-flex;align-items:center;gap:.5em}
.trust .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}

/* split */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.split .photo{aspect-ratio:1/1}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s;display:flex;flex-direction:column}
a.card:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(32,71,63,.11)}
.card .ic{width:48px;height:48px;border-radius:14px;background:var(--blush);display:grid;place-items:center;color:var(--pine);margin-bottom:16px}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:1.18rem;margin-bottom:.35em}
.card p{font-size:.97rem;color:var(--ink-soft);margin:0 0 .8em}
.card .more{margin-top:auto;font-weight:600;color:var(--pine-2);font-size:.95rem;display:inline-flex;align-items:center;gap:.4em}
.card .more svg{width:16px;height:16px;transition:transform .15s}
a.card:hover .more svg{transform:translateX(3px)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.step{position:relative;padding-top:8px}
.step .n{font-family:"Bricolage Grotesque";font-weight:700;font-size:2.6rem;color:var(--amber);line-height:1;margin-bottom:.1em}
.step h3{font-size:1.2rem;margin-bottom:.3em}
.step p{color:var(--ink-soft);font-size:.98rem;margin:0}

/* band */
.band{background:linear-gradient(135deg,var(--pine),#163029);color:#fff;border-radius:28px;padding:50px;display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center}
.band h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem)}
.band p{color:rgba(255,255,255,.84);margin:0 0 .4em}
.band .eyebrow{background:rgba(255,255,255,.12);color:var(--amber-soft)}
.band-cta{display:flex;justify-content:flex-end}

/* quote */
.quote{max-width:66ch;margin:0 auto;text-align:center}
.quote .qm{font-family:"Bricolage Grotesque";font-size:3rem;color:var(--amber);line-height:0;display:block;height:.5em}
.quote blockquote{font-family:"Bricolage Grotesque";font-weight:600;font-size:clamp(1.4rem,3vw,2.05rem);color:var(--pine);line-height:1.28;margin:0}
.quote .who{color:var(--ink-soft);font-size:.98rem;margin-top:1.3em}
.quote .who b{color:var(--pine)}

/* cta band */
.cta-band{background:var(--blush);border-radius:28px;padding:54px;text-align:center}
.cta-band h2{font-size:clamp(1.9rem,4vw,2.7rem)}
.cta-band p{color:var(--ink-soft);max-width:50ch;margin:0 auto 1.6em;font-size:1.1rem}
.cta-row{display:flex;gap:.8em;justify-content:center;flex-wrap:wrap}

/* over: prose + values + factbar */
.prose p{margin-bottom:1.1em}
.prose p:first-of-type::first-letter{font-family:"Bricolage Grotesque";font-weight:700;font-size:3.2rem;float:left;line-height:.82;padding:.06em .12em 0 0;color:var(--amber)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.value{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.value .ic{width:46px;height:46px;border-radius:13px;background:var(--blush);display:grid;place-items:center;color:var(--pine);margin-bottom:14px}
.value .ic svg{width:23px;height:23px}
.value h3{font-size:1.14rem;margin-bottom:.3em}
.value p{font-size:.96rem;color:var(--ink-soft);margin:0}
.factbar{background:var(--pine);color:#fff;border-radius:24px;padding:34px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.fact .k{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.9rem;color:var(--amber-soft);line-height:1}
.fact .v{color:rgba(255,255,255,.82);font-size:.96rem;margin-top:.4em}

/* diensten */
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.toc a{font-size:.92rem;font-weight:600;color:var(--pine);background:var(--white);border:1px solid var(--line);padding:.5em 1em;border-radius:999px;transition:.15s}
.toc a:hover{background:var(--blush);transform:translateY(-2px)}
.svc{display:grid;grid-template-columns:.8fr 1.2fr;gap:46px;align-items:start;padding:46px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.svc:first-of-type{border-top:none}
.svc-vis{position:sticky;top:100px}
.svc-ic{width:64px;height:64px;border-radius:18px;background:linear-gradient(140deg,var(--pine),var(--pine-2));color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);margin-bottom:18px}
.svc-ic svg{width:30px;height:30px}
.svc-vis .num{font-family:"Bricolage Grotesque";font-weight:700;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.svc h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.45em}
.svc p{color:var(--ink-soft)}
.svc .checks{margin-top:14px;display:grid;gap:10px}
.svc .checks li{display:flex;gap:.7em;align-items:flex-start;font-size:1rem}
.svc .checks svg{width:22px;height:22px;color:var(--pine-2);flex-shrink:0;margin-top:2px}
.tag{display:inline-block;background:var(--blush);color:var(--pine);font-weight:600;font-size:.8rem;padding:.3em .8em;border-radius:999px;margin-bottom:14px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:46px;align-items:start}
.info-card{background:var(--pine);color:#fff;border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.info-card h2{color:#fff;font-size:1.5rem}
.info-card p.sub{color:rgba(255,255,255,.78);margin-bottom:1.6em}
.info-list li{display:flex;gap:.9em;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.info-list li:first-child{border-top:none}
.info-list .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0}
.info-list .ic svg{width:20px;height:20px;color:var(--amber-soft)}
.info-list .lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.info-list .val{font-weight:600;color:#fff}
.info-list a.val:hover{color:var(--amber-soft)}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.form-card h2{font-size:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.4em;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:.8em .9em;transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pine-2);box-shadow:0 0 0 3px rgba(44,96,82,.14)}
.form-note{font-size:.86rem;color:var(--ink-soft);margin-top:6px}
.privacy{font-size:.82rem;color:var(--ink-soft);margin-top:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{border-radius:14px;padding:16px 18px;margin-bottom:18px;font-weight:600;font-size:.95rem}
.alert-ok{background:#e6f4ec;color:#1c6b41;border:1px solid #bfe4cd}
.alert-err{background:#fae9e3;color:#9a3b22;border:1px solid #efc9bb}
.sent-box{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:40px;text-align:center;box-shadow:var(--shadow)}
.sent-box .ok-ic{width:64px;height:64px;border-radius:50%;background:#e6f4ec;color:#1c6b41;display:grid;place-items:center;margin:0 auto 18px}
.sent-box .ok-ic svg{width:32px;height:32px}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq h2{text-align:center;font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:1.2em}
details{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px 22px;margin-bottom:12px;box-shadow:var(--shadow)}
details summary{cursor:pointer;font-family:"Bricolage Grotesque";font-weight:700;font-size:1.08rem;color:var(--pine);padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:1.5rem;color:var(--amber);transition:transform .2s}
details[open] summary::after{content:"–"}
details p{color:var(--ink-soft);margin:0 0 18px}

/* footer */
.site-footer{background:var(--pine);color:rgba(255,255,255,.78);margin-top:74px;padding:58px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.site-footer h4{color:#fff;font-family:"Hanken Grotesk";font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1em}
.site-footer a{color:rgba(255,255,255,.78)}
.site-footer a:hover{color:#fff}
.foot-brand .name{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.4rem;color:#fff}
.foot-brand .name b{color:var(--amber)}
.foot-brand p{max-width:36ch;margin:.8em 0 0;color:rgba(255,255,255,.7)}
.foot-list li{margin-bottom:.6em}
.foot-list a{display:inline-flex;align-items:center;gap:.55em}
.foot-list svg{width:16px;height:16px;color:var(--amber);flex-shrink:0}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem;color:rgba(255,255,255,.6)}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:880px){
  .menu,.nav-right .btn{display:none}
  .hamburger{display:flex}
  .site-header.open .menu{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);padding:14px 24px;gap:4px;box-shadow:var(--shadow)}
  .site-header.open .menu a.link{padding:.8em 1em}
  .site-header.open .nav-right{display:none}
  .hero-grid,.split,.band,.foot-grid,.contact-grid,.svc{grid-template-columns:1fr}
  .hero{padding:48px 0 30px}
  .hero .photo,.split .photo{max-width:380px}
  .cards,.steps,.values{grid-template-columns:1fr 1fr}
  .factbar{grid-template-columns:1fr;gap:30px}
  .band{padding:34px}
  .band-cta{justify-content:flex-start}
  .svc-vis{position:static}
  .cta-band{padding:40px 24px}
}
@media(max-width:560px){
  body{font-size:17px}
  .cards,.steps,.values{grid-template-columns:1fr}
  .trust{justify-content:flex-start}
  .form-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* social iconen in footer */
.social-row{display:flex;gap:10px;margin-top:18px}
.social-row a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;transition:.15s}
.social-row a:hover{background:var(--amber);color:#3a2a08;transform:translateY(-2px)}
.social-row svg{width:20px;height:20px}

/* zwevende WhatsApp-knop (compact, rond) */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;background:#25D366;color:#fff;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.24);color:#fff}
.wa-fab svg{width:30px;height:30px}
@media(max-width:560px){
  .wa-fab{width:52px;height:52px;right:16px;bottom:16px}
  .wa-fab svg{width:28px;height:28px}
}

/* over: checklist in 2 kolommen + chips */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 36px}
.check-grid li{display:flex;gap:.7em;align-items:flex-start;font-size:1.02rem}
.check-grid svg{width:22px;height:22px;color:var(--pine-2);flex-shrink:0;margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip-pill{background:var(--white);border:1px solid var(--line);color:var(--pine);font-weight:600;font-size:.92rem;padding:.5em 1em;border-radius:999px}
.chip-pill.chip-soft{background:var(--blush);border-color:transparent}
@media(max-width:680px){.check-grid{grid-template-columns:1fr}}