:root{--groen:#84C340;--lime:#9BD65A;--groen-d:#4d7c1e;--bos:#3A5D20;--bos2:#467026;
--ink:#22301a;--tekst:#3e4838;--muted:#6d7663;--bg:#EFF3E7;--paneel:#fff;--rand:#d8e0c8;
--radius:22px;--glow:rgba(132,195,64,.35)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
color:var(--tekst);line-height:1.7;background:var(--bg);
background-image:radial-gradient(900px 420px at 88% -6%,rgba(132,195,64,.09),transparent 60%),
radial-gradient(700px 380px at -8% 38%,rgba(132,195,64,.05),transparent 55%)}
img{max-width:100%;height:auto}
a{color:var(--groen-d)}
h1,h2,h3,h4{font-family:'Outfit',-apple-system,sans-serif;line-height:1.15;color:var(--ink);letter-spacing:-.015em}
h2{margin:1.6em 0 .55em;font-size:clamp(1.45rem,2.8vw,2rem);font-weight:700}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.section{padding:64px 22px}
.narrow{max-width:820px}
.center{text-align:center}
.lead,.lead p{font-size:1.1rem;color:var(--muted)}
.lead.groot,.lead.groot p{font-size:clamp(1.2rem,2.3vw,1.55rem);color:var(--ink);font-weight:600;
font-family:'Outfit',sans-serif;line-height:1.5;max-width:920px}
.kicker{display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:.78rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--groen-d)}
.kicker+h2{margin-top:.35em}
/* onthulanimatie */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.reveal.zichtbaar{opacity:1;transform:none}
/* header */
.site-header{background:rgba(245,247,240,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rand)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:88px;position:relative}
.logo img{height:72px;display:block}
.main-nav{display:flex;align-items:center}
.main-nav ul{list-style:none;display:flex;align-items:center;gap:2px}
.main-nav a{color:var(--ink);text-decoration:none;padding:10px 14px;display:block;font-size:.97rem;
font-weight:600;font-family:'Outfit',sans-serif;border-radius:99px}
.main-nav a:hover,.main-nav a.active{color:var(--groen-d)}
.main-nav .btn-nav{background:var(--groen);color:var(--ink)!important;
border-radius:99px;margin-left:10px;box-shadow:0 6px 18px var(--glow)}
.main-nav .btn-nav:hover{filter:brightness(1.06);transform:translateY(-1px)}
.has-sub{position:relative}
.has-sub .sub{display:none;position:absolute;top:100%;left:0;background:#fff;
border:1px solid #d5ddc6;min-width:270px;padding:10px;border-radius:0 0 18px 18px;
box-shadow:0 22px 48px rgba(24,36,16,.22)}
.has-sub:hover .sub{display:block}
.sub li{display:block}
.sub a{padding:8px 14px;font-size:.9rem;font-weight:500;border-radius:10px}
.sub a:hover{background:rgba(132,195,64,.12)}
#menu-toggle{display:none}
.hamburger{display:none;cursor:pointer;padding:10px;z-index:60}
.hamburger span{display:block;width:26px;height:2.5px;background:var(--ink);margin:5.5px 0;border-radius:2px;transition:.25s}
#menu-toggle:checked~.hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#menu-toggle:checked~.hamburger span:nth-child(2){opacity:0}
#menu-toggle:checked~.hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* hero — zwevend afgerond vlak */
.hero{background-size:cover;background-position:center;color:#fff;padding:120px 0 110px;
margin:16px 16px 0;border-radius:28px;overflow:hidden;position:relative}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(2.1rem,5.8vw,3.9rem);margin-bottom:.3em;color:#fff;text-transform:uppercase;
font-weight:800;letter-spacing:.005em;max-width:13em;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.hero-sub{font-size:clamp(1rem,2vw,1.18rem);max-width:560px;margin-bottom:2em;color:#e7efdb}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.page-head{padding:64px 0 54px;text-align:center;
background:radial-gradient(640px 300px at 50% -30%,rgba(132,195,64,.16),transparent 70%)}
.page-head h1{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800}
.page-head p{color:var(--muted);margin-top:.6em;max-width:680px;margin-left:auto;margin-right:auto}
/* knoppen — pilvorm, lime met donkere tekst */
.btn{display:inline-block;padding:14px 30px;border-radius:999px;text-decoration:none;font-weight:700;
font-size:1rem;border:1.5px solid transparent;cursor:pointer;transition:.2s;font-family:'Outfit',sans-serif}
.btn-primary{background:var(--groen);color:var(--ink);box-shadow:0 8px 24px var(--glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--glow);filter:brightness(1.05)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.hero .btn-ghost,.machine-band .btn-ghost,.cta-band .btn-ghost{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero .btn-ghost:hover,.machine-band .btn-ghost:hover,.cta-band .btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-lg{padding:16px 36px;font-size:1.05rem;margin:6px}
.cta-band .btn,.hero-cta .btn,.cta-inline .btn{margin:6px}
/* kaarten */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:26px}
.card{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden;
text-decoration:none;color:var(--tekst);transition:transform .25s,border-color .25s,box-shadow .25s;
display:flex;flex-direction:column;box-shadow:0 6px 22px rgba(24,36,16,.09)}
.card:hover{transform:translateY(-6px);border-color:rgba(132,195,64,.55);
box-shadow:0 20px 44px rgba(24,36,16,.13),0 0 0 3px rgba(132,195,64,.16)}
.card-img{height:200px;background-size:cover;background-position:center;transition:transform .4s}
.card:hover .card-img{transform:scale(1.045)}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-body h3{font-size:1.12rem;font-weight:700}
.card-body p{font-size:.9rem;color:var(--muted);flex:1}
.card-meer{color:var(--groen-d);font-weight:700;font-size:.9rem;font-family:'Outfit',sans-serif;transition:padding-left .2s}
.card:hover .card-meer{padding-left:5px}
/* machine-band — zwevend afgerond vlak */
.machine-band{background-size:cover;background-position:center;color:#fff;text-align:center;
padding:104px 24px;margin:0 16px;border-radius:28px;overflow:hidden}
.machine-band h2{color:#fff;margin-top:0;font-weight:800}
.machine-band p{max-width:560px;margin:.6em auto 1.8em;color:#e7efdb}
/* usp */
.usp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.usp-grid img{border-radius:26px;width:100%;height:430px;object-fit:cover;box-shadow:0 22px 48px rgba(24,36,16,.16)}
.usp-lijst{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:14px}
.usp-lijst li{display:flex;gap:13px;align-items:flex-start;font-size:1.02rem}
.usp-lijst svg{width:24px;height:24px;color:var(--groen-d);flex:none;margin-top:3px;
background:rgba(132,195,64,.16);border-radius:99px;padding:4px}
/* folder — donker rustpunt */
.folder-blok{padding-top:0}
.folder-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;
background:var(--paneel);border:1px solid var(--rand);border-radius:28px;padding:44px 48px}
.folder-inner img{border-radius:16px;box-shadow:0 14px 36px rgba(24,36,16,.2)}
.folder-inner h2{margin-top:0}
.folder-inner p{color:var(--muted);margin-bottom:1.5em}
/* statistiekenband */
.stats-band{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--paneel);
border:1px solid var(--rand);border-radius:32px;padding:72px 30px;box-shadow:0 6px 22px rgba(24,36,16,.09)}
.stat{text-align:center;padding:8px 26px}
.stat+.stat{border-left:1px solid var(--rand)}
.stat strong{display:block;font-family:'Outfit',sans-serif;font-weight:800;line-height:1;
font-size:clamp(3.6rem,8.5vw,6rem);color:var(--groen-d);letter-spacing:-.02em}
.stat span{color:var(--tekst);font-size:clamp(1rem,1.6vw,1.2rem);display:block;margin-top:14px;
font-weight:600;font-family:'Outfit',sans-serif}
/* product/dienst */
.product h2{margin-top:1.5em}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px}
.gallery a{display:block;overflow:hidden;border-radius:18px;position:relative}
.gallery img,.gallery video{border-radius:18px;width:100%;height:190px;object-fit:cover;display:block;
border:1px solid var(--rand);transition:transform .3s}
.gallery a:hover img,.gallery a:hover video{transform:scale(1.03);border-color:rgba(132,195,64,.55);
box-shadow:0 0 0 3px rgba(132,195,64,.16)}
.gal-af{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;
display:grid;place-items:center;border-radius:50%;background:rgba(24,36,16,.78);color:#fff;font-size:1.25rem;
padding-left:3px;border:1px solid rgba(255,255,255,.55);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.cta-inline{margin-top:2.4em;display:flex;gap:14px;flex-wrap:wrap}
/* projectgalerij */
.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin-top:34px}
.galerij figure{background:var(--paneel);border:1px solid var(--rand);border-radius:20px;overflow:hidden;
box-shadow:0 4px 18px rgba(24,36,16,.05)}
.galerij img{width:100%;height:210px;object-fit:cover;display:block;transition:transform .35s}
.galerij figure:hover img{transform:scale(1.04)}
.galerij figcaption{padding:13px 16px;font-size:.88rem;color:var(--muted)}
.galerij figcaption:empty{display:none}
/* cta-band — donker afgerond vlak met groene gloed */
.cta-band{text-align:center;padding:80px 24px;color:#fff;margin:30px 16px 16px;border-radius:28px;
background:radial-gradient(640px 300px at 50% 0%,rgba(155,214,90,.35),transparent 70%),
linear-gradient(120deg,var(--bos),var(--bos2))}
.cta-band h2{margin-top:0;color:#fff;font-weight:800}
.cta-band p{color:#e2edcf;margin:.6em auto 1.8em;max-width:560px}
/* contact */
.contact-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-bottom:22px}
.c-kaart{display:block;background:var(--paneel);border:1px solid var(--rand);border-radius:var(--radius);padding:30px 22px;
text-decoration:none;color:var(--tekst);text-align:center;transition:transform .25s,border-color .25s,box-shadow .25s;
box-shadow:0 4px 18px rgba(24,36,16,.05)}
a.c-kaart:hover{transform:translateY(-4px);border-color:rgba(132,195,64,.55);
box-shadow:0 16px 38px rgba(24,36,16,.12),0 0 0 3px rgba(132,195,64,.16)}
.c-kaart svg{width:32px;height:32px;color:var(--groen-d);margin-bottom:12px;
background:rgba(132,195,64,.14);border-radius:99px;padding:6px}
.c-kaart span{display:block;font-size:.74rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.45em;font-weight:700;font-family:'Outfit',sans-serif}
.c-kaart strong{color:var(--ink);font-size:1.06rem;font-family:'Outfit',sans-serif;line-height:1.5}
.c-adres p{color:var(--ink);font-size:1rem;font-weight:600;line-height:1.55}
.route-blok{background:var(--paneel);border:1px solid var(--rand);border-radius:24px;overflow:hidden;max-width:900px;margin:0 auto;
box-shadow:0 4px 18px rgba(24,36,16,.05)}
.route-blok iframe{width:100%;height:330px;border:0;display:block}
.route-knoppen{display:flex;gap:14px;padding:20px;justify-content:center;flex-wrap:wrap}
/* footer */
.site-footer{background:var(--bos);color:#d3e0bd;margin-top:70px}
.footer-slank{padding:50px 22px 34px;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
.f-links{display:flex;gap:10px 30px;flex-wrap:wrap;justify-content:center}
.f-links a{color:#e7efdb;text-decoration:none;font-size:.96rem;font-weight:600;font-family:'Outfit',sans-serif}
.f-links a:hover{color:var(--groen)}
.f-meta{display:flex;gap:8px 14px;flex-wrap:wrap;justify-content:center;font-size:.85rem;align-items:center}
.f-meta a{color:#d3e0bd;text-decoration:none}
.f-meta a:hover{color:#fff}
.f-punt{color:#6f8a53}
.f-legal{font-size:.76rem;color:#b7c79c;max-width:560px}
.f-legal span{color:#b7c79c}
/* lichtbak */
.lb{position:fixed;inset:0;z-index:8000;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb-achter{position:absolute;inset:0;background:rgba(18,26,11,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lb-kader{position:relative;z-index:1;margin:0;text-align:center}
.lb-kader img,.lb-kader video{max-width:92vw;max-height:80vh;border-radius:20px;border:1px solid rgba(132,195,64,.45);
box-shadow:0 30px 90px rgba(0,0,0,.6);user-select:none;touch-action:pan-y}
.lb-anim{animation:lbIn .28s ease}
@keyframes lbIn{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
.lb-knop{position:absolute;z-index:2;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.35);color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.35rem;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.lb-knop:hover{border-color:var(--groen);color:var(--groen)}
.lb-x{top:18px;right:18px}
.lb-vorige{left:14px;top:50%;transform:translateY(-50%)}
.lb-volgende{right:14px;top:50%;transform:translateY(-50%)}
.lb-onder{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;display:flex;gap:12px;align-items:center;
background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);
border-radius:99px;padding:8px 18px;font-size:.85rem;color:#fff;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.lb-teller{color:var(--groen);font-weight:700}
@media (prefers-reduced-motion:reduce){.lb-anim{animation:none}}
@media(max-width:940px){.lb-vorige{left:6px}.lb-volgende{right:6px}.lb-kader img,.lb-kader video{max-width:96vw}.lb-x{top:12px;right:12px}}
/* mobiel */
@media(max-width:940px){
 .hamburger{display:block}
 .header-inner{position:static}
 .main-nav{display:none;position:absolute;top:88px;left:0;right:0;
   max-height:calc(100vh - 88px);overflow-y:auto;
   background:rgba(245,247,240,.98);padding:18px 24px 40px;
   flex-direction:column;align-items:stretch;border-bottom:1px solid var(--rand);
   box-shadow:0 30px 60px rgba(24,36,16,.18)}
 #menu-toggle:checked~.main-nav{display:flex}
 .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
 .main-nav a{font-size:1.05rem;padding:13px 10px;border-bottom:1px solid var(--rand);border-radius:0}
 .sub a{border-bottom:0;font-size:.95rem}
 .has-sub .sub{display:none;position:static;box-shadow:none;padding-left:16px;min-width:0;background:none;border:0;margin-top:0}
 .has-sub.open .sub{display:block}
 .has-sub:hover .sub{display:none}
 .has-sub.open:hover .sub,.has-sub.open .sub{display:block}
 .main-nav .btn-nav{margin:14px 0 0;text-align:center;border-bottom:0;border-radius:99px}
 .hero{margin:10px 10px 0;border-radius:20px;padding:80px 0 66px;text-align:center}
 .hero h1{max-width:none}
 .hero-sub{margin-left:auto;margin-right:auto}
 .hero-cta{justify-content:center}
 .machine-band{margin:0 10px;border-radius:20px;padding:70px 18px}
 .cta-band{margin:24px 10px 10px;border-radius:20px}
 .section{padding:46px 18px}
 .usp-grid{grid-template-columns:1fr;gap:26px}
 .usp-grid img{height:300px}
 .folder-inner{grid-template-columns:1fr;padding:28px 22px;gap:22px;border-radius:20px}
 .f-links{width:100%;flex-wrap:nowrap;gap:0;justify-content:space-evenly}
 .f-links a{font-size:clamp(.78rem,3.5vw,.96rem);white-space:nowrap}
 .f-meta{gap:6px 10px}
 .logo img{height:54px}
 .stats-band{grid-template-columns:1fr;gap:22px;padding:44px 22px}
 .stat+.stat{border-left:0;border-top:1px solid var(--rand);padding-top:22px}
}