/* Dekvloerexpert — design system */
:root{
  --ink:#0d100f;
  --dark:#111514;
  --dark-2:#161b1a;
  --card:#1a201e;
  --line-d:rgba(255,255,255,.08);
  --line-l:#e6eae8;
  --paper:#f7f8f7;
  --white:#fff;
  --text:#14181a;
  --muted:#5f6a66;
  --muted-d:#a3aeaa;
  --teal:#22d1ad;
  --teal-2:#14a88a;
  --teal-deep:#0f7f6a;
  --teal-btn:#0f9479;
  --wa:#25d366;
  --star:#f5b301;
  --radius:18px;
  --wrap:1200px;
  --shadow:0 20px 50px -20px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--white);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.025em;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2.3rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.8vw,3.2rem)}
h3{font-size:1.2rem;letter-spacing:-.01em;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.accent{color:var(--teal-deep)}
.dark .accent,.hero .accent,.cta-card .accent{color:var(--teal)}
.eyebrow{display:block;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:18px}
.dark .eyebrow,.cta-card .eyebrow{color:var(--teal)}
.lead{font-size:1.2rem;color:var(--muted)}
.dark .lead{color:var(--muted-d)}
.center{text-align:center}
.center .lead{max-width:760px;margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* Sections */
section{padding:110px 0}
.dark{background:var(--dark);color:#fff}
.paper{background:var(--paper)}
.sec-head{margin-bottom:56px}

/* Header */
.site-header{position:fixed;top:14px;left:0;right:0;z-index:50;padding:0 16px}
.nav{max-width:1640px;margin:0 auto;background:rgba(17,21,20,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-d);border-radius:20px;display:flex;align-items:center;gap:20px;padding:12px 14px 12px 26px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.logo{text-decoration:none;color:#fff;line-height:1;display:inline-block}
.logo b{font-weight:900;font-size:1.45rem;letter-spacing:.01em}
.logo b span{color:var(--teal)}
.logo small{display:block;font-size:.58rem;font-weight:700;letter-spacing:.42em;margin-top:4px;color:#d6dcda}
.menu{display:flex;gap:4px;margin:0 auto;list-style:none;padding:0}
.menu>li{position:relative}
.menu a,.menu button{display:block;color:#e9eeec;text-decoration:none;font-weight:500;font-size:1.02rem;padding:10px 13px;background:none;border:0;font-family:inherit;cursor:pointer;position:relative}
.menu a:hover,.menu button:hover{color:var(--teal)}
.menu a[aria-current="page"]{color:var(--teal)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--teal)}
.menu button svg{width:14px;height:14px;vertical-align:middle;margin-left:4px;transition:transform .2s}
.dropdown{position:absolute;top:100%;left:-10px;min-width:260px;background:#151a19;border:1px solid var(--line-d);border-radius:14px;padding:8px;list-style:none;margin:8px 0 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;box-shadow:var(--shadow)}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown,.has-drop.open .dropdown{opacity:1;visibility:visible;transform:none}
.has-drop:hover button svg{transform:rotate(180deg)}
.dropdown a{border-radius:9px;padding:10px 12px;font-size:.96rem}
.dropdown a:hover{background:rgba(255,255,255,.05)}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#202725;border:1px solid var(--line-d);color:#fff;text-decoration:none;transition:.2s}
.icon-btn:hover{background:#28302e}
.icon-btn svg{width:22px;height:22px}
.icon-btn.wa{background:rgba(37,211,102,.12);color:var(--wa);border-color:rgba(37,211,102,.25)}
.burger{display:none;background:none;border:0;color:#fff;width:46px;height:46px;cursor:pointer}
.burger svg{width:26px;height:26px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.06rem;text-decoration:none;padding:17px 30px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .2s,background .2s;line-height:1.1}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn-teal{background:linear-gradient(180deg,#13a487,#0d8a71);color:#fff;box-shadow:0 10px 30px -8px rgba(20,168,138,.65)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 30px -10px rgba(37,211,102,.6)}
.btn-ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.12)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-line{background:#fff;color:var(--text);border:1px solid var(--line-l)}
.btn-sm{padding:13px 24px;font-size:1rem}
.nav .btn{padding:15px 26px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.text-link{color:var(--teal-deep);font-weight:700;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.dark .text-link{color:var(--teal)}
.text-link svg{width:18px;height:18px;transition:transform .2s}
.text-link:hover svg{transform:translateX(3px)}

/* Hero */
.hero{position:relative;color:#fff;background:#0b0e0d;overflow:hidden;padding:200px 0 120px;min-height:100vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,13,12,.96) 0%,rgba(10,13,12,.78) 45%,rgba(10,13,12,.25) 100%),linear-gradient(0deg,rgba(10,13,12,.9),transparent 35%)}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero-inner{max-width:900px}
.hero h1{margin-bottom:28px}
.hero p.lead{color:#d9dfdd;font-size:1.32rem;max-width:660px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:12px;background:rgba(34,209,173,.09);border:1px solid rgba(34,209,173,.22);color:var(--teal);font-weight:600;font-size:1rem;margin-bottom:34px}
.pill::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(34,209,173,.18)}
.checks{display:flex;flex-wrap:wrap;gap:14px 32px;list-style:none;padding:0;margin:30px 0 34px;max-width:900px}
.checks li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:1.08rem}
.tick{width:26px;height:26px;border-radius:50%;background:rgba(34,209,173,.18);display:grid;place-items:center;flex:none;color:var(--teal)}
.tick svg{width:15px;height:15px}
.paper .tick,.light-tick .tick{background:rgba(15,127,106,.12);color:var(--teal-deep)}
.gbadge{display:inline-flex;align-items:center;gap:16px;background:#fff;color:#222;border-radius:16px;padding:14px 22px;font-weight:700;margin-bottom:34px;text-decoration:none;box-shadow:0 10px 30px -12px rgba(0,0,0,.4)}
.gword{font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.gword span:nth-child(1),.gword span:nth-child(4){color:#4285f4}.gword span:nth-child(2),.gword span:nth-child(6){color:#ea4335}.gword span:nth-child(3){color:#fbbc05}.gword span:nth-child(5){color:#34a853}
.stars{color:var(--star);letter-spacing:3px;font-size:1.05rem}
.hero.sub{min-height:auto;padding:190px 0 110px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;padding:0;margin:0 0 26px;font-size:1rem;color:#c3ccc9}
.crumbs a{text-decoration:none;color:#c3ccc9}
.crumbs a:hover{color:var(--teal)}
.crumbs li+li::before{content:"›";margin-right:10px;color:#7f8a86}
.crumbs li:last-child{color:#fff;font-weight:500}

/* Stats */
.stats{background:var(--dark);color:#fff;padding:0;border-top:1px solid var(--line-d)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:46px 20px;text-align:center;border-left:1px solid var(--line-d)}
.stat:first-child{border-left:0}
.stat b{display:block;font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;letter-spacing:-.03em;color:#fff}
.stat span{color:var(--muted-d);font-size:1rem}

/* Split */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.split.rev{grid-template-columns:1fr 1.15fr}
.photo{border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -25px rgba(0,0,0,.45);position:relative;background:#cfc8bb}
.photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.photo.wide img{aspect-ratio:4/3}
.photo-badge{position:absolute;left:24px;bottom:24px;right:24px;background:rgba(17,21,20,.86);backdrop-filter:blur(10px);color:#fff;border-radius:16px;padding:16px 20px;display:flex;gap:14px;align-items:center}
.photo-badge .ic{width:44px;height:44px;border-radius:12px;background:rgba(34,209,173,.15);color:var(--teal);display:grid;place-items:center;flex:none}
.photo-badge .ic svg{width:22px;height:22px}
.photo-badge b{display:block}
.photo-badge span{font-size:.92rem;color:var(--muted-d)}
.features{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px;margin-top:40px}
.feature{display:flex;gap:16px}
.f-ic{width:50px;height:50px;border-radius:14px;background:#eef6f3;color:var(--teal-deep);display:grid;place-items:center;flex:none;border:1px solid #dcebe6}
.dark .f-ic{background:rgba(34,209,173,.1);color:var(--teal);border-color:rgba(34,209,173,.2)}
.f-ic svg{width:22px;height:22px}
.feature h3{margin:4px 0 6px;font-size:1.12rem}
.feature p{color:var(--muted);font-size:.98rem;margin:0}
.dark .feature p{color:var(--muted-d)}
.prose p{color:var(--muted);font-size:1.12rem}
.dark .prose p{color:var(--muted-d)}
.prose h2{margin-top:.2em}
.prose h3{margin-top:1.6em}
.prose ul{color:var(--muted);padding-left:1.2em}
.prose li{margin:.35em 0}

/* Gallery strip */
.strip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 24px 20px;margin-top:60px;scrollbar-width:thin}
.strip figure{margin:0;flex:0 0 min(380px,78vw);scroll-snap-align:start;border-radius:16px;overflow:hidden;position:relative}
.strip img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s}
.strip figure:hover img{transform:scale(1.04)}
.strip figcaption,.grid-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);color:#fff;font-size:.94rem;font-weight:600}
.grid-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-gal figure{margin:0;border-radius:16px;overflow:hidden;position:relative}
.grid-gal img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* Two audiences */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}
.aud-h{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.aud-h h3{margin:0;font-size:1.3rem}
.aud>div>p{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:22px 0 0}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:10px;margin-bottom:20px}
.ticks li>svg{width:22px;height:22px;color:var(--teal-2);margin-top:2px}
.ticks b{display:block;font-size:1.06rem}
.ticks span{color:var(--muted);font-size:.98rem}
.dark .ticks span{color:var(--muted-d)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line-d);border-radius:var(--radius);padding:30px;display:flex;gap:18px;align-items:flex-start;transition:border-color .2s,transform .2s;text-decoration:none;color:inherit}
.card:hover{border-color:rgba(34,209,173,.35)}
.card .ck{width:48px;height:48px;border-radius:12px;background:rgba(34,209,173,.12);color:var(--teal);display:grid;place-items:center;flex:none}
.card .ck svg{width:22px;height:22px}
.card h3{margin:2px 0 8px}
.card p{color:var(--muted-d);margin:0;font-size:1rem}
.card.link{background:linear-gradient(135deg,rgba(34,209,173,.12),rgba(34,209,173,.02));align-items:center}
.card.link .arrow{margin-left:auto;width:46px;height:46px;border-radius:50%;background:var(--teal-btn);display:grid;place-items:center;color:#fff;flex:none}
.card.link .arrow svg{width:20px;height:20px}
.paper .card,.light-cards .card{background:#fff;border-color:var(--line-l)}
.paper .card p,.light-cards .card p{color:var(--muted)}
.paper .card .ck,.light-cards .card .ck{background:#eef6f3;color:var(--teal-deep)}
.opt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.opt{background:var(--card);border:1px solid var(--line-d);border-radius:var(--radius);padding:34px}
.opt .f-ic{margin-bottom:26px}
.opt h3{font-size:1.35rem;margin-bottom:6px}
.opt .tag{color:var(--teal);font-weight:600;font-size:.95rem;display:block;margin-bottom:12px}
.opt p{color:var(--muted-d);font-size:1.02rem}
.opt ul{color:var(--muted-d);padding-left:1.1em;margin:0;font-size:.98rem}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.step{border-top:1px solid var(--line-l);padding-top:28px;position:relative}
.step::before{content:"";position:absolute;top:-1px;left:0;width:62px;height:3px;background:var(--teal-2);border-radius:3px}
.dark .step{border-color:var(--line-d)}
.step .num{font-size:3.2rem;font-weight:800;color:#bfe7dd;letter-spacing:-.03em;line-height:1;margin-bottom:24px}
.dark .step .num{color:rgba(34,209,173,.35)}
.step h3{font-size:1.3rem}
.step p{color:var(--muted)}
.dark .step p{color:var(--muted-d)}

/* Reviews */
.marquee{overflow:hidden;margin-top:56px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:22px;width:max-content;animation:slide 60s linear infinite;padding:4px 0 22px}
.track.rev{animation-direction:reverse;animation-duration:70s}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.review{width:390px;background:var(--card);border:1px solid var(--line-d);border-radius:var(--radius);padding:26px}
.r-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.r-av{width:44px;height:44px;border-radius:50%;background:rgba(34,209,173,.12);color:var(--teal);display:grid;place-items:center;font-weight:800}
.r-top b{display:block}
.r-tag{margin-left:auto;font-size:.85rem;border:1px solid var(--line-d);border-radius:999px;padding:5px 12px;color:var(--muted-d)}
.review q{display:block;font-size:1.08rem;color:#e7ecea;margin-bottom:16px}
.review small{color:var(--muted-d);font-size:.94rem}

/* CTA */
.cta-card{background:radial-gradient(120% 120% at 100% 100%,rgba(20,168,138,.35),transparent 50%),radial-gradient(90% 80% at 0% 0%,rgba(20,168,138,.12),transparent 60%),#131816;color:#fff;border-radius:28px;padding:110px 40px;text-align:center}
.cta-card h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.cta-card p{color:#cfd7d4;font-size:1.25rem;max-width:640px;margin:0 auto 38px}
.cta-card .btn-row{justify-content:center}
.cta-card .fine{color:#a9b4b0;margin:34px 0 0;font-size:1.02rem}

/* FAQ */
.faq{max-width:900px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line-l);padding:6px 0}
.dark .faq details{border-color:var(--line-d)}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:1.15rem;padding:20px 44px 20px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.8rem;font-weight:400;color:var(--teal-2);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding-right:40px}
.dark .faq details p{color:var(--muted-d)}

/* Price table */
.ptable{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line-l);font-size:1rem}
.ptable th,.ptable td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line-l)}
.ptable th{background:#f1f5f3;font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ptable tr:last-child td{border-bottom:0}
.ptable td:last-child{font-weight:700;white-space:nowrap}
.note{font-size:.92rem;color:var(--muted);margin-top:14px}
.table-scroll{overflow-x:auto}

/* Places */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.chips a{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid var(--line-l);background:#fff;text-decoration:none;font-weight:500;font-size:.96rem;transition:.15s}
.chips a:hover{border-color:var(--teal-2);color:var(--teal-deep)}
.dark .chips a{background:transparent;border-color:var(--line-d);color:#e3e9e7}
.dark .chips a:hover{border-color:var(--teal);color:var(--teal)}
.muni-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.muni{background:#fff;border:1px solid var(--line-l);border-radius:16px;padding:22px}
.muni h3{margin-bottom:10px;font-size:1.12rem}
.muni h3 a{text-decoration:none}
.muni h3 a:hover{color:var(--teal-deep)}
.muni ul{list-style:none;padding:0;margin:0;columns:2;column-gap:14px;font-size:.94rem}
.muni li{margin:3px 0;break-inside:avoid}
.muni li a{color:var(--muted);text-decoration:none}
.muni li a:hover{color:var(--teal-deep)}
.prov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.prov{display:flex;flex-direction:column;gap:4px;justify-content:center;padding:22px 24px;border-radius:16px;background:#fff;border:1px solid var(--line-l);text-decoration:none;font-weight:700;font-size:1.1rem}
.prov span{font-weight:500;color:var(--muted);font-size:.92rem}
.prov:hover{border-color:var(--teal-2)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 0}
.fact{background:#fff;border:1px solid var(--line-l);border-radius:16px;padding:22px}
.fact b{display:block;font-size:1.5rem;letter-spacing:-.02em}
.fact span{color:var(--muted);font-size:.95rem}

/* Forms */
.form-card{background:#fff;border:1px solid var(--line-l);border-radius:22px;padding:40px;box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-weight:600;font-size:.95rem;margin-bottom:7px}
input,select,textarea{width:100%;font:inherit;font-size:1rem;padding:14px 16px;border-radius:12px;border:1px solid #d5dcd9;background:#fbfcfb;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(20,168,138,.35);border-color:var(--teal-2);background:#fff}
textarea{min-height:130px;resize:vertical}
.seg{display:flex;flex-wrap:wrap;gap:10px}
.seg label{margin:0;font-weight:500;border:1px solid #d5dcd9;border-radius:999px;padding:10px 16px;cursor:pointer;display:flex;gap:8px;align-items:center;background:#fbfcfb}
.seg input{width:auto;margin:0;accent-color:var(--teal-2)}
.seg label:has(input:checked){border-color:var(--teal-2);background:#eef8f5;color:var(--teal-deep)}
.form-note{font-size:.9rem;color:var(--muted);margin-top:14px}
.err{color:#b42318;font-size:.88rem;margin-top:5px;display:none}
.invalid .err{display:block}
.invalid input,.invalid select,.invalid textarea{border-color:#e48a80}
.contact-list{list-style:none;padding:0;margin:26px 0}
.contact-list li{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.contact-list a{text-decoration:none;font-weight:700;font-size:1.1rem}
.contact-list small{display:block;color:var(--muted);font-weight:400}

/* Footer */
.site-footer{background:var(--ink);color:#fff;padding:90px 0 0}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px}
.site-footer .logo b{font-size:1.65rem}
.f-about{color:#b9c3c0;margin:22px 0 28px;max-width:400px}
.socials{display:flex;gap:12px;flex-wrap:wrap}
.socials a{width:50px;height:50px;border-radius:50%;background:#1d2422;display:grid;place-items:center;color:#cfd7d4;transition:.2s}
.socials a:hover{background:#28302e;color:#fff}
.socials a.wa{background:var(--wa);color:#fff}
.socials svg{width:21px;height:21px}
.site-footer h4{font-size:1.12rem;margin:0 0 22px;letter-spacing:0}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:14px}
.site-footer li a{color:#b9c3c0;text-decoration:none}
.site-footer li a:hover{color:var(--teal)}
.site-footer li a.strong{color:#fff;font-weight:700}
.f-places{border-top:1px solid var(--line-d);margin-top:70px;padding:34px 0 10px}
.f-places h4{font-size:.95rem;color:#8f9a96;font-weight:600}
.f-places ul{display:flex;flex-wrap:wrap;gap:6px 18px}
.f-places li{margin:0}
.f-places a{font-size:.92rem}
.f-bottom{border-top:1px solid var(--line-d);margin-top:30px;padding:26px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#7f8a86;font-size:.93rem}
.f-bottom a{color:#7f8a86;text-decoration:none}
.f-bottom b{color:#b9c3c0}

/* Floating WhatsApp */
.wa-fab{position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;z-index:60;box-shadow:0 12px 30px -6px rgba(37,211,102,.6);transition:transform .2s}
.wa-fab:hover{transform:scale(1.06)}
.wa-fab svg{width:32px;height:32px}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.track{animation:none}html{scroll-behavior:auto}}

/* Responsive */
@media (max-width:1180px){
  .menu a,.menu button{padding:10px 9px;font-size:.96rem}
  .nav .btn{padding:13px 18px;font-size:.95rem}
}
@media (max-width:1020px){
  .burger{display:block;order:3}
  .nav{flex-wrap:wrap;padding:10px 10px 10px 20px}
  .nav-actions{margin-left:auto}
  .nav-actions .btn{display:none}
  .menu{display:none;order:4;width:100%;flex-direction:column;padding:8px 0 6px;border-top:1px solid var(--line-d);margin-top:6px}
  .nav.open .menu{display:flex}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;margin:0 0 6px 12px;background:transparent;border:0;padding:0}
  .has-drop.open .dropdown{display:block}
  .menu a[aria-current="page"]::after{display:none}
  .split,.split.rev{grid-template-columns:1fr;gap:50px}
  .cards,.opt-cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .grid-gal{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  section{padding:76px 0}
  .wrap{padding:0 16px}
  .site-header{top:8px;padding:0 8px}
  .icon-btn{width:42px;height:42px;border-radius:12px}
  .nav{gap:8px;padding:8px 6px 8px 14px}
  .nav-actions{gap:6px}
  .burger{width:40px;height:42px;padding:0}
  .logo b{font-size:1.15rem}
  .logo small{font-size:.48rem;letter-spacing:.32em}
  .hero{padding:150px 0 80px;min-height:auto}
  .hero.sub{padding:140px 0 70px}
  .hero p.lead{font-size:1.1rem}
  .btn{padding:15px 22px;font-size:1rem}
  .btn-row .btn{width:100%;justify-content:center}
  .stats .wrap{grid-template-columns:1fr 1fr;padding:0}
  .stat{padding:30px 10px;border-bottom:1px solid var(--line-d)}
  .stat:nth-child(3){border-left:0}
  .features,.aud,.cards,.opt-cards,.steps,.facts,.form-grid,.grid-gal{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;gap:36px}
  .review{width:300px}
  .cta-card{padding:70px 20px;border-radius:22px}
  .form-card{padding:24px}
  .muni ul{columns:1}
  .ptable th,.ptable td{padding:12px 12px}
}

/* Projecten */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj{position:relative;border-radius:18px;overflow:hidden;margin:0;background:#222}
.proj img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s}
.proj:hover img{transform:scale(1.04)}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.05) 55%)}
.proj .ptag{position:absolute;top:18px;left:18px;z-index:1;background:rgba(10,30,26,.75);color:var(--teal);font-weight:600;font-size:.9rem;border-radius:10px;padding:7px 14px;backdrop-filter:blur(6px)}
.proj figcaption{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;color:#fff}
.proj figcaption b{display:block;font-size:1.4rem;letter-spacing:-.01em}
.proj figcaption span{color:#d5dcda}
.masonry{columns:4 240px;column-gap:16px}
.masonry img{width:100%;border-radius:14px;margin:0 0 16px;break-inside:avoid}

/* Offerte */
.offer-layout{display:grid;grid-template-columns:1fr 420px;gap:44px;align-items:start}
.offer-side{position:sticky;top:120px;display:grid;gap:22px}
.dc{background:var(--dark);color:#fff;border-radius:22px;padding:30px}
.dc h3{font-size:1.25rem;margin-bottom:22px}
.dc a{display:flex;gap:16px;align-items:center;text-decoration:none;margin-bottom:20px}
.dc a:last-child{margin-bottom:0}
.dc .ic{width:50px;height:50px;border-radius:12px;background:rgba(34,209,173,.1);color:var(--teal);display:grid;place-items:center;flex:none;border:1px solid rgba(34,209,173,.18)}
.dc .ic svg{width:22px;height:22px}
.dc small{display:block;color:var(--muted-d);font-size:.9rem}
.dc b{font-size:1.15rem}
.why{background:#fff;border:1px solid var(--line-l);border-radius:22px;padding:30px}
.why h3{font-size:1.25rem;margin-bottom:18px}
.why ul{list-style:none;padding:0;margin:0}
.why li{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.why li .tick{background:var(--teal-2);color:#fff}
.svc-box{background:#eaf5f2;border:1px solid #d3e9e2;border-radius:18px;padding:24px;margin-bottom:34px}
.svc-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.svc-head .ic{width:58px;height:58px;border-radius:14px;background:var(--ink);color:var(--teal);display:grid;place-items:center}
.svc-head .ic svg{width:26px;height:26px}
.svc-head small{display:block;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);font-size:.8rem}
.svc-head b{font-size:1.4rem;letter-spacing:-.01em}
.chipset{display:flex;flex-wrap:wrap;gap:10px}
.chipset label{position:relative;margin:0;font-weight:500;border:1px solid #d5dcd9;border-radius:999px;padding:12px 20px;cursor:pointer;background:#fff;transition:.15s;font-size:1rem}
.chipset input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.chipset label:has(input:checked){background:var(--teal-btn);border-color:var(--teal-btn);color:#fff}
.chipset label:has(input:focus-visible){outline:2px solid var(--teal-2);outline-offset:2px}
.chipset.outline label:has(input:checked){background:#eef8f5;color:var(--teal-deep);border-color:var(--teal-2)}
.fgroup{margin-bottom:28px}
.fgroup>label,.fgroup>.flabel{display:block;font-weight:700;margin-bottom:12px;font-size:1.02rem}
.req{color:#d1453b}
.fstep{display:flex;gap:16px;align-items:center;margin:10px 0 26px}
.fstep span{width:52px;height:52px;border-radius:12px;background:var(--ink);color:var(--teal);display:grid;place-items:center;font-weight:800}
.fstep h3{margin:0;font-size:1.6rem}
.fsep{border:0;border-top:1px solid var(--line-l);margin:40px 0}
.unit{position:relative}
.unit input{padding-right:56px}
.unit::after{content:attr(data-unit);position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600}
.fgroup.invalid .chipset label{border-color:#e48a80}
.sent{display:none;background:#eaf5f2;border:1px solid #cfe7df;border-radius:16px;padding:22px;margin-top:22px}
.sent.show{display:block}
@media (max-width:1020px){.offer-layout{grid-template-columns:1fr}.offer-side{position:static}.proj-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.proj-grid{grid-template-columns:1fr}.chipset label{padding:10px 16px;font-size:.95rem}}
@media (max-width:400px){.logo b{font-size:.98rem}.logo small{font-size:.42rem;letter-spacing:.28em}.nav .icon-btn{width:38px;height:38px}}

/* ═════════════════════ v2: verfijning ═════════════════════ */
:root{
  --display:'Inter Tight','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --l-finish:#d9cbb4;--l-screed:#b8ab97;--l-insu:#e9e2cf;--l-concrete:#8e918f;
  --l-pipe:#e2574c;--l-pipe2:#3d8fd6;--l-net:#5b5f5c;--l-line:#c9cfcc;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
body{font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--white)}
h1,h2,h3,h4,.logo b,.stat b,.calc-price,.step .num{font-family:var(--display)}
h1,h2{font-weight:800;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,5.2rem);line-height:.98}
h2{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.02}
.lead{text-wrap:pretty}
::selection{background:var(--teal);color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* Grain op donkere vlakken */
.dark,.hero,.site-footer,.cta-card{position:relative;isolation:isolate}
.dark::before,.site-footer::before,.cta-card::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.06;pointer-events:none;z-index:-1;mix-blend-mode:overlay}

/* Voortgangsbalk + header bij scrollen */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--teal-2),var(--teal))}
.nav{transition:padding .25s,background .25s,box-shadow .25s}
.site-header.scrolled .nav{background:rgba(13,16,15,.86);padding-top:8px;padding-bottom:8px;box-shadow:0 18px 50px -20px rgba(0,0,0,.75)}

/* Hero */
.hero{min-height:min(100vh,980px)}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg{opacity:.62;transform:scale(1.04);animation:heroIn 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{transform:scale(1.12);opacity:0}}
.hero::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.09;mix-blend-mode:overlay;z-index:1;pointer-events:none}
.hero::after{background:linear-gradient(95deg,rgba(9,12,11,.97) 0%,rgba(9,12,11,.82) 42%,rgba(9,12,11,.35) 100%),linear-gradient(0deg,rgba(9,12,11,.95),transparent 40%),radial-gradient(60% 70% at 85% 30%,rgba(34,209,173,.16),transparent 70%)}
.hero-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 48%,rgba(34,209,173,.07) 52%,transparent 60%);background-size:250% 100%;animation:sweep 9s ease-in-out infinite}
@keyframes sweep{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.hero .wrap{z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center}
.hero.has-aside .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}
.hero-inner>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-inner>*:nth-child(2){animation-delay:.08s}.hero-inner>*:nth-child(3){animation-delay:.16s}.hero-inner>*:nth-child(4){animation-delay:.24s}.hero-inner>*:nth-child(5){animation-delay:.32s}.hero-inner>*:nth-child(6){animation-delay:.4s}.hero-inner>*:nth-child(7){animation-delay:.48s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.hero h1 .accent{background:linear-gradient(92deg,#22d1ad,#7ff0d6 55%,#22d1ad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-200% 0}}

.spec-card{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:28px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);animation:rise 1s .5s cubic-bezier(.2,.7,.2,1) both;color:#fff}
.spec-head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.spec-head .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(34,209,173,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(34,209,173,0)}100%{box-shadow:0 0 0 0 rgba(34,209,173,0)}}
.spec-card dl{margin:0;display:grid;gap:0}
.spec-card dl>div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.spec-card dt{color:#b9c4c0;font-size:.95rem}
.spec-card dd{margin:0;font-family:var(--mono);font-weight:500;font-size:.98rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.spec-level{margin:22px 0 14px;height:30px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden}
.spec-level::before{content:"";position:absolute;left:50%;top:5px;bottom:5px;width:44px;margin-left:-22px;border-left:2px solid rgba(255,255,255,.5);border-right:2px solid rgba(255,255,255,.5)}
.spec-level span{position:absolute;top:7px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9fff1,var(--teal) 60%,#0d8a71);box-shadow:0 0 18px rgba(34,209,173,.7);animation:bubble 5s ease-in-out infinite}
@keyframes bubble{0%,100%{left:18%}45%,55%{left:calc(50% - 8px)}}
.spec-foot{margin:0;font-size:.88rem;color:#9fb0aa}

/* Zoekwoordenband */
.kband{background:var(--teal-btn);color:#eafffa;overflow:hidden;padding:16px 0;border-block:1px solid rgba(255,255,255,.12)}
.kband-track{display:flex;gap:44px;width:max-content;animation:slide 40s linear infinite}
.kband span{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:44px}
.kband span::after{content:"";width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.55);transform:rotate(45deg)}

/* Kaarten: lichtvlek volgt de muis */
.card,.opt,.review{position:relative;overflow:hidden}
.card::after,.opt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(34,209,173,.14),transparent 45%)}
.card:hover::after,.opt:hover::after{opacity:1}
.card,.opt{transition:transform .25s,border-color .25s}
.card:hover,.opt:hover{transform:translateY(-3px)}

/* Opbouw */
.buildup{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.bu-list{display:grid;gap:10px}
.bu-item{display:flex;gap:16px;align-items:flex-start;text-align:left;font:inherit;color:inherit;background:#fff;border:1px solid var(--line-l);border-radius:16px;padding:18px 20px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.bu-item:hover{border-color:#bfdad2}
.bu-item.on{border-color:var(--teal-2);box-shadow:0 18px 40px -24px rgba(15,127,106,.55);transform:translateX(4px)}
.bu-sw{width:16px;height:44px;border-radius:6px;flex:none;border:1px solid rgba(0,0,0,.08)}
.bu-txt{display:grid;gap:2px;min-width:0}
.bu-txt b{font-family:var(--display);font-size:1.1rem}
.bu-txt small{font-family:var(--mono);color:var(--teal-deep);font-size:.82rem}
.bu-desc{color:var(--muted);font-size:.96rem;max-height:0;overflow:hidden;transition:max-height .35s ease,margin .35s;margin-top:0}
.bu-item.on .bu-desc{max-height:140px;margin-top:6px}
.bu-fig{background:#fff;border:1px solid var(--line-l);border-radius:24px;padding:26px;box-shadow:0 40px 70px -50px rgba(0,0,0,.4)}
.bu-svg{width:100%;height:auto;display:block}
.bu-layer{cursor:pointer;transition:opacity .3s,transform .3s;transform-box:fill-box}
.bu-svg.focus .bu-layer{opacity:.28}
.bu-svg.focus .bu-layer.on{opacity:1}
.bu-layer:focus{outline:none}
.bu-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bu-tags span{font-family:var(--mono);font-size:.78rem;color:var(--muted);border:1px solid var(--line-l);border-radius:999px;padding:5px 11px}

/* Calculator */
.calc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:linear-gradient(150deg,#18201e,#0f1312);border:1px solid rgba(255,255,255,.1);border-radius:26px;overflow:hidden;color:#fff;box-shadow:0 50px 90px -50px rgba(0,0,0,.8)}
.calc-in{padding:40px}
.calc-row{display:flex;justify-content:space-between;align-items:baseline}
.calc label,.calc .flabel{font-weight:600;color:#dfe7e4;margin:0}
.calc output{font-family:var(--mono);font-size:1.4rem;color:var(--teal);font-variant-numeric:tabular-nums}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--teal) var(--fill,6%),rgba(255,255,255,.12) var(--fill,6%));border:0;padding:0;margin-top:16px;outline-offset:6px}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:6px solid var(--teal-2);box-shadow:0 6px 18px rgba(0,0,0,.5);cursor:grab}
.calc input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:6px solid var(--teal-2);cursor:grab}
.seg-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.seg-btns button{font:inherit;font-family:var(--mono);padding:13px 0;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e5ece9;cursor:pointer;transition:.15s}
.seg-btns button.on{background:var(--teal-btn);border-color:var(--teal-btn);color:#fff}
.calc-opts{display:grid;gap:10px;margin-top:12px}
.calc-opts label{display:flex;gap:12px;align-items:center;font-weight:500;color:#cdd6d3;cursor:pointer}
.calc-opts input{width:20px;height:20px;accent-color:var(--teal-2);padding:0}
.calc-out{padding:40px;background:radial-gradient(90% 80% at 100% 0%,rgba(34,209,173,.2),transparent 60%),rgba(255,255,255,.03);border-left:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:center}
.calc-lbl{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.calc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:clamp(1.9rem,3.2vw,2.7rem);white-space:nowrap;font-weight:800;letter-spacing:-.03em;margin:12px 0 4px;font-variant-numeric:tabular-nums}
.calc-price i{font-style:normal;color:#6f7d78;font-weight:400}
.calc-per{color:#a9b6b1;margin-bottom:26px}
.calc-note{font-size:.88rem;color:#8d9b96;margin:18px 0 0}

/* Galerij + lightbox */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;grid-auto-flow:dense;gap:14px}
.gal-item{position:relative;border:0;padding:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:#2a2f2d;font:inherit}
.gal-item.big{grid-column:span 2;grid-row:span 2}
.gal-item img,.gal-item video{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.gal-item:hover img,.gal-item:hover video{transform:scale(1.06);filter:saturate(1.1)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);color:#fff;font-weight:600;font-size:.94rem;text-align:left;transform:translateY(6px);opacity:.92;transition:.3s}
.gal-item:hover .gal-cap{transform:none;opacity:1}
.gal-play{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;font-size:1.3rem;padding-left:4px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;color:#fff}
.lightbox::backdrop{background:rgba(6,8,7,.92);backdrop-filter:blur(6px)}
.lightbox[open]{display:grid;place-items:center}
.lb-stage{max-width:min(1200px,92vw);max-height:80vh;display:grid;place-items:center}
.lb-stage img,.lb-stage video{max-width:100%;max-height:80vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-cap{position:fixed;bottom:28px;left:0;right:0;text-align:center;font-weight:600;margin:0}
.lb-close,.lb-prev,.lb-next{position:fixed;border:0;background:rgba(255,255,255,.1);color:#fff;width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.lb-close{top:22px;right:22px}.lb-prev{left:22px;top:50%}.lb-next{right:22px;top:50%}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.2)}

/* Footer-woordmerk */
.wordmark{font-family:var(--display);font-weight:900;font-size:clamp(3rem,13.5vw,12.5rem);letter-spacing:-.05em;line-height:.8;margin:70px 0 0;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);white-space:nowrap;overflow:hidden;user-select:none}
.wordmark span{-webkit-text-stroke:1px rgba(34,209,173,.4)}

/* Mobiele actiebalk */
.mbar{display:none}
@media (max-width:680px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:65;background:rgba(13,16,15,.92);backdrop-filter:blur(14px);border:1px solid var(--line-d);border-radius:18px;padding:8px;box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 6px;border-radius:12px;color:#fff;text-decoration:none;font-weight:600;font-size:.94rem;background:rgba(255,255,255,.06)}
  .mbar a svg{width:18px;height:18px}
  .mbar a:nth-child(2){color:var(--wa)}
  .mbar a.go{background:var(--teal-btn)}
  .wa-fab{display:none}
  body{padding-bottom:84px}
}

/* Responsive v2 */
@media (max-width:1020px){
  .hero.has-aside .hero-grid{grid-template-columns:1fr}
  .spec-card{max-width:520px}
  .buildup,.calc{grid-template-columns:1fr}
  .calc-out{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .calc-in,.calc-out{padding:26px}
  .hero{min-height:auto}
  .spec-card{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg,.hero-inner>*,.spec-card,.hero-sweep,.kband-track,.spec-level span,.spec-head .dot,.hero h1 .accent{animation:none!important}
}

/* Duimstok-maatlat als scheiding (echte cm-verdeling) */
.ruler{height:34px;background:#e8c25a;border-block:1px solid #c9a23f;position:relative;overflow:hidden}
.ruler::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,#1b1b1b 0 1px,transparent 1px 10px) left top/100% 7px no-repeat,
  repeating-linear-gradient(90deg,#1b1b1b 0 1.5px,transparent 1.5px 50px) left top/100% 12px no-repeat,
  repeating-linear-gradient(90deg,#1b1b1b 0 2px,transparent 2px 100px) left top/100% 18px no-repeat}
.ruler span{position:absolute;top:15px;font-family:var(--mono);font-size:11px;color:#1b1b1b;transform:translateX(4px)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.rev-grid .review{width:auto}
@media (max-width:900px){.rev-grid{grid-template-columns:1fr}}
.dark .card .ck,.card .ck{display:grid}

/* v4: tabellen en lijsten in plaats van kaartjes */
.specs{margin:34px 0 0;border-top:1px solid var(--line-l)}
.specs>div{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line-l)}
.specs dt{font-weight:700}
.specs dd{margin:0;color:var(--muted)}
.dark .specs,.dark .specs>div{border-color:var(--line-d)}
.dark .specs dd{color:var(--muted-d)}
.otable{width:100%;border-collapse:collapse;font-size:1rem}
.otable th{text-align:left;font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d);padding:0 16px 12px 0;border-bottom:1px solid var(--line-d)}
.otable td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line-d);vertical-align:top;color:var(--muted-d)}
.otable td:first-child{color:#fff;font-weight:700;white-space:nowrap;width:240px}
.paper .otable th,.light .otable th{color:var(--muted);border-color:var(--line-l)}
.timeline{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-l);max-width:980px}
.timeline li{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line-l)}
.dark .timeline,.dark .timeline li{border-color:var(--line-d)}
.tl-n{font-family:var(--mono);color:var(--teal-deep);font-size:.95rem}
.dark .tl-n{color:var(--teal)}
.timeline h3{margin:0 0 4px;font-size:1.15rem}
.timeline p{margin:0;color:var(--muted)}
.dark .timeline p{color:var(--muted-d)}
.tl-when{font-family:var(--mono);font-size:.88rem;color:var(--text);background:#eef2f0;padding:4px 10px;border-radius:4px;white-space:nowrap}
.dark .tl-when{background:#1d2422;color:#e5ece9}
.aud{gap:48px}
.aud h3{font-size:1.25rem;margin-bottom:10px}
.aud p{color:var(--muted);margin:0}
.split:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.split:has(> :only-child)>*{max-width:860px}
@media (max-width:680px){
  .specs>div{grid-template-columns:1fr;gap:4px}
  .timeline li{grid-template-columns:40px 1fr;row-gap:8px}
  .tl-when{grid-column:2;justify-self:start}
  .otable td:first-child{white-space:normal;width:auto}
}
.gal-cap small{display:block;font-weight:400;font-size:.76rem;opacity:.75;margin-top:2px}
.gal-note{font-size:.88rem;color:var(--muted-d);margin:16px 0 0}
.gal-note a{color:inherit}
.paper .gal-note{color:var(--muted)}

/* Videosectie: staande filmpjes van de klant */
.vids-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.vids-row{display:flex;gap:22px}
.vid-tile{width:270px;aspect-ratio:9/16;grid-row:auto!important;grid-column:auto!important;border-radius:16px;cursor:pointer}
.vid-tile video{width:100%;height:100%;object-fit:cover;display:block}
.vid-tile .gal-cap{font-size:1rem}
.vids-note{color:var(--muted-d);font-size:.95rem;margin-top:18px}
@media (max-width:1020px){.vids-grid{grid-template-columns:1fr}.vids-row{justify-content:flex-start}}
@media (max-width:680px){.vids-row{gap:12px}.vid-tile{width:calc(50vw - 22px)}}

/* v5: terug naar de demo-look, zonder eigen effecten die daar niet in zaten */
.dark::before,.site-footer::before,.cta-card::before,.hero::before{display:none}
.hero-sweep,.kband,.wordmark,.progress{display:none}
.hero h1 .accent{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--teal);animation:none}
.card::after,.opt::after{display:none}
.card:hover,.opt:hover{transform:none}
.hero-bg{animation:none;transform:none}

/* Offerte samenstellen */
.ot-num{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--mono);color:var(--teal);font-size:1.2rem}
.ot-num input{width:110px;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:500 1.2rem var(--mono);text-align:right}
.ot-num input:focus{outline:2px solid rgba(34,209,173,.5);background:rgba(255,255,255,.1)}
.otool input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--teal) var(--fill,6%),rgba(255,255,255,.12) var(--fill,6%));border:0;padding:0;margin-top:16px}
.otool input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:6px solid var(--teal-2);cursor:grab}
.ot-cm{grid-template-columns:repeat(8,1fr)}
.ot-hint{color:#8d9b96;font-size:.9rem;margin:10px 0 0}
.ot-extras{grid-template-columns:1fr 1fr;display:grid}
.ot-text{margin-top:10px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.ot-text::placeholder{color:#7f8c88}
.ot-sum{list-style:none;padding:0;margin:16px 0 26px;display:grid;gap:0}
.ot-sum li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.ot-sum span{color:#a9b6b1}
.ot-sum b{font-family:var(--mono);font-weight:500;text-align:right}
.otool .calc-note a{color:var(--teal)}
.ot-send{width:100%;justify-content:center}
@media (max-width:680px){.ot-cm{grid-template-columns:repeat(4,1fr)}.ot-extras{grid-template-columns:1fr}}

/* Menu: knoppen niet laten afbreken */
.nav .btn,.menu a,.menu button{white-space:nowrap}
@media (max-width:1320px){.nav{gap:12px}.menu a,.menu button{padding:10px 8px;font-size:.95rem}.nav .btn{padding:13px 18px}}

/* v6: feedback klant — mobiel menu, actiebalk, video bovenin, steden, reviews */
.burger .b-close{display:none}
.nav.open .burger .b-open{display:none}
.nav.open .burger .b-close{display:inline}
.burger span{display:inline-flex}
.menu-cta,.nav-cta-m{display:none!important}
.track .dup{display:contents}
@media (max-width:1020px){
  .nav{position:relative;z-index:1}
  .nav.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:#111514}
  .nav.open .menu{position:fixed;inset:0;z-index:-1;margin:0;border:0;display:flex;flex-direction:column;gap:0;padding:104px 22px calc(28px + env(safe-area-inset-bottom,0px));background:#0d100f;overflow-y:auto;overscroll-behavior:contain}
  .nav.open .menu>li>a,.nav.open .menu>li>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 4px;font-size:1.4rem;font-weight:700;letter-spacing:-.01em;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
  .nav.open .menu>li:not(.has-drop):not(.menu-cta)>a::after{content:"›";position:static;background:none;height:auto;width:auto;color:var(--teal);font-size:1.9rem;font-weight:400;line-height:1}
  .nav.open .menu>li>button svg{color:var(--teal);width:24px;height:24px}
  .nav.open .menu>li>a[aria-current="page"]{color:var(--teal)}
  .nav.open .dropdown{margin:4px 0 8px}
  .nav.open .dropdown a{font-size:1.08rem;padding:11px 4px;color:#cfd7d4}
  .nav.open .menu-cta{display:grid!important;gap:12px;margin-top:auto;padding-top:30px}
  .nav.open .menu-cta .btn{display:flex;justify-content:center;width:100%;padding:17px 20px;font-size:1.05rem;border-bottom:0}
  .nav.open .menu-cta .btn-teal{background:linear-gradient(180deg,#13a487,#0d8a71)}
  .nav.open .menu-cta .btn-wa{background:var(--wa)}
  .nav.open .menu-cta .btn-ghost{background:#1b2120;border:1px solid rgba(255,255,255,.12)}
  .nav.open .menu-cta svg{width:18px;height:18px}
  .nav-actions .nav-cta{display:none!important}
  .nav-actions .nav-cta-m{display:inline-flex!important;padding:11px 18px;font-size:.95rem}
  body.menu-open{overflow:hidden}
  body.menu-open .mbar,body.menu-open .wa-fab{display:none}
}
@media (max-width:680px){
  .nav-actions .icon-btn{display:none}
  .nav{padding:8px 6px 8px 16px}
  .mbar{grid-template-columns:1fr 1fr 1fr;gap:6px;padding:6px;border-radius:16px}
  .mbar a{flex-direction:column;gap:4px;padding:10px 4px;font-size:.84rem;color:#fff}
  .mbar a:nth-child(2){color:#fff}
  .mbar a.call{background:#1f2624}
  .mbar a.go{background:linear-gradient(180deg,#13a487,#0d8a71)}
  .mbar a.wa{background:var(--wa)}
  .mbar a svg{width:20px;height:20px}
}

/* Video bovenin de hero */
.hero-bg.has-video{opacity:.6;background-color:#0d100f}
.hero-bg.has-video video{object-fit:cover}
@media (max-width:680px){.hero-bg.has-video{opacity:.5}}

/* Steden in de werkwijze */
.city-band{margin-top:64px}
.city-band-lbl{text-align:center;color:var(--muted-d,#a3aeaa);font-size:.95rem;letter-spacing:.02em;margin:0 0 4px}
.city-band .marquee{margin-top:14px}
.city-track{gap:12px;padding:2px 0;animation-duration:80s}
.city-track.rev{animation-duration:95s}
.city-chip{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#e9eeec;text-decoration:none;font-weight:600;white-space:nowrap;transition:border-color .2s,color .2s}
.city-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.city-chip:hover{border-color:var(--teal);color:var(--teal)}
section:not(.dark) .city-chip{border-color:rgba(0,0,0,.1);background:#fff;color:#16201d}
section:not(.dark) .city-band-lbl{color:#5d6a66}

/* CTA "Zullen we beginnen?" */
@media (max-width:680px){
  .cta-card{padding:56px 18px}
  .cta-card .btn-row{flex-direction:column;gap:10px}
  .cta-card h2{font-size:2.3rem}
}

/* Footer mobiel: Diensten en Informatie naast elkaar, zoals in het voorbeeld */
@media (max-width:680px){
  .f-grid{grid-template-columns:1fr 1fr;gap:36px 18px}
  .f-grid>div:first-child,.f-grid>div:last-child{grid-column:1/-1}
  .site-footer li{margin-bottom:12px}
  .site-footer li a{font-size:.98rem}
  .f-grid>div:last-child .btn{width:auto}
}

/* Hamburgermenu tot 1140px: tussen 1020 en 1140 paste het volledige menu niet */
@media (min-width:1021px) and (max-width:1260px){
  .burger{display:block;order:3}
  .nav{flex-wrap:wrap;padding:10px 10px 10px 20px;position:relative;z-index:1}
  .nav-actions{margin-left:auto}
  .menu{display:none}
  .nav.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:#111514}
  .nav.open .menu{display:flex;position:fixed;inset:0;z-index:-1;margin:0;flex-direction:column;gap:0;padding:110px max(22px,calc(50vw - 300px)) 28px;background:#0d100f;overflow-y:auto}
  .nav.open .menu>li>a,.nav.open .menu>li>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 4px;font-size:1.4rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
  .nav.open .menu>li:not(.has-drop):not(.menu-cta)>a::after{content:"›";position:static;background:none;height:auto;width:auto;color:var(--teal);font-size:1.9rem;font-weight:400;line-height:1}
  .nav.open .menu a[aria-current="page"]{color:var(--teal)}
  .nav.open .menu a[aria-current="page"]::after{left:auto;right:auto;bottom:auto}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;margin:4px 0 8px;background:transparent;border:0;padding:0}
  .has-drop.open .dropdown{display:block}
  .nav.open .dropdown a{font-size:1.08rem;padding:11px 4px;color:#cfd7d4}
  .nav.open .menu-cta{display:grid!important;gap:12px;margin-top:auto;padding-top:30px}
  .nav.open .menu-cta .btn{display:flex;justify-content:center;width:100%;padding:17px 20px;font-size:1.05rem}
  .nav.open .menu-cta .btn-teal{background:linear-gradient(180deg,#13a487,#0d8a71)}
  .nav.open .menu-cta .btn-wa{background:var(--wa)}
  .nav.open .menu-cta .btn-ghost{background:#1b2120;border:1px solid rgba(255,255,255,.12)}
  body.menu-open{overflow:hidden}
}

/* Hamburgermenu tot 1140px: daartussen paste het volledige menu niet */
@media (min-width:1021px) and (max-width:1260px){
  .burger{display:block;order:3}
  .nav{position:relative;z-index:1}
  .nav-actions{margin-left:auto}
  .nav-actions .nav-cta{display:none!important}
  .nav-actions .nav-cta-m{display:inline-flex!important}
  .menu{display:none}
  .nav.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:#111514}
  .nav.open .menu{display:flex;position:fixed;inset:0;z-index:-1;margin:0;flex-direction:column;gap:0;padding:110px max(22px,calc(50vw - 300px)) 28px;background:#0d100f;overflow-y:auto}
  .nav.open .menu>li>a,.nav.open .menu>li>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 4px;font-size:1.4rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
  .nav.open .menu>li:not(.has-drop):not(.menu-cta)>a::after{content:"›";position:static;background:none;height:auto;width:auto;color:var(--teal);font-size:1.9rem;font-weight:400;line-height:1}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;margin:4px 0 8px;background:transparent;border:0;padding:0}
  .has-drop.open .dropdown{display:block}
  .nav.open .menu-cta{display:grid!important;gap:12px;margin-top:auto;padding-top:30px}
  .nav.open .menu-cta .btn{display:flex;justify-content:center;width:100%;padding:17px 20px}
  .nav.open .menu-cta .btn-teal{background:linear-gradient(180deg,#13a487,#0d8a71)}
  .nav.open .menu-cta .btn-wa{background:var(--wa)}
  .nav.open .menu-cta .btn-ghost{background:#1b2120}
  body.menu-open{overflow:hidden}
}

/* v7: hero zoals de demo — kleinere letters, helderder beeld, cijfers in de hero */
.hero:not(.sub){padding:150px 0 70px}
.hero:not(.sub) h1{font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.025em;font-size:clamp(2.3rem,4.3vw,4.1rem);line-height:1.08;margin-bottom:22px}
.hero:not(.sub) p.lead{font-size:1.18rem;max-width:540px}
.hero:not(.sub) .checks{margin:24px 0 24px;gap:10px 26px}
.hero:not(.sub) .checks li{font-size:1rem}
.hero:not(.sub) .gbadge{margin-bottom:24px}
.hero-bg.has-video{opacity:1}
@media (min-width:700px){.hero-bg.has-video{background-image:var(--wide-poster)!important}}
.hero:not(.sub)::after{background:linear-gradient(90deg,rgba(9,12,11,.88) 0%,rgba(9,12,11,.62) 45%,rgba(9,12,11,.18) 100%),linear-gradient(0deg,rgba(9,12,11,.75),transparent 30%)}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);max-width:780px}
.hstat b{display:block;font-family:'Inter',system-ui,sans-serif;font-size:clamp(1.9rem,2.8vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:var(--teal);line-height:1.1}
.hstat span{color:#c9d2cf;font-size:.95rem}
@media (max-width:680px){
  .hero:not(.sub){padding:120px 0 40px}
  .hero:not(.sub) h1{font-size:2.35rem}
  .hero:not(.sub) p.lead{font-size:1.05rem}
  .hero:not(.sub)::after{background:linear-gradient(180deg,rgba(9,12,11,.55),rgba(9,12,11,.45) 40%,rgba(9,12,11,.85))}
  .hero-stats{grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:0;overflow:hidden;background:rgba(9,12,11,.55)}
  .hstat{padding:22px 16px;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
  .hstat:nth-child(2n){border-right:0}
  .hstat:nth-child(n+3){border-bottom:0}
  .hstat span{font-size:.88rem}
}

/* Recent werk: foto's bewegen rustig naar links en rechts, zoals in de demo */
@keyframes galpan{0%{transform:scale(1.22) translateX(-8%)}100%{transform:scale(1.22) translateX(8%)}}
.gal .gal-item img,.gal .gal-item:hover img{animation:galpan 7s ease-in-out infinite alternate!important;will-change:transform}
.gal .gal-item:nth-child(2n) img{animation-direction:alternate-reverse!important;animation-duration:9s!important}
.gal .gal-item:nth-child(3n) img{animation-duration:11s!important;animation-delay:-4s!important}
.gal .gal-item:hover img{filter:saturate(1.1)}


/* Offerte tool: extra's links, etage rechts */
.ot-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.ot-cols .ot-extras,.ot-cols .ot-etage{display:grid;grid-template-columns:1fr;gap:10px}
@media (max-width:680px){.ot-cols{gap:0 12px}.ot-cols label{font-size:.93rem}}

/* Steden: locatieteken en kaartje met Den Haag */
.city-chip::before{display:none}
.city-chip .pin{width:16px;height:16px;fill:var(--teal);flex:none}
.nl-map{position:relative;width:min(300px,78vw);margin:0 auto 18px}
.nl-map svg{width:100%;height:auto;display:block;overflow:visible}
.nl-land{fill:rgba(20,168,138,.14);stroke:var(--teal);stroke-width:2.5;stroke-linejoin:round}
.nl-pin path{fill:var(--teal)}
.nl-pulse{fill:var(--teal);opacity:.35;transform-box:fill-box;transform-origin:center;animation:nlpulse 2.2s ease-out infinite}
@keyframes nlpulse{0%{transform:scale(.4);opacity:.6}100%{transform:scale(2.4);opacity:0}}
.nl-map-lbl{position:absolute;left:-58px;top:44%;font-size:.78rem;font-weight:700;color:var(--teal);letter-spacing:.02em}
section:not(.dark) .nl-land{fill:rgba(20,168,138,.1)}
@media (prefers-reduced-motion:reduce){.nl-pulse{animation:none}}
.kw-note{max-width:900px;margin:34px auto 0;color:#4f5d58;font-size:1rem}
.kw-note a{color:var(--teal-deep,#0d8a71);font-weight:600}

/* Menu met Werkgebied en FAQ: compacter zodat alles op één regel past */
@media (max-width:1600px){.nav{gap:10px;padding-left:22px}.menu a,.menu button{padding:10px 8px;font-size:.95rem}.nav .btn.nav-cta{padding:13px 18px;font-size:.95rem}}
@media (max-width:1480px){.nav-actions .icon-btn{display:none}}
@media (min-width:1261px) and (max-width:1340px){.menu a,.menu button{padding:10px 6px;font-size:.92rem}.logo b{font-size:1.25rem}}
@media (max-width:680px){.socials{gap:8px;flex-wrap:nowrap}.socials a{width:44px;height:44px}.socials svg{width:19px;height:19px}}
/* Mobiele hero: kleiner, zoals de demo */
@media (max-width:680px){
  .hero:not(.sub) h1{font-size:2.05rem;margin-bottom:16px}
  .hero:not(.sub) p.lead{font-size:.98rem}
  .hero:not(.sub) .pill{font-size:.8rem;padding:7px 12px}
  .hero:not(.sub) .checks{gap:8px 16px;margin:18px 0}
  .hero:not(.sub) .checks li{font-size:.9rem;gap:8px}
  .hero:not(.sub) .checks .tick{width:22px;height:22px}
  .hero:not(.sub) .btn-row .btn{padding:14px 18px;font-size:.98rem}
}

.nl-pin path{fill:var(--teal);transition:fill .2s}
.nl-pin g{transform-box:fill-box;transform-origin:50% 100%;animation:nldrop .6s cubic-bezier(.2,.8,.3,1.3) both;animation-delay:var(--d)}
.nl-pin:hover path{fill:#0b6b58}
@keyframes nldrop{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.nl-pin g{animation:none}}

/* v8: feedback — compactere mobiele weergave zoals de demo */
.hero .gbadge{gap:8px;padding:7px 14px;border-radius:999px;font-size:.85rem;margin-bottom:22px;box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}
.hero .gbadge .stars{font-size:.8rem;letter-spacing:1px}
@media (max-width:680px){
  html{font-size:14.5px}
  body{font-size:15px}
  section{padding:60px 0}
  .hero:not(.sub) .checks{flex-direction:column;flex-wrap:nowrap;gap:9px}
  .hero-btns{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
  .hero-btns .btn{width:auto!important;padding:13px 10px!important;font-size:.95rem!important}
  .hero-btns .btn-teal{grid-column:1/-1}
  .site-footer{padding-top:56px}
  .site-footer .logo b{font-size:1.35rem}
  .site-footer h4{font-size:1rem;margin-bottom:14px}
  .site-footer li{margin-bottom:9px}
  .site-footer li a{font-size:.9rem}
  .f-about{font-size:.92rem}
  .f-places a{font-size:.85rem}
  .f-bottom{font-size:.82rem}
}
.hero .gbadge .gword{font-size:1.05rem}
.nl-pin g path{transform:scale(.62);transform-origin:0 0}
.nl-pin g circle{transform:scale(.62);transform-origin:0 0}
.nl-map{width:min(260px,70vw)}

/* v8: desktop-hero zoals de demo: smallere balk, compacter, alles in beeld */
@media (min-width:1021px){
  .nav{max-width:1290px}
  .hero:not(.sub){padding:140px 0 60px;min-height:100vh}
  .hero:not(.sub) .wrap{max-width:1180px}
  .hero:not(.sub) h1{font-size:clamp(2.6rem,3.4vw,4rem);max-width:11em;line-height:1.1}
  .hero:not(.sub) p.lead{font-size:1.2rem;max-width:520px}
  .hero:not(.sub) .checks li{font-size:.98rem}
  .hero:not(.sub) .checks{margin:22px 0 22px}
  .hero:not(.sub) .gbadge{margin-bottom:28px}
  .hero-btns .btn{padding:15px 28px;font-size:1.02rem}
  .hero-stats{margin-top:40px;padding-top:34px}
}
/* v8: alles iets kleiner, zoals de demo */
html{font-size:15px}
body{font-size:16px}
@media (min-width:1261px){
  .nav{max-width:1400px;gap:10px;padding:10px 12px 10px 24px;border-radius:18px}
  .logo b{font-size:1.3rem}
  .logo small{font-size:.5rem}
  .menu a,.menu button{font-size:.95rem!important;padding:9px 9px!important}
  .nav-actions{gap:8px}
  .nav-actions .icon-btn{width:42px;height:42px;display:grid}
  .nav .btn.nav-cta{padding:12px 20px!important;font-size:.95rem!important}
}
@media (min-width:1261px) and (max-width:1420px){.nav-actions .icon-btn{display:none!important}.menu a,.menu button{padding:9px 7px!important}}
@media (max-width:680px){html{font-size:14.5px}body{font-size:15px}}
@media (min-width:1021px){.hero:not(.sub) h1{max-width:none}.hero:not(.sub){padding-top:130px}}
@media (max-width:1020px){.br-d{display:none}}

/* Recent werk: bewegende fotoband (twee rijen, tegengesteld) */
.gal-band-wrap{margin-top:28px;display:grid;gap:14px}
.gal-band{margin-top:0;mask-image:none;-webkit-mask-image:none}
.gal-band .track{gap:14px;padding:0;animation-duration:45s}
.gal-band .track.rev{animation-duration:52s}
.gal-band:hover .track{animation-play-state:running}
.band-tile{flex:none;width:300px;height:230px;border-radius:16px}
.band-tile.wide{width:440px}
.band-tile img{width:100%;height:100%;object-fit:cover;animation:none!important;transform:none!important}
.band-tile .gal-cap{opacity:0;transition:opacity .25s}
.band-tile:hover .gal-cap,.band-tile:focus-visible .gal-cap{opacity:1}
@media (max-width:680px){.gal-band-wrap{gap:10px;margin-left:-16px;margin-right:-16px}.gal-band .track{gap:10px;animation-duration:32s}.gal-band .track.rev{animation-duration:38s}.band-tile{width:150px;height:130px;border-radius:12px}.band-tile.wide{width:230px}}
/* Google Reviews op mobiel even breed als de offerteknop */
@media (max-width:680px){.hero .gbadge{display:flex;width:100%;justify-content:center;padding:10px 16px;font-size:1rem;gap:12px;margin-bottom:12px}.hero .gbadge .gword{font-size:1.2rem}.hero .gbadge .stars{font-size:.95rem}}
@media (prefers-reduced-motion:reduce){.gal-band .track{animation:slide 45s linear infinite!important}.gal-band .track.rev{animation-direction:reverse!important}}

/* Projecten: ingelijste kaarten met dienst, titel en wat er gedaan is (zoals de demo) */
button.proj{display:block;width:100%;padding:0;border:0;cursor:zoom-in;font:inherit;text-align:left;border-radius:14px}
button.proj img{aspect-ratio:4/3;height:auto}
button.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.05) 55%);pointer-events:none}
.proj .ptag{top:14px;left:14px;font-size:.78rem;padding:5px 11px;border-radius:999px;border:1px solid rgba(34,209,173,.35)}
.proj .pcap{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;color:#fff}
.proj .pcap b{display:block;font-size:1.15rem;letter-spacing:-.01em}
.proj .pcap span{color:#d5dcda;font-size:.88rem}
button.proj:hover img{transform:scale(1.04)}
.proj-grid{gap:16px}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:190px;gap:10px}
.more-item{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:zoom-in;background:#ddd}
.more-item.tall{grid-row:span 2}
.more-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.more-item:hover img{transform:scale(1.04)}
.more-plus{position:absolute;right:10px;bottom:10px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;font-size:1.1rem}
@media (max-width:680px){.more-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:8px}}
.ons-werk .text-link{display:inline-flex;margin-top:6px}
.gal-band-wrap.full{margin:34px 0 0}
.gal-band-wrap.full .band-tile{width:280px;height:200px}
.gal-band-wrap.full .band-tile.wide{width:280px}
@media (max-width:680px){.gal-band-wrap.full{margin-left:0;margin-right:0}.gal-band-wrap.full .band-tile,.gal-band-wrap.full .band-tile.wide{width:170px;height:125px}}
/* Langere naam (DEKVLOEREXPERTS): kleine telefoons */
@media (max-width:370px){.site-header .logo b{font-size:1rem}.site-header .logo small{font-size:.42rem;letter-spacing:.26em}.nav-actions .nav-cta-m{padding:10px 13px!important;font-size:.88rem!important}.nav{padding-left:12px}}